Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript

Membuat Aplikasi Real-Time dengan NativeScript: Push Notifications

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Social Login and Firebase

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

NativeScript adalah sebuah framework untuk membangun aplikasi native lintas platform dengan menggunakan XML, CSS< dan JavaScript. Pada seri ini, kita akan mencoba beberapa hal keren yang bisa kamu lakukan dengan aplikasi NativeScript: geolocation dan integrasi Google Maps, SQLite database, integrasi Firebase, dan push notifications. Seiring itu, kita akan membuat aplikasi kesehatan dengan kemampuan real-time yang akan menggunakan fitur-fitur tersebut.

Pada panduan ini, kamu akan belajar mengenai betapa mudahnya menambahkan push notifications ke aplikasi NativeScript-mu dengan Firebase Cloud Messaging Service.

Apa yang Akan Kamu Buat

Diambil dari panduan sebelumnya, kamu akan menambahkan push notifications ke aplikasinya. Sebuah notifikasi akan terpicu ketika pengguna-nya memecahkan rekor-nya atau ketika salah satu teman mereka mengambil posisi pertama dari dia.

Mempersiapkan Proyek-nya

Jika kamu telah mengikuti panduan mengenai Firebase yang sebelumnya, kamu bisa menggunakan proyek yang sama dan membangun fitur-fitur yang akan kita tambahkan di panduan ini. Jika tidak, kamu bisa membuat sebuah proyek baru dan menyalin berkas-berkas awal ke folder proyek aplikasimu.

Setelah itu, kamu juga harus memasang plugin geolocation, Google Maps, SQLite, dan Firebase:

Setelah terpasang, kamu harus mengonfigurasi plugin Google Maps. Kamu bisa membaca petunjuk lengkapnya dengan membaca bagian Memasang Plugin Google Maps di panduan sebelumnya.

Selanjutnya, pasang pustaka fetcha untuk memformat tanggal:

Setelah itu, kamu juga harus mengonfigurasi plugin Firebase. Pastikan untuk membaca bagian berikut di panduan sebelumnya sehingga aplikasimu dapat berjalan.

  • Menjalankan Proyek-nya
  • Mempersiapkan Aplikasi Firebase
  • Mempersiapkan Aplikasi Facebook
  • Memasang Plugin Firebase
  • Mengonfigurasi Integrasi Facebook

Karena kita telah mengatur plugin Firebase di kiriman sebelumnya, hanya sedikit yang perlu kita kerjakan untuk menyiapkan push notifications.

Pertama, kamu harus mengonfigurasi ulang plugin-nya dengan pergi ke direktori node_modules/nativescript-plugin-firebase dan jalankan npm run config. Kali ini, pilih baik Facebook authentication dan Messaging.

Setelah itu, buka berkas firebase.nativescript.json di dalam akar direktori proyekmu dan pastikan bahwa nilai messaging adalah true:

Selanjutnya, buka app/App_resources/Android/AndroidManifest.xml dan tambahkan services berikut ke dalam <application>. Ini akan mengaktifkan Firebase messaging service untuk aplikasinya:

Menjalankan Proyek-nya

Kamu bisa menjalankan proyeknya dengan mengeksekusi tns run android. Tapi karena aplikasi ini akan menggunakan fungsi geolocation, saya rekomendasikan kamu menggunakan GPS emulator untuk mengatur dan mengubah lokasi-mu dengan cepat. Kamu bisa membaca cara melakukannya di bagian Menjalankan Aplikasi-nya di panduan sebelumnya.

Jika kamu mendapatkan build error, kamu bisa menghapus platform-nya dan menjalankan aplikasinya kembali:

Mengatur Firebase Cloud Functions

Kamu akan menggunakan Firebase Cloud Functions untuk membuat sebuah server yang akan mengirim push notifications. Fitur Firebase ini digunakan untuk menjalankan kode back-end kapanpun sebuah event spesifik terjadi di dalam fitur-fitur Firebase yang kamu gunakan — contohnya, jika ada data baru tersimpan di database real-time, atau ketika ada user baru ditambahkan melalui Firebase auth service. Untuk aplikasi ini, kamu akan menggunakan HTTP Triggers untuk mengirim push notifications ketika aplikasi membuat permintaan ke sebuah endpoint tertentu.

Untuk menggunakan Firebase Cloud Functions, kamu harus memasang paket firebase-tools secara global.

Selanjutnya, buat sebuah folder baru yang akan menjadi rumah kode milik server. Ini harus di luar folder aplikasimu. Di dalm folder tersebut, pasang paket firebase-functions:

Setelah terpasang, masuk ke Firebase dengan menjalankan firebase login. Ini akan membuka sebuah tab browser baru yang mengizinkanmu untuk masuk ke akun Google-mu. Ikuti semua proses-nya dan setujui ke semua permissions yang diminta.

Ketika kamu telah masuk, kamu bisa menggunakan Firebase functions untuk proyek Firebase tertentu:

Ini akan menanyakanmu apakah kamu ingin mengatur sebuah proyek bawaan atau tidak. Pilih proyek Firebase yang telah kamu buat di panduan sebelumnya:

setup firebase functions

Selanjutnya, kamu akan ditanyakan apakah kamu ingin dependencies dipasang. Pilih yes.

Ketika semua dependencies terpasang, kamu akan melihat berkas firebase.json dan sebuah folder functions di dalam direktori. Berkas yang akan kamu gunakan adalah functions/index.js. Buka berkas tersebut dan lihat yang berikut:

Uncomment function helloWorld, dan kamu akan melihat aksi dari HTTP triggers.

Jalankan yang berikut untuk menyebarkan function ke cloud:

Ketika penyebaran selesai, dia akan menampilkan URL di mana function-nya disebarkan:

deploy firebase functions

Akses URL tersebut dari browser-mu untuk melihat output "Hello from Firebase!"

Menambahkan Kode Server-nya

Sekarang kamu siap untuk menambahkan kode untuk mengimplementasikan push notifications. Pertama, kamu akan menambahkan kode untuk server component, lalu kode untuk aplikasinya.

Buka berkas functions/index.js dan kosongkan isinya.

Membuat Firebase Function

Impor paket-paket Firebase yang kamu butuhkan:

Buat function init_push. Ingat bahwa HTTP trigger dipanggil untuk tiap permintaan metode, jadi kamu harus menyaring metode permintaan yang kamu ingin proses. Dalam kasus ini, kita hanya ingin memproses permintaan POST. Kita berharap aplikasinya mengirim id, steps, dan friend_ids sebagai request data.

Mendapatkan Data User dan Friends

Nest, minta Firebase database untuk mengecek apakah ID penggunanya ada. Ini adalah cara untuk mengamankan endpoint-nya sehingga tidak semua orang bisa memicu push notifications. (Tentu saja, aplikasi sesungguhnya harus memiliki jauh lebih banyak pengaman back-end sehingga penggunanya tidak bisa menipu data-nya sendiri atau data milik orang lain.)

Jika penggunanya tidak ada, minta database-nya lagi hingga dia mengembalikan semua penggunanya. Ingat bahwa Firebase saat ini tidak menyediakan cara untuk mengembalikan array dari ID berbasis record, jadi kita harus menyaring data yang relevan-nya sendiri:

Lakukan pengulangan dari hari hasil yang dikembalikan Firebase dan buat sebuah array baru yang menyimpan friends_data. Setelah selesai, urutkan array-nya berdasarkan jumlah steps tiap pengguna. Yang tertinggi berada di indeks pertama.

Mengonstruksi Notification Payload

Sekarng kita telah siap untuk menentukan siapa yang akan menerima notifikasi dan membangun notification payload-nya. Siapa yang di tempat pertama? Apakah pengguna saat ini atau teman dari pengguna? Karena pengguna saat ini juga akan memecahkan rekor mereka sendiri ketika dia memecahkan keseluruhan rekor dari siapapun yang berada di tempat pertama, kita cukup mengecek apakah rekor-nya telah dipecahkan.

Mengirim Notifikasi

Terakhir, mengirim notifikasinya:

Memperbaharui Kode Aplikasi-nya

Sebelumnya, kamu telah menyiapkan aplikasinya sehingga dia mampu menerima push notification. Kali ini, kamu akan bisa menambahkan kode sehingga aplikasimu bisa memproses push notification tersebut dan menampilkan-nya ke pengguna.

Menerima Push Notifications

Hal pertama yang harus kamu lakukan untuk menerima push notifications adalah memperbaharui function firebase.init() untuk memasukkan sebuah listener untuk menerima device token:

Function-nya hanya terkeksekusi sekali, jadi kamu harus menyimpan token-nya secara lokal menggunakan pengaturan aplikasi. Nanti, ini akan mengizinkan kita untuk mendapatkan device token ketika pengguna masuk untuk pertama kalinya. Jika kamu masil ingat dari panduan sebelumnya, kita akan menyimpan data pengguna ke Firebase saat pertama kali mereka masuk.

Selanjutnya, kamu bisa menambahkan listener ketika notifikasi diterima. Ini akan menampilkan sebuah kotak peringatan yang menggunakan judul dan badan dari pesan sebagai kontennya:

Menyimpan Device Token ke Firebase

Firebase Cloud Messaging membutuhkan device token saat mengirim sebuah push notifications ke perangat tertentu. karena kita telah menggunakan Firebase, kita hanya perlu menyimpan device token bersama data pengguna. Untuk itu, kamu perlu mengubah kode untuk menyimpan data pengguna untuk memasukkan device token yang baru kita dapat:

Memicu Push Notifications

Push Notifications terpicu ketika satu dari dua hal terjadi:

  • ketika pengguna memecahkan rekor-nya saat itu
  • ketika salah seorang teman pengguna memecahkan rekor mereka dan masuk ke posisi pertama

Yang pertama mudah, jadi tidak perlu pengaturan tambahan. Tapi untuk yang kedua, ada sedikit yang harus dikerjakan. Pertama kamu harus mengubah kode ketika auth state berubah. Tepat setelah mengambil ID teman dari hasil Facebook, kamu harus menyim friend ID menggunakan application settings.

Selanjutnya, perbaharui kode-nya ketika pengguna berhenti melacak jalannya. Tepat setelah kode untuk membangun data pengguna untuk memperbaharui data pengguna, dapatkan riends ID dari application settings dan masukkan dia ke objek yang berisi request data untuk memicu push notification.

Buat permintaan-nya ke endpoint Firebase Cloud Function yang kamu buat sebelumnya. Ketika respon sukses dikembalikan, saat itu data pengguna akan diperbharui di Firebase database.

Mengetes Push Notifications

Kamu bisa mengetes push notification dengan menghapus aplikasinya dari emulator atau perangkat terlebih dahulu. Ini mengizinkan kita untuk memicu dengan benar function-nya untuk mendapatkan device token. Pastikan menambahkan console.log ke output dari device token:

Ketika device token dikeluarkan konsol NativeScript, salin dia. Klik menu Database di dasbor aplikasi Firebase dan tambahkan dia sebagai sebuah perangkat ke semua pengguna aplikasi-nya. Gunakan device_token sebagai nama properti-nya.

Untuk memicu push notification, kamu bisa menggunakan curl untuk membuat sebuah permintaan POST ke endpoint Firebase Function.

Jika kamu tidak memiliki curl, kamu bisa menggunakan Postman App untuk mengirim permintaannya. Gunakan pengaturan berikut untuk permintaannya:

  • Request methodPOST
  • URL: endpoint Firebase function-mu
  • Headers KeyContent-type
  • Headers Valueapplication/json
  • Body:

Ketika terpicu, kamu akan melihat output seperti berikut:

push notification received

Jika aplikasinya belum terbuka, kamu akan melihat notifikasi di notification area:

push notification outside app

Kesimpulan

Selamat! Kamu akhirnya telah membuat aplikasi kesehatan. Selama pelajaran dari empat panduan ini, kamu telah membuat sebuah aplikasi NativeScript yang menggunakan Google maps, SQLite, Firebase Realtime database, dan Firebase Cloud Messaging. Sekarang kamu memiliki fondasi yang kuat untuk membangun aplikasi NativeScript yang menggunakan teknologi tersebut.

Untuk mempelajari lebih mengenai NativeScript atau teknologi lintas platform lainnya, pastika untuk mengecek pelajaran lainnya dan panduannya di sini, Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.