Membuat aplikasi android dengan html dan php

Salah satu cara membuat aplikasi Android yang termudah adalah menggunakan komponen WebView. Dengan webview kita dapat membuat aplikasi berbasis web namun dengan citarasa aplikasi native. Barangkali masih ada yang bingung, apa itu ‘webview‘ atau ‘aplikasi native‘?

Kalau kita bikin suatu aplikasi Android murni menggunakan Java atau Kotlin menggunakan Android Studio (atau IDE yang lain) maka kita menyebutnya sebagai ‘aplikasi native‘. Sedangkan kalau membuat aplikasi Android menggunakan bahasa selain Java/Kotlin maka aplikasi tersebut adalah non-native. Pada umumnya aplikasi non native menggunakan bahasa pemrograman yang dapat dijalankan web browser yang sifatnya client side seperti Javascript, JQuery, AJAX, HTML. Untuk script yang berbasis server side semacam PHP, NodeJS, dll sebenarnya bisa namun dengan batasan tertentu, nanti akan saya jelaskan lebih detail untuk scripting server side ini

Untuk HTML sebenarnya bukan bahasa pemrograman ya, namun semacam markup language saja

Berhubung Android adalah smart operating system, kita dapat memanfaatkan celah ini untuk membuat aplikasi Android namun menggunakan bahasa pemrograman web. Jadi inti dari menggunakan metode ini adalah membuat aplikasi Android yang di dalamnya ada semacam webbrowser yang menjalankan script Javascrip, HTML, dll

Nah, jika Anda menggunakan Android Studio sebagai IDE (Integrated Development Environment), maka komponen yang dapat digunakan untuk membuat web browser di dalam aplikasi adalah komponen ‘WebView‘. Sampai disini sudah pada paham kan arah artikel ini? 🙂

Untuk membuat aplikasi Android berbasis bahasa pemrograman web tidak hanya dapat dilakukan dengan Android Studio (harus menguasai Java juga). Buat Anda yang belum familiar dengan Java, Anda dapat membuatnya murni menggunakan bahasa pemrograman web kemudian di-build menggunakan Cordova, PhoneGap, Xamarin atau yang lain

Baiklah, mari kita coba menggunakan komponen webview di project aplikasi kita

1.Buat Project Android baru di Android Studio melalui menu File-New-New Project, beri nama file Anda dengan (misal) ‘webview’

2. Buka file ‘activity_main.xml’, klik tab ‘Design’ dan kemudian ambil komponen WebView dari Component Pallete, letakkan di form design (lihat gambar di bawah

3. Klik tab ‘Text’ dan tambahkan id untuk komponen webview sebagai berikut android:id="@+id/activity_main_webview"

4. Tambahkan Java Class baru (klik kanan folder path ‘webview’) untuk membuat sebuah instance webview sebagai WebViewClient. Simpan dengan nama (misal) ‘MyAppWebViewClient.java’

Isikan script di bawah

public class MyAppWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(Uri.parse(url).getHost().endsWith("saptaji.com")) {
            return false;
        }

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        view.getContext().startActivity(intent);
        return true;
    }
}

5. Buka file MainActivity.java, dan tambahkan kode berikut:

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.loadUrl("http://saptaji.com/");
        mWebView.setWebViewClient(new MyAppWebViewClient());
    }

    @Override
    public void onBackPressed() {
        if(mWebView.canGoBack()) {
            mWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

6. Terakhir, buka file AndroidManifest.xml, tambakan INTERNET permissin dan settingan ‘Clear Text’ browser sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.saptaji.webview">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:usesCleartextTraffic="true"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Sudah selesai, tinggal Run aja project aplikasi WebView Anda. Jika semuanya sudah benar, maka hasilnya seperti tampilan pada gambar berikut

Buat Anda masih bingung bisa simak video tutorial di Youtube sebagai berikut:

Ohya, script sudah saya posting di github, silahkan diunduh dan dikembangkan sendiri ya, misalnya mengakses file html yang ada di smartphone (kalau contoh di atas masih mengakses web secara online) sehingga aplikasi Anda akan semakin terlihat ‘native’. Nantikan tutorial berikutnya ya …

About The Author

Saptaji, ST. MT.Tr

a Technopreneur - writer - Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com

Apakah PHP bisa membuat aplikasi?

Langkah langkah membuat aplikasi berbasis Android?

Bahasa pemrograman apa yang digunakan untuk membuat aplikasi Android?

Bagaimana cara membuat aplikasi mobile?