Upload gambar ke Firebase Kodular

Pada tutorial Kodular kali ini saya akan menjelaskan cara membuat aplikasi yang dapat upload gambar ke Firebase Kodular, dengan menggunakan dynamic image untuk menampilkan gambarnya. Dynamic image termasuk kedalam bagian dari dynamic component.

Aplikasi yang dibuat kali ini mendukung untuk menyimpan atau upload beberapa gambar sekaligus ke firebase, dengan kata lain dapat upload multiple image dengan sekali kirim ke database di firebase. Untuk proses pembuatan aplikasi pada turotial kali ini saya menggunakan Kodular.

Mengapa tidak menggunakan App Inventor? karena saat ini App Inventor belum mendukung untuk bisa menggunakan firebase storage dimana firebase storage ini dapat menyimpan data berupa file, jadi App Inventor hanya bisa menggunakan firebase database saja.

Cara menyimpan data atau upload gambar ke firebase kodular

Hal pertama yang dilakukan adalah membuat database aplikasi di firebase. Pada tutorial kali ini menggunakan 2 database yaitu firebase storage dan firebase database (Realtime Database).

Buat database firebase storage

Sebelum melakukan desain aplikasi hal pertama yang dilakukan adalah membuat databasenya terlebih dahulu. Disini saya menggunakan database storage untuk menyimpan data berupa file. File yang akan saya simpan di firebase storage adalah gambar.

Masuk ke firebase dan login menggunakan akun google, setelah itu tambahkan project baru dan masukkan nama projectnya selanjutnya ikuti saja intruksi atau arahan yang diberikan oleh google. Tunggu sampai kamu masuk kehalaman konsol seperti dibawah ini.

Setelah kamu masuk ke halaman dashboard console firebase, lakukan setting terlebih dahulu pada project yang dibuat agar dapat mendownload file “google-service.json” yang nantinya dijadikan asset aplikasi supaya aplikasi dapat terhubung dengan firebase storage di Kodular.

Kamu dapat klik “icon roda gear” lalu klik setelan project, setelah itu kamu klik logo android untuk menambahkan aplikasi android yang akan dibuat agar dapat terhubung dengan firebase. Pertama daftarkan aplikasi, masukan Nama paket android dan juga Nama aplikasi dengan nama bebas sesuai dengan keinginan kamu. Kamu dapat melihat gambar dibawah ini.

untuk nama paket android formatnya seperti ini “com.namabebas.namabebas“, untuk sertifikat penandatanganan debug tidak perlu di isi karena ini hanya opsional. Setelah selesai memasukkan nama paket android dan nama aplikasi, klik Daftarkan aplikasi.

Kemudian abaikan saja tahap “download file konfigurasi” dan tahap “tambahkan firebase SDK” scroll kebawah klik berikutnya sampai masuk ketahap ke empat yaitu tahap “Baca panduan memulai untuk android”, jika kamu ingin membaca panduannya kamu dapat mengikuti link arahan untuk membaca panduannya, atau kamu bisa langsung klik Lanjutkan ke console untuk masuk ke console firebase.

Setelah kembali ke halaman console firebase, jangan lupa untuk download file “google-service.json”. selanjutnya klik storage untuk membuat databasenya, kemudian klik “mulai” lalu akan muncul jendela yang menampilkan aturan pengamanan data klik saja “berikutnya” lalu muncul lagi halaman pengaturan lokasi, tidak perlu dirubah-rubah diamkan saja secara default dan klik “selesai”.

Baru setelah itu kamu harus mengatur pengamanan datanya, klik “Rules” pada menu Storage, kemudian rubah semuanya menjadi “allow read dan allow write” supaya siapapun pengguna aplikasi dapat menyimpan data, lihat gambar dibawah ini.

Setelah proses pengaturan pengamanan data selesai di rubah, klik “Publikasikan” dan selesai sudah proses pembuatan database firebase storage.

oh iya jangan lupa untuk buat direktori “gambar” pada menu Files di storage firebase. Ini sangat penting karena pada direktori ini akan menampung semua gambar yang telah diupload dari aplikasi android.

Buat firebase database (Realtime Database)

Aplikasi yang dibuat ini akan memanfaatkan 2 penyimpanan “firebase storage dan firebase database (Realtime Database). Firebase storage digunakan untuk menyimpan gambar dan firebase database digunakan untuk menyimpan data url dari gambar yang tersimpan di firebase storage, yang nantinya ketika ingin menampilkan gambar, aplikasi hanya akan memanggil data url gambar yang tersimpan di firebase database.

untuk membuat firebase database ini sudah saya bahas di postingan sebelumnya jadi saya tidak akan membahasnya lagi.

Setelah proses pembuatan firebase database selesai, selanjutnya adalah melakukan desain aplikasi.

Desain aplikasi dengan Kodular

Login ke Kodular, lalu masuk menggunakan akun google atau akun yang sudah terdaftar. Jika kamu belum mempunyai akun kamu dapat daftar akun terlebih dahulu.

Pada desain kali ini, saya membuat 2 tampilan screen, “Screen1” untuk melakukan input gambar dan screen “Tampil” untuk menampilkan gambar yang tersimpan di firebase. Berikut adalah desain yang saya buat.

Adapun komponen penting yang diperlukan yaitu firebase storage, firebase database, camera, ImagePicker, dan Dynamic image. Komponen firebase storage dan firebase database dapat ditemukan di menu pallet google kodular, kemudian komponen camera dan image picker dapat ditemukan di menu pallet media, dan terakhir Dynamic image untuk menampilkan gambar secara dinamis, komponen ini dapat ditemukan di menu dynamic component.

Pada tahap desain jangan lupa untuk upload asset file “google-service.json” agar komponen firebase storage dapat berfungsi dengan baik.

Kemudian juga pada Screen1 atur “properties” pada komponen screen1 di bagian advance properties masukkan package name dengan nama paket di firebase. lihat gambar dibawah ini

untuk melihat package name aplikasi di firebase kamu dapat klik “setelan project” dan disitu akan muncul nama paket beserta kunci API WEB token yang mana itu juga wajib di copy nantinya akan dimasukkan ke dalam komponen firebase database, lihat gambar dibawah ini.

untuk mengetahui firebase url dapat kamu lihat pada bagian menu firebase console kemudian klik “firebase database” kemudian copy url nya seperti contoh gambar diatas.

apabila kunci API WEB kamu tidak muncul seperti gambar di atas, kamu dapat melihat kunci API web pada file google-service.json yang sudah didownload tadi. Kamu dapat membuka file tersebut dengan menggunakan aplikasi notepad windows. Kemudian cari tulisan “api -key”. Lihat gambar di bawah ini

Kode program aplikasi

setelah selesai mendesain aplikasi selanjutnya adalah membuat kode programya agar aplikasi dapat upload gambar ke firebase. Berikut adalah kode programnya

Kode program inisialisasi

kode ini berada pada screen1, yang mana ketika aplikasi pertama kali terbuka makan akan mengambil data url gambar dari firebase database dan menyimpannya ke variabel database kemudian menampilkan judul postingan ke listview image.

Kode program upload delete gambar ke firebase

kode ini berada di Screen1.

Kode menampilkan gambar dari firebase

kode ini berada pada screen “Tampil”

Build aplikasi

Setelah proses pengkodean selesai maka di lanjut untuk membuild projectnya dalam bentuk aplikasi untuk mengecek apakah aplikasi dapat berjalan dengan baik atau tidak. Berikut dibawah ini adalah hasil dari aplikasi yang dibuat.

untuk memastikan apakah data gambar tersimpan atau tidak di firebase, kamu dapat mengeceknya di menu firebase console dan klik “firebase storage”. Jika gambar berhasil tersimpan maka akan muncul banyak direktori yang merupakan alamat dimana gambar tersebut disimpan. Dibawah ini membuktikan bahwa tutorial ini berhasil menyimpan data gambar ke firebase storage.

Bisa dilihat gambar-gambar yang sudah di upload melalui aplikasi tersimpan di firebase storage dan juga berhasil membuat direktori untuk alamat penyimpanan gambar secara otomatis. Oke mungkin hanya segini saja tutorial kali ini, apabila ada yang ingin ditanyakan silahkan tulis di komentar.