Membuat Web/Blog Menjadi Aplikasi Dengan Android Studio .


Membuat Web/Blog Menjadi Aplikasi Dengan Android Studio.
Membuat Web/Blog Menjadi Aplikasi Dengan Android Studio.

Di jaman sekarang ini handphone/smartphone sudah dimiliki hampir seluruh umat manusia. Mungkin juga Anda salah satunya. Dengan perangkat Android menjadikan semuanya mudah dan cepat. Semua bisa dilakukan dengan tangan kita, kita bisa bermain game, nonton film terbaru, atau bahkan mendapatkan informasi dari seluruh dunia secara simultan. Maka, Tidak heran kalau penggunanya semakin hari semakin bertambah.

Nah, Pada kesempatan kali ini Imago Media akan berbagi tutorial mengani cara untuk membuat website atau blog pribadi menjadi aplikasi (APK) untuk android. Sederhananya, jika kalian memilii website kantor, website sekolah atau website apapun bisa dirubah menjadi Aplikasi/App yang bisa di install dan langsung dibuka melalui perangkat android tanpa membuka browser lagi. 

Untuk merubah Website/Blog menjadi Aplikasi ini dibuat menggunakan Aplikasi Populer yang dikembangkan oleh Google sebagai Program resmi untuk membuat Aplikasi Android yang tersedia di Google Playstore yaitu Software Android Studio.

Cara Membuat Website/Blog Menjadi Aplikasi Android Dengan Android Studio.

Sebelum kita masuk pada pembahasan Cara Membuat Website/Blog Menjadi Aplikasi Android Dengan Android Studio, kita ketahui dulu apa itu Webview. Kenapa, karena untuk merubah Website/Blog Menjadi Aplikasi Android Dengan Android Studio itu disebut dengan Aplikasi Webview, artinya Website/Blog akan diload atau ditampilkan dalam Aplikasi yang sudah diprogram dalam modul yang disebut dengan Webview. 

Mengenal apa itu Webview dalam Android Studio?

Webview dalam Android Studio adalah class di Android Studio untuk menampilkan halaman web atau url (Host) pada aplikasi android. Dengan adanya Webview  pada android pasti akan sangat mempermudah pengunjung untuk melihat sebuah tampilan web/blog langsung melalui aplikasi. Sederhananya, pengguna bisa mengakses website/blog tanpa harus menggunakan browser tambahan.

Sebagai ilustrasi dengan Android System Webview ini, maka setiap kali pengunjung Website/Blog kamu maka tidak harus membuka website/blog tersebut pada browser terpisah. Dengan Aplikasi Webview ini tentu akan mempermudah pengguna mengakses.

Jadi intinya Website/Blog yang dipadukan dengan Android system webview mempermudah pengunjung dengan memberikan kemudahan dan kenyamanan ketika menjalankan sebuah aplikasi tanpa harus bolak balik beralih dari satu aplikasi ke aplikasi lain hanya karena ingin membuka sebuah tampilan web.

Cara Membuat Aplikasi Android Dengan Webview Untuk Website/Blog :

1. Silahkan download dulu Source Code yang sudah saya sediakan.
Download Sourcecode Webview Imago Media

2. Ekstrak file Tersebut Dalam Direktori Penyimpanan Hardisk
Ekstrak Source Code Dalam Direktori Drive
Ekstrak Source Code Dalam Direktori Drive

3. Import Project di Android Studio pada Direktori Drive Hasil Ekstrak Sourcecode.
Open Project di Android Studio

4. Saat Import Pastikan Komputer Terkoneksi dengan Internet, dan tunggu sampai proses import dan update sistem selesai.
proses import  pastikan ada koneksi internet
Proses Import  Pastikan Ada Koneksi Internet

5. Merubah Nama Package atau Id Aplikasi.

Mengenal Id Aplikasi Android Studio

Id Aplikasi ini merupakan Id unik yang dimiliki setiap aplikasi untuk dikenali. Seperti kasus pada Domain dimana hanya boleh ada satu domain dan tidak boleh terdupiklat. Begitu juga Id Aplikasi. Id Aplikasi ini harus unik untuk mengenali suatu aplikasi. Untuk penjelasan lebih detail mengenai Id Aplikasi ini bisa dilihat di https://developer.android.com/studio/build/application-id?hl=id

Untuk menyetel Id Aplikasi ini, ikuti langkah - langkahnya sebagai berikut :

5.1. Buka File Build.gradle (module;Webview_app.app) 
merubah package dan id aplikasi
Merubah Package dan Id Aplikasi

5.2. Lihat di bilah Code Kemudian Cari pada baris code.
    defaultConfig {
        applicationId "com.imago.webviewapp"
        minSdkVersion 19
        targetSdkVersion 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
Ganti webviewapp dengan Id Aplikasi pada baris applicationId "com.imago.webviewapp" misalkan menjadi  applicationId "com.imago.aplikasianda"

Jangan Merubah com.imago. karena bisa mengakibatkan error 

5.3 Sinkronisasi Perubahan Nama Aplikasi.
sync nama package dan id aplikasi
Sinkronisasi nama package dan id aplikasi

Setelah merubah Id Aplikasi, langkah selanjutnya adalah melakukan sinkronisasi modul dalam project. Untuk melakukan sinkronisasi caranya Dengan Tekan Tombol Sync yang muncul di kanan atas. Tunggu prosesnya sampai selesai. Sistem secara otomatis akan melakukan sinkronisasi.

6. Merubah Nama Aplikasi.
Setelah merubah Id Aplikasi dalam package, langkah selanjutnya adalah merubah Nama Aplikasi. Nama Aplikasi ini adalah nama yang akan muncul dibawah icon Aplikasi saat diinstall di smartphone. Lihat gambar berikut ini :
Nama Aplikasi Android
Nama Aplikasi Android
Nama Aplikasi ini juga akan muncul juga pada halaman depan saat Aplikasi di Upload di Google Playstore. Untuk merubahnya, ikuti langkah berikut ini :

6.1. Merubah Nama Aplikasi di String dengan membuka App/Res/Values/String.xml
Merubah Nama Aplikasi di String.xml
Merubah Nama Aplikasi di String.xml

Ganti  <string name="app_name">Imago Media</string> dengan Nama Aplikasi Anda misalnya  <string name="app_name">Aplikasi Anda</string>


7. Merubah Url Webview Yang Ditampilkan di Aplikasi.

Merubah url domain yang ditampilkan
Merubah Url Domain yang ditampilkan

Ditahap ini merupakan tahap paling penting yaitu menentukan website/blog yang ingin load atau ditampilkan oleh Aplikasi. Untuk merubahnya buka MainActivity.kt yang berada di App/java/com/imago/webviewapp/MainActivity.kt

Temukan code dibawah ini dibilah kanan :
   private fun init(){
        url = "https://www.blog.imagomedia.co.id/"
        loading = findViewById(R.id.pb_loading)
        webView = findViewById(R.id.wv_page)
    }
Ganti https://www.blog.imagomedia.co.id/ Dengan Url Website/Blog yang akan ditampilkan di aplikasi.

8. Cara Build Signed Apk di Android Studio.
Jika semua perubahan sudah dilakukan, langkah selanjutnya adalah menggenerate code Aplikasi Webview menjadi file .Apk agar bisa di install di Smartphone berbasis Android. Ikuti langkah berikut ini untuk menggenarate Apk.

Build Signed Apk di Android Studio
Build Signed Apk di Android Studio
8.1. Klik Build Pada Tab di android Studio
8.2. Pilih Generate Signed Bundle or APK dan Pilih APK (Lihat Gambar berikut).
pilih APK dan Pilih Next
Pilih APK dan Klik Next

9. Mengisi Data Keystore Saat Build APK.

Pengisian Data Keystore Untuk Build APK
Pengisian Data Keystore Untuk Build APK

Mengenal Sistem keystore Android 

Sistem Keystore Android memungkinkan Anda menyimpan kunci kriptografis dalam container agar lebih sulit untuk diekstrak dari perangkat. Setelah berada di keystore, kunci tersebut dapat digunakan untuk operasi kriptografi tanpa mengimpor materi kunci lainnya. Selain itu, keystore menawarkan fasilitas untuk membatasi kapan dan bagaimana kunci dapat digunakan, seperti mengharuskan autentikasi pengguna untuk penggunaan kunci atau membatasi kunci agar hanya digunakan dalam mode kriptografi tertentu. 

Keystore ini merupakan file yang penting yang digunakan untuk keperluan Update Aplikasi. Simpan ditempat khusus dan jangan sampai hilang. Karena jika hilang maka Aplikasi anda tidak akan bisa untuk di Update di Google Playstore. Nah untuk itu isikan data keystore dan pilih penyimpanan file (.jks) ini untuk nanti di load untuk Update Aplikasi.

10. Membuat Release Aplikasi dalam Bentuk APK di Android Studio.

Membuat Release Aplikasi dalam Bentuk APK di Android Studio.

Membuat Release Aplikasi dan Memilih Direktori Hasil Buil APK.

Setelah mengisi data Keystore (.jks) langkah kemudian adalah membuat Release APK. Pilih tab Release pada box kemudian pilih direktori penyimpanan hasil Build APK di komputer anda.  Tunggu sampai Proses Build APK Selesai.

11. Menguji Hasil Build APK di Smartphone Android.

Menguji Hasil Build APK di Smartphone Android

Menguji Hasil Build APK di Smartphone Android

Jika berhasil saat Build APK dari Android Studio, langkah kemudia adalah melakukan pengujian APK Hasil Build APK di Smartphone Android. Buka Folder hasil Build APK yang dikenali dengan app-release.apk kemudian install file APK tersebut di Smartphone kesayangan Anda. 

Demikian Cara Membuat Website/Blog Menjadi Aplikasi Android Dengan Android Studio. Semoga bermanfaat. 

Untuk mendapatkan Source Code Lengkap Webview Dengan Android Studio silahkan unduh disini Download 


Untuk Demo Aplikasi silahkan unduh disini Download


Untuk Demo Aplikasi Dari Google Playstore silahkan unduh disini Download 


Jika masih ada pertanyaan Silahkan menghubungi Admin Imago Media

Untuk mempermudah Pengguna Agar bisa Membuat Web/Blog Menjadi Aplikasi Dengan Android Studio. Admin Imago Media Akan melengkapinya dalam bentuk Video Tutorial Yang bisa dilihat di Postingan ini : (Masih proses)

Posting Komentar

Lebih baru Lebih lama