Konversi Website Menjadi Apk Android

Sering ada mahasiswa yang bertanya sama saya kurang lebih seperti ini

Pak bisa ndak sih website yang sudah online dikonversi ke apk? biar kita ga capek buat yang aplikasi androidnya

Nah, jawabannya adalah sangat bisa sekali. Kita dapat melakukan konversi website menjadi apk (File ekstensi aplikasi android). Akan tetapi dengan melakukan “konversi” ini tentunya ada beberapa kelemahannya. Diantaranya aplikasi dapat berjalan lebih lambat. Kemudian untuk desain sendiri jika belum responsif akan mengakibatkan tampilan tidak mobile friendly. Dan masih ada beberapa yang lainnya.

Jadi pastikan sebelum kita melakukan konversi website yang akan dikonversi memiliki tampilan yang mobile friendly. Sebenarnya “konversi” ini bukan mutlak merubah kode program ataupun yang lainnya. “Konversi” disini adalah hanya memanggil alamat url dari website tersebut atau istilahnya adalah pointing website.

Baiklah tidak perlu terlalu lama, kita mulai kodingnya saja. Oiya sebelumnya siapkan alamat website yang mau dikonversi, sebagai contoh kita akan melakukan konversi website https://dosenprogramming.com/

Membuat Aplikasi Konversi

Membuat aplikasi ini tidak terlalu susah, pada dasarnya kita cukup punya satu file dengan nama index.html. Silakan buat folder baru dengan nama bebas, kemudian tambahkan file dengan nama index.html kemudian lengkapi kodenya seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>App</title>
  <script type="text/javascript">
    function gotoWeb(){
      //window.location.href = "https://dosenprogramming.com";
      window.open('https://dosenprogramming.com', '_self ', 'location=yes');
    }
  </script>
</head>
<body onload="gotoWeb();">

</body>
</html>

Simpan, kemudian jalankan file tersebut. Perhatikan apa yang terjadi!!! Ketika file tersebut dijalankan maka file tersebut akan langsung mengarahkan ke website yang telah kita tentukan. Perhatikan tag <body onload=”gotoWeb();”> , function onload di dalam tag body tersebut akan langsung menjalankan function gotoWeb() dimana isi dari function tersebut adalah menjalankan window.open(‘https://dosenprogramming.com’, ‘_self ‘, ‘location=yes’); yang mengindikasikan dengan segera untuk membuka website https://dosenprogramming.com

Untuk mengetahui lebih detail mengenai fungsi window.open Silakan kunjungi kesini

Membuat Konfigurasi Aplikasi

Disini aplikasi kita katakan sudah jadi. Selanjutnya kita buat konfigurasi sebelum kita build di PhoneGap. Buat file baru dengan posisi sama seperti index.html di dalam folder yang kita buat tadi(posisi di root aplikasi). File tersebut kita beri nama config.xml, kemudian lengkapi kodenya sebagai berikut

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.stmikwp.pointingapp"
    versionCode = "10"
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

  <name>Example Pointing Web App</name>

  <description>
      Ini merupakan contoh sederhana pointing aplikasi langsung ke web yang dituju
  </description>

  <author href="https://dosenprogramming.com" email="dosenprogramming@gmail.com">
      Reza
  </author>
  
  <plugin name="cordova-plugin-inappbrowser" />
  <plugin name="cordova-plugin-whitelist" version="1" />
    
  <access origin="*" />
  <allow-intent href="https://*/*" />
  <allow-navigation href="https://*/*" />
  
</widget>

Untuk yang belum tau fungsi dari file config.xml ini silakan baca dahulu di postingan ini

Ada beberapa tag baru pada config.xml ini yang di tutorial sebelumnya tidak ada, yaitu tag plugin, access origin, allow intent dan allow navigation. Ayo kita bahas satu persatu secara singkat

<plugin name=”cordova-plugin-inappbrowser” /> mengijinkan aplikasi mengakses sebuah web layaknya browser. dokumentasi lengkap disini.
<plugin name=”cordova-plugin-whitelist” version=”1″ /> mengijinkan daftar list yang digunakan untuk mengakses sesuatu diluar dari aplikasi itu sendiri. Cara gampangnya whitelist kebalikan dari blacklist. Bagian ini merupakan bagian penting, dimana tag dibawahnya merupakan tag-tag yang memanggil plugin whitelist ini.
<access origin=”*” /> mengontrol permintaan jaringan mana (gambar, XHR, dll) yang diizinkan untuk dibuat
<allow-intent href=”https://*/*” /> mengontrol URL mana yang diizinkan oleh aplikasi untuk meminta sistem membuka URL tersebut. Secara default, tidak ada URL eksternal yang diizinkan untuk dibuka.
<allow-navigation href=”https://*/*” /> mengontrol URL mana yang dapat dipanggil oleh WebView (dalam kasus ini didalam inappbrowser) itu sendiri

Untuk lebih lanjut mengenai plugin whitelist dan tag yang berhubungan dengannya, silakan kunjungi dokumentasinya disini.

Build Aplikasi

Sekarang saatnya untuk mem-build aplikasi yang telah kita buat. Jika anda belum tahu untuk build aplikasi, anda dapat menuju ke link ini untuk mempelajarinya.

Setelah berhasil build jangan lupa untuk mencoba menjalankan di smartphone anda masing-masing. Kurang lebih tampilannya adalah seperti pada gambar di bawah ini

Jika ada pertanyaan silakan tulis saja di kolom komentar. Selamat mencoba.

Dosen Programming

Konversi Website Menjadi Apk Android