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’


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)


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.


4/27



Maklumat AVD (simulasi peranti Android) ini akan dipaparkan. Klik OK.

Untuk memulakan simulasi, pilih AVD (seperti My-Droid tadi) dan klik Start .


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.


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


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/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 .


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.


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.


11/27



Laman aturcara aktiviti (MainActivity) ini akan dipaparkan. Pada laman inilah integrasi

kerangka Cordova-PhoneGap dan fail html (web) akan dilakukan.


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)


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.


14/27



Pada tetingkap ADT projek, klik (right click ) folder assets > New > Folder

Masukkan folder dengan nama ‘ www ’ dan klik Finish.


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)


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.


17/27



Klik kekunci Enter pada hujung kod ‘import’ terakhir

Masukkan kod: import org.apache.cordova.*;


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


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


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.


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.


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.


23/27



Pada tetingkap ADT projek, klik (right click ) fail AndroidManifest.xml dan pilih Open With >Text Editor .

Kod aturcara AndroidManifest.xml akan dipaparkan.


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 ‘


25/27



Tampal ( paste) kod yang disalin tadi ke fail AndroidManifest.xml ini.

Di bawah kod


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)


27/27


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

Latihan 1 PhoneGap - Persediaan PhoneGap

Documents