Upload gambar ke Google Spreadsheet App Inventor Kodular

Baiklah, kali ini saya akan membahas bagaimana cara membuat aplikasi yang dapat melakukan upload gambar ke Google Spreadsheet App Inventor Kodular, dengan memanfaatkan hosting sebagai tempat penyimpanan gambarnya.

Beberapa waktu lalu, banyak dari kawan-kawan grup App Inventor Indonesia yang menanyakan bagaimana caranya menyimpan gambar ke Google Spreadsheet, bahkan ada juga beberapa orang yang bertanya di website ini juga.

Untuk menjawab pertanyaan tersebut, saya akan buat tutorialnya pada artikel ini. Perlu diketahui Google Spreadsheet merupakan aplikasi pengolah data angka berbasis cloud yang mirip dengan Microsoft Excel, bedanya dengan Microsoft Excel, google memberikan akses gratis bagi pengguna yang telah membuat akun google.

Google Spreadsheet biasa digunakan oleh orang-orang untuk mengurutkan, menganalisa, meringkas data, serta melakukan perhitungan aritmatika dan statistika.

Dari penjelasan tersebut kita harusnya sudah tau bahwa fungsi utama dari Google Speadsheet adalah sebagai aplikasi pengolah angka. Jadi tidak mungkin kita dapat menyimpan file pada Google Spreadsheet. Google Spreadsheet hanya dapat menyimpan data text dan angka.

For Your Information

Lalu bagaimana?

Untuk mengatasi hal tersebut, kamu perlu tempat penyimpanan tambahan khusus untuk menyimpan gambar. Penyimpanan tambahan bisa seperti Google Drive, Hosting, ataupun media sosial seperti facebook.

Namun disini saya akan menyimpan gambarnya di ImgBB. ImgBB merupakan layanan hosting untuk menyimpan gambar secara gratis, kamu dapat menyimpan gambar ke ImgBB dengan batasan file maksimal sebesar 32MB sesuai dengan format yang didukung. Gambar yang di upload ke ImgBB tidak akan pernah hilang kecuali dari kita yang menghapusnya.

Selain itu tidak ada batasan untuk kamu yang ingin upload gambar ke ImgBB alias (unlimited), namun perlu kamu ketahui setiap gambar yang kamu upload akan di review oleh pihak ImgBB untuk mencegah terjadinya pelanggaran hak cipta ataupun gambar yang tidak sesuai dengan kebijakan yang telah di tetapkan oleh ImgBB.

ImgBB tidak mewajibkan kamu untuk mendaftar, namun saya sarankan untuk membuat akun, karena dengan membuat akun kamu dapat membuat album dan mengolah gambar yang kamu upload dengan mudah.

Baiklah setelah mengetahui penjelasan singkat tentang Google Spreadsheet dan ImgBB, selanjutnya yaitu membuat aplikasinya. Pada tutorial kali ini saya membuat aplikasinya dengan menggunakan Kodular.

Cara Upload Gambar ke Google Spreadsheet App Inventor Kodular

Buat akun ImgBB

pertama kamu buat akun terlebih dahulu di ImgBB. Supaya nanti ketika aplikasinya sudah jadi kamu tinggal login saja.

Buat database aplikasi

pada tahap ini kamu harus membuat database atau tempat penyimpanan data aplikasinya di google spreadsheet. Google spreadsheet akan menyimpan data-data yang diupload dalam bentuk text dengan format csv.

Pertama buat spreadsheet baru, kemudian buat tabel seperti gambar di bawah ini

kamu buat heading terlebih dahulu kemudian isi “idGambar”, “namaGambar”, dan “Gambar”. Tabel diatas adalah tabel yang sebelumnya sudah saya uji coba, jadi untuk data dibawahnya dikosongkan saja, karena nanti akan terisi secara otomatis dari aplikasi yang akan kita buat.

Setelah itu, kamu buka google apps script untuk membuat kode apps script yang dapat menyimpan data ke google spreadsheet. Buka Editor skrip di bagian menu “Alat” lalu klik “editor skrip”. Editor Skrip merupakan tempat untuk menulis kode Google Apps Script, agar proses menyimpan data ke google spreadsheet berjalan dengan baik maka kamu dapat memasukkan kode Google Apps Script ke Editor Skrip.

berikut dibawah ini adalah kode google apps script, kode ini bebasis javascript.

var ss = SpreadsheetApp.openByUrl("Your URL Spreadsheet");
var sheet = ss.getSheetByName("Sheet1");

function doGet(e){
  var action  = e.parameter.action;
 
  if(action == "append"){
    return Tambah(e, sheet);
  }
  
  if(action == "edit"){
    return Edit(e);
  }
  
   if(action == "delete"){
    return Hapus(e);
  }
}

function doPost(e){
  var action  = e.parameter.action;
 
 
  if(action == "append"){
    return Tambah(e, sheet);
  }
  
  if(action == "edit"){
    return Edit(e);
  }
  
  if(action == "delete"){
    return Hapus(e);
  }
}


function Tambah(e, sheet){
  
  var id = e.parameter.idGB;
  var nama_gambar = e.parameter.namaGB;
  var gambar = e.parameter.GB;
  
  var flag=1;
  var lr= sheet.getLastRow();
  for(var i=1;i<=lr;i++){
    var id1 = sheet.getRange(i, 1).getValue(); // Ashton: column index changed from 2 to 1
    if(id1==id){
      flag=0;
      var result= "ID Sudah ada";
      break; // Ashton: break the loop if id is found, this will save some time if your list is huge
    } }
  Logger.log(flag);
  //add new row with recieved parameter from client
  if(flag==1){
  var rowData = sheet.appendRow([id,nama_gambar,gambar]);  
  var result="Berhasil Input";
  }
     return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.TEXT);
    
  return ContentService.createTextOutput(e.parameter.callback + "(" + result + ")").setMimeType(ContentService.MimeType.JAVASCRIPT);   
  }
  
function Edit(e){
  var id =  e.parameter.idGB;
  var values = sheet.getRange(2,1,sheet.getLastRow(),3).getValues(); //getRange(row, column, numRows, numColumns);
  
  for(var i = 0;  i<values.length; i++){
    if(values[i][0]==id){
      i=i+2;
      
      var nama_gambar = e.parameter.namaGB;
      var gambar = e.parameter.GB;
      
      sheet.getRange(i,2).setValue(nama_gambar);
      sheet.getRange(i,3).setValue(gambar);
      
      return ContentService.createTextOutput("Berhasil merubah data!").setMimeType(ContentService.MimeType.TEXT);
      break;
      
    }
  }
  return ContentService.createTextOutput("ID tidak ditemukan!").setMimeType(ContentService.MimeType. TEXT);
}

function Hapus(e){
  var id =  e.parameter.idGB;
  var values = sheet.getRange(2,1,sheet.getLastRow(),3).getValues();
  
  for(var i = 0;  i<values.length; i++){
    if(values[i][0]==id){
      i=i+2;
      
        sheet.deleteRow(i);
      
      return ContentService.createTextOutput("Berhasil menghapus data!").setMimeType(ContentService.MimeType.TEXT);
      break;
      
    }
  }
  return ContentService.createTextOutput("ID tidak ditemukan!").setMimeType(ContentService.MimeType. TEXT);
}

Selanjutnya Copy dan paste kodenya ke Editor Skrip. Setelah itu jangan lupa untuk merubah url di “var ss” pada kode google apps script yang sudah dicopy tadi dengan URL Spreadsheet kamu.

Menerapkan kode google apps script sebagai aplikasi web

Pada tahap ini sudah saya jelaskan di postingan postingan sebelumnya, karena ini cukup panjang jadi kamu bisa lihat caranya di sini. Kamu dapat mengikuti langkah-langkahnya sampai pada bagian Bagikan halaman Google Spreadsheet.

Oke selanjutnya adalah membuka Kodular, login dengan akun akun google, jika belum terdaftar kamu bisa mendaftar untuk membuat akun.

Buat desain aplikasinya terlebih dahulu

Desain aplikasi untuk upload gambar ke google spreadsheet

Berikut di bawah ini adalah desain yang saya buat. Untuk desain kali ini saya buat sederhana kamu bisa desain lebih bagus lagi.

adapun beberapa komponen penting yang digunakan yaitu Web, Web Viewer dan Notifier. Komponen Web terletak pada menu “pallet” bagian “connectivity” disitu kamu akan melihat komponen Web, komponen Web digunakan untuk membuat URL pengiriman data ke google spreadsheet maupun mengambil data dari google spreadsheet.

Kemudian untuk komponen Web Viewer terletak pada menu “pallet” bagian “Layout” lalu klik “Views” dan disitu akan muncul komponen Web Viewer. Komponen ini digunakan untuk memuat halaman website ImgBB yang mana nanti ketika ingin upload gambar ke ImgBB, kamu tidak perlu membuka browser.

Kemudian Notifier, komponen dapat ditemukan pada menu “pallet” bagian “User Interface”. Komponen ini digunakan untuk membuat notifikasi pada aplikasi.

Khusus untuk tutorial kali ini saya menggunakan komponen View Pager yang hanya tersedia di Kodular. Komponen ini digunakan untuk membuat slide page pada aplikasi, ini mirip dengan aplikasi whatsapp.

Jangan lupa untuk set komponen “Web Viewer”, dan isi Home URL dengan link ini

https://imgbb.com/

kemudian atur komponen Web Viewer menjadi Dekstop Mode, kamu bisa merubahnya di bagian Advanced Properties.

Setelah proses desain selesai, selanjutya adalah membuat blok program untuk upload gambar ke google spreadsheet.

Blok program upload gambar ke Google Spreadsheet

berikut dibawah ini adalah blok program yang saya buat agar aplikasi dapat menyimpan gambar ke google spreadsheet.

Blok program inisialisasi

Adapun penjelasan singkat mengenai blok program di atas.

Agar lebih mudah memahami penjelasan di bawah saya harap kamu baca ini terlebih dahulu.

Perbedaan fungsi dan prosedur.

Fungsi mengembalikan nilai, sedangkan Prosedur tidak mengembalikan nilai.

PENTING WAJIB DIBACA

Pada blok program When Screen 1 initialize do, akan memanggil komponen View Pager untuk membuat tiga halaman yaitu “Home”, “Form”, dan “Img Upload”. Kemudian setalah itu merubah visible pada komponen Vertical Arrangement4 menjadi “false” ini bertujuan untuk tidak menampilkan komponen tersebut saat aplikasi pertama kali berjalan.

Baca juga : Membuat fitur auto login di app inventor dan kodular

Setelah itu diakhiri dengan memanggil prosedur “koneksi“, dimana pada prosedur ini berguna untuk menampilkan data yang diambil dari spreadsheet ke aplikasi. coba perhatikan pada prosedur “koneksi”, didalamnya terdapat komponen web yang di isi dengan gabungan beberapa kode.

Untuk join pertama dimasukkan URL google spreadsheet, kamu dapat copy paste link google spreadsheet dibawah ini untuk mengambil data atau baca data dari google spreadsheet.

https://spreadsheet.google.com/tq?tqx=out:csv&key=

copy paste URL diatas dan ikuti seperti gambar diatas untuk diiterapkan pada komponen web. Kemudian pada Join baris ke dua di isi dengan ID spreadsheet kamu, kamu dapat menemukannya ID spreadsheet di halaman google spreadsheet mu.

Kemudian untuk format join pada baris ke selanjutnya dapat kamu ikuti sama seperti pada gambar prosedur koneksi.

Pada fungsi “TB list” berisikan list yang terdiri dari 3 nama komponen textbox. Ini dibuat agar memudahkan kamu untuk membuat proses validasi input yang dilakukan user, jadi ketika kamu ingin melakukan pengecekan pada inputan, kamu hanya tinggal membuat sperulangan dan ambil datanya dari list ini.

Nah fungsi “TB list” ini digunakan pada prosedur “validation“. Pada prosedur validation ini untuk mengecek apakah inputannya kosong atau tidak kosong, jika kosong maka akan menampilkan alert dari komponen “Notifier” yang berisi pesan “Data tidak boleh kosong”.

Adapun 4 variabel yang dibuat, pertama yaitu variabel “cek” yang diisi dengan boolean “false” yang berfungsi sebagai triger, kedua variabel “action” yang di isi dengan text kosong ini juga digunakan untuk triger untuk “tambah data”,”edit data”, dan “hapus data”. Ketiga ada variabel “data” yang berisi list kosong, ini nantinya akan menampung data yang diambil dari prosedur koneksi. Keempat variabel “title“, yang berisi text title untuk sreen1.

Fungsi “postData” merupakan format pengiriman data, jika kamu ingin menyimpan data ke google spreadsheet dari aplikasi yang dibuat di app inventor atau kodular maka seperti inilah formatnya.

Fungsi “data_web” merupakan fungsi yang berguna untuk membersihkan data yang di dapat langsung dari spreadsheet, ketika ingin menampilkan data, maka data yang di ambil harus di bersihkan terlebih dahulu agar bisa di tampilkan. Karena data yang di dapat langsung dari spreadsheet ini berbentuk csv, kemudian data yang sudah dibersihkan akan di kembalikan lagi.

Prosedur “clear” digunakan untuk mereset seluruh proses program menjadi seperti keadaan awal.

Button back digunakan ketika user ingin kembali ke halaman awal pada saat user berada pada halaman yang menampilkan data gambar. Selanjutnya button info akan menampilkam pesan informasi apabila user menekan tombol ini.

Pada blok program When Notifier1 after choosing berguna untuk mengecek apa yang dipilih user pada text dialog yang di tampilkan. Jika user memilih “Ok” maka user akan dikembalikan ke halaman awal.

Blok program proses

untuk URL pada komponen web di Screen “Input” dan “EditDelete” dapat kamu isikan dari URL yang sebelumnya sudah kamu simpan ke Notepad, URL tersebut didapat diakhir ketika kamu sedang melakukan penerapan kode google apps script sebagai aplikasi web.

URL ini bukan URL yang didapat ketika kamu membagikan halaman google spreadsheet. Jika kamu lupa URL yang mana, scroll keatas lagi dan masuk pada tahap Menerapkan kode google apps script sebagai aplikasi web.

Build Project aplikasi

Setelah proses pengkodean selesai kamu dapat membangun projectnya menjadi aplikasi dengan format apk. Dengan begitu amu dapat melakukan uji coba pada aplikasi yang kamu buat.

berikut dibawah ini adalah demo aplikasi yang telah dibuat pada tutorial ini..

berikut di bawah ini adalah gambar bukti bahwa data telah tersimpan di google spreadsheet

Baiklah cukup sampai sini saja tutorialnya, bagaimana cukup rumit bukan?? begitulah kalo mau gratisan. Namun demi keamanan data dan project yang kamu buat, saya tidak menyarankan kamu untuk menyimpan data-data penting ke Google Spreadsheet ataupun menyimpan gambar ke ImgBB, karena data-data yang kamu simpan belum tentu aman, karena ini sifatnya menumpang dan bisa saja google spreadsheet dan ImgBB tutup atau bangkrut maka data kamu yang disimpan disana akan hilang. Selain itu tentunya dari pihak penyedia layananpun dapat melihat data-data yang telah kamu upload.

Maka dari itu untuk project aplikasi yang dibuat bersifat panjang penggunaanya, maka saya sarankan untuk menyewa hosting yang jelas akan pelayanan dan keamanannya.