Sabtu, 07 Mei 2016

Tutorial Lengkap Membuat Blog / Website Menjadi Aplikasi Android APK



Banyak tutorial yang beredar di Internet, untuk membuat website atau blog menjadi apk (aplikasi android) sangat mudah. Yaitu hanya tinggal meletakan url web/blog kita, lalu dikonversi menjadi APK. Yang perlu teman-teman tahu bahwa sebenarnya itu hanyalah semacam internet shortcut untuk menuju ke website yang dituju. Maka jika diperhatikan, ukuran aplikasinya sangat kecil Hanya dibawah 50 Kb.

Sudah banyak application generator yang bertebaran seperti www.appsgeyser.com . Dan sekali lagi perlu diperhatikan bahwa aplikasi yang dihasilkan adalah hanya sebuah internet shortcut.

Tidak salah memang, hanya saja cara tersebut terlalu instan, kurang elegan, kurang keren dan kurang tepat. Untuk itu, bagi teman-teman yang terbiasa membuat website dan familiar dengan HTML, CSS dan Javascript, teman-teman dapat melakukan development aplikasi android yang sekarang bisa dilakukan dengan metode Hybrid. Metode ini tidak menggunakan Java dan XML melainkan dengan HTML, CSS dan Javascript.


Contoh yang sudah jadi seperti davidprasetyo.com versi android yang dapat didownload di SINI


Demo App

Penasaran bagimana cara pembuatannya? Berikut langkah-langkahnya :

1. Siapkan apache sebagai web server. Untuk mempermudah, kita bisa menggunakan XAMPP. Download XAMPP disini

2. Install XAMPP, Lalu Start Apache Service

3. pada folder htdocs, misal C:\xampp\htdocs  beri folder baru misalkan projectwebdroid


4. Siapkan Template. Bagi teman-teman yang tidak sempat membuat template android, silahkan search di google "template android HTML". Mau cari gratis atau mau berbayar silahkan. Atau download contoh template disini


5. Download template yang disukai, lalu taruh di folder projectwebdroid tadi.

6. Pastikan ada index.html serta folder css maupun js (javascript). Jika ada folder bootstrap atau pendukung images jangan ketinggalan juga.



7. Pastikan service apache pada XAMPP sudah menyala.

8. Buka Browser (Lebih baik pakai chrome). Masuk ke developer tools (ctrl+shift+i)

9. Untuk mensimulasikan device mobile maka pilih Toggle device mode

10. Disitu juga ada pilihan penyesuaian besar layar. Teman-teman bisa mengeksplor itu nanti


11. Untuk mengetes template yang barusan diunduh, ketik di address bar browser http://localhost/projectwebdroid 

12. Jika tampilan sudah berhasil muncul, maka saatnya berkarya mengintegrasikan aplikasi kita dengan blog / Website. Sebelumnya akan saya sampaikan dulu bahwa aplikasi android berbasis web dasar datanya adalah API atau yang umum disebut orang sebagai FEED. API / FEED bertugas mengambil data dari database server dan umumnya ditampilkan dalam bentuk JSON. contoh pada blogspot :


alt=json-in-script sedangkan myFunc adalah fungsi yang akan dipanggil untuk merender data JSON

baca juga documentation API blogspot disini :

Untuk pengguna wordpress, penggunaan JSON API bisa dilihat disini :


Untuk Pengguna Joomla :

Untuk Pengguna Drupal :

13. Selanjutnya kita harus merender JSON ke dalam website kita.
Contohnya seperti ini : Ini adalah sample kode index.html aplikasi blog saya :

Sample Code  (Klik untuk melihat source code)

davidprasetyo.com ganti dengan url blog anda.

14. Buat Function Javascript untuk merender data :

15. Sisanya teman-teman hanya perlu berkreasi seperti mendevelop web dengan client-side-scripting dengan angularJS, maupun JQuery. Dengan CSS anda dapat menentukan warna dan design.

16. Berikut ini style sidebar menunya jika sudah jadi


17. Sekarang saatnya mengubah Project tadi menjadi APK dengan cepat dan instan.

18. Install lalu jalankan aplikasinya

19. Isi yang perlu diisi sesuai dengan keinginan anda. Disini yang penting adalah :
- website type to convert = Local HTML Website
- directory of local website = tempat project anda barusan (htdocs/projectwebdroid atau www/projectwebdroid )


20. Klik Generate APK. Setelah digenerate, biasanya installer apk ada di desktop. Pindahkan ke device mobile anda dengan kabel data atau bluetooth, lalu install dan jalankan. Aplikasi Android berbasiw web anda sudah jadi.


21. Alternatif lain :




22. Tips dan Trik
- Gunakan css dan js file lokal. Kalau bisa image pun juga lokal. Hal ini untuk menghindari loading page yang terlalu berat.
- Gunakan localStorage pada javascript untuk menyimpan value-value secara permanen.
- Gunakan sqlite jika ingin memakai database

Kira begitu untuk membuat aplikasi android tanpa perlu menggunakan SDK JDK eclipse dan semacamnya. Teknik ini memang ada kekurangan dan kelebihannya, tapi untuk sebuah project yang skalanya pribadi dan sederhana, teknik ini sangat cepat dan dapat diandalkan.

Tambahan :

Karena Banyak pertanyaan tentang teknis, saya share saja ya source code nya yang sudah berjalan :
https://github.com/davithace/davidwebapp

Preview :
http://davithace.github.io/davidwebapp/




Read Another


CATEGORIES


38 komentar :

  1. langkah yg ke6 caranya gimana?

    BalasHapus
    Balasan
    1. langkah ke 6 itu pengaturan dan tataletak direktori file-file.
      jadi kalo agan ada file css, js, dan images taruh di folder css, js, dan images.
      index.html adalah file yang dipanggil pertamakali (halaman depan)

      Hapus
  2. masih bingung. dapetnya file css,js dimana?

    BalasHapus
  3. Content di tab Popular ko ga muncul ya?
    json api buat popular post kan emang ga ada
    ngatasi nya gimana bro?

    BalasHapus
    Balasan
    1. kalo saya popular post disitu masih manual.
      jadi saya buat tag/label popular pada 10 postingan teratas.
      saya jg masih mencari API untuk me-list popular post secara otomatis

      Hapus
    2. ok,
      kalo nyari template kaya gitu dimana ya? selain base nya Gravity
      makasih nih template nya bagus

      Hapus
    3. banyak sih kalo mau cari di google.
      ada material design dll..

      Hapus
  4. Ini baru artikel membuat aplikasi untuk blog yang saya cari, terimakasih gan, mau saya coba. Oya mau tanya kang, kalau misalnya di blog kita ada iklan adsense apa secara otomatis tampil di aplikasi?

    BalasHapus
    Balasan
    1. nggak..
      kalo mau ada iklannya kodenya mesti diembed di html di aplikasinya

      Hapus
  5. cara ngerender json nya gimana?

    BalasHapus
    Balasan
    1. bisa pake jquery, begini :
      http://davithace.github.io/davidprasetyo/plugins/imdbinfo.js

      Hapus
  6. mohoon bertanya mas. Web localhost saya sudah berjalan dengan baik ketika dijalankan di console google chrome, kemudian saya jadikan .apk melalui APK builder juga sudah berhasil. Tapi ketika selsai menginstal di android, tampilanya berupa blank putih. apa penyebabnya ??

    BalasHapus
    Balasan
    1. ada databasenya? mysql atau semacamnya?
      atau pakai bahasa server site seperti PHP?
      jika ya maka jelas tidak bs

      Hapus
  7. mau tanya untuk website yg membutuhkan database mysql apa bisa dibuat menjadi apk juga?
    kalau tidak bisa apa ada solusi yg lain agar tetap terkoneksi dengan database di server?
    trims... :)

    BalasHapus
    Balasan
    1. bisa. tapi diperlukan API, jembatan/pihak ketiga yg bisa membuat aplikasi berkomunikasi dengan server.
      coba cari info dulu tentang "RESTfull API" mas :)

      Hapus
  8. langkah ke 13 kebawah blom ngerti...kan ada themes trus gimana cara masukin sample kode ke theme?

    BalasHapus
    Balasan
    1. bisa cari info lebih jauh di google tentang "how to render json data to html"
      intinya agan tinggal perhatiin kode di dalem tag >> script type="text/javascript"

      Hapus
  9. Kalo webnya wordpress dan ada woocommerce nya, apakah semua fitur penjualana bisa berjalan? Terimakasih.

    BalasHapus
    Balasan
    1. untuk fitur penjualan harus ada API untuk GET & POST data atau untuk insert ke database

      Hapus
  10. Saya buntu sampe ke tahap render... nyerah.. ga ngerti

    BalasHapus
    Balasan
    1. keywordnya append json data to html, render json data to html
      contohnya ini misalnya
      http://davithace.github.io/davidprasetyo/plugins/imdbinfo.js

      ini baru dasar banget sih.
      mesti ada niat memang untuk paham programming apalagi ranah android :)

      Hapus
  11. gan david saya masih belum paham langkah 12- akhir.. mohon bimbinganya gan,,,
    terimakasih...

    BalasHapus
  12. gan cara merender JSON ke website gimana? infonya gan mohon...

    BalasHapus
    Balasan
    1. keywordnya "append json data to html", "render json data to html"
      bisa cari referensinya di google karena tiap website akan punya code yang berbeda..

      Hapus
    2. supaya bisa jadi link gini gimana? https://raw.githubusercontent.com/davithace/davidwebapp/gh-pages/index.html

      Hapus
    3. ????
      itu hanya contoh code cara merender jsonnya.

      Hapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. kalau udah di render jsonya trus gimana lagi? tutor nya donk :v masih basic

    BalasHapus
  15. mas itu redenrnya gmn si aku kurang paham

    BalasHapus
  16. Gan, mending buka jasa pembuatan aplikasinya. hahha nanti ane pasti pake jasa nya

    BalasHapus
  17. Gan david saya sudah berhasil menamilkan indexnya d app saya tapi pas di klik pada link postingan jadi blank article?postid nya gmna ngatasinnya agar linknya jalan

    BalasHapus
  18. Mohonpencerahannya mas david klo ada waktu email saya yah krisryuga@gmail.com

    BalasHapus
  19. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  20. No. 14 masih blm mudeng gan,,gmn maksdnya,,,udah dibaca berkali2 tapi masih buntu..help,,

    BalasHapus
  21. Wah keren nih, ijin bookmark :D

    BalasHapus
  22. Pagi mas..
    Jika di blog terdapat Iklan AdSense, apakah iklan tersebut menjadi responsive secara otomatis ?
    Mohon Penjelasannya dan terima Kasih..

    BalasHapus
  23. Artikel bagus ringkas mudah dimengerti, untuk mengetahui lebih lanjut Anda bisa merujuk ke artikel di aplikasi android gratis

    BalasHapus

davidpras1994@gmail.com

Name

E-mail *

Message *


G Plus
@davithace
PIN : 51E456D8
LINE : davithace

close