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

Tutorial ini adalah kesinambungan daripada >> MIT App Inventor Meneroka Dunia Reka Cipta Aplikasi Android Apps

Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakagkan warna merah.

>> apa lagi yang ditunggu ??? <<

Jom bina aplikasi telefon pintar pertama kita. Ianya semudah menyebut 1, 2 dan 3. 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 <<

Perisian MIT App Inventor adalah perisian yang menggunakan platform pelayar internet. Dengan erti kata lain, kita akan membuat aplikasi Android di Google Chrome (pelayar internet yang saya gunakan) dan apabila siap, kita akan muat turunnya ke telefon pintar kita. Buka pelayar internet Google Chrome dan buat carian MIT App Inventor 2 di kotak carian. Hasilnya adalah seperti di bawah. Pada hasil carian di bahagian bawah alamat laman sesawang ada menyebut tentang pelayar internet yang disokong oleh perisian ini. Jika anda bukan penggemar Google Chrome, anda boleh menggunakan Safari atau Firefox.

Klik hasil carian ai2.appinventor.mit.edu/ untuk meneruskan ke perisian App Inventor. Anda akan disuruh untuk memilih akaun Google yang ingin anda gunakan. MIT App Inventor menggunakan akaun Google bagi membuat ID atau menyediakan tempat projek di Google App Inventor Server. Tempat di alam maya ini yang dikhaskan kepada akaun Google kita akan dijadikan tempat simpanan hasil kerja atau projek aplikasi Android yang kita bina. Pilih akaun yang anda kehendaki atau wujudkan akaun Google jika anda masih tidak memiliki akaun Google.

>> Pautan my projects <<

Anda kini sudah memasuki platform MIT App Inventor iaitu platform yang membolehkan anda mereka cipta aplikasi Android anda. Pergi ke Projects, dan seterusnya klik My projects. Di sini adalah di mana kesemua aplikasi Android yang pernah anda bina akan disenaraikan. Jika anda pertama kali menggunakan App Inventor ini, anda akan melihat satu projek sahaja yang disenaraikan.

Keterujaan kian terasa, kita mulakan Start new project dan mula memberi nama pada projek aplikasi Android perama kita. Saya namakan aplikasi pertama saya sebagai Aplikasi_Pertama. Sepatutnya saya memberi nama yang lebih kedengaran hebat. Walauapapun, ia hanyalah nama, mari kita teruskan pembinaan aplikasi Android kita.

>> kotak palette dan kotak viewer <<

Di sinilah di mana kita akan membuat rekaan muka depan aplikasi android kita. Bahagian ini dipanggil App Inventor Designer. Kita akan cuba untuk mengenali tentang kotak Palette dan kotak Viewer. Ingat, tujuan bahagian App Inventor Designer ini adalah bertujuan untuk membuat reka bentuk muka depan aplikasi kita. Kotak Viewer adalah paparan telefon pintar kita, ianya kosong buat masa sekarang berlatar belakangkan warna putih sahaja. Kotak Palette pula adalah objek objek yang boleh kita gunakan untuk membuat rekaan muka depan aplikasi Android kita.

>> Kotak user interface <<

Untuk aplikasi Android pertama kita kali ini, kita hanya akan menggunakan User Interface yang berada dalam kotak Palette. Objek di dalam kotak User Interface yang akan kita gunakan adalah Label, TextBox dan Button.

  • Label adalah objek untuk membuat paparan teks.
  • TextBox adalah kotak untuk menerima input daripada pengguna aplikasi menerusi papan kekunci telefon Android pengguna.
  • Button adalah butang yang boleh digunakan oleh pengguna.

>> Objek label, textbox dan button <<

Masih ingat konsep tarik dan letak yang disebutkan dalam artikel sebelum ini. App Inventor menggunakan konsep tarik dan letak, tarik objek seperti Label, TextBox, Button dan letakkan objek ini ke bahagian Viewer. Anda juga boleh mengubah posisi objek objek di dalam Viewer dengan menggunakan konsep tarik dan letak.

>> Kotak components <<

Bagi memudahkan pembinaan aplikasi Android kita kelak, kita perlu memberi nama yang lebih bermakna kepada objek objek yang telah kita masukkan ke kotak Viewer.  Di kotak Components adalah senarai objek objek yang telah kita masukkan ke dalam kotak Viewer. Untuk menukarkan nama objek objek di dalam kotak Components, klik pada objek yang dikehendaki dan klik rename. Beri nama yang anda rasakan sesuai, bermakna dan mudah diingati anda kerana nama nama ini akan digunakan ketika menulis kod kelak. Saya sarankan, gunakan nama yang sama seperti gambar di bawah.

>> Kotak properties <<

Sekarang kita akan pergi lebih mendalam untuk menyesuaikan dan mencantikkan objek objek mengikut keperluan kita. Setiap objek mempunyai Properties yang tersendiri dan unik dengan objek yang lain. Klik pada objek yang hendak diubah Properties nya dan masukkan maklumat atau data seperti yang anda mahukan. Di bawah adalah rujukan Properties bagi mendapatkan Viewer seperti gambar di bawah. Kekalkan Properties yang lain pada yang asal selain yang dinyatakan dibawah.

Klik pada objek Label_Nama dan tetapkan Properties seperti di bawah :

  • Width >> Fill parent
  • Text >> Nyatakan Nama Saya
  • TextAlignment >> center : 1

Klik pada objek Text_Nama dan tetapkan Properties seperti di bawah :

  • Width >> Fill parent
  • Hint >> Masukkan Nama Saya

Klik pada objek Button_Hantar dan tetapkan Properties seperti di bawah :

  • Width >> Fill parent
  • Text >> Hantar

Klik pada objek Label_Status dan tetapkan Properties seperti di bawah :

  • Width >> Fill parent
  • Text >> (Kosongkan)
  • TextAlignment >> center : 1

>> App Inventor Block Editor <<

Seperti yang disebut sebelum ini, App Inventor pada asasnya terdiri daripada dua bahagian utama iaitu App Inventor Designer dan App Inventor Block EditorDesigner adalah tempat di mana anda mereka cipta bagaimana rupa muka depan aplikasi Android anda manakala Block Editor pula adalah di mana anda akan “menulis kod” secara visual dengan kaedah tarik dan letak blok bagi menentukan fungsi aplikasi Android anda. Sekarang anda sudah siap mereka cipta rupa hadapan aplikasi Android anda. Sekarang kita akan menulis kod pula dengan mengklik Blocks pada bahagian kanan atas MIT App Inventor.

>> Kotak blocks dan kotak viewer <<

Sekarang di mana keseronokkan sebenar bermula. Bagi yang tidak menyukai menulis kod Assembly, C, atau C++, kod visual yang berasaskan blok blok ini akan mengubah minat anda untuk menulis kod. Kod visual juga memberi jalan pintas atau mudah kepada bakal pembina aplikasi Android yang tidak mempunyai latar belakang menulis kod. Terdapat dua bahagian penting di Block Editor iaitu Blocks dan Viewer. Blocks adalah di mana kita dapatkan blok blok yang boleh kita gunakan. Setiap blok mempunyai fungsi yang unik yang akan membentuk fungsi aplikasi Android kita. Viewer pula adalah kod sebenar yang akan membentuk fungsi aplikasi Android anda.

>> Fungsi when.click <<

Pada kotak Blocks, klik objek Button_Hantar. Satu senarai fungsi yang boleh digunakan akan keluar, tarik fungsi seperti gambar di bawah ke kotak Viewer. Fungsi when.Click akan diaktifkan apabila butang Button_Hantar ditekan.

Setakat ini, kita telah melaksanakan keterangan aplikasi Android kita sehingga yang telah ditebalkan :

Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakangkan warna merah.”

>> fungsi if else <<

Seterusnya dengan mengklik objek Control, tarik fungsi if then seperti gambar di bawah ke kotak Viewer. Sedikit penambahan perlu dilakukan pada fungsi if then dengan menambah else. Fungsi if then akan dilaksanakan apabila kenyataan selepas if adalah betul dan seterusnya melaksanakan arahan then. Fungsi else akan dilaksanakan apabila kenyatan selepas if adalah salah.

Setakat ini, kita telah melaksanakan keterangan aplikasi Android kita sehingga yang telah ditebalkan :

Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakangkan warna merah.”

>> Fungsi compare text <<

Dari saat ini, saya andaikan anda sudah serasi dengan objek objek dan fungsi fungsi yang terdapat dalam Blocks. Lengkapkan kod visual di bawah dengan menarik fungsi yang bersesuaian ke bahagian Viewer. Fungsi compare texts boleh didapati pada objek text manakala data .Text boleh didapati pada objek Text_Nama. Kod di bawah akan membuat perbandingan teks yang dimasukkan oleh pengguna.

Setakat ini, kita telah melaksanakan keterangan aplikasi Android kita sehingga yang telah ditebalkan :

Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakangkan warna merah.”

>> fungsi set.backgroundcolor <<

Lengkapkan kod visual di bawah dengan menarik fungsi yang bersesuaian ke bahagian Viewer. Fungsi Set.BackgroundColor boleh didapati pada objek Screen1. Kod di bawah akan membuat warna latar belakang aplikasi berubah ketika melaksnakan kod selepas then dan ketika melaksanakan kod selepas else.

Setakat ini, kita telah melaksanakan keterangan aplikasi Android kita sehingga yang telah ditebalkan :

Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakangkan warna merah.

>> Mengeluarkan output teks pada label_status << 

Lengkapkan kod visual di bawah dengan menarik fungsi yang bersesuaian ke bahagian Viewer. Kali ini saya akan memberi masa untuk anda mencari fungsi kod di bawah daripada objek yang berkenaan. Kod di bawah akan menyiapkan bahagian terakhir aplikasi Android pertama kita dengan mengeluarkan output pada paparan telefon pintar kita.

Akhirnya, kita telah melaksanakan kesemua keterangan aplikasi Android kita :

“Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakangkan warna merah.”

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

Teruja? Saya pun teruja ketika pertama kali membuat aplikasi Android ini. Seterusnya, lakukan tiga langkah mudah seperti gambar di bawah. Langkah pertama adalah pastikan anda menggunakan sambungan WIFI, bukan menggunakan mobile data. Ini kerana aplikasi MIT AI2 Companion memerlukan data IP Address WIFI bagi memaparkan aplikasi Android kita secara langsung.

>> Komputer dan telefon pintar anda mesti dihubungkan pada sambungan WiFi yang sama <<

>> Tiada penggunaan Mobile Data atau Kabel LAN <<

Langkah kedua adalah muat turun aplikasi MIT AI2 Companion di Google Play Store dan pasangnya pada telefon pintar anda. MIT AI2 Companion membolehkan anda melihat aplikasi Android anda secara langsung atau dengan erti kata lain, anda mampu membuat perubahan di pelayar Google Chrome dan sekaligus melihat perubahannya secara langsung di telefon pintar. Langkah ketiga adalah scan QR code dan connect with code bagi mendapatkan paparan langsung aplikasi pertama anda.

>> Mendapatkan qr code <<

Semestinya untuk mengimbas QR code, anda memerlukan telefon Android yang mempunyai kamera. Klik pada Connect dan seterusnya AI Companion bagi menhasilkan QR Code yang diperlukan oleh aplikasi MIT AI2 Companion. Seterusnya menggunakan aplikasi MIT AI2 Companion, klik scan QR code untuk mengimbas QR code dan connect with code bagi mendapatkan paparan langsung aplikasi pertama anda.

Secara automatiknya selepas menekan connect with code, aplikasi Android pertama anda akan muncul di telefon pintar anda. Bagi tutorial kali ini, kita akan melihat aplikasi melalui MIT AI2 Companion sahaja tanpa memasang aplikasi sebenar ke telefon pintar kita. Bagi memasang aplikasi sebenar, kita perlu menghasilkan fail .apk yang mana kita akan lihat pada tutorial yang seterusnya kelak.

Keterangan Aplikasi :

“Aplikasi pertama kita adalah untuk membina aplikasi yang menerima input nama kita. Selepas menekan butang Hantar, aplikasi Android akan memproses input nama tersebut dan membandingkan dengan nama yang disimpan di dalam aplikasi Android. Jika perbandingan betul, anda akan disambut dengan Hello World berlatar belakangkan warna hijau. Jika perbandingan salah, anda akan dituduh penyamar berlatar belakagkan warna merah.”

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

TINGGALKAN JAWAPAN BALAS ANDA

Sila masukkan ulasan anda!
Sila masukkan nama anda di sini