Proses Pembuatan Aplikasi Android Menggunakan MIT APP INVENTOR V2 (Offline) Part 2

Mas Operator. Artikel kali ini merupakan lanjutan dari artikel sebelumnya "Proses Pembuatan Aplikasi Android Menggunakan MIT APP INVENTOR V2 (Offline) Part 2" dimana didalam artikel tersebut sudah dijelaskan mengenai cara untuk membuat project baru di dalam Aplikasi MIT APP INVENTOR V2.

Untuk contoh pembuatan aplikasi menggunakan MIT APP INVENTOR V2 ini merupakan pembuatan Aplikasi Profil Sekolah dimana isi dari aplikasi ini adalah seperti berikut ini :

1. Tampilan Splash Screen

2. Menu Utama yang berisi tombol-tombol untuk membuka halaman-halaman, diantaranya :

• Profil Sekolah
• Daftar PTK (Pendidik dan Tenaga Kependidikan)
• Kurikulu, dan
• Prestasi

Tahap 1 Pembuatan halaman Splash Screen

Halaman Splash Screen ini merupakan halaman/tampilan yang menampilkan nama dari pembuat (developer) dari sebuah aplikasi, biasa Sobat Blogger melihat halaman Splash Screen ini pada saat pertama kali membuka sebuah aplikasi berbasis Android, contohnya adalah Aplikasi Instagram, WhatApps, dan lain sebagainya. 

Pada artikel sebelumnya bahwa pada saat kita membuat project baru dengan mengklik tombol New Project maka secara otomatis akan muncul sebuah Screen baru, dan Screen tersebut akan secara otmatis bernama Screen1. Nah silahkan atur properti dari Screen1 ini yang akan kita jadikan menjadi halaman/tampilan Splash Screen,dan pengaturannya seperti berikut ini :

Ubah pada pilihan Align Horizontal dan Align Vertical menjadi Center, seperti yang ditampilkan gambar di atas.

Lanjut untuk mengubah Background dari Screen 1 ini, didalam contoh ini Saya akan memberikan sebuah background/gambar latar dengan sebuah gambar yang berformat *.png dengan ukuran 321 pixels x 421 pixel, dan cara untuk menyisipkan gambar background tersebut adalah dengan cara klik pada opsi BackgroundImage yang terdapat di deretan menu yang ada di Properties Screen1 tersebut, perhatikan gambar di bawah ini :

Klik pada opsi BackgorundImange, kemudian klik pada tombol Upload File, maka kita disuruh untuk menentukan lokasi dari gambar yang akan kita jadikan background atau latar dari Screen1 ini, silahkan klik tombol browse.

Silahkan tentukan lokasi dan gambar sesuai keinginan Sobat Blogger, jika sudah maka pada tampilan Designer Screen1 ini akan berubah seperti berikut ini :

Gambar di atas merupakan gambar latar/background yang sudah Saya sisikan ke dalam project. Untuk langkah selanjutnya adalah menentukan animasi pada saat Screen1/tampilan ini berpindah ke Screen berikutnya. Jika sobat Blogger menghendaki animasinya disesuaikan secara default, berarti Sobat Blogger tidak usah melakukan apa-apa pada opsi ini, namun jika Sobat Blogger ingin mengubahnya silahkan klik pada opsi teresbut, maka akan muncul beberapa animasi yang sudah disediakan didalam Aplikasi MIT APP INVENTOR V2 ini, dan pada contoh Saya memilih untuk mengubahnya menjadi Slide Horizontal seperti gambar di bawah ini :

Kemudian langkah selanjutnya adalah mengubah properties dari Screen Orientation, dan pada contoh Saya mengubahnya menjadi Portrait, maka akan seperti gambar di bawah ini :

Karena Saya menginginkan orientasi aplikasi antinya adalah portrait/bediri/vertikal.

Berikutnya geser ke bawah, dan hilangkan tanda centang pada opsi show status bar :

Tujuan dari kita menghilangkan tanda centang pada opsi Show Status Bar ini adalah agar pada saat aplikasi dibuka di Smat Phone maka tampilan dari aplikasi kita akan muncul secara full screen/ satu layar penuh, atau dengan kata lain tampilan dari baterai, sinyal, wifi, yang berada di atas layar Smart Phone tidak terlihat.

Lanjut ke langkah berikutnya, masih di menu Properties, sekaranf geser ke bawah lagi dan silahkan ganti teks yang tertulis pada opsi Screen Title yang tadinya bertuliskam Screen1 sekarang kita ubah menjadi Awal (bebas) :

Untuk title ini sebenarnya tidak wajib kita ubah atau tidak, yang pasti ini hanya sebagai acuan untuk kita saja dalam menghafal nama dari Screen. Berlanjut ke langkah berikutnya, geser ke bawah lagi kemudian silahkan hilangkan tanda centang pada opsi Title Visible :

 Untuk opsi title visible ini juga tidak wajib atau bisa diatur sesuai keinginan Sobat Blogger, ingin dimunculkan atau tidak. Jika opsi Title Visible ini kita centang, maka akan muncul nama Screen pada saat aplikasi ini dibuka menggunakan Smart Phone, contoh/gambarannya seperti gambar di bawah ini :

Dan untuk langkah selanjutnya silahkan tuliskan versi dari Aplikasi yang kita buat pada kolom/opsi version code dan versi version name, tapi karena ini merupakan aplikasi pertama yang kita buat, maka sebaiknya biarkan saja. Dan untuk menentukan nama aplikasinya sudah Saya bahas di dalam artikel Saya yang sebelumnya.

Kemudian disini Saya akan menyisipkan sebuah gambar logo kedalam Screen1 ini dan logo yang akan Saya masukkan adalah logo dari Mas Operator, untuk cara menyisipkan sebuah file gambar ke dalam Screen1 adalah sebagai berikut :

1. Klik Tab Menu User Interface yang terletak pada bilah menu Pallete  yang terletak di seblah kiri, kemudian tarik komponen Image kedalam Screen1 sehingga seperti gambar berikut ini :

Sebelum

Sesudah

Langkah berikutnya adalah agar logo/gambar yang akan kita sisipkan masuk kedalam komponen image tadi, silahkan klik pada properties Image, kemudian klik upload seperti pada saat kita akan menyisipkan gambar latar/background :

Klik browse, cari dan pilih logo yang kita inginkan, maka akan seperti gambar di bawah ini :

Kemudian kita atur tinggi dan lebar dari icon/logo tersbut dengan cara klik pada bilah menu Properties dari Image1 tadi, kemudian ubah pada opsi :

Height menjadi 220 Pixels dan Widht menjadi 250 Pixels seperti gambar di bawah ini :

Untuk ukurannya silahkan sesuaikan saja dengan keadaan (keingin Sobat Blogger). Yang pasti sesuikan agar ukuran gambar tidak terlalu besar maupun terlalu kecil.😁😁😁😁

Kira-kira seperti ini :

Untuk merancang/mendesain tampilan dari Splash Screen Saya rasa sudah cukup, dan untuk tahap selanjutnya adalah membuat agar berjalan sesuai dengan keingin kita, dan seperti yang sudah Saya jelaskan di atas, bahwa Splash Screen ini merupakan tampilan awal yang merupakan tampilan sederhana dimana disini akan muncul sebuah informasi mengenai pembuat/developer dari aplikasi. Tampilan Splash Screen ini akan secara otomatis menutup sendiri (berganti ke halaman/Screen berikutnya), dan agar fungsi dari Splash Screen ini berjalan seperti yang Saya makasudkan dibutuhkan sebuah Screen lagi, dimana Screen tersebut akan muncul setelah halaman/Splash Screen ini menutup. 

Untuk menambahkan Screen lagi klik pada tombol Add Screen yang terletak di atas, perhatikan gambar di bawah ini :

Berinama nama Screen2 (baru) menjadi Menu_Utama, sesuai dengan rancangan awal yang Saya buat, setelah tampilan Splash Screen akan muncul Halaman Menu Utama. Klik OK

Untuk sementara properties dari Screen kedua (Menu_Utama) kita abaikan. Silahkan kembali lagi ke Screen1 (Splash Screen). Oh iya, untuk Screen1 namanya tidak bisa ganti ya Sobat Blogger, hanya Screen setelah Screen1 yang bisa ganti namanya.

Untuk kembali ke Screen1 (Splash Screen) klik pada tombol navigasi yang ada samping kiri tombol Add Screen kemudian pilih/klik pada Screen1 seperti berikut ini :

Kemudian di Screen1 kita sisipkan sebuah komponen yakni Clock yang letaknya di deret tab menu Sensors pada bilah menu Pallete, perhatikan berikut ini :

Caranya sama seperti pada saat kita menyisipkan komponen Image, klik dan tarik komponen Clock ke dalam halaman./lembar kerja Screen1. maka secara otomatis komponen Clock akan ada di bawah
halaman Screen1 tadi.
 

 Sekarang atur properti dari komponen clock, dan silahkan atur seperti gambar di bawah ini :

Biarkan tanda centang yang ada di opsi Timer Always Fires dan Timer Enabled, kemudian masukkan nilai 3000 pada opsi Timer Interval.

Langkah berikutnya adalah klik pada tombol Blocks.

Halaman Blocks ini merupakan layaknya halaman VBA pada Ms. Excel, jadi pada halaman ini kita akan memberikan sebuah/beberapa perintah seperti layaknya script Macro pada Ms. Excel, hanya disini akan berbentuk Block

Klik pada komponen CLock, kemudian cari dan tarik Block When Clock1 Timer Do kedalam lembar kerja Block Screen1 seperti gambar di atas, dan hasilnya akan seperti gambar di bawah ini :

Selanjutnya adalah klik tab opsi Control yang ada dideret opsi Bult-in, kemudian tarik block Open Another ScreenName dan tempelkan ke block When Clock 1 Timer do tadi:

Hasilnya akan seperti berikut ini :

Berikutnya adalah klik pada opsi Text yang berada di bilah menu Bulit-in, kemudian cari dan tarik block yang paling atas dan tempelkan di block Open Another Screen ScreenName tadi :

Maka hasilnya akan seperti berikut ini :

Kemudian tuliskan "Halaman_Utama" tanpa tanda petik didalam block (text) yang baru kita tarik/sisipkan tadi : sehingga seperti berikut ini :

Untuk penulisan mohon untuk sama persis seperti nama Screen yang akan menjadi tampilan setelah halaman/Screen1 tertutup.

Nah, dengan demikian proses pembuatan Splash Screen sudah selesai, sekarang kita simpan terlebih dahulu project kita dengan cara klik pada tombol Project kemudian klik pada opsi Save Project :

Kemudian untuk melihat/mengecek apakah hasil dari pekerjaan kita sudah sesuai atau belum silahkan klik pada tombol Connect, kemudian klik lagi pada opsi Emulator :

Inilah salah satu keistimewaan menggunakan Aplikasi MIT APP INVENTOR ini, sudah tersedia emulator yang bisa kita manfaatkan untuk mereview dari project yang kita buat. Tunggu hingga proses selesai dan lihat apakah nantinya pada saat awal aplikasi dibuka akan muncul Splash Screen kemudian akan berganti ke halaman/Screen berikutnya (Menu_Utama). Jika berhasil maka akan muncul seperti yang Saya rencanakan pada project ini, dan berikut ini merupakan tampilan dari emulator MIT APP INVENTOR V2 ini :

Untuk pembahasan "Proses Pembuatan Aplikasi Android Menggunakan MIT APP INVENTOR V2 (Offline) Part 2" cukup sampai disini dulu, dan untuk proses pembuatan menu lainnya akan Saya lanjutnkan pada artikel berikutnya. Mudah-mudahan apa yang sudah Saya sampaikan pada artikel kali ini bisa dipahami oleh Sobat Blogger semua, dan menjadi manfaat untuk kita, sekian terimakasih dan Salam Mas Operator!!!

Share :