สร้าง web application รูปแบบ MEAN Stack Part 2 (Create and Setup project)

จากพาทที่ 1 ที่พูดถึงความหมายของ MEAN Stack ไปแบบคร่าวๆ กันไปแล้ว ในพาทนี้เราจะมาเริ่มต้นลงมือทำกันเลย

การติดตั้งโปรแกรมที่จะใช้ (ในที่นี้ผมจะไม่สอนวิธีการติดตั้งแต่จะแนบลิ้งไว้ให้นะครับ)

หลังจากติดตั้งโปรแกรมเสร็จแล้วเรามาดู Project Structure ของโปรเจคที่เราจะทำกันเลยดีกว่าในโปรเจคตัวอย่างนี้ผมจะทำเป็น app ค้นหาทีมพัฒนาโดยเราโดยจะใช้ Google Maps Javascript API มาร่วมด้วย 

Project Structure (รูปแบบโฟลเดอร์ในโปรเจค)

  • mean-example-app
    • app //Back-end
      • models
        • model.js
      • routes
        • routes.js
    • public //Font-end
      • index.html
      • js
        • app.js
        • appCtrl.js
        • gservice.js
      • css
        • style.css
    • bower_components
    • configs
      • configs.js
    • logs
      • logger.js
    • server.js // Express Server
    • package.json

Frameworks

Setup AngularJS (angular + bootstrap + modernizr)

bower install angular-route
bower install angularjs-geolocation
bower install bootstrap
bower install modernizr
วิธีติดตั้งให้ใช้ command bower ได้ คลิก

Get Google Maps JavaScript API Key

วิธีการขอคีย์เพื่อใช้งาน google map มีวิธีง่าย ๆ ดังต่อไปนี้

google-map1

กดปุ่ม Get a key

google-map2

ทำการตั้งชื่อและกด Create and enable api

google-map3

หลังจากนั้นก็จะได้คีย์มา ให้ทำการ save เก็บไว้

หลังจากติดตั้งเสร็จเรียบร้อยหมดแล้วจะได้โฟลน์ของโปรเจคดังภาพด้านล่าง
projectFile
ก่อนที่จะจบพาทนี้ ผมได้อัพโปรเจคขึ้นไปไว้บน GITHUB เรียบร้อยสามารถติดตามได้ในนั้นเลยครับ ส่วนพาทต่อไปเราจะเริ่ม implement กันเลยเตรียมตัวรอได้เลยครับ

สร้าง web application รูปแบบ MEAN Stack Part 3 (Implement P1)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s