ทดลองใช้ Realtime Database ใน Firebase ด้วย Yii Framework 2

wave
มานพ กองอุ่น 11 ส.ค. 2016 15:21:22 16,950

ในบทเรียนรู้นี้เรามาทดลองใช้งาน Realtime Database ใน Firebase ด้วย Yii Framework 2 กันครับ (จริงๆ แล้วสามารถทดลองเขียนแบบไม่ต้องใช้ Yii Framework ก็ได้นะ ลองเอาไปประยุกต์นะครับ)

คุณสมบัติเด่นของ Realtime Database ก็ตรงตัวอยู่แล้วนะครับ คือเป็นการทำงานแบบ Realtime ในการทดสอบนี้จะทดลองเขียนเพื่อเชื่อมต่อและแก้ไขข้อมูลจากนั้นก็ตรวจสอบว่ามัน Realtime จริงป่าว เพื่อเป็นแนวทางในการศึกษาต่อไป

ในที่นี้ใช้การเชื่อมต่อแบบ public ก่อนนะครับ เพื่อการทดสอบ หากไม่ทำแบบนี้จะต้องไปตั้งค่า auth กันอีกรอบ (คราวหน้าจะมาเขียนเพิ่มเรื่อง auth ครับ)

การตั้งค่า Firebase Realtime Database

เพิ่มข้อมูล

เข้าไปที่ Console ของ Firebase จากนั้นเลือก Project ที่ต้องการ (หากไม่มีให้สร้างขึ้น) จากนั้นไปที่เมนู Database ด้านซ้ายมือ ทดลองเพิ่มข้อมูลไว้ดังนี้

 

กำหนด rule

กำหนด rule ให้เป็น public โดยกำหนดใน tab RULES แล้วกำหนดดังนี้

ทำการ public ให้เรียบร้อยจะเห็นการแจ้งเตือน

 

เป็นอันเรียบร้อยสำหรับการตั้งค่าในฝั่ง Firebase Console

 

สร้าง Controller และ Action

ทดลองสร้าง Controller ใน frontend/controllers/FirebaseController.php จากนั้นสร้าง actionIndex() ดังนี้

<?php
namespace frontend\controllers;

class FirebaseController extends \yii\web\Controller
{
	public function actionIndex()
	{
		return $this->render('index');
	}
}

จากนั้นสร้าง view ใน views/firebase/index.php ซึ่งจะนำค่าต่างๆ ที่ Firebase แนะนำมาใส่ตรงนี้ โดยเราจะใช้ registerJsFile และ registerJs มาช่วย โดยเราต้องทราบการ config ค่าก่อนโดยคลิกที่ Project จากนั้นคลิกที่ Add Firebase to your web app จะมี popup แสดงรายละเอียดการตั้งค่าเกิดขึ้น

จากนั้นนำข้อมูลมา register โดยในที่นี้จะ register นอก jQuery(document).ready(function () {});ดังนี้

<?php
use yii\web\View;
$this->title = 'Firebase Test';

?>
<pre id="object"></pre>
<?php $this->registerJsFile('https://www.gstatic.com/firebasejs/3.2.1/firebase.js')?>
<?php $this->registerJs('
(function(){
	// Initialize Firebase
  const config = {
    apiKey: "your_api_key",
    authDomain: "your_auth_domain.com",
    databaseURL: "https://your_database_url.com",
    storageBucket: "your_storage_bucket.com",
  };
  firebase.initializeApp(config);

	const preObject = document.getElementById("object");
		
	const dbRefObject = firebase.database().ref().child("object");
		
	dbRefObject.on("value", snap => {
		preObject.innerText = JSON.stringify(snap.val(), null, 3);
	});
}());', View::POS_END)?>

เมื่อทำถูกต้องจะเห็นการแสดงผลดังนี้

จากนั้นทดลองเปลี่ยนค่าใน Firebase Console

จากนั้นจะเห็นการเปลี่ยนแปลงใน Web Application แบบทันที (Realtime) โดยไม่ต้อง refresh 

สรุป

Realtime Database ช่วยให้สามารถ Sync ข้อมูลกันได้แบบ Realtime การทดสอบการใช้งาน Firebase Realtime database ด้วย Yii Framework 2 นี้เป็นการทดลองทำความเข้าใจขั้นตอนการใช้งานแบบง่ายเพื่อให้เห็นกระบวนการทำงานเบื้องต้น ส่วนรายละเอียดการตั้งค่า auth จะกล่าวในลำดับถัดไป

 

อ้างอิง

https://firebase.google.com/docs/database/web/start
https://www.youtube.com/playlist?list=PLl-K7zZEsYLmnJ_FpMOZgyg6XcIGBu2OX

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 16,950
  • รักเลย 0
  • หมวดหมู่ Yii Framework 2 (Yii2)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii firebase realtime database
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง