Tutorial Read dan Write Data ke Web Server ThingSpeak dari Android

Halo sobat teknodika, kembali lagi kali ini pada tutorial seputar teknologi kami. Kali ini, kita akan membahas sedikit tentang dasar Internet of Thing (IoT) tentang bagaimana mengirimkan data dari suatu aplikasi android menuju web server ThingSpeak. Kita juga akan membahas bagaimana membuat sebuah aplikasi android sederhana menggunakan MIT App Inventor v2.

Kali ini kita hanya membutuhkan sebuah PC yang memiliki koneksi internet. Tertarik? yuk simak tutorial berikut.

Pembuatan Channel pada Web Thingspeak

Masuk ke web https://thingspeak.com/. Jika belum memiliki akun thingspeak, anda bisa mendaftar terlebih dahulu menggunakan email anda.

Setelah berhasil masuk, akan muncul tampilan seperti gambar dibawah. Klik New Channel untuk membuat channel baru.

Masuk ke tampilan channel, silahkan isi Name dan Field 1 dengan nama channel yang anda inginkan. Untuk deskripsi optional, bisa diisi atau tidak. Setelah selesai, klik Save Channel untuk menyimpan.

Channel yang telah selesai dibuat akan ditampilkan seperti gambar dibawah. Selanjutnya kita bisa mengatur preferensi channel kita.

Klik gambar pensil yang ditandai lingkaran merah untuk mengatur preferensi field yang anda buat.

Setelah mengklik ikon pensil, akan muncul jendela Field 1 Chart Options. Anda bisa mengatur judul, background, batas maksimal dan minimal data, batas maksimal dan minimal axis X dan Y, serta berbagai preferensi lain yang disajikan. Pada pengaturan ini, saya mengubah beberapa item seperti gambar dibawah. Hal ini dilakukan agar tampilan chart lebih rapi karena diberi batas maksimal dan minimal.

Masuk ke menu API Keys, kemudian copy Write a Channel Feed. Hal ini dibutuhkan agar aplikasi yang kita buat di MIT App Inventor 2 bisa menuliskan data yang dikirim ke channel yang anda dibuat.

Channel telah selesai, sekarang kita bisa masuk ke proses pembuatan Aplikasi android di MIT App Inventor 2.

Membuat Aplikasi Android di MIT App Inventor 2.

Tampilan Desain Aplikasi

Masuk ke web MIT App Inventor 2 dengan membuka url http://ai2.appinventor.mit.edu/ . Login menggunakan akun gmail anda.

Setelah berhasil login, akan muncul tampilan berikut. Untuk membuat project baru, klik Start new project.

Beri nama project anda sesuai yang anda inginkan.

Anda akan dihadapkan dengan tampilan Designed Layer seperti gambar berikut. Pada halaman ini, anda bisa membuat desain sesuai keinginan anda. Pada dasarnya, project ini hanya memerlukan sebuah screen dengan 1 buah Textbox, 1 buah Button, dan 1 buah Label. Tetapi anda dapat menambah desain lain sesuai dengan yang anda inginkan.

Tahap pertama kita akan membuat judul menggunakan label. Pada tab Pallete, cari objek Label dan drag ke dalam screen.

Tambahkan juga Textbox, Button, Web, dan Clock. Anda bisa menggunakan fitur Search Components untuk menemukan objek-objek tersebut. Drag dan drop pada Screen1 sehingga tampilan Screen1 menjadi seperti berikut.

Pada tab Component, pilih Clock1. Kemudian pada tab Properties atur menjadi seperti berikut.

Pilih Label1, lalu atur properties. Pada bagian Text, atur text yang anda inginkan sebagai perintah untuk menginput data. Penulis menggunakan “Input Data” pada bagian Text untuk menampilkan tulisan tersebut.

Pilih TextBox1, lalu atur properties. Pada bagian Hint, atur text yang anda inginkan sebagai perintah untuk menginput data. Penulis menggunakan “Data” untuk menampilkan tulisan tersebut.

Pada Button1, ubah textnya menjadi Kirim untuk mengganti text yang ada pada Button1.

Pada Label2, silahkan atur tampilan yang anda inginkan untuk indikator data telah terkirim.

Tampilan screen yang anda buat akan seperti berikut.

Untuk menghilangkan Label2 ketika default data awal bahwa data belum terkirim, pada Properties uncheck bagian Visible.

Jika telah selesai mendesain tampilan aplikasi, kita bisa melanjutkan tahap selanjutnya yaitu pemrograman blok, agar aplikasi yang telah dibuat dapat berjalan sesuai keinginan.

Pemrograman Blok Aplikasi

Untuk memulai pemrograman blok, kita perlu mengubah Tampilan Designer menjadi Blocks. Klik tombol Blocks pada pojok kanan atas.

Sebagai langkah awal, kita akan memberi program pada Button1. Pada tab Blocks, pilih Screen1 → Button1.

Buat program block menjadi seperti gambar dibawah dengan cara drag blocks yang sesuai ke dalam Viewer. Untuk block Web1 bisa didapatkan di bagian Web1, begitu pula dengan objek lain menyesuaikan. Untuk logic False bisa didapatkan pada menu Built-in → Logic. Sedangkan untuk Join dan Text “ ” bisa didapatkan di menu Built-in → Logic.

Pada bagian

tulis Url Write a Channel Feed yang sudah disiapkan sebelumnya di web Thingspeak.

Edit Url dengan menghapus bagian “GET” dan “0” pada akhir Url seperti yang ditandai merah seperti dibawah.

GET https://api.thingspeak.com/update?api_key=XRL5WA2ZYJL13Y8O&field1=0

Setelah diedit:

https://api.thingspeak.com/update?api_key=XRL5WA2ZYJL13Y8O&field1=

Masukan Url tersebut pada bagian

sehingga tampilan menjadi seperti berikut.

Selanjutnya kita akan memberikan block program pada Web1. Lakukan langkah yang sama seperti langkah saat memprogram Button1 sebelumnya. Atur blocks program seperti gambar berikut.

Blocks program selanjutnya yaitu pada bagian Clock1. Ikuti langkah sebelumnya dan buat blocks program seperti berikut.

Jika digabungkan, maka blocks program akan tampak seperti gambar berikut.

Blocks program telah selesai dibuat. Selanjutnya kita bisa melakukan Build pada aplikasi yang telah kita buat.

Build dan Run Aplikasi MIT App Inventor 2

Masuk ke menu Build, lalu pilih dengan cara apa aplikasi anda akan disimpan. Pada kesempatan kali ini penulis menggunakan opsi “App (save .apk to my computer” untuk menyimpan aplikasi pada komputer.

Secara otomatis, aplikasi yang telah dibuat akan di compile dan build.

Unduh aplikasi dan simpan pada komputer atau smartphone anda.

Install aplikasi yang sudah anda buat pada smartphone anda. Untuk kali ini, penulis memilih menggunakan emulator Noxplayer sebagai pengganti smartphone. Anda dapat menginstall aplikasi ini baik di smartphone maupun di emulator.

Setelah selesai diinstal, maka aplikasi akan muncul pada layar kita. Penulis memberi nama aplikasi yang telah dibuat yaitu KAD.

Buka aplikasi KAD, maka akan muncul tampilan berikut.

Masukan nilai nominal pada textboxt, lalu coba kirimkan data tersebut. Penulis mengirimkan data angka 120 dan 50 sebagai percobaan.

Jika data berhasil terkirim maka label 2 akan muncul dan menampilkan text “Sent Successfully!”.

Untuk mengecek data apakah benar sudah terkirim, masuk ke web Thingspeak lalu ke bagian Private View. Jika data berhasil masuk, maka pada tampilan Field “Data Aplikasi” akan muncul pada grafik seperti berikut.

Tampilan ketika data berhasil diterima oleh web Thingspeak sebesar 120 dan 50.

Coba lagi dengan data yang lai dan amati apa yang terjadi. Aplikasi untuk mengirim data ke Thingspeak telah berhasil anda buat dan jalankan.

Jadi artikel diatas merupakan cara pengiriman data ke web server ThingSpeak. Sebenarnya ada banya web server yang bisa kita gunakan. Penulis memilih ThingSpeak karena web ini gratis serta mudah digunakan. Terimakasih

Daftar Pustaka
Antares. (2019). MIT App Inventor. https://antares.id/id/mitappinventor2.html. Diakses pada 23 Maret 2020 Pukul 21.15 WIB

Saputro, T.T. (2018). Berikut Daftar Platform Yang Berguna Untuk Membangun Project IoT (Bagian 1). https://embeddednesia.com/v1/berikut-daftar-platform-yang-berguna-untuk-membangun-project-iot-bagian-1/ . Diakses pada 23 Maret 2020 Pukul 21.36 WIB.