Saturday, November 30, 2019

Membuat Login menggunakan Akun Google dengan Firebase dan Flutter

Login menggunakan akun Google dengan Flutter dan Firebase
Cara membuat Login dengan Google Menggunakan Flutter dan Firebase - Ketika kita membuat sebuah produk atau aplikasi fasilitas atau fitur untuk pendaftaraan (register) dan sign-in (login) adalah hal yang sangat wajib karena dengan fitur tersebut kita bisa membagi akses dan privasi dengan ruang lingkup pengguna masing-masing.

Pada aplikasi tradisional, pendaftaraan dan sign-in biasanya dilakukan secara kustom dengan mengisi data pengguna dari awal. Akan tetapi hal tersebut dinilai tidak efektif dan efisien, dimana hampir semua (calon) pengguna aplikasi / pengguna internet bisa dikatakan memiliki akun email atau sosial media seperti google (gmail), twitter, facebook, ataupun instagram.

Dengan demikian penggabungan fitur pendaftaraan (register) dan sign-in (login) menggunakan akun email atau media sosial yang sudah ada dinilai menjadi langkah yang terbaik untuk bisa menarik pengguna untuk melakukan pendaftaraan ke aplikasi yang kita buat. hal ini sangat wajar dikarenakan tidak semua pengguna mau membuat pendaftaraan akun dari awal untuk mengakses suatu aplikasi sehingga mereka akan memiliki banyak akun dan sulit untuk mengingatnya kembali.

Sebagai seorang developer tentu saja kita perlu mempelajari teknik integrasi register / login menggunakan akun meda sosial atau email yang ada. Pada kesempatan kali ini, saya akan memberikan contoh bagaimana cara membuat login aplikasi menggunakan akun Google dengan API Firebase dan Flutter.

Menggapa menggunakan Firebase?

Firebase dirancang oleh google sebagai BaaS (Backend-as-a-Service) dengan segudang fitur dan kemudahan yang mendukung integrasi login API dengan berbagai akun email seperti google, yahoo dan akun media-media sosial seperti facebook, dan twitter. Sehingga dengan library Firebase pada Flutter kita cukup menambahkan library-library dari masing-masing tipe akun dan kunci-kunci yang dibutuhkan dengan tanpa banyak perubahan kode. Hal ini tentu saja bisa menjadi alternatif yang sangat efektif, efisien, dan fleksibel.


Untuk itu silahkan simak langkah-langkah secara urut dan kode-kode berikut ini untuk Membuat Login menggunakan akun Google dengan Firebase dan Flutter.

1. Membuat Project pada Firebase

Membuat project pada Firebase adalah langkah pertama yang harus anda lakukan, caranya yaitu dengan login Firebase menggunakan akun Google anda, lalu pilih menu Add Project.
Menambahkan Project pada Firebase
Lalu isikan data pada input yang diminta sampai Project pada Firebase berhasil ditambahkan.

2. Menambahkan Aplikasi pada Project Firebase

Setelah kita berhasil menambahkan Project pada Firebase, langkah selanjutnya adalah menambahkan target Aplikasi pada Project Firebase yang kita buat tadi. Cara menambahkan Aplikasi pada Project Firebase adalah dengan cara memilih salah satu Project Firebase yang telah kita buat. Lalu akan muncul detail / dashboard project tersebut dan pilih tombol Add App seperti gambar dibawah ini:
Menambahkan Aplikasi pada Project Firebase
Setelah anda menekan tombol Add App secara default akan ada 4 pilihan lagi yang merupakan tipe Aplikasi dimana target aplikasi yang akan kita buat nantinya. Misalnya pada kasus ini kita akan membuat aplikasi Android, maka pilih ikon atau menu untuk tipe aplikasi Android. Lalu anda akan diminta untuk melakukan pengisian informasi terkait aplikasi anda tersebut.
Mengisi infromasi Android App
Isikan nama package sesuai nama package aplikasi androdi yang akan anda buat nanti, misalnya net.eduprog.eduprog_login_with_google. Lalu isikan App nickname sesuai kesukaan anda misalnya Eduprog Flutter, lalu biarkan isian SHA certificate fingerprints kosong untuk saat ini.
Setelah itu tekan tombol Register app untuk menuju langkah selanjutnya.

Download config file

Langkah selanjutnya adalah mengunduh file google-services.json untuk ditaruh pada folder android->app dalam projek Flutter anda nantinya.
Download config file google-services.json

3. Mengaktifkan Sign-in method

Setelah anda mendownload dan menyimpan file google-services.json berari anda telah menyelesaikan langkah Menambahkan Aplikasi pada Project Firebase, lalu langkah selanjutnya adalah mengaktifkan Sign-in method dengan cara memilih projek tersebut lalu pilih menu Authentication -> Sign-in method seperti pada gambar dibawah ini.
Sign-in method

Membuat Projek Flutter untuk Login dengan Akun Google

Setelah kita mempersiapkan semua konfigurasi projek Firebase pada langkah sebelumnya, saatnya kita mulai mengimplementasikan pembuatan kode atau projek Flutter untuk melakukan Login dengan Akun Google dengan Firebase.

1. Membuat Projek Flutter

Buatlah projek Flutter melalu Android Studio dengan nama package sama seperti yang anda buat saat mengatur projek Firebase pada langkah sebelumnya, misalnya "net.eduprog.eduprog_login_with_google".

2. Menambahkan Package

Tambahkan 2 library (package) pada file pubspec.yaml, yaitu firebase_auth dan google_sign_in seperti gambar dibawah ini:
File Package Flutter
Setelah anda menambahkan package, lakukan proses Packages get dengan menekan menu aplikasi Android Studio anda.

3. Membuat file-file Source Code

Setelah anda menambahkan package yang diperlukan untuk projek Flutter kita kali ini, saatnya untuk membuat file-file Source Code dengan struktu sebagai berikut ini:
  • main.dart (file utama)
  • util\screen_util.dart (file source untuk class bantuan screen)
  • page\login_page.dart (file source untuk halaman login)
Kode masing-masing file:

4. File google-services.json dan Konfigurasi SDK

Setelah anda menuliskan kode-kode seperti file di atas, langkah selanjutnya adalah melakukan menaruh file google-services.json pada folder [android\app] dan melakukan konfigurasi pada SDK untuk mengkompilasi APK melalui file-file berikut ini:

1. File: android\build.gradle
Tambahkan classpath 'com.google.gms:google-services:4.3.2' pada dependencies seperti gambar dibawah ini:
file build.gradle

2. File: android\app\build.gradle
Tambahkan kode apply plugin: 'com.google.gms.google-services' pada baris terakhir di file tersebut, seperti gambar dibawah ini:
file build.grade pada folder app

5. SHA certificate fingerprints

Tambahkan kode SHA-1 pada projek Firebase yang kita buat sebelumnya untuk versi debug / release agar aplikasi berjalan tanpa error saat kompile di virtual / physical device android yang kita gunakan untuk menjalankan aplikasi.

Bagaimana cara mendapatkan kode SHA-1 aplikasi kita?
Agar library firebase_auth dan google_sign_in dapat berjalan dengan baik setelah APK dikompile, maka anda perlu menambahkan fingerprint sertifikat kode SHA-1 yang bisa anda generate melalui Android Studio dengan cara membuka projek Flutter anda lalu buka salah satu file di folder android (misal file : build.gradle) lalu pilih menu Open for Editing in Android Studio.
Open for Editing in Android Studio

Lalu setelah projek terbuka di Android Studio, pilih menu khusus untuk gradle di pojok kanan atas, seperti pada gambar dibawah ini:
Menu Gradle

Setelah itu akan muncul beberapa menu yang memiliki sub menu masing-masing, untuk melakukan sign-in report, anda harus buka menu app->Tasks->android->signingReport seperti pada gambar dibawah ini:
Signing Report
Lalu lakukan double klik pada signingReport untuk memulai proses generate kode sertifikat untuk aplikasi APK anda. Jika proses signing berhasil, maka akan muncul kode-kode MD5, SHA-1, dan SHA-256 pada window tab Run seperti gambar dibawah ini :
Hasil signingReport
Lalu salin kode SHA-1 yang muncul pada proses signingReport seperti di atas, untuk anda masukan kedalam projek Firebase yang anda buat sebelumnya. Contohnya pada gambar diatas kode SHA-1 nya adalah FE:49:10:A9:F3:1E:54:F2:7D:88:14:45:E3:E6:95:68:7B:04:F3:3D.

6. Menambahkan kode SHA pada projek Firebase

Setelah anda melakukan signingReport pada langkah sebelumnya, saatnya melakukan langkah terakhir sebelum anda menjalankan projek Flutter ke virtual / physical device anda. Caranya adalah dengan cara membuka projek Firebase anda, lalu memilih konfig untuk aplikasi (type) android yang anda tambahkan pada langkah sebelumnya.

Tambahkan kode SHA-1 dari hasil signingReport kedalam projek Firebase tersebut,seperti gambar berikut ini:
Menambahkan SHA-1 di projek Firebase

7. Menjalankan projek Flutter ke Virtual Device

Setelah menyeleaikan semua langkah-langkah sebelumnya, sekarang anda bisa memulai mencoba hasil program / apliaksi mobile yang kita buat dari Flutter di atas.
Hasil aplikasi Android
Catatan:
Untuk kompilasi pada aplikasi iOS caranya lebih sederhana, tidak serumit seperti pada aplikasi android di atas.


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Thursday, November 14, 2019

Cara Melewati Validasi Certificate pada POST dan GET Request HTTPS

Mengatasi Error CERTIFICATE_VERIFY_FAILED Pada Flutter
Cara ByPass Validasi Setifikat HTTPS pada Request POST dan GET Flutter - Ketika kita membuat aplikasi mobile baik Android maupun IOS dengan codebase Flutter, biasanya kita mengirimkan data ke proses back-end (server) melalui 2 method HTTP baik itu GET maupun POST.

Method HTTP GET dan POST adalah metode paling umum digunakan oleh developer untuk berkomunikasi dengan sisi back-end. Untuk menambahkan tingkat keamanan data, tidak sedikit pula yang menggunakan metode SSL atau menambahkan sertifikat pada HTTP sehingga disebut dengan HTTPS. Sertifikat pada HTTPS masih dibagia menjadi 2 bagian lagi yaitu sertifikat private dan sertifikat public (yang berlaku secara global).

Dengan menggunakan HTTPS tentu saja akan menjamin keamanan tranmisi data dari aplikasi mobile kita sampe ke server back-end. Namun dalam mengembangkan aplikasi mobile terkadang kita terkendala dengan berbagai masalah pada sertifikat HTTPS seperti sertifikat sudah kadaluarsa, sertifikat bersifat private, dan sejenisnya. Hal-hal tersebut akan menyebabkan proses komunikasi ke server back-end gagal dan menyebabkan error CERTIFICATE_VERIFY_FAILED pada Flutter (Dart).

Padahal sebagai developer kita harus memikirkan cara bagaimana, jika hal-hal demikian terjadi pada sertifikat HTTPS server back-end kita, aplikasi harus tetap jalan dengan baik (kecuali itu sebagai aturan ketat yang tidak boleh kita lalui). Untuk itu, berikut adalah cara / kode untuk melewati validasi sertifikat method POS dan GET pada request HTTPS dengan Flutter.

Package Tambahan
http: ^0.12.0+1

Kode:

Keterangan
Pada contoh kode di atas kita melakukan request GET ke link https://self-signed.badssl.com/ yang mana link tersebut memiliki seritfikat private (self signed) dimana pada kode standar request HTTP pada Dart/Flutter kasus ini akan menyebabkan error CERTIFICATE_VERIFY_FAILED dan membatalkan request yang dilakukan. Dengan contoh kode di atas error dapat diatasi dan request tetap diproses dengan baik.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Wednesday, November 6, 2019

Mengenal dan Membuat Stuktur BLoC pada Flutter

Membuat Struktur BLoC pada Flutter
Membuat Design Pattern BLoC dengan Flutter - Dalam membuat aplikasi awalnya sering kali kita dibuat bingung dengan konsep utama (core concept) yang akan kita terapkan pada pembuatan Aplikasi. Karena hasl tersebut akan sangat mempengaruhi pengembangan aplikasi kita kedepanya, terutama jika pengembangan aplikasi tidak hanya dilakukan oleh individu melainkan sebuah tim.

Pemahaman dasar atas konsep yang akan diterapkan nantinya harus bisa dimengerti oleh setiap individu yang terlibat dalam pengembangan aplikasi tersebut sehingga kode yang dibuat terkesan kompak dan mudah dipahami oleh masing-masing individu.

Jika biasanya kita sering mendenger konsep design pattern dengan nama MVC (Model View Controller) pada pembuatan aplikasi, pada Flutter terdapat beberapa konsep design pattern lain yang cukup populer seperti Vanila, Scoped Model, dan BLoC. Memang pada dasarnya tujuan dari setiap desaign pattern untuk pembuatan aplikasi adalah sama, yaitu untuk membuat pembuatan kode aplikasi yang lebih terstruktur sehingga dapat memisahkan  atau mengelompkan kode sesuai bagian masing-masin terutama antara proses (logika bisnis) dan tampilan (presentasi).

Pada kesempatan kali ini kita akan mempelajari implementasi pattern BLoC saja, kenapa harus BLoC? Karena ada beberapa alasan kita perlu mempelajari pola BLoC dalam membuat aplikasi mobile dengan Flutter. Alasan utamanya adalah dengan pola BLoC kita dapat mengatur / memanag state lebih efektif dan efisien karena kita memisahkan antara tampilan / presentasi dengan proses / logika bisnis nya.

BLoC adalah kependekan dari Bussiness Logic Component dimana tujuan dasarnya adalah memisahkan bagian kode untuk tampilan dan kode untuk logika bisnis. Perlu anda ketahui juga bahwa BLoC adalah salah satu dari design pattern yang dirancang oleh google, sehingga kemungkinan besar pola ini akan dianut oleh banyak pengguna Flutter.

Dasar-Dasar BLoC

Setelah kita membahas sedikit tentang BLoC di atas, sebelum mengimplementasikan dalam sebuah kode Flutter kita perlu tahu dasar-dasar BLoC sehingga kita tidak dibingungkan oleh pola ini saat implementasi ke sebuah kode nantinya. Karena sesuai pengalaman saya, memahami suatu pola yang dibuat orang lain tentu saja tidak mudah untuk dicerna oleh logika kita karena sejujurnya saya termasuk orang yang lebih senang menciptakan pola saya sendiri sesuai idealisme saya sendiri.

Untuk itu perhatikan baik-baik dasar-dasar yang perlu anda ketahui dalam memahami BLoC ini, karena secara garis besar komponen pembentuk  pola BLoC sangatlah sederhana.

Stream

Stream adalah salah satu komponen utama pembentuk BLoC, sehingga Stream wajib anda ketahui terlebih dahulu sebelum anda mengimplementasikan BLoC kedalam kode aplikasi Flutter anda. Secara umum pengertian Stream adalah aliran sesuatu (data) secara terus menerus, jika anda familiar dengan pemrograman socket biasanya istilah stream sudah tidak asing lagi di telinga anda.

Event

Event adalah kejadian, interaksi yang dilakukan oleh user pada aplikasi membangkitkan sebuah event. Misalnya user menekan tombol akan membangkitkan even onButtonPressed (hanya contoh), dan lain sebagainya.

Pada implementasi BLoC, kita akan membuat semua interaksi user dalam bentuk suatu event yang mana event tersebut akan ditranformasikan ke dalam bentuk state Flutter.

Implementasi BLoC pada Kode Flutter

Setelah kita sedikit menyinggung Stream dan Event kini waktunya kita mencoba mengimplemtasikan stukur BLoC pada Flutter. Sebelum kita melangkah pada pembuatan contoh kode yang mengimplementasikan struktur BLoC. Perlu kita ketahui bahwa, Flutter mendukung library agar developer dapat mengimplementasikan struktur BLoC dengan kode yang sangat sederhana, yaitu menggunakan pacakage flutter_bloc.
Untuk itu, pada kasus contoh implementasi kode struktur BLoC kali ini kita menggunakan package flutter_bloc.
flutter_bloc: ^0.22.0
Sebagai tambahan, studi kasus pada contoh kode struktur BLoC kali ini adalah tentang pembuatan aplikasi counter sederhana yang mempunyai 2 fungsi utama yaitu increment dan decrement.
Sehingga event yang terlibat dalam contoh kode implementasi BLoC kali ini hanya terdiri dari 2 event yaitu increment dan decrement.

Untuk itu buatlah sebuah project Flutter denganstrutkru kode file seperti berikut ini:
  • main.dart (file utama)
  • bloc\counter\counter_event.dart (file kode event untuk counter)
  • bloc\counter\counter_bloc.dart (file kode implementasi BLoC untuk counter)
  • bloc\counter\counter_page.dart (file kode tampilan untuk halaman counter)
Kode-kode masing-masing file:

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Sunday, November 3, 2019

Tips Membuat Distribusi APK Jauh Lebih Kecil dengan Flutter

Membuat APK lebih kecil pada Flutter
Membuat hasil APK yang Lebih Kecil dengan Flutter - Kebanyakan framework reactive seperti React Native ataupun Flutter menghasilkan ukuran kompilasi APK yang sangat besar. Itu dikarenakan aplikasi yang dibuat dari framework tersebut harus menyertakan library utama (core library) yang berukuran cukup besar. Padahal dalam membuat aplikasi biasanya kita menginginkan hasil kompilasi APK yang lebih ramping yang tentu saja lebih menarik pengguna untuk mendownload aplikasi yang kita buat.

Jika ukuran kompilasi APK yang kita buat cukup besar, hal tersebut tentu saja akan menjadi masalah bagi kita dalam hal branding ke pengguna. Lalu, bagai mana cara mengatasi hal tersebut pada Flutter?

Google sebagai perusahaan raksasa di balik layar Flutter, tentu saja telah memikirkan hal tersebut. Dengan demikian kita sebagai pengguna framework Flutter tidak perlu khawatir dengan hasil kompilasi APK yang dihasilkan oleh Flutter. Karena ada opsi kusus untuk membuat ukuran aplikasi yang kita distribusikan nanti lewat Play Store menjadi ukuran yang lebih kecil dan efisien.

Secara umum sintaks untuk melakukan kompilasi APK pada flutter adalah sebagai berikut:

flutter build apk

Lalu jika kompilasi berhasil, maka sintaks tersebut akan menghasilkan 1 versi release APK, hanya saja versi APK yang dihasilkan adalah untuk 2 tipe ABI (Application Binary Interface) yang dijadikan satu kesatuan APK sehingga ukuran secara default lebih besar atau setara dengan 2x lipat tukuran aslinya. Hal ini tentu saja tidak salah, karena aplikasi yang kita distribusikan harus kompatibel dengan semua device Android (mobile).

Untuk membuat distribusi APK jauh lebih kecil di playstrore, kita bisa menggunakan cara distribusi APK yang direkomendasikan oleh Google yaitu dengan APK Bundle. Caranya tidak sulit, cukup ikuti langkah langkah berikut ini :

flutter build appbundle

Sintaks di atas akan menghasilkan 1 APK bundle dengan ektensi .aab yang siap diupload ke playstore, secara umum ukuranya .aab akan sama dengan ukuran apk yang kita kompilasi dengan sintaks flutter build apk karena memang didalam APK bundle terdapat 2 ABI yang nantinya akan diupload ke google playstore. Hanya saja, jika kita menggunakan cara tersebut maka ketika pengguna akan mendownload aplikasi kita melalui playstore, pengguna akan diarahkan pada 1 ABI yang sesuai dengan tipe devicenya. Sehingga ukuran yang didownload jauh lebih kecil.