[Android] Membuat Apk Grafik di MIT App Inventor

 

Tidak terasa sudah 10 tahun lebih saya tidak mengutak-atik lagi aplikasi di HP android, terakhir kali saya membikin aplikasi berbasis adobe flash (disini) berupa animasi gerak wayang. Namun sesuai nasib saya yang terasa sangat sedih ketika codingan berbasis flash mulai diblokir dimana-mana, dan ketika saya ingin beralih ke IDE programming android lainnya saya merasa kewalahan mungkin karena otak yang payah atau karena PC saya yg selalu lemot me-run aplikasi emulator. 

Bahkan ketika saya mendapatkan proyek-proyek kontrol dan IOT yang memerlukan koneksi ke smartphone, biasanya saya banyak menggunakan IOT MQTT PANEL (baca disini) sebagai aplikasi siap pakai maupun software web2apk apabila platformnya berbasis web seperti node-red (baca disini). 

Namun suatu hari saya terpaksa menggunakan kembali aplikasi web pembuat aplikasi android MIT APP INVENTOR yang sebenarnya akun saya sudah tersedia sebelum jaman pandemi. Karena memang proyeknya mengharuskan menggunakan native android (web based menggunakan web2apk nya tidak memiliki fasilitas yg diperlukan), mau tidak mau saya harus membuat apk nya dengan belajar sendiri. 

Kali ini saya akan berbagi proses belajar saya dalam memahami berbagai contoh di internet untuk membuat sebuah aplikasi yang menampilkan grafik suhu dan kelembaban. Saya tidak akan membahas dari awal namun pada proses-proses pentingnya saja dan sampai pada ending emulator yang saya gunakan bernama MUMU player dapat menjalankan grafiknya dengan lancar.

- Bagian Designer

Komponen yang saya gunakan cukup sederhana, dimana screen nya saya center vertikal horizontal, kemudian saya tambahkan beberapa label teks untuk menampilkan tulisan. Yang terpenting adalah komponen chart yang didalamnya berisi grafik chartdata2D (line) yang akan menampilkan suhu. Sedangkan untuk kelembaban saya gunakan progress bar (indeterminate di hilangkan) sehingga dapat menunjukkan tingkat kelembaban. Pada bagian bawah saya isikan informasi waktu yang sebenarnya ingin saya gunakan untuk label axis x pada grafik, namun karena keterbatasan fasilitas maka tidak dapat menampilkan waktu pada sumbu x. Jangan lupa jika berhubungan dengan pewaktu maka butuh ditambahkan yang namanya komponen clock dan diseting sesuai interval yang di inginkan.

- Bagian Block

Untuk menjelaskan proses penyusunan blok sehingga menjadi urutan coding program, harap yang ingin mencoba diwajibkan sebelumnya sudah mengerti konsep coding. Jika tidak maka akan terbentur pada konsep variabel, loop, if else, input-output, dan banyak lagi. Jadi kali ini saya akan usahakan unutk menjelaskan satu persatu.

1. Variabel

Pada gambar diatas terlihat variabel yang saya gunakan seperti X untuk menyimpan nilai axis X kemudian yang lainnya sudah jelas fungsinya sebagai apa. Paling bawah terdapat 2 variabel yang berupa list/array, ini mirip seperti list dalam python dan akan berguna untuk memasukkan nilai grafik. isi dari list disini layaknya python akan berformat JSON. Jadi jangan sampai bingung ya..

2. LOOP

Block ini sangat penting sekali dalam menjalankan keseluruhan proses, dan pada aplikasi yang saya buat ini menggunakan trigger clock1 sebagai timer untuk melakukan proses berulang (when..do) sampai akhir saat aplikasi di tutup. Didalam loop utama ini bisa ditambahkan berbagai block yang sesuai dengan keinginan jalannya program.

3. SET

Lanjutan pada gambar diatas ada beberapa proses yang dinamakan "SET" yang artinya merubah isi dari variabel maupun properties lainnya seperti text dari sebual label/tulisan, warna dan macam-macam. Seperti contoh : Set variabel global waktu yang diubah menjadi call clock1.System Time yang artinya dimasukkan timestamp saat triger interval 1 detik terjadi.

4. MATH

Operasi matematikanya sangat jelas seperti contoh diatas dimana variabel x di increment 1 sedangkan suhu dan humi diberikan nilai random. Block lainnya yang berhubungan dengan operasi matematika dapat dipelajari di bagian kiri dari layar block dan memerlukan pembiasaan untuk dapat menggunakannya secara tepat.

5. TEXT

Block text disini sangat mirip dengan operasi teks pada python, sehingga bagi yang sudah mahir coding python akan sangat terbantu, tinggal menyesuaikan jenis block apa yang akan digunakan. Seperti pada gambar diatas Block set dari text pada label akan diisikan berupa penggabungan teks dari suhu, kelembaban dan waktu. Jangan takut integer/float dan text kan bertabrakan karena otomatis jika yg dimasukkan integer/float akan dirubah menjadi text.

6. LIST

Pada gambar diatas akan dilakukan proses penambahan JSON dari list bernama point1 yang akan berisikan pasangan X (increment) dan Y berupa nilai suhu random yang sudah diproses diatasnya.

7. IF THEN ..

Pada gambar diatas terdapat conditional statement yang akan menghitung length/panjang dari list bernama point1 dimana jika (IF) panjangnya melebihi 10 data  maka (THEN) isi list pada index no 1 akan dihapus. Ini bertujuan untuk menjaga grafik tidak menumpuk terus menerus.

8. GRAFIK

Gambar diatas sangatlah jelas menunjukkan bagaimana grafik2D bernama suhu akan di call.clear / dibersihkan terlebih dahulu sebelum dimasukkan data yang berupa list point1. Karena jumlah sebelumnya dari panjang list dibatasi 10 maka grafiknya akan cukup bagus terlihat.

9. LINEAR PROGRES

Untuk linear progres sebagai tampilan dari kelembaban, jangan lupa untuk terlebih dahulu hilangkan centang (pada designer) item indeterminate agar yang tampil adalah sesuai angka kelembaban. Saya juga menambahkan if then else untuk merubah properties warna sesuai dengan variabel random dari nilai humi.

10. AI COMPANION

Dan hasil compile apk nya kemudian saya tampilkan pada MUMU player menggunakan aplikasi AI Companion, sehingga saya tidak perlu repot menginstall ulang aplikasi di emulator jika terjadi kesalahan coding. Hasilnya seperti animasi dibawah berikut :

 

Pada tulisan selanjutnya akan saya coba menghubungkan aplikasi yang saya buat menggunakan MIT APP Inventor dengan ESP32 berbasis protokol MQTT (disini).

Read More

Praktisi Mengajar - 4 Season di Unesa Surabaya Dan Kini Hadir di Undiksha Singaraja

 

Perjalanan hidup sang penulis blog ini memang rada-rada mirip film korea, sketsa komedinya cukup banyak muncul di latar belakang cerita yg mellow menye-menye, begitu juga marah emosi ala oppa "issshhh sipaall", terlalu lebay mungkin bagi beberapa orang, tapi jangan salah ada juga  kisah ironi dan juga diwarnai cerita yg menunjukkan kegigihan hidup ala perang korea.

Terlintas ingatan anak umur 6 tahun di tahun 1986, saat itu Ellyas pical sang petinju legendaris baru saja menang melawan petinju korea jo do chun, waktu itu nontonnya di rumah paman yang kebetulan sedang "mlaspas" sanggah kemulan (tempat sembahyang). Saat itu sang pandita memercikkan air suci ke kepalaku dan seraya berkata " kamu mirip orang korea !" Mungkin omongan orang suci ini didengar oleh tuhan dan 20 tahun kemudian saya bekerja bersama orang korea dan hingga kini masih membekas sifat-sifat gigihnya ras kuning yang rada "kasar" menurut beberapa orang.

Nah kan, bener kata bapak ida pedande tahun 86 itu, saya mirip orang korea... Bangga bisa mejeng di depan jalanan kota suwon tahun 2008. Kisah ini merupakan insert coin pertama saya di kehidupan sampai akhirnya game over episode bersama sajangnim di 2013, mungkin terlihat prematur namun lumayan ada hikmahnya ketika harus di PHK dan menggunakan kesempatan insert coin ke-2 kalinya untuk re-spawn lagi di  game dengan map yang berbeda.

Duhh kalau inget coach indra safri dan evan dimas pasti terbayang momen mereka mengalahkan team u-19 korea di GBK tahun 2013 dan senin paginya saya menerima kenyataan pahit membuka amplop surat pemecatan di kantor. Ironi nya cuman hepi ketika nobar di warkop yang hanya berselang gak sampe 10 jam menjadi kesedihan yang menyayat hati...hikss hiksss

Kisah insert coin ke dua kalinya ini cukup berhasil karena membawa saya ke pengalaman menjadi pengusaha kecil yang cukup mendatangkan banyak ilmu-ilmu tak terduga. Mulai dari mengatur pajak, pengelolaan resource dan manajemen karyawan, penanganan konflik masyarakat dan banyak lagi selain paling utamanya adalah penghasilan yang dibilang stabil sampai bisa menggaji belasan karyawan di sebuah kantor yang cukup asri. Tapi pandemi membuat semuanya harus unplug the cord - power off dan terpaksa berdiam diri menunggu pandemi berakhir. Inilah momen Game Over ke-2 kalinya yang terpaksa dan harus menunggu momen yg tepat untuk insert coin yang ke-3 kalinya !

Kembali ke akar saya yang seorang engineer elektronika - mikrokontroler, inilah yang saya lakukan di era pandemi itu, kembali belajar hal-hal yang mungkin asing di telinga namun untungnya masih bisa nyambung di umur 40-an. Dan blog inilah tempat saya curahkan semua hal yang telah saya pelajari sembari mengobati kesepian karena tak ada lagi gurauan para karyawan di kantor yang harus saya tutup dan pindah ke lokasi yang lebih kecil. Momen ketika tutup inilah mengharuskan saya insert coin untuk ke-3 kalinya di 2021.

screenshot ketika jadi pengisi webinar nasional IOT ( baca disini)

Dan berhasil ! Insert coin ke tiga kalinya ini map nya berubah di lingkungan kampus Universitas Negeri Surabaya - Fakultas Vokasi - Prodi D4 Teknik Listrik. Program praktisi mengajar memang banyak membutuhkan praktisi dan saya sebagai orang yg "mengaku" praktisi yang yahh lumayan lahh, diundang oleh bapak Widi Ariwibowo selaku dosen Unesa untuk mencoba berpartisipasi. Walau akhirnya gagal di seleksi nasional praktisi mengajar namun tenaga saya masih dibutuhkan di kelas mikrokontroler. Lumayan lah kini otak saya disibukkan dengan ide-ide penelitian mengenai teknologi Kontrol-IOT-AI dan sel-sel otak saya, synapsisnya berhasil renew kembali. 

Kisah kegigihan ala series drama korea ini berlanjut ketika di tahun ke empat, saya diundang untuk mengajar di kelas kolaborasi sebagai praktisi, di kampus yg lokasinya tidak jauh dari rumah masa kecil saya di Universitas Pendidikan Ganesha Singaraja - Fakultas Teknik dan Kejuruan - Prodi Teknik Rekayasa Sistem Elektronika. Mungkin terlihat simple mengajar kuliah dasar anak semester 1 namun mimpinya sangat besar ingin berbagi ilmu elektro di masa yang akan datang, sehingga mahasiswa baru ini memiliki gambaran kedepannya akan menghadapi hal apa saja. Tidak seperti ketika saya kuliah dulu, teringat saat semester 3 saya merasa salah masuk jurusan, kenapa?  Karena kecewa harus menghadapi kuliah teknik elektro yang FULL MATEMATIKA ...Kapan nyoldernya ?  

Sebagai penutup tulisan, saya sertakan video mengajar saya yang mungkin akan membuat mengantuk (karena semi mendongeng) dan siapa tahu ada yang berani mengundang saya untuk mengajar di manapun, smk-sma-kampus, hayuk aja selama masih ada dalam koridor elektronika digital.

Read More