Tutorial membuat aplikasi android dengan app inventor 2 lengkap

Halo kawan-kawan pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat aplikasi android dengan App Inventor 2. Bagi yang belum tahu apa itu MIT App Inventor 2 ini, App inventor adalah situs web yang memberikan layanan gratis kepada kita untuk membuat aplikasi android dengan cara yang mudah.

Mengapa mudah karena dalam proses pembuatan aplikasi android di MIT App Inventor ini kita hanya melakukan drag and drop saja baik pada saat pembuatan desain interface/tampilan ataupun saat pembuatan dibagian kode program.

Walaupun gratisan App inventor juga mendukung untuk pembuatan aplikasi game berbasis android, dan juga banyak aplikasi yang dibuat dari App inventor ini sudah masuk ke playstore google. Jadi jangan menganggap remeh dengan MIT App Inventor.

Membuat Aplikasi Android Dengan App Inventor 2
Membuat Aplikasi Android Dengan App Inventor 2

Bagi pemula yang ingin belajar membuat aplikasi android tidak perlu khawatir dan kaget bagaimana proses koding untuk membuat aplikasi di MIT App Inventor.

Karena dalam pembuatan aplikasi tidak diperlukan skill atau kemampuan koding program karena bahasa pemograman pada MIT App Inventor ini berbasis visual blok prorgamming yang dalam penyusunan programnya seperti menyusun puzzel.

Baiklah tanpa basa-basi lagi berikut adalah

Cara membuat aplikasi android dengan App Inventor 2

Login terlebih dahulu

Pertama-tama kamu dapat mengunjungi websitenya secara langsung atau dengan mencari di google dengan pencarian App Invetor. Kemudian klik dan masuk ke halaman utamanya.

Setelah masuk klik tombol yang bertuliskan “create apps!” untuk masuk kedalam project membuat aplikasinya, setelah itu kamu akan diminta login atau daftar. Saya menyarankan untuk masuk dengan menggunakan email google saja supaya lebih cepat.

setelah login dengan akun google bagi pengguna baru akan muncul popup tentang kebijakan layanan kamu bisa langsung klik “I Accept” setelah itu akan muncul popup selamat datang dari App Inventor klik “don’t show again” kemudian klik “continue”.

setelah itu akan muncul popup lagi disini akan memberikan pilihan kepada kita jika ingin melihat tutorial dari app inventor bisa klik tutorialnya atau bisa juga klik “close” untuk lanjut ke pembuatan projek aplikasi yang baru.

Buat projek baru

kemudian klik “start new project”di pojok kiri atas untuk membuat projek baru, lalu masukan nama projeknya dan klik ok. Secara otomatis kita akan langsung masuk ke halaman utama untuk membuat apllikasi androidnya. Tampilannya akan seperti ini

Tampilan utama membuat aplikasi android di App Inventor
Tampilan utama membuat aplikasi android di App Inventor

Desain aplikasi

Gambar diatas merupakan tampilan design, dimana sebelum kamu membuat kode program kamu akan diarahkan secara otomatis untuk membuat design tampilan pada aplikasinya terlebih dahulu, kemudian setelah itu langsung membuat kode blok programnya di halaman “bloks”.

pada tutorial kali ini saya akan membuat aplikasi sederhana text to speech, dimana nanti aplikasi akan membacakan tulisan apa saja yang ada dilayar aplikasi.

Pada gambar diatas bagian sebelah kiri “palette” merupakan tempat untuk mencari komponen yang akan digunakan dalam membuat aplikasi, atau bisa juga kita memilih komponen yang akan digunakan secara langsung dengan lihat di daftar komponen yang ada pada “User Interface” letaknya ada di bagian kiri samping display layar smartphone.

untuk membuat aplikasi text to speech maka komponen yang diperlukan adalah TextBox, Button, dan komponen media TextToSpeech.

Pertama cari komponen TextBox di bagian “User Interface” sebelah kiri pojok kemudian klik komponen TextBox lalu drag ke arah layar smartphone, untuk komponen button juga sama ada di bagian “User Interface” setelah ketemu komponen buttonya klik dan drag ke arah layar smartphone.

Selanjutnya untuk menemukan komponen TextToSpeech scroll kebawah masih di pojok bagian kiri klik “Media” kemudian klik komponen TextToSpeech dan drag ke arah layar smartphone.

kemudian susun komponennya seperti ini

merubah text pada komponen button
merubah text pada komponen button

kemudian selanjutnya yaitu merubah teks pada komponen button. Tentunya kamu tidak ingin kan saat aplikasi selesai di build tulisan pada tombol masih bertuliskan “Text for Button1”. Tenang saja kamu bisa merubah tulisan pada button dengan cara seperti gambar diatas.

Pertama klik komponen button pada layar smartphone kemudian ke pojok kanan cari tulisan Text lalu rubah tulisannya degan kata yang kamu sukai. Disini saya merubahnya dengan tulisan “Dengar”.

Pembuatan kode program

setelah mendesain tampilan aplikasi dan juga telah memasukkan komponen yang diperlukan. Kamu bisa langsung masuk kehalaman “bloks” untuk memulai program aplikasinya. Kamu bisa klik “bloks” pada bagan pojok kanan atas tepat dibawah tulisan email kamu.

setelah masuk kehalaman “bloks” buatlah kode programnya seperti ini

kode program aplikasi
kode program aplikasi

bagaimana cara membuatnya?

sama seperti saat membuat desain sebelumnya, untuk mencari fungsi program pada setiap komponen kamu bisa klik komponennya di sebelah kiri kemudian pillih fungsi program yang akan kamu gunakan.

cara membuat program dan mecari fungsi program di setiap komponen App Inventor
cara membuat program dan mecari fungsi program di setiap komponen App Inventor

pertama cari fungsi program “when Button1 click” pada komponen Button1, kemudian drag and drop ke layar projek.

Selanjutnya untuk “call TexToSpeech1 Speak message” kamu dapat mencarinya fungsi programnya di komponen TextToSpeech kemudian drag and drop dan untuk fungsi program “TextBox1 Text” dapat ditemukan di komponen TextBox1.

kemudian susunlah kode blok program tersebut seperti pada gambar “kode program aplikasi”.

Adapun penjelasan pada program tersebut adalah “when Button1 click” artinya ketika button1 di klik maka lakukan apa, selanjutnya “call TextToSpeech1 Speak message” artinya panggil fungsi program TextToSpeech untuk membaca kalimat, kemudian untuk “TextBox1 Text” yaitu untuk mendapatkan kalimat yang dituliskan pada TextBox.

Build aplikasi

Selanjutnya adalah build aplikasi, dengan cara klik “Build” pada menu bar paling atas, kemudian pilih “save apk to my computer” untuk menyimpan aplikasi dalam bentuk format apk.

Apabila ingin melakukan testing pada aplikasi tanpa harus mendownloadnya kamu bisa pilih “provide QR code for apk” untuk scan barcode dengan syarat pada smartphone kamu harus terinstall App Inventor Companion, atau jika ingin menguji aplikasi dengan emulator ataupun testing live via usb bisa klik “connect”

build aplikasi
build aplikasi

Bagaimana cukup mudah bukan?? kode programnya juga simpel dan tidak rumit, seperti menyusun puzzel pelajari dengan sabar kamu pasti bisa!!

Adapun Totorial lainnya yaitu CRUD App Inventor dan Kodular

jika ada yang ingin ditanyakan kamu bisa memberikan komentar adapun masukkan yang dapat membuat postingan ini menjadi lebih baik silahkan komentar di bawah ini!

3 comments

Leave a Reply

Your email address will not be published. Required fields are marked *