Ionic 4 & Angular 7 [ Firebase ]

Firebase คือ Platform ที่รวบรวมเครื่องมือต่าง ๆ สำหรับการจัดการในส่วนของ Backend หรือ Server side ซึ่งทำให้สามารถสร้าง Mobile Application ได้อย่างมีประสิทธิภาพ โดยใช้งานในส่วนของ Cloud Firestore ซึ่งเป็นบริการทางด้าน Database โดยได้ศึกษาการใช้งานและการติดต่อกนระหว่าง ionic กับ firebase ผ่านลิงก์ https://www.djamware.com/post/5b74e54f80aca74669894413/ionic-4-and-angular-6-tutorial-firebase-realtime-crud-mobile-app โดยในตัวอย่างแบ่งเป็น 6 ส่วน ดังนี้

1: Setup Firebase
เข้าเว็บไซต์ firebase.google.com กดเพิ่มโครงการใหม่ และ ตั้งชื่อโครงการ

2: Create a New App

โดยใช้คำสั่ง ionic start ionic-firebase-crud blank ในการเริ่มโปรเจคใหม่

3: Install and Configure Firebase Module
- รันคำสั่ง npm install --save firebase ในคอมมาน เพื่อติดตั้ง module
- เปิดไฟล์ app.component.ts และเพิ่ม code ส่วนimport
 import * as firebase from 'firebase';
กด < > ที่หน้าแรกของโปรเจค firebase และคัดลอก code ส่วน config ใส่ในส่วน
const config = { }; และ firebase.initializeApp(config); เพิ่มเข้าไปในส่วน initializeApp() {}

4: Add List of Bulletin Board
- import * as firebase from 'Firebase'; ไปในส่วนที่จะใช้งานฐานข้อมูล
- สร้างตัวแปรสำหรับรับข้อมูลมาเก็บลงในฐานข้อมูล
infos = [];
ref = firebase.database().ref('infos/');
- กำหนดค่าลงในส่วน constructor

constructor(public router: Router, public loadingController: LoadingController) {
  this.ref.on('value', resp => {
    this.infos = [];
    this.infos = snapshotToArray(resp);
  });
}

- เพิ่มฟังก์ชัน
1.สำหรับ response ค่าไปที่ firebase
export const snapshotToArray = snapshot => {
    let returnArr = [];

    snapshot.forEach(childSnapshot => {
        let item = childSnapshot.val();
        item.key = childSnapshot.key;
        returnArr.push(item);
    });

    return returnArr;
};
2.สำหรับเพิ่มหัวข้อ
addInfo() {
  this.router.navigate(['/add-info']);
}
3.สำหรับแก้ไข/เพิ่มคำอธิบาย
edit(key) {
  this.router.navigate(['/edit/'+key]);
}
4.สำหรับลบโดยเลือกจากหัวข้อ
async delete(key) {
  const alert = await this.alertController.create({
    header: 'Confirm!',
    message: 'Are you sure want to delete this info?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {
          console.log('cancel');
        }
      }, {
        text: 'Okay',
        handler: () => {
          firebase.database().ref('infos/'+key).remove();
        }
      }
    ]
  });

  await alert.present();
}
จากนั้นแก้ไขหน้า html ที่ใช้แสดงผล

5: Add Page for Create  Info
- ionic g page create ในคอมมาน เพื่อสร้างหน้าใหม่ที่ชื่อ create เพิ่ม
- import form ใน app/create.module.ts เพื่อใช้งานฟอร์ม
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
- กำหนดตัวแปรสำหรับส่งค่าไป firebase

ref = firebase.database().ref('infos/');
infoForm: FormGroup;

- กำหนดค่าใน constructor

constructor(private route: ActivatedRoute,
  public router: Router,
  private formBuilder: FormBuilder) {
    this.infoForm = this.formBuilder.group({
      'info_title' : [null, Validators.required],
      'info_description' : [null, Validators.required]
    });
  }

- เพิ่มฟังก์ชันสำหรับส่งค่าข้อมูลไป firebase

saveInfo() {
  let newInfo = firebase.database().ref('infos/').push();
  newInfo.set(this.infoForm.value);
  this.router.navigate(['/detail/'+newInfo.key]);
}

แก้ไขหน้า html ที่ใช้แสดงผล

6: Show Time!