Upload Image ke Google Drive App Inventor Kodular

Sesuai dengan judul postingan kali ini yaitu “Upload image ke Google Drive App Inventor Kodular” dimana kita akan membuat sebuah aplikasi yang dapat menyimpan gambar secara langsung ke folder di google drive tanpa harus membuka aplikasi google drive, dengan menggunakan bantuan extension dan juga kode google Apps Script untuk proses upload gambarnya.

Google drive merupakan tempat penyimpanan online yang diberikan secara gratis oleh google kepada pengguna yang menggunakan akun google. Biasanya google drive dijadikan tempat untuk menyimpan file-file penting yang ada di komputer dengan tujuan untuk melakukan backup data.

Selain itu google drive kini juga bisa dijadikan sebagai tempat penyimpanan file media bagi aplikasi, baik aplikasi website ataupun aplikasi mobile(Android). Untuk versi gratisnya google drive hanya memberikan penyimpanan sebesar 17GB.

Pada tutorial kali ini akan menggunakan Google Apps Script dan juga extension Base64 untuk proses upload file ke google drive.

Google Apps Script adalah layanan platform scripting yang disediakan oleh google secara gratis bagi pengembang yang ingin mengembangkan aplikasi ringan di platform G Suite. Google Apps Script tersedia bagi semua pengguna akun google dan untuk penulisan kodenya berbasis javascript.

Lalu, extension base64 ini merupakan extension yang dibuat oleh Juan Antonio untuk merubah file menjadi string yang berenkode base64, perubahan file menjadi string yang berenkode 64 ini agar gambar yang akan dikirim ke google drive dapat diproses oleh kode google apps script.

Sebenarnya tutorial ini sudah pernah dibahas di google grup komunitas App Inventor oleh TIM AI2 dan disini saya hanya memposting ulang serta menjelaskannya dengan menggunakan bahasa indonesia. Selain itu, pada tutorial kali ini juga sedikit berbeda dengan tutorial dari TIM AI2, karena gambar yang di upload ke google drive bisa beberapa gambar sekaligus.

Penulis

Cara upload image ke google drive app inventor kodular

untuk membuat aplikasinya, saya menggunakan kodular. Jika kamu menggunaan app inventor tidak perlu khawatir karena bentuk program dan desainnya tidak jauh beda dengan kodular.

Sebelum memulai membuat aplikasinya, saya sarankan kamu untuk mengunduh extension base64 milik juan antonio, ingat jangan sampai salah unduh karena format ekstensi file dari extension berformat “.aix”. Jika format filenya “.aia” itu merupakan file project aplikasi yang di ekspor.

Bagikan folder dan dapatkan linknya

Jika sudah memiliki extension base64, selanjutnya yaitu buka google drive dan buatlah folder sebagai tempat untuk menyimpan gambar yang akan diupoad dari aplikasi. Jika sudah, bagikan folder dan salin link berbagi yang diberikan google, jangan lupa juga untuk merubah peraturannya menjadi “siapa saja dapat memiliki link”. Lihat gambar di bawah

Salin link folder yang dibagikan tersebut dan simpan ke notepad, kemudian ambil id foldernya lalu simpan juga ke notepad. Untuk id foldernya itu didapat dari link yang disalin tadi letaknya ditengah url, kamu bisa lihat di bawah ini.

https://drive.google.com/drive/folders/-- FOLDER ID --?usp=sharing

Membuat kode google apps script untuk upload gambar ke google drive

Selanjutnya adalah masuk ke halaman Google Apps Script untuk menulis kode google apps script. Kamu bisa lihat gambar di bawah

untuk masuk ke halaman google apps script, dapat dilakukan melalui google drive secara langsung dengan cara kilk tombol “Baru” kemudian klik “Lainnya” setelah akan muncul menu dropdown kemudian klik “Skrip Google Apps”.

Setelah masuk ke halaman, hapus semua kode sebelumnya dan tempel kode di bawah ini, jangan lupa untuk memasukan folder id.

function doPost(e) {
  var data = Utilities.base64Decode(e.parameters.data);
  var blob = Utilities.newBlob(data, e.parameters.mimetype, e.parameters.filename);
  DriveApp.getFolderById('Your Folder ID Drive').createFile(blob);
  return ContentService.createTextOutput("Your File Successfully Uploaded");
}

Setelah itu save dan terapkan kode google apps script sebagai aplikasi web, untuk cara ini sudah saya bahas di postingan sebelumnya. Kamu dapat ikuti caranya hanya pada bagian menerapkan kode google apps scriptnya saja.

Setelah selesai menerapkan kode google apps script sebagai aplikasi web, jangan lupa untuk menyimpan url apps script yang didapat ke notepad.

Desain aplikasi upload gambar ke google drive

Berikut di bawah ini adalah desain sederhana yang saya buat untuk tutorial kali ini, kamu bisa mengikutinya atau bisa juga membuat sendiri sesuai dengan keinginan kamu.

karena gambar yang akan diupload ini dapat memuat banyak gambar maka jangan lupa untuk menggunakan komponen “Horizontal Scroll Arrangement” dan komponen “Dynamic Image“. Saya harap pada bagian ini kamu sudah paham bagaimana caranya menemukan komponen-komponen seperti ini ataupun komponen lainnya yang diperlukan, karena di postingan sebelumnya sudah sering saya jelaskan.

Oh iya jangan lupa untuk import extension base64 yang sudah di unduh tadi ke Kodular. Pada bagian ini juga saya harap juga kamu sudah paham cara mengimport extensionnya.

Pengkodean aplikasi

Berikut di bawah ini merupakan kode blok program untuk aplikasi upload gambar ke google drive.

Adapun penjelasan blok program inisialisasi untuk upload image ke google drive, Pertama saya membuat 3 variabel kosong yaitu fileName, mimeType, dan fileBase64String. Ketiga variabel tersebut akan menampung nilai yang akan diberikan pada program selanjutnya.

Kemudian pada variabel URL_WebAppsScritpt diisi dengan URL google Apps Script yang didapat ketika kamu sudah menerapkan kode google apps script sebagai aplikasi web. Variabel Image diisi dengan membuat sebuah list kosong yang nantinya akan menampung gambar yang akan diupload ke google drive.

Kemudian variabel selectedImageID diisi dengan angka 0 dengan tipe data number. Variabel ini digunakan untuk membuat ID pada setiap gambar yang ada di komponen Dynamic Image. Selanjutnya pada program “KIO4_Base641” ini akan menghasilkan string yang berenkode 64 dan menyimpannya ke dalam variabel fileBase64String.

Selanjunya ada bagian program “When Image Picker After Picking” pada bagian ini akan mengatur gambar yang telah dipilih menjadi gambar dinamis yang kemudian gambarnya akan ditampilkan ke layar. Dan untuk prosedur proses berisi kode program untuk mengupload gambar ke google drive.

Adapun sedikit penjelasan pada blok program yang terakhir ini, pada program “When Screen1 Initialize” di masukkan dengan program untuk mengosongkan label text. Kemudian program “Button Upload” akan memproses program yang merubah file gambar menjadi file base4.

Untuk prosedur clear berfungsi untuk menghapus gambar yang ditampilkan di layar ketika gambar sudah berhasil di upload. Untuk program ” When web Got Text” berisi program untuk memberikan notifikasi apakah gambar berhasil diupload atau tidak.

Setelah proses pengkodean selesai selanjutnya adalah melakukan build proect

Build project

dengan mebangun project menjadi sebuah aplikasi android dengan format .apk ini dapat dilakuan pengujian apakah aplikasi yang dibuat sudah benar-benar sesuai atau tidak.

berikut di bawah ini adalah dokumentasi aplikasinya

baiklah cukup sampai sini saja tutorial yang saya berikan, semoga bermanfaat dan jangan sungkan untuk bertanya apabila ada yang tidak paham dengan cara menuliskan komentar.