เเนะนำ : Set up Firebase สำหรับการเขียน Web Application เเบบ MEAN Stack

สอน Setup Firebase สำหรับใช้ในการทำ web application เเบบ MEAN Stack

Firebase Real Time Database คือ..

Firebase เป็น NoSQL cloud database เก็บข้อมูลในรูปแบบ JSON ที่มีการ sync ข้อมูลกับ devices แบบ real times และมีการจัดการข้อมูลขณะ offline โดยข้อมูลจะเก็บใน local และจะกลับมา sync อัตโนมัติ เมื่อ online สามารถออกแบบเงื่อนไขการเข้าถึงข้อมูลทั้งการ read และ write ได้ดังใจ ทั้ง Android, iOS และ Web

Step 1 : เตรียม account Firebase

เข้าไปที่ website ของ Firebase เเล้ว sign in ด้วย Google account

Step 2 : Create Firebase Project

คลิกที่ Go to console ตรงมุมบนขวา เเล้วจะเข้าไปที่หน้า console ในการสร้าง project เเล้วให้คลิกที่ปุ่มเพิ่มโครงการ

console project
ตั้งชื่อโครงการ เเละเลือกประเทศที่เราอยู่
Create project

Step 3 : Setup การทำงานของ Database

การ Setup การทำงานของ Database จะมีการ Set ค่ากฎ การอ่านเเละเขียนข้อมูลลง Database เพื่อให้สามารถเขียนข้อมูลเเละอ่านข้อมูลจาก Database ได้

คลิกไปที่ปุ่ม Database ตรง console ทางซ้ายมือ

Database

เเล้วไปที่ “กฎ”(rule) ตรง TAB ด้านบน เเล้ว เปลี่ยน Read เเละ Writeให้เป็น true ตามรูป

Rule

Step 4 : การเชื่อม Firebase กับ project

การเชื่อมต่อ Firebase กับ project จะต้องใช้อยู่สองอย่าง คือ File privacy key ซึ่งเป็น JSON file เเละ link Database

Privacy key จะอยู่ที่ --> บัญชีบริการ (service account)

privacy key จะเก็บค่า config ต่างๆ ในการติดต่อกับ database

ไปที่ปุ่มฟันเฟือง มุมบนซ้ายติดกับ Overview เเล้วไปที่ การตั้งค่าโครงการ

จะเเสดงหน้าตั้งค่า เเล้วให้ไปที่ Tab บัญชีบริการ ( service account ) เเละให้เลื่อนลงมาล่างสุด จะมีให้ สร้าง Privacy key โดยให้เลือก Node.JS เเล้วกด สร้างคีย์ส่วนตัวใหม่ เเล้วจะมี pop up ขึ้นมาให้กด สร้างคีย์ เเล้วจะมีการ Download ไฟล์ ไฟล์นี้เเหละจะใช้ติดต่อ โปรเเกรมกับ Firebase

เลือก Node.js นะ
Popup

link Database อยู่ที่หน้า Database อยู่ตามที่ภาพ

link database

Step 5 : สร้างส่วนติดต่อในโปรเเกรม

การติดต่อกับ Firebase จะต้องมีส่วนที่ใช้ในการติดต่อตามที่กล่าวใน Step : 4 มีขั้นตอนตามนี้

สร้าง Folder project เเล้วสร้าง File package.json ชึ่งเป็น File JSON ที่ไว้จัดการ dependencies ต่างๆ ที่ใช้ใน project โดย create file package.json ด้วย command line โดยการพิมพ์ คำสั่งให้เข้าไปที่ path ที่อยู่ project ก่อน เช่น C:\Users\SNOWBALL\Documents\webmean>( webmean คือชื่อ project)เเละพิมพ์คำสั่ง

$ npm init

หลังสั่ง npm init จะมีการถามให้ใส่ name ,description(คำอธิบายโปรเเกรม) สุดท้ายให้พิมพ์ yes

หลังจากได้ Fire package.json เเล้ว ก็ต้อง Download Firebase module ซึ่อเป็น Third party modules ซึ่ง Download ด้วย คำสั่ง

$ npm install --sava firebase

เมื่อ install เสร็จ ไปดูใน File package.json จะมี dependencies firebase เเละ vsersion เเสดงอยู่

เริ่มเขียนโปรเเกรม @_@

ใน Step ที่ 4 จะได้ File JSON ที่ Download มา ให้เอา File เข้ามาอยู่ใน Folder project เพื่อง่ายต่อการเรียกใช้งาน

ส่วน Connect Firebase
var firebase = require("firebase");
firebase.initializeApp({
serviceAccount: "./javascript-firebase-79dc9-firebase-adminsdk-lav2r-b6b077200f.json",
databaseURL: "https://javascript-firebase-79dc9.firebaseio.com/"
});
serviceAccount คือ ที่อยู่ file JSON ที่ Download มาจาก Step ที่ 4 
databaseURL คือ link Database ของเรา

เย้ๆได้ส่วนติดต่อเเล้ว อ่าว เเล้วจะรู้ได้งัยว่าใช้ได้ งัยมาลองส่งข้อมูลขึ้น Firebase ดูหน่อย

var firebase = require(“firebase”);
firebase.initializeApp({
serviceAccount: “./javascript-firebase-79dc9-firebase-adminsdk-lav2r-b6b077200f.json”,
databaseURL: “https://javascript-firebase-79dc9.firebaseio.com/"
});
var ref = firebase.database().ref(‘chile_test’);
ref.push({
“text”:”Hi สาวเเว่น><”
});
code ในการเลือกว่าจะส่งข้อมูลไปที่ path ไหนของ database นี้คือเราส่งไปที่ path chile_test
var ref = firebase.database().ref(‘chile_test’);

ส่งข้อมูลด้วย คำส่ง push ซึ่งจะ ส่งข้อมูลในรูปเเบบ JSON คือมี key เเละ value 
 เเละคำที่ส่งคือ “ Hi สาวเเว่น>< ” ชนิดข้อมูลเป็น String เเละสามรถส่งข้อมูลเป็นชนิดอื่นได้นะ เช่น int , Boolean บาๆๆๆๆๆ

เห้ยเเล้วมันไปขึ้นอยู่ไหนวะ
ขึ้นเเล้วๆๆๆ

ในการเขียนเเบบ Web Application MEAN Stack ก็ต้องเรียกใช้ในส่วนที่จะส่งค่า หรือสร้างเป็น module เเล้วเรียกใช้ น่าจะง่ายส่วนคำสั่งอื่นหรือการ query ข้อมูลจาก Firebase คงต้องพูดกันอีกในบทความต่อไป

พึ่งกลับมาเขียนบทความเเละศึกษาเรื่องพวกนี้อยู่ การเขียนอาจผิดเยอะมาก 5555 เเละคำต่างๆ อาจไม่เข้าใจ ดูตามรูปน่าจะเข้าใจขึ้นนะครับ><

Ref.
Like what you read? Give Phumai Chanphunga a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.