การเขียน HTML กับ Firebase JavaScript SDK 1.

การเขียน HTML  กับ Firebase JavaScript SDK 

       ฐานข้อมูล Firebase Realtime เป็นบริการฐานข้อมูลของกูเกิล จัดเก็บข้อมูลไว้ที่โฮสต์บนคลาวด์  สะดวกต่อการนำมาพัฒนาโปรแกรมประยุกต์ ที่ต้องการใช้ฐานข้อมูลบนคลาวด์ได้หลายแพลตฟอร์ม เช่น Android, iOS และ JavaScript SDK โครงสร้างข้อมูลของฐานข้อมูล Firebase Realtime อยู่ในรูปแบบ JSON ที่ซิงโครไนซ์แบบเรียลไทม์ให้กับไคลเอนต์ที่เชื่อมต่อทุกเครื่อง เมื่อข้อมูลมีการเปลี่ยนแปลง ไคลเอนต์ทั้งหมดที่เชื่อมต่อฐานข้อมูล จะได้รับการอัปเดตข้อมูลล่าสุดโดยอัตโนมัติ

การประกาศกฎฐานข้อมูลเรียลไทม์เพื่อการพัฒนาโปรแกรมประยุกต์
      ตามปกติการเข้าถึงเพื่ออ่านและเขียนไปยังฐานข้อมูล Firebase Realtime โดยผู้ใช้ใดๆ จะถูกจำกัด ยกเว้นผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้นจึงจะสามารถอ่านหรือเขียนข้อมูลได้  ดังนั้นในการระหว่างการพัฒนาโปรแกรมประยุกต์ อาจยกเลิกการตรวจสอบสิทธิ์การอ่านและเขียนฐานข้อมูล เพื่อกำหนดให้ฐานข้อมูลสามารถเข้าถึงได้แบบสาธารณะ จะทำผู้ใช้ใดๆ รวมถึงผู้ที่ไม่ได้ใช้แอพของเข้าถึงฐานข้อมูลได้ และเมื่อใช้งานจริงจึงตั้งค่าการตรวจสอบสิทธิ์อีกครั้ง ที่หน้าเว็บคอนโซล ฐานข้อมูล Firebase Realtime ผู้พัฒนาโปรแกรมประยุกต์ สามารถเข้าไปแก้ไขกฎการตรวจสอบสิทธิ์การอ่านและเขียนข้อมูลได้ดังรูปที่ 1 รูปที่ 1 การแก้ไขกฎการตรวจสอบสิทธิ์การอ่านและเขียนข้อมูล               การพัฒนาเว็บให้เป็นไคลเอนต์ของฐานข้อมูลFirebase Realtime ทำได้โดยใช้ชุด API ภาษาจาวาสคริปต์  ที่เรียกว่า  Firebase JavaScript SDK  ขั้นตอนการเขียนภาษาHTML เพื่อพัฒนาเว็บให้สามารถจัดการ ฐานข้อมูลFirebase Realtime จะมีขั้นตอนดังนี้

1. เรียกใช้ Firebase JavaScript SDK  โดยเขียนภาษา HTML แทรกไว้ที่แท็ก <head> </head> ของไฟล์ HTML ดังนี้

<script src = "https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
-------------------------------------------------------------
ตัวอย่าง
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>ตัวอย่าง</title>
<script src = "https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
</head>
<body>

</body>
</html>
-------------------------------------------------------------
2. สร้างตัวแปรเก็บข้อมูลในการติดต่อ และเชื่อมต่อ ฐานข้อมูลFirebase Realtime แทรกไว้ที่แท็ก <head> </head>
<script>var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};  firebase.initializeApp(config); </script>

โดยให้เปลี่ยนข้อความสีชมพู ให้ตรงกับค่าของ  ฐานข้อมูล Firebase Realtime ที่ผู้พัฒนาจัดเตรียมไว้ สามารถดูได้จากหน้าเว็บคอนโซลฐานข้อมูลของ Firebase ตามขั้นตอนในรูปที่ 2-3

รูปที่ 2 การเข้าหน้าเว็บคอนโซล ฐานข้อมูลFirebase Realtime เพื่อข้อมูลที่ใช้ในการเชื่อต่อผ่านหน้าเว็บ


รูปที่ 3 ข้อมูลที่ใช้ในการเชื่อต่อผ่านหน้าเว็บของฐานข้อมูลFirebase Realtime

เมื่อโหลดหน้าเว็บ Project Setting เสร็จแล้วให้เลื่อนหน้าเว็บลงด้านล่างจะพบสคริปต์ ที่แสดงค่าในการติดต่อฐานข้อมูล ผู้พัฒนาสามารถคลิกเลือกแบบ CDN การนำไปใช้อาจคัดลอกไปบางส่วนเพื่อเขียนเอง หรือคัดลอกทั้งหมด นำไปวางแทนที่ขั้นตอนที่ 1 และ 2 ก็ได้ 

3. ประกาศตัวแปร เชื่อมโยงข้อมูลกับฐานข้อมูล โดยใช้คำสั่ง

     var fb_db = firebase.database().ref();

หน้าเว็บที่สร้างขึ้นจะมีรหัสภาษา HTML ดังนี้ <!DOCTYPE html>
<html>
<head>
<script src = "https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<title>ตัวอย่าง</title>
<script>var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};
 firebase.initializeApp(config); var fb_db = firebase.database().ref();
.
.
.## พื้นที่สำหรับ เขียนฟังก์ชั่นจาวาสคริปต์สำหรับทำงานกับฐานข้อมูล
.
.
.##พื้นที่สำหรับ เขียนจาวาสคริปต์ดักจับ Event อินพุตจาก <body>
.
.
</script>
</head>
<body>
. .พื้นที่เขียนภาษา HTML สร้างฟอร์มรับและแสดงผลข้อมูลระหว่างผู้ใช้และ firebase . .
</body>
</html> 4. สร้างอินพุตรับข้อมูลให้ไฟล์หน้าเว็บ ไว้ในส่วนแท็ก <body>….</body>
รูปที่ 4 ส่วนอินพุตที่ใช้รับข้อมูลบนหน้าเว็บที่ต้องการ

ภาษา HTML เพื่อสร้างส่วนอินพุตที่ใช้รับข้อมูลบนหน้าเว็บที่ต้องการ

<B>ชื่อ : </B><input type="text" name="name" id="user_name" placeholder="user name">
<br><br><B>อีเมล์ : </B><input type="email" name="email_id" id="user_email" placeholder="user email">
<br><br><button onclick="sendData()">บันทึกข้อมูล ไปยัง firebase</button>

 จากรูปที่ 4 หน้าเว็บมีองค์ประกอบอินพุต 3 ตัวคือ 1. ช่องรับข้อความชื่อ  2. ช่องรับข้อความอิเมล์  3. ปุ่มบันทึกข้อมูลไปยัง firebase
5 . เขียนฟังก์ชั่น ให้ปุ่มบันทึกข้อมูล ไปยังไฟล์เบส

ความคิดเห็น

แสดงความคิดเห็น