
Hallo, apa kabar teman semuanya, kali ini kita akan membahas cara membuat notificasi menggunakan Laravel. Push Notification dengan firebase laravel ini sangat penting untuk aplikasi berbasis client, karena akan bermanfaat untuk pemebritahuan ketika ada pesan baru.
Pemberitahuan push adalah pesan pop-up yang dapat diklik yang muncul di browser pengguna Anda terlepas dari perangkat yang mereka gunakan atau browser yang mereka gunakan. Mereka berfungsi sebagai saluran komunikasi cepat yang memungkinkan perusahaan untuk menyampaikan pesan, penawaran, atau informasi lain kepada pelanggan mereka.
Teman teman dapat mempelajari tutorial yang lainnya:
Tutorial Laravel : Membuat Dynamic Dependent Dengan Select2
Tutorial Laravel ~ Laravel Eloquent Relationships
Firebase
Firebase adalah suatu layanan dari Google untuk memberikan kemudahan bahkan mempermudah para developer aplikasi dalam mengembangkan aplikasinya. Firebase alias BaaS (Backend as a Service) merupakan solusi yang ditawarkan oleh Google untuk mempercepat pekerjaan developer.
Dengan menggunakan Firebase, apps developer bisa fokus dalam mengembangkan aplikasi tanpa memberikan effort yang besar untuk urusan backend.
FCM (Firebase Cloud Messaging)
FCM (Firebase Cloud Messaging) yaitu menyediakan koneksi yang handal dan tentunya hemat baterai antar server maupun antar device. Sehingga kamu dapat mengirim dan menerima pesan serta notifikasi di Android, iOS, dan web tanpa perlu biaya.
Untuk menargetkan pesan lanjutan, kamu bisa targetkan pesan dengan mudah menggunakan segment yang telah ditentukan sebelumnya yakni menggunakan demografi dan behavior/perilaku. Anda dapat menargetkan pesan ke perangkat yang telah berlangganan pada topik tertentu. Selain itu, Anda bisa juga menargetkan hanya ke satu perangkat untuk mendapatkan informasi data yang terperinci. Biasanya ini dilakukan untuk proses pengujian.
Pesan notifikasi ini terintegrasi sepenuhnya dengan Google Analytics for Firebase, sehingga kamu memiliki akses pada interaksi dan tracking konversi secara detaill. Nah, Anda dapat memantau suatu efektivitas dari satu dashboard tanpa perlu coding atau membuat program sendiri.

- Install Laravel
Kita akan melakukan instalasi laravel. Buka terminal kalian semua, dan masukan perintah di bawah ini.
composer create-project --prefer-dist laravel/laravel notif-push
2. Setting Database
Setelah melakukan instalasi sekarang kita akan melakukan koneksi database.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
3. Install Library Auth
Sekarang, kita akan membuat login, register dan dashboard. masukan perintah di bawah ini di terminal teman semua.
composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev
4. Migration
Kali ini kita akan migrasi semua tabel yang telah ada.
php artisan migrate
Selanjutnya kita akan membuat migrasi untuk menambahkan kolom fcm_token
php artisan make:migration "add fcm_token column to users table"
database/migrations/2022_06_28_063655_add_fcm_token_column_to_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddFcmTokenColumnToUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('fcm_token');
});
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('fcm_token');
});
}
}
Setelah melakukan update migrasi, jalankan kembali pernitah migrasi.
php artisan migrate
5. Pengaturan Model
buka dan sesuaikan file app/Models/Users.php.
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'name',
'email',
'password',
'fcm_token'
];
/**
* The attributes that should be hidden for serialization.
*
* @var array<int, string>
*/
protected $hidden = [
'password',
'remember_token',
'remember_token',
];
/**
* The attributes that should be cast.
*
* @var array<string, string>
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}
6. Buat Firebase Project
a. Create Firebase Project

b. Create a Web App in created Project

c. Web App Configuration Detail

7. Controller
app\Http\Controllers\HomeController.php
public function updateToken(Request $request){
try{
$request->user()->update(['fcm_token'=>$request->token]);
return response()->json([
'success'=>true
]);
}catch(\Exception $e){
report($e);
return response()->json([
'success'=>false
],500);
}
}
add a route in routes/web.php
use App\Http\Controllers\HomeController;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [HomeController::class, 'index'])->name('home');
Route::patch('/fcm-token', [HomeController::class, 'updateToken'])->name('fcmToken');
Route::post('/send-notification',[HomeController::class,'notification'])->name('notification');
8. Kode Firebase
resources/views/layouts/app.blade.php
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXX.firebaseapp.com",
projectId: "XXXXXXXXXX",
storageBucket: "XXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXX",
appId: "1:XXXXXXXXX:web:XXXXXXXXXXXXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
function initFirebaseMessagingRegistration() {
messaging.requestPermission().then(function () {
return messaging.getToken()
}).then(function(token) {
axios.post("{{ route('fcmToken') }}",{
_method:"PATCH",
token
}).then(({data})=>{
console.log(data)
}).catch(({response:{data}})=>{
console.error(data)
})
}).catch(function (err) {
console.log(`Token Error :: ${err}`);
});
}
initFirebaseMessagingRegistration();
messaging.onMessage(function({data:{body,title}}){
new Notification(title, {body});
});
</script>
Buat file firebase-messaging-sw.js di dalam folder public.
importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js');
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXX",
messagingSenderId: "XXXXXXXXX",
appId: "1:XXXXXXXX:web:XXXXXXXXXXX"
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function({data:{title,body,icon}}) {
return self.registration.showNotification(title,{body,icon});
});
10. Push Notification
Untuk mendapatkan notifikasi, kita menggunakan pakage larafirebase.
Install Larafirebase
composer require kutia-software-company/larafirebase
php artisan vendor:publish --provider="Kutia\Larafirebase\Providers\LarafirebaseServiceProvider"
Tambahkan Server Key Firebase di file .env.
FIREBASE_SERVER_KEY=XXXXXXXXXXXXXXXXXXXXX

config/larafirebase.php
return [
'authentication_key' => env('FIREBASE_SERVER_KEY')
];
app/Http/Controllers/HomeController.php
public function notification(Request $request){
$request->validate([
'title'=>'required',
'message'=>'required'
]);
try{
$fcmTokens = User::whereNotNull('fcm_token')->pluck('fcm_token')->toArray();
//Notification::send(null,new SendPushNotification($request->title,$request->message,$fcmTokens));
/* or */
//auth()->user()->notify(new SendPushNotification($title,$message,$fcmTokens));
/* or */
Larafirebase::withTitle($request->title)
->withBody($request->message)
->sendMessage($fcmTokens);
return redirect()->back()->with('success','Notification Sent Successfully!!');
}catch(\Exception $e){
report($e);
return redirect()->back()->with('error','Something goes wrong while sending notification.');
}
}
Kita buat Notifikasi menggunakan perintah:
php artisan make:notification SendPushNotification
app\Notifications\SendPushNotification.php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Notification;
use Kutia\Larafirebase\Messages\FirebaseMessage;
class SendPushNotification extends Notification
{
use Queueable;
protected $title;
protected $message;
protected $fcmTokens;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct($title,$message,$fcmTokens)
{
$this->title = $title;
$this->message = $message;
$this->fcmTokens = $fcmTokens;
}
/**
* Get the notification's delivery channels.
*
* @param mixed $notifiable
* @return array
*/
public function via($notifiable)
{
return ['firebase'];
}
public function toFirebase($notifiable)
{
return (new FirebaseMessage)
->withTitle($this->title)
->withBody($this->message)
->withPriority('high')->asMessage($this->fcmTokens);
}
}
Dapat menggunakan fungsi tersebut, contoh:
use Notification;
use App\Notifications\SendPushNotification;
Notification::send(null,new SendPushNotification($title,$message,$fcmTokens));
Sekarang jalankan perintah:
php artisan serve
Demikian tutorial kali ini saya berikan, semoga bermanfaat.
Terimkasih.