Membuat Layout, Tombol Serta Screen Di APP Inventor

Membuat Layout, Tombol Serta Screen Di APP Inventor - Tutorial ini adalah tutorial lanjutan dari tulisan sebelumnya yang memanfaatkan APP Inventor untuk membuat aplikasi berbasis Android dengan mudah.

Dengan menggunakan APP Inventor kita bisa membuat aplikasi sederhana berbasis Android, bahkan bisa dimanfaatkan untuk membuat media pembelajaran. Namun bagi anda yang belum mengenal APP Inventor dan ingin memulai belajar, Belajar Membuat Aplikasi Android Sederhana Menggunakan APP Inventor

Pada artikel ini akan diuraikan cara menggunakan dan membuat Layout yang berfungsi sebagai fitur untuk membentuk/menyusun tampilan dari aplikasi android yang akan kita hasilkan. Dilanjutkan dengan menggunakan tombol (button) hingga menambah screen. Berikut ini tutorialnya :

Tutorial Membuat Layout, Tombol Serta Screen Di APP Inventor

1. Lakukan login ke aplikasi APP Inventor melalui alamat : http://ai2.appinventor.mit.edu

2. Klik menu Project - My Project

3. Pilih project yang akan digunakan. Dalam hal ini dipilih project yang digunakan pada artikel sebelumnya.

4. Tampak berikut ini tampilan dari project sebelumnya :

5. Pada bagian Pallete, pilih Layout kemudian pilih HorizontalArrangement dan drag ke bidang kerja di sebelah kanan

6. Tampak sebuah kotak berwarna abu-abu dengan garis hijau tampil di area kerja. Dan pada bagian components juga tampil HorizontalArrangement1

7. Klik HorizontalArrangement1 kemudian atur Properties sebagai berikut :

8. Masih aktif di HorizontalArrangement1, pada Pallete pilih User Interface dan drag Button ke dalam HorizontalArrangement1. Hasilnya sebagai berikut :

Tampak posisi Button1 berada dalam HorizontalArrangement1

9. Klik Button1 kemudian atur Properties - Text menjadi Klik Disini :

10. Klik menu Blocks yang berada di sisi kanan atas

11. Pada bagian Blocks klik Button1 kemudian pilih Viewer nya seperti berikut :

12. Klik Built-in pada Blocks kemudian pilih Control

13. Pada bagian Viewer pilih dan drag open another screen screenName

14. Masih di Built-in klik Text. Kemudian pilih dan drag block yang paling atas.

15. Pada block Text, diisi dengan Screen2. Perhatikan gambar berikut ini :

16. Selanjutnya pilih menu Add Screen dan akan tampil jendela pop-up New Screen

17. Persyaratan nama screen adalah tidak ada spasi. Dalam contoh ini nama screen tidak diubah, kemudian klik OK

18. Pastikan yang aktif saat ini adalah Screen2

19. Seperti langkah awal, dengan menggunakan Layout dan Label, tampilan Screen2 akan tampil sebagai berikut :

20. Install sebuah aplikasi yang bernama AI Companion di Smartphone Android anda melalui Google Play. AI Companion berfungsi untuk menjalankan/demo hasil aplikasi yang dibuat menggunakan APP Inventor sebelum dijadikan APK.

21. Klik Connect kemudian pilih AI Companion

Akan tampil jendela Pop-up sebuah kode seperti berikut :

22. Aktifkan AI Companion di smartphone android anda dengan koneksi internet aktif, kemudian scan Kode tersebut menggunakan scan QR code dilanjutkan dengan klik Connect with code

23. Jika tidak ada kesalahan, maka aplikasi yang kita buat pada artikel ini sudah bisa dicoba. Ketika anda klik pada tombol Klik Disini maka tampilan layar di smartphone akan berubah.

Demikianlah tutorial Membuat Layout, Tombol Serta Screen Di APP Inventor ini dibuat. Semoga mudah dipahami dan mudah dipraktikkan. Salam TIK.
Sumber https://www.duniatik.com/