latihan 2 phonegap - menguji aplikasi contoh
Post on 08-Jul-2018
238 Views
Preview:
TRANSCRIPT
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
1/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 1/11
1. Mengaturcara laman index.html projek
Pada tetingkap ADT (Android Developer Tools), buka fail index.html projek (di dalam folder
assets/www)
Tambahkan teks berikut di bawah kod :
This is my first Android Apps Development…
Klik menu File > Save untuk menyimpan perubahan ini
Makluman: Pastikan anda telah menyiapkan Latihan 1. Aktiviti ini adalah kesinambungan dari Latihan 1
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
2/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 2/11
Klik (right click ) pada ikon utama projek dan pilih Run As > Android Application. Kita akan
menguji aplikasi ini menggunakan simulasi Android.
Pada tetingkap Save Resources, klik OK.
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
3/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 3/11
Pada tetingkap Auto Monitor Logcat, klik Yes untuk memantau pesanan ralat. Klik OK.
Tetingkap AVD (Android Virtual Device) akan dibuka bagi menjalankan aplikasi ini.
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
4/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 4/11
Aplikasi yang telah dijana ini akan menghasilkan pakej instalasi APK Android. Fail ini boleh
didapati pada folder bin projek (Test-Apps/bin). Untuk instalasi pada peranti sebenar, salin
fail ini ke peranti Android dan lalukan instalasi (pastikan telefon/peranti pintar anda
membenarkan instalasi pakej diluar Google Play Store)
2. Instalasi aplikasi pengedit teks – Notepad++
Aplikasi ADT (Android Developer Tools) tidak menyediakan fungsi penyemak aturcara kod untuk
fail HTML (index.html). Untuk itu, instalasi perisian seperti Notepad++ adalah amat baik bagi
memudahkan semakan aturcara kod bagi pembangunan aplikasi.
Klik dan install pakej aplikasi npp (notepad plus). Fail program ini ada disertakan.
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
5/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 5/11
Pilih bahasa instalasi yang sesuai, dan klik Finish selepas selesai instalasi.
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
6/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 6/11
Antaramuka Notepad++ seperti di atas akan terpapar apabila dibuka.
Untuk mengedit fail aplikasi menggunakannya, klik (right click ) fail index.html (di dalam
folder www projek) dan pilih Edit with Notepad++ ,
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
7/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 7/11
atau; Pada aplikasi ADT, klik (right click) fail index.html projek dan pilih Open With > Other…
o Klik Browse
o Klik pada aplikasi notepad++.exe (folder C:/Program Files/Notepad++)
o Klik OK
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
8/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 8/11
Fail index.html ini akan dipaparkan menggunakan aplikasi Notepad++. Berbeza dengan ADT,
paparan pada Notepad++ akan menandakan kod HTML dengan warna yang mudah difahami.
Setiap kali ada perubahan aturcara dilakukan menggunakan Notepad++, klik File > Save.
Aplikasi ADT akan memaparkan notis peringatan apabila pengguna klik Save (simpan
perubahan fail index.html) pada aplikasi Notepad++. Klik Yes untuk memuatkan
(mengemaskini) perubahan ini pada paparan ADT.
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
9/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 9/11
3. Memasukkan fungsi kawalan telefon Cordova-PhoneGap
Pada folder www projek, salin (copy ) nama fail cordova-x.x.x.js
Buka fail index.html dan tambahkan kod berikut di bawah …:
Tampal ( paste) nama fail cordova tadi di antara kod “” di atas:
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
10/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 10/11
Masukkan kod berikut di bawah kod di atas tadi:
Document.addEventListener(“deviceready”,alert(‘Device is Ready’),false);
Kod ini akan menjana mesej berbentuk timbul ( popup alert ). Klik File > Save
Untuk melihat hasilnya, klik (right click ) ikon projek pada tetingkap ADT. Pilih Run As > 1
Android Application
-
8/19/2019 Latihan 2 PhoneGap - Menguji Aplikasi Contoh
11/11
Latihan 2: Menguji Aplikasi Contoh
HAKCIPTA © 2016 syamsulum@gmail.com 11/11
Tetingkap AVD (Android Virtual Device) akan dibuka. Sebuah mesej peringatan (alert ) akan
dipaparkan. Klik OK untuk beralih kepada skrin utama aplikasi.
Pada latihan seterusnya, kita akan gantikan paparan lalai di atas dengan fungsi aplikasi yang lebih
interaktif.
top related