Berita Anda: Tutorial | Berita dalam dan luar negeri Dengan Multi Bahasa

Home » Penelusuran Tutorial

Webview adalah salah satu widget yang terdapat di dalam Thunkable. Widget ini berfungsi untuk menyisipkan situs web baik online maupun offline (lokal). Jadi, anda bisa membuat website berbasis mobile yakni Android dengan menyisipkan link situs website kamu ke dalam aplikasi mobile tersebut.
Ini cocok bagi anda yang ingin membuat aplikasi website berbasis Android sederhana tanpa coding sehingga menjadi mudah. Apalagi website kamu itu hasil dari karyamu. Anda juga bisa membuat aplikasi game dengan menggunakan HTML5, CSS sebagai desain, dan JavaScript sebagai penentu logika game baik secara online maupun lokal (offline). Anda tidak perlu konversi hasil website buatan anda dengan Cordova.

Disini, saya akan memberikan tutorial membuat website berbasis Android sederhana dengan Webview Menggunakan Program Blok (Block Programming) dari 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.

Tampilan Dashboard Pada Thunkable

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

Tampilan Pembuatan Project App

5. Tunggu beberapa saat sampai tampilan dashboard pada project tersebut itu muncul. Silahkan lakukan scrolling ke bawah pada bagian Properties sampai ketemu opsi Title untuk mengubah judul Screen. Silahkan ubahlah nama judul Screen sesuai keinginan. Tekan Enter.

Tampilan pada Pengubahan Judul Screen

6. Masuki bagian Pallete, carilah widget Web Viewer untuk memasukkan link situs website tadi. Klik tahan pada Web Viewer lalu tarik ke layar Screen.

Tampilan pada Penambahan Widget WebView

7. Silahkan scrolling ke atas. Kemudian, klik button Blocks. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.

8. Klik Screen1 >>> Klik tahan pada blok Screen1.Initialize() dan tarik blok tersebut ke block view.

Tampilan pada Pemilihan Blok Screen1

9. Lepaskan tombol mouse pada blok tersebut. Berarti anda telah membuat OnCreate() pada Screen atau Activity. Ini dimaksudkan, anda membuat sebuah inisialisasi OnCreate() untuk mengisi beberapa blok-blok program yang akan bekerja pada saat aplikasi pertama kali dibuka atau diaktifkan di dalam emulator atau smartphone Android.

Tampilan hasil Pemilihan Blok Screen1

10. Klik Web_Viewer1 >>> Klik tahan pada blok Web_Viewer1.GoToUrl.url() dan tarik blok tersebut ke block view.

Tampilan pada Pemilihan Blok Web_Viewer1

11. Klik tahan dan geserkan pada blok Web_Viewer1 tersebut ke dalam blok Screen1.Initialize() agar widget WebView bisa bekerja pada saat aplikasi program tersebut pertama kali dibuka di dalam emulator atau smartphone Android.

Tampilan hasil Memasukkan Blok Web_Viewer ke dalam OnCreate pada Screen1.

12. Klik Text >>> Klik tahan pada blok Text yang masih kosong yang terletak paling atas dan tarik blok tersebut ke block view.

Tampilan pada Pemilihan Blok Text.

13. Klik tahan dan geserkan pada blok Text tersebut ke dalam blok Web_Viewer1.GoToUrl.url() agar widget WebView bisa membuka situs website yang kamu masukkan. Kemudian, masukkan nama link situs website anda ke dalam blok Text tersebut. Usahakan diawali dengan "http://(nama situs website anda)".

Ini sama dengan anda mengisi link situs website ke dalam WebView.loadUrl() di Android Studio atau Eclipse.

Tampilan hasil Memasukkan Blok Text ke dalam Blok Web_Viewer1.GoToUrl.url().

14. 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.

Tampilan Pengeksporan APK.

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

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

17. 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 dari Aplikasi Website Berbasis Android

Catatan :

Hati-hati untuk anda yang membuat website berbasis Android dengan Webview yang isinya Blogger, Youtube, atau produk Google lainnya, sering terjadi reject app ketika melakukan publish aplikasi ke Google Play Store. Usahakan, jangan menyisipkan situs website produk Google seperti blogger, youtube, dan lainnya. Apalagi aplikasi webview tersebut ada iklan AdMob, maka dipastikan tidak sedikit pengguna akun AdMob mengalami banned itu termasuk anda sendiri, karena anda menyisipkan link situs website produk Google, walaupun konten dari website itu milik anda. Anda masih beruntung apabila ID iklan aplikasi aja yang disable (dihentikan) dari pihak Google Adsense, berarti akun AdMob / AdSense anda masih aman.

Sekian dari posting ini... Terima kasih...

Aziz Blogger December 29, 2018 Admin Bandung Indonesia

Membuat Aplikasi Website berbasis Android dengan Webview Dasar Menggunakan Blok

Webview adalah salah satu widget yang terdapat di dalam Thunkable. Widget ini berfungsi untuk menyisipkan situs web baik online maupun offline (lokal)....

Disini, saya akan memberikan tutorial membuat website berbasis Android sederhana dengan Webview dari 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.

Tampilan Dashboard pada Thunkable

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

Tampilan Pembuatan Project App

Tampilan pada Pengubahan Judul Screen

6. Masuki bagian Pallete, carilah widget Web Viewer untuk memasukkan link situs website tadi. Klik tahan pada Web Viewer lalu tarik ke layar Screen.

Tampilan pada Penambahan Widget Webview

7. Silahkan klik widget Web_Viewer1 dan memasuki ke bagian Properties untuk mencari opsi Home URL. Opsi ini berfungsi untuk mengisi link situs website yang kamu tampilkan. Anda masukkan nama link situs website anda ke dalam kolom opsi tersebut. Usahakan diawali dengan "http://(nama situs website anda)" sebagai homepage.

Tampilan Pengisian Link Situs Website

8. 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.

Tampilan Pengeskporan APK

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

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

11. 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 dari Aplikasi Website berbasis Android

Catatan :

Sekian dari posting ini... Terima kasih...

Aziz Blogger December 26, 2018 Admin Bandung Indonesia

Membuat Aplikasi Website berbasis Android dengan Webview Dasar Tanpa Blok

Webview adalah salah satu widget yang terdapat di dalam Thunkable. Widget ini berfungsi untuk menyisipkan situs web baik online maupun offline (lokal)....

Cara Export Project (.aia) di Thunkable

File eksistensi (.aia) adalah suatu file yang berisi project-project yang berasal dari Thunkable (sejenis App Inventor). Dengan kata lain, file ini adalah...

Halo sobat sekalian, kali ini saya ingin memberikan tutorial tentang cara memasang Wordpress di Htdoc Xamp. Yap tentunya sebelum kita mengonlinekan sebuah web, hal pertama adalah membangunnya, nah dengan memasang Wordpress di Xamp anda bisa membangun wordpress sesuai dengan keinginan anda.

Wordpress adalah salah satu CMS, yaitu sebuah (Content Management System) yang akan memudahkan pengguna dalam membuat sebuah web. Anda yang tidak bisa koding sekalipun bisa menggunakan CMS untuk membuat web anda. Didalam CMS sudah terdapat fitur admin, untuk mengelola website anda.

Dari segi keamanan CMS juga sudah tidak perlu diragukan lagi. Apalagi jika CMSnya adalah Wordpress yang merupakan CMS teraman di dunia. Wordpress juga merupakan CMS yang paling banyak di gunakan terutama di Indonesia. Situs website besar seperti website Universitas Indonesia dengan alamat web ui.ac.id saja menggunakan Wordpress.

Jika anda sudah tertarik menggunakan WOrdpress mari ikuti cara penginstalan CMS ini pada Htdoc Xamp anda.

1. Download Wordpress di halaman resminya https://wordpress.org/download/ (file dalam bentuk zip).

2. Extract hasil download tadi kemudian copy isinya kedalam directory Htdoc anda biasanya disini (C:\xampp\htdocs).

3. Nyalakan Xamp anda, Apache --> start, dan MySQL --> start.

4. Buka browser Mozilla atau Chrome anda.

5. Masuk ke http://localhost/phpmyadmin/ lalu buat database baru dengan nama "wordpress" atau terserah nama yang anda suka.

6. Buka alamat localhost/wordpress/ (wordpress ini sesuai dengan nama folder tadi yang kita pindahkan ke htdoc).

7. Pilih bahasa Indonesia, atau bahasa Arab bila anda mau.

8. Klik lets'go.

9. Silahkan isi Database Name dengan nama database yang telah dibuat pada langkah ke 5. Username, Password, Database Host, dan Table Prefix silahkan sesuaikan dengan gambar kemudian klik submit.

10. Klik Run the installation.

11. Isi Site Title sesuai dengan nama website anda. Username, isi dengan username yang akan anda gunakan login ke halaman admin nantinya. Isi password sesuai dengan yang anda inginkan, jika muncul warna merah silahkan centang Confirm use of weak password, agar password yang lemah jiga bisa di index. Isi email dengan email yang aktif. Selanjutnya klik Install Wordpress.

12. Bila sudah muncul informasi succes seperti gambar di bawah berarti wordpress sudah succes di install. Silahkan klik Log In.

13. Masukkan username dan password yang sudah anda isi di langkah 7 tadi.

14. Selamat wordpress anda sudah berhasil di Install. Sekarang saatnya anda berkreasi dengan CMS ini. Oh iya silahkan masuk http://localhost/wordpress/ untuk melihat tampilan web wordpress anda.

Sekian tutorial kali ini tentang memasang Wordpress di Htdoc Xamp, semoga bermanfaat. Jangan bimbang untuk menyebarkan artikel ini jika dirasa bermanfaat. Sampai jumpa di tutorial lainnya. See you.

Aziz Blogger November 24, 2018 Admin Bandung Indonesia

Cara Pasang Wordpress di Htdoc Xamp

Halo sobat sekalian, kali ini saya ingin memberikan tutorial tentang cara memasang Wordpress di Htdoc Xamp. Yap tentunya sebelum kita mengonlinekan sebuah...

Ikon adalah antarmuka grafik di sebuah data yang digambarkan oleh gambar kecil yang menggambarkan program komputer ataupun berkas komputer dalam pengelola berkas sebuah sistem operasi maupun software. Ikon ini biasanya untuk mewakili beberapa fungsi dari penggunaan sistem operasi atau software (aplikasi) dalam bentuk gambar kecil.

Misalkan, ada gambar ikon timbangan, berarti ikon itu mewakili beberapa fungsi dari penggunaan aplikasi timbangan neraca, timbangan berat badan digital, dan lainnya.

Disini, saya akan memberikan tutorial mengenai cara mengganti atau custom gambar ikon default app di Thunkable.
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.
4. Buatlah project baru dengan klik Create New App.

Tampilan Kerja Utama di Thunkable

5. Isikan nama project adalah "Ganti_Ikon". Kemudian, klik OK. Tunggu beberapa saat sampai muncul tampilan kerja dari project baru.

Tampilan Pop-up pada Pembuatan Project

6. Pada tampilan kerja dari project baru, anda memasuki bagian Properties > Carian bagian Icon, klik bagian kolom tersebut.

Tampilan Kerja Utama dari Project Baru

7. Silahkan klik Upload File untuk memasukkan gambar ikon default tadi ke dalam bagian Media.

Tampilan Pada Pemilihan Ikon

8. Silahkan klik Choose File untuk memilih file gambar ikon dari media penyimpanan di komputer atau laptop.

Tampilan pop-up pada Upload File

9. Pilihlah file gambar ikon dengan ukuran minimal 96 x 96 px, semakin besar ukuran semakin bagus. File ekstensi yang mendukung adalah (.jpg), (.jpeg), (.png), dan (.bmp). Setelah itu, klik Open.

Tampilan Pop-up pada Pemilihan Gambar Ikon

10. Apabila ada muncul nama file yang dipilih tadi pada tampilan pop-up Upload File, maka klik OK.

Tampilan pop-up Setelah Melakukan Pemilihan File Ikon

11. Pada kolom bagian Icon, telah ada nama ikon di dalamnya. Lihat hasilnya di bawah ini.

Tampilan Kerja Setelah Ada Perubahan Ikon Default App

12. Klik tab Export > Klik App (save .apk to my computer) untuk menyimpan project dalam bentuk aplikasi siap dipakai (.apk). Pada langkah ini, membutuhkan proses mulai dari mengkompilasi, mengkonversi project aia menjadi aplikasi Android (.apk), sampai mengunduh aplikasi APK tersebut ke dalam komputer atau laptop.

13. Memasuki tahap pemasangan aplikasi Android hasil dari unduhan tadi. Aktifkan emulator Android yang terpasang di komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan kerjanya. Emulator Android ini meliputi, Memu, Nox, Windroy, Genymotion, dan lainnya.

14. Klik ikon Install APK+, ikuti sesuai dengan tanda panah bewarna putih. Lihat caranya di bawah ini.

Tampilan dari Emulator Memu

15. Pilihlah aplikasi "Ganti_Ikon" yang diambil dari hasil unduhan yang tadi. Kemudian, klik Open. Tunggu beberapa saat sampai muncul launcher ikon aplikasi.

Tampilan pop-up pada Pemilihan Instalan APK

16. Lihat hasilnya dari pemasangan aplikasi "Ganti_Ikon" tadi ke dalam emulator Android.

Tampilan Setelah Memasang APK

Sekian dari posting ini... Terima kasih...

Aziz Blogger August 15, 2018 Admin Bandung Indonesia

Cara Ganti atau Custom Icon Default App di Thunkable

Ikon adalah antarmuka grafik di sebuah data yang digambarkan oleh gambar kecil yang menggambarkan program komputer ataupun berkas komputer dalam pengelola...

Pages 9 of 10 First Prev 6 7 8910 Next