การใช้งาน phonegap กับ Android studio

ดูวิธีติดตั้ง phonegap  และวิธีการติดตั้ง Android Studio ได้ที่ลิ้งค์ด้านล่างครับ

วิธีติดตั้ง Phonegap 

วิธีการติดตั้ง Android Studio

การใช้งาน phonegap กับ Android studio

ขั้นตอนที่ 1. ทำการเปิดโปรแกรม Android Studio ขึ้นมา

จากนั้นเลือกเมนู Import project (Eclipse ADT,Gradle,etc.)

ขั้นตอนที่ 2. ทำการเลือกที่ตั้งของ Folder ที่ทำการ Build phonegap แล้วกด OK

โดยดูวิธีการติดตั้ง phonegap ได้ในบทความตามลิ้งค์ด้านล่าง

....

จากนั้นโปรแกรมจะขึ้นมาให้ทำการสร้าง Gradle โดยกด OK โปรแกรมจะทำการรันไฟล์ตามภาพด้านล่าง

ขั้นตอนที่ 3. ทำการเลือกตามภาพด้านล่างเลยครับ สามารถดูตัวอย่างการแก้ไขโค้ตได้โดยใช้

emulator ในการดูแบบแอพพลิเคชั่น หรือดูแบบเว็บ html ทั่วไป โดยการรันไฟล์เว็บปกติ

ขั้นตอนที่ 4. วิธีแสดงตัวอย่างแบบแอพพลิเคชั่นโดยใช้ Emulator โดยกด ฟังก์ชั่น Run

แล้วเลือก Run android จะขึ้น Select Deployment Target ตามภาพด้านล่าง

จากนั้นคลิ๊ก Create New Emulator

ขั้นตอนที่ 5. ให้ทำการเลือกรูปแบบที่จะแสดงตามที่ต้องการ จากนั้น กด Next เพื่อไปยังขั้นตอนต่อไป

จากนั้นโปรแกรมจะให้เลือกระบบปฏิบัติการ ให้เลือกตามที่ต้องการได้เลย

เสร็จแล้วกด Next เพื่อไปยังขั้นตอนต่อไป

เสร็จแล้วกด Finish จะได้ดังภาพด้านล่าง ให้เลือก Emulator ที่ทำการสร้างไว้จากนั้นกด OK เพื่อทำการรันไฟล์

เสร็จแล้วโปรแกรมจะรันไฟล์ขึ้นมาตามภาพด้านล่าง

ถ้าคุณไม่สามารถรัน Emulator ได้ ให้ไปดูที่ฟังก์ชั่น Tools จากนั้นเลือก Android คลิ๊กเปิด Enable ADB Integration

อีกวิธีถ้าคุณมีโทรศัพท์สมาทโฟนก็สามารถต่อสาย usb เชื่อมกับโทรศัพท์ได้

วิธีติดตั้ง Phonegap

เรามาทำความรู้จักกับ phonegap โดยศึกษาได้จากลิ้งค์ข้างล่างนี้เลยครับ

http://nextflow.in.th/2015/easy-understand-phonegap-cordova-app/

ก่อนติดตั้ง Phonegap ให้ทำการโหลดโปรแกรม Node.js สามารถโหลดได้จากลิ้งค์นี้ https://nodejs.org/en/

โหลดเสร็จแล้วติดตั้ง Node.js ให้เรียบร้อย

จากนั้นเริ่มขั้นตอนการติดตั้ง Phonegap

ขั้นตอนที่ 1. ให้ทำการรัน CMD หรือ Command Prompt

ขั้นตอนที่ 2. พิมพ์คำสั่งดังนี้ npm install -g phonegap แล้วกด Enter

ระบบจะขึ้นว่ากำลังทำการติดตั้ง ดังภาพ รอจนกว่าจะติดตั้งเสร็จ

ขั้นตอนที่ 3. ให้ทำการสร้าง Folder โดยภาพตัวอย่างสร้างไว้ที่ Drive E:

จากนั้นให้พิมพ์คำสั่งใน CMD  โดยพิมพ์เลือก Drive ตามที่อยู่ของ Folder ที่ทำการสร้างไว้ก่อนหน้านี้

ตัวอย่าง E:  จากนั้นพิมพ์ cd examplephonegap เพื่อเข้าไปใน Folder ที่ทำการสร้างไว้

ต่อมาพิมพ์คำสั่ง phonegap create my-app (my-app เราสามารถเปลี่ยนเป็นชื่ออื่นได้เช่น test,example)

พิมพ์เสร็จแล้วกด Enter รอจนกว่าระบบจะทำการติดตั้งจนเสร็จ

หลังจากติดตั้งเสร็จแล้วเราจะได้ Folder my-app ตามภาพด้านล่าง

ขั้นตอนที่ 4. ให้พิมพ์คำสั่ง cd my-app เพื่อเข้าไปใน Folder ของ my-app

จากนั้นพิมพ์ว่า phonegap platform add android แล้วกด Enter

รอจนกว่าจะทำการติดตั้งจนเสร็จ

หลังจากติดตั้งเสร็จเรียบร้อยแล้ว โดยวิธีเข้าไปแก้ไขโค้ตให้เข้าไปที่ E:\examplephonegap\my-app\platforms\android\assets\www

จะเห็นไฟล์ index.html ตามภาพด้านล่าง

สามารถดูวิธีการใช้งาน phonegap กับ Android studio ได้ที่นี่

การใช้งาน phonegap กับ Android studio