หน้าแรก
 การบ้าน
  C/C++ new
  Java new
 Sourcecode.TV
  Android
  Blackberry
  C/C++
  Java
  Linux
  Windows Phone
  แจ้งเรื่องที่ต้องการ
 บทความ
  .NET
  Android
  Blackberry
  C++Builder
  Delphi
  Java
  Mobile
  Open Source
  Pocket PC
  Visual Basic
  Web
  Windows Phone
  Others
 แบบเรียนฟรี
  ASP
  ASP.NET Webmatrix
  C++
  eVB
  J2ME
  Java
  PHP
 ซอร์สโค้ด
  Android
  ASP
  C++
  VC++
  CGI-Perl
  Delphi
  Java
  jQuery
  PHP
  Visual Basic
  .NET
 บริการจากเรา
  เปิดท้าย... ขายโค้ด
  DoodeeHosting
  รับออกแบบ พัฒนาเว็บไซต์
  Freeware
  อัตราค่าโฆษณา
  รายชื่อลูกค้า
  สถิติผู้เข้าเว็บ
 ดาว์นโหลด
 ค้นหาข้อมูล
 กระดานสนทนา
  .NET
  C/C++
  Delphi
  Java
  Palm/PocketPC
  Visual Basic
  Web
  อื่นๆ
 กระดานงาน
 ลิงค์เว็บ
 เกี่ยวกับผม
 อัตราค่าโฆษณา
Social Network

Facebook  Twitter  YouTube
 New Article
 Webboard
 Freelanceboard
Freeware
โปรแกรมเบอร์ดี (BerDee)
โปรแกรมเบอร์ดี (Android)
เกมส์เป่ายิ้งฉุบ
เกมส์เป่ายิ้งฉุบ(Android)
WebcamMonitor
WebcamMonitor(Windows)
scSendMail
scSendMail(Windows)
MSN Caption
MSN Caption(Windows)
  Freelance comment
  ติดต่อสอบถามมาได้ตลอดนะครับ...
2015-07-29 13:35:58
  ถ้าผมต้องการเว็บที่พัฒนาด้วย HTML5 ...
2015-01-18 15:33:54
  ถ้าผมต้องการเว็บที่พัฒนาด้วย HTML5 ...
2015-01-18 15:32:51
  ติดต่อสอบถามเข้ามาได้นะคับ
งานเล...

2014-01-06 12:47:38
  ถ้ายังหาคนสอนไม่ได้ ก็ลองศึกษาเองได...
2013-07-06 01:04:37
  สนใจส่งขอบเขตมาคุยราคาก่อนได้นะคับ...
2013-03-24 18:54:20
  ถ้ายังไม่มีคนรับงานติดต่อได้ครับ 08...
2012-12-16 19:18:14
  สนใจคะ ติดต่อ 0905076277...
2012-11-12 11:07:46
  รับทำโปรเจ็คนักศึกษาหรือบริษัท
ส...

2012-10-29 03:10:46
  sukit_te34@hotmail.com...
2012-10-29 03:09:36
  Webboard comment
  รับ สอน matlab เขียน matlab...
2017-06-03 16:27:23
  เฉพาะทางขนาดนี้ คงต้องดูหาข...
2017-05-25 16:18:08
  โห เครื่องรุ่นไหนครับ os รุ...
2017-05-25 16:12:47
  ถ้าเขียน php ก็ใช้ curl ส่...
2017-04-20 01:04:20
  เขียนโค้ดไม่เป็น เอาโค้ดไป ...
2017-03-27 12:50:54
  คือสงสัยว่าทำไม ต้องอัพเดทด...
2017-03-27 12:37:20
  ทดสอบการตอบ...
2017-02-22 13:10:24
  ลองอีกวิธีเขียน recursive f...
2017-02-14 13:11:03
  อยากได้ โค้ดระบบห้องสมุดมาก...
2017-01-30 11:45:28
  ทำ for-loop ซ้อนกัน
โดย...

2017-01-28 16:00:12
  Homework comment
  ทำเอง งง เอง กะลังทำใหม่ค่ะ ^^...
2017-04-18 18:40:46
  ทำเอง งง เอง กะลังทำใหม่ค่ะ ^^...
2017-04-18 18:37:54
  ประเด็นแรก flowchart มันไม่มีภ...
2017-04-18 17:43:33
  อยากได้ flowchart ค่ะ เป็นภาษา...
2017-04-18 16:25:29
  kungking คำถามคืออะไรครับ ?...
2017-03-18 23:28:36
  จงเขียนโปรแกรมแสดงผลรวมของตัวเ...
2017-03-06 10:56:25
  ก็โค้ดทำงานคล้ายๆแบบนี้หละ แต่...
2016-09-06 01:00:12
  ผมอยากทราบว่าโค้ดนับถอยหลังเป็...
2016-09-05 09:31:27
  ได้โค้ดแล้ว ลองศึกษาแล้วเขียนผ...
2016-04-22 00:47:49
  ขอแผนผังของโปรแกรมนับตัวอักษรภ...
2016-04-21 19:24:55
  Article comment
  ครับ คุณ "ติด" แล้วลองนึกต่อว่...
2016-06-18 15:21:09
  vs2008 c# ครับ ขอบคุณครับ...
2016-06-17 14:39:30
  ผมใช้ vs c# ทำตามทุขั้นตอนแต่ต...
2016-06-17 14:37:44
  ต้องวิเคราะห์ครับ "ว่าจริงๆ ส่...
2016-03-12 23:36:05
  ผมส่งข้อความในวง LAN ได้เฉพาะค...
2016-03-12 18:25:42
  โปรแกรม Terminal บน Mac ก็เป็น...
2016-02-16 11:02:01
  โปรแกรม Terminal คืออะไรหรอคะ...
2016-02-16 05:58:21
  ไปตั้ง โครงการไว้เลยครับ ที่
2016-01-25 13:29:55
  ด่วน!!! ต้องการคนเขียน App โดย...
2016-01-25 10:56:34
  ผมได้ทำตามคำแนะนำจนสิ้นสุดแล้ว...
2016-01-20 23:30:25
  9Mcode comment
  อยากได้...
2014-02-21 08:52:19

Link Exchange

อัตราค่าโฆษณา
Statistics of Sourcecode in Thailand
 
เริ่มต้น Phonegap เพียงคุณเขียนเว็บเป็นก็พัฒนาโปรแกรมบนมือถือได้!!! (อ่าน 9,332)
ศุภกิจ ทองดี (9'M) บทความโดย: นาย ศุภกิจ ทองดี (9'M)
e-mail: webmaster@sourcecode.in.th
mobile: 09-5009-5351
Line: suppakit.thongdee
Youtube: 9Mcode
Fanpage: Sourcecode.in.th
   

- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

 
 
Freelanceรับพัฒนาโปรแกรม และเว็บ โดย 9'M 

บทความนี้เป็น เป็นเนื้อหาที่จะกล่าวถึงโปรแกรมที่เป็นชุดเครื่องมือ ในการพัฒนาโปรแกมบนมือถือได้หลายระบบปฏิบัติการ หรือที่เรียกเท่ห์ๆว่า เป็นพวก Cross Platform เช่นพัฒนาเสร็จจะได้ทั้งโปรแกรมบน iOS และ Android หรือแม้กระทั่งบน WindowsPhone และนั่นคือจุดเด่นของโปรแกรมนี้ที่ชื่อ PhoneGap

PhoneGap คืออะไร ? เราสามารถเรียกPhoneGap ได้ว่าเป็น Mobile application development framework หรือจะทำความเข้าใจให้ง่ายได้ว่า เป็นชุดของเครื่องมือในการพัฒนาโปรแกรมสำหรับมือถือ ซึ่งแน่นอนว่าบนมือถือนั้นมีระบบปฏิบัติการ ที่หลายหลายมากมายระบบปฏิบัติการ (OS: Operating System)

PhoneGap ใช้พัฒนาโปรแกรมสำหรับระบบปฏิบัติการอะไรได้บ้าง ? ตามที่เว็บของ PhoneGap แสดงข้อมูลอยู่นี้ จะรองรับได้ทั้งหมด 7 OS ด้วยกัน ได้แก่

  1. iOS
  2. Android
  3. WindowsPhone
  4. Blackberry
  5. Symbian
  6. Bada
  7. webOS

อยากเขียน PhoneGap ต้องมีความรู้พื้นฐานอะไร ? ความรู้ที่จำเป็นในการพัฒนาโปรแกรมด้วย PhoneGap ที่ต้องรู้และใช้งานได้ คือ HTML5, CSS และ JavaScript เท่านั้น (ก็เยอะอยู่นะ) กล่าวได้ว่าเหมาะสำหรับนักพัฒนาเว็บทั่วๆไป ที่อยากพัฒนาโปรแกรม ก็ว่าได้

เมื่อพร้อมแล้วเริ่มกันเลยดีกว่าครับ

PhoneGap API รองรับอะไรบ้าง

เรื่องของ API เป็นเรื่องที่ต้องศึกษาก่อนเป็นลำดับแรก ก่อนที่เราจะลงมือลงแรงไปกับงานชิ้นนั้นๆ นักพัฒนาก็ต้องศึกษาก่อนว่าชุดโปรแกรมที่เราจะใช้งานนั้น มันรองรับงานที่เรากำลังจะพัฒนาหรือไม่ เช่นในกรณี PhoneGap เองก็มีชุดของ API ซึ่งจะรองรับและไม่รองรับ บนแต่ละระบบปฏิบัติการไม่เหมือนกัน ดังนั้นจะต้องศึกษาจุดนี้ก่อน ดังรูปด้านล่าง ที่จะแสดงรายการของ API และระบบปฏิบัติการ

ตัวอย่างเช่น คุณไม่สามารถพัฒนาโปรแกรมเพื่อติดต่อกับระบบไฟล์ บนระบบปฏิบัติการ Symbian ได้เป็นต้น

รูปที่1
รูปที่1

ติดตั้งและใช้งาน PhoneGap

เริ่มต้นจากเข้าไปที่เว็บของ PhoneGap ที่ www.phonegap.com จากนั้นก็คลิกที่ปุ่ม "Download PhoneGap" สำหรับในบทความนี้ผมใช้เครื่อง Mac ในการนำเสนอบทความ ซึ่งก็ไม่แตกต่างกันหากคุณจะทดลองทำแบบเดียวกันนี้บนเครื่อง Windows ดังรูปจะเป็นเว็บ PhoneGap.com

รูปที่2
รูปที่2

ไฟล์ที่ผมกำลังจะดาว์นโหลดจะมีขนาด 29.6MB ซึ่งเป็นไฟล์ของ PhoneGap รุ่น 2.8.0 ดังรูป

รูปที่3
รูปที่3

เมื่อคลิกดาว์นโหลดแล้ว ก็ต้องรอสักระยะตามความเร็วของอินเตอร์เน็ตที่ใช้อยู่ ซึ่งจากขั้นตอนนี้จะได้ไฟล์ phonegap-2.8.0.zip ดังรูป

รูปที่4
รูปที่4

สำหรับในบทความนี้ ผมจะทำการทดสอบพัฒนาโปรแกรมสำหรับ iOS จึงจำเป็นจะต้องติดตั้ง Xcode เพื่อใช้งาน โดยสามารถค้นหาโปรแกรม Xcode ได้จาก App Store บนเครื่อง Mac เมื่อติดตั้งเสร็จก็ให้เปิดโปรแกรม Xcode ขึ้นมา

รูปที่5
รูปที่5

ทำการเลือกที่เมนู Xcode > Preferences...

รูปที่6
รูปที่6

จากนั้นก็ทำการเลือกที่แท็บ Downloads และเลือก Install ทั้ง "Command Line Tools" และ iOS 5.x Simulator ที่ต้องการใช้งาน ในตัวอย่างผมก็ทำการติดตั้ง ดังรูป

รูปที่7
รูปที่7

เมื่อดาว์นโหลดไฟล์ PhoneGap มาเสร็จแล้วก็ทำการคลี่ไฟล์ zip ออกมา

รูปที่8
รูปที่8

ผมทำการสร้างโฟล์เดอร์ชื่อ phonegap_ios เอาไว้เอาไว้เก็บคำสั่งและการทำงานที่เกี่ยวกับ iOS ไว้เท่านั้น

รูปที่8
รูปที่9

ทำการคัดลอกไฟล์ที่อยู่ในไฟล์ zip ที่คลี่ออกมา จาก phonegap-2.8.0libios ดังรูป

รูปที่10
รูปที่10

วางไฟล์ ไว้ในโฟล์เดอร์ phonegap_iso ที่สร้างขึ้น ดังรูป

รูปที่11
รูปที่11

ต่อมาก็ทำการเปิดโปรแกรม Terminal แล้วทำการพิมพ์คำสั่ง cd phonegap_ios เพื่อเข้าสู่โฟล์เดอร์ที่เราได้คัดลอกไฟล์มาวางไว้ จากนั้นก็ใช้คำสั่ง cd bin แล้วตามด้วยคำสั่งเพื่อสร้างโปรเจคที่ชื่อ HelloWorld ด้วยคำสั่งด้วยรูปแบบ ./create [พาร์ทของโฟลเดอร์ที่ต้องการเก็บโปรเจค] [ชื่อแพคเกจ] [ชื่อโปรเจค] โดยในตัวอย่างนี้จะเป็นคำสั่ง ./create /Users/suppakit/HelloWorld com.sourcecode.in.thHelloWorld HelloWorld ดังรูป

รูปที่12
รูปที่12

และแล้วเราจะได้ โปรเจคของ Xcode ขึ้นมา ชื่อโปรเจคว่า HelloWorld ดังรูป

รูปที่13
รูปที่13

เมื่อทำการดับเบิ้ลคลิกที่ HelloWorld.xcodeproj ก็จะปรากฏหน้าต่างของ Xcode เพื่อใช้ในการแก้ไขและพัฒนาโปรแกรม ดังรูปจะเป็นหน้าต่างแสดงรายละเอียดขององค์ประกอบของโปรเจค ซึ่งมีอยู่หลายโฟล์เดอร์ด้วยกัน แต่ที่ใช้ในการแก้ไขและพัฒนาโค้ด html,css และ js จะอยู่ในโฟล์เดอร์ www

รูปที่14
รูปที่14

ต่อมาเราก็จะมาทดสอบสั่ง Run โปรแกรม โดยทำการคลิกที่ปุ่ม Run ดังรูปจะเป็นการสั่ง Run โปรเจคที่ชื่อ HelloWorld โดยให้แสดงผลการทำงานบน โปรแกรม iPhone 6.0 Simulator ซึ่งจะจำลองการทำงานของโปรแกรมบนเครื่องไอโฟน

รูปที่15
รูปที่15

ดังรูปจะเห็นได้ว่าจากโค้ด index.html เมื่อ Run แล้วสามารถแสดงผลเป็นโปรแกรม ใช้งานได้บนโปรแกรม Simulator ได้อย่างน่าทึ่ง

รูปที่16
รูปที่16

 

ก่อนจบบท

ขั้นตอนต่อไปก็คือการเริ่มต้นพัฒนาโปรแกรมด้วยวิธีการเช่นเดียวกับการพัฒนาเว็บ แต่อาจจะมีส่วนต่างกันอยู่บ้างตรงที่มีการเรียกใช้งาน API ที่นักพัฒนาต้องศึกษาเพิ่มเติม จากในเว็บของ PhoneGap.com

ทิ้งท้าย

สำหรับข้อมูลในบทความนี้ ผมก็หวังว่าคงเป็นประโยชน์ไม่มากก็น้อย สำหรับเพื่อนๆทุกท่าน และหากมีความสนใจเรื่อง PhoneGap นี้เพิ่มเติม ก็สามารถทิ้งข้อความไว้ด้านล่างนี้ได้ครับ หากมีเสียงเรียกร้องเข้ามามากๆผมจะได้จัดบทความต่อไปในหัวข้อ PhoneGap นี้ได้เพิ่มเติมครับ แล้วพบกันใหม่กับ 9'M

 

- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -


202.28.40.17 ความคิดเห็น #28 (จาก IP: 202.28.40.17)
ขอบคุณมากคัฟ
จากคุณ : nattawat / nattawat@sut.ac.th [2015-05-25 09:49:50]

110.164.114.239 ความคิดเห็น #51 (จาก IP: 110.164.114.239)
ด่วน!!! ต้องการคนเขียน App โดยใช้ Phonegap หากมีใครสามารถที่จะรับงานได้ รบกวนติดต่อปลา 095-1195966 ค่ะ
จากคุณ : Wachiraporn / plabeaut@hotmail.com [2016-01-25 10:56:34]

61.91.35.66 ความคิดเห็น #52 (จาก IP: 61.91.35.66)
ไปตั้ง โครงการไว้เลยครับ ที่
http://www.sourcecode.in.th/thegunner_createform.php
จากคุณ : maddog [2016-01-25 13:29:55]
สอบถาม
  • ห้ามการโฆษณา หากต้องการติดต่อหาลูกค้า ติดต่อโฆษณาโดยตรงได้ที่ webmaster@sourcecode.in.th
  • ห้ามใช้คำหยาบและคำพูดที่ไม่เหมาะสม
  • ขอสงวนสิทธิหากตรวจพบ ข้อความที่ไม่เหมาะสม ข้อความนั้นจะถูกลบทันที
ชื่อ
อีเมล์
รายละเอียด

 
 
สายต่อจอ สำหรับเครื่อง macbook pro 2016 (usb-c to HDMI)
สายต่อจอ สำหรับเครื่อง macbook pro 2016 (usb-c to HDMI) ความละเอียดระดับ 4K
หัวแปลง Mini DisplayPort to HDMI Adapter หัวแปลง Mini DisplayPort to HDMI Adapter สำหรับเครื่อง macbook air/pro, mac mini
หัวแปลง Mini DisplayPort to HDMI Adapter สำหรับเครื่อง macbook air/pro, mac mini
สายต่อหูฟัง และชาร์จไฟ สำหรับ iPhone 7 และ 7 Plus
สายต่อหูฟัง และชาร์จไฟ สำหรับ iPhone 7 และ 7 Plus
หัวแปลงจาก USB-C Type ไปเป็น USB 3.1 สำหรับ MacBook
หัวแปลงจาก USB-C Type ไปเป็น USB 3.1 สำหรับ MacBook
ไขควงสำหรับเครื่อง Macbook Air/Pro
ไขควง สำหรับแกะเครื่อง Macbook Air/Pro (300บาท)
HDMI เข้า 3 ออก  1 มีรีโมท
HDMI เข้า 3 ออก 1 มีรีโมท (350บาท)
คลิปสอนเขียนโปรแกรม
เรียนเขียนโปรแกรมดอทเน็ต
เรียนเขียนโปรแกรมแอนดรอยด์
เรียนเขียนโปรแกรมเบล็คเบอร์รี่
เรียนเขียนโปรแกรมซี ซีพลัสพลัส
เรียนเขียนโปรแกรมจาวา
เรียนการใช้งานลินุกส์
เรียนการเขียนโปรแกรมวินโดว์โฟน
เรียนการเขียนโปรแกรมพีเฮชพี มายเอสคิวเอล
9M Blog บอกเล่าเรื่องราว การเขียนโปรแกรมของ นายเอ็ม
บริการ ถ่ายภาพรับปริญญา
OrmSin.com: ขายหนังสืองานฝีมือไทย-ญี่ปุ่น-จีน (country crafts)
อัตราค่าโฆษณา
 
บทความที่เกี่ยวข้อง

ทดสอบใช้งาน ซิม 3G จากค่าย 365

แกะกล่องทดลอง Asus Fonepad7 มือถือจอใหญ่ 2ซิมราคาประหยัด
Tutorial
eVB Tutorial
ASP.NET Webmatrix Tutorial
J2ME Tutorial
C++  Tutorial
Java  Tutorial
PHP Tutorial
ASP Tutorial
 
แบบสำรวจ
Freelance รับพัฒนาโปรแกรม

Home - Article - Tutorial - Sourcecode - Dev Handbook - Search - WebBoard - Links - About Us

สงวนลิขสิทธิ์ ห้ามคัดลอก ทำซ้ำ แก้ไข ดัดแปลง ไม่ว่าในรูปแบบใด โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร
เลขทะเบียนพาณิชย์อิเล็กทรอนิกส์จากกระทรวงพาณิชย์: 7100503002000
Copyright 2001 SourceCode.in.th