Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 5 Edit

    Diunggah oleh

    Iiq Fms
    5 tayangan11 halaman
    Modul 5 pemrograman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Modul 5 pemrograman

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan11 halaman

    Modul 5 Edit

    Diunggah oleh

    Iiq Fms
    Modul 5 pemrograman

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 11

    Modul

    Mobile Hybird Apps


    Dasar Mobile Hybird

    Mobile Learning
    UNIVERSITAS NEGERI MALANG
    FAKULTAS TEKNIK
    TEKNIK ELEKTRO
    PENDIDIKAN TEKNIK INFORMATIKA

    Modul 5
    Dasar Mobile Hybird
    A. Tujuan

    1. Mahasiswa mengenal IDE yang digunakan untuk membangun aplikasi mobile hybird
    2. Mahasiswa mampu memanfaatkan fitur hardware pada aplikasi mobile hybird
    3. Mahasiswa mampu mengembangkan aplikasi mobile hybird

    B. Petunjuk

    Awali setiap aktivitas dengan doa, semoga berkah dan mendapat kemudahan.
    Pahami Tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
    Kerjakan tugas-tugas dengan baik, sabar, dan jujur.
    Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.

    C. Dasar Teori
    Mobile hybird merupakan metode pengembangan yang mengonversi aplikasi web mobile
    HTML5 ke aplikasi native smartphone target. Untuk mengimplementasikan hal ini diperlukan
    dukungan perangkat lunak spesifik, yaitu API pengembangan aplikasi mobile.API yang paling
    banyak digunakan saat ini adalah phonegap (apache cordova). API ini mampu membuat aplikasi
    mobile untuk beberapa platform dengan menggunakan bahasa HTML5 dan JS. Dalam
    penggunaannya phonegap digunakan sebagai plugin untuk beberapa IDE. Berikut IDE yang
    menggunakan phonegap sebagai plugin:
    Nama

    Plugin

    Eclipse

    Phonegap Manual

    Intel XDK

    Apache Cordova Bundle

    Appcelerator Titanium

    Proprietary

    Dari ketiga aplikasi tersebut yang paling sering digunakan adalah eclipse dengan tambahan
    phonegap sebagai plugin tambahan. Phongegap memiliki kemampuan untuk mengkonversi file
    mobile web menjadi aplikasi native. Selain itu phonegap juga memiliki kemampuan untuk
    mengakses fitur hardware yang terpasang pada smartphone target.
    Dikarenakan kelebihan yang dimiliki phonegap maka aplikasi yang digunakan pada modul ini
    adalah Eclipse dan Phonegap. Sebelum mengerjakan latihan sebaiknya download Phonegap di
    https://phonegap.com/install/.

    D. Latihan
    1. Instalasi Phongegap
    Pada modul ini phonegap yang digunakan adalah phonegap versi 2.9.0

    a. Download phonegap dan ekstrak pada folder yang diinginkan

    Gambar 5. 1. Hasil ekstrak phonegap

    b. Buka aplikasi eclipse dan buatlah sebuah android project dengan nama hybird, sehingga
    akan muncul tampilan seperti Gambar 5.2

    Gambar 5. 2. Tampilan project baru

    c. Salin file cordova.jar pada lokasi_ekstrak\phonegap-2.9.0\lib\android dan paste pada


    folder libs project hybird, sehingga tampilan package explorer menjadi seperti Gambar
    5.3

    Gambar 5. 3. Menambahkan file cordova.jar

    d. Buatlah folder www didalam folder assets project hybird


    e. Salin file cordova.js pada lokasi_ekstrak\phonegap-2.9.0\lib\android dan paste pada
    folder assets/www project hybird, sehingga tampilan package explorer menjadi seperti
    Gambar 5.4

    Gambar 5. 4. Menambahkan file cordova.js

    f. Salin folder xml pada lokasi_ekstrak\phonegap-2.9.0\lib\android dan paste pada folder


    res project hybird, sehingga tampilan package explorer menjadi seperti Gambar 5.5

    Gambar 5. 5. Menambahkan folder xml

    g. Klik kanan pada project hybird, lalu klik Build Path > Configure Build Path ...

    Gambar 5. 6. Build Path

    h. Klik tab Libraries kemudian klik button add JARs..

    Gambar 5. 7. Libraries Java Build Path

    i. Muncul jendela JAR Selection, pilih file cordova-2.9.0.jar pada folder hybird/libs dan klik
    OK

    Gambar 5. 8. Menambahkan cordova-2.9.0.jar ke library

    j. Pastikan cordova-2.9.0.jar sudah ditambahkan pada tab Libraries seperti Gambar 5.9,
    kemudian klik OK.

    Gambar 5. 9. Hasil menambahkan library cordova

    k. Buatlah file index.html pada folder assets/www dengan cara klik kanan folder
    assets/www pilih New > File. Atau copykan file mobile web yang sudah dibuat pada
    folder assets/www (lewati langkah l dan m).

    l. Klik kanan file index.html pada folder assets/www lalu pilih Open With > Text Editor
    m. Tambah Kode berikut pada file index.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hybird</title>
    <script src=cordova.js></script>
    </head>
    <body>
    <h3>Hallo Phonegap</h3>
    </body>
    </html>

    n. Buka file AndroidManifest.xml pada project hybird, klik tab AndroidManifest dan
    tambahkan kode yang ditebali pada file AndroidManifest.xml
    <uses-sdk
    android:minSdkVersion="8"
    android:targetSdkVersion="10" />
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission
    android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission
    android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission
    android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMAN
    DS"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission
    android:name="android.permission.RECEIVE_SMS"/>
    <uses-permission
    android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission
    android:name="android.permission.RECORD_VIDEO"/>
    <uses-permission
    android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
    <uses-permission
    android:name="android.permission.READ_CONTACTS"/>
    <uses-permission
    android:name="android.permission.WRITE_CONTACTS"/>
    <uses-permission
    android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission
    android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission
    android:name="android.permission.GET_ACCOUNTS"/>
    <uses-permission
    android:name="android.permission.BROADCAST_STICKY"/>

    o.
    p.
    q.
    r.
    s.
    t.
    u.

    Buka file MainActivity.java pada folder hybird/src/com.example.hybird


    Hapus import android.app.Activity
    Tambahkan import org.apache.cordova.DroidGap;
    Ubah class extend dari Activity menjadi DroidGap
    Ubah fungsi onCreate dari protected menjadi public
    Hapus setContentView(R.layout.activity_main);
    Tambahkan super.loadUrl("file:///android_asset/www/index.html");
    sehingga kode MainActivity menjadi seperti berikut:
    package com.example.hybird;
    import android.os.Bundle;
    import android.view.Menu;
    import org.apache.cordova.DroidGap;
    public class MainActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.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;
    }
    }

    v. Jalankan project pada emulator untuk mengetahui hasil pembuatan aplikasi


    hybird.

    Gambar 5. 10. Tampilan project hybird pada emulator

    2. Mengakses Fitur Device (Notification Vibrate)


    a. Buatlah Android Project dan lakukan langkah-langkah pada latihan 1, atau
    gunakan project hybird pada latihan 1.
    b. Ubahlah kode pada file index.html menjadi kode berikut:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Notification Example</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady,
    false);
    // device APIs are available
    //
    function onDeviceReady() {
    // Empty
    }
    </script>
    </head>
    <body>
    //navigator.notification.vibrate(1000) digunakan untuk
    mengakses fitur vibrate selama 1000ms atau 1s
    <button onclick="navigator.notification.vibrate(1000);">play
    vibrate</button>
    </body>
    </html>

    c. Jalankan build project hybird dan jalankan aplikasi hybird.apk yang ada pada
    folder hybird/bin pada smartphone android

    Gambar 5. 11. Tampilan project hybird pada emulator

    E. Tugas
    1. Membuat aplikasi mobile hybird yang berisikan konten pendidikan dan didalamnya terdapat
    komponen : page, dialog page, navigasi, header, footer, dan mengakses salah satu fitur
    device.
    2. Membuat laporan tentang aplikasi mobile hybird yang telah dibuat

    Anda mungkin juga menyukai