Part 2. Low Code Development Platform | Kirim data GPS NodeMCU ke Mobile Apps Outsystems
11 min readMay 8, 2020
Mengirimkan data GPS NodeMCU, membuat HTTP REST API, simpan kedalam Table, tampilkan pada Google Maps menggunakan Outsystems
Tulisan ini melanjutkan seri Low Code Development Platform menggunakan Outsystems. Jika kalian belum ikutin simple project di part 1, disarankan untuk ikuti dulu. Dapat ditemukan disini,
Prerequisite
- Memiliki Personal Environmet Outsystems, ikuti langkahnya pada tutorial Part 1 disini.
- Laptop terinstall Outsystems Service Studio yang dapat di-download disini,
- Laptop Terinstall Arduino IDE untuk memprogram NodeMCU, Dapat di-download disini,
- Install ESP8266 add-on pada Arduino IDE, langkahnya dapat diikuti disini,
- Download Google Maps Plugin, caranya dapat diikuti disini,
- Download Library TinyGPS++ disini,
klik “Clone or Download” > klik “Download ZIP”
Install pada Arduino IDE, Pilih menu Sketch > Include Library > Add .ZIP Library…
Setelah itu pilih file zip library Tiny GPS ++ yang sudah didownload sebelumnya, jika sudah tutup dan buka kembali Arduino IDE.
- Memiliki Google Maps API Key, bisa didapatkan disini,
Nah, sekarang setelah semua bahan sudah siap, kita mulai.
Wiring NodeMCU GPS Module
- Module GPS yang digunakan bisa apa saja dengan interface komunikasi UART (TX,RX). Untuk sekarang saya akan gunakan GPS Ublox Neo 6M V2.
- Wiring NodeMCU terhadap GPS sebagai berikut,
pin RX GPS → Pin D1 NodeMCUpin TX GPS → pin D2 NodeMCUpin VCC GPS → pin 3v3 NodeMCUpin GND GPS → pin GND NodMCU
Program Node MCU menggunakan Arduino IDE
- Buka Arduino IDE dan paste Code berikut, setelah itu verify dan upload ke NodeMCU,
Data GPS dikirim dalam format JSON sebagai berikut,
{
"DevideId" : "A1500001",
"Latitude" : -6.117664,
"Longitude" : 106.906349
}Data GPS (latitude , longitude) yang didapatkan akan dikirim ke Outsystems menggunakan HTTPClient.POST pada library ESP8266HTTPClient , data GPS diterima oleh NodeMCU melalui pin GPIO4, GPIO5 ESP 12E atau pin D1, D2 Node MCU.
Note :
- Varibale RESTAPI sesuaikan dengan environment name yang kalian gunakan di outsystem. Contohnya, saya mengunakan environment https://m-yunus.outsystemscloud.com/
- Sesuaikan SSID dan Password jaringan WiFI yang kalian gunakan
Pembuatakan Aplikasi Modile di Outsystems
- Pertama buka Outsystems Service Studio,
- setelah Outsystems Service Studio terbuka, klik “New Application”
- Setelah itu pilih Mobile App > lalu klik Next
- Input nama Aplikasi “IOT GPS Tracker”, kita juga bisa upload icon melalui tombol UPLOAD ICON
- Selanjutnya buat module dengan nama IOTGPSTracker dilanjutkan dengan klik CREATE MODULE,
- Setelah berhasil dibuat, akan muncul tab baru berupa layout module IOTGPSTracker
- Langkah pertama adalah , klik manage dependency untuk meng-import plugin Google Maps
- Selanjutnya masukan pencarian “maps”, lalu klik plugin google maps, dan check all pada element box, setelah itu klik apply,
Membuat REST API di Outsystems
- Selanjutnya klik tab Logic, scroll ke bagian Integration, klik kanan pada REST, selanjutnya pilih dan klik Expose REST API ,
- Selanjutnya Rename REST1 menjadi GPS
- Selanjutnya pada GPS klik kanan dan pilih “Add REST API Method”
- Selanjutnya rename RESTAPIMethod1 menjadi Post, dan pada property HTTP Method ubah ke method POST,
- Selanjutnya kita define input body http Post yang kita buat diatas. Karena data yang akan kita kirimkan dari NodeMCU berbentuk JSON dengan format,
{
"DevideId" : "A1500001",
"Latitude" : -6.117664,
"Longitude" : 106.906349
}- Outsystems akan menerima JSON diatas dalam bentuk structure, untuk membuat structure JSON diatas pada Outsystems buka tab Data, scroll down sampe bagian Structures, klik kanan pada Structures pilih “Add Structures”,
- Rename Structure yang dibuat dari Structure1 menjadi GPS
- Setelah itu klik kanan pada Structure GPS, pilih “Add Structure Attribute”
- Tambahkan Attribute DeviceId dengan tipe data text, Laitude dengan tipe data Decimal, Longitude dengan tipe data Decimal,
- Setelah structure GPS berhasil dibuat, kita kembali ke tab Logic > REST, sekarang kita akan buat input parameter dengan cara klik kanan pada method Post, terus pilih dan klik “Add Input Parameter”,
- Set nama input parameter menjadi GPS, Set Data Type ke Structure GPS yang kita buat, dan set Receive In menjadi Body,
- Sekarang kita coba publish dengan klik button 1 click publish (button berwarna hijau)
- Setelah berhasil di-publish, klik kanan pada Exposed REST API GPS dan pilih “Open Documentation”
- Pada browser kita bisa lihat documentation Exposed REST API yang kita buat,
Membuat Entity di Outsystems
- Selanjutnya kita akan buat sebuah Entity (Table) untuk menampung data GPS secara presistent di database, klik tab Data, setelah itu klik kanan pada Entities, dan pilih “Add New Entity”
- Pada Entity yang barusan dibuat, rename menjadi GPSData, setelah itu expand entity GPSData dengan klik segitiga pada ujung entity tersebut,
- Tambahkan attribute yang sama seperti pada structure, attribute DeviceId dengan tipe data text, Laitude dengan tipe data Decimal, Longitude dengan tipe data Decimal,
- Selanjutnya kita kembali ke method Post yang kita buat pada Logic > Integration > REST > GPS, kita akan tambahkan action CreateGPSData dari entity GPSData, setelah itu klik action CreateGPSData pada flow logic Post method, pada property editor klik tanda + disamping label Source, selanjutnya masukan setiap input data (structure GPS) kedalam attribute entity GPSData seperti dibawah,
- Selanjutnya publish dengan klik “1click publish” button,
Nah, ditahap ini kita sudah dapat membuat API dan mengintegrasikanya dengan Entity untuk menyimpan data yang diterima API kedalam Database.
Membuat Screen UI di Outsystems
- Sekarang kita buka Tab Interface , lalu double click pada Main Flow,
- Selanjutnya tarik widget Screen pada Toolbox panel dan drop pada main editor,
- Setelah itu akan muncul popup dialog berisi opsi screen yang akan dibuat, pilih Blank dan beri nama Home,
- Selanjutnya kita akan drag and drop widget Map kedalam screen yang kita buat diatas, expand GoogleMapsMobileCustom > GoogleMaps> Map drop widget Map kedalam Screen Home,
- Tampilah Home setelah wdget Map ditambahkan,
- Pada bagian property editor masukan API Key Google Map yang kita miliki, Selanjutnya kita akan membuat Marker untuk ditampilakan pada Map yang data koordinatnya diambil dari Entity GPSData,
- Dan juga input CenterLatitude, CenterLongitude dan ZoomLevel, sebagai berikut (koordinat jakarta),
- Selanjutnya kita akan membuat sebuah Local Variable dengan tipe data MapMarker List. Klik kanan pada screen Home, pilih “Add Local Variable”
- Rename variable tersebut menjadi MapMarkers secara otomatis Outsystems mampu me-recognize tipe datanya menjadi MapMarker List karena adanya matching name dan plural ‘s
- Selanjutnya klik kanan pada Screen Home, pilih “Fetch Data From Database” yang akan menghasilkan sebuah object dengan nama Agreggate1
- Double click pada Aggregate1, lalu buka tab Data dan drag and drop entity GPSData kedalam main editor,
- Pada Agreggate editor klik tab Filter lalu pilih Add Sort
- Pilik Attribute ID lalu klik OK,
- Lalu Sort secara Descending pada Attribute ID,
- Kembali ke tab Interface > Main Flow > Screen Home , kita melihat Aggregate1 sudah berubah nama menjadi GetGPSData, klik agreggate GetGPSData , kemudian pada property editor set Max Record menjadi 1,
- Selanjutnya masih pada property editor GetGPSData, scroll kebawah kebagian event , klik pada dropdown pilih (New Client Action)
- Setelah itu akan terbentuk action baru dengan nama GetGPSDataOnAfterFetch , double click pada action tersebut, sehingga kita bisa mengakses flow logic action. Lalu drag and drop For Each block dari toolbox panel,
- Lalu tekan CTRL + F untuk membuka pencarian, masukan “list”, pada result yang dihasilkan drag and drop ListAppend kedalam flow logic screen action,
- Buat koneksi antar For Each dan ListAppend dengan cara menarik garis seperti berikut,
- Selanjutnya klik For Each arahkan ke List GetGPSData.List dan dilanjutkan dengan klik ListAppend pada field List klik MapMarkers dan pada field Element klik expand masukan Koordinat (Laitude, Longitude) dari List GetGPSData.List .
- Selanjutnya kita kembali ke tab Interface > Main Flow > Home lalu klik pada Map widget. Pada property editor cari field Markers dan arahkan local variabel MapMarkers kedalamnya,
- Selanjutnya publish dengan click “1 Click Publish” button, setelah itu klik preview button untuk melihat preview aplikasi di browser,
- Pada browser yang terbuka masukan username dan password , setelah login kita bisa melihat Map pada aplikasi yang kita buat diatas.
Setup NodeMCU
- Sekarang kita setup agar NodeMCU bisa mengirimkan data ke Outsystems API. pertama buka URL API POST yang kita buat di browser, untuk mendapatkan HTTPS Fingerprit/thumprint,
- Paste kedalam blok fingerprint pada NodeMCU, Pisahkan tiap dua character dengan spasi,
- Jangan lupa sesuaikan juga endpoint RESTAPI untuk Environment masing-masing ya.
- Setelah itu Verify & Upload kembali kedalam NodeMCU
- Pada Serial Monitor Arduino kita bisa lihat log HTTP POST NodeMCU,
- Di Preview browser sekarang kira bisa melihat posisi GPS NodeMCU pada Map,
Build APK
- Sekarang kita akan build APK dari project yang kita buat agar dapat di install di smartphone, Masuk ke Application Detail IOT GPS Tracker, setelah itu klik tab Native Platforms, lanjutkan dengan klik Generate Android App > Generate App
- Tunggu sampai proses selesai,
- Jika proses build selesai, maka akan ada QR code yang dapat kita scan dari handphone untuk mendownload APK,
Nah sekian untuk tutorial kali ini, Kita dari awal sudah berhasil merangkai dan memprogram NodeMCU untuk mengirimkan data ke Outsystems Cloud, Setelah itu kita juga sudah dapat membuat API, untuk menerima data yang dikirim NodeMCU dan Membuat Entity (Table) untuk menyimpan data secara presistent di database. Selain itu juga kita membuat Interface berupa map untuk menampilkan lokasi GPS Tracker menggunakan Plugin Google Maps yang kita download dari Forge.
Selanjutnya kita bisa menambahkan fitur lain kedalam aplikasi, misalkan Management Device, Management User, bahkan sampai menambahkan field data baru, misalkan NodeMCU selain mengirimkan data GPS juga dapat mengirimkan data Sensor.
Sekian, Terima Kasih
