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

Kode Aplikasi Real-Time NativeScript: Social Login dan Firebase

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: SQLite
Code a Real-Time App With NativeScript: Push Notifications

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

NativeScript adalah suatu framework untuk membangun cross-platform aplikasi mobile asli menggunakan XML, CSS, dan JavaScript. Dalam seri ini, kami mencoba beberapa hal keren yang dapat Anda lakukan dengan aplikasi NativeScript: geolocation dan integrasi Google Maps, SQLite database, integrasi Firebase, dan push notifications. Sepanjang jalan, kami sedang membangun sebuah aplikasi kebugaran dengan kemampuan real-time yang akan menggunakan semua fitur ini.

Dalam tutorial ini, Anda akan belajar bagaimana menambahkan login Facebook ke aplikasi NativeScript Anda. Anda juga akan belajar bagaimana menggunakan Firebase untuk menyimpan data sesi berjalan di aplikasi kebugaran.

Apa yang Anda akan menciptakan

Mengambil dari tutorial sebelumnya, mari kita sekarang menambahkan konten tab sosial. Secara default, tombol untuk login menggunakan Facebook ditampilkan seperti ini:

not logged in

Ketika pengguna log untuk pertama kalinya, aplikasi Facebook meminta izin untuk mengakses publik profil dan alamat email:

Facebook permissions

Ia juga meminta daftar teman sebagai izin tambahan.

Setelah user tersebut login, layar berikut akan ditampilkan:

Social tab

Ini adalah di mana info bagi pengguna saat ini masuk dan leaderboard untuk sesi berjalan akan ditampilkan. Perhatikan bahwa hanya sesi berjalan terakhir yang dicatatkan.

Menyiapkan Proyek

Jika Anda mengikuti posting sebelumnya dalam seri ini, SQLite, Anda hanya dapat menggunakan proyek yang sama dan membangun fitur yang kami akan menambahkan dalam tutorial ini. Jika tidak, Anda dapat membuat sebuah proyek baru dan salin file starter ke dalam folder aplikasi proyek Anda.

Setelah itu, Anda juga perlu menginstal geolocation, Google Maps, dan SQLite plugin:

Setelah terinstal, Anda perlu mengkonfigurasi plugin Google Maps. Anda dapat membaca instruksi lengkap tentang cara untuk melakukan ini dengan membaca bagian tentang menginstal Google Maps Plugin dalam tutorial ini sebelumnya.

Setelah itu, Anda juga perlu menginstal fecha, Perpustakaan untuk format tanggal:

Setelah semua selesai, Anda harus siap untuk mengikuti bersama dengan tutorial ini.

Menjalankan Proyek

Anda dapat menjalankan proyek dengan mengeksekusi tns run android. Tapi karena aplikasi ini akan menggunakan fungsi geolocation, saya sarankan Anda menggunakan GPS emulator untuk dengan cepat membuat dan mengubah lokasi Anda. Anda dapat membaca tentang bagaimana untuk melakukannya di bagian menjalankan aplikasi dalam tutorial sebelumnya.

Menyiapkan sebuah Aplikasi Firebase

Hal pertama yang perlu Anda lakukan ketika bekerja dengan Firebase adalah untuk menciptakan sebuah aplikasi Firebase. Anda dapat melakukannya dengan pergi ke console.firebase.com dan klik pada Add project. Masukkan nama proyek dan klik tombol Create project. Pastikan nama proyek adalah sama dengan nama aplikasi. Dalam kasus ini, app ID adalah com.yourname.fitApp sehingga nama app adalah fitApp.

create Firebase project

Setelah aplikasi dibuat, Anda akan diarahkan ke halaman dashboard app. Dari sana Anda dapat klik pada Add Firebase to your Android app, masukkan app ID, dan klik pada tombol Register App.

Add Firebase to Android app

Selanjutnya, men-download file google-services.json dan menyalinnya ke direktori app/App_Resources/android. File yang berisi semua pengaturan yang diperlukan oleh aplikasi untuk berkomunikasi dengan Firebase.

Langkah berikutnya yang dinyatakan dalam Firebase dashboard adalah untuk memasukkan Firebase SDK. Tapi itu sudah dilakukan dalam plugin, jadi kita tidak lagi memiliki untuk melakukannya.

Pengaturan Facebook App

Karena kita akan pergi untuk menggunakan Facebook login, kita juga perlu untuk membuat Facebook app. Pergi ke developers.facebook.com dan buat baru Facebook app:

Create Facebook app

Setelah aplikasi dibuat, Anda akan diarahkan ke app dashboard. Dari sana, klik + Add product menu dan pilih Facebook Login.

Di bawah Client OAuth Settings, memungkinkan segala sesuatu kecuali Force Web OAuth Reauthentication dan Login from Devices. Untuk Valid OAuth redirect URIs, Anda bisa mendapatkan bahwa dengan kembali ke Firebase dashboard, mengklik Authentication, dan memungkinkan Facebook sebagai metode otentikasi:

Authentication methods

Sebelum Anda dapat mengaktifkannya, Anda harus memasukkan Facebook app ID dan app secret key. Anda bisa mendapatkan bahwa dari dashboard Facebook app Anda buat sebelumnya.

Setelah selesai, klik Save dan Salin OAuth redirect URI ke pengaturan Facebook app. Jangan lupa untuk menyimpan perubahan.

Selanjutnya, Anda juga perlu menambahkan Android sebagai platform. Anda dapat melakukannya dengan pergi ke pengaturan Dasar dan mengklik Add Platform:

Android settings

Menetapkan com.yourname.fitApp sebagai nilai untuk nama paket bermain Google dan com.tns.NativeScriptActivity untuk nama kelas.

Catatan bahwa jika Anda akan untuk melepaskan aplikasi ke app store nanti, Anda akan perlu untuk menghasilkan hash untuk app .apk file dan menambahkannya di bawah bidang key hashes. Juga mencatat bahwa untuk pengujian, Anda hanya akan dapat menggunakan pengembang Facebook account yang digunakan untuk membuat aplikasi. Jika Anda ingin menambahkan account Facebook lain untuk pengujian, Anda dapat menambahkan mereka di bawah oles.

Menginstal Firebase Plugin

Untuk mengintegrasikan Firebase, kita perlu menginstal Firebase plugin untuk NativeScript. Hal ini membuat lebih mudah untuk menerapkan Facebook login dan fitur real-time database di Firebase:

Setelah itu dilakukan instalasi, installer akan menanyakan beberapa pertanyaan mengenai fitur Firebase yang akan Anda gunakan dalam app. jawaban no untuk Facebook login dan no untuk sisanya.

Mengkonfigurasi Integrasi Facebook

Anda perlu untuk membiarkan aplikasi tahu mana Facebook app itu akan berbicara. Anda dapat melakukannya dengan membuka file app\App_Resources\Android\AndroidManifest.xml dan menambahkan <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"></meta-data> di bawah tag </application>:

Selanjutnya, membuat file app\App_Resources\Android\values\facebooklogin.xml dan tambahkan berikut:

Pastikan untuk mengganti YOUR_FACEBOOK_APP_ID dengan ID app dari aplikasi Facebook yang Anda buat sebelumnya.

Solving Build Errors

Jika Anda mendapatkan error build setelah menginstal plugin, pastikan untuk memeriksa masalah yang dikenal pada Android bagian di repo README. Jika masalah spesifik tidak ada, mencoba untuk menggali melalui laman issues.

Bagi saya, masalah utama yang saya miliki adalah masalah kompatibilitas dengan plugin Google Maps. Sejak plugin juga menggunakan layanan Google Play, ada konflik dengan versi yang berbeda yang digunakan. Untuk mengatasi itu, saya harus membuka file app/App_Resources/Android/app.gradle dan menentukan versi layanan Google Play untuk digunakan:

Pada saat penulisan tutorial ini, ada di 11.0. Tapi pastikan untuk memeriksa versi yang saat ini terpasang untuk Anda melalui Android SDK.

Setelah selesai, Anda harus uninstall platform android (tns platform remove android) dan mencoba menjalankan aplikasi sekali lagi (tns running android).

Jika itu tidak berhasil bagi Anda dan Anda masih mendapatkan build error yang sama, Anda mungkin perlu memulai dari awal dengan membuat proyek baru. Tapi kali ini, mencoba untuk menginstal plugin Firebase sebelum plugin Google Maps. Kemudian melakukan perubahan konfigurasi yang diperlukan sebelum mencoba untuk menjalankan aplikasi.

Menambahkan kode

Sekarang kita siap untuk menambahkan kode. Pertama-tama kita akan menambahkan XML, lalu JavaScript, dan akhirnya kode CSS.

Menambahkan UI Markup

Kita akan bekerja terutama di dalam tampilan tab sosial. Pertama, tambahkan markup untuk menampilkan info untuk pengguna yang saat ini masuk dan juga tombol untuk keluar:

Berikut adalah markup untuk menampilkan leaderboard. Loop ini melalui friends_data untuk menampilkan nama pengguna, jarak dan langkah yang dilakukan oleh teman pengguna serta pengguna.

Jika tidak ada pengguna yang masuk, kita tampilkan tombol untuk masuk dengan Facebook:

Mengimpor Libraries

Buka file main-view-model.js dan tambahkan berikut ini di bawah kode untuk mengimpor fecha library:

Kami menggunakan nativescript-plugin-firebase untuk berbicara dengan Firebase, http untuk membuat permintaan HTTP ke API Grafik Facebook, dan application-settings untuk mempertahankan data login pengguna.

Initializing Firebase

Selanjutnya, inisialisasi Firebase dengan fungsi init(). Ini menerima sebuah objek yang berisi opsi untuk berbagai fitur yang didukung oleh Firebase (misalnya otentikasi, database real-time, pesan awan).

Di bawah ini, kami menambahkan opsi persist, yang membuat Firebase menyimpan data secara lokal sehingga aplikasi tetap dapat digunakan saat offline. Nantinya, kami akan menambahkan pendengar saat status autentikasi berubah (saat pengguna masuk atau keluar dari aplikasi).

Logging a User In

Selanjutnya, tambahkan kode yang akan dieksekusi saat pengguna mengetuk tombol untuk login ke Facebook. Ini menggunakan fungsi login, yang menerima objek yang berisi type dan facebookOptions.

Type adalah metode otentikasi yang bisa digunakan untuk login. Dalam kasus ini, ini adalah Facebook. facebookOptions adalah objek yang berisi array bernama scope. Elemen dari array ini adalah permission yang Anda inginkan agar aplikasi meminta dari pengguna.

Begitu pengguna masuk dan menyetujui semua izin yang diminta, promise tersebut akan menyelesaikan dan menjalankan fungsi pertama yang diteruskan then(). Rincian pengguna Facebook dilewatkan sebagai argumen pada fungsi ini, namun satu-satunya yang kami butuhkan adalah token akses. Kita bisa menggunakan ini nanti untuk mengajukan permintaan ke API Grafik Facebook untuk mendapatkan informasi tambahan.

Selanjutnya, kami akan mengajukan query ke database Firebase untuk memeriksa apakah pengguna sudah ada atau tidak. Untuk ini, kita menggunakan query() method. Ini menerima fungsi untuk dijalankan saat respons dikembalikan sebagai argumen pertama. Argumen kedua adalah jalur di mana query dilakukan, dan yang ketiga adalah query itu sendiri.

Jika pengguna sudah ada, query() akan mengembalikan data pengguna. Kami kemudian menyimpan data secara lokal menggunakan pengaturan aplikasi. Kami akan perlu mengakses data ini nanti saat kami mendengarkan perubahan status auth, dan saat kami memperbarui sesi berjalan terakhir pengguna di Firebase.

Buat Pengguna Baru

Sekarang mari tambahkan kode untuk menyimpan data bagi pengguna baru. Mulailah dengan membuat objek yang berisi data pengguna. Kemudian buat permintaan ke Facebook Graph API untuk mendapatkan ID pengguna Facebook (yang hanya berlaku untuk aplikasi spesifik ini saja).

Nantinya, kita akan menggunakan ID ini untuk memeriksa apakah pengguna Firebase tertentu adalah teman pengguna saat ini. Firebase tidak mengembalikan ID ini saat Anda log in, karena itulah kami perlu membuat permintaan terpisah.

Setelah respon dikembalikan, kita akan menggunakan push() method Firebase untuk menyimpan data /user di jalur pengguna. Ini mengembalikan key yang berfungsi sebagai ID untuk pengguna spesifik ini. Kami akan menggunakannya nanti untuk memperbarui sesi berjalan terakhir pengguna. Itu sebabnya kami juga perlu menyimpannya secara lokal bersama dengan data pengguna dan token akses Facebook.

Setelah menambahkan kode untuk pengguna yang masuk, langkah selanjutnya adalah kembali memanggil firebase.init(), dan menambahkan onAuthStateChanged. Fungsi ini akan dijalankan setiap kali status auth berubah (saat pengguna masuk atau keluar). Jika pengguna masuk, kami ingin memperbarui UI untuk menampilkan pengguna saat ini.

Perhatikan bahwa kami membungkusnya di dalam setTimeout() dengan penundaan lima detik karena memerlukan beberapa detik setelah masuk untuk mendapatkan data pengguna (key pengguna Firebase, dan Token Akses Facebook) akan tersedia.

Selanjutnya, kita tambahkan kode untuk mendapatkan teman pengguna. API grafik mengembalikan ID dan nama untuk masing-masing teman pengguna, namun kita hanya memerlukan ID. Kita juga perlu push ID untuk pengguna saat ini karena kita akan menampilkannya di leaderboard juga.

Menampilkan Leaderboard

Selanjutnya, tambahkan kode untuk mendengarkan perubahan dalam database. Sampai sekarang, kami belum benar-benar menerapkan bagian 'real-time' dari aplikasi ini. Inilah saatnya kita akhirnya menambahkannya.

Untuk ini, kita menggunakan addValueEventListener() method. Ini menerima fungsi yang ingin Anda eksekusi saat perubahan dilakukan pada jalur yang Anda tentukan sebagai argumen kedua. Seluruh nilai (result) dilewatkan sebagai argumen untuk fungsi ini.

Tidak ada fungsi untuk menentukan query hanya untuk memfilter hasil dengan ID tertentu. Jadi dengan menggunakan array dari ID teman (friends_ids), kita melewati result dan memeriksa apakah baris saat ini adalah pengguna saat ini atau salah satu teman mereka. Baru saat itu kita mendorong nilai untuk baris saat ini. Dari situ, kita cukup memilah dan memformat data untuk ditampilkan di UI.

Memperbarui Sesi Berjalan Terbaru

Saat pengguna berhenti melacak lokasi mereka saat ini, kami memperbarui distance dan steps pengguna di Firebase:

Log Pengguna Keluar

Selanjutnya, tambahkan kode untuk mengeluarkan pengguna. Ini me-reset UI ke status di mana pengguna tidak masuk log, dan juga menghapus data lokal.

Menambahkan Styles

Akhirnya, buka file app/app.css dan tambahkan berikut ini di bawah kode yang ada:

Kesimpulan

Itu dia! Dalam tutorial ini Anda telah belajar bagaimana mengintegrasikan login Facebook dan Firebase ke aplikasi NativeScript. Seperti yang mungkin Anda perhatikan dalam dokumentasi plugin NativeScript Firebase, Anda sebenarnya dapat melakukan lebih banyak hal dengan plugin ini. Sebenarnya, kami akan menggunakan fitur Cloud Messaging untuk menerapkan fitur terakhir untuk aplikasi ini: Push Notifications. Jadi tetap tunggu untuk itu!

Dan sementara itu, lihat beberapa postingan lainnya di aplikasi seluler NativeScript dan lintas platform!

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.