Membuat aplikasi menggunakan MIT App Inventor memungkinkan pengembang, terutama yang baru memulai, untuk membuat aplikasi Android tanpa perlu menulis banyak kode. Salah satu fitur menarik adalah kemampuannya untuk terintegrasi dengan Google Spreadsheet, yang memungkinkan kita untuk melakukan operasi CRUD (Create, Read, Update, Delete) dengan mudah. Dalam artikel ini, kita akan membahas langkah demi langkah cara membuat aplikasi CRUD menggunakan App Inventor dengan Google Spreadsheet sebagai backend untuk menyimpan dan mengelola data.

Apa Itu CRUD?

CRUD adalah singkatan dari Create, Read, Update, Delete, yaitu serangkaian operasi dasar yang dilakukan pada data yang tersimpan dalam database atau spreadsheet:

• Create: Menambahkan data baru.
• Read: Membaca data yang ada.
• Update: Memperbarui data yang sudah ada.
• Delete: Menghapus data.

Google Spreadsheet dapat bertindak sebagai database sederhana untuk menyimpan data secara langsung dan memungkinkan aplikasi untuk mengaksesnya secara real-time.

1. Persiapan Awal: Membuat Google Spreadsheet

Sebelum Anda membuat aplikasi di App Inventor, Anda harus memiliki Google Spreadsheet yang akan digunakan untuk menyimpan data. Berikut adalah langkah-langkah untuk menyiapkan spreadsheet di Google Drive:

1.1. Buat Google Spreadsheet

1. Masuk ke akun Google Anda dan buka Google Sheets.
2. Buat spreadsheet baru dengan klik Blank.
3. Beri nama spreadsheet tersebut, misalnya "Data Buku".
4. Buat kolom untuk data yang ingin Anda simpan. Sebagai contoh, Anda bisa membuat kolom dengan nama ID, Title, Author, dan Year.

Contoh tampilan spreadsheet:

1.2. Siapkan Google Sheets API

Untuk memungkinkan aplikasi Anda terhubung dengan Google Spreadsheet, Anda perlu mengaktifkan API Google Sheets dan mendapatkan kredensial yang diperlukan. Ikuti langkah-langkah ini:

1. Buka Google Cloud Console.
2. Buat proyek baru dan beri nama proyek tersebut.
3. Arahkan ke API & Services > Library dan cari Google Sheets API.
4. Aktifkan Google Sheets API untuk proyek Anda.
5. Pergi ke Credentials, lalu buat OAuth 2.0 Client ID atau API Key.
6. Catat kredensial ini karena Anda akan memerlukannya di App Inventor.

2. Membuat Aplikasi di MIT App Inventor

MIT App Inventor adalah platform untuk membangun aplikasi Android secara visual tanpa menulis kode. Berikut adalah langkah-langkah untuk membuat aplikasi CRUD yang terhubung dengan Google Spreadsheet.

2.1. Membuat Proyek di MIT App Inventor

1. Buka situs web MIT App Inventor.
2. Klik Create New Project dan beri nama proyek Anda, misalnya "CRUD Google Sheets".
3. Setelah proyek terbuka, Anda akan diarahkan ke antarmuka pembuat aplikasi (designer).

2.2. Menambahkan Komponen UI

Untuk melakukan operasi CRUD, kita akan membutuhkan beberapa komponen UI. Berikut adalah komponen yang perlu Anda tambahkan:

• TextBox: Untuk memasukkan data, seperti judul buku, penulis, dan tahun.
• Button: Untuk melakukan operasi CRUD (Create, Read, Update, Delete).
• ListView: Untuk menampilkan data dari Google Spreadsheet.
• Label: Untuk menampilkan pesan status (misalnya, apakah operasi berhasil atau gagal).

Drag komponen berikut ke layar desain (Designer):

• 3 buah TextBox (untuk memasukkan Title, Author, dan Year).
• 4 buah Button (untuk operasi Create, Read, Update, dan Delete).
• 1 buah ListView (untuk menampilkan daftar data).
• 1 buah Label (untuk menampilkan status operasi).

2.3. Menambahkan Google Sheets API menggunakan Web Component

App Inventor menggunakan Web Component untuk berkomunikasi dengan API eksternal, termasuk Google Sheets. Berikut adalah langkah-langkah untuk mengonfigurasi komponen ini:

1. Di Designer, tambahkan Web component dari palet Connectivity ke layar aplikasi.
2. Di properti Web1, atur:
   • Url: Masukkan URL endpoint dari Google Sheets API yang akan mengakses spreadsheet Anda. Biasanya ini adalah URL yang mengarah ke file Google Spreadsheet Anda. Anda juga bisa menggunakan Google Apps Script untuk membuat API endpoint yang dapat mengelola data di spreadsheet.
   • RequestHeaders: Anda akan membutuhkan kredensial API (API Key atau OAuth token) untuk mengakses spreadsheet. Masukkan API Key di sini.

2.4. Menghubungkan Aplikasi dengan Google Spreadsheet

Setelah mengonfigurasi Web Component, Anda perlu mengatur blok untuk melakukan operasi CRUD. Berikut adalah penjelasan mengenai setiap operasi:

3. Implementasi CRUD di App Inventor

3.1. Create (Menambahkan Data Baru)

Untuk menambahkan data ke spreadsheet, Anda perlu mengirimkan permintaan POST ke Google Sheets API. Anda dapat membuat permintaan dengan menyertakan data dari TextBox ke dalam body permintaan.

Berikut adalah blok yang digunakan untuk menambahkan data baru:

1. Button Create: Ketika pengguna menekan tombol Create, ambil nilai dari TextBox dan kirimkan permintaan ke Google Sheets.

When ButtonCreate.Click
    Set Web1.Url to "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}:append?valueInputOption=RAW&key={APIKey}"
    Set Web1.PostText to "{
        'values': [
            [TextBoxTitle.Text, TextBoxAuthor.Text, TextBoxYear.Text]
        ]
    }"
    Call Web1.Post

Penjelasan:

• {spreadsheetId} adalah ID unik dari Google Spreadsheet Anda.
• {range} adalah range atau rentang sel di spreadsheet yang ingin Anda tuju, seperti Sheet1!A1:D1.
• {APIKey} adalah kunci API yang Anda dapatkan sebelumnya.
• PostText berisi data yang ingin Anda tambahkan ke spreadsheet.

3.2. Read (Membaca Data)

Untuk mengambil data dari Google Spreadsheet, Anda perlu mengirimkan permintaan GET ke API Google Sheets.

When ButtonRead.Click
    Set Web1.Url to "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}?key={APIKey}"
    Call Web1.Get

3.3. Update (Memperbarui Data)

Untuk memperbarui data yang ada di spreadsheet, Anda dapat mengirimkan permintaan PUT.

When ButtonUpdate.Click
    Set Web1.Url to "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}?valueInputOption=RAW&key={APIKey}"
    Set Web1.PutText to "{
        'values': [
            [TextBoxTitle.Text, TextBoxAuthor.Text, TextBoxYear.Text]
        ]
    }"
    Call Web1.Put

3.4. Delete (Menghapus Data)

Untuk menghapus data dari spreadsheet, Anda dapat menggunakan Google Apps Script yang menghapus data berdasarkan ID atau kriteria tertentu.

When ButtonDelete.Click
    Set Web1.Url to "https://script.google.com/macros/s/{scriptId}/exec?action=delete&id=" + TextBoxId.Text
    Call Web1.Get

Pastikan Anda telah menyiapkan Google Apps Script yang dapat menerima permintaan untuk menghapus data di spreadsheet.

4. Menghubungkan Aplikasi dan Spreadsheet

Sekarang aplikasi Anda sudah dapat melakukan operasi CRUD di Google Spreadsheet. Anda bisa menguji aplikasi dengan menekan tombol-tombol untuk menambahkan, membaca, memperbarui, dan menghapus data.

5. Kesimpulan

Dengan menggunakan MIT App Inventor dan Google Spreadsheet, Anda dapat dengan mudah membuat aplikasi mobile dengan fungsi CRUD yang kuat tanpa perlu menulis banyak kode. Google Spreadsheet bertindak sebagai backend yang sederhana namun efektif untuk aplikasi mobile Anda. App Inventor memungkinkan Anda untuk membangun aplikasi dengan antarmuka grafis yang mudah dipahami, cocok untuk pemula yang ingin mempelajari pengembangan aplikasi. Dengan mengikuti panduan ini, Anda dapat membuat aplikasi CRUD untuk mengelola data menggunakan teknologi yang sederhana namun powerful.