Download - Latihan 1 PhoneGap - Persediaan PhoneGap
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
1/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 1/27
1. Instalasi JDK (Java Development Kit)
Buka folder Android Course dan lakukan instalasi pakej JDK
2.
Nyahmampat ADT (Android Developer Tools)
Klik (right click ) pakej ADT-Bundle. Pilih Extract All …
Namakan folder pakej ADT baru ini dengan nama yang sesuai (seperti adt-bundle)
Makluman: Kesemua fail yang diperlukan bagi latihan ini boleh didapati di dalam folder ‘Android Course’
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
2/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 2/27
3. Konfigurasi SDK Manager
Buka folder ADT yang telah dinyahmampat (adt-bundle)
Klik (double click ) fail SDK Manager untuk memulakan konfigurasi. Tetingkap Android
SDK Manager akan dipaparkan.
Pada tetingkap ini, pastikan Google USB Driver ditandakan (jika tidak, sila tanda dan klik
Install packages)
Klik menu Tools > Manage AVD ( Android Virtual Device)
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
3/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 3/27
Klik New
Berikan nama AVD ini (seperti My-Droid) dan tetapkan jenis peranti simulasi ini (pilih
device seperti Nexus S atau yang bersuaian mengikut saiz skrin yang dikehendaki) Sekiranya perlu, saiz Memory dan Storage juga boleh diubahsuai. Klik OK setelah selesai.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
4/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 4/27
Maklumat AVD (simulasi peranti Android) ini akan dipaparkan. Klik OK.
Untuk memulakan simulasi, pilih AVD (seperti My-Droid tadi) dan klik Start .
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
5/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 5/27
Tetingkap Launch Options akan dipaparkan. Di sini, anda boleh memilih penskalaan skrin
simulasi (Scale display to real size) sekiranya perlu. Klik Launch.
Tetingkap simulasi peranti android anda akan dipaparkan.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
6/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 6/27
4. Memulakan ADT (Android Developer Tools)
Buka folder Eclipse (ia berada di dalam folder nyahmampat ADT – adt-bundle)
Klik (double click ) fail program eclipse.exe
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
7/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 7/27
Tetapkan Workspace. Klik Browse dan tetapkan folder Workspace (folder projek anda)
sekiranya perlu. Secara umum (default ), ADT akan menetapkan folder Workspace di dalam
folder pengguna. Klik OK.
Pada tetingkap kiriman statistik (contribute usage statistic), anda boleh memilih ‘Yes’sekiranya perlu. Klik Finish.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
8/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 8/27
5. Membangunkan aplikasi baru (Mengintegrasikan aplikasi dengan kerangka Cordova-PhoneGap)
Klik New Android Application
Masukkan nama aplikasi dan projek (seperti Test-Apps). Anda juga boleh mengubahsuai
jenis SDK dan warna tema (theme) sekiranya perlu. Klik Next .
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
9/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 9/27
Lakukan konfigurasi sekiranya perlu. Untuk mengubahsuai ikon aplikasi, pastikan ruang
Create custom launcher icon ditandakan. Projek baru ini biasanya akan mencipta folder
workspace baru dengan nama yang sama dengan nama projek (seperti Test-Apps). Klik Next .
Pada tetingkap Configure Launcher Icon, klik Browse untuk memilih ikon aplikasi anda
(pastikan anda telah merekabentuk gambar ikon ini terlebih dahulu). Selain gambar (image),
ikon ini juga boleh dihasilkan menggunakan Clipart dan teks (text ). Lakukan pengubahsuai
seperti skala (scale), bentuk (shape), dan warna latar (background color) ikon sekiranya perlu
bagi mendapatkan hasil terbaik. Klik Next setelah selesai.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
10/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 10/27
Pada tetingkap Create Activity , pilih bentuk aktiviti yang sesuai untuk aplikasi anda. Untuk
contoh ini, Blank Activity dipilih. Ia akan memaparkan aktiviti dalam bentuk minimalis. Klik
Next .
Berikan nama yang sesuai bagi aktiviti (seperti MainActivity). Sekiranya perlu, anda juga
boleh mengubahsuai jenis navigasi (Navigation Type). Klik Finish.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
11/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 11/27
Laman aturcara aktiviti (MainActivity) ini akan dipaparkan. Pada laman inilah integrasi
kerangka Cordova-PhoneGap dan fail html (web) akan dilakukan.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
12/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 12/27
6. Integrasi PhoneGap
Pada folder Android Course, nyahmampat (Extract All ) pakej Phonegap. Berikan nama yang
sesuai bagi folder baru ini (seperti phonegap-x.x.x).
Salin (copy ) fail cordova-x.x.x.jar (berada di dalam folder phonegap-x.x.x/lib/android)
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
13/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 13/27
Tampal ( paste) fail cordova-x.x.x.jar ini ke dalam folder libs projek (seperti Test-Apps/libs)
Refresh tetingkap ADT (klik kekunci F5). Fail cordova-x.x.x.jar akan terpapar pada folder libs.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
14/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 14/27
Pada tetingkap ADT projek, klik (right click ) folder assets > New > Folder
Masukkan folder dengan nama ‘ www ’ dan klik Finish.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
15/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 15/27
Refresh tetingkap ADT (klik kekunci F5). Folder www akan terpapar di bawah folder assets.
Salin (copy ) fail cordova-x.x.x.js (berada di dalam folder phonegap-x.x.x/lib/android)
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
16/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 16/27
Tampal ( paste) fail cordova-x.x.x.js ini ke dalam folder www tadi (Test-Apps/assets/www)
Pada paparan aktiviti ADT (MainActivity.java), klik tanda untuk membuka kod aturcara
tersembunyi.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
17/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 17/27
Klik kekunci Enter pada hujung kod ‘import’ terakhir
Masukkan kod: import org.apache.cordova.*;
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
18/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 18/27
Tandakan perkataan Activity pada kod public class (di bawah kod import).
Gantikan Activity kepada DroidGap
Pada bahagian akhir kod @Override, tambahkan tanda ‘ // ’ (comment ) di hadapan kodsetContentView untuk mematikan (disabled ) fungsi kod
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
19/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 19/27
Kod yang ditanda ‘ // ’ akan berubah kepada warna hijau (digelar commented ).
Selepas kod super.onCreate, klik kekunci Enter dan tambah kod:
super.loadUrl(“file:///android_asset/www/index.html”);
Tandakan perkataan protected di bawah kod @Override
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
20/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 20/27
Gantikan perkataan ini kepada public.
Kod import android.app.Activity; tidak lagi digunakan selepas pengubahsuaian ini. Kod ini
boleh diabaikan atau ditandakan ‘ // ’ (commented ) di hadapannya jika mahu.
Salin (copy ) fail index.html dari folder Android Course.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
21/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 21/27
Tampal ( paste) fail ini ke dalam folder www projek (Test-Apps/assets/www).
Refresh tetingkap ADT (klik kekunci F5). Senarai fail di dalam folder www akan dipaparkan.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
22/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 22/27
Pada tetingkat ADT projek, klik (right click ) fail index.html, dan pilih Open With > Text Editor .
Kod aturcara fail index.html akan dipaparkan. Fail ini akan digunakan untuk tujuan aturcara
aplikasi yang akan dibangunkan kelak.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
23/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 23/27
Pada tetingkap ADT projek, klik (right click ) fail AndroidManifest.xml dan pilih Open With >Text Editor .
Kod aturcara AndroidManifest.xml akan dipaparkan.
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
24/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 24/27
Pada folder Android Course, klik (right click ) fail Android-Manifex-File.txt dan pilih Edit .
Salin (copy ) teks kod aturcara fail ini.
Pada paparan ADT projek, klik ruang di bawah kod ‘
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
25/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 25/27
Tampal ( paste) kod yang disalin tadi ke fail AndroidManifest.xml ini.
Di bawah kod
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
26/27
Latihan 1: Persediaan Aplikasi Pembangunan
HAKCIPTA © 2016 [email protected] 26/27
Pada folder Android Course buka folder phonegap-x.x.x/lib/android. Salin (copy ) folder xml.
Tampal ( paste) folder xml ini ke dalam folder res projek (Test-Apps/res)
-
8/19/2019 Latihan 1 PhoneGap - Persediaan PhoneGap
27/27
Latihan 1: Persediaan Aplikasi Pembangunan
Senarai Semak
Cuba semak semula senarai checklist di bawah bagi tugasan yang harus dibuat. Tandakan pada petak
disebelahnya bagi setiap item yang telah anda lalukan.
i.
Install JDK (sekali sahaja)
ii.
Nyahmampat ADT (sekali sahaja)
iii. Konfigurasikan SDK (sekali sahaja)
a. Bina AVD baharu (sekali untuk 1 jenis peranti simulasi)
iv.
Buka aplikasi Eclipse (dalam folder adt-bundle)
a. Tetapkan workspace
b. Klik New Android Application
c.
Masukkan nama projek dan nama aplikasi
d. Tetapkan jenis ikon aplikasi
e.
Tetapkan jenis aktiviti beserta namanya
v.
Nyahmampat Phonegap (sekali sahaja)
a.
Salin fail cordova.jar (dari folder phonegap/lib/android) dan tampal ke folder libs
projek
b.
Bina folder www (dalam folder assets projek)
c.
Salin fail cordova.js (dari folder phonegap/lib/android) dan tampal ke folder www
projek
d.
Salin (atau bina sendiri) fail index.html dan tampal ke folder www projeke. Pada fail MainActivity.java projek;
i. Tambah kod: import org.apache.cordova.*;
ii. Gantikan perkataan Activity kepada DroidGap pada kod public class:
public class MainActivity extends DroidGap
iii. Tambah tanda comment di hadapan kod setContentView:
//setContentView(R.layout.activity_main);
iv. Selepas kod super.onCreate, tambah kod:
super.loadUrl(“file:///android_asset/www/index.html”);
v. Gantikan perkataan protected di bawah kod @Override kepada public:
public void onCreate(){f. Edit fail AndroidManifest.xml projek
i. Salin kod fail Android-Manifex-File.txt kursus
ii.
Tampal kod ini pada baris kod selepas
iii.
Di bawah kod