• Contact Us
Tuesday, December 20, 2022
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Tutorial Laravel : Push Notification Dengan Firebase Laravel 9

admin by admin
June 28, 2022
in Laravel, Tutorial
0 0
0
Home Tutorial Laravel

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

Menggunakan Scope di Laravel

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.

  1. 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.

ShareTweetShare
admin

admin

Next Post
Penanganan Eror Javascript

Penanganan Eror Javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Indonesia