0 °C
<script src="js/bootstrap.min.js">
Buka kembali jendela cmd lalu jalankan perintah cordova run browser untuk melihat hasil halaman html kita. Kita sudah menambahkan dua buah elemen di dalam halaman, yakni caption h1 untuk menampilkan nilai suhu dan progress-bar sebagai ilustrasi dari tinggi nilai suhu yang ditampilkan.
12 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
Sampai disini kita belum menampilkan nilai suhu aktual dari AgnosThings. Oleh karena itu kita tambahkan kode jQuery untuk mengambil data dari AgnosThings dan menampilkannya di h1 dan progress-bar. Tambahkan program berikut sebelum tag tutup body pada file index.html kita:
<script type="text/javascript"> var suhu= 0; var suhu_caption = "0";
setInterval(function(){ $.get("http://agnosthings.com/0xx00x0x-00xx-00x0-0000-000000000000/field/last/feed/00/su suhu = a.value; suhu_caption = suhu + "°C";
console.log(suhu);
$('#suhu').html(suhu_caption); $('#bar-suhu').css({width: suhu+"%"}); }) } , 5000);
Pada program di atas, kita membuat variabel untuk menyimpan nilai suhu. Kita kemudian menggunakan fungsi setInterval() untuk melakukan request ke server dengan jeda waktu setiap 5 detik. Kita menggunakan API jQuery $.get() untuk memanggil API request data terakhir ke AgnosThings. Jangan lupa untuk me ngganti API AgnosThings last feed dengan punyamu. Data diterima dalam format json dan kita dapat langsung
memanggil properti json tersebut untuk ditampilkan di elemen #suhu. Dan juga karena nilai yang kita dapatkan selalu berkisar antara 0 hingga 100, maka kita dapat langsung menggunakannya untuk mengatur panjang presentase progress-bar.
Jalankan lagi perintah cordova run browser untuk melihat hasilnya. Saat halaman web dimuat, dia akan mulai memanggil API AgnosThings untuk pertama kali dan setelah beberapa saat begitu data kita terima, data tersebut langsung dimuat ke elemen h1 dan panjang progress-bar pun berubah. :)
Export Aplikasi Web Mobile ke .apk Kita sudah melihat bahwa aplikasi web kita sudah bisa me muat data dari AgnosThings.
13 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
Kamu bisa mencoba mengganti nilai dengan mempengaruhi suhu pada sensor LM35DZ agar perubahan datanya dapat diamati, apakah dengan mendekatkannya ke api atau menempelkannya ke es.
Sekarang kita akan mengubah aplikasi web kita menjadi aplikasi Android. Jalankan perintah berikut untuk menambahkan platform pada project cordova kita:
cordova platform add android
Setelah itu jalankan perintah berikut untuk mulai mem build aplikasi Android kita.
cordova build android
Setelah proses build selesai, Kamu dapat mengakses file .apk di dalam folder iotapp\platforms\android\build\outputs\apk\ dengan nama file android-debug.apk. Salin dan install di handphone Android dan lihat hasilnya :)
Lebih Lanjut Kamu dapat menambahkan komponen lain pada aplikasimu seperti grafik 10 nilai suhu terakhir, mengganti progress-bar dengan jQuery Knob, atau menggunakan tombol untuk mereload data secara manual. Kamu juga dapat mendandani aplikasimu biar kelihatan lebih indah dan elegan, dengan menambahkan background warna atau gambar, menggunakan font yang cocok, atau bahkan menggunakan framework khusus untuk pengembangan aplikasi web app seperti Ionic Framework (http://ionicframework.com) atau Intel's App Framework (https://app-framework-software.intel.com/).
Kamu juga dapat menambah sensor lain pada alatmu, seperti sensor kelembaban, sensor asap, dan sensor cahaya. Tapi pada intinya, baik pengiriman maupun pengambilan data dari dan ke AgnosThings selalu seperti itu, sangat mudah dan sederhana.
14 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
Bila aplikasimu sudah selesai, tentunya dengan berbagai pengembangan dan fitur, Kamu bisa mencoba submit di challenge (https://www.codepolitan.com/xl-axiataselenggarakan-agnosthings-smartcity-challenge/) pembuatan aplikasi Internet of Things menggunakan AgnosThings untuk tema Smart Home (https://www.dicoding.com/challenges/71?refs=688b35bd0c) dan Smart Power Monitoring (https://www.dicoding.com/challenges/72?refs=eddd7d0498).
Selamat belajar dan sukses! :D
Dilihat 18876 kali
Is this helpful? YES, THANKS
Thanked by 1 peoples
Share This Post
15 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
(https://www.codepolitan.com/memulai-pembuatan-aplikasi-web-dengan-express-js-1-instalasi-dan-pengenalan) T U T O R I A L ( H T T P S : / / W W W . C O D E P O L I T A N . C O M / C AT E G O R Y / T U T O R I A L )
Memulai Pembuatan Aplikasi Web dengan Express.js (1): Instalasi dan Pengenalan (https://www.codepolitan.com/memulai-pembuatan-aplikasi-web-dengan-express-js-1-instalasidan-pengenalan) Muhammad Arslan (https://www.codepolitan.com/coder/arslan)
16 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
(https://www.codepolitan.com/belajar-codeigniter-3-controller-dan-view) T U T O R I A L ( H T T P S : / / W W W . C O D E P O L I T A N . C O M / C AT E G O R Y / T U T O R I A L )
Belajar Codeigniter 3 : Controller dan View (https://www.codepolitan.com/belajar-codeigniter3-controller-dan-view)
Muhammad Yusuf Ramadhan (https://www.codepolitan.com/coder/muhammad-yusuf50738164)
Share This Post
Is this helpful? YES, THANKS Thanked by 1 peoples
Other Articles by Toni Haryanto Pelajaran Singkat dari Kasus Terhapusnya Production Data Gitlab (https://www.codepolitan.com/pelajaransingkat-dari-kasus-terhapusnya-production-data-gitlab-5893da0724059) Upload Program Ardu ino Via Android Menggunakan Bluino Loader (https://www.codepolitan.com/uploadprogram-arduino-melalui-smartphonetablet-menggunakan-bluino-loader) Mekanisme Keamanan Aplikasi Web di Sistem Operasi Tizen (https://www.codepolitan.com/mekanismekeamanan-aplikasi-web-di-sistem-operasi-tizen) Integrasi Google Maps pada Aplikasi Mobile Web Tizen (https://www.codepolitan.com/integrasi-googlemaps-pada-aplikasi-mobile-web-tizen) Integrasi Google, Twitter, dan Facebook pada Aplikasi M obile Native Tizen (https://www.codepolitan.com /integrasi-google-twitter-dan-facebook-pada-aplikasi-mobile-native-tizen)
Recommended Articles Belajar Codeigniter 3 : CRUD - Bagian 2 (https://www.codepolitan.com/belajar-codeigniter-3-crud-bagian2-57d0f1bcef8de-17045) Membangun Fondasi yang Baik untuk Hari Esok yang Lebih Mudah (https://www.codepolitan.com/membangunfondasi-baik-hari-esok-lebih-mudah) CodePolitan Webinar: Mengenal React.js, Konsep dan Penggunaannya (https://www.codepolitan.com/webinarcodepolitan-mengenal-react-js-konsep-dan-penggunaannya)
17 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
UrhoSharp Game -Engine dari Xamarin (https://www.codepolitan.com/urhosharp-game-engine-dari-xamarin5878d4ef64c31) Belajar IoT Bersama Meetup Pertama CodePolitan X TIA DevTalk (https://www.codepolitan.com/belajariot-bersama-meetup-codepolitan-x-tia-devtalk)
(https://www.codepolitan.com/interactive-coding/php)
Copyright © 2016 CodePolitan (https://www.codepolitan.com). All rights reserved. About (https://www.codepolitan.com/about)
Term & Condition (https://www.codepolitan.com/how-to-start)
Media Partner (https://www.codepolitan.com/publikasi-event)
Contact Us (https://www.codepolitan.com/contact) KaryaLokal (http://www.karyalokal.com/)
18 f 18
15/03/2017 23 45
Buka kembali jendela cmd lalu jalankan perintah cordova run browser untuk melihat hasil halaman html kita. Kita sudah menambahkan dua buah elemen di dalam halaman, yakni caption h1 untuk menampilkan nilai suhu dan progress-bar sebagai ilustrasi dari tinggi nilai suhu yang ditampilkan.
12 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
Sampai disini kita belum menampilkan nilai suhu aktual dari AgnosThings. Oleh karena itu kita tambahkan kode jQuery untuk mengambil data dari AgnosThings dan menampilkannya di h1 dan progress-bar. Tambahkan program berikut sebelum tag tutup body pada file index.html kita:
<script type="text/javascript"> var suhu= 0; var suhu_caption = "0";
setInterval(function(){ $.get("http://agnosthings.com/0xx00x0x-00xx-00x0-0000-000000000000/field/last/feed/00/su suhu = a.value; suhu_caption = suhu + "°C";
console.log(suhu);
$('#suhu').html(suhu_caption); $('#bar-suhu').css({width: suhu+"%"}); }) } , 5000);
Pada program di atas, kita membuat variabel untuk menyimpan nilai suhu. Kita kemudian menggunakan fungsi setInterval() untuk melakukan request ke server dengan jeda waktu setiap 5 detik. Kita menggunakan API jQuery $.get() untuk memanggil API request data terakhir ke AgnosThings. Jangan lupa untuk me ngganti API AgnosThings last feed dengan punyamu. Data diterima dalam format json dan kita dapat langsung
memanggil properti json tersebut untuk ditampilkan di elemen #suhu. Dan juga karena nilai yang kita dapatkan selalu berkisar antara 0 hingga 100, maka kita dapat langsung menggunakannya untuk mengatur panjang presentase progress-bar.
Jalankan lagi perintah cordova run browser untuk melihat hasilnya. Saat halaman web dimuat, dia akan mulai memanggil API AgnosThings untuk pertama kali dan setelah beberapa saat begitu data kita terima, data tersebut langsung dimuat ke elemen h1 dan panjang progress-bar pun berubah. :)
Export Aplikasi Web Mobile ke .apk Kita sudah melihat bahwa aplikasi web kita sudah bisa me muat data dari AgnosThings.
13 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
Kamu bisa mencoba mengganti nilai dengan mempengaruhi suhu pada sensor LM35DZ agar perubahan datanya dapat diamati, apakah dengan mendekatkannya ke api atau menempelkannya ke es.
Sekarang kita akan mengubah aplikasi web kita menjadi aplikasi Android. Jalankan perintah berikut untuk menambahkan platform pada project cordova kita:
cordova platform add android
Setelah itu jalankan perintah berikut untuk mulai mem build aplikasi Android kita.
cordova build android
Setelah proses build selesai, Kamu dapat mengakses file .apk di dalam folder iotapp\platforms\android\build\outputs\apk\ dengan nama file android-debug.apk. Salin dan install di handphone Android dan lihat hasilnya :)
Lebih Lanjut Kamu dapat menambahkan komponen lain pada aplikasimu seperti grafik 10 nilai suhu terakhir, mengganti progress-bar dengan jQuery Knob, atau menggunakan tombol untuk mereload data secara manual. Kamu juga dapat mendandani aplikasimu biar kelihatan lebih indah dan elegan, dengan menambahkan background warna atau gambar, menggunakan font yang cocok, atau bahkan menggunakan framework khusus untuk pengembangan aplikasi web app seperti Ionic Framework (http://ionicframework.com) atau Intel's App Framework (https://app-framework-software.intel.com/).
Kamu juga dapat menambah sensor lain pada alatmu, seperti sensor kelembaban, sensor asap, dan sensor cahaya. Tapi pada intinya, baik pengiriman maupun pengambilan data dari dan ke AgnosThings selalu seperti itu, sangat mudah dan sederhana.
14 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
Bila aplikasimu sudah selesai, tentunya dengan berbagai pengembangan dan fitur, Kamu bisa mencoba submit di challenge (https://www.codepolitan.com/xl-axiataselenggarakan-agnosthings-smartcity-challenge/) pembuatan aplikasi Internet of Things menggunakan AgnosThings untuk tema Smart Home (https://www.dicoding.com/challenges/71?refs=688b35bd0c) dan Smart Power Monitoring (https://www.dicoding.com/challenges/72?refs=eddd7d0498).
Selamat belajar dan sukses! :D
Dilihat 18876 kali
Is this helpful? YES, THANKS
Thanked by 1 peoples
Share This Post
15 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
(https://www.codepolitan.com/memulai-pembuatan-aplikasi-web-dengan-express-js-1-instalasi-dan-pengenalan) T U T O R I A L ( H T T P S : / / W W W . C O D E P O L I T A N . C O M / C AT E G O R Y / T U T O R I A L )
Memulai Pembuatan Aplikasi Web dengan Express.js (1): Instalasi dan Pengenalan (https://www.codepolitan.com/memulai-pembuatan-aplikasi-web-dengan-express-js-1-instalasidan-pengenalan) Muhammad Arslan (https://www.codepolitan.com/coder/arslan)
16 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
(https://www.codepolitan.com/belajar-codeigniter-3-controller-dan-view) T U T O R I A L ( H T T P S : / / W W W . C O D E P O L I T A N . C O M / C AT E G O R Y / T U T O R I A L )
Belajar Codeigniter 3 : Controller dan View (https://www.codepolitan.com/belajar-codeigniter3-controller-dan-view)
Muhammad Yusuf Ramadhan (https://www.codepolitan.com/coder/muhammad-yusuf50738164)
Share This Post
Is this helpful? YES, THANKS Thanked by 1 peoples
Other Articles by Toni Haryanto Pelajaran Singkat dari Kasus Terhapusnya Production Data Gitlab (https://www.codepolitan.com/pelajaransingkat-dari-kasus-terhapusnya-production-data-gitlab-5893da0724059) Upload Program Ardu ino Via Android Menggunakan Bluino Loader (https://www.codepolitan.com/uploadprogram-arduino-melalui-smartphonetablet-menggunakan-bluino-loader) Mekanisme Keamanan Aplikasi Web di Sistem Operasi Tizen (https://www.codepolitan.com/mekanismekeamanan-aplikasi-web-di-sistem-operasi-tizen) Integrasi Google Maps pada Aplikasi Mobile Web Tizen (https://www.codepolitan.com/integrasi-googlemaps-pada-aplikasi-mobile-web-tizen) Integrasi Google, Twitter, dan Facebook pada Aplikasi M obile Native Tizen (https://www.codepolitan.com /integrasi-google-twitter-dan-facebook-pada-aplikasi-mobile-native-tizen)
Recommended Articles Belajar Codeigniter 3 : CRUD - Bagian 2 (https://www.codepolitan.com/belajar-codeigniter-3-crud-bagian2-57d0f1bcef8de-17045) Membangun Fondasi yang Baik untuk Hari Esok yang Lebih Mudah (https://www.codepolitan.com/membangunfondasi-baik-hari-esok-lebih-mudah) CodePolitan Webinar: Mengenal React.js, Konsep dan Penggunaannya (https://www.codepolitan.com/webinarcodepolitan-mengenal-react-js-konsep-dan-penggunaannya)
17 f 18
15/03/2017 23 45
Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruan...
https://www.codepolitan.com/tutorial/belajar-iot-membuat-aplikasi-and...
UrhoSharp Game -Engine dari Xamarin (https://www.codepolitan.com/urhosharp-game-engine-dari-xamarin5878d4ef64c31) Belajar IoT Bersama Meetup Pertama CodePolitan X TIA DevTalk (https://www.codepolitan.com/belajariot-bersama-meetup-codepolitan-x-tia-devtalk)
(https://www.codepolitan.com/interactive-coding/php)
Copyright © 2016 CodePolitan (https://www.codepolitan.com). All rights reserved. About (https://www.codepolitan.com/about)
Term & Condition (https://www.codepolitan.com/how-to-start)
Media Partner (https://www.codepolitan.com/publikasi-event)
Contact Us (https://www.codepolitan.com/contact) KaryaLokal (http://www.karyalokal.com/)
18 f 18
15/03/2017 23 45