สวัสดีครับท่าน ผู้อ่านทุกๆท่าน วันนี้ผมจะมาแนะนำการติดตั้ง phonegap sdk และ cordova sdk เพื่อเอาไว้พัฒนา Application บน Smartphone สำหรับ Android บน OS ที่ชื่อว่า OSx หรือ บน Mac นั่นเองครับ และทุกท่านก็ต้องมีเครื่อง Macbook หรือ imac นะครับ
เพื่อไม่เป็นการเสียเวลาเรามาเริ่มกันเลยนะครับผม
ขั้นที่ 1 เราต้องติดตั้ง Nodejs กันก่อนนะครับ
– โดยเราต้องเข้าไปดาวน์โหลดไฟล์สำหรับติดตั้งได้ที่ web ของ nodejs.org
กดปุ่ม install เลยครับ แล้วรอดาวน์โหลดสักครู่ เราจะได้ ไฟล์ node-v0.10.29.pkg ครับ
ก็ดับเบิ้ลคลิกที่ไฟล์ node-v0.10.29.pkg เพื่อทำการติดตั้ง เราก็กดติดตั้งเหมือนโปรแกรมทั่วไป แล้วก็รอจนเสร็จพิธี – พอติดตั้ง nodejs เสร็จแล้ว ต่อไปก็ให้เราเปิด Terminal ขึ้นมา ครับ แล้วเราก็พิมพ์คำสั่ง
sudo npm install -g phonegap
แล้ว Enter จากนั้นมันจะขึ้นให้เราใส่ password ของเครื่องเรา เราก็ทำการใส่ password ลงไป แล้ว Enter ……นั่งรอ ……..จนกว่าจะติดตั้งเสร็จ
พอติดตั้งเสร็จถ้าไม่มี error อะไร ก็จะขึ้นดังรูปด้านบนครับ ที่นี่เราก็ลองทดสอบดูครับว่าการติดตั้ง Nodejs เสร็จสมบูรณ์หรือไม่ ให้เราพิมพ์คำสั่งนี้ลงไปแล้วกด Enter
phonegap
จะได้แบบนี้ครับ
พอเราติดตั้ง phonegap sdk เสร็จแล้ว ต่อไปเราก็ติดตั้ง cordova sdk กันต่อครับ ให้เราพิมพ์ คำสั่ง
sudo npm install -g cordova
แล้วกด Enter และ password ลงไปแล้วก็ Enter แล้วก็รอ……จนกว่าจะโหลดและติดตั้ง cordova sdk เสร็จ
เมื่อเสร็จแล้วก็จะขึ้นหน้าจอแบบด้านล่างนี้นะครับ
แล้วเราก็ทดสอบดูว่าการติดตั้ง cordova sdk เสร็จสมบูรณ์หรือไม่ เราก็พิมพ์คำสั่งนี้ลงไปที่ Terminal ของเรา
cordova
แล้วก็ กดปุ่ม Enter เมื่อติดตั้งเสร็จก็จะได้แบบนี้ถ้าไม่เกิด Error หรือปัญหาอะไร
ขั้นที่ 2 ติดตั้ง Android Development (Android SDK)
ให้เราเข้าไปดาวน์โหลด Android Developer Tools ได้ที http://developer.android.com/sdk/index.html
เราก็จะได้ไฟล์ adt-bundle-mac-x86_64-20140702.zip
ให้เราคลายซิปออกมา ซึ่งชื่อมันอาจจะยาวครับ ก็ให้เราเปลี่ยนชื่อให้สั้นๆ ก็ได้ครับ และเมื่อเปิดเข้าไปใน Folder เราก็จะเห็น Folder อยู่ 2 อันดังรูปด้านล่าง
จากนั้นเราก็ไปเปิด Terminal ขึ้นมาอีกครับ เพื่อเราจะได้ทำการสร้าง bash ไฟล์เพื่อกำหนด path ของ Android sdk ลงไปในระบบเพื่อให้ phonegap สามารถเรียกใช้งานได้ ขั้นตอนนี้เราจะทำแค่ครั้งเดียวครับ เมื่อเราเปิด Terminal ขึ้นมาแล้วให้เราตรวจสอบดูว่าเราอยู่ใน Home Directory หรือเปล่า จากนั้นก็พิมพ์คำสั่ง
touch .bash_profile
touch .bash_profile เป็นคำสั่งที่ใช้สร้างไฟล์ ที่ชื่อว่า .bash_profile กด Enter…..ครับ ต่อไปก็พิมพ์คำสั่งนี้ลงไป
open -e .bash_profile
พิมพ์คำสั่งด้านบนเสร็จแล้วก็ Enter ….คำสั่งนี้ใช้เพื่อเปิด bash_profile ไฟล์ขึ้นมาแก้ไข
เมื่อเราเปิด bash_profile ขึ้นมาแล้วเราจะได้หน้าจอนี้ บางท่าน อาจจะเจอหน้าจอเปล่าๆนะครับ เนื่องจากท่านยังไม่ได้ กำหนดค่า อะไรลงไป
จากนั้นเราก็ระบุ path ของ Android SDK ลงไปใน bash_profile ซึ่ง path ที่เราจะกำหนดมี 2 path คือ ที่อยู่ของ sdk/platform-tools กับ sdk/tools
เมื่อเราเปิด bash_profile ขึ้นมาแล้วเราจะได้หน้าจอนี้ บางท่าน อาจจะเจอหน้าจอเปล่าๆนะครับ เนื่องจากท่านยังไม่ได้ กำหนดค่า อะไรลงไป
จากนั้นเราก็ระบุ path ของ Android SDK ลงไปใน bash_profile ซึ่ง path ที่เราจะกำหนดมี 2 path คือ ที่อยู่ของ sdk/platform-tools กับ sdk/toolsexport PATH=${PATH}:/Volumes/MacintoshHD2/App_Android/adt-bundle-mac-x86_64-20140702/sdk/platform-tools:/Volumes/MacintoshHD2/App_Android/adt-bundle-mac-x86_64-20140702/sdk/tools
เสร็จแล้วก็ให้เรา Save ไฟล์ bash_profile นี้เมื่อ กำหนด path เสร็จแล้วก็กลับไปที่ Terminal อีกครั้งแล้วพิมพ์คำสั่งนี้ลงไปใน Terminal แล้ว Enter
source .bash_profile
ถ้าทุกอย่างเรียบร้อยเราจะไปเห็นผลอีกที ก็ตอนเราไปสร้าง phonegap project
ขั้นที่ 3 สร้าง Project Cordova
– ให้เราสร้าง folder ขึ้นมาที่ Desktop ขึ้นมา 1 อันแล้วตั้งชื่อ…ตรงนี้แล้วแต่จะตั้งนะครับ ในที่นี้ผมตั้งชื่อ folder ชื่อว่า app ไว้ที่หน้าจอ Desktop ของผม จากนั้นให้เปิด Terminal ขึ้นมาอีกที แล้วเข้าไปใน Directory ชื่อ app ของเรา
ต่อไปเราก็มาเริ่มสร้าง Project ใหม่กันเลย โดยพิมพ์คำสั่งนี้ลงไปใน Terminal แล้วกด Enter เบาๆ ..
cordova create EsanApp
EsanApp เป็นชื่อ App ที่ผมสร้างขึ้นนะครับ ท่านจะตั้งชื่ออะไรก็ตามหัวใจของท่านนะครับ เข้าใจตรงกันนะ>>>:) พอ Enter ปั๊บ ก็นั่งรอสักพักหนึ่ง มันก็จะเริ่มกระบวนการดาวน์โหลดพวก แพ็กเกจ และ library ต่างๆ เข้ามาเพื่อสร้าง project ให้เรา
พอโหลดเสร็จถ้าไม่มีปัญหาอะไรเกิดขึ้น เราก็จะได้หน้าจอเหมือนด้านบน จากนั้นต่อไปอีกครับ ให้เราเข้าไปใน project ที่เราสร้างขึ้นตะกี้นี้
แล้วพิมพ์คำสั่งนี้ลงไปอีก แล้วกด Enter เบาๆ
cordova platform add android
มาเขียนต่อหลังจากเมื่อคืนหลับคาหน้าจอคอม 5555+++
เมื่อเราใช้คำสั่ง
cordova platform add android
เราก็จะได้ project android ของเราเพิ่มขึ้นมา
//******
ถ้าขึ้น error บอกว่า ไม่มี ant ก็แสดงว่า ใน osx maverick ไม่ได้ติดตั้ง ant ให้ เราก็ทำการติดตั้งเองเลยครับ โดยติดตั้งด้วยคำสั่งนี้ ครับ เปิด Terminal ขึ้นมาครับ
ruby -e “$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”
บางเครื่องอาจจะมีหน้าจอฟ้องขึ้นให้ติดตั้ง Xcode Command Line Tools ก็ให้เราติดตั้งมันไปเลยครับ อาจจะใช้เวลามากหน่อยนะครับ ถ้าเน็ตกาก ถ้าเสร็จแล้ว หากไม่มีการ Error ใด ๆ ต่อไปก็ใช้คำสั่ง
brew install ant
เพื่อติดตั้ง Apache Ant รอให้ติดตั้งเสร็จ จะขึ้นดังภาพ
แล้วลองใช้ คำสั่ง cordova platform add android ใหม่ครับ
**///
ให้เราไปเปิดดู Folder app ของเรา แล้วเข้าไปใน app project ที่สร้างขึ้น ของผมจะเป็น esanapp นะครับ
เราก็จะเห็น folder ต่างๆที่เราได้สร้างขึ้น ทีนี้เราก็เปิด folder platforms ดูครับ เราก็จะพบกับ folder android ของเรา ก็ถือว่าเป็นอันเสร็จในการสร้าง แรกๆอาจจะทำนานหน่อยนะครับ อิอิ
เมื่อเราเปิดเข้าไปดูใน folder android เราก็จะเจอหน้าจอแบบนี้ครับ เป็น project application ของเรานั่นเอง
ขั้นต่อไปเราก็ทำการ App project ของเราใน adt-bundle
ขั้นที่ 3 ให้เราเปิดโปรแกรม Eclipse ขึ้นมาครับ เพื่อที่จะเปิด project ของเราขึ้นมาเขียน app กันต่อไป
เมื่อเปิดโปรแกรม eclipse ขึ้นมาก็ให้เราสร้าง project ดังนี้
ไปที่ File->New->Project->เลือก Android -> เลือก Android Project from Existing Code
กด Next> แล้วกด Browse…
ให้เลือก project android ที่เราได้สร้างไว้ โดยของผมจะอยู่ใน folder app ใน Desktop ของผม ให้เราเข้าไปใน folder นี้
app -> esanapp -> platforms -> android
จากนั้นก็กด open ครับ จะได้
กด Finish
เสร็จแล้วครับ เราก็จะได้ project ของเรา ต่อไปเราก็สามารถเริ่มพัฒนา application ด้วย phonegap (HTML,CSS,Javascript) ได้ ครับผมมมมมม จบข่าว…
ไม่มีความคิดเห็น:
แสดงความคิดเห็น