การต่อ DataBase ผ่าน Cloud Firestore

เราต้องการอยากจะเก็บ Data ไว้ใน Database แต่เก็บไม่ได้ เลยเก็บไว้ใน Cloud Firestore แทน และเราจะเพิ่ม Data ฝั่ง User ไปให้ทีหลัง เริ่มนี่เราจะทำให้สามารถ เรียกดู เพิ่มได้ ส่วนฟังก์ชันอื่นจะตามมา เช่น ลบ แก้ไข

Create Project

เริ่มต้นเราสร้างโปรเจ็กต์ชื่อ printer-shop ด้วยคำสั่ง

ng new printer-shop 
> y 
> css 
cd printer-shop
code . 
ng serve

Create Cloud Firebase

เปิด Firebase ลิงค์นี้ https://console.firebase.google.com/ เพิ่มโปรเจ็กต์ ชื่อ printer-shop > ปิด Analytics > สร้างโปรเจ็กต์ > แล้วคอย

เสร็จแล้วเลือกโปรเจ็กต์ที่สร้างชื่อ printer-shop

ตรงไปที่ Database เลือก Cloud Firebase แล้วสมัครให้เรียบร้อย

เมื่อเสร็จแล้วจะได้หน้าตาประมาณนี้มา ถ้าเริ่มจะยังไม่มี Data เน้อ ตัวนี้ลองทำไปก่อนแล้ว

Config Cloud Firebase

เราจะทำการติดต่อไป Cloud Firebase แล้วน่ะ ด้วยการไปกดที่ เครื่องหมายเกียร์หรือฟันเฟือง หรือตั้งค่า แล้วเลือก (การตั้งค่าโปรเจ็กต์) และ COPY ส่วน firebaseConfig = {….} มาทั้งหมดเลย ไปเก็บไว้ที่ไฟล์ environment.ts ไปวางในส่วนของ export const environment = {…..} เสร็จและบันทึก

ติดตั้ง ng add @angular/fire@next เลือกโปรเจ็กต์ที่เราสร้างไว้ในฝั่ง Firebase

ติดตั้ง npm install @angular/fire firebase — save เพื่อที่จะเอาไปเขียนไว้ในไฟล์ package.json

Start

เริ่มต้นเราจะไปที่ไฟล์ app.component.html ลบโค้ดที่อยู่ออกให้หมดเลย คงเหลือไว้เท่านี้

เราจะได้ผลลัพธ์ ออกมาได้แบบนี้

แล้วไปที่ไฟล์ app.module.ts แล้ว import สองตัวนี้เข้ามา เสร็จแล้วบันทึกเลยเน้อ

import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";

สร้าง Component : Documents ด้วยคำสั่ง [ng g c documents]

ไปที่ไฟล์ documents.component.ts แล้วเพิ่มโค้ดดังนี้ เพื่อให้สามารถเพิ่ม data เข้าไปใน database ได้

ฝั่ง Templete ไฟล์ documents.component.html แล้วเพิ่มโค้ดนี้ เพื่อให้แสดง Data ออกมาให้เรา เมื่อเราคลิกเพิ่ม เราก็จะได้ Data เพิ่ม และเมื่อเรากดปุ่ม Edit มันจะลงไปยัง Page ID นั้นๆ

ส่วนที่ใช้ตกแต่ง Style CSS ไปที่ไฟล์ documents.component.css

อย่าลืมไปกำหนด Path ที่ไฟล์ app-routing.module.ts เพื่อให้สามารถลิงค์ไปได้

ผลลัพธ์ที่ได้ เมื่อเรากดปุ่ม ADD เราจะได้ Data มาตัวหนึ่ง ที่ถูกส่งไปเก็บยัง Database แล้ววนกลับมาแสดงให้เราอีกที

เมื่อเราได้อย่างนี้แล้ว จะเห็นว่าเรามีอีก ปุ่มหนึ่งที่ยังไม่ได้โค้ดให้ เราจะเร่ิมด้วยการ สร้าง [ng g c documents/edit-document]

พอได้แบบนี้มาแล้ว ไปที่ไฟล์ edit-document.component.ts แล้วเพิ่มโค้ดดังนี้ เพื่อกดปุ่มแล้วลิงค์ไปยัง Page ID นั้นได้

ต่อไปที่ไฟล์ edit-document.component.html เพิ่มโค้ดนี้ เพื่อให้แสดง Data เฉพาะ ID นั้นๆ

และเพิ่ม Path ให้สามารถลิงค์ไปได้ ให้ไปที่ไฟล์ app-module.module.ts แล้วเพิ่มโค้ดส่วนนี้

มาดูผลลลัพธ์ เมื่อเราคลิกปุ่ม EDIT จะลิงค์ไปเฉพาะ id ตัวนั้น

เมื่อเราไปดูที่ Database จะพบ Data เพิ่มเข้ามา

อะเค ประมาณนี้ แต่ยังไม่สามารถแก้ไขได้น่ะ ไว้ต่อกันอีกเน้อ >>>