» »

2015-09-01

Tutorial: Android Studio Mobile Web, Webview HTML5, CSS, Content Web Service (Json & Ajax), jQuery Mobile

Berikut adalah tutorial untuk mengembangkan aplikasi Android dengan pendekatan web. Pada kesempatan kali ini, akan dibahas bagaimana membuat sebuah halaman web yang responsive (dimana tampilan halaman web akan disesuaikan dengan ukuran layar device), dan mengoperasikan perintah-perintah tertentu dengan menggunakan Jquery Mobile. Berikut tutorialnya:
  1. Buka Android Studio, Click File, New Project
    2. New Project
  2. Beri nama Project Anda, misalkan Demo, kemudian tekan Next
    3. Application Name, Company Domain
  3. Pilih versi API 17 yaitu Jelly Bean klik Next
    4. Minimum SDK Version
  4. Pilih Blank Activity, klik Next
    5. Blank Activity
  5. Ketikkan Activity Name, Layout Name, dan juga Title, klik Finish
    6. Activity Name, Layout Name, Title
  6. Buatlah satu tombol untuk menambahkan notifikasi pada Layout MainActivity, berikut source code activity_main.xml:
    7. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    tools:ignore="MergeRootFrame">

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


  7. Tambahkan sebuah webview, beserta perintah untuk membuat javascript enabled pada MainActivity. Berikut source code MainActivity.java:
    8. import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {
    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);
        // Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/www/index.html");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}


  8. Tekan alt+enter jika terdapat pesan kesalahan karena ada library yang belum di import
    9. Import Library
  9. Buatlah sebuah directory assets/www pada folder main
    10. New Directory pada main
    beri nama directory assets/www


  10. Buat file index.html pada folder tersebut, Aplikasi ini akan menggunakan json yang diperoleh dari http://www.openweathermaps.org/. Berikut source codenya:
    • javascript.js
      • Date.prototype.ConverterLocaleString = function() {
  var customDate = this.toLocaleString();
  if (typeof Date.prototype.toLocaleFormat == 'function') {
    customDate = this.toLocaleFormat();
  } else {
    customDate = this.toTimeString();
  }
  
  var localeStringEnd = customDate.search(/GMT/i);
  if (localeStringEnd > 0) {
    customDate = customDate.substring(0, localeStringEnd);
  }
  return customDate;
}

function convertTime(inputtext) {
  var outputtext = "";
  if (inputtext >= 100000000000000) {
    inputtext = Math.round(inputtext / 1000);
  } else {
    if (inputtext > 10000000000)
      extraInfo = 1;
    inputtext = (inputtext * 1000);
  }
  var datum = new Date(inputtext);
  if (isValidDate(datum)) {
    outputtext += datum.ConverterLocaleString();
  } else {
    outputtext += "Sorry, can't parse this date.
    Check your timestamp, strip letters and punctuation marks.";
  }
  return outputtext;
}

function isValidDate(d) {
  if (Object.prototype.toString.call(d) !== "[object Date]")
    return false;
  return!isNaN(d.getTime());
}

function find(result) {
  var temp = (result.main.temp - 273.15).toFixed(2);
  $("#city").text(result.name + ', ' + result.sys.country).css("font-weight", "Bold");
  $("#temp").html('<img src="http://openweathermap.org/img/w/' + result.weather[0].icon + '.png" />' + temp + '°C');
  $("#extra").text(result.weather[0].main);
  $("#wind").html(result.wind.speed + ' m/s
    (' + result.wind.deg + '°)');
  $("#cloud").text(result.weather[0].description);
  $("#pressure").text(result.main.pressure + ' hpa');
  $("#humidity").text(result.main.humidity + ' %');
  $("#sunrise").text(convertTime(result.sys.sunrise));
  $("#sunset").text(convertTime(result.sys.sunset));
  $("#latlon").html('<a href="http://openweathermap.org/Maps?zoom=12&lat%27%20+%20result.coord.lat%20+%20%27&lon=%27%20+%20result.coord.lon%20+%20%27.63&layers=B0FTTFF">[' + result.coord.lat + ',' + result.coord.lon + ']</a>');
  $("#result").show();
}

$(document).on("pagecreate", "#weather", function() {
  $("#search-1").keydown(function(event) {
    if (event.which == 13) {
      var query = $("#search-1").val();
      $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + query,function(result){
        find(result);
      });
    }
});

$("#find").click(function() {
  var query = $("#search-1").val();
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + query,function(result){
      find(result);
    });
  });
});

$(document).on("pagecreate", "#gesture", function() {
  // Navigate to the next page on swipeleft
  $("#gesture").on("swipeleft", function() {
    $(":mobile-pagecontainer").pagecontainer("change", "#about", {
      transition: "slide"
    });
  });
});

$(document).on("pagecreate", "#about", function() {
  // Navigate to the next page on swiperight
  $("#about").on("swiperight", function() {
    $(":mobile-pagecontainer").pagecontainer("change", "#gesture", {
      transition: "slide",
      reverse: true
    });
  });
}
);

    • index.html
      • <!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather Check</title>
<link rel="stylesheet" href="themes/PAPB-C-04.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="javascript.js"></script>

</head>
<body>
<div id="home" data-role="page">
<div class="ui-header ui-bar-a" data-swatch="a" data-theme="a" data-form="ui-bar-a" data-role="header" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Home</h1>
</div>

<div data-role="main" class="ui-content" data-theme="a">
<a href="#weather" data-theme="a" class="ui-btn ui-corner-all" data-transition="pop">Weather Info</a>
<a href="#gesture" data-theme="a" class="ui-btn ui-corner-all" data-transition="pop">Gesture Test</a>
</div>

<div data-role="footer" data-theme="a" data-position="fixed" role="contentinfo" data-tap-toggle="false">
<h4 aria-level="1" role="heading">Kelompok 10</h4>
</div>
</div>

<div id="weather" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" >
<h1>Weather</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="slide" data-direction="reverse">Home</a>
</div>
<div data-role="main" data-theme="b" class="ui-content">
<input type="search" name="search-1" id="search-1" placeholder="City Name">
<button data-icon="search" id="find">Search</button>
</div>

<div data-role="content" data-theme="b" id="result" style="display:none;">
<center><h4 id="city"></h4>
<h4 id="temp"></h4>
<p id="extra"></p></center>
<table class="table table-striped table-bordered table-condensed" id="tableinfo"
border="1">
<tbody>
<tr><td>Wind</td><td id="wind"></td></tr>
<tr><td>Cloudiness</td><td id="cloud"></td></tr>
<tr><td>Pressure</td><td id="pressure"></td></tr>
<tr><td>Humidity</td><td id="humidity"></td></tr>
<tr><td>Sunrise</td><td id="sunrise"></td></tr>
<tr><td>Sunset</td><td id="sunset"></td></tr>
<tr><td>Geo coords</td><td id="latlon"></td></tr>
</tbody>
</table>
</div>

<div data-role="footer" data-theme="b" data-position="fixed" role="contentinfo" data-tap-toggle="false">
<h4 aria-level="1" role="heading">&copy; Kelompok 10</h4>
</div>
</div>
<div id="gesture" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" >
<h1>Gesture Test</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="slide" data-direction="reverse">Home</a>
</div>
<div data-role="main" class="ui-content" id="swipe" data-theme="b">
<h4>Swipe to Left to open ABOUT Page</h4>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" role="contentinfo" data-tap-toggle="false">
<h4 aria-level="1" role="heading">&copy; Kelompok 10</h4>
</div>
</div>
<div id="about" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" >
<h1>About</h1>
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="slide" data-direction="reverse">Home</a>
</div>
<div data-role="main" data-theme="b">
<center><h4 role="heading" style="font-weight:bold;">Aplikasi ini dibuat oleh Kelompok 10</h4>
<h4>Anggota:</h4>
<h4>Fadel Trivandi D 115090607111027</h4>
<h4>Mikko Saifudin A S 115060801111092</h4>
<h4>Romi Alfian 125150201111065</h4>
<h4>Fajar Aries I 125150207111029 </h4>
<h4>&copy; 2014</h4><br />
<h4>Swipe Right to Back</h4></center>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" role="contentinfo" data-tap-toggle="false">
<h4 aria-level="1" role="heading">&copy; Kelompok 10</h4>
</div>
</div>
</body>
</html>

  11. Untuk tampilan, css yang digunakan adalah bootstrap, dan juga css yang di peroleh dari http://themeroller.jquerymobile.com/. Folder Theme:
    12. themeroller jquerymobile
  12. Tambahkan Permission untuk mengakses internet pada android manifest
    13. <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.fadeltd.papb_c_04" >

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

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

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

</manifest>
    uses permission
  13. Aplikasi mobile siap dijalankan, baik langsung pada mobile, atau melalui emulator AVD (Android Virtual Device), berikut hasilnya
Tampilan Output
Recent Search Terms:
  1. Android Studio
  2. Android Programming
  3. Android Mobile Web View
  4. Android Mobile Web View
  5. Mobile Service
Related Search Keywords:
  1. Ajax
  2. Android
  3. CSS
  4. HTML5
  5. JQuery
  6. JSON
  7. Tutorial
  8. Webview
Posted by at
Location: Bekasi, Bekasi City, West Java, Indonesia

1 komentar :

Langganan: Posting Komentar ( Atom )