Untuk membuat aplikasi Android yang mampu mengambil data suhu dan kelembapan sensor DHT11 yang disimpan di dalam server ThingSpeak, prosesnya tidak lari seperti pembinaan aplikasi pertama kita di mana kita perlu mereka cipta muka depan aplikasi serta menulis kod untuk memberi fungsi kepada aplikasi kita. Tanpa kod, muka depan aplikasi kita ibarat hanya satu lukisan yang tidak mempunyai apa apa fungsi. – Pengenalan –

Oleh Nadim dalam Tutorial MIT App Inventor
Tahap Kesukaran : Baru Mula Belajar

Kami persembahkan bacaan di laman NADI Eleczone Solutions ini kepada para pelajar, mahasiswa dan peminat teknologi, demi kepentingan perkembangan ilmu teknologi ilmiah dan amaliah di Malaysia tercinta kita.
Semoga diberkahi dan diredhai Allah Subhanahu wa Ta’ala – Amin!

Tutorial ini adalah kesinambungan daripada >> IoT ESP32 ThingSpeak Menghantar Data Suhu Dan Kelembapan Ke Server

Aplikasi Android yang akan kita bina sebentar lagi melalui MIT App Inventor berfungsi untuk mengambil data suhu dan kelembapan sensor DHT11 yang disimpan di dalam server ThingSpeak.

Jika anda belum melakukan tutorial App Inventor Jom Bina Aplikasi Telefon Pintar Pertama Anda lagi, anda perlu melakukan tutorial tersebut terlebih dahulu bagi membolehkan anda mengenali apa itu MIT App Inventor.

>> Sudah lakukan tutorial yang disarankan di atas ??? <<

Jika sudah, jom kita bina aplikasi Android melalui MIT App Inventor berfungsi untuk mengambil data suhu dan kelembapan sensor DHT11 yang disimpan di dalam server ThingSpeak.

Langkah pertama adalah mereka cipta muka hadapan aplikasi telefon pintar kita. Langkah kedua adalah dengan menulis kod secara visual bagi memberi fungsi pada aplikasi Android kita. Langkah ketiga adalah langkah yang paling mengujakan iaitu melihat ianya beraksi seperti yang kita mahukan.

>> Perisian MIT App Inventor <<

Pastikan anda sudah membuat tutorial App Inventor Jom Bina Aplikasi Telefon Pintar Pertama Anda, ini kerana kebanyakkan langkah langkah asas telah disebutkan di dalam tutorial tersebut dan tidak akan diulang sebut di dalam tutorial ini.

Untuk membuat aplikasi Android yang mampu mengambil data suhu dan kelembapan sensor DHT11 yang disimpan di dalam server ThingSpeak, prosesnya tidak lari seperti pembinaan aplikasi pertama kita di mana kita perlu mereka cipta muka depan aplikasi serta menulis kod untuk memberi fungsi kepada aplikasi kita. Tanpa kod, muka depan aplikasi kita ibarat hanya satu lukisan yang tidak mempunyai apa apa fungsi.

>> KOTAK BLOCKS – mereka cipta muka depan aplikasi android <<

Pada pembinaan aplikasi pertama kita sebelum ini di App Inventor Designer, kita hanya menggunakan kota User Interface. Kali ini kita akan bermain dengan lebih banyak kotak iaitu kotak Layout dan kotak Connectivity.

Objek di dalam kotak Layout membolehkan kita menyusun objek User Interface dengan lebih kelihatan menarik. Objek di dalam kotak Connectivty pula membolehkan kita menggunakan fungsi seperti Bluetooth yang biasanya berkait rapat dengan pembangunan aplikasi yang memerlukan sambungan komunikasi Bluetooth dilakukan. Kita tidak akan menyentuh tentang component Bluetooth di dalam penulisan ini.

Manakala objek Web pula membolehkan kita membuat akses ke Internet yang berkait rapat dengan aplikasi IoT (Internet of Things) yang mana bakal kita sentuh sebentar lagi.

Kita juga akan bermain dengan salah satu component di dalam kotak Sensors iaitu component Clock. Fungsi component clock di dalam aplikasi Android yang akan kita bina adalah untuk menjaga masa sekaligus membolehkan data diambil dari server ThingSpeak mengikut kadar masa tetap yang berulang.

Ikon Dan Nama Aplikasi Android

Perkara pertama yang perlu dilakukan dalam mereka cipta aplikasi Android adalah memikirkan tentang Ikon dan Nama untuk aplikasi Android kita. Untuk penulisan kali ini saya memilih gambar di atas sebagai ikon aplikasi Android dan MyDHT sebagai nama aplikasi Android.

Untuk mengubah nama dan ikon aplikasi Android, klik pada component Screen dan ubah pada Properties AppName dan Icon. Untuk Ikon, semestinya anda perlu mendapatkan atau mencari gambar yang anda rasakan sesuai untuk dijadikan Ikon aplikasi Android anda.

Selain itu, ada satu lagi tetapan yang perlu anda tetapkan pada component Screen iaitu pastikan Sizing ditetapkan kepada Responsive.

Lakaran Muka Depan Aplikasi MyDHT

Sekarang aplikasi Android kita sudah ada nama, jadi jom kita teruskan dengan lakaran muka depan aplikasi Android kita. Di bawah adalah rujukan kotak Viewer dan kotak Components yang telah siap dilakar. Menggunakan pengalaman anda semasa proses pembinaan aplikasi pertama sebelum ini, siapkan muka depan aplikasi MyDHT di bawah. Jika anda tidak mampu membuat rekaan sama seperti gambar di bawah, jangan risau, lakukan sehampir mungkin asalkan konsepnya tidak lari terlalu jauh.

Tip : Width untuk component HorizontalArrangement1 dan HorizontalArrangement2 perlu ditetapkan kepada 100 percent bagi memudahkan anda meletakkan component Layout lain di dalamnya.

Kosmetik Muka Depan Aplikasi Navigasi Robot

Kemudian kita akan meneruskan dengan sedikit kosmetik muka depan aplikasi MyDHT kita. Di bawah adalah rujukan kotak Viewer dan kotak Components yang telah siap dipercantikkan. Menggunakan pengalaman anda semasa proses pembinaan aplikasi pertama sebelum ini, percantikkan muka depan aplikasi MyDHT yang telah anda lakarkan. Jika anda tidak mampu membuat rekaan sama seperti gambar di bawah, jangan risau, lakukan sehampir mungkin asalkan konsepnya tidak lari terlalu jauh.

Seterusnya kita akan memasukkan tiga Non-visible components iaitu satu component clock dan dua component web. Ini boleh dilakukan melalui drag & drop component tersebut daripada kotak kotak sensors dan connectivity ke dalam paparan telefon yang terdapat di MIT App Inventor. Hasilnya adalah seperti gambar di bawah.

>> kotak viewer – Menetapkan Fungsi Aplikasi MYDHT <<

Masa yang ditunggu sudah pun tiba. Kini kita akan memberi nyawa atau fungsi kepada muka hadapan aplikasi kita. Untuk menulis kod, kita akan beralih kepada App Inventor Blocks Designer. Menggunakan pengalaman anda semasa proses pembinaan aplikasi pertama sebelum ini, siapkan kod di bawah. Kod di bawah saya pecahkan kepada beberapa bahagian bagi memudahkan pemahaman anda. Tulis semua kod di bawah di dalam satu App Inventor Blocks Designer.

Kod untuk menghidupkan penjaga masa dan membuat penetapan bagi membolehkan data diambil daripada Server ThingSpeak.

Kod yang akan memastikan data diambil dari server ThingSpeak mengikut kadar masa tetap yang berulang.

Kod untuk memaparkan data yang diambil dari server ThingSpeak pada aplikasi MyDHT.

Akhir sekali, pastikan App Inventor Blocks Editor tidak menunjukkan apa apa kesalahan manakala amaran masih lagi boleh diterima bagi kebanyakkan kes. Tetapi khusus untuk kod di atas, amaran dan error adalah sifar atau tiada.

>> Jom lihat aplikasi MYDHT di telefon pintar anda <<

Teruja? Saya pun teruja dan tidak sabar untuk melihat aplikasi Android dipasang di telefon pintar saya. Jadi mari kita lakukan beberapa langkah mudah untuk memasang aplikasi MyDHT di telefon pintar.

Langkah pertama adalah muat turun aplikasi MIT AI2 Companion di Google Play Store dan pasangnya pada telefon pintar anda. Kita akan menggunakan butang scan QR code yang terdapat pada aplikasi MIT AI2 Companion ini.

Langkah seterusnya adalah Scan QR code, dapatkan QR code dari MIT App Inventor dan Scan QR code menggunakan aplikasi MIT AI2 Companion.

Ikuti langkah pemasangan sehingga anda berjaya memasang MyDHT pada telefon pintar anda seperti gambar di bawah.

Nota: Setelah anda menekan pilihan App (provide QR code for .apk), proses Build akan dilaksankan. Proses Build memakan sedikit masa, tunggu sehingga ianya selesai. Selesai proses Build, MIT App Inventor akan menghasilkan QR Code. Scan QR code menggunakan aplikasi MIT AI2 Companion. Setelah selesai proses memuat turun fail .apk, jalankan proses pemasangan fail .apk di telefon pintar anda.

Pastikan papan Wemos Lolin32 ESP32 anda dalam keadaan dihidupkan bagi membolehkannya menghantar data terkini ke server ThingSpeak. Buka aplikasi MyDHT anda dan ianya akan mula mengambil dan memaparkan data semasa yang terdapat di server ThingSpeak.

>> JUMPA LAGI DI TUTORIAL YANG Seterusnya TIDAK LAMA LAGI <<

Kunjungi sekarang kedai Reka Bentuk Teknologi Pulau Pinang di

Nadi Eleczone Solutions
Lot 1667, Tingkat 1, Jalan Teluk Air Tawar, Taman Air Tawar Indah, 13050 Butterworth, Penang
04 – 351 1802

TINGGALKAN JAWAPAN BALAS ANDA

Sila masukkan ulasan anda!
Sila masukkan nama anda di sini