Membuat aplikasi webview sederhana (support javascript)

0
57

Tahap pertama yang kalian harus persiapkan adalah softwere android studio, karena tutorial kali ini menggunakan android studio untuk text editor dan build apknya. Bagi yang belum install bisa download softwerenya di webresmi android studio atau Klik disini,

klikdowlnoad-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

Untuk tutorial install Android studio bisa lihat disini => Tutorial install android studio.

Jika sudah beres dengan android studionya mari kita lanjut ke pembuatan aplikasinya., Yang pertama masuk ke aplikasi android studio, kemudian buat project baru klik “Start a new android studio project” dan pilih “Empty activity” Klik Next

start-a-new-android-studio-project-Membuat-aplikasi-webview-sederhana-lamongandev.com

pilih-empty-activity-Membuat-aplikasi-webview-sederhana-lamongandev.com

 

Kemudian akan ada form input sperti dibawah ini, isi “Name” dengan nama aplikasi kalian, isi input “Package Name” dengan domain kalian atau bisa tirukan sprti isian saya dibawah ini, Kemudian input “Save location” adalah lokasi project kalian nantinya biarkan default atau kalian ubah juga terserah. Pada Input language pilih java karena kita akan menggunakan java untuk bahasa programnya.

isi-name-and-package-project-Membuat-aplikasi-webview-sederhana-lamongandev.com

Klik “Finish” dan tunggu loading project selesai..

loading-project-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

Selesai-loading-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

Sekarang project kita sudah siap, Tahap kedua yakni waktunya ngoding aplikasi webview. Klik tab “activity_main.xml” untuk pindah ke file acrivity_main.xml

klik-tab-activity_main.xml-Membuat-aplikasi-webview-sederhana-lamongandev.com

Ganti script “androidx.constraintlayout.widget.ConstraintLayout” menjadi “RelativeLayout

ganti-constraintlayout-relativelayout-Membuat-aplikasi-webview-sederhana-lamongandev.com

Relativelayout-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

Kemudian hapus Script “Textview” dan ganti webview sperti screenshot di bawah ini

hapus-Textview-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

textview-dihapus-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

webview-relativelayout-Membuat-aplikasi-webview-sederhana-lamongandev.com

Jadi script lengkapnya seperti dibawah ini, Atau kalian bisa langsung copy saja dibawah ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

File “activity_main.xml” sudah jadi skrg kita pindah ngoding javanya, Klik tab mainactivity.java untuk menuju ke file mainactivity.java
klik-tab-mainactivity.java-Membuat-aplikasi-webview-sederhana-lamongandev.com

Tambahkan script berikut dibawah “setContentView(R.layout.activity_main);“, sperti screenshot di bawah ini

script-java-webview-Membuat-aplikasi-webview-sederhana-lamongandev.com

1
2
3
4
5
        WebView webviewku = findViewById(R.id.webview);
        webviewku.setWebViewClient(new WebViewClient());
        WebSettings webSettings = webviewku.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webviewku.loadUrl("https://lamongandev.com"); //ganti https://lamongandev.com dengan domain kalian

alt-enter-android-studio-Membuat-aplikasi-webview-sederhana-lamongandev.com

Jika muncul notif seperti diatas atau text berwarna merah, sorot textnya dan tekan tombol “alt+enter“, fungsinya untuk mengimport modul “webview/websettings“. Jadi script lengkapnya yakni sperti ini

script-lengkap-webview-Membuat-aplikasi-webview-sederhana-lamongandev.com

Langkah selanjutnya yakni menambahkan permission koneksi internet pada file manifest, caranya yakni. double klik pada file “AndroidManifest.xml

android-studio-manifest-Membuat-aplikasi-webview-sederhana-lamongandev.com

tambahkan script dibawah ini ke baris nomer 4,

android-studio-manifest-permission-internet-Membuat-aplikasi-webview-sederhana-lamongandev.com

Sekarang coba kita RUN aplikasinya, sambungkan hp anda melalui usb dan pastikan devicenya sudah terdeteksi. Jika terdeteksi maka akan terlihat di indikator android studio seperti dibawah ini

device-terdeteksi-Membuat-aplikasi-webview-sederhana-lamongandev.com

Jika belum terdeteksi..

device-belum-tersedia-Membuat-aplikasi-webview-sederhana-lamongandev.com

NB : Mengenai cara run android studio ke hp bisa lihat tutorial saya Disini

Saya anggap device sudah terdeteksi dan coba sakarang kita RUN appnya.

Membuat-aplikasi-webview-sederhana-lamongandev.com

Sampai disini project sudah hampir jadi, Sekarang tinggal ganti icon aplikasinya. caranya bisa lihat disini