Cara Menggunakan RequestNetwork di Sketchware Pro untuk Mengakses REST API Google Sheets

Pendahuluan

Setelah berhasil membuat REST API dari Google Sheets menggunakan Google Apps Script, langkah selanjutnya adalah menghubungkan API tersebut dengan aplikasi yang sedang Anda kembangkan di Sketchware Pro. Dalam artikel ini, kita akan membahas cara menggunakan komponen RequestNetwork di Sketchware Pro untuk mengakses REST API Google Sheets yang telah Anda buat.

Komponen RequestNetwork akan memungkinkan aplikasi Anda untuk melakukan permintaan HTTP (GET, POST, PUT, DELETE) ke REST API, sehingga Anda dapat mengambil, menambah, memperbarui, atau menghapus data stok barang secara langsung dari aplikasi.

Langkah 1: Menyiapkan Proyek di Sketchware Pro

1. Buka Sketchware Pro: Pastikan Anda sudah menginstal Sketchware Pro dan telah membuat proyek baru untuk aplikasi stok barang.
2. Tambahkan Activity Baru: Jika belum ada, tambahkan Activity baru atau gunakan Activity utama sebagai tempat di mana Anda akan menampilkan data stok barang.
3. Tambahkan Layout: Buat layout yang sederhana dengan komponen berikut:
   • ListView: Untuk menampilkan data stok barang yang diambil dari Google Sheets.
   • Button: Untuk melakukan operasi seperti menambahkan, memperbarui, atau menghapus data.

Langkah 2: Menambahkan Komponen RequestNetwork

1. Buka Menu Component:

   • Klik pada bagian Component di Sketchware Pro.
   • Pilih Add Component.
   • Pilih RequestNetwork dan tambahkan komponen ini ke proyek Anda.

2. Konfigurasi RequestNetwork:

   • Beri nama komponen ini, misalnya requestAPI.
   • Komponen ini akan digunakan untuk mengirimkan permintaan HTTP ke REST API yang telah Anda buat di Google Sheets.

Langkah 3: Membuat Fungsi untuk Mengakses API

1. Membuat Fungsi untuk Mendapatkan Data (GET Request)

a. Buka Tab Events:

• Di Sketchware Pro, buka Activity di mana Anda ingin menampilkan data stok barang.
• Pilih tab Events yang berada di bagian atas layar.

b. Pilih Event onCreate:

• Event onCreate akan dieksekusi ketika Activity pertama kali dibuka. Pilih event ini untuk memastikan data diambil setiap kali Activity dimulai.

c. Tambahkan RequestNetwork Block:

• Klik Add Block di event onCreate.
• Pilih komponen RequestNetwork yang telah Anda tambahkan di Langkah 2.
• Setel jenis permintaan HTTP ke GET.
• Masukkan URL API yang Anda buat di Google Apps Script. Contohnya:

  plaintext
  Salin kode
  https://script.google.com/macros/s/{YourScriptID}/exec?action=getData&sheetName=StokBarang
  

  Gantilah {YourScriptID} dengan Script ID dari Google Apps Script Anda.

d. Atur Event Response:

• Setelah mengatur permintaan GET, tambahkan event untuk menangani respons yang diterima.
• Tambahkan onResponse block dan buat variabel baru, misalnya response.
• Gunakan block setText atau Log untuk menampilkan data respons sementara sebelum diproses lebih lanjut.

e. Parse JSON Data:

• Tambahkan block JsonParser untuk memparse JSON string yang diterima.
• Gunakan block for each untuk loop melalui data JSON yang diambil.
• Tambahkan block ListView untuk menampilkan setiap item data yang diparse.

f. Menampilkan Data di ListView:

• Buat custom adapter untuk ListView Anda agar sesuai dengan struktur data JSON yang diterima.
• Setel adapter ke ListView agar data yang diparse dapat ditampilkan dalam aplikasi.

2. Membuat Fungsi untuk Menambah Data (POST Request)

a. Tambahkan Button untuk Menambah Data:

• Di layout Activity, tambahkan sebuah Button dan beri label misalnya "Tambah Data".
• Pilih event onClick untuk Button ini.

b. Tambahkan RequestNetwork Block untuk POST:

• Pada event onClick, tambahkan block RequestNetwork.
• Setel jenis permintaan HTTP ke POST.

c. Setel URL Endpoint:

• Masukkan URL endpoint REST API yang sesuai, misalnya:

  plaintext
  Salin kode
  https://script.google.com/macros/s/{YourScriptID}/exec?action=addData&sheetName=StokBarang
  

d. Menyusun Data dalam JSON:

• Buat variabel data yang berisi JSON string dengan format yang sesuai.
  • Contoh JSON string:

    json
    Salin kode
    {"NamaBarang":"Pensil","Jumlah":100,"Harga":5000}
    

• Gunakan block RequestNetwork untuk mengirimkan data ini ke API.

e. Handle Response:

• Setel block onResponse untuk menampilkan pesan sukses atau gagal setelah data ditambahkan.
• Tambahkan block untuk merefresh ListView atau memuat ulang data setelah data berhasil ditambahkan.

3. Membuat Fungsi untuk Memperbarui Data (PUT Request)

a. Tambahkan Button untuk Memperbarui Data:

• Di layout Activity, tambahkan sebuah Button dan beri label "Update Data".
• Pilih event onClick untuk Button ini.

b. Tambahkan RequestNetwork Block untuk PUT:

• Pada event onClick, tambahkan block RequestNetwork.
• Setel jenis permintaan HTTP ke PUT.

c. Setel URL Endpoint:

• Masukkan URL endpoint REST API, misalnya:

  plaintext
  Salin kode
  https://script.google.com/macros/s/{YourScriptID}/exec?action=updateData&id=1&sheetName=StokBarang
  

  Gantilah id=1 dengan ID dari data yang ingin Anda update.

d. Menyusun Data dalam JSON:

• Buat variabel data yang berisi JSON string dengan format yang sesuai untuk data yang akan diperbarui.
• Gunakan block RequestNetwork untuk mengirimkan data ini ke API.

e. Handle Response:

• Setel block onResponse untuk menampilkan pesan sukses atau gagal setelah data diperbarui.
• Tambahkan block untuk merefresh ListView atau memuat ulang data setelah data berhasil diperbarui.

4. Membuat Fungsi untuk Menghapus Data (DELETE Request)

a. Tambahkan Button untuk Menghapus Data:

• Di layout Activity, tambahkan sebuah Button dan beri label "Hapus Data".
• Pilih event onClick untuk Button ini.

b. Tambahkan RequestNetwork Block untuk DELETE:

• Pada event onClick, tambahkan block RequestNetwork.
• Setel jenis permintaan HTTP ke DELETE.

c. Setel URL Endpoint:

• Masukkan URL endpoint REST API, misalnya:

  plaintext
  Salin kode
  https://script.google.com/macros/s/{YourScriptID}/exec?action=deleteData&id=1&sheetName=StokBarang
  

  Gantilah id=1 dengan ID dari data yang ingin Anda hapus.

d. Handle Response:

• Setel block onResponse untuk menampilkan pesan sukses atau gagal setelah data dihapus.
• Tambahkan block untuk merefresh ListView atau memuat ulang data setelah data berhasil dihapus.

Langkah 4: Menguji Aplikasi

Setelah semua fungsi diatur, saatnya untuk menguji aplikasi Anda. Jalankan aplikasi di Sketchware Pro dan periksa apakah semua fungsi (GET, POST, PUT, DELETE) bekerja dengan baik. Cek apakah data ditampilkan dengan benar di ListView, dan apakah Anda bisa menambah, memperbarui, serta menghapus data stok barang melalui aplikasi.

Penutup dan Pengantar ke Artikel Berikutnya

Pada artikel ini, Anda telah belajar cara menggunakan komponen RequestNetwork di Sketchware Pro untuk mengakses REST API Google Sheets. Dengan ini, aplikasi stok barang Anda sudah bisa berinteraksi dengan Google Sheets untuk mengelola data secara real-time.

Lanjut ke: Membuat Tampilan Menarik dan User-Friendly di Sketchware Pro untuk Aplikasi Stok Barang