Berita Anda: App Inventor | Berita dalam dan luar negeri Dengan Multi Bahasa

Home » Penelusuran App Inventor

Tab Host adalah salah satu widget UI (User Inteface) yang berfungsi untuk membuat beberapa menu dalam satu screen (activity). Misalkan, aplikasi streaming online pasti tab host berperan untuk menentukan menu berdasarkan genre film atau berdasarkan waktu rilis, popular, rating film, dan sebagainya.

Kali ini penulis akan memberikan tutorial cara memuat tab host dengan button menu di dalam Thunkable. Adapun membuat tab host ini tidak menggunakan extension tambahan sehingga kamu tidak perlu mencari extension tamabahan dari luar.

Penulis juga memberikan struktur penamaan variabel beserta isi value dari masing-masing pallete dan komponen. Apabila ditemukan tanda "", maka itu bersifat teks atau string.

Tampilan Struktur Penamaan Variabel

Langkah-Langkah :

1. Aktifkan web browser di komputer atau laptop anda.

2. Ketikkan thunkable.com pada address bar. Tunggu sampai halaman utama muncul.

3. Setelah itu, anda diminta login untuk memasuki akses project Thunkable. Klik Sign In. Ini melakukan login melalui Gmail Oauth dengan mengisi akun gmail anda. Tunggu beberapa saat sampai redirect ke homepage. Lihat gambar di bawah ini.

Tampilan Dashboard Thunkable.

4. Klik Create New App untuk membuat project baru. Kemudian, nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "tabhost1". Klik OK.

Tampilan Pembuatan Project Baru.

5. Masuki bagian Pallete, carilah widget Horizontal Scroll Arrange (untuk banyak menu button) atau Horizontal Arrangement untuk membuat menu button di dalam tab host. Klik tahan pada Horizontal Scroll Arrange atau Horizontal Arrangement lalu tarik ke layar Screen. Aturlah ukuran layout tersebut dengan width : 96 % dan height : fill parent. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.

Tampilan Pembuatan Layout Menu Tab Host.

6. Masuki bagian Pallete, carilah widget Horizontal Arrangement untuk membuat jarak spasi antara layout menu tab dengan layout isi tab. Klik tahan pada Horizontal Arrangement lalu tarik ke layar Screen. Aturlah ukuran layout tersebut dengan width : automatic dan height : 1%. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.

Tampilan Pembuatan Jarak Spasi.

7. Masuki bagian Pallete, carilah widget Vertical Arrangement untuk membuat layout untuk isi tab host. Klik tahan pada Vertical Arrangement lalu tarik ke layar Screen. Aturlah ukuran layout tersebut dengan width : 96% dan height : fill parent. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.

Tampilan Pembuatan Isi Tab Host.

8. Masuki bagian Pallete, carilah widget Label untuk menampilkan teks di dalam isi tab host. Klik tahan pada Horizontal Arrangement lalu tarik ke layar Screen. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.

Tampilan Penambahan Label ke dalam Isi Tab Host.

9. Membuat Teks untuk label yang ada di dalam isi tab host. Ini tujuan untuk menampilkan teks sekaligus pembeda antara 1 isi tab host dengan isi tab host yang lain. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.

Tampilan Pengubahan Teks Label untuk pembeda 4 Isi Tab Host.

10. Sembunyikan tampilan isi tab host di Screen dengan menghilangkan tanda ceklist opsi Visible.

Tampilan Penyembunyian pada Isi Tab Host.

Disini membutuhkan 4 isi tab host, maka kamu harus membuat 3 lagi layout isi tab dengan cara yang sama (Langkah 8 - 10).

11. Gantikan warna background pada Screen sesuai keinginan kamu, asalkan bisa menampilkan menu tab host dan isi tab tersebut.

Tampilan Penggantian Warna Backround pada Screen.

12. Masuki bagian Pallete, carilah widget Button untuk membuat tombol menu pada menu tab host. Klik tahan pada Button lalu tarik ke layar Screen. Kemudian isikan teks yakni "Tab Host 1". Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
Disini membutuhkan 4 button menu, maka maka kamu harus membuat 3 lagi button menu dengan cara yang sama (Langkah 11 - 12).

13. Aturlah warna background layout ment tab host dan isi tab host yang sesuai keinginan kamu.

Tampilan Penggantian Warna Background pada Layout Menu Tab Host dan Isi Tab Host.

14. Klik Blocks untuk memulai program blok. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.

15. Buatlah blok program untuk Screen1.Initialize(). Ini berguna untuk membuka aplikasi pertama kali yang memanggil isi tab host 1.

Tampilan Pembuatan Blok Program untuk membuka aplikasi.

16. Buatlah blok program untuk Button1.Click(). Ini berguna untuk memanggil isi tab host 1.

Tampilan Pembuatan Blok Program untuk memanggil isi tab host 1.

17. Buatlah blok program untuk Button2.Click(). Ini berguna untuk memanggil isi tab host 2.

Tampilan Pembuatan Blok Program untuk memanggil isi tab host 2.

18. Buatlah blok program untuk Button3.Click(). Ini berguna untuk memanggil isi tab host 3.

Tampilan Pembuatan Blok Program untuk memanggil isi tab host 3.

19. Buatlah blok program untuk Button4.Click(). Ini berguna untuk memanggil isi tab host 4.

Tampilan Pembuatan Blok Program untuk memanggil isi tab host 4.

20. Klik Export >>> App (save .apk to my computer) untuk mengkonversi ke aplikasi Android siap pakai (.apk) dan menyimpan ke dalam komputer. Tunggu beberapa waktu sampai aplikasi tersebut berhasil tersimpan di dalam komputer.

21. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.

22. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.

23. Pilihlah file aplikasi (.apk) website mobile yang anda unduh (download) tadi. Klik Open, tunggu beberapa saat sampai terinstal dan buka aplikasi tersebut di dalam emulator Android. Kamu bisa melihat tampilan tab host dengan menu button di dalam aplikasi tadi.

Aziz Blogger April 23, 2019 Admin Bandung Indonesia

Cara Membuat Tab Host (Button Menu) menggunakan Thunkable

Tab Host adalah salah satu widget UI (User Inteface) yang berfungsi untuk membuat beberapa menu dalam satu screen (activity). Misalkan, aplikasi streaming...

Tutorial Membuat Aplikasi Media Sosial Menggunakan WebView pada Thunkable #1

Kali ini, penulis akan membahas tentang project kecilan yakni membuat aplikasi website yang berisi situs media sosial seperti Facebook, Instagram, dan...

Blok Program Screen.initialize() di Thunkable

Kali ini, penulis membahas tentang kegunaan dari Blok Program Screen.initialize() pada pembuatan aplikasi Android dengan menggunakan tools Thunkable....

Waktu itu sangat penting bagi kehidupan manusia yang memasuki zaman teknologi saat ini. Dengan adanya waktu, kamu bisa mengetahui hal-hal kegiatan yang berhubungan dengan teknologi seperti bermain game, video call, berselancar internet, dan sebagainya secara pasti. Misalkan, kamu harus mematikan smartphone sebelum pukul 22.00 (10 malam) karena kamu harus istirahat dengan tidur.

Disini, penulis akan memberikan tutorial cara menampilkan current time dengan menggunakan Label di dalam Thunkable. Current time artinya waktu yang berjalan sekarang.

Langkah-Langkah :

1. Aktifkan web browser di komputer atau laptop anda.

2. Ketikkan thunkable.com pada address bar. Tunggu sampai halaman utama muncul.

Tampilan Dashboard Thunkable.

4. Klik Create New App untuk membuat project baru. Kemudian, nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "timenow1". Klik OK.

Tampilan Pembuatan Project APP.

5. Aturlah posisi tata letak vertikal menjadi center pada bagian Vertical Align.

Tampilan Pemilihan Tata Letak secara Vertikal.

6. Masuki bagian Pallete, carilah widget Label untuk menampilkan waktu dalam bentuk jam digital tersebut. Klik tahan pada Label lalu tarik ke layar Screen.

Tampilan Pembuatan Label.

7. Masuki bagian Pallete, carilah widget Clock untuk membuat dan mengatur format waktu. Klik tahan pada Clock lalu tarik ke layar Screen.

Tampilan Pembuatan Clock.

8. Klik Blocks untuk memulai program blok. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.

9. Klik Screen1 >>> Klik tahan pada blok Screen1.initialize() dan tarik blok tersebut ke block view.

Tampilan Pembuatan Blok Program Screen1.initialize()

10. Lepaskan tombol mouse pada blok tersebut. Ini berarti kamu berhasil membuat suatu event pada activity yang variabelnya Screen1.

Tampilan Hasil dari Blok Program Screen1.initialize().

11. Klik Label1 >>> Klik tahan pada blok Label1.setText() dan tarik blok tersebut ke dalam blok Screen1.initialize().

Tampilan Pembuatan untuk menampilkan Current Time.

12. Lepaskan tombol mouse pada blok tersebut. Ini berarti kamu telah membuat tampilan current time pada saat Screen1 tersebut sedang aktif baik itu saat membuka aplikasi maupun berpindah dari Screen yang lain.

Tampilan Hasil dari Blok Program Label1.setText().

13. Klik Clock1 >>> Klik tahan pada blok Clock1.FormatDateTime() dan tarik blok tersebut ke dalam blok Label1.setText().

Tampilan Pembuatan Blok Program Clock1.FormatDateTime().

14. Lepaskan tombol mouse pada blok tersebut. Ini berarti kamu telah memasukkan keterangan waktu ke dalam Label1 yang digunakan untuk menampilkan Current Time.

Tampilan Hasil Pembuatan Clock1.FormatDateTime().

15. Klik Clock1 >>> Klik tahan pada blok Clock1.Now() dan tarik blok tersebut ke dalam blok Clock1.FormatDateTime() bagian instant.

Tampilan Pembuatan Clock1.Now().

16. Lepaskan tombol mouse pada blok tersebut. Ini berarti kamu telah menetapkan Current Time untuk aplikasi tadi.

Tampilan Hasil dari Blok Program Clock1.Now().

17. Isikan format waktu dengan "hh:mm:ss a" pada bagian Clock1.FormatDateTime() bagian pattern.

Tampilan Perubahan Format Waktu yang terdapat di Clock1.

18. Klik Export >>> App (save .apk to my computer) untuk mengkonversi ke aplikasi Android siap pakai (.apk) dan menyimpan ke dalam komputer. Tunggu beberapa waktu sampai aplikasi tersebut berhasil tersimpan di dalam komputer.

19. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.

20. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.

21. Pilihlah file aplikasi (.apk) website mobile yang anda unduh (download) tadi. Klik Open, tunggu beberapa saat sampai terinstal dan buka aplikasi tersebut di dalam emulator Android. Kamu bisa melihat current time di dalam aplikasi tadi.

Tampilan Hasil Tampilan Current Time.

Catatan :
Sayangnya, current time ini tidak realtime, dalam artian current time tidak berjalan sendiri. Jadi, apabila kamu ingin melihat current time? Kamu harus menutupi aplikasi dulu, baru buka aplikasi lagi. Format waktu ini secara default menggunakan sistem 12 jam. Oleh karena itu, sangat disarankan menggunakan tipe format waktu yakni "hh:mm:ss a", agar kamu tidak salah melihat waktu. :D

Sekian... Terima kasih.

Aziz Blogger April 18, 2019 Admin Bandung Indonesia

Cara Menampilkan Current Time dengan Label pada Thunkable

Waktu itu sangat penting bagi kehidupan manusia yang memasuki zaman teknologi saat ini. Dengan adanya waktu, kamu bisa mengetahui hal-hal kegiatan yang...

Cara Mengganti Penamaan Variabel Objek di Thunkable

Variabel adalah suatu sistem nilai yang tidak memiliki nilai tetap sehingga di dalam nilai yang terdapat pada variabel dapat diisi dengan sesuai kebutuhan....

Pages 4 of 10 First Prev 2 345 6 Next Last