Sabtu, 07 Mei 2016

Tutorial Lengkap Membuat Blog / Website Menjadi Aplikasi Android APK



Jasa Konversi website ke Aplikasi Android


Pemberitahuan: 

Bagi teman-teman yang merasa kesulitan / butuh bantuan untuk project,
Saya terbuka menerima jasa pembuatan Blog/Web menjadi aplikasi android APK
Ataupun pembuatan aplikasi android hybrid (non-native)

+ Bisa Custom template
+ Custom fitur
+ Standard / Full feature android seperti fitur Notification, Location, GPS, Email dsb.
+ Playstore ( mendukung format .aab )

Contoh Fitur Notifikasi (dengan suara/sound), cocok untuk promosi produk dan berita terkini untuk membantu pengguna aplikasi selalu up-to-date :





WA: 08977791190  (David)
email: davidpras1994@gmail.com

Terima jasa konversi upload google playstore dalam format AAB
* Format AAB adalah kebijakan format terbaru Google Playstore mulai Agustus 2021 dimana format APK tidak lagi bisa diterima.

--------

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 atau jika tidak mau repot saya sudah siapkan dan tinggal Download PROJECT JADI 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



99 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 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
  12. Komentar ini telah dihapus oleh pengarang.

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

    BalasHapus
  14. mas itu redenrnya gmn si aku kurang paham

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

    BalasHapus
  16. 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
  17. Mohonpencerahannya mas david klo ada waktu email saya yah krisryuga@gmail.com

    BalasHapus
  18. Komentar ini telah dihapus oleh pengarang.

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

    BalasHapus
  20. Wah keren nih, ijin bookmark :D

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

    BalasHapus
    Balasan
    1. Biasanya ada di menu pada widget adsensenya.. harusnya sudah

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

    BalasHapus
  23. wah keren kisanak, langsung saya praktekkan nih

    BalasHapus
  24. masih bingung mas :D, buatin tutor yg pekek gambar step by step mas klok bisa yg dr blogspot ke apk

    BalasHapus
  25. mentok di render json nya... Mohon bantuannya gan

    BalasHapus
  26. mas mau nanya..., kalau yang dibuat sama mas david itukan recent post ataupun post berdasarkan label hanya beberapa yang bisa muncul(misal di set hanya 10 artikel), bisa nggak ya misalnya dibuat model seperti auto load next post? jadi ketika di scro kebawah akan otomatis muncul post-post lama... mungkin seperti aplikasi androidnya jalantikus.com yang di googleplay....

    BalasHapus
  27. Wah keren nih, kebetulan lagi ada proyek pembuatan aplikasi web. Thanks infonya mas David...

    BalasHapus
  28. mantap gan, ane sekali coba langsung bisa.! Gan kalo bikin web baisis prestashop dan osclass ada nggak.? terim kasih.

    BalasHapus
  29. itu bisa lewat hp gk ya bikinnya. ������ android user nih

    BalasHapus
  30. mantap om tutornya.izin comot ya

    BalasHapus
  31. apa saja software yg di gunakan untk mmbuat aplikasi website android native selain android studio. software yang agak ringan. dan langkah langkahnya.

    BalasHapus
  32. Buka jasa pembuat aplikasi aja gan,, hehe.. pasti aku hubungi..

    BalasHapus
  33. Mantap bos, ini cara yang masuk akal ane kira, luar biasa,

    Mungkin bisa dijelaskan sedikit lebih dalam kekurangan teknik ini dibanding kan dengan aplikasi-aplikasi berat itu...

    BalasHapus
    Balasan
    1. Kelebihannya, ya cara ini terbilang instant..

      Hapus
  34. pasang json blogspotnya diman ya?

    BalasHapus
  35. Terus cara upload di google play store gimana gan?

    BalasHapus
    Balasan
    1. Daftar dulu di google play kalo gak salah biaya pendaftarannya $25

      Hapus
  36. Terus cara upload di google play store gimana gan?

    BalasHapus
  37. mau nanya dongg.. kode "json.feed.entry[i].title" , itu kan feed api nya blogger. nah kalo untuk wordpress.org(self hosting) apa ya? di mbah google belum ketemu. Terimakasih

    BalasHapus
    Balasan
    1. tergantung sih,
      coba install plugin untuk json api (feed) wordpress dulu

      Hapus
  38. Kalau native gmn caranya Om???

    BalasHapus
    Balasan
    1. Kalau native bisa pakai android studio & SDK tools

      Hapus
  39. Berarti buat dari awal lah om??? Hadeuh...

    BalasHapus
  40. gan ane klik postingannya ko malah blank ya mohon pencerahanya

    BalasHapus
    Balasan
    1. Settingan di blog :
      Setelan -> lainnya -> Izinkan Feed Blog -> Penuh

      Hapus
  41. artikelnya beberapa keluar, beberapa blank putih. Fix nya gimana mas?

    BalasHapus
    Balasan
    1. coba di cek, data balikan JSON nya benar atau tidak

      Hapus
    2. Settingan di blog :
      Setelan -> lainnya -> Izinkan Feed Blog -> Penuh

      Hapus
  42. Thanks for sharing this totally informative post like that. It's really helpful. I'll give it a try and hope you keep posting some amazing posts!

    BalasHapus
  43. Makasi mas atas ilmunya, ngomong2 saya punya 2 pertanyaan... Yg dibagiaan menu ada tulisan Live update itu apa fungsinya ya? saya pencet2 kagak jadi, dan pertanyaan kedua... Kenapa saya make website 2 APK Builder setelah selesai diinstal dan diubah projectnya menjadi APK, dan saya instal ke hp saat loadning muncul gambar website 2 apk loading, gimana cara hilanginnya? soalnya apk punya mas saya instal, aman2 aja

    BalasHapus
  44. Makasi mas atas ilmunya, ngomong2 saya punya 2 pertanyaan... Yg dibagiaan menu ada tulisan Live update itu apa fungsinya ya? saya pencet2 kagak jadi, dan pertanyaan kedua... Kenapa saya make website 2 APK Builder setelah selesai diinstal dan diubah projectnya menjadi APK, dan saya instal ke hp saat loadning muncul gambar website 2 apk loading, gimana cara hilanginnya? soalnya apk punya mas saya instal, aman2 aja

    BalasHapus
    Balasan
    1. itu memang sudah tdk bs dipakai. Karena API media socialmedianya sudah berubah.
      di web2apk ada pilihan untuk mengganti splash screen apk loading dengan gambar sendiri

      Hapus
  45. Sudah berhasil di awalnya, tapi pas buka artikel, artikelnya gak muncul..gmana tu gan?

    BalasHapus
    Balasan
    1. di artikelnya kalo nggak salah ada setting base url, diganti aja sama url blognya agan

      Hapus
  46. Gan, ane udah ubah alamt blognya kok blank terus ya, padahal sama" pake blogspot. Apa ya yg salah

    BalasHapus
    Balasan
    1. Settingan di blog :
      Setelan -> lainnya -> Izinkan Feed Blog -> Penuh

      Hapus
  47. Pemberitahuan:

    Bagi teman-teman yang merasa kesulitan / butuh bantuan untuk project,
    Saya terbuka menerima jasa pembuatan Blog/Web menjadi aplikasi android APK
    Ataupun pembuatan aplikasi android hybrid (non-native)

    + Bisa Custom template
    + Standard / Full feature android seperti fitur Notification, Location, GPS, Email dsb.
    + Playstore

    WA: 08977791190
    email: davidpras1994@gmail.com

    BalasHapus
  48. malam mas, saya mau tanya ini, kl website di jadikan apk, terus dipasang admob, dan disubmit ke playstore, apakah tidak ada sangsi dari google, terhusus kalau website yang dijadikan apk itu bukanlah punya kita, tp punya orang lain..itu bagaimana ya...

    thanks

    BalasHapus
    Balasan
    1. ya jangan pake website orang lain dong..
      hitungannya udah pembajakan.

      Hapus
  49. cara nyisipin iklan admobnya gmna mas?? bingung saya?? pake script js gak ada yang work nyari di google

    BalasHapus
  50. kalau untuk blog ini: http://www.davidprasetyo.com/feeds/posts/default?alt=json-in-script&callback=myFunc

    Tapi kalau untuk wordpress gimana cara? dan cara memasukan ke index.html gimana?

    BalasHapus
    Balasan
    1. di wordpress ada plugin json API,
      lalu tinggal olah data JSON nya.

      Hapus
  51. release yang pake wordpress dong gan, sya masih penasaran buat belajar... masih bingung

    BalasHapus
  52. Om mau nanya misalkan kita mempublish artikelnya menggunakan feed hanya dengan label rss blog saja gimana.. misalnya hanya label berita saja tidak label lainnya. mohon pencerahannya ke email saya evanurbaya72@gmail.com. Terimakasih

    BalasHapus
    Balasan
    1. https://www.namablog.blogspot.com/feeds/posts/default/?q=label:rss

      Hapus
  53. Om mau nanya juga.. misalkan kita mau menambahkan share whatsapp di artikelnya gmana itu ya.. mohon penecerahannya. Terimakasih

    BalasHapus
    Balasan
    1. https://stackoverflow.com/questions/21935149/sharing-link-on-whatsapp-from-mobile-website-not-application-for-android

      Hapus
  54. Om misal mau merubah warna theme hijau ke merah gimana tuh.. nuhun pisann...

    BalasHapus
    Balasan
    1. Diubah lewat CSS , https://en.wikipedia.org/wiki/Cascading_Style_Sheets

      Hapus
  55. Sama mas... pertanyaan seperti dua diatas, mohon pencerahannya.. trimakasih. Salam

    BalasHapus
  56. di website 2 apk itu tidak ada ID Aplikasi..cara memasukkan ID Aplikasi apk gmn ya di htmlnya?

    BalasHapus
  57. keren gan, tutorialnya.. sukses sllu ya gan

    BalasHapus
  58. Gan, itu ngga ngeload adsense otimatis ya?, dan gambar thumbnailnya jadi buram ya gan. Efek json nya kah?

    BalasHapus
  59. Di index berhasil tapi pas masuk artikel blank, sudah dibenerin disetelan feed = penuh masih tetep gak jalan. hadeuuhh...

    BalasHapus
    Balasan
    1. Anehnya, kalo pake url www.davidprasetyo.com berhasil. gak ngerti, padahal menarik untuk dicoba

      Hapus
    2. saya juga mengalami hal sama

      Hapus
  60. bisa bantu buatkan bos biar kita kasi jatah Ngopi rokok + Rotinya hehheheh saya kurang paham kode2an api dll
    hubungi saya lewat WA 082333553844

    BalasHapus