Cara menggunakan aplikasi javascript untuk android

Membuat Aplikasi Mobile Native dengan JAVASCRIPT By NATIVESCRIPT

Nội dung chính Show

• Cara Pemesanan Online
• Kategori Buku
• Penulis Buku
• Menambahkan WebView ke aplikasi Anda
• Menambahkan WebView di tata letak aktivitas
• Menambahkan WebView di onCreate()
• Menggunakan JavaScript di WebView
• Mengaktifkan JavaScript
• Mengikat kode JavaScript ke kode Android
• Menangani navigasi halaman
• Menavigasi histori halaman web
• Menangani perubahan konfigurasi perangkat
• Mengelola jendela
• Bagaimana cara mengaktifkan JavaScript di Android?
• Apa fungsi JavaScript di hp?
• Gimana cara aktifkan JavaScript?
• JavaScript Chrome untuk apa?

[Cover Detail]

20%

Rp. 50.000,-
diskon 20% (hemat Rp. 10.000)

Rp. 40.000,-

Stok: ADA

Penulis/Pembuat	:	Kang Cahya
Kode Produk	:	LOKO-180
ISBN	:	978-602-6231-17-8
Tahun Terbit	:	Juli 2018
Jumlah Halaman/Durasi	:	115
Bonus	:	Source Code
Download	:	Daftar Isi / Sample Produk

Apakah Anda seorang pengembang Aplikasi Hybrid dan sedang mencari cara untuk membuat Aplikasi yang benar-benar Native? Atau Anda seorang pengembang web (Web Developer) yang sedang mencari cara untuk meng-upgrade skill ke dunia pengembangan mobile?

Dulu pembuatan sebuah Aplikasi Mobile Native cukup rumit, karena untuk membuat Komponen UI Native (komponen mobile asli bukan tiruan) harus menggunakan Java untuk ANDROID atau Objective C untuk iOS/Apple. Namun, sekarang cukup bermodalkan pengetahuan JavaScript dan CSS, kita dapat membuat Aplikasi Native dengan tool yg bernama NativeScript.

Selain itu, karena Aplikasi Native yang dibuat menggunakan NativeScript berbasis JavaScript, maka Aplikasi yang dibuat nantinya tidak hanya dapat berjalan Native pada perangkat Mobile, tapi juga secara otomatis dapat berjalan pada platform web.

Berikut beberapa materi yang dibahas didalam buku:

•  Pengenalan NativeScript. 
•  Persiapan dan Instalasi NativeScript.
•  Dasar-Dasar NativeScript.
•  Konsep Penggunaan NativeScript.
•  Menangani UI (User Interface) Native.
•  Studi Kasus Membuat Aplikasi Mobile Native.
•  Kolaborasi NativeScript, MySQL (Database), dan Web Service (REST) dengan PHP.

Cara Pemesanan Online

Kirim SMS/WA ke 0813 9035 6363 Format :
Nama#Alamat Lengkap#Kode/Judul Produk

Contoh :
Aditya#Jl. Arwana No. 24, Kec. Depok, Sleman, Yogyakarta#LOKO-111, LOKO-115

Keterangan :
Apabila buku yang dipesan lebih dari satu, pisahkan kode/judul buku dengan tanda koma.

Kategori Buku

Penulis Buku

Jika ingin menyediakan aplikasi web (atau hanya halaman web) sebagai bagian dari aplikasi klien, Anda dapat melakukannya menggunakan WebView. Class WebView adalah ekstensi class View Android yang memungkinkan Anda menampilkan halaman web sebagai bagian dari tata letak aktivitas Anda. Class ini tidak menyertakan fitur apa pun dari browser web yang dikembangkan sepenuhnya, seperti kontrol navigasi atau kolom URL. Semua yang dilakukan WebView secara default adalah menampilkan halaman web.

Skenario umum ketika menggunakan WebView menjadi sangat membantu adalah saat Anda ingin memberikan informasi di aplikasi yang mungkin perlu diperbarui, seperti perjanjian pengguna akhir atau panduan pengguna. Dalam aplikasi Android, Anda dapat membuat Activity yang berisi WebView, lalu menggunakannya untuk menampilkan dokumen Anda yang dihosting secara online.

Skenario lain ketika WebView menjadi sangat membantu adalah saat aplikasi Anda memberikan data kepada pengguna yang selalu memerlukan koneksi internet untuk mengambil data, seperti email. Dalam kasus ini, Anda mungkin menyadari bahwa lebih mudah untuk membuat WebView di aplikasi Android Anda yang menampilkan halaman web dengan semua data pengguna, daripada membuat permintaan jaringan, lalu mengurai data, dan merendernya dalam tata letak Android. Sebagai gantinya, Anda dapat merancang halaman web yang disesuaikan untuk perangkat Android, lalu menerapkan WebView di aplikasi Android Anda yang memuat halaman web.

Dokumen ini menunjukkan cara memulai WebView dan cara melakukan beberapa hal tambahan, seperti menangani navigasi halaman dan mengikat JavaScript dari halaman web Anda ke kode sisi klien di aplikasi Android Anda.

Menambahkan WebView ke aplikasi Anda

Untuk menambahkan WebView di aplikasi, Anda dapat menyertakan elemen di tata letak aktivitas, atau menetapkan seluruh jendela Aktivitas sebagai WebView di onCreate().

Menambahkan WebView di tata letak aktivitas

Untuk menambahkan WebView ke aplikasi Anda di tata letak, tambahkan kode berikut ke file XML tata letak aktivitas Anda:

Untuk memuat halaman web di WebView, gunakan loadUrl(). Contoh:

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.loadUrl("http://www.example.com")
    

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.loadUrl("http://www.example.com");
    

Menambahkan WebView di onCreate()

Untuk menambahkan WebView ke aplikasi Anda di metode onCreate() aktivitas, gunakan logika yang mirip dengan yang berikut ini:

    val myWebView = WebView(activityContext)
    setContentView(myWebView)
    

    WebView myWebView = new WebView(activityContext);
    setContentView(myWebView);
    

Kemudian muat halaman dengan:

    myWebView.loadUrl("http://www.example.com")
    

    myWebView.loadUrl("https://www.example.com");
    

Atau muat URL dari string HTML:

    // Create an unencoded HTML string
    // then convert the unencoded HTML string into bytes, encode
    // it with Base64, and load the data.
    val unencodedHtml =
            "<html><body>'%23' is the percent code for ‘#‘ </body></html>"
    val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
    myWebView.loadData(encodedHtml, "text/html", "base64")
    

    // Create an unencoded HTML string
    // then convert the unencoded HTML string into bytes, encode
    // it with Base64, and load the data.
    String unencodedHtml =
         "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
    String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
            Base64.NO_PADDING);
    myWebView.loadData(encodedHtml, "text/html", "base64");
    

Catatan: Ada beberapa batasan pada hal yang dapat dilakukan HTML ini. Lihat loadData() dan loadDataWithBaseURL() untuk informasi selengkapnya tentang opsi encoding.

Namun, sebelum berfungsi, aplikasi Anda harus memiliki akses ke Internet. Untuk mendapatkan akses Internet, minta izin INTERNET di file manifes Anda. Contoh:

    
        
        ...
    
    

Itulah semua yang Anda butuhkan untuk dasar WebView yang menampilkan halaman web. Selain itu, Anda dapat menyesuaikan WebView dengan mengubah hal-hal berikut:

• Mengaktifkan dukungan layar penuh dengan WebChromeClient. Class ini juga dipanggil saat WebView memerlukan izin untuk mengubah UI aplikasi host, seperti membuat atau menutup jendela dan mengirim dialog JavaScript kepada pengguna. Untuk mempelajari lebih lanjut proses debug dalam konteks ini, baca Proses Debug Aplikasi Web.
• Menangani peristiwa yang memengaruhi perenderan konten, seperti error pada pengiriman formulir atau navigasi dengan WebViewClient. Anda juga dapat menggunakan subclass ini untuk mengintersep pemuatan URL.
• Mengaktifkan JavaScript dengan mengubah WebSettings.
• Menggunakan JavaScript untuk mengakses objek framework Android yang telah Anda masukkan ke dalam WebView.

Menggunakan JavaScript di WebView

Jika halaman web yang ingin dimuat di WebView menggunakan JavaScript, Anda harus mengaktifkan JavaScript untuk Anda. Setelah JavaScript diaktifkan, Anda juga dapat membuat antarmuka di antara kode aplikasi dan kode JavaScript.

Mengaktifkan JavaScript

JavaScript dinonaktifkan di WebView secara default. Anda dapat mengaktifkannya melalui WebSettings yang dilampirkan pada WebView. Anda dapat mengambil WebSettings dengan getSettings(), lalu mengaktifkan JavaScript dengan setJavaScriptEnabled().

Contoh:

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.settings.javaScriptEnabled = true
    

    WebView myWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    

WebSettings memberikan akses ke berbagai setelan lain yang mungkin berguna bagi Anda. Misalnya, jika mengembangkan aplikasi web yang dirancang khusus untuk WebView di aplikasi Android, Anda dapat menentukan string agen pengguna kustom dengan setUserAgentString(), lalu mengkueri agen pengguna kustom di halaman web Anda untuk memverifikasi bahwa klien yang meminta halaman web Anda sebenarnya adalah aplikasi Android Anda.

Mengikat kode JavaScript ke kode Android

Saat mengembangkan aplikasi web yang dirancang khusus untuk WebView di aplikasi Android, Anda dapat membuat antarmuka di antara kode JavaScript dan kode Android sisi klien. Misalnya, kode JavaScript dapat memanggil metode di kode Android untuk menampilkan Dialog, alih-alih menggunakan fungsi alert() JavaScript.

Untuk mengikat antarmuka baru di antara kode JavaScript dan Android, panggil addJavascriptInterface(), dengan meneruskannya instance class untuk mengikat JavaScript dan nama antarmuka yang dapat dipanggil oleh JavaScript untuk mengakses class tersebut.

Misalnya, Anda dapat menyertakan class berikut di aplikasi Android:

    /** Instantiate the interface and set the context  */
    class WebAppInterface(private val mContext: Context) {

        /** Show a toast from the web page  */
        @JavascriptInterface
        fun showToast(toast: String) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
        }
    }
    

    public class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
    

Perhatian: Jika telah menetapkan targetSdkVersion ke 17 atau yang lebih tinggi, Anda harus menambahkan anotasi @JavascriptInterface ke metode apa pun yang ingin disediakan untuk JavaScript Anda (metode tersebut juga harus bersifat publik). Jika Anda tidak memberikan anotasi tersebut, metode ini tidak dapat diakses oleh halaman web Anda saat berjalan di Android 4.2 atau yang lebih tinggi.

Dalam contoh ini, class WebAppInterface memungkinkan halaman web untuk membuat pesan Toast, menggunakan metode showToast().

Anda dapat mengikat class ini ke JavaScript yang berjalan di WebView dengan addJavascriptInterface() dan menamai antarmuka Android. Contoh:

    val webView: WebView = findViewById(R.id.webview)
    webView.addJavascriptInterface(WebAppInterface(this), "Android")
    

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    

Tindakan ini akan membuat antarmuka yang disebut Android untuk JavaScript berjalan di WebView. Pada tahap ini, aplikasi web Anda memiliki akses ke class WebAppInterface. Misalnya, berikut beberapa HTML dan JavaScript yang membuat pesan toast menggunakan antarmuka baru saat pengguna mengklik tombol:

Anda tidak perlu melakukan inisialisasi antarmuka Android dari JavaScript. WebView otomatis membuatnya tersedia untuk halaman web Anda. Jadi, saat klik tombol, fungsi showAndroidToast() akan menggunakan antarmuka Android untuk memanggil metode WebAppInterface.showToast().

Catatan: Objek yang terikat ke JavaScript Anda berjalan di thread lain dan bukan di thread tempat objek tersebut dibuat.

Perhatian: Menggunakan addJavascriptInterface() memungkinkan JavaScript mengontrol aplikasi Android Anda. Tindakan ini dapat menjadi fitur yang sangat berguna atau masalah keamanan yang berbahaya. Saat HTML di WebView tidak dapat dipercaya (misalnya, sebagian atau seluruh HTML disediakan oleh orang atau proses yang tidak dikenal), maka penyerang dapat menyertakan HTML yang menjalankan kode sisi klien Anda dan kemungkinan semua kode yang dipilih penyerang tersebut. Dengan demikian, Anda tidak boleh menggunakan addJavascriptInterface() kecuali untuk menulis semua HTML dan JavaScript yang muncul di WebView. Anda seharusnya juga tidak mengizinkan pengguna untuk membuka halaman web lain yang bukan milik Anda, dalam WebView (sebagai gantinya, izinkan aplikasi browser default pengguna untuk membuka link asing—secara default, browser web pengguna akan membuka semua link URL, jadi berhati-hatilah jika Anda menangani navigasi halaman seperti yang dijelaskan di bagian berikut).

Menangani navigasi halaman

Saat pengguna mengklik link dari halaman web di WebView, perilaku defaultnya adalah Android meluncurkan aplikasi yang menangani URL. Biasanya, browser web default akan membuka dan memuat URL tujuan. Namun, Anda dapat mengganti perilaku ini untuk WebView, sehingga link akan terbuka dalam WebView. Anda kemudian dapat mengizinkan pengguna untuk menavigasi mundur dan maju pada histori halaman web mereka yang dikelola oleh WebView Anda.

Catatan: Demi alasan keamanan, aplikasi browser sistem tidak akan membagikan data aplikasinya dengan aplikasi Anda.

Untuk membuka link yang diklik oleh pengguna, berikan WebViewClient untuk WebView Anda, menggunakan setWebViewClient(). Contoh:

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.webViewClient = WebViewClient()
    

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebViewClient(MyWebViewClient);
    

Selesai. Sekarang semua link yang diklik pengguna akan dimuat di WebView Anda.

Jika Anda menginginkan kontrol lebih untuk tempat link yang diklik dimuat, buat WebViewClient Anda sendiri yang menggantikan metode shouldOverrideUrlLoading(). Contoh:

    private class MyWebViewClient : WebViewClient() {

        override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
            if (Uri.parse(url).host == "www.example.com") {
                // This is my web site, so do not override; let my WebView load the page
                return false
            }
            // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
            Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
                startActivity(this)
            }
            return true
        }
    }
    

    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if ("www.example.com".equals(Uri.parse(url).getHost())) {
                // This is my website, so do not override; let my WebView load the page
                return false;
            }
            // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }
    }
    

Kemudian, buat instance WebViewClient baru ini untuk WebView:

    val myWebView: WebView = findViewById(R.id.webview)
    myWebView.webViewClient = MyWebViewClient()
    

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebViewClient(new MyWebViewClient());
    

Sekarang, saat pengguna mengklik link, sistem akan memanggil shouldOverrideUrlLoading(), yang memeriksa apakah host URL cocok dengan domain tertentu atau tidak (seperti yang dijelaskan di atas). Jika cocok, maka metode akan menampilkan false agar tidak mengganti pemuatan URL (memungkinkan WebView untuk memuat URL seperti biasa). Jika host URL tidak cocok, maka Intent akan dibuat guna meluncurkan Aktivitas default untuk menangani URL (yang dicocokkan untuk browser web default pengguna).

Menavigasi histori halaman web

Saat mengganti pemuatan URL, WebView Anda otomatis mengakumulasi histori halaman web yang dikunjungi. Anda dapat menavigasi mundur dan maju di histori dengan goBack() dan goForward().

Misalnya, berikut adalah cara Activity Anda dapat menggunakan tombol Kembali perangkat untuk menavigasi mundur:

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        // Check if the key event was the Back button and if there's history
        if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
            myWebView.goBack()
            return true
        }
        // If it wasn't the Back key or there's no web page history, bubble up to the default
        // system behavior (probably exit the activity)
        return super.onKeyDown(keyCode, event)
    }
    

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // Check if the key event was the Back button and if there's history
        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
            myWebView.goBack();
            return true;
        }
        // If it wasn't the Back key or there's no web page history, bubble up to the default
        // system behavior (probably exit the activity)
        return super.onKeyDown(keyCode, event);
    }
    }

canGoBack() akan menampilkan true jika benar-benar ada histori halaman web untuk dikunjungi pengguna. Demikian juga, Anda dapat menggunakan canGoForward() untuk memeriksa apakah ada histori penerusan. Jika Anda tidak melakukan pemeriksaan ini setelah pengguna mencapai akhir histori, maka goBack() atau goForward() tidak akan melakukan apa-apa.

Menangani perubahan konfigurasi perangkat

Selama waktu proses, perubahan status aktivitas terjadi saat konfigurasi perangkat berubah, misalnya saat pengguna memutar perangkat atau menutup editor metode masukan (IME). Perubahan ini akan menyebabkan objek WebView aktivitas diakhiri dan aktivitas baru dibuat, yang juga membuat objek WebView baru yang akan memuat URL objek yang dihancurkan. Untuk mengubah perilaku default aktivitas, Anda dapat mengubah caranya menangani perubahan orientation di manifes Anda. Untuk mempelajari lebih lanjut penanganan perubahan konfigurasi selama waktu proses, baca Menangani perubahan konfigurasi.

Mengelola jendela

Secara default, permintaan untuk membuka jendela baru akan diabaikan. Hal ini berlaku jika jendela tersebut dibuka oleh JavaScript atau atribut target di suatu link. Anda dapat menyesuaikan WebChromeClient untuk memberikan perilaku Anda sendiri saat membuka beberapa jendela.

Perhatian: Agar aplikasi Anda lebih aman, sebaiknya cegah pop-up dan jendela baru agar tidak terbuka. Cara paling aman untuk mengimplementasikan perilaku ini adalah dengan meneruskan "true" ke dalam setSupportMultipleWindows() tetapi tidak mengganti metode onCreateWindow(), yang merupakan metode tempat setSupportMultipleWindows() bergantung. Namun, perhatikan bahwa logika ini juga mencegah semua halaman yang menggunakan target="_blank" di linknya untuk dimuat.

Bagaimana cara mengaktifkan JavaScript di Android?

Apa fungsi JavaScript di hp?

Gimana cara aktifkan JavaScript?

JavaScript Chrome untuk apa?