สร้าง Web Apps ด้วย Angular + Firebase

Draft Version 0.0.1

Technology ที่ใช้สำหรับคอร์สนี้

  • Angular 4
Angular 4
  • Firebase
  • Typescript

Visual Studio Code

แนะนำ Editor สำหรับเขียนโปรแกรม ให้ได้ VS Code

และ ลง Plugin ดังนี้

  • Angular v4 Typescript Snippets
  • Angular Language Service
  • TSLint
  • Atom One Dark Themes
  • Path Intellisense

NVM = Node Version Manager

เช็คว่า มี node version อะไรบ้างบน nvm cloud

$ nvm ls-remote

ลง node version ที่ต้องการ ด้วย

$ nvm install v8.4.0

เซ็ต default เพื่อใช้ node ใน version ที่เราต้องการพัฒนา เช่น ใช้ v8.4.0

$ nvm alias default 8.4.0

default -> 8.4.0 (-> v8.4.0)

ตรวจสอบว่าได้ node, npm ที่ต้องการด้วยคำสั่ง

$ node -v
v8.4.0

$ npm -v
5.3.0

Angular 4

$ npm install -g @angular/cli

สร้าง Project ด้วยคำสั่ง ng command

$ ng new ng4-app

$ cd ng4-app

$ ng -v

Angular 4

สตาร์ท server ด้วย

$ npm start

หรือ (ng serve -o, -o ใช้สำหรับเปิด browser อัตโนมัติ )

$ ng serve -o

Angular Components

ใช้ angular cli ช่วยในการ generate components เช่นหน้า about, contact

$ cd ng4-app/src/app

$ mkdir components && cd components

$ ng g component about

$ ng g component contact

การเรียกใช้ components สามารถใช้ tag ของ selector ในการเรียก

components มาใช้ได้

Angular Routing (@angular/router)

Angular Routing ใช้ในการทำ navigate ระหว่างหน้า pages

import RouterModule ลงในไฟล์ src/app/app.module.ts

ใส่ routing ในลงใน imports section ของ app component ( ไฟล์ src/app/app.module.ts)

ในไฟล์ src/app/app.component.html

ใส่ <router-outlet></router-outlet> เพื่อแสดงรายละเอียดของ components ที่กำลังเลือกอยู่ในขณะนี้

ทดสอบ routing

หรือหากต้องการทำ Link แต่ละ page ก็สามารถใช้ routerLink ได้เช่นกันโดยการแก้ไขที่ไฟล์ (src/app/app.component.html)

Deploy Angular to Firebase

สมมุติว่าทำการพัฒนาโปรแกรมเสร็จแล้ว และต้องการดีพลอย angular ขึ้นไปไว้บน firebase มีขั้นตอนดังนี้

ทำการ compile project angular ให้เป็นแบบ production

$ ng build — target -prod

ลง firebase tools

$ npm install -g firebase-tools

เริ่มต้น environment สำหรับการการพัฒนาบน firebase

$ firebase init

เลือก Hosting เพื่อที่จะสามารถอัพโหลดไฟล์ ขึ้นไปไว้บน Firebase Hosting ได้

เลือก directory “dist” เนื่องจาก ตอนที่เรา compile angular4 จะได้ directory นี้เป็น public หรือไว้สำหรับดีพลอยงานนั้นเอง

ที่เหลือ ก็กดผ่านไป จะได้ไฟล์ firebase.json มีหน้าตาประมาณนี้

หลังจากนั้น ก็สามารถสั่ง deploy งาน ด้วยคำสั่ง

$ firebase deploy

หลังจากนั้นก็สามารถใช้งานแอพพลิเคชั่นของเราได้แล้ว

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade