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.
Login menggunakan akun yang telah anda buat.
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.
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=
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.
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.
Mantap min
ReplyDeleteterimakasih
Deletekak mau bertanya kalau cara menghubungkan data pada thinkspeak ke aplikasi android gimana ?
ReplyDeletePrinsipnya masih sama. Untuk mengirimkan menghubungkan data dari thingspeak ke android kita hanya perlu menggunakan API GET dari thingspeak kita.
Delete