Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. iOS SDK
Code

Pengantar Firebase

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Kita berada di era pembuatan prototipe cepat. Kita mungkin punya ide-ide cemerlang, tetapi kadang-kadang ide-ide itu tidak diimplementasikan jika terlalu banyak bekerja. Seringkali, back-end adalah faktor pembatas—banyak ide yang tidak pernah diimplementasikan karena kurangnya pengetahuan atau waktu untuk pengkodean sisi server.

Sebagai mobile developer, menggunakan platform back-end sebagai layanan (BaaS) dapat membantu Anda mengimplementasikan ide-ide Anda dengan cepat.

Firebase memiliki semua fitur utama yang Anda butuhkan untuk pembuatan prototipe cepat dan menguji ide-ide Anda dengan cepat. Menggunakan Firebase, Anda dapat membuat pintasan pembuatan fungsionalitas seperti otentikasi, basis data, dan penyimpanan objek. Firebase juga dilengkapi dengan kemampuan lain yang dapat berguna untuk memvalidasi prototipe, seperti analitik, pengujian A/B, dan push notifications.

Yang terbaik dari semuanya, Firebase gratis untuk proyek-proyek kecil!

Mengonfigurasi Aplikasi iOS untuk Menggunakan Firebase

Mari kita buat contoh proyek Xcode yang menggunakan Firebase. Kita akan menamainya MyFirstFirebaseApp.

Membuat Proyek Xcode Baru

Create a new Xcode project

Pilih template Single View App untuk proyek Anda.

Sekarang proyek sudah dibuat, mari mulai mengonfigurasinya untuk Firebase.

Membuat Podfile

CocoaPods adalah manajer dependensi untuk proyek-proyek Swift dan Objective-C Cocoa. Kita perlu menginisialisasinya dalam proyek kita. Ini dapat dilakukan dengan perintah pod init.

Menambahkan Firebase Pods

Kita ingin menambahkan pod Firebase/Core ke proyek kita. Ini termasuk library prasyarat yang diperlukan untuk menjalankan Firebase.

Sekarang beginilah tampilan Podfile Anda:

Podfile with Firebase Core

Menginstal Pod dan Buka Proyek dalam Xcode

Setelah memasukkan rincian pod, mari kita instal podnya dengan perintah pod install. Kemudian kita dapat membuka proyek di dalam Xcode dengan membuka file .xcworkspace.

Membuat dan Mengonfigurasi Akun Firebase Anda

Membuat Akun Firebase

Sekarang mari kita atur akun Firebasenya! Seperti yang kita semua tahu, Firebase adalah produk Google, jadi kita dapat membuat akun Firebase Console menggunakan akun Gmail kita.

Namun, perhatikan: Firebase tidak sepenuhnya gratis. Kita bisa mulai dengan versi gratis untuk prototipe awal, tetapi jika Anda memiliki rencana untuk mulai berproduksi dengan Firebase maka Anda harus mengetahui struktur harganya.

Membuat Proyek Baru di Firebase Console

Sekarang setelah kita berhasil masuk ke akun Firebase kita, mari buat proyek. Klik pada Add project.

Setelah proyek dibuat, Firebase Database, User Management, dan Remote Config dapat dibagikan dengan iOS, Android, dan web.

Add a project in the Firebase Console

Setelah proyek dibuat, Anda akan dibawa ke layar Project Overview. Di bawah Get started, klik iOS untuk memulai prototipe iOS kita.

Firebase Project Overview

Mendaftarkan Aplikasi untuk iOS

Untuk mendaftarkan aplikasi kita, kita perlu memberikan pengidentifikasi proyek.

Add Firebase to an iOS AppRegister App

Sekarang klik Register app. Anda akan diminta untuk mengunduh file .plist yang perlu ditambahkan ke proyek Xcode Anda.

Download infoplist file

GoogleService-Info.plist ini akan berisi informasi dasar seperti id klien, API Key, URL database, dan bucket penyimpanan. Lihatlah setelah Anda mengunduhnya. Anda kemudian perlu menambahkannya ke proyek Anda dengan menambahkannya ke folder yang ditunjukkan di bawah ini di Xcode.

Xcode project with GoogleService-Infoplist

Menambahkan Kode Inisialisasi ke Aplikasi Anda

Sekarang Anda dapat menambahkan kode inisialisasi Firebase ke aplikasi Anda! Buka AppDelegate, dan impor Firebase. Kemudian tambahkan FirebaseApp.configure() di dalam didFinishLaunchingWithOptions. Kode Anda akan terlihat seperti ini:

Pastikan Firebase Berfungsi di Aplikasi Anda

Persiapan akhirnya selesai, dan Anda siap menguji apakah Firebase diinstal dengan benar di aplikasi Anda. Ketika Anda mengklik Next pada halaman Add Firebase to your iOS app di Firebase Console, Anda akan melihat ini:

Run your app to verify installation

Mari kita bersihkan, bangun dan jalankan aplikasi melalui Xcode—seharusnya tidak ada kesalahan. Anda juga dapat melihat beberapa log yang terkait dengan Firebase di konsol Anda. Jika semuanya berfungsi dengan benar, Firebase Console akan memberi tahu Anda.

Hore! Sekarang kita telah berhasil mengatur Firebase untuk aplikasi kita.

Firebase User Management

Seperti yang disebutkan sebelumnya, Firebase dapat digunakan untuk user management, jadi mari siapkan aplikasi kita untuk otentikasi dan mengelola pengguna. Pertama, mari kita navigasi ke bagian Authentication di Firebase Dashboard, seperti yang ditunjukkan di bawah ini.

Authentication section in the Firebase Dashboard

Klik Set up sign-in method. Di sini kita bisa melihat sejumlah kemungkinan. Anda dapat memilih lebih dari satu, atau jika Anda memilih untuk tidak masuk, Anda dapat memilih Anonymous.

  • Email/Password: Memungkinkan pengguna untuk mendaftar menggunakan alamat email dan kata sandi mereka. SDK Firebase juga menyediakan verifikasi alamat email, pemulihan kata sandi, dan perubahan primitif alamat email.
  • Phone: Mengizinkan pengguna untuk masuk dengan nomor ponsel menggunakan Firebase SDK verifikasi telepon dan alat otentikasi pengguna. Di bawah rencana Spark gratis di Firebase Anda mendapatkan 10.000 telepon login sebulan, tapi setelah itu Anda harus membayar. Silahkan lihat bagian harga sebelum memilih untuk ini.
  • Google: Google sign-in secara otomatis dikonfigurasikan pada iOS dan aplikasi web yang terhubung. Untuk mengatur Google sign-in untuk aplikasi Android Anda, Anda perlu menambahkan sidik jari SHA1 untuk setiap aplikasi di Pengaturan Proyek Anda.
  • Play Games: Mengonfigurasi ID Klien dan rahasia Klien.
  • Facebook: Untuk menggunakan Facebook untuk otentikasi, Anda harus menambahkan URI redirect OAuth ke konfigurasi aplikasi Facebook Anda.
  • Twitter: Untuk menggunakan Twitter untuk otentikasi, Anda akan menambahkan URL panggilan balik ke konfigurasi aplikasi Twitter Anda.
  • GitHub: Untuk mengatur otentikasi dengan GitHub, Anda akan menambahkan URL otorisasi panggilan balik ke konfigurasi aplikasi GitHub Anda.
  • Anonymous: Pilih opsi ini untuk mengaktifkan akun tamu anonim di aplikasi Anda, yang memungkinkan Anda mengaktifkan keamanan spesifik pengguna dan rules Firebase tanpa memerlukan kredensial dari pengguna Anda.

Mengonfigurasi Otentikasi Telepon

Mari kita lihat bagaimana kita dapat menggunakan telepon sebagai metode masuk.

Pertama, navigasikan ke Sign-in method, klik Phone, dan aktifkan. Anda akan melihat layar seperti ini:

Anda juga harus memasukkan pod Firebase/Auth di Podfile Anda.

Setelah menambahkan baris atas dalam Podfile Anda, navigasikan ke folder proyek dan jalankan perintah pod install.

Selanjutnya, Anda perlu mengaktifkan pemberitahuan push di proyek Xcode Anda.

Enable push notifications

Untuk menemukan pengaturan ini, pilih aplikasi Anda dari panel Targets dan klik pada tab Capabilities. Dari sana, Anda dapat mengaktifkan Push Notifications.

Verifikasi reCAPTCHA

Sekarang mari kita konfigurasikan verifikasi reCAPTCHA. reCAPTCHA digunakan jika pengiriman atau penerimaan pemberitahuan push tidak dimungkinkan, seperti ketika pengguna telah menonaktifkan background refresh untuk aplikasi Anda, atau ketika menguji aplikasi Anda pada simulator iOS. Dalam kasus ini, Firebase Authentication menggunakan verifikasi reCAPTCHA untuk menyelesaikan alur masuk telepon.

Klik GoogleService-Info.plist di panel kiri Xcode untuk membuka plist. Sekarang salin nilai REVERSED_CLIENT_ID ke TextEdit atau notepad lain.

Selanjutnya, buka Targets > aplikasi Anda > Info > URL Types. Klik tombol "+" dan salin nilai REVERSED_CLIENT_ID ke dalam URL Schemes, seperti yang ditunjukkan di bawah ini.

URL Types Settings

Mengonfigurasi Firebase Cloud Messaging

Sekarang mari kita konfigurasikan Firebase Cloud Messaging dengan APN aplikasi kita.

Buka Firebase Console, dan sekali Anda mengklik tombol Settings, Anda akan melihat Project Settings dan Users and Permissions. Klik Project Settings lalu tab Cloud Messaging. Pada layar ini, Anda dapat menemukan bagian konfigurasi aplikasi iOS.

Firebase Cloud Messaging settings for an iOS app

Untuk mengaktifkan Firebase Cloud Messaging, kita akan mengunggah APN kita dan kunci otentikasi APN kita ke dialog ini.

Anda harus membuat kunci autentikasi APN dan kunci sertifikat APN.

Langkah-langkah untuk Membuat Kunci Autentikasi APN

  • Di akun pengembang Anda, buka Certificates, Identifiers & Profiles, dan di bawah Keys, pilih All.
  • KLik tombol add (+) di sudut kanan atas.
  • Masukkan deskripsi untuk kunci autentikasi APN.
  • Di bawah Key Services, pilih checkbox APNs, dan klik Continue.
  • Klik Confirm lalu Download. Simpan kunci Anda di tempat yang aman! Ini adalah unduhan satu kali, dan kunci tidak dapat diambil nanti lagi nantinya.

Langkah-langkah untuk Membuat Kunci Sertifikat APN

  • Buat App ID dari akun pengembang Apple Anda dan aktifkan Push Notification saat membuat. ID Aplikasi adalah pengidentifikasi yang mengidentifikasi aplikasi secara unik. Sebagai sebuah konvensi, ini diwakili oleh domain terbalik dengan nama perusahaan Anda dan nama aplikasi (mis. com.mysoft.myfirstfirebaseApp).
  • Buat Provisioning Profile untuk ID Aplikasi di atas.

Dan ya! Sekarang, kita sudah selesai dengan semua konfigurasinya, dan kita dapat mulai menerapkan aliran registrasi dan login.

Mendaftarkan Pengguna Dengan Otentikasi Telepon

Mari kita kembali ke Xcode dan membuat file RegistrationViewController.swiftRegistrationViewController.storyboard, dan RegistrationService.swift.

Untuk storyboard, saya telah menambahkan UITextField dan UIButton seperti yang ditunjukkan di bawah ini. Ini harus ditautkan di RegistrationViewController.swift.

The registration storyboard

Ini adalah bagaimana RegistrationViewController.swift saya akan terlihat:

Karena fokus utama kita adalah pada Firebase, kita tidak akan mengimplementasikan UITextFieldDelegates. Sebagai gantinya, untuk mempermudah, kita akan menangkap teks pada button click.

Sekarang mari kita tambahkan kode berikut di RegistrationService.swift.

Di dalam kode ini, PhoneAuthProvider.provider().verifyPhoneNumbermengambil nomor telepon sebagai input dan mengirimkan kita kembali ke verificationID. Ini juga memicu pesan one-time password (OTP) ke nomor telepon yang disediakan di bidang teks. Pengguna akan menerima OTP di ponsel mereka dan memasukkannya kembali ke dialog peringatan di aplikasi.

Catatan: saat memasukkan nomor telepon, pastikan kode negara juga dimasukkan.

Perhatikan juga bahwa kita harus ingat untuk mengimpor FirebaseAuth di bagian atas file.

Sekarang, mari kita kembali ke RegistrationViewController.swift dan panggil getVerificationId, seperti yang ditunjukkan di bawah ini. Di sini, saya mencetak id ke konsol untuk memeriksa apakah verificationId sudah di-generate.

Metode Sign-In

Sekarang mari kita menulis metode masuk di RegistrasiService. Di sini, kita akan membuat objek Kredensial Firebase menggunakan verifikasiId dan OTP. Beginilah tampilan kodenya:

Setelah kita menerima id, kita akan menampilkan tampilan alert bagi pengguna untuk menangkap OTP dan memanggil metode signIn di RegistrationService. Seperti inilah RegistrationViewController akan terlihat setelah perubahan ini:

Sekarang Anda dapat menjalankan aplikasi untuk mencobanya—inilah yang akan Anda lihat ketika Anda mengklik Request OTP.

Registration OTP Dialog

Sekarang status sign-in akan dicetak sebagai Success. Kita dapat memeriksa di Firebase Console bahwa pengguna telah dibuat.

Kesimpulan

Dalam tutorial ini, kita membuat aplikasi sederhana menggunakan Xcode dan Firebase. Mudah-mudahan, Anda akan memperoleh beberapa keterampilan baru yang akan dapat Anda praktikkan dalam proyek mendatang.

Jika Anda memiliki pertanyaan, beri tahu saya di kolom komentar di bawah.

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.