VERSI 1.0
FEBRUARI, 2021

[PEMROGRAMAN MOBILE]
MODUL 3
FIREBASE PUSH NOTIFICATION

TIM PENYUSUN:
HARIYADI, S.KOM, M.KOM
AUGIE WINANDA FAVOURITE
FACHRY FATHURAHMAN

1
 PRESENTED BY: LAB. TEKNIK INFORMATIKA

 
UNIVERSITAS MUHAMMADIYAH MALANG
Laboratorium Teknik Informatika

[PEMROGRAMAN MOBILE]

CAPAIAN PEMBELAJARAN MATA KULIAH

Mahasiswa mampu menguasai & menjelaskan konsep dari Firebase Push Notification

SUB CAPAIAN PEMBELAJARAN MATA KULIAH

Mahasiswa mampu memahami:
1. Cara membuat aplikasi yang terintegrasi dengan Firebase
2. Mengirim data menggunakan firebase

PERSYARATAN PEMAHAMAN
1. Mahasiswa dapat menampilkan notifikasi yang diterima dari firebase
2. Mahasiswa dapat menampilkan data yang diterima dari firebase
KEBUTUHAN HARDWARE & SOFTWARE
- Flutter SDK
- IDE (Android Studio, Visual Studio Code, dll.)

MATERI POKOK

1. Firebase
Firebase adalah suatu layanan dari Google yang digunakan untuk mempermudah para
pengembang aplikasi dalam mengembangkan aplikasi. 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 usaha yang besar untuk urusan backend

Februari, 2021 [PEMROGRAMAN MOBILE] 2

 1. Konfigurasi Firebase Console
a. langkah pertama yang harus kamu lakukan adalah membuat akun untuk Console Firebase.
console Firebase dapat di akses di ​https://console.firebase.google.com/​. setelah
mendaftar, Silahkan untuk membuat Proyek baru di ​create a project

b. Setelah membuat Proyek baru, berilah nama untuk proyek kamu. disini saya memberi
nama proyek dengan nama flutter fcm

c. Langkah selanjutnya kamu hanya perlu menyetujui beberapa persyaratan dan menunggu
beberapa saat hingga proyek kamu berhasil dibuat

Februari, 2021 [PEMROGRAMAN MOBILE] 3

 d. Setelah berhasil membuat proyek baru, kamu akan diarahkan ke halaman dashboard dari
console proyek kamu. lalu tambahkan aplikasi android di bagian ​add an app to get started
dengan cara menekan icon android yang terdapat dalam menu

e. Untuk mendaftarkan Aplikasi android kamu, yang kamu butuhkan pertama kali adalah
sebuah ​package name ​dari aplikasi android kamu. Package name digunakan sebagai
identifikasi unik untuk aplikasi kamu. System android menggunakan package name untuk
menentukan apakah aplikasi telah di install atau belum. kamu dapat melihat package
aplikasi kamu saat pertama kali membuat sebuah proyek aplikasi android atau dapat
dilihat di file ​android/app/src/main/AndroidManifest

Februari, 2021 [PEMROGRAMAN MOBILE] 4

 f. Setelah register app, Silahkan download file google-service.json dan pindahkan ke
direktori ​android\app\src\ ​seperti gambar di bawah ini

Februari, 2021 [PEMROGRAMAN MOBILE] 5

 g. Untuk langkah ke 3 cukup dilewati karena kita akan menambahkan firebase sdk di
Konfigurasi proyek android. ​Di langkah ke empat, tekan ​continue to console ​untuk
kembali ke halaman dashboard console

2. Konfigurasi proyek android​:

a. Sebelumnya kita telah membuat aplikasi yang sudah didaftarkan di firebase. Silahkan
buka kembali IDE kamu dan buka lah file ​android\build.gradle​ dan tambahkan ​classpath
​ i dalam ​dependencies. H
'com.google.gms:google-services:4.3.5' d ​ al ini bertujuan untuk
mengaktifkan Google API atau layanan Firebase di aplikasi Android kamu

​ i akhir baris file

b. Selanjutnya tampahkan ​apply plugin: 'com.google.gms.google-services' d
android\app\build.gradle​.

Februari, 2021 [PEMROGRAMAN MOBILE] 6

 c. Setelah itu, tetap di file yang sama, kita akan melakukan sync file build.gradle. pertama
pilih ​open for Editing in Android Studio ​yang berada di sebelah kanan atas file. setelah
terbuka, pilihlah menu ​File->Sync Project with Gradle Files.​ Pastikan ketika menjalankan
Sync Project with Gradle Files, k​ amu memiliki akses internet.

d. Setelah selesai, bukalah file ​android\app\src\main\AndroidManifest.xml ​dan

tambahkan:
<intent-filter>
<action android:name="FLUTTER_NOTIFICATION_CLICK" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
di dalam tag <activity>
contoh dapat dilihat di bawah ini:

Februari, 2021 [PEMROGRAMAN MOBILE] 7

 e. setelah itu, tambahkan ​dependencies ​dari ​firebase_messaging​ di pubspec.yaml seperti di
bawah ini:

pastikan versi dari firebase_messaging sudah mengikuti versi yang telah disarankan oleh
pemilik plugin. kamu dapat mengakses di
https://pub.dev/packages/firebase_messaging/install​. setelah itu, jalankan perintah pub
get agar plugin bisa digunakan.

Februari, 2021 [PEMROGRAMAN MOBILE] 8

 3. Menulis Code
a. Pertama tama, kita akan membuat sebuah app sederhana yang menampilkan sebuah teks
di tengah tengah nya. contoh nya seperti di bawah ini:

​Penjelasan:
● variable _token akan kita gunakan untuk menampilkan token dari firebase

Februari, 2021 [PEMROGRAMAN MOBILE] 9

 b. Selanjutnya buatlah kelas baru bernama PushNotificationService yang berguna untuk
menangani pesan dari firebase

​Penjelasan:
● ​Kelas PushNotificationService memiliki dua atribut/field yang bernama _fcm dan
context. kedua atribut/field ini akan di pass melalui konstruktor yaitu
PushNotification(this_fcm, this.context);
● fungsi ​getToken() ​merupakan fungsi async yang mengembalikan sebuah Future. apa itu
Future? Future merupakan sebuah objek yang merepresentasikan komputasi yang
tertunda. Komputasi yang tertunda di dalam fungsi ini berupa fungsi ​_fcm.getToken().
untuk lebih memahami tentang ​async-await ​bisa menuju ke link berikut
https://dart.dev/codelabs/async-await
● _fcm.configure() berfungsi untuk mengkonfigurasi objek _fcm. fungsi configure menerima
parameter diantaranya:
○ onMessage : Saat aplikasi terbuka dan menerima pemberitahuan push
○ onLaunch: Saat aplikasi ditutup sepenuhnya (tidak di latar belakang) dan dibuka
langsung dari notifikasi push
○ onResume : Saat aplikasi berada di latar belakang dan dibuka langsung dari
notifikasi push.

Februari, 2021 [PEMROGRAMAN MOBILE] 10

 c. Lalu Tambahkan sebuah dialog untuk memberitahu user bahwa telah ada pesan yang
masuk di dalam fungsi onMessage sehingga fungsi initialise() akan menjadi seperti di
bawah ini:

​penjelasan:
● Parameter message merupakan parameter bertipa Map<String, dynamic> yang
merupakan variabel yang menampung JSON dari Firebase. variabel ini akan ditampilkan
dalam dialog sederhana

Februari, 2021 [PEMROGRAMAN MOBILE] 11

 d. Selanjutnya, kembali ke main dan buat sebuah objek dari kelas PushNotificationService
yang sudah kita buat sebelumnya. sehingga code kita yang ada di kelas _MyAppState akan
menjadi seperti di bawah ini :

Februari, 2021 [PEMROGRAMAN MOBILE] 12

 4. Mengirim pesan dari console

a. Selanjutnya kita kembali ke console firebase kita dan pilih menu Cloud Messaging. disini saya
sudah mengirimkan beberapa pesan notifikasi. kita bisa membuat pesan baru dengan cara
menekan tombol new Notification

b. Di step Satu, hal yang perlu kita isikan pertama kali yaitu title notification dan text notification

Februari, 2021 [PEMROGRAMAN MOBILE] 13

 c. Lalu di Step ke dua, pilih aplikasi yang ingin dikirimkan notifikasi

d. Untuk step 3-4 saat ini cukup mengikuti pengaturan default dari firebase. tekan tombol
review​ kemudian ​publish. ​tunggu beberapa saat kemudian, maka aplikasi kita akan
menerima pesan dari firebase dan menampilkannya di dialog seperti di bawah ini:

Selamat, kamu sudah dapat membuat aplikasi yang terintegrasi dengan firebase

Februari, 2021 [PEMROGRAMAN MOBILE] 14

LEMBAR KERJA

KEGIATAN 1
1. Buatlah Aplikasi yang terintegrasi dengan Firebase dan dapat menerima notifikasi dari
firebase baik dalam kondisi aplikasi di buka atau pun tidak.

KEGIATAN 2
1. Kirim kan Sebuah notifikasi terjadwal dengan jadwal sesuai dengan jam praktikum
pemrograman mobile ke aplikasi yang telah di buat di kegiatan 1. Aplikasi tersebut
kini harus dapat menampilkan sebuah data yang dikirimkan oleh firebase. data
tersebut berupa:
● Kelas Praktikum
● Lokasi lab (A/B/C/D)
● Lokasi tempat duduk (ex : A23/B24/dst)
● Jam Praktikum (ex : 07.30-08.40)

Tunjukkan kepada asisten aplikasi yang telah dibuat menggunakan emulator atau scrcpy .
pastikan aplikasi yang telah dibuat sudah tidak terdapat error lagi

 
Laboratorium Teknik Informatika

RUBRIK PENILAIAN

A(81-100) B (70 - 80)

Aplikasi dapat di build dan digunakan dengan Aplikasi dapat di build dan digunakan dengan
lancar tanpa error lancar tanpa error

Berhasil Mengirimkan Notifikasi tanpa melalui Berhasil Mengirimkan Notifikasi menggunakan

console firebase (menggunakan API) console firebase seperti contoh di modul

Notifikasi ketika di luar aplikasi dapat Dapat menampilkan notifikasi

membuka aplikasi

Dapat menampilkan data dari kegiatan dua Dapat menampilkan data dari kegiatan dua
dengan tampilan menarik

C(61-69) D(<60)

Aplikasi dapat di build dan digunakan dengan Aplikasi dapat di build namun terjadi error
lancar tanpa error saat digunakan

Berhasil Mengirimkan Notifikasi menggunakan Tidak dapat menampilkan Notifikasi sesuai

console firebase seperti contoh di modul dengan perintah

Februari, 2021 [PEMROGRAMAN MOBILE] 15

 Notifikasi tidak dapat muncul

Data yang dikirimkan tidak dapat ditampilkan

Februari, 2021 [PEMROGRAMAN MOBILE] 16