Cara Menerapkan Beberapa Button saling Berdampingan secara Horizontal di dalam Thunkable
Pada sebelumnya, penulis telah membahas tentang teori penerapan beberapa button secara berdampingan baik itu secara vertikal maupun horizontal. Penerapan...
Home » Penelusuran Tutorial
Pada sebelumnya, penulis telah membahas tentang teori penerapan beberapa button secara berdampingan baik itu secara vertikal maupun horizontal. Penerapan ini sangat berpengaruh dalam merancang tampilan beberapa object di dalam screen pada aplikasi Android. Baiklah, penulis akan memberikan tutorial cara menerapkan beberapa button saling berdampingan secara horizontal di dalam Thunkable. Penerapan ini biasanya membuat suatu kegiatan yang berkaitan dengan menu tab atau menu float.
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.
4. Klik Create New App untuk membuat project baru. Kemudian, nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "buttonberdampingan1". Klik OK.
 |
| Tampilan Dashboard Thunkable. |
 |
| Tampilan Pembuatan Project App. |
 |
| Tampilan Pembuatan Layout Horizontal untuk Penerapan Beberapa Button saling Berdampingan. |
 |
| Tampilan Ukuran Width pada Layout Horizontal. |
 |
| Tampilan Pembuatan Beberapa Button ke dalam Layout Horizontal. |
 |
| Tampilan Setelah Memilih warna Background pada masing-masing Button. |
10. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
11. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.
12. Kamu bisa melihat hasil penerapan beberapa button yang saling berdampingan secara horizontal pada emulator atau smartphone Android kamu.
 |
| Tampilan Hasil Akhir. |
Sekian.. Terima kasih..
Aziz Blogger April 30, 2019 Admin Bandung Indonesia
Location Sensor adalah salah satu pallete yang terdapat bagian Sensor yang dimana berperan untuk mendeteksi suatu titik lokasi pada smartphone melalui satelit yang dikenal dengan GPS (Global Positioning System) yang merupakan suatu sistem teknologi yang akan membantu posisi keberadaan diri kita. Jadi, adanya GPS, maka kita bisa dideteksi titik lokasi dan posisi kamu yang berada dengan smartphone.
Kali ini, penulis akan memberikan tutorial cara menggunakan Location Sensor yang terdapat pada Pallerte bagian Sensors di dalam Thunkable.
Aziz Blogger
April 24, 2019
Admin
Bandung IndonesiaKali ini, penulis akan memberikan tutorial cara menggunakan Location Sensor yang terdapat pada Pallerte bagian Sensors di dalam Thunkable.
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.
4. Klik Create New App untuk membuat project baru. Kemudian, nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "locationsensor1". Klik OK.
5. Masuki bagian Pallete, carilah widget Label untuk menampilkan titik lokasi berdasarkan garis bujur. Klik tahan pada Label lalu tarik ke layar Screen.
Setelah, buatlah 2 label untuk menampilkan titik lokasi yang berdasarkan garis lintang dan alamat dengan cara yang sama.
6. Aturlah isi teks pada masing-masing label sebagai berikut ini.
Label1 = "Garis Bujur : ".
Label2 = "Garis Lintang : "
Label3 = "Alamat : "
7. Masuki bagian Sensors, carilah Location Sensor untuk mendeteksi titik lokasi melalui satelit atau GPS. Klik tahan pada Location Sensor lalu tarik ke layar Screen.
8. Klik kiri tahan mouse pada blok program Location_Sensor1.LocationChanged(). Ini berguna untuk mendeteksi titik lokasi kamu pada saat membuka aplikasi.
9. Geserkan blok program tersebut ke Blocks view.
10. Klik tahan mouse pada blok program Label1.setText(). Ini berguna untuk menampilkan titik lokasi berdasarkan garis bujur.
11. Geserkan blok program tersebut ke dalam blok program Location_Sensor1.LocationChanged(). (maaf, tidak ada gambar).
12. Klik kiri tahan mouse pada blok program join yang terdapat pada built-in bagian text. Ini berguna untuk menggabungkan beberapa kata khusus garis bujur.
13. Geserkan blok program tersebut ke dalam Label1.setText().
14. Klik kiri tahan mouse pada blok program teks kosong.
15. Geserkan blok prgram teks kosong tersebut ke dalam blok diagram join text yang pertama pada Label1.setText(). Kemudian, teks kosong tersebut diisikan dengan "Garis Bujur : ".
16. Kenakan kursor mouse pada bagian longitude sampai muncul dua pilihan. Pilihlah blok program getLongitude(). Ini berguna untuk memperoleh titik lokasi garis bujur berdasarkan GPS.
17. Geserkan blok prgram getLongtude() tersebut ke dalam blok diagram join text yang kedua pada Label1.setText(). (maaf, tidak ada gambar)
18. Klik kiri tahan mouse pada blok program Label2.setText(). Ini berguna untuk menampilkan titik lokasi berdasarkan garis lintang.
19. Geserkan blok program tersebut ke dalam blok program Location_Sensor1.LocationChanged().
20. Klik kiri tahan mouse pada blok program join yang terdapat pada built-in bagian text. Ini berguna untuk menggabungkan beberapa kata khusus garis lintang.
21. Geserkan blok program tersebut ke dalam Label2.setText().
22. Klik kiri tahan mouse pada blok program teks kosong.
23. Geserkan blok prgram teks kosong tersebut ke dalam blok diagram join text yang pertama pada Label2.setText(). Kemudian, teks kosong tersebut diisikan dengan "Garis Lintang : ".
24. Kenakan kursor mouse pada bagian latitude sampai muncul dua pilihan. Pilihlah blok program getLatitude(). Ini berguna untuk memperoleh titik lokasi garis lintang berdasarkan GPS.
25. Geserkan blok prgram getLongtude() tersebut ke dalam blok diagram join text yang kedua pada Label2.setText().
26. Klik kiri tahan mouse pada blok program Label3.setText(). Ini berguna untuk menampilkan titik lokasi berdasarkan alamat.
27. Geserkan blok program tersebut ke dalam blok program Location_Sensor1.LocationChanged().
28. Klik kiri tahan mouse pada blok program join yang terdapat pada built-in bagian text. Ini berguna untuk menggabungkan beberapa kata khusus alamat.
29. Geserkan blok program tersebut ke dalam Label3.setText().
30. Klik kiri tahan mouse pada blok program teks kosong.
31. Geserkan blok prgram teks kosong tersebut ke dalam blok diagram join text yang pertama pada Label3.setText(). Kemudian, teks kosong tersebut diisikan dengan "Lokasi : ".
32. Klik kiri tahan mouse pada blok program Location1_Sensor1.getCurrentAddress(). Ini berguna untuk memperoleh informasi alamat melalui GPS pada saat ini (sekarang).
33. Geserkan blok program tersebut tersebut ke dalam blok diagram join text yang kedua pada Label3.setText().
34. 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.
35. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
36. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.
37. Apabila setelah aplikasi APK dipasang (di-install) tidak otomatis terbuka, maka harus hidupkan GPS di smartphone Android kamu. Apabila aplikasi APK otomatis terbuka setelah dipasang (di-install), maka kamu harus tutup aplikasi terlebih dahulu dengan catatan, kondisi GPS di smartphone kamu itu tidak aktif (nonaktif). Lihat hasilnya.
Sekian. Terima kasih...
 |
| 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 "locationsensor1". Klik OK.
 |
| Tampilan Pembuatan Project Baru. |
 |
| Tampilan Pembuatan Label untuk Deteksi Titik Lokasi. |
6. Aturlah isi teks pada masing-masing label sebagai berikut ini.
Label1 = "Garis Bujur : ".
Label2 = "Garis Lintang : "
Label3 = "Alamat : "
 |
| Tampilan Pengubahan Teks pada masing-masing Label. |
7. Masuki bagian Sensors, carilah Location Sensor untuk mendeteksi titik lokasi melalui satelit atau GPS. Klik tahan pada Location Sensor lalu tarik ke layar Screen.
8. Klik kiri tahan mouse pada blok program Location_Sensor1.LocationChanged(). Ini berguna untuk mendeteksi titik lokasi kamu pada saat membuka aplikasi.
 |
| Tampilan Pembuatan Deteksi Titik Lokasi. |
 |
| Tampilan setelah dibuat Blok Program Location_Sensor1.LocationChanged(). |
10. Klik tahan mouse pada blok program Label1.setText(). Ini berguna untuk menampilkan titik lokasi berdasarkan garis bujur.
 |
| Tampilan Pembuatan titik lokasi Garis Bujur. |
12. Klik kiri tahan mouse pada blok program join yang terdapat pada built-in bagian text. Ini berguna untuk menggabungkan beberapa kata khusus garis bujur.
 |
| Tampilan Pembuatan Perubahan Titik Lokasi berdasarkan Garis Bujur. |
 |
| Tampilan Setelah Blok Program Join ditambahkan ke dalam Label1.setText(). |
 |
| Tampilan penambahan blok program teks kosong ke dalam Label1. |
 |
| Tampilan Memasukkan teks kosong ke dalam Blok Program Join Text yang pertama di Label1. |
 |
| Tampilan dalam Pembuatan Deteksi titik lokasi pakai garis bujur. |
17. Geserkan blok prgram getLongtude() tersebut ke dalam blok diagram join text yang kedua pada Label1.setText(). (maaf, tidak ada gambar)
18. Klik kiri tahan mouse pada blok program Label2.setText(). Ini berguna untuk menampilkan titik lokasi berdasarkan garis lintang.
 |
| Tampilan Pembuatan titik lokasi Garis Lintang. |
 |
| Tampilan hasil pembuatan label untuk menampilkan titik garis berdasarkan Garis Lintang. |
20. Klik kiri tahan mouse pada blok program join yang terdapat pada built-in bagian text. Ini berguna untuk menggabungkan beberapa kata khusus garis lintang.
 |
| Tampilan Pembuatan Perubahan Titik Lokasi berdasarkan Garis Lintang. |
 |
| Tampilan Setelah Blok Program Join ditambahkan ke dalam Label2.setText(). |
22. Klik kiri tahan mouse pada blok program teks kosong.
 |
| Tampilan penambahan blok program teks kosong ke dalam Label2. |
 |
| Tampilan Memasukkan teks kosong ke dalam Blok Program Join Text yang pertama di Label2. |
24. Kenakan kursor mouse pada bagian latitude sampai muncul dua pilihan. Pilihlah blok program getLatitude(). Ini berguna untuk memperoleh titik lokasi garis lintang berdasarkan GPS.
 |
| Tampilan dalam Pembuatan Deteksi titik lokasi pakai garis lintang. |
 |
| Tampilan hasil pembuatan Deteksi titik lokasi pakai garis lintang. |
26. Klik kiri tahan mouse pada blok program Label3.setText(). Ini berguna untuk menampilkan titik lokasi berdasarkan alamat.
 |
| Tampilan Pembuatan titik lokasi Alamat. |
27. Geserkan blok program tersebut ke dalam blok program Location_Sensor1.LocationChanged().
 |
| Tampilan hasil pembuatan label untuk menampilkan titik garis berdasarkan Alamat. |
 |
| Tampilan Pembuatan Perubahan Titik Lokasi berdasarkan Alamat. |
29. Geserkan blok program tersebut ke dalam Label3.setText().
 |
| Tampilan Setelah Blok Program Join ditambahkan ke dalam Label3.setText(). |
 |
| Tampilan penambahan blok program teks kosong ke dalam Label3. |
 |
| Tampilan hasil blok program untuk menampilkan informasi alamat. |
 |
| Tampilan penambahan blok program Loaction_Sensor1.getCurrentAddress(). |
33. Geserkan blok program tersebut tersebut ke dalam blok diagram join text yang kedua pada Label3.setText().
 |
| Tampilan hasil pendeteksian titik lokasi informasi alamat. |
35. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
36. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.
37. Apabila setelah aplikasi APK dipasang (di-install) tidak otomatis terbuka, maka harus hidupkan GPS di smartphone Android kamu. Apabila aplikasi APK otomatis terbuka setelah dipasang (di-install), maka kamu harus tutup aplikasi terlebih dahulu dengan catatan, kondisi GPS di smartphone kamu itu tidak aktif (nonaktif). Lihat hasilnya.
 |
| Tampilan Hasil Location Sensor. |
Sekian. Terima kasih...
Cara Menggunakan Komponen Location Sensor di Thunkable
Location Sensor adalah salah satu pallete yang terdapat bagian Sensor yang dimana berperan untuk mendeteksi suatu titik lokasi pada smartphone melalui...
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.
Langkah-Langkah : |
| Tampilan Struktur Penamaan Variabel |
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.
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.
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.
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.
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.
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.
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.
10. Sembunyikan tampilan isi tab host di Screen dengan menghilangkan tanda ceklist opsi Visible.
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.
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.
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.
16. Buatlah blok program untuk Button1.Click(). Ini berguna untuk memanggil isi tab host 1.
17. Buatlah blok program untuk Button2.Click(). Ini berguna untuk memanggil isi tab host 2.
18. Buatlah blok program untuk Button3.Click(). Ini berguna untuk memanggil isi tab host 3.
19. Buatlah blok program untuk Button4.Click(). Ini berguna 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 |
| Tampilan Dashboard Thunkable. |
 |
| Tampilan Pembuatan Project Baru. |
 |
| Tampilan Pembuatan Layout Menu Tab Host. |
 |
| Tampilan Pembuatan Jarak Spasi. |
 |
| Tampilan Pembuatan Isi Tab Host. |
 |
| Tampilan Penambahan Label ke dalam Isi Tab Host. |
 |
| Tampilan Pengubahan Teks Label untuk pembeda 4 Isi Tab Host. |
 |
| Tampilan Penyembunyian pada Isi Tab Host. |
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. |
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. |
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. |
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 1. |
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 2. |
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 3. |
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 4. |
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.
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...
