Firebase #01 สวัสดีชาวโลก

เริ่มต้นใช้งาน Google Firebase เพื่อเป็น Real-Time Database
บทความนี้ จะแสดงให้เห็นวิธีการเริ่มใช้งาน Firebase แบบ Web App แล้วสร้าง Webpage ง่ายๆ เพื่อไปเรียกข้อมูลจาก Firebase มาแสดง

ขั้นตอนมีดังต่อไปนี้

  1. Login ด้วย Google Account แล้วไปที่ https://console.firebase.google.com
    แล้วคลิก Create New Project

  2. ตั้งชื่อโปรเจค webdemo01
    แล้วเลือก Country เป็น Thailand
  3. คลิก Add Firebase to your web app
  4. Firebase จะสร้าง snippet ให้พร้อมใช้
    คลิกปุ่ม Copy ได้เลย
  5. จากนั้นมาสร้าง Database กัน
    คลิก Database ด้านซ้ายมือ
    แล้วด้านขวามือ คลิกเครื่องหมาย +
  6. ต่อไป ก็สร้างส่วนเก็บข้อมูล
    Name: data
    Value: test
    คลิกปุ่ม ADD
  7. ต่อไป กำหนดสิทธิ์การ Read/Write (ในที่นี้จะใช้แบบง่าย คือเปิดให้ Read/Write โดยไม่ต้อง Authentication)
    คลิกปุ่ม RULES ด้านบน

    แล้วแก้ไข “read” กับ “write” ให้เป็น true
    แล้วคลิก PUBLISH

    สุดท้าย คลิก DISMISS
  8. ต่อไป สร้าง HTML File ชื่อ webdemo01.html
    ใส่ HTML Tag ต่างๆ

    แทรก Snippet ที่ Copy มาลงไป ระหว่าง body tag

    แก้ไข Title
    แล้วก็สร้าง H1 tag ตั้ง id ว่า “ShowTextHere”
    ตรงนี้จะเป็นที่ที่จะแสดงข้อความจาก Firebase
  9. ต่อไป แทรก Code ต่อไปนี้ ก่อนจะปิด script tag
  10. ทดสอบเปิดไฟล์ webdemo01.html บน Browser
    จะพบว่า แสดงข้อความ test
  11. ลองแก้ไขข้อมูลบน Firebase เป็น “สวัสดีชาวโลก”
    ก็จะเปลี่ยนตามทันที

ประมาณนี้ก่อน เดี๋ยวมาสร้าง Applicatioin กันในตอนต่อไป

Leave a Reply