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.

Upload gambar ke Firebase Kodular
Upload gambar ke Firebase Kodular

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.

Dashboard Console Firebase
Dashboard Console Firebase

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.

Menambahkan firebase ke aplikasi android
Menambahkan firebase ke aplikasi android

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.

halaman setting console firebase
halaman setting 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.

atur pengamanan data aplikasi upload gambar ke firebase
atur pengamanan data

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.

Desain Aplikasi upload gambar ke firebase kodular
Desain Aplikasi

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.

Upload google service json ke asset kodular
Upload google service json ke asset

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

Setting advance properties di komponen Screen1
Setting advance properties di komponen Screen1

untuk melihat nama paket 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.

setting komponen firebase database
setting komponen firebase database

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

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 awalan aplikasi upload gambar ke firebase kodular
kode awalan aplikasi upload gambar ke firebase kodular

Kode program upload delete gambar ke firebase

kode ini berada di Screen1.

kode upload image dan delete image ke firebase kodular
kode upload image dan delete image ke firebase kodular

Kode menampilkan gambar dari firebase

kode ini berada pada screen “Tampil”

kode untuk menampilkan gambar dari firebase kodular
kode untuk menampilkan gambar dari firebase kodular

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.

dokumentasi aplikasi upload gambar ke firebase kodular

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.

gambar berhasil tersimpan di firebase storage
gambar berhasil tersimpan di 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.

4 comments

  1. Mohon informasinya data di atas sudah saya buat dan saya koreksi berkali kali tapi masih muncul notifikasi seperti ini
    The operation select list item cannot accept the arguments: , [1], [1]

Leave a Reply

Your email address will not be published. Required fields are marked *