ผมต้องออกตัวก่อนนะครับว่า ไม่ได้เก่งในการเขียน Mobile Apps. เลยสักนิด เพียงแต่ได้ไปเข้าเรียนมา 2 วัน ผมรู้สึกว่าเป็นศาสตร์ที่น่าลองทำดู และไม่ควรให้มันจางหายไปหลังจากเรียน เดี๋ยววิทยากรจะเสียใจ อิๆ ผมจึงบันทีกไว้แบบใครอ่านแล้วไม่ชอบก็อย่าถือสาผมนะครับ
ลองทบทวนจากที่เรียนใน workshop
ติว “แนะนำและสอนการพัฒนาเบื้องต้นเกี่ยวกับ Application บนมือถือด้วย PhoneGap โดยใช้ HTML5 & Jquery Mobile”
สภาพแวดล้อม
– เป็นการติดตั้งทดสอบบน Windows 8 (32 bit) บนเครื่องโน้ตบุ๊ค HP ProBook 6450b RAM 4 GB
1. download JRE
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
32bit ได้ไฟล์สำหรับติดตั้ง jdk-7u25-windows-i586.exe
(64bit ได้ไฟล์สำหรับติดตั้ง jdk-7u25-windows-x64.exe)
รันไฟล์ดังกล่าวเพื่อติดตั้งลงในวินโดวส์
2. download ADT
http://developer.android.com/sdk/index.html
32bit ได้ไฟล์ที่ zip ไว้คือ adt-bundle-windows-x86-20130729.zip
(64bit ได้ไฟล์ที่ zip ไว้คือ adt-bundle-windows-x86_64-20130717.zip)
แตกไฟล์ดังกล่าวออกมาแล้ว
32bit ได้ไดเรกทอรี adt-bundle-windows-x86-20130729 ไว้ที่ C:\
(64bit ได้ไดเรกทอรี adt-bundle-windows-x86_64-20130717 ไว้ที่ C:\)
สร้าง shortcut ไปยังไฟล์ชื่อ eclipse.exe ในไดเรกทอรี eclipse ไว้บน Desktop
ทดสอบรันโปรแกรม eclipse
ตั้งชื่อ workspace ไว้ที่ C:\phonegap
3. สร้าง Andriod Device ในโปรแกรม Java – ADT
เมนู Windows > Android Virtual Device Manager
แท็บ Android Virtual Devices คลิก New…
ADV Name: ตั้งชื่อ ADV-7-inch
Device: เลือก Nexus 7
Target: เลือก Android 4.3 – API Level 18
(adt-bundle-windows-x86-20130729.zip จะได้ Android 4.3 – API Level 18)
Front Camera: None
RAM: 768
ทดสอบเปิด ADV-7-inch คลิก Start แล้วรอ ค่อนข้างนาน
4. สร้าง New Android Application
File > New > New Android Application
ตั้งชื่อว่า phonegappsu
ที่เหลือใช้ค่า default
หน้าต่อไป Create Project in Workspace
ตั้ง Location เป็นชื่อ C:\phonegap\phonegappsu
หน้าต่อไป ใช้ค่า default
หน้าต่อไป ใช้ค่า Blank Activity
หน้าต่อไป ใช้ค่า default (Activity Name: MainActivity)
คลิก Finish แล้วจะได้หน้าต่างของรายละเอียดเยอะแยะ
5. download phonegap
http://phonegap.com/install/ เลือก PhoneGap2.9.0
ได้ไฟล์ที่ zip ไว้คือ phonegap-2.9.0.zip
แตกไฟล์ดังกล่าวออกมาแล้ว ได้ไดเรกทอรี phonegap-2.9.0
6. ที่ Windows Explorer เข้าไปในไดเรกทอรี phonegap-2.9.0
ก็อปปี้เฉพาะไดเรกทอรี lib\android\example\assets\www
ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonegappsu > assets แล้ววาง www ไว้
ก็อปปี้เฉพาะไดเรกทอรี lib\andriod\xml
ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonegappsu > res แล้ววาง xml ไว้
ก็อปปี้เฉพาะไดเรกทอรี lib\android\cordova2.9.0.jar
ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonepagpsu > libs แล้ววาง cordova2.9.0.jar ไว้
รวมแล้วจะได้หน้าตาประมาณนี้
7. แก้ไขไฟล์ MainActivity.java ( ข้อนี้ต้องระวังการ copy แล้ว paste เครื่องหมายคำพูด และ ; )
ที่รายการด้านซ้ายของโปรแกรม ADT ใต้ Project ที่สร้าง
phonegappsu > src > com.example.phonegappsu> MainActivity.java
โดยคลิกขวา > ใช้คำสั่ง Open With > Text Editor
(1)แก้ไขบรรทัดเดิม public class MainActivity extends Activity
เป็น public class MainActivity extends DroidGap
(2)แก้ไขชุดบรรทัด import เดิมดังนี้
ลบบรรทัด import android.app.Activity;
เพิ่มบรรทัด import org.apache.cordova.*;
(3)แก้ไขบรรทัดที่มีคำว่า protected เป็น public
(4)ใส่ comment บรรทัด //setContentView(R.layout.activity_main);
(5)แล้วเพิ่มบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
จะได้ประมาณนี้
code
package com.example.phonegap;
import android.os.Bundle;
import org.apache.cordova.*;
import android.view.Menu;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
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;
}
}
8. ต้องแก้ไข AndroidManifest.xml
โดยคลิกขวา > ใช้คำสั่ง Open With > Text Editor
ใส่ Permission Tag ดังนี้
code
<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_COMMANDS"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<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.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.CAMERA"/>
ไว้ก่อนบรรทัดปิด Tag </manifest>
9. ติดตั้ง jquery.mobile
download phonegapcomponent (jquery.mobile)
เอาจาก facebook group ชื่อ phonegap for psu เลือก files (สามารถโหลดจาก http://jquerymobile.com/ ได้เลย)
ได้ไฟล์ที่ zip ไว้คือ PhoneGapComponent.zip
แตกไฟล์ดังกล่าวออกมาแล้ว ได้ไดเรกทอรี PhoneGapComponent
ที่ Windows Explorer เข้าไปในไดเรกทอรี PhoneGapComponent
ก็อปปี้เฉพาะไดเรกทอรี css และ js
ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonegappsu > assets > www แล้ววาง css กับ js ไว้
10. ทดสอบสร้าง Application จากตัวอย่าง index.html ที่ให้มา
จะได้ไฟล์ phonegappsu.apk
ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
assets > www > โดยคลิกขวาที่ไฟล์ index.html > ใช้คำสั่ง Open With > Text Editor
สั่ง Run
11. ในข้อถัดไปเป็นตัวอย่างใน workshop เอาไฟล์ตัวอย่างจากที่นี่
( https://sharedrive.psu.ac.th/public.php?service=files&t=04facfa02dc0204fadbf00925d3c431c )
12. ทดสอบด้วยตัวอย่างที่ 1 ชื่อ example1.html
(ตัวอย่างนี้จะเปิด dialog หลังจากเลือกเมนู และบางเมนูเมื่อเลือกก็จะซ่อนข้อความ)
นำไฟล์ตัวอย่าง example1.html ไปวางไว้ที่ phonegappsu > www
แก้ไขไฟล์ MainActivity.java
ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
phonegappsu > src > com.example.phonegappsu> MainActivity.java
แก้ไขบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
เป็น super.loadUrl(“file:///android_asset/www/example1.html”);
รันโปรเจกต์ ได้ผลแสดงบน ADV
13. ทดสอบด้วยตัวอย่างที่ 2 ชื่อ example2.html
(ตัวอย่างนี้จะมีปุ่ม back ให้ย้อนกลับได้)
นำไฟล์ตัวอย่าง example2.html ไปวางไว้ที่ phonegappsu > www
แก้ไขไฟล์ MainActivity.java
ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
phonegappsu > src > com.example.phonegappsu> MainActivity.java
แก้ไขบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
เป็น super.loadUrl(“file:///android_asset/www/example2.html”);
รันโปรเจกต์ ได้ผลแสดงบน ADV
14. ทดสอบด้วยตัวอย่างที่ 3 ชื่อ dbuser.html
(ตัวอย่างนี้ป้อนชื่อ นามสกุล เพศ เก็บลง sqlite database บน android และแสดงรายการ
ขอบคุณกิตติพัฒน์ อุบลกาญจน์ที่เป็นเจ้าของต้นฉบับไฟล์ที่แก้ไปเยอะจากที่วิทยากรให้ลองทำ)
นำไฟล์ตัวอย่าง dbuser.html ไปวางไว้ที่ phonegappsu > www
แก้ไขไฟล์ MainActivity.java
ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
phonegappsu > src > com.example.phonegappsu> MainActivity.java
แก้ไขบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
เป็น super.loadUrl(“file:///android_asset/www/dbuser.html”);
รันโปรเจกต์ ได้ผลแสดงบน ADV
15. หากต้องการทดสอบบน Android Smartphone เครื่องจริง ก็เอาไฟล์ phonegappsu.apk ไปใส่แล้วติดตั้ง
ซึ่งไฟล์อยู่ที่ phonegappsu > bin
ลองทำตามดูนะครับ
