Sử dụng Firebase Javascript trong Laravel

Hi mọi người,
Bài viết này mình sẽ chia sẻ cách sử dụng firebase javascript trong laravel với các chức năng cơ bản như thêm, sửa, xóa dữ liệu.

Step1: Đăng nhập vào firebase bằng tài khoản google

• Truy cập vào link https://firebase.google.com/ và click vào button Sign in ở góc trên cùng bên phải màn hình để login vào firebase.
  
• Nếu đăng nhập thành công thì màn hình bên dưới sẽ được hiển thị và các bạn hãy thao tác các bước như ảnh.
  

Step2: Tạo config

• Nhập một tên project bất kỳ và đăng ký các bước như ảnh và cuối cùng click vào button Add Firebase.
  
  

• Tiếp theo click vào button Continue và sau đó click vào biểu tượng có chữ Web nhé.
  
  

• Đăng ký các bước bên dưới để tạo Firebase SDK(cái này mình sẽ dùng để kết nối đến firebase trong code của mình nhé).
  
  

• Truy cập vào link https://firebase.google.com/ và click vào tên dự án của mình vừa tạo nhé.
  

• Tạo một database để lưu trữ dữ liệu khi thêm, sửa, xóa dữ liệu.
  
  

Step3: Download thư viện firebase javascript

• Truy cập vào menu Docs=>Reference và chọn Javascript version 8(trong bài này mình sẽ demo trên version 8 nhé).
  

• Click vào dropdown Code và download source về máy tính.
  

• Giải nén và đổi tên thư mục rồi copy tất cả source code vào thư mục public của laravel nhé.
  

Step4: Ví dụ

Đầu tiên mình sẽ click vào dự án mình vừa tạo và click vào icon setting như ảnh.

Ở tab General kéo xuống cuối và copy đoạn config về máy tính của mình.

Tạo route trong routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Tạo controller trong App\Http\Controllers\HomeController.php

<?php
   
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
use Validator;
   
class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

Tạo view home.blade trong resources\views\home.blade.php
Thêm dữ liệu

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel 8</div>
                <div class="card-body">
                    Sử dụng Firebase Javascript trong Laravel
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{ asset('firebase/firebase-app.js')}}" type="module"></script>
<script src="{{ asset('firebase/firebase-database.js')}}" type="module"></script>
<script type="module">
    const firebaseConfig = {
        apiKey: "AIzaSyAsdmpqt9dEJKr6gFbk8KsOExyk9HiZDj0",
        authDomain: "gentle-platform-234210.firebaseapp.com",
        databaseURL: "https://gentle-platform-234210-default-rtdb.firebaseio.com",
        projectId: "gentle-platform-234210",
        storageBucket: "gentle-platform-234210.appspot.com",
        messagingSenderId: "28582419912",
        appId: "1:28582419912:web:216a88db96253760daf4fd",
        measurementId: "G-N69LDCW4ZN"
    };

    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();

    function writeUserData(userId, name, email, imageUrl) {
      database.ref('users/' + userId).set({
        username: name,
        email: email,
        profile_picture : imageUrl
      });
    }

    writeUserData('1', 'Gaucon','test@gmail.com', 'urlxxxx')
</script>
@endsection

Sau khi chạy code bên trên,một bản ghi sẽ được thêm vào cơ sở dữ liệu trong Realtime Database.

Lấy dữ liệu

    var user = firebase.database().ref('users/1');
    user.on('value', (snapshot) => {
      const data = snapshot.val();
      console.log(data);
    });

Output:

{email: 'test@gmail.com', profile_picture: 'urlxxxx', username: 'Gaucon'}

Cập nhật dữ liệu

    var postData = {
        username: 'obama',
        email: 'obama@gmail.com',
        profile_picture : 'Urlxxx123'
    };
    var updates = {};
    updates['/users/1'] = postData;
    firebase.database().ref().update(updates);

Output:

Xóa dữ liệu

firebase.database().ref('/users/1').remove();

Tham khảo: https://firebase.google.com/docs/database/web/read-and-write