ALED — Kontrol LED Arduino Melalui Mobile Device (Android)

Dari artikel sebelumnya kali ini versi upgrade untuk kontrol LED Arduino yang sebelumnya hanya bisa dilakukan melalui browser sekarang bisa dilakukan langsung pada mobile device.

Kenapa membangun aplikasi mobile kalau pake web browser saja sebenarnya sudah cukup? tidak ada jawaban yang benar ataupun salah tapi dalam kasus ini dengan aplikasi mobile akan lebih mudah untuk menambahkan fitur fitur yang berhubungan langsung dengan device. Misalnya seperti akses sensor, camera dll.

ALED Android Hackaday!

ALED

Biar agak keren dikit kita beri nama aplikasi ini ALED. Pada dasarnya aplikasi mobile ini adalah hasil pemaketan dari aplikasi web, …ooo bisa gitu ya?

Perkembangan yang sangat pesat dalam industri teknologi web dan mobile memungkinkan framework seperti Apache Cordova (Phone Gap) dan Ionic muncul sehingga mengembangkan aplikasi mobile tidak selalu harus native seperti harus belajar bahasa Java untuk mengembangkan aplikasi di device Android.

Kalo anda sudah akrab dengan framework Ionic anda bisa langsung menuju ke kode sumber, jika tidak silahkan terus dibaca sebagai pengantar.

Source Code

Framework Ionic

Framework satu ini bertumpu pada teknologi HTML5, CSS dan JavaScript dan di optimasi khusus untuk AngularJS. Jadi transisi dari pengembangan aplikasi web ke prototype mobile menjadi sangat mudah dan dalam hitungan menit.

Keuntungan lainnya adalah pemaketan aplikasi bisa ditargetkan untuk berbagai platform seperti Android, IOS. Mungkin ini salah satu keunggulan memakai framework seperti Ionic

Write once run everywhere!

Untuk melihat platform yang didukung oleh sistem, anda bisa menggunakan perintah berikut

$ cordova platform list
Installed platforms: android 4.1.1
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, ubuntu, webos

dan untuk meambahkan platform target pada project

$ ionic platform <nama_platform>

Untuk instalasi framework ini sangat mudah, pastikan Node.js telah terinstall sebelumnya dan install secara global

$ npm install -g cordova ionic

ionic menyediakan server untuk pengembangan dan aplikasi dapat dengan mudah diakses melalui web browser sehingga anda bisa mengedit dan mencoba aplikasi sebelum di paketkan.

$ ionic serve

Jika anda sudah mendownload source code ALED dan menjalankan server ionic maka anda dapat dengan mudah mengakses aplikasi ini dalam browser pada alamat

http://localhost:8100

Silahkan mengutak atik source code, masih bebas dan gratis.

Tampilan pada browser Chrome dengan Dev Tools dan Mobile view

Setting Konfigurasi

Server Node.js yang menangani request ON/OFF LED Arduino bisa dijalankan pada PC, Raspberry Pi atau mungkin Cloud (artikel berikutnya) dan pasti server ini harus mempunyai alamat IP atau domain sehingga supaya ALED bisa berkomunikasi dengan server ini tentu saja ALED harus ada mekanisme untuk menyimpan alamat IP atau domain server tersebut.

Ada beberapa cara untuk menyimpan data pada aplikasi ini yaitu melalui storage bawaan browser seperti localStorage, IndexedDB atau menyimpan data di cloud. Untuk lebih mudahnya kita simpan saja data pada localStorage, caranya yaitu

untuk menyimpan data dengan key dan value

window.localStorage.set(key, value);

dan untuk mengambil data dengan key

window.localStorage.get(key)

Agar lebih fleksibel dua kode diatas bisa di abstraksikan menjadi factory di AngularJS seperti berikut

angular.module('ionic.utils',[])
.factory(‘$localstorage’, [‘$window’, function($window){
     return {
         set: function(key, value) {
           $window.localStorage[key] = value;
         },
         get: function(key){
           return $window.localStorage[key] || ‘3000’;
         }
     }
}]);

untuk menggunakannya sangat mudah anda tinggal menginjeksikan $localstorage pada controller() ataupun run().

Antar Muka Setting

Test localStorage

Antar muka setting dimunculkan dengan mengklik button gear pada pojok kanan bawah. Hal ini dapat dengan mudah dilakukan dengan bantuan metode ng-click() pada button gear.

Untuk form popup silahkan lihat resource link berikut atau bisa langsung ke github.

APK

Untuk pemaketan menjadi file android apk ketikkan perintah berikut

$ ionic platform android
$ ionic build android

Perintah diatas diasumsikan bahwa SDK Android telah terinstal dan untuk pengetesan apk silahak pake device ataupun emulator.

Happy Hacking!