ทบทวนที่เรียนจากติว PhoneGap ด้วย HTML5 & Jquery Mobile

Post Views: 5,819

ผมต้องออกตัวก่อนนะครับว่า ไม่ได้เก่งในการเขียน 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

ลองทำตามดูนะครับ