Cara Menampilkan website di mobile android dengan InAppBrowser

Cordova memiliki plugin yang bisa digunakan untuk menampilkan website didalam aplikasi android atau aplikasi mobile lainya dengan InAppBrowser. Dengan plugin ini anda tidak perlu untuk membuka website dengan browser seperti chrome, firefox ataupun opera yang ada dalam Handphone anda. Cukup membuka aplikasi, dan website pun sudah tampil di di dalamnya.

Kali ini kami akan memberikan tutorial bagaimana cara embed, webvew, dengan InAppBrowser dan cordova.

Step Cara Menampilkan website di mobile android dengan InAppBrowser

Pertama

Pastikan anda sudah memiliki peralatan tempur software yang di siapkan di computer anda untuk. Jika belum maka anda perlu mempersiapkan nya seperti apache – ant, nodejs, java dan sebagainya. Bisa di lihat di tutorial lain di blog ini.

Kedua

Install plugin InAppBrowser pada projek anda. Anda harus masuk kedalam projek anda terlebih dahulu.

Ketiga

Saatnya anda Bermain dengan coding. Anda masuk pada bagian Folder www dan buka index.html, kemudian masuk lagi pada folder js dan buka index.js. File index.html dan file index.js merupakan file dimana kita bekerja untuk membuat aplikasi dengan InAppbrowser

Buka file index.html kemudian berikan sebuah input button dengan id terserah anda. Dalam tutorial ini id kami ber nama “buka browser”

Button ini lah yang nantinya sebagai tombol untuk membuka website yang ingin kita embed dalam app kita. Anda juga bisa menggantinya dengan auto loading tanpa harus memberikan tombol terlebih dahulu sesuai dengan yang anda inginkan.

Seteilah itu anda bisa membuka file index.js. Disinilah anda meletakkan kode javascript yang akan dipanggil oleh oleh aplikasi. Akan tetapi anda harus memastikan bahwa pada file index.html, anda sudah memanggil file index.js ini. Biasanya, secara default file ini sudah dipanggil pada bagian bawah file index.html.

Setelah itu masukkan kode dibawah ini pada file index.js. pada bagian onDeviceReady dengan code
document.getElementById(“BukaBrowser”).addEventListener(“click”, FungsiBukaBrowser);

Kode di atas untuk mengidentifikasi jika button  BukaBrowser di click maka akan menjalankan fungsi FungsiBukaBrowser. Untuk itu kita harus membuat fungsi FungsiBukaBrowser agar button yang kita bikin memiliki fungsi FungsiBukaBrowser  yang bisa di ekesekusi.

Keterangan Option

  1. location =>> “location=yes” untuk menampilkan location bar, dan “location=no” untuk menyembunyikan location bar
  2. zoom =>> Digunakan untuk menampilkan button zom di browser yes untuk menampilkan dan no untuk menyembunyikan
  3. clearsessioncache =>> Digunakan untuk clear session cookie cache. Nilainya yes dan no.
  4. clearCache =>> Digunakan untuk clear browser cookie cache. Nilainya yes dan no.
  5. hidden =>> Digunakan untuk menyembunyikan atau menampilkan  inAppBrowser. Nilainya yes dan no.

 

Setelah semua step diatas, anda bisa mengcompilenya dan siap di jalankan di app mobile anda. Selamat Mencoba

 

ADD YOUR COMMENT