Cara Membuat Aplikasi Webview Android Plus Pasang Iklan admob

anda tidak perlu mendownload software untuk membuat aplikasi webview tersebut, cukup mendaftar di salah situs pembuat aplikasi android di bawah ini lalu buat aplikasi webview anda.

Assalamu'alaikum Warohmatulloh Wabarokatuh

Segala puji bagi Allah Swt. dan Sholawat serta salam kepada Nabi Muhammad Saw., keluarga, sahabat, pengikut, serta para pembaca artikel ini.

Pada kesempatan kami akan berbagi cara mudah membuat aplikasi webview untuk Android. 

Webview adalah komponen dalam aplikasi yang memungkinan pengguna aplikasi akan mengakses web di dalam aplikasi tersebut.

Biasanya komponen webview sangat diminati oleh para pemilik situs, karena dengan aplikasi webview para pengunjung tidak perlu susah payah mencarinya lewat mesin telusur atau browser, cukup dengan menggunakan aplikasi webview pemilik situs, maka anda akan langsung masuk ke situs pemilik aplikasi tersebut.

Adapun cara yang akan kami bagikan kepada para pembaca sekalian, merupakan cara yang terbilang cukup mudah, anda tidak perlu belajar banyak soal coding dan sebagainya.

Begitu pula anda tidak perlu mendownload software untuk membuat aplikasi webview tersebut, cukup mendaftar di salah situs pembuat aplikasi android di bawah ini lalu buat aplikasi webview anda.

• MIT App Inventor
• Thunkable
• Appybuilder
• Makeroid
• Droidmaker

Silahkan pilih salah satu dari beberapa penyedia layanan pembuat aplikasi Android di atas. Di antara beberapa situs penyedia pembuat Aplikasi Android di atas saya sendiri memilih Thunkable. 

Adapun alasan  memilih Thunkable adalah: 

Kelebihan:

1. Ada fitur komponen Admob agar aplikasi tersebut dapat menghasilkan uang 
2. Server jarang bermasalah

Kekurangan

1. Tidak bisa mengedit menu title bar
2. Tidak bisa menghilangkan Cap Thunkable di about

Catatan: direkomendasikan untuk memilih situs yang sama dengan pilihan saya agar lebih mengikuti tutorial.

Jika anda memilih thunkable, silahkan masuk ke classic platform bukan cross platform.

Selanjutnya ikuti langkah-langkah berikut.

Daftar isi

1. Buat Project
2. Memasang Komponen Webview
3. Mengatur Blocks Webview
4. Export atau Tes Aplikasi
5. Bonus: Pasang Iklan Admob di aplikasi

1. Buat Project

Pada halaman setelah anda mendaftar/login silahkan klik Create a New App, Setelah itu, isi nama project terserah anda lalu klik OK

[Kembali ke daftar isi]

---

2. Memasang Komponen Webview

Langkah kedua setelah anda masuk di halaman pembuat aplikasi, anda harus memasang komponen webview ke aplikasi anda dan memasukkan URL situs anda di komponen webview tersebut, agar pengguna aplikasi anda nantinya akan langsung melihat situs anda.

1. Pada bilah kiri layar anda buka tab palette >> User interface
2. Pada folder User interface cari Web viewer lalu drag/seret ke smartphone
3. Pada sisi sebelah kanan tab Components klik Web Viewer, maka akan muncul bilah sebelah kanannya lagi bernama properties
4. Pada tab Properties atur height dan width menjadi Fill parent. Atur juga Home URL, dan masukkan alamat situs anda.
5. Opsional: hilangkan tanda centang zoom display. Agar nantinya di aplikasi anda tidak ada tombol kaca pembesar.

Berikut contoh gambar pemasangan komponen webview

Catatan: Memasukkan URL situs di Home URL, sebaiknya anda coba dulu di browser smartphone anda dan lihat URL situs anda pada tampilan seluler/mobile. Biasanya url untuk tampilan mobile dan desktop berbeda, untuk host blogger contohnya ketika kita membuka di smartphone maka url situsnya ada tambahan ?m=1 menjadi seperti ini https://www.inspirasimr.com/?m=1, dan url untuk seluler inilah yang dimasukkan di Home URL tersebut, agar ketika nantinya kita mengatur blocks dari home url dapat berfungsi dengan baik.

[Kembali ke daftar isi]

---

3. Mengatur Blocks Webview

Setelah anda mengatur desain untuk aplikasi webview anda nantinya, selanjutnya kita pindah ke tab Blocks.

Pada langkah ini, silahkan ikuti rangkaian block pada gambar di bawah ini.

Bingung, blocks-blocks ini datang dari mana?

Silahkan lihat gambar alur blocks di bawah ini, maaf jika agak berantakan.

Penjelasan gambar:

1. Klik tab blocks agar dapat mengatur blocks aplikasi.
2. Klik Screen1, drag block when screen1 .back Pressed ke area blocks editor
3. Klik Control, drag/seret block if dan pasangkan ke when screen1 .back Pressed. Klik tanda "roda gigi" if, tambahkan else if di block if tersebut. Klik Control, drag/seret Close Application, pasangkan pada then ke-2 pada block if.
4. Klik Logic, drag/seret 2x block yang berbentuk cetakan yang ada simbol "sama dengan" (=) di antara cetakan tersebut, dan pasang pada block if dan else if. Ubah simbol "sama dengan" (=) untuk if menjadi simbol "sama dengan dengan garis miring" (=/) yang berarti (tidak sama).
5. Klik Web_Viewer1, seret/drag blocks-blocks yang dibutuhkan seperti pada gambar di atas dan pasangkan juga seperti pada gambar di atas.

[Kembali ke daftar isi]

---

4. Export atau Tes Aplikasi

Setelah melakukan 3 tahap di atas maka aplikasi webview anda sudah jadi. Selanjutnya, anda bisa:

1. mendownload/Export aplikasi anda 

• langsung lewat HP dengan QR Code
• Download Lewat PC

2. Test aplikasi anda

• Thunkable Live (menggunakan wifi)
• USB Connection (debugging usb, ingin tes aplikasi lewat emulator seperti Nox?, lihat cara debugging usb emulator disini)

[Kembali ke daftar isi]

---

5. Bonus: Pasang Iklan Admob di aplikasi

Sebagai tambahan nih, bagi anda yang ingin aplikasi webviewnya dapat menghasilkan uang, bisa mendaftar di admob dan bekerja sama dengan program admob. Setelah anda selesai mendaftar buat unit iklan, lalu salin kode ID unit iklan yang telah anda buat tadi.

Setelah anda menyalin kode id unit iklan admob, selanjutnya kita kembali ke editor aplikasi.

Menambah komponen admob dan memasang kode iklan

Komponen admob di thunkable berada di tab palette >> Experimental, anda akan menemukan dua komponen admob:

• admob banner (spanduk, dipasang pada atas/bawah layar)
• admob interstitial (Layar penuh)

Pilih komponen admob yang sesuai dengan unit iklan yang anda buat di admob dan seret/drag ke smartphone.

Catatan: untuk admob banner seret/drag komponen ke atas atau bawah layar smartphone

Setelah itu masukkan kode iklan yang anda salin tadi pada tab Properties >> Ad Unit ID 

Menjalankan/menampilkan Iklan Admob

Setelah memasang komponen dan menempelkan kode iklan, iklan anda tidak akan tampil, jika anda belum mengatur blocks dari komponen admob tersebut.

Cara untuk menjalankan atau menampilkan iklan admob anda:

1. Pindah ke tab Blocks
2. Pada bilah sebelah kiri, klik Screen1, cari dan seret/drag block When Screen1 .Initialize ke area editor blocks
3. Selanjutnya klik admob_banner/interstitial1, cari dan drag block Call admob_banner/interstitial1 ke area editor blocks, dan pasangkan ke block When Screen1 .Initialize
4. Selesai

Lihat gambar di bawah ini untuk lebih jelasnya.

Berikut tampilan iklannya di aplikasi webview anda nantinya.

[Kembali ke daftar isi]

---

Cukup mudah bukan, membuat aplikasi webview beserta pasang iklan admob di dalamnya.

Cara di atas merupakan cara yang paling dasar dalam membuat aplikasi webview di Thunkable, anda dapat bereksperimen dengan aplikasi yang anda buat dengan menambahkan

• layar intro/pembuka 
• layar beranda dengan tombol pintasan
• layar untuk about, ToS, Contact, dsb.

Demikian yang sempat kami sampaikan, mudah-mudahan artikel ini bermanfaat bagi para pembaca sekalian.

Wassalamu'alaikum Warohmatulloh Wabarokatuh.

Bagikan Artikel

Berlangganan update artikel terbaru via email: