มือใหม่หัดใช้ Angular ตอนที่ 3: สร้างหน้า register และ login กับ Firebase(AngularFire) [1/2]

ตอนก่อนหน้า – มือใหม่หัดใช้ Angular ตอนที่ 2: การ install Bootstrap กับ Angular Material

หลังจากที่เราได้ทำความรู้จักกับ Angular พอหอมปากหอมคอไปแล้ว 2 อาทิตย์ ครั้งนี้เราก็จะมาเริ่มลงมือทำอะไรที่มันจริงๆจังๆกันแล้วหล่ะครับ

เพราะในวันนี้เราจะมาทำความรู้จักกับ

“Firebase!!!”

อุปกรณ์อันทรงพลังที่ทำได้สารพัดอย่าง (ซึ่งเราเองก็ยังรู้จักไม่หมด) ทั้งการทำระบบ Authentication หรือจะ Host เว็บของเราที่ Firebase ก็ได้

ซึ่งในวันนี้เราจะมาเริ่มกับอะไรง่ายๆก่อน อย่างเช่น การทำระบบ register และ login ให้กับเว็บของเรานั่นเอง

(บทความตอนนี้จะแบ่งออกเป็น 2 ตอนย่อย เพื่อไม่ให้แต่ละตอนยาวจนเกินไปนะครับ)

 

แต่ก่อนที่เราจะเริ่มทำอย่างอื่น สิ่งแรกที่เราจะเป็นต้องมีก็คือ Account ของ Firebase

1. สมัครสมาชิกของ Firebase ที่ firebase.google.com

2. แล้วเราก็จะเข้ามาสู่หน้าหลักของ Account เรา

3. กดไปที่ Add project แล้วตั้งชื่อโปรเจคของเราให้เรียบร้อย

4. เราก็จะมาเจอกับหน้าหลักในการจัดการโปรเจคของเรา

5. กดไปที่ ‘Add Firebase to your web app’ แล้วจะมาหน้าต่างประมาณนี้ขึ้นมา ซึ่งก็คือ Key ที่จำเป็นต่อการเชื่อมต่อระหว่างเว็บของเราและ Firebase นั่นเอง

 

 

สาเหตุสำคัญที่เราเลือกใช้ Firebase ก็เพราะว่า เราสามารถทำระบบ login และ register ได้อย่างง่ายๆ โดย user สามารถ login บนเว็บเราได้ถึง 7 ช่องทาง คือ

1. ไม่ระบุตัวตน (Anonymous)

2. Email/Password

3. Phone หรือผ่านทางหมายเลขโทรศัพท์

4. Google account หรือ GMail

5. Facebook

6. Twitter

7. Github

 

ซึ่งในตอนแรกนี้ เราจะมาเริ่มทำจากสิ่งที่เป็นพื้นฐานที่สุด นั่นก็คือ…

Email/Password!!!

เรามาเริ่มกันที่ขั้นตอนง่ายๆกันก่อน

1. install AngularFire2 (Firebase) ผ่านทาง Angular CLI โดยการใช้คำสั่ง

npm install firebase angularfire2 –save

2. ไปยังไฟล์ /src/environments/environment.ts แล้วแปะ Key ที่เราได้มาก่อนหน้านี้ (ในขั้นตอนที่ 5) ลงไปตามรูปแบบนี้เลย

export const environment = {
    production: false,
    firebase: {
        apiKey: ‘<your-key>’,
        authDomain: ‘<your-project-authdomain>’,
        databaseURL: ‘<your-database-URL>’,
        projectId: ‘<your-project-id>’,
        storageBucket: ‘<your-storage-bucket>’,
        messagingSenderId: ‘<your-messaging-sender-id>’
    }
};

3. ไปยัง /src/app/app.module.ts และ import AngularFire2 ลงในโปรเจคของเรา

import { AngularFireModule } from ‘angularfire2’;
import { environment } from ‘../environments/environment’;

@NgModule({
imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
], …
})

ซึ่งในการทำเว็บของเราในครั้งนี้ ต้องการใช้ทั้งบริการ authentication และ database ของ Firebase ก็ให้ import 2 ตัวนี้ลงไปด้วย

import { AngularFireDatabaseModule } from ‘angularfire2/database’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;

@NgModule({
    imports: [
        …,
        AngularFireDatabaseModule, // สำหรับการใช้ database
        AngularFireAuthModule, // สำหรับการใช้ authentication
    ], …
})

 

กลับมาที่หน้าเว็บของเราบ้าง แน่นอนว่าเราคงไม่อยากเขียนโค้ดทุกหน้าลงอยู่ในหน้าเดียวใช่ไหมหล่ะ? สิ่งที่เราจะทำก็คือ… การสร้าง component ใหม่

component ต่างๆใน Angular ก็เปรียบเสมือนส่วนต่างๆของเว็บไซต์ของเรา เว็บของเรา 1 หน้าสามารถประกอบไปด้วยหลายๆ component ก็ได้นะ แต่ในตอนนี้หน้า register ของเราไม่ได้มีความซับซ้อนอะไรมาก เลยเราจะถือว่าหน้า register เป็น 1 component

การสร้าง component ก็ทำได้ไม่ยากเลย จะสร้างผ่าน Angular CLI หรือจะทยอยสร้างทีละไฟล์แล้ว import component ให้ถูกต้องก็ได้เช่นกัน โดยถ้าหากจะสร้าง component ผ่าน Angular CLI ก็ทำได้โดยการใช้คำสั่ง

ng generate component register

หรือ เขียนสั้นๆได้เป็น

ng g c register

สิ่งที่คำสั่งนี้ทำก็คือ

• เพิ่มโฟลเดอร์ ‘register’ ในโฟลเดอร์ src/app/
• สร้างไฟล์ 4 ไฟล์
  • register.component.css
  • register.component.html
  • register.conponent.spec.ts
  • register.component.ts
• เพิ่มคำสั่ง import ตัว component register ลงในไฟล์ src/app/app.module.ts

import { RegisterComponent } from ‘./register/register.component’;

• declare ตัว component ใหม่ในไฟล์ src/app/app.module.ts

@NgModule({
declarations: [
AppComponent,
RegisterComponent,
…

 

เพียงเท่านี้ เมื่อเราไปที่ src/app/app.component.html แล้ว พิมพ์

<app-register></app-register>

 

เราก็จะได้อะไรหน้าตาประมาณนี้

น่ารักใช่ไหมหล่ะ คุ้นๆหรือเปล่า? เพราะมันเหมือนกับตอนที่เราสร้างโปรเจคกันตอนแรกๆนั่นเอง

ไว้ตอนถัดไปเรามาตกแต่งหน้าตา พร้อมกับทำให้ระบบให้ user สามารถ register และ login กับเว็บของเราได้กันเถอะ