เริ่มต้นเขียน Firestore จาก 0 ด้วย JavaScript กันดีกว่า~

SaltyAomเมื่อ

Introduction to Firestore From Zero with JavaScript

พอพูดถึง Firebase หลายคนก็คงจะนึกถึงอะไรที่ ยากๆ แต่ความจริงแล้ว Firebase เนี่ย ทำให้ชีวิตใครหลายคนง่ายขึ้นมากๆ, เราสามารถที่จะทำ Database แบบ Realtime ได้ง่ายมาก และ ยังทำ Authentication ได้โดยที่เราไม่จำเป็นต้องเขียน Backend และ ทำ Database ขึ้นเองด้วยซ้ำ!

Google ได้สร้าง Firebase ขึ้นมาเพื่อช่วยให้ Developer ไม่ต้องมาทำ Backend เอง แต่ย้ายมาทำที่ Frontend แทน! (เอ๊ะ? อะไรยังไง?)

ด้วยความที่ Firebase ถูกพัฒนาขึ้นเพื่อให้เป็น BasS (Backend as Service) โดยเฉพาะ, ทำให้แค่ Request สิ่งที่อยากให้ Firebase ทำให้, Firebase ก็จะทำให้เราเองเลย~

Genius

Cloud Firestore ก็เป็นหนึ่ง Feature ใหม่ของ Firebase ที่พึ่งจะออกจากช่วง Beta มาไม่นาน พัฒนาขึ้นมาต่อจาก Realtime Database ทำให้เราไม่ต้องทำหลังบ้านเพื่อเชื่อม Database อีกต่อไป แต่มาทำที่ Frontend แทน! (เย่ๆ~)

และที่ยิ่งกว่านั้นคือ Firestore เนี่ย สามารถเก็บข้อมูลตอน Offline ได้ด้วย! (ช่วยคนที่ทำ PWA ได้เยอะเลย TwT) และยังใช้ได้หลาย Platform, ล่าสุดก็ support Unity แล้วด้วยนะ~

แก้ข้อสงสัย

ดูรายละเอียดเพิ่มเติมที่ Firebase Pricing

นอกจากนี้แล้ว ถ้ากลัวไม่ปลอดภัย Cloud Firestore ยังสามารถตั้งกฏสำหรับการควบคุม ได้ด้วย!

Pricing

Firestore ใช้ Free และมี Feature support เยอะมากๆ ก็จริง แต่ว่า ก็ยังมีข้อจำกัดอยู่ เพราะว่า Firestore ที่มีขนาดใหญ่ ก็ไม่ได้ฟรีไปเลยซะทีเดียว (ก็ไม่มี Database ไหนที่ให้ใช้เยอะๆ แล้วจะฟรี หรอกนะ ( ̄ ▽  ̄)ノ ) โดย Firestore แบ่ง pricing เป็น 3 ส่วนดังนี้

Firebase Pricing

จะเห็นได้ว่า ถึงจะ มี Free plan ก็ยังจำเป็นต้องจ่ายเงินถ้าต้องการที่จะใช้กับ Project ใหญ่ๆ แต่ว่า 1GB ก็ไม่น้อยสำหรับ Project เล็กๆ เลยนะ ถ้าบริหารวิธีใช้ดีๆ หนอย โดยเฉพาะกับ Project จบของใครหลายคน♫♪

ก่อนที่จะเริ่ม

มาดูกันดีกว่าว่า หลักๆ แล้ว Cloud Firestore ทำอะไรได้บ้าง

ทำงานได้หลาย Platform

อ้างอิงจาก Firebase's Realtime Database vs Firestore

จะเห็นได้ว่ามัน Ok ในระดับนึงเลย งั้นเรามาลองเริ่มกันเลยดีไหม? Cloud Firestore เริ่มต้นใช้ได้ฟรี และไม่ต้องเสียเวลาติดตั้ง Server เพราะว่า Google เตรียมไว้ให้เป็นที่เรียบร้อยแล้ว! (เย่ๆ~)

มาเริ่มกันเลยดีกว่า

เริ่มจากการสร้าง Project กับ Firebase เอาไว้ก่อนเลยที่ Firebase Console

Firebase Console

กดเพิ่มโครงการเพื่อสร้าง Project Firebase กันเลย!!

ตั้งชื่อ Project แล้วยอมรับข้อตกลง แล้วรอซักแปปนึง ก็จะได้หน้าตาแบบนี้มา!!

Firebase Project

ได้หน้าตาประมาณแบบนี้ถือว่าการสร้าง Project เป็นอันเสร็จสิ้น (ง่ายมะ ง่ายมะ~)

เปิดใช้งาน Cloud Firestore

ก่อนเริ่ม ให้ย้อนกลับเข้าไปที่ Firebase Console ก่อน เพื่อเปิด Cloud Firestore ก่อน, เหมือนกับเข้าไปบอกว่า เราจะใช้ Feature นี้นะ ช่วยเปิดให้หน่อยสิ

Enable Firestore

จากนั้นก็ สร้างฐานข้อมูล และมากำหนดกฏการใช้กันเถอะ~

Enable Test Mode

ถ้าไม่เคยลองเล่นกับ Firestore มาก่อน แนะนำให้ลอง “เริ่มต้นในโหมดทดสอบ” ก่อนเลย, ซึ่งจะอนุญาตให้ อ่าน-เขียน ได้เลย, จากนั้นก็เปิดใช้เลย

Firestore Console

พอเข้ามาถึงหน้านี้ ก็ถือว่าการเปิดใช้งาน Cloud Firestore เสร็จสมบูรณ์~ และสามารถ เริ่มใช้ Firestore ได้เลย~

เตรียม JavaScript ให้พร้อม

หลังจากสร้าง Project เสร็จไปเป็นที่เรียบร้อย เราก็มาลอง Connect เข้า Cloud Firestore ของเรากันเลยดีกว่า! ทีนี้ เราจะต้องเอาคำสั่งควบคุม Firebase เข้ามาใน JavaScript ที่เราต้องการใช้ก่อน, Google ยังให้ใช้ Firebase ได้หลายทางได้อีกด้วย

  1. วิธีแรกผ่าน CDN ของ Firebase
// ดึงไฟล์ Firebase มาให้พร้อมใช้งาน~
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
  1. ผ่าน Package Manager อย่าง npm หรือ yarn
npm install --save-dev firebase
yarn add firebase
  1. ใช้กับ TypeScript เพิ่ม modules ปกติเลย แต่ให้เพิ่ม @types/firebase สำหรับ type support ด้วย
npm install --save-dev @types/firebase
yarn add @types/firebase

พอเพิ่ม package มาแล้วก็อย่าลืม require หรือ import firebase สำหรับใช้งานใน JavaScript ด้วยนะ (สำหรับ CDN จะมีตัวแปรชื่อ firebase ให้อยู่แล้ว)

const firebase = require('firebase/app')
require('firebase/firestore')
// หรือใช้ import ก็ได้
import firebase from 'firebase/app'
import 'firebase/firestore'

โดยที่ firebase/app คือ core สำหรับการใช้งาน จะดึงแค่ feature หลักมาใช้ เพื่อจะได้ตัด feature ที่ไม่ต้องการออก ส่วน firebase/firestore คือดึงส่วนของ Firestore มาใช้

มา Connect เข้า Firestore กันเถอะ

หลังจากเอา library ของ Firebase สำหรับการ connect แล้ว ทีนี้เรามาบอก Firebase ว่า “เราจะเชื่อมกับ Project Firebase ที่เราสร้างขึ้น”

ย้อนกลับไปที่ Firebase Console ของเราก่อน เพื่อเอา config สำหรับเชื่อมต่อกับ Firebase

Firebase Connection

จากนั้นก็ copy config ของ Firebase สำหรับ เชื่อมต่อไปไว้ในไฟล์ JavaScript ที่ต้องการใช้งานได้เลย, config แต่ละคนจะต่างออกไป แต่ว่า หน้าตาจะประมาณนี้

var config = {
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
authDomain: '[Project name].firebaseapp.com',
databaseURL: 'https://[Project name].firebaseio.com',
projectId: '[Project name]',
storageBucket: '[Project name].appspot.com',
messagingSenderId: 'xxxxxxxxxxxx'
}
firebase.initializeApp(config)

ตัว config เอาไว้ใช้ออกว่า ต้องการจะเชื่อมไปที่ไหน และ firebase.initializeApp(config) คือการเอา config มาเชื่อมไปที่ Firebase พอเชื่อมเสร็จแล้วก็สามารถใช้ Firebase ได้เลย แต่ว่า ถ้าอยากใช้ Firestore ด้วย จะต้องเรียก firestoreซะก่อนด้วย

let firestore = firebase.firestore()

พอเรียกเสร็จ ก็สามารถใช้งาน Firestore ได้เลย~

Recap

ตอนนี้เราก็ได้วิธีการสร้างโปรเจค Firebase, เปิดใช้งาน Firestore และก็สร้าง Connection เรียบร้อยแล้ว! ทีนี้เรามาลองใช้คำสั่งของ Firestore ในบทต่อไปกันดีกว่า~

Introduction to Firestore From Zero with JavaScript

เริ่มต้นเขียนคำสั่ง Firestore จาก 0 ด้วย JavaScript กันดีกว่า~

SaltyAom

Firebase JavaScript
Firestore JavaScirpt
เริ่มเขียน Firebase
วิธีใช้ Firebase
สอน Firebase
Firestore จาก 0
วิธีใช้ Firestore
SaltyAom' profile

เขียนโดย

SaltyAom

I like to take it easy!

Mystiar Blog

Mystiar Blog