Tutorial Membuat Aplikasi Musik Sederhana #1 dengan Thunkable
Musik adalah salah satu media seni yang berasal dari suara yang berfungsi dalam berbagai kegiatan dalam kehidupan manusia. Baik itu dari segi ekonomi,...
Home » Penelusuran Tutorial
Musik adalah salah satu media seni yang berasal dari suara yang berfungsi dalam berbagai kegiatan dalam kehidupan manusia. Baik itu dari segi ekonomi, kesehatan, kebudayaan, sosial, keagamaan, adat-istiadat, dan sebagainya.
Disini, penulis akan memberikan tutorial cara mengetik atau memasukkan teks karakter, angka, dan simbol dengan menggunakan komponen Player 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 "musicapp1". Klik OK.
5. Masuki bagian Pallete, carilah widget Button untuk tombol memutar musik tersebut Klik tahan pada Button lalu tarik ke layar Screen. Lakukan sekali lagi untuk tombol berhenti musik dengan cara yang sama.
6. Aturlah nama teks pada 2 button tersebut pada bagian Properties. Button1 itu diberi nama "Play", dan Button2 itu diberi nama "Stop".
7. Klik Upload file pada bagian Media. Kemudian klik select file...
8. Pilihlah file yang support musik / lagu. Klik Open.
9. Setelah muncul nama file di tampilan popup Upload File. Klik OK.
10. Masuki bagian Media, carilah komponen Player untuk memutarkan musik tersebut. Klik tahan pada Player lalu tarik ke layar Screen.
11. Pilihlah file musik yang telah dimasukkan ke dalam Media pada opsi Source yang terdapat bagian Properties. Klik OK.
12. Aturlah suara volume sesuai keinginan kamu.
 |
| Tampilan Dashboard Thunkable. |
 |
| Tampilan Pembuatan Project App. |
 |
| Tampilan Pembuatan 2 buah Button. |
 |
| Tampilan Pemberian Nama Teks pada Button. |
 |
| Tampilan Tempat Pemilihan File Musik. |
 |
| Tampilan Proses Pemilihan File Musik. |
 |
| Tampilan Setelah Pemilihan File Musik. |
 |
| Tampilan Penambahan Komponen Player. |
 |
| Tampilan Pemilihan File Musik sebagai Source. |
 |
| Tampilan Pengaturan Kapasitas Volume. |
13. Klik Blocks untuk memulai program blok. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.
14. Klik Button1 >>> Klik tahan pada blok Button1.Click() dan tarik blok tersebut ke block view.
 |
| Tampilan Pemilihan Blok Program Button1.Click(). |
15. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik button.
16. Klik Player >>> Klik tahan pada blok Player1.Start() dan tarik blok tersebut ke dalam blok Button1.Click().
 |
| Tampilan Pembuatan Pemutaran Musik. |
17. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik button.
 |
| Tampilan Hasil Pembuatan Pemutaran Musik. |
18. Klik Button2 >>> Klik tahan pada blok Button2.Click() dan tarik blok tersebut ke block view.
 |
| Tampilan Pemilihan Blok Program Button2.Click(). |
19. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik button.
20. Klik Player >>> Klik tahan pada blok Player1.Stop() dan tarik blok tersebut ke dalam blok Button2.Click().
 |
| Tampilan Pembuatan Penghentian Musik. |
21. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik button.
 |
| Tampilan Hasil Pembuatan Penghentian Musik. |
22. 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.
23. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
24. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.
25. 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. Silahkan dicoba aplikasi musik ya... :D
Sekian.. Terima kasih..
Konfirmasi adalah suatu sebuah informasi yang disampaikan kepada pengguna aplikasi untuk menentukan keputusan secara final terhadap aplikasi tersebut. Pada saat sebelum kamu menutupi aplikasi tersebut, pasti muncul tampilan pop-up yang berisi konfirmasi penutupan aplikasi. Terkadang, kamu awalnya menutupi aplikasi tersebut, tetapi tidak jadi dilakukan karena ada keperluan yang bersifat mendesak dan penting.
Aziz Blogger
March 20, 2019
Admin
Bandung IndonesiaDisini, saya akan memberikan tutorial cara membuat konfirmasi untuk penutupan 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 "confirmcloseapp". Klik OK.
 |
| Tampilan Dashboard Thunkable |
 |
| Tampilan Pembuatan Project App. |
5. Tunggu beberapa saat sampai tampilan dashboard pada project tersebut itu muncul. Masuki bagian Pallete, carilah widget Label untuk membuat atau menampilkan teks di screen (layar) smartphone Android. Klik tahan pada Label lalu tarik ke layar Screen.
6. Klik Screen1 pada bagian Components. Aturlah tata letak vertikal menjadi center.
7. Klik Label1 pada bagian Components. Ketikkan teks tersebut pada kolom Text yang terdapat di Properties.
8. Masuki bagian Pallete, carilah widget Notifier untuk membuat atau menampilkan teks dalam bentuk pop-up di screen (layar) smartphone Android. Klik tahan pada Notifier lalu tarik ke layar Screen.
9. Klik Blocks untuk memulai program blok. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.
10. Klik Screen1 >>> Klik tahan pada blok Screen1.BackPressed() dan tarik blok tersebut ke block view.
11. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik back pada device smartphone.
 |
| Tampilan Penambahan Label. |
 |
| Tampilan Mengatur Tata Letak Screen secara Vertikal. |
 |
| Tampilan Pengisian Teks pada Label. |
 |
| Tampilan Penambahan Notifier. |
10. Klik Screen1 >>> Klik tahan pada blok Screen1.BackPressed() dan tarik blok tersebut ke block view.
 |
| Tampilan Blok Program Screen1.BackPressed(). |
 |
| Tampilan Setelah Penambahan Blok Program Screen1.BackPressed(). |
12. Klik Notifier1 >>> Klik tahan pada blok Notifier1.ShowChooseDialog() dan tarik blok tersebut ke dalam blok Screen1.BackPressed().
 |
| Tampilan Blok Program Notifier1.ShowChooseDialog(). |
13. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik back pada device smartphone.
 |
| Tampilan Setelah Penambahan Blok Program Notifier1.ShowChooseDialog(). |
14. Aturlah bagian cancelable menjadi False, agar tidak menampilkan button Cancel pada Notifier.
 |
| Tampilan Pemilihan Opsi Button Cancelable. |
15. Klik Text >>> Klik tahan pada blok Teks kosong dan tarik blok tersebut ke block view.
 |
| Tampilan Pemilihan Blok Program Teks Kosong. |
16. Lakukan copy-paste blok program tersebut menjadi 4 buah blok program.
 |
| Tampilan Lakukan Copy Paste Blok Program Teks Kosong |
17. Pasangkan 4 buah blok teks kosong tersebut ke bagian masing-masing method.
 |
| Tampilan Pemasangan 4 Buah Blok Program Teks Kosong. |
18. Isikan 4 buah blok teks kosong tersebut sesuai dengan fungsi method masing-masing.
 |
| Tampilan Pengisian Teks pada 4 Blok Program Teks. |
19. Klik Notifier1 >>> Klik tahan pada blok Notifier1.AfterChoosing() dan tarik blok tersebut ke block view.
 |
| Tampilan Penambahan Blok Program Notifier1.AfterChoosing(). |
20. Lepaskan tombol mouse pada blok tersebut. Kamu telah membuat suatu event setelah memilih konfirmasi dialog.
 |
| Tampilan Setelah Penambahan Blok Program Notifier1.AfterChoosing(). |
21. Klik Control >>> Klik tahan pada blok if-then-... dan tarik blok tersebut ke dalam blok Notifier1.AfterChoosing().
 |
| Tampilan Penambahan Blok Program If-then... |
22. Klik Text >>> Klik tahan pada blok compare texts dan tarik blok tersebut ke dalam blok if-then-....
 |
| Tampilan Penambahan Blok program compare texts. |
23. Aturlah perbandingan pada blok program tersebut menjadi tanda (=).
 |
| Tampilan Pemilihan Perbandingan pada compare teks. |
24. Klik choice >>> klik tahan pada get.choice() dan tarik blok tersebut ke dalam blok perbandingan compare text yang sebelah kiri.
 |
| Tampilan Penambahan Blok Program getchoice() pada Notifier. |
25. Lakukan duplikasi pada blok teks yang berisi "Ya" dengan klik kanan mouse, klik Duplicate.
 |
| Tampilan Duplikasi Blok Program Teks "Ya". |
26. Masukkan blok tersebut ke dalam blok perbandingan compare text yang sebelah kanan.
|
| Tampilan Pemasukan Blok Program Teks "Ya" ke Compare texts. |
27. Klik Control >>> Klik tahan pada blok close.application() dan tarik blok tersebut ke dalam blok then.
 |
| Tampilan Penambahan Blok Program close.application() ke dalam Notifier. |
28. 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.
29. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
30. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.
31. 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.
32. Setelah aplikasi tersebut buka, silahkan klik back pada smartphone device atau emulator pasti muncul konfirmasi dialog untuk menutup aplikasi.
 |
| Tampilan Konfirmasi Dialog. |
33. Apabila kamu tekan "YA", maka aplikasi tersebut terjadi proses eksekusi untuk menutup aplikasi.
 |
| Tampilan Setelah Menutupi Aplikasi. |
Sekian... Terima kasih... :)
Tutorial Membuat Tampilan Konfirmasi Tutup Aplikasi dengan Thunkable
Konfirmasi adalah suatu sebuah informasi yang disampaikan kepada pengguna aplikasi untuk menentukan keputusan secara final terhadap aplikasi tersebut....
Appetize.io adalah salah satu situs web yang menyediakan untuk melakukan pengujian pada aplikasi-aplikasi mobile baik itu Android maupun iOS secara online, sehingga kamu tidak memerlukan download aplikasi emulator atau simulator OS yang bisa menghabiskan kapasitas ruang harddisk dan pemakaian memori RAM yang begitu boros sehingga melambat kinerja kerja pada komputer atau laptop.
Ini bisa menjadi alternatif apabila kamu malas download emulator atau simulator OS atau menggunakan software emulator atau simulator tersebut di dalam komputer atau laptop.
Kali ini, penulis akan memberikan tutorial cara memasang pengujian APK (aplikasi Android) yang telah diciptakan / dibuat dengan menggunakan tools Thunkable melalui Appetize.io. Sebelum itu, pastikan komputer atau laptop kamu itu dalam kondisi internet sedang aktif untuk melakukan pengujian aplikasi Android (APK) tersebut.
LANGKAH-LANGKAH :
LANGKAH-LANGKAH :
2. Klik Upload untuk mengunggah aplikasi Android (APK) ke dalam appetize.io.
 |
| Tampilan Halaman Utama Appetize.io |
3. Klik tombol Select file untuk memilih file aplikasi tersebut yang akan dipasangkan.
 |
| Tampilan Tahapan dalam Upload APK. |
4. Pilihlah file aplikasi Android (APK) yang kamu ingin pasangkan ke dalam Appetize.io. Klik Open.
5. Masukkan nama surat elektronik (e-mail) kamu untuk mendapatkan kode generate, klik Generate.
6. Kunjungi situs web mail yang sesuai dengan pengisian nama e-mail kamu yang sebelumnya.
 |
| Tampilan Pemilihan File Aplikasi Android (APK). |
 |
| Tampilan Tahapan dalam Pengisian E-Mail. |
7. Buka kotak masuk yang kiriman dari Appetize.io, klik link generate yang tertera di dalam surat masuk.
8. Klik Tap Play untuk memulai aplikasi Android (APK) yang telah kamu upload.
9. Berikut hasilnya.
CATATAN : Apabila kamu mengunggah file aplikasi Android (APK) dengan ukuran besar, kemungkinan akan terjadi berbagai terkendala seperti proses pengunggahan file lama sekali, web browser sering not responding akibat pemakaian RAM, dan sebagainya.
 |
| Tampilan Kotak Masuk dari Appetize.io. |
 |
| Tampilan Halaman Situs yang Telah Memasang APK. |
 |
| Tampilan Hasil Pemasangan APK di Appetize.io |
Sekian... Terima kasih...
Tutorial Instal Pengujian APK (Aplikasi Android) Thunkable Menggunakan Appetize.io
Appetize.io adalah salah satu situs web yang menyediakan untuk melakukan pengujian pada aplikasi-aplikasi mobile baik itu Android maupun iOS secara online,...
TextView / TextBox adalah suatu komponen UI yang berfungsi untuk tempat mengetik kotak teks untuk semua tipe karakter berdasarkan kebutuhan untuk menyampaikan suatu informasi yang bersifat teks.
Widget ini biasanya digunakan untuk mengetik teks atau kalimat seperti aplikasi berita, administrasi publik, bisnis, pengisian formulir, perhitungan, dan sebagainya.
Disini, saya akan memberikan tutorial cara mengetik atau memasukkan teks karakter, angka, dan simbol dengan menggunakan widget TextView / TextBox 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 "textview1". Klik OK.
5. Tunggu beberapa saat sampai tampilan dashboard pada project tersebut itu muncul. Lakukan pergantian warna latar belakang pada screen yang sesuai keinginan kamu, usahakan pemilihan kontras warna yang berlawanan antara teks dengan latar belakang screen.
6. Masuki bagian Pallete, carilah widget TextBox untuk membuat atau mengetik teks tersebut di kotak atau kolom teks. Klik tahan pada TextBox lalu tarik ke layar Screen.
7. 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.
Aziz Blogger
March 08, 2019
Admin
Bandung Indonesia |
| Tampilan Dashboard pada Thunkable. |
 |
| Tampilan Pembuatan Project APP. |
 |
| Tampilan Pemilihan Warna Background pada Screen. |
 |
| Tampilan Penambahan TextBox di dalam Screen. |
8. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
9. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.
10. 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.
 |
| Hasil Pembuatan TextView di dalam Aplikasi. |
11. Ketikkan kata-kata dengan sesuka hati kamu. Asalkan, kata-katanya sopan saja. :D
 |
| Hasil pengetikan dari keyboard / soft-keyboard di TextView. |
Baca juga :
Sekian dari posting ini... Terima kasih...
Tutorial Menggunakan TextView di Thunkable
TextView / TextBox adalah suatu komponen UI yang berfungsi untuk tempat mengetik kotak teks untuk semua tipe karakter berdasarkan kebutuhan untuk menyampaikan...
