การ Build PhoneGap ด้วย Android Studio

ตอนนี้เราจะกล่าวถึงวิธีการ import ตัว Base Project ที่สร้างจาก PhoneGap เข้ามาปรับแต่งต่อด้วย Android Studio และทดลองรันผ่าน Emulator ของ Genymotion  อ่านดูแล้วอาจจะบอกอะไร ยังไง ทำไม เยอะจัง แต่ทำไปเถอะครับ ทำบ่อยๆเดี๋ยวก็ชิน ยิ่งทำเก่งยิ่งหาเงินง่าย ^_^

 

การติดตั้งเครื่องมือ

ต่อจากตอนที่แล้วที่เราได้ตัว Base Project ของ PhoneGap และทำการ copy ไฟล์จาก HTML5/public_html ของ NetBean IDE มาใส่ใน platform/android/asset/www  ของ PhoneGap หลังจากทุกอย่างเรียบร้อยแล้วเราก็สามารถ Build และรันด้วย PhoneGap ได้เลย แต่ถ้าอยากปรับแต่งเพิ่มเติมก็ต้องมาเปิดใน Android Studio ครับ (คราวที่แล้วไม่ได้พูดถึงการติดตั้งเลยยกมาพูดคราวนี้)

วิธีติดตั้ง Android Studio

  1. ดาวน์โหลด Android Studio จาก  https://developer.android.com/sdk/index.html
    ad001
  2. เริ่มติดตั้ง Android Studio
    ad001
  3. เลือกปลายทางที่จะติดตั้ง เลือกไดร์ฟที่มีพื้นที่เหลือเยอะๆ ครับ เพราะต้องใช้ประมาณ 3-8GB
    ad003
  4. เมื่อติดตั้งเสร็จตอนเริ่มเปิดโปรแกรม มันจะทำการติดตั้ง Android SDK เพิ่มเติมโดยถ้าเป็นตอนที่เขียนอยู่นี้มันจะติดตั้ง API Level 23 ให้ (Android 6.0) ซึ่งคุณสามารถติดตั้งเพิ่มเติมในภายหลังตามต้องการad002

การนำเข้า PhoneGap ด้วย Android Studio

  1. หลังจากเปิดโปรแกรมแล้วเราสามารถเปิด Project ที่ต้องการด้วยการเลือกตัวเลือกที่ 2
    ad003
  2. เลือกไปที่โฟล์เดอร์  platforms\android  (คราวที่แล้วเราเก็บไว้ที่  d:\pg\helloapp\platforms\android
    ad010
  3. เมื่อเปิด Project มาแล้วตัว Gradle (ตัวที่ใช้ build project ของ Android Studio) จะทำการสแกน Project (หากเจอปัญหาให้ทำตามคำแนะนำ โดยการคลิกลิงค์ เช่นตัวอย่างนี้เราไม่มี android api level 22 ก็ต้องดาวน์โหลดมาติดตั้งเพิ่ม) ปัญหาอื่นๆเช่น Sync plugin version ก็ใช้วิธีเดียวกัน
    ad005
    อีกปัญหาหนึ่งที่อาจจะเจอคือเรื่องของ minSdkVersion เราสามารถเปิดไฟล์  AndroidManifest.xml เพื่อแก้ไขจาก 7 เป็น 10 ดังนี้

    <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="22" />
    เปลี่ยนเป็น
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="22" />
    
    
    ***กรณีติดปัญหาเรื่อง Proxy ให้เพิ่มรายละเอียดของ Proxy ในไฟล์ gradle.properties
    *** อ้างอิง: https://docs.gradle.org/current/userguide/build_environment.html
    #gradle.properties
    systemProp.http.proxyHost=proxy.abc.com
    systemProp.http.proxyPort=8080
    systemProp.http.proxyUser=proxyuser
    systemProp.http.proxyPassword=proxypassword
    
    systemProp.https.proxyHost=proxy.abc.com
    systemProp.https.proxyPort=8080
    systemProp.https.proxyUser=proxyuser
    systemProp.https.proxyPassword=proxypassword
  4. ถ้าไม่มีอะไรผิดปกติเราก็สามารถทดสอบรัน Project ได้เลยครับ (ก่อนรันอาจตรวจสอบหาอุปกรณ์ Android ที่เชื่อมต่ออยู่โดยกดที่ Android Device Manager ได้)
    ad006
  5. เมื่อกดรันแล้ว Android Studio ตรวจพบว่ามีอุปกรณ์ต่ออยู่ (เครื่องจริงๆ, Genymotion, Android Virtual Device) กรณีตัวอย่างนี้เป็น Genymotion
    ad009
  6. Android Studio จะทำการ pack ไฟล์ .apk และติดตั้งไปยังอุปกรณ์ปลายทางโดยอัตโนมัติ

ad008

AjBee.ME : น่าจะพอเห็นภาพการนำเข้า การแก้ปัญหาและการติดตั้งแล้วนะครับ ตอนต่อไปเราจะว่าด้วยเรื่องของการติดตั้งและปรับแต่ง Emulator ถ้าติดปัญหาอะไรก็ถามมาใน comment หรือ facebook นะครับ  ^_^

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage