เรียนรู้ phonegap สร้าง app ด้วย html,css และ javascript ตอนที่ 1

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
phonegap

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ phonegap

ดูแล้ว 9,741 ครั้ง




เนื่องจาก เว็บไซต์ www.ninenik.com ส่วนใหญ่เนื้อหาจะเกี่ยวกับ html css และ javascript อยู่แล้ว จึงคิดว่าเหมาะ ที่จะศึกษา phonegap จากเริ่มต้น
และนำมาแบ่งปัน
 
ออกตัวก่อนว่าเนื้อหาจะไม่อธิบายในหลักการ เพราะไม่เป้ะในรายละเอียด และจะพัฒนาเน้นไปที่ android แต่ที่จริงสามารถประยุกต์ได้กับหลาย os
 
เริ่มต้น ที่ต้องเตริยม
1. ติดตั้ง Java Platform (JDK) 
กดดาวน์โหลด ตรงคำว่า Java Platform (JDK) xxxx 

Java SE - Downloads - Oracle Technology Network - Oracle.clipular
 
จากนั้นเลือกในส่วน 
Java SE Development Kit xxx
กด radio ตกลงรับเงื่อนไข Accept License Agreement  
แล้วเลือกดาวน์โหลดให้ตรง กับ os คอมหรือโน้ดบุ๊คของเรา
Windows x86  วินโดว์ 32 bit
Windows x64  วินโดว์ 64 bit

Java SE Development Kit 8 - Downloads.clipular
 
หลังจากติดตั้งเสร็จ ให้เข้าไป copy path ของ java เพื่อนำมากำหนดค่า
ใน environment variable
 
จะได้ C:\Program Files\Java\jdk1.8.0_11
* jdk1.8.0_11 แล้วแต่ว่าเราติดตั้งเวอร์ชั่นไหน
 
 
การกำหนดค่าใน environment variable
เข้าไปตั้งค่าในส่วนกำหนด system ของ วินโดว์ คลิกขวา my computer
หรือค้นหา ในช่อง start search พิมพ์ sysdm.cpl
เข้าไปตั้งค่าตามรูป

java_home
 
ชื่อตัวแปร
JAVA_HOME
ค่าตัวแปร
C:\Program Files\Java\jdk1.8.0_11
 
จากนั้นเพิ่ม path โดยการแก้ไขตัวแปร path 
แล้วเพิ่ม 
 
;%JAVA_HOME%\bin
 
เข้าไปต่อท้าย ตามรูป
 
java_home_add_var

 
ติดตั้ง java เรียบร้อย
 
ทดสอบว่าติดตั้งสมบูรณ์ ให้ไปที่ command prompt แล้วพิมพ์
c:\java -version
ถ้าแจ้ง เวอร์ชั่นของ java ออกมา แสดงว่าการติดตั้งเรียบร้อยสมบูรณ์


 
2. ดาวน์โหลดติดตั้ง apache-ant 
( สำหรับ phonegap version 4.0 ขึ้นไป จะใช้ gradle ในการสร้างไฟล์ apk ดังนั้นขึ้นตอนที่ 2 นี้ให้ข้ามไป update:03-04-59)
ตัวนี้ จำเป็นต้องใช้ ในการรัน android ผ่าน phonegap command line
 
 โหลดไฟล์ apache-ant-1.9.4-bin.zip 
 
ให้แตกไฟล์ แล้ว copy โฟลเดอร์ apache-ant-1.9.4
ไปไว้ใน drive c:
จะได้ path สำหรับใช้ในการกำหนดค่า ใน environment variable
C:\apache-ant-1.9.4
 
การกำหนดค่าใน environment variable
เข้าไปตั้งค่าในส่วนกำหนด system ของ วินโดว์ คลิกขวา my computer
หรือค้นหา ในช่อง start search พิมพ์ sysdm.cpl
เข้าไปตั้งค่าตามรูป

ANT_HOME
 
ชื่อตัวแปร
ANT_HOME
ค่าตัวแปร
C:\apache-ant-1.9.4
 
จากนั้นเพิ่ม path โดยการแก้ไขตัวแปร path 
แล้วเพิ่ม 
 
;%ANT_HOME%\bin
 
เข้าไปต่อท้าย ตามรูป (* ในรูปจะพิมพ์ผิด มีตัว J แทรกมาก่อนตัว A ให้เอาออก ใช้ค่าตามด้านบน )

ANT_HOME_PATH
 
ติดตั้ง ant เรียบร้อย
 
ทดสอบว่าติดตั้งสมบูรณ์ ให้ไปที่ command prompt แล้วพิมพ์
c:\ant -version
ถ้าแจ้ง เวอร์ชั่นของ ant ออกมา แสดงว่าการติดตั้งเรียบร้อยสมบูรณ์
 
 
3. ติดตั้ง android sdk

อัพเดท ให้ใช้ขั้นตอนที่ 3 ต่อที่บทความนี้ คลิก
การติดตั้ง andorid sdk แบบ stand alone บน windows ตอนที่ 7 


ในที่นี้เราจะใช้ ตัวจัดการ การตัดตั้ง android sdk
จาก android studio ดังนั้น ให้ทำการโหลด และติดตั้ง android studio
ก่อน โดยเข้าไปโหลดได้ที่
 
 
พอดาวโหลดเสร็จ ให้เปิดข้าไปใน android studio เพื่อไปจัดการ
android_sdk_manage
การติดตั้ง android sdk ทำตามรูป ให้ติดตั้งตัวเวอร์ชั่น 4.4.2 (level 19)
android_sdk_install
ติ้กพวก document ออก ตัวที่อัพเดทเอาไว้ก็ได้ แล้วก็ install
จะขึ้น radio ให้กด acept แล้วก็ติดตั้ง
 
พอติดตั้งเสร็จ ให้ดูตรง ลูกศร ชี้หมายเลข 3
ตัวนี้จะเป็น path ที่เราจะนำไปกำหนดค่า ใน environment variable
เหมือนรายการอื่นๆ ที่ทำมา
 
C:\Users\nick\AppData\Local\Android\android-studio\sdk
 
เพิ่มเติม http://spring.io/guides/gs/android/
 
การกำหนดค่าใน environment variable
เข้าไปตั้งค่าในส่วนกำหนด system ของ วินโดว์ คลิกขวา my computer
หรือค้นหา ในช่อง start search พิมพ์ sysdm.cpl
เข้าไปตั้งค่าตามรูป

android_sdk_envi1
 
ชื่อตัวแปร
ANDROID_HOME
ค่าตัวแปร
C:\Users\nick\AppData\Local\Android\android-studio\sdk
 
จากนั้นเพิ่ม path โดยการแก้ไขตัวแปร path 
แล้วเพิ่ม 
 
;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
 
เข้าไปต่อท้าย ตามรูป

android_sdk_envi2
 
ติดตั้ง android เรียบร้อย
 
ทดสอบว่าติดตั้งสมบูรณ์ ให้ไปที่ command prompt แล้วพิมพ์
c:\android
ถ้ามีการเรียกใช้งาน android sdk manager รันขึ้นมา
แสดงว่าการติดตั้งเรียบร้อยสมบูรณ์
 
 
ยังไม่จบ ต่อตอนที่ 2 ยังต้องติดตั้งอีก


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: phonegap







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ