มาเขียน Angular เชื่อมต่อกับ Firebase กันเถอะ CRUD #1 ตอนที่ 1

ช่วงนี้ห่างหายจากการเขียน Blog ไปนานพอสมควร วันนี้รู้สึกว่าถ้าเราเข้าไปอ่านอะไรแล้วไม่ได้เข้ามาเขียนใน Blog เหมือนว่าจะลืม วันนี้เลยมาลองเขียน Angular เช่ือมต่อกับ Firebase ถ้าไม่เขียนไว้คงลืมแน่ๆๆ เผื่อลืมจะได้กลับมาอ่านได้อิอิ ถ้าผิดพลาดประการใดก็ขออภัยด้วยน่ะจ๊ะ และช่วยแก้ไขหรือเพิ่มเติมให้กันด้วยน๊าา จะได้รู้ว่าเข้าใจถูกหรือไม่

Angular version อะไรล่ะที่เราจะเขียนกันในวันนี้ ก็จะเป็น Version 4.2.4 น่าจะเป็น Version ล่าสุดล่ะ ที่ลงผ่าน Angular CLI

ทำไมถึงต้องเชื่อมต่อกับ Firebase ล่ะ ก็มันทำ api ให้เราเลยไงล่ะ เราไม่ต้องเข้าไปเขียน Api อะไรสักอย่างเลยเป็นแบบ Realtime ด้วย แค่เรียก library ของ firebase ก็สามารถที่จะเชื่อมต่อกับ Firebase และสามารถที่จะเพิ่ม ลบ แก้ไข แสดงข้อมูลได้อีกด้วย แถมยังมีการ login ต่างๆ เช่น Google, Facebook ให้เราอีกด้วยแค่ config นิดๆหน่อยก็สามารถที่จะใช้ Feature นี้ได้แล้ว และก็มี Feature อื่นๆอีกมากมายให้เล่นกัน แต่วันนี้เรามา เพิ่ม ลบ แก้ไข แสดงข้อมูล ใน Firebase กัน

เรามาเริ่มกันที่ Firebase กันก่อนเลย

• ใครยังไม่มี Account Gmail สมัครกันก่อนเนอะ
• เข้าไปยัง https://firebase.google.com/ และกดที่ GO TO CONSOLE

• เข้ามายังหน้า Console ของ Firebase กันก่อนเนอะ เสร็จแล้วก็กดปุ่ม Add project

• เมื่อกดปุ่ม Add project แล้วก็จะแสดงดังภาพเพื่อให้ตั้งชื่อฐานข้อมูลที่ต้องการและเลือกประเทศ

• กรอกชื่อฐานข้อมูลที่เราต้องการได้เลย เมื่อกรอกฐานข้อมูลที่เราต้องการแล้วให้กดปุ่ม CREATE PROJECT

• เมื่อกดปุ่ม CREATE PROJECT แล้วจะแสดงหน้าจอดังภาพเพื่อทำการจัดการข้อมูลของ Project นี้

• เมื่อเราหน้ามาหน้าจอนี้แล้วและกดที่ Database ในหน้านี้ตอนนี้ข้อมูลของเรายังเป็นค่าว่างและเมื่อมีการเพิ่มข้อมูลจะแสดงที่หน้าจอนี้

• เมื่อเราต้องการที่จะเข้าถึงฐานข้อมูลของเรา จะต้องเข้าไปตั้งค่าใน Database และเลือก RULES เพื่อกำหนดการอ่านหรือการเขียนฐานข้อมูล

• ในการทำตัวอย่างครั้งนี้ขอกำหนดให้สามารถที่จะเขียนและอ่านได้ โดยใส่ true ทั้ง read และ write ดังภาพ แต่ถ้านำไปใช้งานจริงๆ สิ่งที่น่ากังวลคือโค้ตทุกอย่างที่ทำงานบน Client side ถ้าหากไม่ดูเรื่องของ RULES ดีๆแล้วอาจจะทำให้โดนแฮคก็ได้นะ เมื่อเราเปลี่ยนแปลง RULES แล้วจะมีปุ่มให้กด ถ้าตกลงก็กดปุ่ม PUBLISH แต่ถ้าไม่ต้องการที่จะเปลี่ยนแปลงก็กดปุ่ม DISCARD ได้เลย

• หน้าจอนี้จะเป็นกดปุ่ม PUBLISH เพื่อเปลี่ยนแปลงค่าของ RULES และยังคงถามต่ออีกรอบ ถ้าเรามั่นใจว่า RULES ของเราสามารถที่จะอ่านและเขียนได้แบบ สารณะเราก็กดปุ่ม DISMISS เลย แค่นี้ฐานข้อมูลที่เราจะใช้ก็สามารถทั้งเขียนและอ่านได้แล้ว

• ในหน้าจอนี้สังเกตตรง Simulator เราสามารถที่จำลองที่จะสามารถอ่านหรือเขียนข้อมูลได้หรือเปล่าได้ด้วยการกดปุ่ม RUN แล้วก็จะมีข้อความแสดงให้เราเห็นว่า อนุญาติ หรือ ว่าปฎิเสธ การเขียนหรือเขียนฐานข้อมูลหรือเปล่า

• เมื่อเรากำหนดสิทธิ์การเข้าถึงของฐานข้อมูลและข้อมูลคร่าวๆของ Firebase แล้วต่อไปเรามาเริ่มเพิ่มข้อมูลเข้าไปยัง Firebase ด้วย Angular กันเถอะ Let! go
• วันนี้เราจะสร้างโปรเจคด้วย Angular CLI กันน่ะจ๊ะ ถ้าใครยังไม่เคยใช้สามารถอ่านได้ที่นี่ และใครที่ยังไม่ได้ลง Angular CLI ก็สามารถที่จะอ่านวิธีลงได้ที่นี่

เมื่อเรามี Angular CLI แล้วมาสร้างโปรเจคกันเถอะ

• เปิด Terminal ขึ้นมาเลย แล้วเข้าไปยัง path folder ที่เราจะสร้างโปรเจคด้วยคำสั่ง ng new ตามด้วยชื่อโปรเจค
• ในที่นี่เราจะสร้าง wiki กัน ด้วยคำสั่ง ng new wiki เมื่อพิมพ์คำสั่งแล้วจะได้ผลลัพธ์ดังภาพ

• เมื่อ Run คำสั่ง ng new ตามด้วยชื่อโปรเจคเจ้าตัว Angular CLI ก็จะสร้างไฟล์ต่างขึ้นมา
• เมื่อต้องการที่จะ Start project
• Run คำสั่ง ng serve ก็จะได้หน้าจอดังภาพ แสดงรายละเอียดต่างๆ เช่น รันผ่าน port อะไร และเข้าไปยัง URL โปรเจคของเราด้วย URL http://localhost:4200

• เมื่อเราเข้าไปยัง URL : http://localhost:4200 จะแสดงดังภาพ

• เมื่อเข้าไปดู Source code ก็จะได้ดังภาพ

• เข้าไปดูในไฟล์ package.json เราจะได้โปรเจค wiki ที่เป็นภาษา angular version 4.2.4

• เมื่อเราสร้างโปรเจคได้แล้ว เราก็มาเชื่อมต่อโปรเจคของเรากับ Firebase กัน
• Run คำสั่งนี้ เพื่อทำการ import libary angularfire2 firebase ต่างๆเข้าโปรเจคและเพิ่ม lib เข้าไปยัง package.json ให้อัตโนมัติ

npm install angularfire2 firebase --save

• เมื่อเข้าไปเปิดไฟล์ package.json จะเห็นว่ามี lib ของ Firebase เพิ่มเข้ามาแล้ว

• อธิบายโครงสร้างไฟล์คร่าวๆๆ ใน Angular สักแปป
• ในไฟล์ main.ts ใน บรรทัดที่ 4 เป็นการ import AppModule เริ่มต้นของโปรเจคแล้วนำไปใส่ใน boostrapModule ซึ่งเจ้าตัว AppModule ถ้าเราเข้าไปดูจะมีการ config ต่างๆๆมากมายเพื่อทำให้ app ของเราสามารถใช้สิ่งๆต่างๆๆได้เช่น import component ใน declarations

ไฟล์ main.ts

• ในไฟล์ app.module.ts
• สังเกตที่ boostrap ซึ่งเป็น root component หลักของ Project ที่จะเชื่อมโยงไปยังส่วนอื่นๆของโปรเจค ในนี้จะใช้ AppComponent เป็น root component ของโปรเจค ซึ่งสามารถกำหนดได้ที่ Root module เท่านั้น
• declarations เป็นตัวเพิ่ม component เข้ามายัง app ของเรา ถ้าเราใช้ Angular CLI ในการสร้างไฟล์ component เนี่ยแหละจะยัด component ของเราเข้าไปยัง declarations เพื่อทำการ import เข้ากับโปรเจคว่า component นี้มีอยู่โปรเจคของเรานะ
• import เป็นการเรียกใช้ class ต่างๆ ที่ถูกใช้งานผ่าน component template

ไฟล์ app.module.ts

ไฟล์ app.component.ts ใน @component ก็จะสามารถกำหนดค่าต่างๆในนี้ได้เช่น

• selector สามารถที่จะกำหนดไอดีของ component นี้ว่าจะตั้งชื่อว่าอะไร ซึ่งเป็นตัวบ่งบอกว่า Component ของเราชื่อว่าอะไร
• templateUrl เป็นการกำหนด layout ต่างๆ ของ component เราว่าอยากให้แสดงหน้าตาแบบไหนบ้าง สามารถที่จะเขียนเป็นไฟล์ดังตัวอย่าง และสามารถที่จะเขียนลงไปในนี้ได้เลยแต่ต้องเปลี่ยนชื่อเป็น template ซึ่งถ้ามี Code เยอะก็ควรจะเขียนเป็นไฟล์น่าจะดีกว่าเนอะ เวลาที่อ่าน Code จะได้อ่านง่าย
• styleUrls สามารถที่จะกำหนดความสวยงามของ component ตัวนี้ได้ว่าอยากได้หน้าตาแบบไหน

ไฟล์ app.component.ts

• ไฟล์ index.html จะมี component ที่ชื่อ <app-root></app-root>เป็น root component ของ app เรา ซึ่งเป็นตัวบ่งบอกว่า component นี้ชื่ออะไร เราสามารถไปหาว่า template นี้มีหน้าตาอย่างให้ดูที่ selector ของ @component ซึ่งในโปรเจคนี้จะเชื่อมไปยังไฟล์ app.component.ts และ selector แบบนี้ <app-root></app-root> ก็จะสามารถใช้ได้ทุกหนทุกแห่งในโปรเจคของเราด้วย แหมมฉลาดเชียวน่ะ ยิ่งถ้ามี component ไหนที่ซ้ำๆกันเราจะแค่นำ selector ตัวนี้ไปวางก็เสร็จแล้วว สบายเลยแบบนี้ โค้ตของเราก็จะไม่ซ้ำซ้อนอีกด้วย แต่อันนี้เป็น Root ของ app เราก็ใส่ไว้ที่นี่ที่เดียวน่ะ แต่ถ้าเป็น component อื่นๆๆที่เราสร้างขึ้นมานั้นแหละสามารถที่จะนำไปใช้ได้ทุกหนทุกแห่ง

ไฟล์ index.html

• อธิบายพอจะเข้าใจหรือเปล่าน่ะ สมมุติว่าเราเข้าใจพอสมควรแล้วเนอะๆๆ
• เรามาทำหน้าจอเพิ่มข้อมูลลงใน Firebase กันเนอะ
• เริ่มต้นเรามาสร้างหน้าสำหรับเพิ่มข้อมูลลงใน Firebase กันก่อนเนอะ หลังจากที่เราสร้างโปรเจคด้วย Angular CLI ก็จะมีไฟล์ต่างๆมากมายให้ไปที่ไฟล์ app.component.html อยู่ใน Folder src/app
• เรามาเขียนโค้ตกัน เรื่องความสวยงามเราไปเขียนทีหลังกันเนอะ เขียน Code ไว้ในไฟล์ app.component.html

<h1>Add Wiki</h1>
<form (ngSubmit)="addWiki(wikiForm)" #wikiForm="ngForm">
<label for="name"> Name</label>
<input type="text" name="name" ngModel>
<label for="description"> Description</label>
<textarea name="description" ngModel></textarea><br>
<button type="submit">Submit</button>
</form>
<a routerLink="/">Back To Wiki List</a>

• ใส่ความสวยงามนิดหน่อยพอประทังชีวิตของหน้าจอสักนิดน่ะจ๊ะ ที่ไฟล์ app.component.css

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
font-size: 14px;
box-sizing: border-box;
}
textarea{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
font-size: 14px;
box-sizing: border-box;
}
button{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
color: #000000;
font-size: 14px;
box-sizing: border-box;
}

• เมื่อเราเขียนโค้ตเมื่อกี้เสร็จแล้ว มาดูที่หน้าจอกัน เราจะเจอ Error ดังรูป เพราะว่าตอนนี้เรามาใช้เกี่ยวกับ Form ของ Angular แล้วพวก NgForm และอื่นๆๆ เราต้อง import FormsModule เพื่อใช้งาน

• ทำการ import FormsModule ดังภาพในไฟล์ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';
@NgModule({
declarations: [
     AppComponent
],
imports: [
    BrowserModule,
    FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

• เมื่อ import เสร็จแล้วเราก็จะได้ หน้าจอแบบนี้ซึ่งไม่สวย อิอิ Error ที่เกิดขึ้นก่อนหน้านี้ก็จะหายไปในกลีบเมฆ

• เข้าไปยังไฟล์ app.component.ts เพื่อสร้าง method สำหรับการกดปุ่มเพื่อเพิ่มข้อมูล

• เมื่อเข้าไปที่หน้าจอของโปรเจคของเรา ลองเพิ่มข้อมูลและทำการกดปุ่มสังเกตที่ console จะเห็นข้อมูลที่เรา print ไว้ เมื่อเรามีข้อมูลพร้อมแล้ว เราก็ทำการต่อ Angular กับ firebase กัน ว่าแต่ถ้าใครเข้า console ไม่เป็น ให้ click ขวาแล้ว เลือก Inspect นะจ๊ะก็จะมี tab console ให้กดเลือกเลยจ๊ะ

• สร้างไฟล์ firebase.config.ts ใน Folder environments และนำค่าต่างๆมาจาก Firebase

• เข้าไปยัง console firebase https://console.firebase.google.com/ และเลือกโปรเจคของเราจะเจอหน้าจอนี้ และกดที่ Add Firebase to your web app

• เมื่อเลือก Add Firebase to your web app แล้วทำการ copy config เข้าไปไว้ในไฟล์ firebase.config.ts

• เมื่อมีข้อมูล Firebase แล้วให้เพิ่ม config เข้าไปยัง module ของ app เรากัน
• เข้าไปที่ไฟล์ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';
import { AngularFireModule} from 'angularfire2';
import { firebaseConfig } from './../environments/firebase.config';
import { AngularFireDatabaseModule } from 'angularfire2/database';
@NgModule({
declarations: [
  AppComponent
],
imports: [
   BrowserModule,
   FormsModule,
   AngularFireModule.initializeApp(firebaseConfig),
   AngularFireDatabaseModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

• เมื่อ import class firebase แล้วเราก็สามารถที่จะเชื่อมต่อกับ firebase ได้แล้ว
• เข้าไปที่ไฟล์ app.component.ts เพื่อที่จะเรียกเขียนโค้ตเพิ่มข้อมูลเข้าไปใน firebase

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import {AngularFireDatabase} from 'angularfire2/database';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private db: AngularFireDatabase){}
addWiki(data: NgForm){
     this.db.list("/wikis").push(data.value);
}
}

• เมื่อเขียนโค้ตกันเสร็จแล้วก็ไปลองทดสอบเพิ่มข้อมูลเข้าไปยัง Firebase กัน ซึ่งทุกใน Firebase เราไม่จำเป็นที่จะไปตั้งชื่อฐานข้อมูลหรือเขียน structure ฐานข้อมูลอะไรเลยแค่เรากำหนดใน Code ก็จะทำการสร้างข้อมูลตามนั้นเลย

• เมื่อลองเพิ่มข้อมูลแล้วเราก็เข้าไป Firebase เพื่อดูผลลัพธ์กัน เข้าไปยัง https://console.firebase.google.com/ และเลือก Project ที่เราต้องการและเลือก Database จะเห็นข้อมูลที่เราเพิ่มเข้ามา จากโค้ตที่เราเขียนเรากำหนดไว้ว่าชื่อฐานข้อมูลของเราชื่อ wikis และเมื่อมีการเพิ่มข้อมูลเข้าก็จะลงใน wikis ซึ่ง id ทาง Firebase จะ Generate auto

• เมื่อเราเพิ่มข้อมูลได้แล้วเราก็ต้องอยากที่จะดึงข้อมูลมาแสดงเนอะ เอ๊ะๆๆแต่เดียวก่อน เราต้อง สร้างไฟล์สำหรับเพิ่มข้อมูลก่อน เพราะว่าหน้าจอแรกเราจะแสดงข้อมูลแล้ว เราไม่อยากที่เข้ามาหน้าจอแล้วเห็น Form การเพิ่มข้อมูล
• Run คำสั่ง ng g c addWiki จะแสดงดังภาพ

• เมื่อเข้ามาดูในProject ของเรา จะเห็นว่ามีไฟล์เพิ่มเข้ามาและที่สำคัญเข้าตัว Angular CLI เนี่ยยังเพิ่ม component ของเราเข้าไปยัง app.module.ts ให้เราอีกแล้วว สบายเราเลย

• หลังจากนั้นเราก็ย้ายโค้ตสำหรับเพิ่มข้อมูลไปไว้ใน addWiki กันเลย
• ในไฟล์ add-wiki.component.css ก็ไปนำโค้ตมาจากไฟล์ app.component.css และ copy มาวางเลยฮ่ะหรือพิมพ์เองก็ได้นะจ๊ะ จะได้จำได้
• ในไฟล์ add-wiki.component.html ก็ไปนำโค้ตมาจากไฟล์ app.component.html และ copy มาวางเลยฮ่ะหรือพิมพ์เองก็ได้นะจ๊ะ จะได้จำได้
• ในไฟล์ add-wiki.component.ts เพิ่มโค้ตตัวพิมพ์หนาๆเข้าไปน๊ะจ๊ะ copy ไม่ได้ทั้งหมดไม่ได้

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {AngularFireDatabase} from 'angularfire2/database';
@Component({
    selector: 'app-add-wiki',
    templateUrl: './add-wiki.component.html',
    styleUrls: ['./add-wiki.component.css'],
})
export class AddWikiComponent implements OnInit {
constructor(private db: AngularFireDatabase) { }
ngOnInit() {}
addWiki(data: NgForm){
     this.db.list("/wikis").push(data.value);
}
}

• หน้าแรกเรามี Requirement ว่า อยากแสดงข้อมูล Wiki ที่เราทำการเพิ่มให้แสดงในหน้าแรกเลย และมี Link เพื่อกดไปเพิ่มข้อมูล
• ให้เราสร้าง component ชื่อ home เพื่อแสดงข้อมูล ด้วยคำสั่ง ng g c home

• มาเพิ่ม Code ลงไปในไฟล์ home.component.html ในไฟล์นี้เรามาให้ กด Link แล้วไปยังหน้า เพิ่มข้อมูลกันก่อนเนอะตามโค้ตนี้เลย

<a routerLink="/addWiki">Add wiki</a>

• แสดงว่า เราจะต้องนำ Router ของ angular เข้ามาช่วยแล้วเพื่อให้สามารถไปยัง path /addWiki เมื่อเราอยากใช้งาน Router เราต้องทำไงกันล่ะ import ใน app.module.ts สิค่ะ รออะไร ตัวหนาๆนะจ๊ะที่เพิ่มเข้ามาใหม่

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';
import { AngularFireModule} from 'angularfire2';
import { firebaseConfig } from './../environments/firebase.config';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
    {path: 'addWiki', component: AddWikiComponent}, //ในส่วนนี้เป็นการเรียก addwikicomponent เมื่อ path เป็น addWiki
];
@NgModule({
declarations: [
  AppComponent
],
imports: [
   BrowserModule,
   FormsModule,
   AngularFireModule.initializeApp(firebaseConfig),
   AngularFireDatabaseModule,
   RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

• จะเห็นว่า เมื่อเรากดปุ่ม Add wiki หน้าจอเพิ่มข้อมูลจะไม่แสดงขึ้นมา

• ให้เพิ่ม <router-outlet></router-outlet>เข้าไปยังไฟล์ app.component.html เจ้าตัวนี้แหละจะเป็นคนคอยสลับเส้นทางให้เราเองว่าควรใช้ component ตัวไหน

<router-outlet></router-outlet>

• เมื่อเพิ่มเสร็จแล้ว เวลาที่เรากดปุ่ม Add wiki ก็จะแสดงหน้าจอเพิ่มข้อมูล

• เราบอกว่า ถ้ากด Back To Wiki List จะไปที่หน้าแสดงข้อมูล ซึ่งเราจะกำหนด path เป็น / จะต้องเข้าไปที่ home ซึ่งหน้านี้จะแสดงข้อมูลที่ได้จากการเพิ่มข้อมูลลงใน Firebase มาแสดงยังหน้า Home และถ้าไม่เจอ path ไหนก็จะให้ไปที่ path เป็น /
• เราต้องเข้าไปเพิ่มในไฟล์ app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';
import { AngularFireModule} from 'angularfire2';
import { firebaseConfig } from './../environments/firebase.config';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
    {path: 'addWiki', component: AddWikiComponent},
    {path: '', component: HomeComponent},
    {path: '**', redirectTo: '/', pathMatch: 'full'}
];
@NgModule({
declarations: [
  AppComponent
],
imports: [
   BrowserModule,
   FormsModule,
   AngularFireModule.initializeApp(firebaseConfig),
   AngularFireDatabaseModule,
   RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

• มาดึงข้อมูลจาก Firebase มาแสดงยังหน้า home กัน
• ในไฟล์ home.component.ts ให้เพิ่ม Code ดังนี้
• เจ้าตัว AngularFireDatabase เป็นตัวที่ดึงข้อมูลมากจาก Firebase ซึ่งก็จะมีให้หลาย Method สำหรับ action ต่างๆ ซึ่งตอนนี้เราอยากได้แสดงข้อมูลเราจะใช้ .list ตามด้วยชื่อ object ที่เราเพิ่มข้อมูลไปใน Firebase ซึ่งชื่อ wikis
• เมื่อเราได้ข้อมูลมาแล้วก็จะนำ FirebaseListObservable เข้ามารับ list ที่ได้จากการดึงข้อมูลมาจาก Firebase

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
wikiList: AngularFireList<any>;
wikis: any[];
constructor(db: AngularFireDatabase) {
this.wikiList = db.list('wikis');
}
ngOnInit() {
this.wikiList.snapshotChanges().map(actions => {
return actions.map(action => ({ key: action.key, value: action.payload.val() }));
}).subscribe(items => {
this.wikis = items;
});
}
}

• เมื่อเราได้ List ข้อมูลของ Wiki แล้วจะนำข้อมูลไปแสดงกันต้องเพิ่มเข้าไปในไฟล์ home.component.html ในโค้ต *ngFor ซึ่งจะบอกว่าเป็นการวนข้อมูลให้แสดงใน td ซึ่งจะ Binding data ด้วย {{ }} เพื่อให้แสดงข้อมูล let data เป็นการประกาศตัวแปร เพื่อรับข้อมูลจาก wikiList ซึ่งมาจากโค้ตเมื่อกี้ที่เราดึงข้อมูลจาก Firebase มาใส่ตัวแปรนี้

<a routerLink="/addWiki">Add wiki</a>
<table class='table'>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of wikis">
<td>{{data.value.name}}</td>
<td>{{data.value.description}}</td>
</tr>
</tbody>
</table>

• เพิ่มความสวยงามให้ table สักนิด ชีวิตจะแจ่มใสไหมน่ะ ในไฟล์ home.component.css

.table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #F1EFEF;
width: 100%;
}
.table  td, th {
border-left: 1px solid #CFCACA;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5rem 1rem;
}
.table  thead {
background-color: #02348A;
color: #F3EDED;
text-align: left;
vertical-align: bottom;
}

• เมื่อเพิ่มโค้ตเสร็จแล้ว เรามาดูผลลัพธ์กัน

รู้สึกว่าเหมือนกระทู้นี้จะเริ่มยาวล่ะ หลังจากที่เราได้ผ่านมรสุมมาเยอะแยะมากมายกับการเพิ่มข้อมูล แสดงข้อมูล ต่างๆมากจาก Firebase ซึ่งกว่าจะได้ผ่านขั้นตอนมาเยอะแยะมากมาย ในส่วนของการลบข้อมูล แก้ไขข้อมูล เดี๋ยวเราไปต่อกันในกระทู้ต่อไปกันน๊ะจ๊ะ

สามารถเข้าไปอ่าน มาเขียน Angular เชื่อมต่อกับ Firebase กันเถอะ CRUD #2 (ตอนที่ 2) ได้ที่นี่ น๊าา

สามารถดู source code ได้ที่นี่ https://github.com/phatpan/wiki

กระทู้นี้ผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วยนะจ๊ะ

ชอบเขียนกระทู้เพราะมันจะทำให้เราได้ทบทวนสิ่งที่เราอ่านมาและเมื่อเราลืมก็สามารถกลับมาอ่านได้อีกน๊าาา บ๊ายๆเจอกันกระทู้ต่อไป