Cara Upload Gambar yang Diambil dari Kamera ke Google Sheets di Kodular (UPDATE Januari 2023)

Artikel kali ini membahas tentang tutorial untuk upload gambar yang diambil dari pemotretan kamera ke Google Sheets pada Kodular. Sebenarnya, Kamu tidak bisa upload gambar tersebut ke Google Sheets secara langsung. Pada saat kamu upload gambar tersebut harus melalui Google Drive terlebih dahulu. Setelah itu, barulah mendapatkan kode File ID dari hasil upload gambar tersebut dimasukkan ke dalam Google Sheets.

Untuk tutorial upload gambar ke Google Drive pada Kodular ini telah banyak ditemukan internet, kamu bisa mencari tutorial tersebut disana. Penulis hanya berfokus untuk penjelasan proses kerja upload gambar yang diambil dari pemotretan kamera ke Google Sheets pada Kodular.

Pada gambar yang diatas, kamu bisa melihat proses kerja untuk upload gambar baik itu diambil dari kamera maupun dipilih dari galeri ke Google Sheets. Berikut proses sistem kerja dalam upload gambar ke Google Sheets.

Upload gambar ke Google Drive terlebih dahulu melalui koding Google Apps Script.
Setelah di-upload, mendapat file ID yang akan dimasukkan ke dalam Google Sheets.
Kirimkan file ID tersebut ke Google Drive melalui koding Google Apps Script.
Selesai.

Sebelum mulai tutorial ini, kamu mempersiapkan extension dari pihak ketiga yaitu generate Base Encode64 khusus file yang bisa diunduh dari situs KIO4 langsung disini.

Extension Base Encode 64 : http://kio4.com/appinventor/aplicaciones/com.KIO4_Base64.aix

Daftar Isi

LANGKAH-LANGKAH

1. Membuat Aplikasi untuk Upload Gambar dari Kamera ke Google Sheets

Pada tahap ini kamu membuat tampilan aplikasi untuk upload gambar yang diambil dari kamera ke Google Sheets.

1. Kunjungi situs c.kodular.io

2. Lakukan login secara manual maupun OAtuh System dengan benar.

3. Klik Create Project untuk membuat project baru khusus membuat aplikasi upload gambar yang diambil dari kamera ke Google Sheets.

4. Berikan nama project terserah kamu. Setelah itu, klik Next.

5. Untuk pengaturan tampilan UI aplikasi, Package Name, dan lainnya itu dibiarkan saja dan langsung klik Finish.

6. Aturlah tata letak khusus Screen pertama menjadi tengah semua.

7. Tambahkan komponen Image ke Screen untuk menampilkan logo profil aplikasi atau akun. Setelah itu aturlah ukuran Image dengan Width : Fill Parent, Height : 30% (bisa diganti ukurannya dengan kebutuhan).

8. Tambahkan 2 unit Button ke Screen untuk membuka fitur kamera dan upload hasil pemotretan kamera ke Google Sheets. Aturlah ukuran masing-masing button dengan Width : Fill Parent, Height : Automatic. Kamu bisa memberikan warna pembeda pada masing-masing button (opsional) dan isikan teks button yang sesuai fungsinya.

9. Tambahkan komponen invisible yaitu Camera (untuk mengambil gambar dengan kamera) dan Web (untuk mengakses upload gambar) ke Screen.

9. Lakukan import extension dari pihak ketiga yaitu Encode 64 Base yang dikembangkan oleh KIO4 dengan klik Extension >>> Import extension.

10. Klik No File Chosen.

11. Pilihlah file Extension AIX Encode 64 Base yang telah kamu unduh dari situs resmi dari KIO4.

12. Klik IMPORT FROM FILE untuk dimasukkan extension tadi ke dalam bagian project aplikasi.

13. Tambahkan komponen invisible yaitu Clock (untuk pemberian nama file baru yang berdasarkan waktu upload gambar ke Google Drive) dan komponen visible yaitu Notifier (untuk pemberitahuan hasil proses upload gambar ke Google Drive / Google Sheets).

Kamu telah menyelesaikan dalam pembuatan tampilan aplikasi Android di Kodular.

2. Membuat Folder untuk menampung gambar hasil upload di Google Drive

Pada tahap ini membuat sebuah folder baru untuk menampung gambar yang dihasilkan dari upload gambar melalui aplikasi Android.

14. Kunjungi situs Google Drive.

15. Lakukan login akun ke Google Drive dengan benar.

16. Klik Folder untuk membuat folder baru.

17. Berikan nama folder yaitu “gambar” (tanpa tanda kutip) atau penamaan folder dengan sesuai kebutuhan, klik Buat.

Kamu telah menyelesaikan dalam membuat folder baru untuk menampung gambar yang dihasilkan dari upload aplikasi buatan sendiri ke Google Drive.

3. Membuat Spreadsheet Baru

Pada bagian ini kamu membuat lembaran pengolah angka (spreadsheet) baru di dalam project terhadap upload gambar yang diambil dari kamera ke Google Drive. Lembaran ini berfungsi untuk menyimpan data gambar dalam bentuk link yang berisi file kode ID gambar tersebut.

18. Double project gambar tadi untuk mengakses ke dalamnya

19. Klik Google Spreadsheet untuk membuat Spreadsheet baru.

20. Klik blank template spreadsheet / Spreadsheet kosong.

21. Berikan nama project yaitu “Upload Gambar ke GSheets” (tanpa tanda kutip) atau penamaan spreadsheet dengan sesuai kebutuhan, tekan Enter.

22. Buatlah Judul Besar Kolom untuk menampung data link dari hasil upload yang diambil dari kamera HP Android.

23. Klik Bagikan / Share. Hal ini dilakukan agar bisa menyimpan data hasil upload tersebut ke Google Sheets ini dari aplikasi yang kamu buat tadi.

24. Klik Ubah ke siapa saja yang memiliki link.

25. Apabila link Google Spreadsheets tadi telah berubah menjadi warna hijau, maka klik Selesai.

Kamu telah menyelesaikan dalam membuat spreadsheet baru beserta konfigurasinya untuk menyimpan data hasil upload yang diambil dari kamera pada aplikasi yang kamu buat tadi.

4. Buatlah Program untuk upload gambar ke Google Sheets dengan Google Apps Script

Pada bagian ini kamu membuat program backend untuk membantu proses upload gambar tadi dari aplikasi Android tadi ke Google Drive (untuk menampung gambar) dan Google Sheets (untuk menyimpan data link hasil upload gambar tadi). Untuk tahap ini, penulis tidak menggunakan cara yang kebanyakan tutorial biasanya sehingga program backend ini hanya berfokus ke bagian satu spreadsheet saja.

26. Klik Ekstensi / Extension >>> Apps Script.

27. Klik judul project program backend yang akan digantikan.

28. Berikan nama judul project program backend dengan sesuai kebutuhan, klik Ganti Nama.

Kamu telah menyelesaikan dalam membuat program backend baru di dalam Spreadsheet tadi.

5. Lakukan pengambilan Link Google Spreadsheet, Project ID, dan Speadsheets ID

Pada bagian ini kamu melakukan pengambilan beberapa hal seperti Link Google Spreadsheet, Project ID, dan Speadsheets ID yang dipakai untuk membuat program backend. Kamu bisa menyalin link tersebut ke dalam aplikasi Notepad untuk keperluan kamu yang akan mendatang.

29. Kembali ke Google Drive tadi. Klik kanan pada folder yang telah kamu tadi.

30. Ubahlah opsi bagikan menjadi “Siapa saja yang memiliki link” (tanpa tanda kutip) dan klik Salin link.

31. Pastekan link akses folder tadi di Notepad . Dari link akses project yang akan digunakan adalah Project ID.

32. Salinkan link Google Spreadsheet yang tertera di bagian address.

33. Pastekan link akses Google Spreadsheet tadi di Notepad . Dari link akses Google Spreadsheet yang akan digunakan seluruhnya.

Kamu telah menyelesaikan dalam mempersiapkan link akses project folder yang akan dipakai adalah Project ID di Google dan link akses Google Spreadsheet yang akan dipakai seluruhnya.

6. Buatlah Program backend untuk upload gambar ke Google Sheets di Apps Script

Pada bagian ini kamu membuat program backend untuk upload gambar dari kamera HP Android ke Google Drive dan Google Sheets.

34. Buatlah program backend untuk proses upload gambar ke Google Drive dan Sheets.

function doGet(e) {
return ceksheet(e);
}

function doPost(e) {
return ceksheet(e);
}

function ceksheet(e){

//Untuk deskripsikan dari BASE 64 Encode.
var data = Utilities.base64Decode(e.parameters.data);
//Untuk membuat file baru ke Google Drive dengan nama file beserta tipe file yang telah ditentukan.
var blob = Utilities.newBlob(data, e.parameters.mimetype, e.parameters.filename);
//Untuk mendapatkan kode File ID.
var fileID = DriveApp.getFolderById("1qsdnVd--ySdSrwE-XOd5PiU2VrKtUIDU").createFile(blob).getId();
//Untuk membuka akses Spreadsheet yang aktif.
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1fo9uZzhMJjpmKGc4GxHIzq1khWQaXL_6OFBMPMd1XDk/edit#gid=0");
var sheet = ss.getSheetByName("Sheet1");
//Untuk menampung data gambar dengan memberikan kode File ID yang telah ditentukan ke dalam Google Sheets. 
sheet.appendRow(['https://drive.google.com/uc?id=' + fileID + '']);
return ContentService.createTextOutput(fileID);
}

Keterangan :

Yang bertulisan warna biru bisa gantikan project ID dengan project ID milik kamu.
Yang bertulisan warna ungu bisa gantikan link Spreadsheet dengan link spreadsheet milik kamu.
Yang bertulisan warna hijau itu kode file ID yang akan mengakses gambar dari Google Drive melalui link yang telah disimpan ke dalam Google Sheets.

35. Klik ikon Save untuk menyimpan programnya.

36. Klik Layanan.

37. Pilihlah Drive API yang versi 2 dan untuk penamaan ID itu dibiarkan saja.

38. Klik Tambahkan.

39. Klik Terapkan >>> Devlopment baru.

40. Klik ikon Settings pada bagian Pilih Jenis >>> Pilihlah Aplikasi web.

41. Isikan nama deskripsi (tujuan untuk membedakan versi saat ini dengan sebelumnya), Ubahlah opsi menjadi “Siapa saja” atau “Anyone” agar link Google Apps tersebut bisa berjalan di aplikasi langsung.

42. Klik Terapkan.

43. Klik Izinkan Akses atau Authorize Access.

44. Klik Login.

45. Klik Lanjutan.

46. Klik Buka Skrip (tidak aman).

47. Klik Izinkan.

48. Klik Salin link atau URL akses Google Apps tadi di bagian Aplikasi web.

49. Pastekan di Notepad tadi.

Kamu telah menyelesaikan dalam membuat program atau sistem backend untuk upload gambar yang diambil dari kamera pada aplikasi ke Google Drive beserta mendapatkan link akses untuk melihat gambar yang dihasilkan dari upload yang telah tersimpan di Google Sheets.

7. Buatlah Program untuk upload gambar ke Google Sheets di Kodular

Pada bagian ini kamu membuat program untuk aplikasi Android dalam upload gambar ke Google Sheets di Kodular.

50. Kembali ke project aplikasi Kodular, Klik Blocks.

51. Buatlah blok program untuk membuka aplikasi atau screen awal.

52. Buatlah blok program untuk menampung link atau URL akses Google Apps yang telah dibuat tadi.

Pada pengisian atau value dari variabel url bisa digantikan dengan link atau URL akses Google Apps milik kamu sendiri.

53. Buatlah blok program untuk menampung tipe MIME file dalam menentukan jenis MIME file yang akan diupload ke Google Drive.

54. Buatlah blok program untuk menampung enkripsi file gambar menjadi Base 64 Encode.

55. Buatlah blok program untuk membuka fitur kamera.

56. ~~Buatlah blok program untuk proses setelah pengambilan gambar dari kamera.~~ Langsung masuk ke bagian UPDATE : 31-01-2023.

57. Buatlah blok program untuk upload gambar tersebut ke Google Sheets.

58. Buatlah blok program untuk proses setelah upload gambar tersebut ke Google Sheets.

59. Klik Designer untuk menambah satu komponen yaitu File.

60. Buka Pallete bagian Storage, drag komponen File ke dalam Screen.

61. Klik Test >>> Connect to Companion.

62. Masukkan kode Companion ke dalam Aplikasi Kodular Companion yang terpasang di Android.

Selesai.

UPDATE : 31-01-2023

Ada perubahan blok program yang pada saat pengambilan foto dari kamera beserta konversi file gambar ke dalam bentuk Encode Base64 yang berguna untuk upload file gambar ke Google Drive.

Sebelumnya, penulis pernah membahas alasan terjadi kode screen 201 pada saat pengambilan gambar atau foto dari kamera di Smartphone Android. Kamu bisa membaca artikel tersebut di link bawah ini:

https://blokvisu.dwiay.com/cara-mengambil-gambar-dari-kamera-di-kodular/

HASIL AKHIR

Apabila hasil pengujian dari pembuatan aplikasi untuk upload gambar dari kamera ke Google Drive dan Google Sheets dengan sukses, maka bisa dilihat pada dua gambar di bawah ini.

1. Tekan tombol Open Camera untuk membuka kamera.

2. Ambillah gambar yang akan diupload.

3. Tekan tombol Upload Gambar … untuk upload gambar yang telah diambil dari kamera ke Google Sheets dan Drive.

4. Hasil upload gambar ke Google Drive.

5. Hasil penambahan link akses untuk melihat gambar dari Google Drive ke dalam Google Sheets.

Kamu telah menyelesaikan dalam mengikuti seluruh tahapan dalam membuat aplikasi untuk upload gambar yang diambil dari kamera ke Google Sheets (hanya untuk mendapatkan link akses gambar di Google Drive) dengan menggunakan Kodular.

PENUTUP

Kamu bisa membuat aplikasi yang dimana dengan menambahkan fitur untuk upload gambar yang diambil dari kamera langsung di smartphone Android dengan Kodular. Hasil pemotretan kamera itu akan diupload ke Google Drive dan mendapatkan data link akses untuk melihat gambar ke dalam Google Sheets.

Apabila kamu tidak tahan dengan membaca tutorial ini yang sangat panjang, maka penulis akan membuat ebook untuk tutorial agar bisa dibaca dimana saja tanpa harus terhubung internet… Tunggu ya..