Laporan Proyek Aplikasi

Membangun Aplikasi Phonebook Darurat dengan jQuery Handphone & SDK Android

Kelompok 4 Informatika . A . 2008 Ali Rahman Aris Susanto Aep Wiguna Asep Sopandi Ahmad Muntaqo

JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SUNAN GUNUNG DJATI BANDUNG 2012

Analisis dan Perancangan Dalam laporan ini, kita akan mengembangkan aplikasi Android dengan user interface yang diimplementasikan dengan menggunakan kerangka Handphone jQuery. Dengan tujuan, kita akan memperkenalkan sebuah model untuk mewakili layar UI dalam aplikasi Android asli menggunakan jQuery elemen halaman Handphone, khususnya halaman dan isi. Meskipun kode tutorial ini dikembangkan untuk manajemen kontak, konsep dasar dari model ini adalah generik dan dapat diterapkan untuk aplikasi di mana UI cocok untuk membangun melalui HTML dan JavaScript. Sebagai bagian dari model, kita membahas mengintegrasikan JavaScript dengan backend kode Java dan menjelaskan metode mengakses Java dari JavaScript dan, sebaliknya, mengakses JavaScript / HTML dari Java. Laporan ini telah disusun sebagai berikut. Dalam Bagian 1, 'Layar Aliran' kami memperkenalkan layar dalam aplikasi dan menggambarkan transisi antara layar. "Struktur Halaman jQuery Mobile bagian memberikan gambaran elemen halaman dalam kerangka Handphone jQuery dan menjelaskan bagaimana layar dalam aplikasi ini dibangun menggunakan elemen-elemen. Dalam 'Mengintegrasikan HTML / JavaScript UI Berdasarkan Dengan Kembali Android akhir Java', kami meninjau konsep-konsep dasar dalam mengintegrasikan UI, terdiri dari HTML dan JavaScript, dengan back-end kelas Java yang mengimplementasikan fungsi bisnis. Subbagian di sini adalah 'Mengakses Java Dari JavaScript', 'Mengakses HTML / JavaScript Dari Java' dan 'Parameter Tipe Data Dalam Panggilan Metode'. Dalam "Startup Aplikasi", kita mulai meninjau kode untuk area fungsional tertentu dari aplikasi. Dalam setiap bagian, kita menggambarkan urutan peristiwa yang terjadi antara UI dan Java back-end untuk melakukan kegiatan tertentu.

Kita mulai Bagian 2 dari tutorial dengan bagian bernama 'Buat Account', yang menjelaskan bagaimana untuk membuat account untuk bergaul dengan kontak yang baru dibuat. 'Hubungi ada' di, kami menjelaskan mengedit dan menghapus kontak yang sudah ada. Bagian 3 dari tutorial dimulai dengan 'Menambahkan kontak', yang menjelaskan bagaimana cara menambahkan kontak baru. Dalam 'Membaca Kontak Via Kelas ContactUtility', kita membahas bagaimana menggunakan Android Java API untuk mengakses dan memanipulasi kontak di perangkat Android.

Pada Bagian 4, angsuran terakhir dari tutorial, 'Tulis Operasi Untuk Kontak' menjelaskan menghapus dan menyimpan kontak menggunakan Android Java API. Bagian ini, serta 'Membaca Kontak Via Kelas ContactUtility' (Bagian 3), menjelaskan bagaimana menggunakan Processor Jackson JSON untuk mengkonversi bolak-balik antara objek Java data dan representasi JSON string diformat dari objek tersebut. Dalam 'File Proyek Konfigurasi Dan Mendukung', kita membahas file-file konfigurasi untuk proyek tersebut. Bagian 'Aplikasi Peluncuran Ikon' menjelaskan bagaimana kita dihasilkan meluncurkan ikon untuk aplikasi tutorial sesuai dengan Pedoman Ikon Desain Android. Dalam "Lingkungan Pengembangan Aplikasi Android asli ', kami menggambarkan lingkungan pengembangan untuk aplikasi dan menjelaskan langkah-langkah individu untuk mengimpor proyek ke dalam Eclipse IDE. Akhirnya, 'Kesimpulan' memberikan kesimpulan untuk tutorial ini. 1. Layar Aliran Dalam aplikasi kita, setiap kontak harus dikaitkan dengan account. Biasanya, account pengidentifikasi untuk pengguna dalam layanan online seperti 'gmail'. Untuk demo aplikasi ini, kita akan membuat sebuah account yang akan memiliki semua kontak yang dibuat oleh aplikasi. Untuk mempermudah, akun yang tidak akan berhubungan dengan setiap layanan online. Kontak milik account lain akan tetap ditampilkan melalui aplikasi, namun mereka tidak dapat diedit atau dihapus. (Pembatasan ini disengaja untuk menghindari kerusakan akibat kecelakaan pada kontak dalam perangkat Android yang sebenarnya.) Ketika aplikasi dimulai, ia memeriksa apakah account telah dibuat untuk aplikasi. Saat menjalankan untuk pertama kalinya, account tidak ada, oleh karena itu, pengguna akan ditampilkan layar 'Buat Account' (Gambar 1 di bawah).

Gambar 1. Buat Akun Layar. Setelah account dibuat, layar awal yang akan ditampilkan saat aplikasi dimulai adalah layar 'Daftar Kontak'. Layar 'Daftar Kontak' memberikan daftar semua kontak di perangkat (Gambar 2 di bawah).

Gambar 2. Kontak Layar Daftar.

Jika pengguna mengklik tombol menambahkan, layar sebuah 'Hubungi Kosong' ditampilkan. Pada layar itu, pengguna dapat mengetikkan informasi kontak baru dan menyimpan kontak. Setelah kontak disimpan, layar 'Hubungi Daftar' ditampilkan dengan kontak yang baru ditambahkan. Pengguna layar 'Hubungi Kosong' di dapat membatalkan memasuki kontak baru. Dalam hal ini layar 'Hubungi Daftar' ditampilkan tanpa menyimpan kontak. Layar 'Hubungi Kosong' ditunjukkan pada Gambar 3, kiri, bawah. 2. Layar kosong Kontak dan Kontak yang Ada

Gambar 3. Hubungi kosong (kiri) dan Kontak yang Ada (kanan) Layar. Pada 'Daftar Kontak', pengguna juga dapat memilih kontak yang ada dan melihat rinciannya di layar 'Hubungi ada', seperti yang ditunjukkan pada Gambar 3, kanan, atas. Di sini, pengguna dapat mengedit kontak dan menyimpan perubahan, yang mengembalikan pengguna untuk layar 'Daftar Kontak' dengan informasi kontak diperbarui. Pada 'Ada Kontak', jika membatalkan dipilih, pengguna dibawa kembali ke 'Daftar Kontak' dan tidak ada perubahan yang dibuat untuk informasi kontak. Layar 'Hubungi ada' identik dengan 'Hubungi Kosong' kecuali bahwa rincian kontak diisi dengan informasi kontak yang ada.

Pada 'Hubungi ada', pengguna juga dapat menekan tombol Hapus untuk menghapus kontak. Ketika Hapus tombol ditekan, layar "Konfirmasi Hapus 'ditampilkan, Gambar 4 di bawah ini. Pada 'Konfirmasi Hapus', jika ditekan Hapus kontak dihapus dan pengguna

dibawa kembali ke 'Daftar Kontak' layar. Pada 'Konfirmasi Hapus' jika Batal ditekan, tidak ada tindakan yang diambil dan pengguna dibawa kembali ke layar 'Kontak yang ada'.

\

Gambar 4. Konfirmasi Hapus Layar. Dalam transisi layar yang memerlukan sejumlah tertentu dari pengolahan data, aplikasi menampilkan 'Kemajuan' layar sebagai user berdiri dengan (Gambar 5 di bawah). Layar Kemajuan selalu ditampilkan sebelum para 'Account Buat', 'Daftar Kontak', 'Hubungi Kosong' dan layar 'Hubungi ada' ditampilkan.

Gambar 5. Kemajuan Layar. Meringkas penjelasan di atas, gambar berikut menunjukkan aliran layar dalam aplikasi kita.

Gambar 6. Arus layar. 3. jQuery Halaman Struktur Handphone Mari kita membahas bagaimana layar dalam aplikasi kita akan diwakili menggunakan elemen halaman jQuery Mobile. (Untuk pembahasan rinci tentang bagaimana halaman yang dibangun dalam kerangka Handphone jQuery, lihat bagian dalam dokumentasi referensi bernama Anatomi suatu Page.) Sebuah file HTML dalam kerangka Handphone jQuery terdiri dari satu halaman wadah dengan satu atau lebih halaman konten di dalam wadah . Halaman kontainer memiliki data-peran = "halaman" atribut sedangkan halaman konten memiliki dataperan = "konten" atribut. Halaman konten opsional dapat memiliki header dan footer. Pada contoh di bawah, ada dua halaman konten dengan header dan footer dan satu halaman konten tanpa header atau footer.

Dalam halaman isi, hal itu dimaksudkan untuk hanya menampilkan satu halaman konten pada suatu waktu. Idenya adalah untuk layar kelompok logis terkait bersama-sama dalam sebuah halaman wadah tunggal dan mendefinisikan masing-masing sebagai halaman konten. Misalnya, halaman-halaman konten dapat berbagi kode umum JavaScript. Contoh lain adalah di mana sebuah halaman konten utama adalah dikelompokkan bersama-sama dengan beberapa halaman konten lainnya yang mewakili dialog yang terkait dengan konten utama. Dalam tutorial aplikasi ini, masing-masing 'Buat Account' (Gambar 1), 'Daftar Kontak' (Gambar 2) dan layar Kemajuan (Gambar 5) diwakili sebagai halaman konten dalam sebuah halaman kontainer yang disimpan di halaman ListPage fisik. html. Demikian pula, DetailPage.html halaman fisik memiliki halaman kontainer dengan tiga halaman konten di dalamnya; salah satu halaman konten digunakan untuk mewakili kedua 'Hubungi Kosong' dan layar 'Kontak yang ada' (Gambar 3), konten halaman lain merupakan 'Konfirmasi Hapus layar '(Gambar 4), dan halaman konten ketiga mewakili layar Kemajuan. Gambar berikut merangkum diskusi ini.

Gambar 7. Struktur halaman.

Implementasi Program Dalam laporan ini, kami sedang mengembangkan sebuah aplikasi Android asli mana UI diimplementasikan dengan kerangka Handphone jQuery yang terdiri dari perpustakaan JavaScript

dan

CSS.

Kerangka

Handphone

jQuery

bertujuan

untuk

membantu

mengembangkan aplikasi web mobile dengan pengalaman pengguna seragam di seluruh platform mobile yang berbeda, perangkat dan browser. Karena itu, tidak memiliki mekanisme integrasi tertentu, misalnya plug-in, dengan Android keluar dari kotak. Untuk alasan ini, integrasi Mobile jQuery dengan Android harus custom dikembangkan. Sebelum memulai review dari halaman HTML dan JavaScript, serta kode Java dari tutorial ini, masuk akal melihat tiga aspek utama dari integrasi yang: 1. Mengakses Java dari JavaScript 2. Mengakses HTML / JavaScript Dari Java 3. Parameter Tipe Data Dalam Panggilan Metode Antara Java-JavaScript

Mengakses Java Dari JavaScript Android menyediakan cara umum mengungkap Android objek Java dalam kode JavaScript menggunakan addJavascriptInterface (Obyek objek, interfaceName String) metode di kelas android.webkit.WebView. Pada dasarnya, metode ini memungkinkan memanggil metode publik dari sebuah objek Java dari kode JavaScript berjalan di WebView. Perhatikan bahwa WebView adalah jenis khusus dari android.view.View dibangun di WebKit dan memungkinkan menampilkan halaman web yang terdiri dari HTML dan JavaScript. Apakah mereka berada melalui Internet atau dikemas bersama-sama dengan aplikasi Android asli, halaman-halaman web yang direferensikan melalui URL untuk WebView untuk menemukan dan menampilkan mereka. (Pembaca Tertarik disebut dokumentasi API asli untuk informasi lebih lanjut tentang WebView dan View.) Gambar di bawah menunjukkan bagaimana objek Java diakses oleh kode JavaScript yang berjalan di WebView dimana halaman HTML adalah bagian dari Paket Aplikasi Android. Objek Java adalah kode JavaScript terkena sebagai objek JavaScript.

Gambar 8. Java - JavaScript Binding.

Daftar contoh di bawah ini menunjukkan bagaimana untuk mengekspos objek Java, sebuah

instance

dari

kelas

ContactsActivity,

sebagai

objek

JavaScript.

Dalam

Activity.onCreate (), pertama-tama kita menginisialisasi contoh WebView. Kemudian, objek ContactsActivity register itu sendiri sebagai objek JavaScript bawah nama contactSupport. Kelas ContactsActivity memiliki berbagai metode umum, misalnya deleteContact ().

import android.webkit.WebView; import android.app.Activity; ... public class ContactsActivity extends Activity { WebView webView; ... public void onCreate(Bundle savedInstanceState) { ... webView = new WebView(this); ... webView.addJavascriptInterface(this, "contactSupport"); ... } public void deleteContact(String contactId, String displayPage){ ...

}

Potongan kode di bawah ini menunjukkan contoh mengakses objek ContactsActivity dari kode JavaScript. Ini adalah yang sederhana seperti memanggil metode apapun publik dari objek menggunakan nama terdaftar dari objek.

<script> ... function someJavaScriptFunction(){ .. contactSupport.deleteContact(contactIdVar.val(),'ListPage.html'); } ...

Mengakses HTML / JavaScript Dari Java Dalam tutorial aplikasi ini, kita akan menggunakan loadUrl (String url) metode di kelas WebView untuk dua tujuan yang berbeda: (1) memuat halaman HTML baru di WebView dan (2) memanggil metode JavaScript pada halaman HTML saat ini dimuat di WebView. Menempatkan mereka dalam perspektif dengan wadah Handphone jQuery dan halaman konten, kami mematuhi aturan berikut.  Transisi dari satu halaman konten ke dalam halaman wadah yang sama dilakukan oleh kode JavaScript.  Transisi dari satu halaman kontainer yang lain dilakukan oleh kode Java menggunakan WebView.loadUrl (String url). Halaman wadah untuk menampilkan dilewatkan ke Java kode dari JavaScript sebagai parameter callback. Selain loading halaman HTML baru, WebView.loadUrl (String url) metode ini juga digunakan untuk memanggil metode JavaScript pada metode page.The saat ini dimuat HTML JavaScript untuk memanggil dilewatkan ke Java sebagai parameter panggilan balik dari kode JavaScript. Untuk setiap metode JavaScript yang memanggil metode Java, diagram di bawah ini merangkum interaksi antara Java dan JavaScript.  Setelah stimulus pengguna atau loading halaman HTML, kode JavaScript pertama menampilkan layar Kemajuan.

 Kemudian, kode JavaScript melakukan beberapa pengolahan data, tergantung pada ruang lingkup tertentu, dan memanggil metode Java. Metode Java dilewatkan parameter untuk proses (opsional) dan baik fungsi JavaScript untuk memanggil kembali atau sebuah halaman HTML untuk memuat, setelah metode Java melengkapi pengolahan logika bisnis.  Metode Java melengkapi proses logika bisnis dan kemudian memanggil kembali fungsi JavaScript atau load halaman HTML seperti yang diminta.

Gambar 9. Java - Interaksi JavaScript. Memuat HTML Halaman Via WebView Daftar kode di bawah ini memberikan contoh metode Java, deleteContact (). Bahwa fungsi ini disebut dengan JavaScript dengan id dari kontak untuk dihapus dan nama dari sebuah halaman HTML yang harus ditampilkan setelah kontak dihapus. (Ini id dari kontak adalah pengenal unik untuk itu kontak dalam database kontak dari perangkat Android.) import android.webkit.WebView; import android.app.Activity; import android.os.Handler; ... public class ContactsActivity extends Activity { WebView webView; private Handler handler = null;

... public void onCreate(Bundle savedInstanceState) { ... webView = new WebView(this); ... handler = new Handler(); ... } public void deleteContact(String contactId, String displayPage){ ContactUtility.deleteContact(contactId,...); loadPage(displayPage); } public void loadPage(String in){ final String url = "file:///android_asset/www/" + in; loadURL(url); } private void loadURL(final String in){ handler.post(new Runnable() { public void run() { webView.loadUrl(in); } }); }

Pertama, mari kita lihat bagaimana kita menggunakan android.os.Handler. Android referensi untuk android.view.View menyatakan bahwa:

"... Anda harus selalu di thread UI saat memanggil metode apapun pada tampilan apapun. Jika Anda melakukan pekerjaan pada benang yang lain dan ingin memperbarui keadaan pandangan dari benang itu, Anda harus menggunakan Handler. " Apa ini berarti bagi kita adalah bahwa metode deleteContact () tidak bisa langsung memanggil WebView.loadUrl (). Hal ini karena dua alasan. Pertama, contoh WebView dibuat di OnCreate () metode. Kedua, ketika deleteContact () metode ini disebut oleh JavaScript, thread yang mengeksekusi metode yang berbeda dari salah satu yang dieksekusi OnCreate () metode ContactsActivity. Hal ini terbukti dari referensi Android untuk metode WebView.addJavascriptInterface () di mana dikatakan "... Objek Java yang terikat (untuk JavaScript) berjalan di thread lain dan bukan di thread itu dibangun masuk" Ini adalah tempat android.os.Handler sangat membantu. Dari referensi Android, objek Handler memungkinkan kita untuk melaksanakan tindakan (WebView.loadUrl () dalam kasus ini) di thread tertentu yang berhubungan dengan objek Handler. Dalam metode OnCreate (), kita menginisialisasi baik WebView dan benda-benda Handler dan karena itu baik objekobjek yang berhubungan dengan thread yang sama. Dengan konsep Handler dalam pikiran, daftar di atas sekarang harus mudah untuk mengerti.  Dalam deleteContact (), kita menghapus kontak yang pertama (kelas ContactUtility akan ditinjau di kemudian hari).  Kemudian, kita sebut loadPage () metode yang hanya menempatkan awalan di depan nama halaman HTML yang akan ditampilkan, mengubah nama halaman untuk sebuah file: URL / / berbasis.  Akhirnya, kita sebut loadURL () metode untuk memiliki objek WebView Handler panggilan tersebut.

Metode Menjalankan JavaScript Via WebView Setelah terakhir sebuah contoh di mana kode Java yang ditampilkan sebuah halaman HTML setelah memproses permintaan, mari kita lihat contoh lain di mana kode Java memanggil metode JavaScript setelah pengolahan permintaan, untuk lulus hasilnya kembali. public class ContactsActivity extends Activity {

... public void getAllContacts(String callback, String accountCallback){ final String accountCallbackFunction = "javascript:" + accountCallback + "()"; if(accountName == null){ loadURL(accountCallbackFunction); return; } final String json = ContactUtility.getAllContactDisplaysJSON(getContentResolver()); final String callbackFunction = "javascript:" + callback + "('" + json + "')"; loadURL(callbackFunction); }

The JavaScript code listing invoking ContactsActivity.getAllContacts() method is given below. <script> $(document).ready(function () { ... contactSupport.getAllContacts('setContactsList','showAccount'); });

Aplikasi Startup Kelas ContactsActivity adalah android.app.Activity dan titik masuk ke aplikasi tutorial

kita.

Untuk

lebih

lanjut

tentang

kelas

Aktivitas

Android

melihat

http://developer.android.com/guide/topics/fundamentals.html. Kelas ContactsActivity juga antarmuka back-end Android untuk digunakan oleh kode JavaScript dalam halaman HTML mewakili UI. Ketika tutorial kami beban aplikasi, ContactsActivity.onCreate () metode ini disebut.

package com.jquerymobile.demo.contact;

public class ContactsActivity extends Activity { WebView webView; private Handler handler = null; private String accountType = null; private String accountName = null; ...

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

// Initialize the WebView webView = new WebView(this);

setContentView(webView);

// Enable JavaScript webView.getSettings().setJavaScriptEnabled(true);

// Check existence of account for this application accountType = "com.jquerymobile.demo.contact"; Account[] accounts = AccountManager.get(this).getAccountsByType(accountType); if(accounts.length != 0){ accountName = accounts[0].name; }

handler = new Handler();

// Bind this object as a JavaScript object webView.addJavascriptInterface(this, "contactSupport");

// Load index.html loadPage("index.html"); } ... }

Langkah penting dalam metode OnCreate () adalah sebagai berikut:  Kami menginisialisasi contoh WebView dan memungkinkan untuk menjalankan JavaScript.  Setiap kontak yang dibuat oleh aplikasi kita harus dikaitkan dengan sebuah android.accounts.Account. Kami akan memanfaatkan account khusus untuk aplikasi kita. Jenis aplikasi com.jquerymobile.demo.contact, bernama setelah paket aplikasi. Menggunakan kelas android.accounts.AccountManager, kita mencari apakah ada akun dengan tipe itu. Jika demikian, kita menginisialisasi field accountname dengan nama itu.  Contoh ContactsActivity terikat JavaScript sebagai obyek di bawah nama contactSupport.  Akhirnya, kami memuat file index.html di WebView tersebut. Ini adalah file hanya HTML dengan nama hardcoded dalam kode Java kita. Nama dari semua file HTML lain yang dilewatkan ke metode ContactsActivity sebagai parameter. Daftar untuk index.html diberikan di bawah ini. Semua file yang tidak adalah untuk memanggil, di jQuery $ (dokumen) siap () fungsi, ContactsActivity.loadPage () method melewati

'ListPage.html'

ListPage.html.

sebagai

parameter..

Sebagai

hasilnya,

beban

WebView

index.html <script src="css-js/jquery-1.5.min.js"> <script src="css-js/jquery.mobile-1.0a3.min.js"> ... <script> $(document).ready(function () { contactSupport.loadPage('ListPage.html'); });

ListPage.html

ListPage.html ini memiliki tiga halaman konten di dalamnya (lihat Gambar 7). Mereka sesuai dengan 'Akun Buat' dan layar 'Daftar Kontak "pada Gambar 1 dan 2, masingmasing, dan layar Kemajuan seperti yang pada Gambar 5. Ingat dari diskusi sebelumnya yang hanya satu halaman tersebut akan ditampilkan pada waktu tertentu.

<script src="css-js/jquery-1.5.min.js"> <script src="css-js/jquery.mobile-1.0a3.min.js">