Tutorial Pemrograman Robot Mobil Remot Kontrol Android Wifi

Hello sahabat semua, akhirnya.. sesuai dengan janji saya pada tulisan sebelumnya yang berjudul Tutorial Perakitan Robot Mobil Remot Kontrol Android Wifi, pada kesempatan ini di malam terakhir tahun 2017 saya akan membagikan dokumentasi cara memprogram robot mobil remot kontrol kita yaitu GovindaRC. Setelah selesai merakit casis dan perangkat kerasnya, tentunya kita harus memprogram robotnya terlebih dahulu agar dapat digunakan. Untungnya, saya berhasil menyelesaikan versi awal (alpha) dari keseluruhan techno stack dari GovindaRC yang terdiri dari bagian firmware hingga ke interface.

How its work?

Sedikit saya ceritakan pada sisi teknis, projek GovindaRC saya desain untuk ditujukan bagi para pemula dan para hobis dibidang Arduino dan permikrokontroleran. Oleh sebab itu, pendekatannya mungkin lebih ke sisi umum dan hanya untuk having fun saja. Sungguh jauh dari kata sempurna, atau jika dibandingkan dengan projek sejenis buatan yang lain mungkin GovindaRC masih jauh dari kata layak.

GovindaRC pada sisi firmware, dibangun menggunakan bahasa Arduino, sebuah bahasa pemrograman mirip bahasa C/C++ namun ditujukan untuk platform ESP8266, yaitu otak dari GovindaRC yang tertanam di modul mikrokontroler board NodeMCU. Karena menggunakan ESP8266, maka GovindaRC secara otomatis memiliki kemampuan untuk berkomunikasi melalui sinyal WiFi. GovindaRC berkomunikasi dengan smart phone kita melalui sinyal WiFi yang dipancarkan oleh Smart Phone kita.

Jadi GovindaRC akan bertindak sebagai WiFi STA Client yang akan menghubungkan dirinya ke HP kita yang bertindak sebagai WiFi AP melalui fungsi WiFi Tethering yang dimiliki oleh semua HP Android. Metode ini saya pilih karena dapat memungkinkan si GovindaRC untuk mengakses Internet. Dengan demikian, dia nantinya bisa mengupdate dirinya secara otomatis apabila ada pembaharuan firmware untuk mendukung fungsi dan fitur baru. Saya dan komunitas di TutorKeren.com akan terus mengembangkan GovindaRC, menambahkan lebih banyak fitur baru dan peningkatan performanya. 

Untuk antarmuka, GovindaRC memiliki antarmuka/interface berbasis web moderen yang dibangun menggunakan platform pengembangan aplikasi web Angular 5. Dari sisi platform pengembangan, GovindaRC bisa dibilang sudah masuk kategori keren. Karena menggunakan platform pengembangan aplikasi web yang paling baru, ya setidaknya untuk saat ini :D . Karena berbasis web, maka untuk mengakses interfacenya kita harus terhubung ke Internet, mungkin sedikit ribet karena untuk bisa menggunakan GovindaRC otomatis kita harus menggunakan paket data (pertama kali saat membuka aplikasi, selanjutnya tidak perlu paket data). Tapi hal ini saya buat dengan pertimbangan agar dapat menjangkau platform apapun. Ya platform apapun maksudnya HP apapun, kalau aplikasinya kita bangun menggunakan platform web, maka perangkat apapun seperti Android, iPhone, Windows Phone, dll akan bisa menggunaknnya. Yang diperlukan hanya satu, web browser seperti Google Chrome atau Firefox, sudah deh tidak perlu install apapun untuk menggunakan, dan pengembangannya juga mudah karena kode programnya hanya satu jenis. Dari sisi pengguna bisa hemat memory dan tidak memberatkan HP, dari sisi pengembang juga bisa hemat sumber daya.

Akan tetapi tidak menutup kemungkinan, dengan adanya teknolgi Cordova, nantinya GovindaRC akan memiliki versi APK untuk Android, dan paket lainnya yang menarget platform mobile native lainnya agar bisa digunakan offline tanpa Internet. Untuk tahap awal, agar bisa digunakan saja dulu tak apa kita gunakan interface web moderen dulu.

Nantinya, setelah GovindaRC terprogram dengan firmware yang telah disediakan, pengguna dapat membuka aplikasi webnya. Cara menggunakan pertama pengguna harus menyetel alamat IP dari GovindaRC yang bisa diketahui dari konfigurasi WiFi tethering di HP. IP Address dari GovindaRC tinggal dimasukan pada kolom IP pada aplikasi, selanjutnya tinggal klik tombol konek untuk mulai menggunakan GovindaRC.

Interface GovindaRC dibuat dengan sangat sederhana, berisi sebuah touch joystick yang digunakan untuk mengendalikan arah gerak sekaligus kecepatan robot. Joystick kontrolnya dibuat dengan cukup intuitif, sehinga pengguna akan cepat dapat menggunakan walupun pada awalnya perlu sedikit latihan untuk menyesuaikan. Kemudian juga disertakan beberapa tombol seperti tombol pencahayaan atau lampu, dan tombol ultrasonik untuk membaca jarak halangan di depan. Pengembangan lebih jauh akan dilakukan pada bagian antarmuka untuk mendukung lebih banyak fitur dan meningkatkan pengalaman pengguna.

Where is the source?

Dengan senang hati, saya merilis semua kode sumber untuk projek GovindaRC, mulai dari kode program untuk firmware hingga ke interface saya rilis secara open souce alias gratis tis tis...!

Karena jaman sekarang adalah jaman kolaborasi, maka saya mengundang para pengembang, pecinta, pengguna, atau para pencoba-coba untuk ikut berkolaborasi mengembangkan GovindaRC. Seluruh sumber daya projek GovindaRC saya rilis melalui akun GitHub NarinLab yang beralamat di:

https://github.com/NarinLab/GovindaRC

Saya berharap projek sederhana yang masih jauh dari kata layak ini dapat berguna bagi banyak orang, bagi teman-teman yang ingin belajar, teman-teman yang sedang tugas akhir, dan lainnya. Karena dalam projek ini teman-teman akan bisa belajar bagimana caranya melakukan interfacing dengan teknologi web moderen. Membaca data sensor dan mengontrol aktuator melalui internet dan menampilkannya dengan apik dan cantik menggunakan teknologi web moderen bisa dipelajari melalui projek GovindaRC.

Lets Rock It!

Oke, demikian sedikit chit-chat dari saya untuk projek GovindaRC

Sekarang mari kita masuk ke inti pembahasa tulisan ini, yaitu tutorial memprogram GovindaRC yang telah selesai dirakit. Kita akan mulai pertama dengan menyiapkan keperluan yang diperlukan untuk memprogram GovindaRC. Kemudian kita masuk ke sesi pemrograman, dan terakhir sedikit kilasan penggunaanya.

Daftar Kebutuhan

1. Kabel data mikro USB / kabel data Android
2. NodeMCU Flasher, bisa didownload di: https://github.com/NarinLab/GovindaRC/tree/master/tools (pilih versi 32bit/64bit sesuai Windows yg digunakan)
3. Firmware terbaru, saat ini v0.1.1-alpha di: https://github.com/NarinLab/GovindaRC/tree/master/firmware/dist
4. Robot yang telah selesai dirakit tentunya :D

Cara memprogram

1. ​Cabut NodeMCU dari breadboard, atau pastikan tidak ada kabel yang terhubung ke pin TX/RX nya si NodeMCU
2. Colok kabel MicroUSB ke NodeMCU dan ke komputer
3. Cari nomer port COM si NodeMCU, caranya buka Device Manager (Klik star menu > ketik pada kolom search Device Manager), lihat Gambar 1, nomer portnya adalah COM12.
4. [[{"fid":"3605","view_mode":"wysiwyg","fields":{"format":"wysiwyg","alignment":"","field_file_image_alt_text[und][0][value]":"Device Manager - Arduino COM Port","field_file_image_title_text[und][0][value]":"Device Manager - Arduino COM Port","external_url":""},"link_text":null,"type":"media","field_deltas":{"1":{"format":"wysiwyg","alignment":"","field_file_image_alt_text[und][0][value]":"Device Manager - Arduino COM Port","field_file_image_title_text[und][0][value]":"Device Manager - Arduino COM Port","external_url":""}},"attributes":{"alt":"Device Manager - Arduino COM Port","title":"Device Manager - Arduino COM Port","class":"media-element file-wysiwyg","data-delta":"1"}}]]Gambar 1. Device Manager
5. Buka ESP8266 Flasher tools, terlihat seperti Gambar 2. Pilih nomer portnya COM12
6. [[{"fid":"3606","view_mode":"wysiwyg","fields":{"format":"wysiwyg","alignment":"","field_file_image_alt_text[und][0][value]":"ESP8266 Flasher tools","field_file_image_title_text[und][0][value]":"ESP8266 Flasher tools","external_url":""},"link_text":null,"type":"media","field_deltas":{"2":{"format":"wysiwyg","alignment":"","field_file_image_alt_text[und][0][value]":"ESP8266 Flasher tools","field_file_image_title_text[und][0][value]":"ESP8266 Flasher tools","external_url":""}},"attributes":{"alt":"ESP8266 Flasher tools","title":"ESP8266 Flasher tools","class":"media-element file-wysiwyg","data-delta":"2"}}]]Gambar 2. ESP8266 Flasher tools pilih nomer port
7. Kemudian klik tab config, klik icon gear yang pertama untuk memilih firmware. Gambar 3.
8. [[{"fid":"3607","view_mode":"wysiwyg","fields":{"format":"wysiwyg","alignment":"","field_file_image_alt_text[und][0][value]":"ESP8266 Flasher tools select firmware","field_file_image_title_text[und][0][value]":"ESP8266 Flasher tools select firmware","external_url":""},"link_text":null,"type":"media","field_deltas":{"3":{"format":"wysiwyg","alignment":"","field_file_image_alt_text[und][0][value]":"ESP8266 Flasher tools select firmware","field_file_image_title_text[und][0][value]":"ESP8266 Flasher tools select firmware","external_url":""}},"attributes":{"alt":"ESP8266 Flasher tools select firmware","title":"ESP8266 Flasher tools select firmware","class":"media-element file-wysiwyg","data-delta":"3"}}]]Gambar 3. ESP8266 Flasher tools pilih firmware
9. Kembali ke tab operation, lalu klik Flash (F) untuk mulai melakukan flashing firmware.
10. Tunggu hingga proses flashing selesai, and done! NodeMCU sudah bisa dipasang ke robot lagi.

Cara Menggunakan

Setelah selesai menggunakan, robot akan otomatis mencoba untuk menghubungkan diri ke WiFi default atau bawaan program awal. Kalian harus mengambil HP kalian dan mulai konfigurasi WiFi tethering ke setting default/bawaan yang digunakan oleh robot. Setting bawaannya adalah untuk SSID/Nama WiFi menggunakan AndroidAP dan passwordnya adalah ingattuhan. Setelah mengaktifkan WiFi tethering di HP kalian dengan konfigurasi default itu, robot akan tersambung langsung ke HP. Nanti akan kelihatan pada halaman konfigurasi WiFi tethering di HP berapa alamat IP dari si robot. Misalnya 192.168.43.xxx dimana xxx bisa acak antara 2 - 253 tergantung HP kalian.

Setelah itu, kalian bisa langsung membuka Google Chrome (pastikan menggunakan versi terbaru, versi lama tidak berjalan dengan baik) dan masuk ke alamat govindarc.tutorkeren.com setelah masuk kalian harus mengaktifkan web app mode dengan cara masuk ke menu opsi pada pojok kanan atas, kemudian pilih Add to Home Screen atau Tambahan ke Halaman Depan. Selanjutnya kalian bisa melihat halaman depan kalian, disana akan muncul icon seperti Gambar 4.

[[{"fid":"3609","view_mode":"wysiwyg","fields":{"format":"wysiwyg","alignment":"center","field_file_image_alt_text[und][0][value]":"GovindaRC web app home screen shorcut","field_file_image_title_text[und][0][value]":"GovindaRC web app home screen shorcut","external_url":""},"link_text":null,"type":"media","field_deltas":{"4":{"format":"wysiwyg","alignment":"center","field_file_image_alt_text[und][0][value]":"GovindaRC web app home screen shorcut","field_file_image_title_text[und][0][value]":"GovindaRC web app home screen shorcut","external_url":""}},"attributes":{"alt":"GovindaRC web app home screen shorcut","title":"GovindaRC web app home screen shorcut","class":"media-element file-wysiwyg media-wysiwyg-align-center","data-delta":"4"}}]]

Gambar 4. GovindaRC web app shorcut

Selanjutnya tinggal disentuh icon GovindaRC dan aplikasi akan langsung membuka. Selanjutnya kalian bisa memasukan alamat IP robotnya pada menu Options pojok kanan atas. Masukan alamat IPnya dan ganti SSID dan Password dengan yang baru untuk keamanan.

Setelah itu, kalian bisa menekan tombol koneksi yang paling bawah untuk mulai menghubungkan diri ke robot dan voila! Robot sudah siap untuk dimainkan!

Untuk tutorial lebih jelasnya, saya sudah posting video tutorialnya... so happy new year and stay tune untuk melihat GovindaRC in action! 

[[{"fid":"3610","view_mode":"wysiwyg","fields":{"format":"wysiwyg","alignment":"center","field_file_image_alt_text[und][0][value]":"GovindaRC web app splashscreen","field_file_image_title_text[und][0][value]":"GovindaRC web app splashscreen","external_url":""},"link_text":null,"type":"media","field_deltas":{"5":{"format":"wysiwyg","alignment":"center","field_file_image_alt_text[und][0][value]":"GovindaRC web app splashscreen","field_file_image_title_text[und][0][value]":"GovindaRC web app splashscreen","external_url":""}},"attributes":{"alt":"GovindaRC web app splashscreen","title":"GovindaRC web app splashscreen","class":"media-element file-wysiwyg media-wysiwyg-align-center","data-delta":"5"}}]]

Gambar 5. GovindaRC web app splahscreen (perlu Google Chrome versi terbaru)

[[{"fid":"3611","view_mode":"wysiwyg","fields":{"format":"wysiwyg","alignment":"center","field_file_image_alt_text[und][0][value]":"GovindaRC web app","field_file_image_title_text[und][0][value]":"GovindaRC web app","external_url":""},"link_text":null,"type":"media","field_deltas":{"6":{"format":"wysiwyg","alignment":"center","field_file_image_alt_text[und][0][value]":"GovindaRC web app","field_file_image_title_text[und][0][value]":"GovindaRC web app","external_url":""}},"attributes":{"alt":"GovindaRC web app","title":"GovindaRC web app","class":"media-element file-wysiwyg media-wysiwyg-align-center","data-delta":"6"}}]]

Gambar 6. GovindaRC web app