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.

Upload gambar ke Google Spreadsheet App Inventor Kodular
Upload gambar ke Google Spreadsheet App Inventor Kodular

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 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

bukti data telah tersimpan di google spreadsheet
bentuk tabel spreadsheet yang digunakan

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 sebeleumnya, 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.

desain aplikasi upload gambar ke google spreadsheet app inventor kodular
desain aplikasi upload gambar ke google spreadsheet app inventor kodular

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

blok program inisialisasi aplikasi upload gambar ke google spreadsheet
blok program inisialisasi aplikasi upload gambar ke google spreadsheet

coba perhatikan pada prosedur “koneksi”, didalamnya terdapat komponen web yang di isi dengan gabungan beberapa kode.

prosedur koneksi ke spreadsheet untuk ambil data atau baca data
prosedur koneksi ke spreadsheet untuk ambil data atau baca data

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.

ID spreadsheet
ID spreadsheet

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

Blok program proses

blok program proses aplikasi upload gambar ke google spreadsheet
blok program proses aplikasi upload gambar ke google spreadsheet

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..

dokumentasi video

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

bukti data telah tersimpan di google spreadsheet
bukti 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.

Leave a Reply

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