Pertama-tama kamu dapat mengunjungi websitenya secara langsung atau dengan mencari di google dengan pencarian App Invetor. Kemudian klik dan masuk ke halaman utamanya.
Login terlebih dahulu
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
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
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
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.
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”
Tidak ada komentar:
Posting Komentar