Pertama upload beberapa gambar (Disini ane cari di google gambarnya) sebagian untuk sebagai display awalnya atau yang biasa kita sebut welcome screen atau splash screen.Lalu sebagian lagi untuk gambar katalognya.



Lalu buat beberapa screen baru (klik add screen) sebagai halaman baru untuk memunculkan katalognya (di pemrograman desktop biasa kita sebut form). saya menamakannya sesuai dengan nama negara-negaranya. Disebelah kanan screen terdapat properties untuk mengatur tampilan dari screen tersebut.



Setelah itu drag drop satu button dan dua label pada pallete di group basic ke viewer di screen1, lalu pada button edit properties dengan memasukan gambar logo pada properties image, hapus text button-nya. pada label, sesuaikan tulisannya dengan yang kita inginkan. Sehingga jadi seperti ini



Pada screen lainnya (sebagai contoh screen italy) kita bisa memasukan webviewer dari pallete agar konten dari screen tersebut dapat mengambil konten dari internet (kontennya sendiri saya masukan dari wikipedia). Klik component-nya lalu masukan url sumber konten yang akan ditampilkan tersebut di properties. jangan lupa untuk memberi title pada properties screen, beri nama yang sesuai.



lakukan hal yang sama pada screen negara yang lainnya. kecuali pada screen MainMenu terdapat perbedaan.

pada screen MainMenu, gunakan screenArrangement sesuaikan dengan kebutuhan lalu masukan beberapa button pada screenArrangement tersebut. ubah kembali button-button tersebut seperti pada screen1 (masukan image pada tiap button, lalu hapus textnya).



lalu hal berikutnya yang harus dilakukan adalah memberi alur perintah di block editor. buka block editor pada kanan atas App Inventor. nanti akan ada aplikasi yang langsung di- download dan di-running oleh java. Block editor ini adalah program terpisah tapi terintegrasi dengan App Inventor. buka screen1 pada App Inventor di browser, maka block editor akan membuka block editor untuk screen1.

pada block editor screen1, buka tab My Block lalu nanti akan terbuka component apasaja yang ada pada
screen1 yang kita buat tadi. pilih button lalu button.click (ini adalah event ketika button tersebut di klik oleh user), drag drop pada editornya. lalu pada tab built-in group control cari "call open another screen". drag drop lalu tempelkan pada event button.click (seperti puzzle). masih pada tab built- in, pada group text cari text "text" lalu drag drop pada "call open another screen" lalu pada text-nya isikan nama screen yang akan kita buka apabila user klik button tersebut (disini saya MainMenu). sehingga bila user klik button tersebut, maka keluar screen MainMenu. Sehingga puzzle yang tadi kita buat menjadi seperti ini



Apabila kita ingin mencoba hasil dari block editor, klik new emulator, tunggu sampai emulator android keluar, lalu connect to device dan pilih device emulator yang sedang jalan. tetapi kita tidak bisa mencoba keseluruhan eventnya seperti pindah screen, tapi hal tersebut bisa kita lakukan dengan membuat package dari aplikasi yang kita buat lalu menjalankannya pada emulator dari AVD manager.

Pada App Inventor di browser, buka screen MainMenu, sehingga block editor berganti jadi block editor
MainMenu. lakukan alur perintah ganti screen seperti pada screen1. Lakukan untuk semua screen yang tersisa sebagai katalog.



Jadi, alur program yang kita buat adalah Splash screen (screen1) > screen main menu (pilih salah satu keajaiban dunia) > screen katalog yang menampilkan konten dari webviewer wikipedia.

selesai membuat aplikasinya, kita harus mencobanya. kembali pada App Inventor di browser, pada kanan atas terdapat "package for phone", klik lalu pilih "download to this computer" untuk kita mencobanya pada emulator android AVD manager. setelah selesai download, install hasilnya pada emulator (bagi yang belum tahu, cara
install-nya bisa dilihat Disini). Lalu jalankan aplikasinya pada emulator android AVD manager.

setelah dijalankan, hasilnya sebagai berikut.



demikian aplikasi android sederhana sudah kita buat, semoga bermanfaat