Cara Membuat Aplikasi Webview Android Plus Pasang Iklan admob

https://www.inspirasimr.com

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.

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.


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

https://www.inspirasimr.com

[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

https://www.inspirasimr.com

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.

https://www.inspirasimr.com

Bingung, blocks-blocks ini datang dari mana?

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

https://www.inspirasimr.com

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
https://www.inspirasimr.com


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

https://www.inspirasimr.com

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 

https://www.inspirasimr.com


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.

https://www.inspirasimr.com


Berikut tampilan iklannya di aplikasi webview anda nantinya.

https://www.inspirasimr.com


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

Berlangganan update artikel terbaru via email:

9 Komentar untuk "Cara Membuat Aplikasi Webview Android Plus Pasang Iklan admob"

  1. gan, apakah aplikasi webview yang kita buat melalui thunkanle dan dipasang admob apakah bisa di upload di playstore?

    BalasHapus
    Balasan
    1. maaf gan lambat balas, baru dari out dunia maya 2 pekan lebih,
      aplikasi buatan agan bisa masuk/diupload ke playstore asal agan sudah mendaftar atau buat akun sebagai developer di playstore

      Hapus
  2. Balasan
    1. 1. Pastikan akun admob anda sudah di approve
      2. jika sudah approve tunggu beberapa waktu hinggga iklan ditampilkan
      3. Setelah menempatkan kode iklan, pastikan sudah memasang kode call pada blocks.

      Semoga membantu

      Hapus
  3. gan, utk pasang kode iklannya admobnya saya cek.. uda gada lagi gan, apakah uda perubahan dari thunkable ?

    BalasHapus
    Balasan
    1. untuk thunkable cross mmg tidak ada, masuk ke mode klasik

      Hapus
  4. gak ditambah lagi gan tutor layar intro/pembuka, layar beranda dengan tombol pintasan, layar untuk about, ToS, Contact???

    BalasHapus
    Balasan
    1. Usulan yang bagus, akan tetapi saya hanya akan menjadikannya sebagai tantangan untuk para pembaca tutorial ini, agar mereka bisa memahaminya lebih baik lagi.

      Hapus
  5. saya agak bingung dengan tutornya bozz..??

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel