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.
--------
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.
Caranya adalah download website 2 apk builder
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/
langkah yg ke6 caranya gimana?
BalasHapuslangkah ke 6 itu pengaturan dan tataletak direktori file-file.
Hapusjadi kalo agan ada file css, js, dan images taruh di folder css, js, dan images.
index.html adalah file yang dipanggil pertamakali (halaman depan)
masih bingung. dapetnya file css,js dimana?
BalasHapusdownload contoh template disini
HapusContent di tab Popular ko ga muncul ya?
BalasHapusjson api buat popular post kan emang ga ada
ngatasi nya gimana bro?
kalo saya popular post disitu masih manual.
Hapusjadi saya buat tag/label popular pada 10 postingan teratas.
saya jg masih mencari API untuk me-list popular post secara otomatis
ok,
Hapuskalo nyari template kaya gitu dimana ya? selain base nya Gravity
makasih nih template nya bagus
banyak sih kalo mau cari di google.
Hapusada material design dll..
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?
BalasHapusnggak..
Hapuskalo mau ada iklannya kodenya mesti diembed di html di aplikasinya
cara ngerender json nya gimana?
BalasHapusbisa pake jquery, begini :
Hapushttp://davithace.github.io/davidprasetyo/plugins/imdbinfo.js
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 ??
BalasHapusada databasenya? mysql atau semacamnya?
Hapusatau pakai bahasa server site seperti PHP?
jika ya maka jelas tidak bs
mau tanya untuk website yg membutuhkan database mysql apa bisa dibuat menjadi apk juga?
BalasHapuskalau tidak bisa apa ada solusi yg lain agar tetap terkoneksi dengan database di server?
trims... :)
bisa. tapi diperlukan API, jembatan/pihak ketiga yg bisa membuat aplikasi berkomunikasi dengan server.
Hapuscoba cari info dulu tentang "RESTfull API" mas :)
langkah ke 13 kebawah blom ngerti...kan ada themes trus gimana cara masukin sample kode ke theme?
BalasHapusbisa cari info lebih jauh di google tentang "how to render json data to html"
Hapusintinya agan tinggal perhatiin kode di dalem tag >> script type="text/javascript"
Kalo webnya wordpress dan ada woocommerce nya, apakah semua fitur penjualana bisa berjalan? Terimakasih.
BalasHapusuntuk fitur penjualan harus ada API untuk GET & POST data atau untuk insert ke database
HapusSaya buntu sampe ke tahap render... nyerah.. ga ngerti
BalasHapuskeywordnya append json data to html, render json data to html
Hapuscontohnya 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 :)
gan cara merender JSON ke website gimana? infonya gan mohon...
BalasHapuskeywordnya "append json data to html", "render json data to html"
Hapusbisa cari referensinya di google karena tiap website akan punya code yang berbeda..
supaya bisa jadi link gini gimana? https://raw.githubusercontent.com/davithace/davidwebapp/gh-pages/index.html
Hapus????
Hapusitu hanya contoh code cara merender jsonnya.
Komentar ini telah dihapus oleh pengarang.
BalasHapuskalau udah di render jsonya trus gimana lagi? tutor nya donk :v masih basic
BalasHapusmas itu redenrnya gmn si aku kurang paham
BalasHapusGan, mending buka jasa pembuatan aplikasinya. hahha nanti ane pasti pake jasa nya
BalasHapusSudah dibuka jasanya gan :) Thankss
HapusGan 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
BalasHapusMohonpencerahannya mas david klo ada waktu email saya yah krisryuga@gmail.com
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusNo. 14 masih blm mudeng gan,,gmn maksdnya,,,udah dibaca berkali2 tapi masih buntu..help,,
BalasHapusWah keren nih, ijin bookmark :D
BalasHapusPagi mas..
BalasHapusJika di blog terdapat Iklan AdSense, apakah iklan tersebut menjadi responsive secara otomatis ?
Mohon Penjelasannya dan terima Kasih..
Biasanya ada di menu pada widget adsensenya.. harusnya sudah
HapusArtikel bagus ringkas mudah dimengerti, untuk mengetahui lebih lanjut Anda bisa merujuk ke artikel di aplikasi android gratis
BalasHapuswah keren kisanak, langsung saya praktekkan nih
BalasHapusmasih bingung mas :D, buatin tutor yg pekek gambar step by step mas klok bisa yg dr blogspot ke apk
BalasHapusmentok di render json nya... Mohon bantuannya gan
BalasHapusmas 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....
BalasHapusWah keren nih, kebetulan lagi ada proyek pembuatan aplikasi web. Thanks infonya mas David...
BalasHapusmantap gan, ane sekali coba langsung bisa.! Gan kalo bikin web baisis prestashop dan osclass ada nggak.? terim kasih.
BalasHapusitu bisa lewat hp gk ya bikinnya. ������ android user nih
BalasHapusmantap om tutornya.izin comot ya
BalasHapusjangan dicomot dong haha
Hapusapa saja software yg di gunakan untk mmbuat aplikasi website android native selain android studio. software yang agak ringan. dan langkah langkahnya.
BalasHapusBuka jasa pembuat aplikasi aja gan,, hehe.. pasti aku hubungi..
BalasHapusSudah dibuka jasanya :)
HapusMantap bos, ini cara yang masuk akal ane kira, luar biasa,
BalasHapusMungkin bisa dijelaskan sedikit lebih dalam kekurangan teknik ini dibanding kan dengan aplikasi-aplikasi berat itu...
Kelebihannya, ya cara ini terbilang instant..
Hapuspasang json blogspotnya diman ya?
BalasHapusTerus cara upload di google play store gimana gan?
BalasHapusDaftar dulu di google play kalo gak salah biaya pendaftarannya $25
HapusTerus cara upload di google play store gimana gan?
BalasHapusmau 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
BalasHapustergantung sih,
Hapuscoba install plugin untuk json api (feed) wordpress dulu
Kalau native gmn caranya Om???
BalasHapusKalau native bisa pakai android studio & SDK tools
HapusBerarti buat dari awal lah om??? Hadeuh...
BalasHapusgan ane klik postingannya ko malah blank ya mohon pencerahanya
BalasHapusSettingan di blog :
HapusSetelan -> lainnya -> Izinkan Feed Blog -> Penuh
artikelnya beberapa keluar, beberapa blank putih. Fix nya gimana mas?
BalasHapuscoba di cek, data balikan JSON nya benar atau tidak
HapusSettingan di blog :
HapusSetelan -> lainnya -> Izinkan Feed Blog -> Penuh
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!
BalasHapusKalo untuk wapka bisa ga ya??
BalasHapusMakasi 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
BalasHapusMakasi 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
BalasHapusitu memang sudah tdk bs dipakai. Karena API media socialmedianya sudah berubah.
Hapusdi web2apk ada pilihan untuk mengganti splash screen apk loading dengan gambar sendiri
Sudah berhasil di awalnya, tapi pas buka artikel, artikelnya gak muncul..gmana tu gan?
BalasHapusdi artikelnya kalo nggak salah ada setting base url, diganti aja sama url blognya agan
HapusGan, ane udah ubah alamt blognya kok blank terus ya, padahal sama" pake blogspot. Apa ya yg salah
BalasHapusSettingan di blog :
HapusSetelan -> lainnya -> Izinkan Feed Blog -> Penuh
Pemberitahuan:
BalasHapusBagi 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
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...
BalasHapusthanks
ya jangan pake website orang lain dong..
Hapushitungannya udah pembajakan.
cara nyisipin iklan admobnya gmna mas?? bingung saya?? pake script js gak ada yang work nyari di google
BalasHapuskalau untuk blog ini: http://www.davidprasetyo.com/feeds/posts/default?alt=json-in-script&callback=myFunc
BalasHapusTapi kalau untuk wordpress gimana cara? dan cara memasukan ke index.html gimana?
di wordpress ada plugin json API,
Hapuslalu tinggal olah data JSON nya.
release yang pake wordpress dong gan, sya masih penasaran buat belajar... masih bingung
BalasHapuskalo dari hp bisa gak gan?
BalasHapusOm 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
BalasHapushttps://www.namablog.blogspot.com/feeds/posts/default/?q=label:rss
HapusOm mau nanya juga.. misalkan kita mau menambahkan share whatsapp di artikelnya gmana itu ya.. mohon penecerahannya. Terimakasih
BalasHapushttps://stackoverflow.com/questions/21935149/sharing-link-on-whatsapp-from-mobile-website-not-application-for-android
HapusOm misal mau merubah warna theme hijau ke merah gimana tuh.. nuhun pisann...
BalasHapusDiubah lewat CSS , https://en.wikipedia.org/wiki/Cascading_Style_Sheets
HapusSama mas... pertanyaan seperti dua diatas, mohon pencerahannya.. trimakasih. Salam
BalasHapusdi website 2 apk itu tidak ada ID Aplikasi..cara memasukkan ID Aplikasi apk gmn ya di htmlnya?
BalasHapuskeren gan, tutorialnya.. sukses sllu ya gan
BalasHapusSukses selalu juga gannn
HapusGan, itu ngga ngeload adsense otimatis ya?, dan gambar thumbnailnya jadi buram ya gan. Efek json nya kah?
BalasHapusDi index berhasil tapi pas masuk artikel blank, sudah dibenerin disetelan feed = penuh masih tetep gak jalan. hadeuuhh...
BalasHapusAnehnya, kalo pake url www.davidprasetyo.com berhasil. gak ngerti, padahal menarik untuk dicoba
Hapussaya juga mengalami hal sama
Hapusbisa bantu buatkan bos biar kita kasi jatah Ngopi rokok + Rotinya hehheheh saya kurang paham kode2an api dll
BalasHapushubungi saya lewat WA 082333553844