Google Flutter From Scratch: Menggunakan Layanan Firebase

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dengan Google Firebase, salah satu platform serverless yang paling kuat dan serbaguna yang tersedia saat ini, Anda dapat dengan mudah menambahkan fitur penting seperti manajemen pengguna, pelaporan kerusakan, analitik, penyimpanan data real-time, dan bahkan machine learning ke aplikasi seluler Anda. Agar dapat bekerja dengan platform saat menggunakan kerangka Flutter, Anda memerlukan FlutterFire.

FlutterFire adalah koleksi plugin Flutter resmi untuk Firebase. Dalam tutorial ini, saya akan menunjukkan cara menggunakannya untuk menambahkan tiga layanan Firebase yang berbeda ke aplikasi Flutter.

Prasyarat

Untuk mengikuti tutorial langkah demi langkah ini, Anda akan membutuhkan:

Android Studio 3.1.3 atau lebih tinggi
Flutter SDK 0.9.4 atau lebih tinggi
Flutter plugin 29.0.1 atau lebih tinggi
akun Firebase
perangkat yang menjalankan Android API level 23 atau lebih tinggi

Jika Anda tidak memiliki Flutter SDK atau plugin Flutter, pelajari cara memasangnya di sini:

Android SDK

Google Flutter From Scratch: Membangun Aplikasi Dengan Widget

Ashraff Hathibelagal

1. Mempersiapkan Proyek Flutter

Aktifkan Android Studio dan buat proyek Flutter baru. Di wizard pembuatan proyek, pastikan Anda memilih opsi Flutter application dan kaitkan nama paket yang valid dengannya.

Anda tidak dapat menggunakan layanan Firebase dalam proyek ini sampai Anda mendaftarkannya dengan platform Firebase dan menautkannya ke proyek Firebase. Meskipun Anda dapat melakukannya secara manual menggunakan browser, Anda dapat menghemat banyak waktu dan upaya dengan menggunakan Asisten Firebase Android Studio sebagai gantinya, yang mengotomatiskan sebagian besar langkah untuk Anda.

Mulailah dengan membuka proyek Android asli yang tertanam di dalam proyek Flutter Anda dengan membuka Tools > Flutter > Open for Editing in Android Studio. Saat diminta, pastikan Anda membuka proyek di new window.

Di jendela baru, buka Tools>Firebase untuk membuka Asisten Firebase.

Lalu buka Analytics>Log an Analytics event. Di layar yang terbuka berikutnya, tekan tombol Connect.

Anda sekarang akan melihat dialog yang meminta Anda menentukan nama proyek Firebase baru Anda. Ketikkan nama yang Anda sukai dan tekan tombol Connect to Firebase.

Pada titik ini, Firebase Assistant akan secara otomatis menyelesaikan proses pendaftaran dan menambahkan file bernama google-services.json, yang berisi detail konfigurasi penting, ke proyek Anda.

Untuk dapat membaca file JSON, Anda memerlukan plugin Layanan Google. Jadi buka file build.gradle root-level dan tambahkan classpath plugin di dalam bagian dependencies:

classpath 'com.google.gms:google-services:4.0.1'

Selanjutnya, aktifkan plugin dengan menambahkan baris berikut di akhir file build.gradle app-level:

apply plugin: 'com.google.gms.google-services'

Anda sekarang dapat menutup jendela baru dan kembali ke proyek Flutter.

2. Menambahkan Dependencies

FlutterFire memiliki plugin Flutter independen untuk sebagian besar layanan Firebase. Untuk menambahkan plugin sebagai dependencies dalam proyek Flutter Anda, semua yang perlu Anda lakukan adalah menyebutkannya di bawah kunci dependencies dari file pubspec.yaml.

Kode berikut menunjukkan kepada Anda cara menambahkan dependensi untuk versi plugin terbaru yang terkait dengan layanan Analytics, Cloud Firestore, dan ML Kit:

firebase_analytics: ^1.0.3
cloud_firestore: ^0.7.3
firebase_ml_vision: ^0.2.0+1

Dalam tutorial ini, Anda akan membuat aplikasi yang dapat memindai kode QR dan menyimpan data yang ada dalam database cloud. Seperti yang Anda duga, Anda akan menggunakan plugin ML Kit sebagai decoder kode QR dan plugin Cloud Firestore sebagai antarmuka ke database.

Untuk benar-benar menangkap kode QR, Anda memerlukan Image Picker, sebuah plugin yang memungkinkan Anda berinteraksi dengan kamera. Inilah bagaimana Anda dapat menambahkannya sebagai dependency lain:

image_picker: ^0.4.10

Setelah menambahkan dependencies, lanjutkan dan tekan tombol Packages get untuk menginstal semua plugin.

3. Menggunakan Firebase Analytics

Biasanya, Anda tidak perlu menulis kode tambahan apa pun untuk dapat menggunakan Firebase Analytics di aplikasi Flutter Anda. Selama plugin yang terkait dipasang, aplikasi Anda akan secara otomatis melaporkan data pengguna ke Firebase. Anda dapat memverifikasi ini dengan menjalankan aplikasi Anda segera dan pergi ke console Firebase.

Jika Anda tidak mengalami kesalahan konfigurasi apa pun pada langkah sebelumnya, Anda akan dapat melihat peristiwa yang muncul di panel StreamView dasbor Analytics.

4. Menggunakan Firebase ML Kit

Firebase ML Kit adalah layanan Firebase yang baru saja diluncurkan yang memungkinkan Anda mendeteksi wajah, memindai kode batang, dan melakukan operasi pengenalan karakter optik pada gambar atau video apa pun. Plugin FlutterFire menawarkan API yang sangat intuitif dan ringkas. Mari sekarang kita menggunakannya untuk memecahkan kode kode QR.

Mulai dengan membuat tata letak yang berisi tombol pengguna dapat menekan untuk mengambil foto kode QR. Kode berikut menunjukkan kepada Anda cara membuat tata letak Desain Material dengan widget RaisedButton yang ditempatkan di tengah:

void main() => runApp(new MaterialApp(home: new MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(
          onPressed: () {

            // More code here

          },
          child: new Text("Capture QR Code")
        )
      )
    );
  }
}

Jika Anda menjalankan aplikasi sekarang, itu akan terlihat seperti ini:

Perhatikan bahwa tombol memiliki event listener yang ditekan yang terkait dengannya. Di dalam listener, Anda dapat menggunakan metode pickImage() dari kelas ImagePicker untuk mengambil foto. Karena metode berjalan secara asinkron, Anda harus melampirkan listener ke dalamnya untuk menerima hasilnya. Kode berikut menunjukkan kepada Anda bagaimana:

ImagePicker.pickImage(source: ImageSource.camera).then((photo) {
  // More code here
});

Setelah Anda mengambil foto, Anda dapat meneruskannya ke kelas ML Kit BarcodeDetector untuk mendeteksi kode QR yang mungkin ada di dalamnya. Untuk mendapatkan instance of the class, gunakan metode barcodeDetector() dari kelas FirebaseVision.

ML Kit mendukung berbagai jenis barcode. Untuk membuat proses pendeteksian lebih efisien, Anda dapat menggunakan objek BarcodeDetectorOptions untuk menentukan jenis barcode yang Anda minati. Beginilah cara Anda membuat detektor untuk kode QR saja:

BarcodeDetector detector = 
          FirebaseVision.instance.barcodeDetector(
            BarcodeDetectorOptions(
                barcodeFormats: BarcodeFormat.qrCode
            )
          );

Karena detektor tidak dapat menangani file gambar secara langsung, Anda harus mengonversi foto Anda menjadi objek FirebaseVisionImage menggunakan metode fromFile(). Anda kemudian dapat meneruskan objek ke metode detectInImage() dari detektor untuk mendapatkan daftar barcode yang terdeteksi. Metode berjalan secara asinkron, jadi Anda harus melampirkan listener untuk itu.

detector
      .detectInImage(FirebaseVisionImage.fromFile(photo))
      .then((barcodes) {
        // More code here        
      });

Di dalam listener, Anda akan memiliki akses ke daftar objek Barcode. Bidang rawValue dari masing-masing objek tersebut berisi data raw decode. Untuk saat ini, untuk menjaga hal-hal sederhana, mari kita gunakan widget AlertDialog untuk menampilkan data mentah yang ada di item pertama dari list.

Kode berikut menunjukkan kepada Anda cara membuat widget AlertDialog sederhana yang memiliki widget Text untuk judul dan isinya, dan widget FlatButton yang dapat ditekan untuk menutupnya:

if(barcodes.length > 0) {
  var barcode = barcodes[0]; // Pick first barcode

  // Create Alert Dialog
  showDialog(context: context, builder: (context) {
    return new AlertDialog(
      title: new Text("QR Code Contents"),
      content: new Text(barcode.rawValue),  // Show raw value
      actions: <Widget>[new FlatButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: new Text("OK")
      )],
    );
  });
}

Anda dapat menjalankan aplikasi sekarang dan mencoba memindai beberapa kode QR.

5. Menggunakan Cloud Firestore

Cloud Firestore adalah basis data NoSQL yang dapat Anda gunakan untuk menyimpan data aplikasi Anda di cloud. Plugin FlutterFire-nya menawarkan kelas-kelas yang memungkinkan Anda secara asinkron melakukan operasi CRUD di atasnya.

Sebelum Anda mulai menggunakannya, Anda harus secara manual mengaktifkan layanan Cloud Firestore di konsol Firebase. Untuk melakukannya, buka bagian Database konsol dan tekan tombol Creat Database.

Ketika diminta untuk menentukan security rules database, pilih opsi Start in test mode. Mode ini memungkinkan Anda untuk mulai menggunakan database dengan segera, tetapi tidak sangat aman dan ideal untuk keperluan tes saja.

Terakhir, tekan tombol Enable untuk membuat database.

Kembali di Android Studio, Anda bisa mendapatkan referensi ke database dengan menggunakan instance field dari kelas Firestore. Dengan demikian, tambahkan kode berikut ke widget stateless Anda:

var myDatabase = Firestore.instance;

Saat menggunakan Cloud Firestore, Anda harus menyimpan semua data Anda di dalam dokumen. Selanjutnya, setiap dokumen harus menjadi collection. Untuk membuat atau referensi koleksi, Anda harus menggunakan metode collection(), yang mengharapkan string yang menentukan nama collection.

Setelah Anda memiliki akses ke collection, Anda bisa memanggil metode add() untuk menambahkan dokumen ke dalamnya.

Kode berikut, yang dapat Anda tambahkan tepat sebelum panggilan ke fungsi showDialog(), menunjukkan kepada Anda cara membuat dokumen baru — yang berisi nilai mentah kode QR dan timestamp — dan menambahkannya ke koleksi bernama qr_codes:

myDatabase.collection("qr_codes").add({
        "raw_data": barcode.rawValue,
        "time": new DateTime.now().millisecondsSinceEpoch
      }).then((_) {
        print("One document added.");
      });

Jika Anda menjalankan aplikasi lagi dan memindai kode QR dengannya, Anda sekarang akan dapat melihat konten kode QR di konsol Firebase.

Kesimpulan

Layanan yang ditawarkan oleh platform Firebase sangat diperlukan saat mengembangkan aplikasi seluler modern. Ada plugin Flutter resmi untuk hampir semua layanan tersebut. Dalam tutorial ini, Anda belajar cara menggunakan tiga di antaranya untuk membuat aplikasi pemindai kode QR yang sangat akurat.

Untuk mempelajari lebih lanjut tentang Flutter dan Firebase, silakan lihat dokumentasi resmi.