Cara Menghubungkan MIT App Inventor dengan Arduino IoT Cloud

Proyek ini menunjukkan cara menghubungkan MIT App Inventor 2 dengan Arduino IoT Cloud. Aplikasi Android akan memiliki dua fungsi utama, yaitu membaca data dari Cloud dan memperbarui nilai variabel tertentu. Contoh menggunakan dua variabel bernama customerCount dan customerLimit. Komunikasi dilakukan melalui REST API dengan metode HTTP POST, GET, dan PUT serta autentikasi OAuth 2.0.

Langkah 1: Menyiapkan Arduino IoT Cloud

Buka Arduino IoT Cloud dan buat sebuah Thing baru. Thing merupakan proyek yang terhubung dengan board Wi-Fi. Hubungkan Thing dengan Arduino MKR WiFi 1010. Selanjutnya, buat dua variabel bertipe integer. Variabel pertama bernama customerLimit dengan izin Read & Write sehingga nilainya dapat dibaca dan diperbarui. Variabel kedua bernama customerCount dengan izin Read Only sehingga aplikasi hanya dapat membaca nilainya.

Setelah selesai, buka halaman Thing Overview. Catat Thing ID yang tersedia pada bagian bawah halaman karena ID tersebut diperlukan untuk mengakses data melalui API.

Langkah 2: Mendapatkan Client ID dan Client Secret

Pada halaman pengaturan Arduino IoT Cloud, buat kredensial API untuk aplikasi. Sistem akan menghasilkan Client ID dan Client Secret. Unduh dokumen kredensial tersebut dan simpan di tempat yang aman. Kedua informasi ini diperlukan untuk proses autentikasi OAuth 2.0.

Sebelum melanjutkan, pastikan tiga informasi berikut sudah tersedia:

• Thing ID.
• Client ID.
• Client Secret.

Langkah 3: Membuat Proyek MIT App Inventor

Buka MIT App Inventor 2 melalui browser dan masuk menggunakan akun yang sudah terdaftar. Pilih Create New Project untuk membuat aplikasi baru. Setelah proyek dibuat, kita akan melihat tampilan Screen1 yang masih kosong.

Langkah 4: Membuat Layout Aplikasi

Pada sidebar sebelah kiri, buka kategori Layout dan tambahkan komponen TableArrangement ke bagian atas layar. Atur properti Width menjadi Fill Parent agar tabel memenuhi lebar layar aplikasi.

Selanjutnya, buka kategori User Interface dan tambahkan tiga komponen Label serta satu komponen Spinner ke dalam empat kotak TableArrangement. Dua Label digunakan untuk menunjukkan nama variabel, yaitu Customer Limit dan Customer Count. Spinner digunakan untuk memilih nilai baru customerLimit. Atur nilai awal Label Customer Count menjadi 0 sebagai placeholder.

Masukkan beberapa pilihan angka pada properti Elements From String milik Spinner. Pisahkan setiap angka menggunakan tanda koma. Ubah nama setiap komponen melalui Components agar lebih mudah dikenali saat membuat program Blocks.

Langkah 5: Menambahkan Tombol dan Komponen Web

Tambahkan tombol Connect untuk memulai proses autentikasi dan tombol Refresh Data untuk mengambil data terbaru dari Arduino IoT Cloud. Tambahkan satu Label tambahan untuk menampilkan pesan komunikasi atau status request.

Setelah itu, buka kategori Connectivity dan tambahkan komponen Web. Komponen ini akan digunakan untuk mengirim HTTP request dan menerima respons dari Arduino Cloud API.

Langkah 6: Membuka Tampilan Blocks

Pilih menu Blocks di bagian kanan atas MIT App Inventor. Pada bagian ini, kita akan menyusun logika aplikasi menggunakan blok pemrograman visual.

Buat beberapa variabel global untuk menyimpan Thing ID, Client ID, Client Secret, ID property customerLimit, ID property customerCount, nilai kedua variabel, status autentikasi, access token, dan respons server.

Variabel yang digunakan dalam tutorial antara lain gotAccessToken untuk menunjukkan apakah access token telah diperoleh, strAccessToken untuk menyimpan token, strResponse untuk menyimpan respons server, serta requestSource untuk membedakan jenis request yang sedang diproses.

Langkah 7: Memahami OAuth 2.0

Arduino Cloud API menggunakan OAuth 2.0 sebagai sistem autentikasi. Sebelum aplikasi dapat membaca atau memperbarui data, aplikasi harus mendapatkan izin dari server. Proses ini dilakukan dengan mengirimkan Client ID dan Client Secret untuk memperoleh access token.

Access token merupakan kunci akses sementara yang digunakan dalam request berikutnya. Token ini harus disimpan dan digunakan sesuai masa berlaku yang diberikan server.

Langkah 8: Meminta Access Token Menggunakan HTTP POST

Atur tombol Connect agar mengirimkan HTTP POST request ke endpoint autentikasi Arduino Cloud. Susun body request berdasarkan format autentikasi OAuth 2.0 yang ditentukan dokumentasi API. Sertakan parameter yang dibutuhkan, termasuk Client ID, Client Secret, dan grant_type.

Ketika server menerima request, server akan mengirimkan respons dalam format JSON. Gunakan blok JSON Text Decode untuk mengubah respons menjadi daftar pasangan key-value. Selanjutnya, periksa response code. Nilai 200 menunjukkan bahwa request berhasil diproses.

Ambil nilai access_token dari respons JSON dan simpan ke variabel strAccessToken. Jika token berhasil diperoleh, ubah gotAccessToken menjadi true dan sembunyikan tombol Connect karena autentikasi telah berhasil dilakukan.

Jika proses gagal, periksa kembali Client ID dan Client Secret. Pastikan tidak ada spasi tambahan atau kesalahan penyalinan. Pembuat proyek menyebutkan bahwa spasi yang tidak disengaja pada kredensial sempat menyebabkan kegagalan autentikasi.

Langkah 9: Mengambil Data Arduino Cloud Menggunakan HTTP GET

Setelah access token diperoleh, aplikasi dapat mengambil informasi variabel dari Arduino IoT Cloud. Atur tombol Refresh Data agar mengirimkan HTTP GET request untuk mendapatkan daftar property dari Thing yang telah dibuat.

Tambahkan header Authorization dengan format Bearer diikuti satu spasi dan access token. Contoh format header: Authorization: Bearer ACCESS_TOKEN. Perhatikan bahwa spasi setelah kata Bearer wajib ada.

Gunakan variabel requestSource dengan nilai refreshData untuk menandai bahwa request yang sedang dilakukan bertujuan memperbarui tampilan data aplikasi.

Server akan mengembalikan daftar property dalam format JSON. Karena proyek menggunakan dua variabel, respons berisi dua informasi property. Ambil nilai last_value dan id dari masing-masing property, kemudian simpan ke variabel yang sesuai.

Perbarui teks Label pada aplikasi agar menampilkan nilai customerLimit dan customerCount. Pada contoh pengujian pembuat, Customer Limit menampilkan nilai 0 dan Customer Count menampilkan nilai 7.

Langkah 10: Memperbarui Data Menggunakan HTTP PUT

Langkah berikutnya adalah membuat aplikasi dapat mengubah nilai customerLimit. Gunakan komponen Spinner untuk memilih nilai baru. Ketika pengguna memilih angka, aplikasi mengirim HTTP PUT request menuju endpoint property yang sesuai dengan Property ID customerLimit.

Request harus menyertakan header Authorization dengan access token serta header Content-Type sesuai format API. Body request berisi data JSON dengan nilai customerLimit yang baru.

Server akan memberikan respons setelah menerima request. Tambahkan kondisi pada blok penerima respons untuk memeriksa apakah proses pembaruan berhasil. Pembuat memberikan contoh ketika pengguna memilih nilai 9, kemudian nilai tersebut berhasil diperbarui di Arduino Cloud.

Langkah 11: Menguji Aplikasi

Jalankan aplikasi pada perangkat Android. Tekan tombol Connect untuk memperoleh access token. Jika autentikasi berhasil, tekan Refresh Data untuk mengambil nilai customerLimit dan customerCount dari Cloud.

Ubah nilai customerLimit melalui Spinner. Selanjutnya, tekan Refresh Data untuk memastikan nilai terbaru sudah diterima. Periksa juga dashboard Arduino IoT Cloud untuk memastikan nilai yang tersimpan pada server sama dengan nilai yang dipilih melalui aplikasi.

Langkah 12: Mengembangkan Fitur Pembaruan Otomatis

Pada bagian akhir, pembuat menyarankan agar kode untuk memperbarui data dipindahkan ke dalam sebuah fungsi. Dengan pendekatan ini, aplikasi dapat dikembangkan dengan menambahkan switch automatic update sehingga pengguna dapat mengaktifkan pembaruan data secara otomatis.

Fitur tersebut dapat dikembangkan lebih lanjut untuk menampilkan data sensor, membuat grafik perubahan nilai, dan memberikan notifikasi ketika nilai tertentu tercapai.

Catatan dokumentasi gambar: Artikel asli memiliki gambar thumbnail dan sejumlah ilustrasi berupa screenshot tampilan MIT App Inventor, pengaturan variabel, blok pemrograman, respons API, dan hasil pengujian. URL attachment individual untuk gambar-gambar tersebut tidak dapat diverifikasi dari sumber halaman yang berhasil diakses. Karena itu, URL gambar selain thumbnail tidak disertakan agar tidak menghasilkan tautan gambar fiktif.