Membuat Aplikasi Peta Menggunakan Android Studio dan HTML

oleh Bayu Yanuargi

Pada postingan kali ini saya akan membahas bagaimana membuat aplikasi android studio sederhana (banget) untuk membuat aplikasi penampilan peta di Android Studio. Konsepnya sebenarnya adalah dengan menyatukan antara pemrograman android studio dan HTML.

Pada tutorial kali ini sebenarnya android studio hanya digunakan sebagai wadah dari HTML (web page) yang akan kita buat. Jadi bisa digunakan tidak hanya untuk peta, tapi semua jenis HTML file (web page) dengan versi offline bukan online.

Postingan ini saya buat buat berdasarkan permintaan teman-teman yang rumah cukup jauh dari rumah saya jadi nggak bisa datang untuk training. Juga untuk teman yang kemarin sempet datang tapi begitu sampai rumah saya laptopnya rusak :). 

loading...

Untuk itu dibutuhkan beberapa software yang harus di Install :

1. Android studio terbaru DOWNLOAD
2. Java SDK DOWNLOAD
3. Bluestack DOWNLOAD
4. HTML EDITOR, yang pada kesempatan kali ini saya menggunakan coffee cup HTML Editor

Silahkan instal keempat software di atas, jika sudah selesai silahkan update SDK android yang sudah terinstal sehingga semua SDK yang dibutuhkan akan dapat digunakan.

Untuk pembuatan Peta digital berbasis HTML silahkan ikuti langkah di postingan sebelumnya disini

Install semua SDK manager seperti gambar di bawah ini (diperlukan koneksi internet)

Setelah semua install selesai, sekarang buka android studio dan buat new Project

1. Buat new Project
2. Tentukan Nama aplikasinya
3. Buat new Empty activity
4. Kasih nama Activity dengan "Main Activity" dan "activity_main"

Lihat pada sisi kiri akan terlihat struktur dari program android kita :

Sekarang kita akan menambahkan direktori asset untuk menampung file HTML kita, klik kanan pada "app" folder, lalu :

Setelah asset folder terbuat, kita copy kan folder yang menyimpan file HTML kita kedalam folder asset tersebut. Menggunakan windows explorer, klik kanan foldernya lalu Copy.

Untuk pembuatan Peta digital berbasis HTML silahkan ikuti langkah di postingan sebelumnya disini

Klik kanan pada folder asset lalu Pastekan, seperti di bawah ini.

Hasilnya di folder asset telah masuk file HTML kita dan foldernya

Ok, tahap persiapan sudah selesai, saatnya untuk coding. Untuk itu sekarang masuk kedalam folder manifest dan modifikasi manifestnya, masukkan code berikut pada manifestnya, agar aplikasi kita dapat ijin melakukan akses internet.

Close Adding Code WordPress Blogger Have a different site? Click here for instructions Expert Tips Know where to place ads for maximum revenue. Learn More Best practices for using multiple ads on your site. Learn More Copyright © Chitika, Inc. 2016

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

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

Setelah manifest, kita akan membuka folder "res" --> "Layout" --> Activity_Main, masukkan code berikut ini :

<WebView

    android:layout_width="wrap_content"    

    android:layout_height="wrap_content"    

    android:id="@+id/webview"    

    android:layout_alignParentRight="true"    

    android:layout_alignParentEnd="true"    

    android:layout_alignParentLeft="true"    

    android:layout_alignParentStart="true"    

    android:layout_alignParentTop="true"    

    android:layout_above="@+id/adView" />

Setelah layout selesai dibuat, sekarang kita akan melakukan koding main activity, cari "Main_Activity" di folder "Java". copykan code di bawah ini.

package com.thebayyan.aplikasiku;

import android.app.Activity;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


import java.io.File;

public class MainActivity extends Activity {

    private WebView view;

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

        view = (WebView) this.findViewById(R.id.webview);
        view.getSettings().setJavaScriptEnabled(true);
        view.setWebViewClient(new MyBrowser());
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setLoadWithOverviewMode(true);
        view.getSettings().setUseWideViewPort(true);
        view.setScrollbarFadingEnabled(false);

        view.setWebChromeClient(new WebChromeClient()); 
         String filePath = "file:///android_asset/www/infobubles.html";

        File file = new File(filePath);

         
         view.loadUrl(filePath); //try js alert        
    private class MyBrowser extends WebViewClient {
        @Override        
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //ketika disentuh tombol back        
              if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) {
            view.goBack();           
              return true;
        }
            return super.onKeyDown(keyCode, event);
    }
}

__________________________________

Cari pada kode di atas  --> String filePath = "file:///android_asset/www/infobubles.html";

Sesuaikan dengan nama folder dan file yang anda copykan ke folder assets di atas tadi.

Sudah selesai, saatnya mencoba hasil coding kita ke emulator bluestack.

Buka bluestack dan klik tombol running :

Hasilnya akan seperti di bawah ini :

Jika anda ingin mencoba aplikasi buatan anda, silahkan build aplikasi tersebut menjadi APK

Setelah itu tunggu hingga prosesnya selesai, dan keluar notifikasi :

dan kita sudah berhasil membuat APK nya, tinggal dikirim ke HP kita.

Tidak sulit, kirim aja APK tersebut menggunakan email ke email yang ada di HP kita

setelah masuk ke HP kita tinggal install aja attachment APK tersebut.

untuk contoh, silahkan didownload APK hasil buatan saya DOWNLOAD

Close Adding Code WordPress Blogger Have a different site? Click here for instructions Expert Tips Know where to place ads for maximum revenue. Learn More Best practices for using multiple ads on your site. Learn More Copyright © Chitika, Inc. 2016

Demikian semoga membantu.