Cara Membuat Aplikasi Android dengan App Inventor

Assalamualaikum Wr. Wb. kali ini saya akan coba share tentang langkah-langkah membuat aplikasi android. Tutorial ini membahas tentang aplikasi Physics V.1.0. Kalo mau download ebook tutorial lengkapnya klik disini.
Download  ebook bagus untuk referensi develop android apps.. disini.

Rancangan tampilan aplikasi Physics v.1.0 ini, terdapat total 9 screen. Pada background dan gambar-gambar yang menunjang untuk setiap screen, pengembang menggunakan software Corel Draw X4, agar tampilan terlihat menarik. Berikut gambaran dan penjelasan tiap screen aplikasi Physics v.1.0.

Tampilan screen 1

Pada tampilan screen 1, berfungsi sebagai prolog pada aplikasi. Di sini, pengembang menampilkan wajah tokoh fisikawan Issac Newton, karena beliau fisikawan yang ahli dalam bidang mekanika.

Tampilan screen 2

Pada tampilan screen 2, berfungsi sebagai menu utama dalam aplikasi ini. Terdapat empat tombol, yaitu, Learn, Quiz, About, dan Exit.

Tampilan screen 3

Pada tampilan screen 3, menampilkan menu Learn yang didalamnya menjelaskan tentang materi gerak lurus secara umum. Serta terdapat tombol Next yang berfungsi untuk berpindah ke screen berikutnya.

Tampilan screen 4

Pada tampilan screen 4, masih melanjutkan menu Learn yang didalamnya menjelaskan tentang materi gerak lurus beraturan (GLB). Serta terdapat tombol Next yang berfungsi untuk berpindah ke screen berikutnya.

Tampilan screen 5

Pada tampilan screen 5, masih melanjutkan menu Learn yang didalamnya menjelaskan tentang materi gerak lurus berubah beraturan (GLBB). Serta terdapat tombol Next yang berfungsi untuk berpindah ke screen berikutnya.

Tampilan screen 6

Pada tampilan screen 6, masih melanjutkan materi GLBB yang didalamnya menjelaskan tentang rumus gerak lurus berubah beraturan (GLBB). Serta terdapat tombol Back to Home yang berfungsi untuk berpindah ke menu utama.

Tampilan screen 7

Pada tampilan screen 7, menampilkan menu Quiz yang didalamnya berisi soal-soal latihan fisika tentang gerak lurus. Serta terdapat tombol Correction yang berfungsi untuk mengoreksi jawaban dari pengguna aplikasi, dan tombol Next yang berfungsi untuk berpindah ke soal berikutnya.

Tampilan screen 8

Pada tampilan screen 8, masih melanjutkan menu Quiz untuk soal yang kedua. Serta terdapat tombol Correction yang berfungsi untuk mengoreksi jawaban dari pengguna aplikasi, dan tombol Back to Home yang berfungsi untuk berpindah ke menu utama.

Tampilan screen 9

Pada tampilan screen 9, menampilkan menu About yang didalamnya berisi penjelesan singkat tentang developer dari aplikasi Physics v.1.0 ini.

Perancangan Struktur Block

Untuk membangun sebuah aplikasi di App Inventor dibutuhkan koding-koding yang berbentuk block agar aplikasi bisa berjalan atau berfungsi sesuai dengan rancangan. Berikut ini adalah rancangan struktur blok algoritma Block Editor App Inventor menyediakan berbagai macam fungsi yang bisa digunakan sesuai dengan kebutuhan user, misalnya untuk menyimpan data, user cukup menggunakan fungsi variable dengan fungsi list yang bisa digunakan untuk menyimpan data-data, seperti data soal, data jawaban, data gambar, data suara. Berikut gambaran dan penjelasan untuk tiap Block Editor pada aplikasi Physics v.1.0.

Tampilan Block editor pada screen 1

Pada tampilan Block editor, menampilkan Block-Block yang didalamnya berisi koding untuk menjalankan aplikasi ini. Di dalam Block editor ini terdapat dua Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul dan Block button enter click berfungsi untuk menjalankan tombol pada screen 1

Tampilan Block editor pada screen 2

Pada tampilan Block editor ini terdapat lima Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul. Kedua Block button learn click berfungsi untuk menjalankan tombol agar berpindah screen ke menu Learn. Ketiga Block button quiz click berfungsi untuk menjalankan tombol agar berpindah screen ke menu Quiz. Keempat Block button about click berfungsi untuk menjalankan tombol agar berpindah screen ke menu about. Kelima Block button exit click berfungsi untuk menjalankan tombol agar keluar dari aplikasi ini.

Tampilan Block editor pada screen 3

Pada tampilan Block editor di menu Learn ini terdapat dua Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul dan Block button next click berfungsi untuk menjalankan tombol yang terdapat pada screen 3.

Tampilan Block editor pada screen 4

Pada tampilan Block editor di menu Learn untuk materi gerak lurus beraturan ini terdapat dua Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul dan Block button next click berfungsi untuk menjalankan tombol yang terdapat pada screen 4

Tampilan Block editor pada screen 5

Pada tampilan Block editor di menu Learn untuk materi gerak lurus berubah beraturan ini terdapat dua Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul dan Block button next click berfungsi untuk menjalankan tombol yang terdapat pada screen 5.

Tampilan Block editor pada screen 6

Pada tampilan Block editor untuk lanjutan materi gerak lurus berubah beraturan ini terdapat dua Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul dan Block button back to home click berfungsi untuk menjalankan tombol yang terdapat pada screen 6.

Tampilan Block editor pada screen 7

Pada tampilan Block editor ini terdapat tujuh Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul. Kedua Block Question List berfungsi sebagai database pertanyaan. Ketiga Block Answer List berfungsi sebagai database jawaban. Keempat Block Picture List berfungsi sebagai database soal. Kelima Block Current Question Index berfungsi sebagai penanda urutan nomer soal. Keenam Block button correction click berfungsi untuk menjalankan tombol agar menyesuaikan jawaban dengan label jawaban benar salah. Ketujuh Block button next click berfungsi untuk menjalankan tombol agar berpindah ke soal berikutnya di screen ke 8.

Tampilan Block editor pada screen 8

Pada tampilan Block editor ini terdapat tujuh Block utama seperti pada Block editor sebelumnya. Perbedaannya hanya terletak pada Block button next click yang berubah menjadi Block button back to home click berfungsi untuk menjalankan tombol yang terdapat pada screen 8 agar kembali ke screen menu utama

Tampilan Block editor pada screen 9

Pada tampilan Block editor di menu About ini terdapat dua Block utama yaitu Block screen initialize yaitu yang berfungsi untuk menjalankan pada saat screen ini muncul dan Block button back to home click berfungsi untuk menjalankan tombol yang terdapat pada screen 9 agar kembali ke menu utama.

Implementasi

Implementasi merupakan tahapan setelah melakukan perancangan sistem pada siklus rekayasa perangkat lunak, dimana aplikasi siap dioperasikan pada keadaan yang sebenarnya, sehingga dari sini akan diketahui apakah program atau aplikasi yang telah dibuat benar-benar dapat mengahasilkan output yang sesuai dengan tujuan yang diinginkan. Implementasi dan pembahasan perancangan aplikasi mobile learning ini menggunakan emulator App Inventor dan handphone Samsung Galaxy Young GT S5360. Berikut adalah tampilan implementasi Physics v.1.0

Tampilan implemantasi dengan menggunakan emulator

Demikian, semoga bermanfaat ...

Tweet