Web Mobile Apps

Dengan HTML5 Dan Javascript

HTML5

Spesifikasi standar HTML (HyperText Markup Language) yang dikeluarkan oleh World Wide Web Consortium (W3C) sebagai revisi ke-lima.

HTML5 ~= HTML + CSS + JS

Sejarah Singkat HTML5

  • Desember 1999: W3C merekomendasikan HTML 4.01, versi HTML terakhir sebelum HTML5
  • Januari 2000: W3C merekomendasikan XHTML 1.0, kombinasi antara HTML 4 dan XML
  • Agustus 2002 - Juli 2006: W3C mengerjakan draft XHTML 2.0

Kelebihan

  • Multi-platform
  • Biaya lebih rendah
  • Pemasaran lebih cepat

Kelemahan

  • Performa lebih rendah vs native
  • Monetisasi
  • Fragmentasi perangkat

Fitur-Fitur Kunci HTML5
untuk Aplikasi Mobile

  • Tag Meta Viewport
  • Application Cache
  • Canvas Drawing
  • Touch Events
  • Orientation Events
  • GeoLocation API
  • Form Input Types

Tag Meta Viewport

  • Viewport = Area Pandang
  • mengontrol bagaimana halaman web ditampilkan di perangkat mobile
  • kontrol terhadap lebar halaman dan penskalaan pada berbagai perangkat

Sintaks:


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>
Tanpa meta viewport
Dengan meta viewport
Tanpa atribut initial-scale=1
Dengan atribut initial-scale=1

Application Cache

  • mengakses aplikasi web meskipun tanpa koneksi internet dengan menggunakan cache manifest
  • alamat file-file yang ingin bisa digunakan secara offline dimasukkan dalam sebuah file manifest
  • nama file manifest ditambahkan ke atribut manifest pada tag <html>

Contoh file HTML:


<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
  <title>Test</title>
  <script src="test.js"></script>
  <link rel="stylesheet" href="test.css">
</head>
<body>
  Testing the manifest file.
</body>
</html>

File manifest.appcache


CACHE MANIFEST 
/test.css
/test.js
/test.png

Canvas Drawing

  • untuk menggambar grafik dan objek 2D/3D
  • menggunakan script Javascript

Contoh elemen canvas:

<canvas id=”kanvasku” width=”320″ height=”200″ style="border:1px solid
#000000;">
  Browser Anda tidak mendukung elemen canvas
</canvas>

Canvas 2D

Contoh script membuat persegi panjang:


function persegi(){
  // menemukan elemen kanvas
  var canvas = document.getElementById('kanvasku'); 
  // objek yang mempunyai method2 untuk menggambar
  var context = canvas.getContext('2d');
  // memilih warna
  context.fillStyle="#999999";
  // kotak dengan isian warna (x, y, lebar, tinggi)
  context.fillRect(10,50,200,100);
}

Canvas 3D (WebGL)

WebGL memungkinkan aplikasi web untuk merender grafik 3D menggunakan API berbasis OpenGL ES 2.0.

Objek untuk pengolahan grafik 3D:


var gl = canvas.getContext("webgl");

if (!gl) {
  alert("Tidak dapat menginisialisasi WebGL. Mungkin browser Anda tidak mendukungnya.");
}

Touch Events

  • Menangkap kejadian/event sentuhan pada layar sentuh.

Event sentuhan:

Event Deskripsi
touchstart Dipicu saat sentuhan terdeteksi
touchmove Dipicu saat sentuhan digerakkan
touchend Dipicu saat sentuhan berhenti
touchcancel Dipicu saat sentuhan terinterupsi

Contoh script:


function init() {
  var touchzone = document.getElementById("kanvasku");
  // gambar saat mulai menyentuh
  touchzone.addEventListener("touchstart", draw, false);
  // gambar saat menggerakkan sentuhan
  touchzone.addEventListener("touchmove", draw, false);
}
 
function draw() {
  var canvas = document.getElementById('kanvasku');

  if(canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.fillRect (event.touches[0].pageX, event.touches[0].pageY, 5, 5);
  }
}

Orientation API

Device Orientation API memberikan data orientasi dan pergerakan perangkat mobile dari sensor:

  • Kompas
  • Accelerometer
  • Gyroscope

Tiga macam event dalam Device Orientation API:

Event Deskripsi
deviceorientation Dipicu saat terjadi perubahan orientasi perangkat
compassneedscalibration Dipicu saat sensor kompas perlu dikalibrasi
devicemotion Memberikan data mengenai pergerakan perangkat secara teratur

Event DeviceOrientation

Properti Deskripsi
alpha Arah perangkat berdasarkan kompas
beta Derajat arah kemiringan perangkat ke depan dan belakang
gamma Derajat arah kemiringan perangkat ke kiri dan kanan

Mengakses data orientasi menggunakan Javascript:


// memeriksa apakah perangkat mendukung event ini
if(window.DeviceOrientationEvent) {
        
  // jalankan fungsi jika terjadi perubahan orientasi
  window.addEventListener('deviceorientation', function(event) {
    var alpha = event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;

    // Lakukan sesuatu
  }, false);
}

GeoLocation API

  • Melokasikan posisi perangkat mobile di Bumi
  • Metode:
    • Pemosisian WiFi
    • Triangulasi tower seluler GSM
    • Pemosisian satelit GPS
  • Perlindungan privasi: aplikasi harus meminta izin untuk mengakses lokasi perangkat

Method JavaScript:

  • getCurrentPosition() : mendapatkan lokasi perangkat saat ini
  • watchPosition() : mendapatkan lokasi perangkat dan terus memperbaruinya
  • clearWatch() : menghentikan method watchPosition()
Properti Deskripsi
coords.latitude Garis lintang dalam angka desimal
coords.longitude Garis bujur dalam angka desimal
coords.accuracy Akurasi koordinat yang didapatkan
coords.altitude Ketinggian (meter) di atas permukaan laut
coords.altitudeAccuracy Akurasi dari posisi ketinggian di atas permukaan laut

Contoh script:


var logElem = document.getElementById("geo-log"); // Elemen untuk menuliskan posisi
var mapElem = document.getElementById("geo-map"); // Elemen untuk menampilkan gambar peta

// Mendeteksi API geolocation sebelum menggunakannya

if (navigator.geolocation) {
 
  // Fungsi ini akan dieksekusi setelah posisi user didapatkan, yaitu
  // menampilkan gambar peta pada latitude dan longitude posisinya

  var successCallback = function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var acc = position.coords.accuracy;
    logElem.innerHTML = 'Anda berada di (' + lat + ', ' + lng + ') dengan akurasi ' + acc + ' meter.';
    mapElem.innerHTML = '<img src="http://maps.google.com/maps/api/staticmap?markers=' + lat + ',' + lng + '&zoom=13&size=340x440&sensor=true" />';
  };
 
  // Fungsi ini akan dieksekusi jika lokasi user tidak bisa didapatkan

  var errorCallback = function() {
    logElem.innerHTML = 'Maaf, tidak bisa mendapatkan lokasi Anda.';
  };
 
  // Mendapatkan posisi user

  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

} else { // Jika browser tidak mendukung API geolocation
  logElem.innerHTML = 'Maaf, browser Anda tidak mendukung geolocation.';
}

Form Input Types

  • Petunjuk untuk browser tentang jenis layout keyboard yang alam ditampilkan
  • Built-in validasi untuk beberapa jenis masukan seperti email dan url

Sintaks:


<label>Email:</label>
<input type="email">

<label>URL:</label>
<input type="url">

<label>Telephone:</label>
<input type="tel">

<label>Number:</label>
<input type="number">

<label>Range:</label>
<input type="range">

<label>Color:</label>
<input type="color">

<label>Date Demo</label>
<input type="date">

<label>Time Demo</label>
<input type="time">

<label>DateTime Local Demo</label>
<input type="datetime-local">

<label>Month Demo</label>
<input type="month">

<label>Week Demo</label>
<input type="week">

Terima Kasih

examples: untungs.github.io/mobile-html5/examples

source: github.com/untungs/mobile-html5