หน้าแรก
 การบ้าน
  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
  ถ้าผมต้องการเว็บที่พัฒน...
2015-01-18 15:33:54
  ถ้าผมต้องการเว็บที่พัฒน...
2015-01-18 15:32:51
  ติดต่อสอบถามเข้ามาได้นะ...
2014-01-06 12:47:38
  ถ้ายังหาคนสอนไม่ได้ ก็ลอ...
2013-07-06 01:04:37
  สนใจส่งขอบเขตมาคุยราคาก...
2013-03-24 18:54:20
  ถ้ายังไม่มีคนรับงานติดต...
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
  ผมทำคลิปสอนเขียน C# หาค่า BM...
2019-08-06 11:52:23
  ทำคลิปสอนเขียนโปรแกรมคำ...
2019-04-29 09:56:21
  ผมทำคลิปสอนเขียน C# หาค่า BM...
2019-04-23 05:06:26
  ขอบคุณครับ โค้ดผิดตั้งแต...
2019-03-27 09:21:54
  ลองคิด และไล่ลำดับการทำง...
2018-12-04 02:17:48
  สอนทำโค้ดเกมจำคู่a-hหน่อย...
2018-11-06 12:20:06
  ศึกษาเรื่อง structure กับ array แล้...
2018-10-28 07:26:36
  แบบนี้หรือเปล่า https://www.youtube.com/...
2018-10-20 04:39:25
  ถาม คนที่สั่ง สิครับ ว่าต...
2018-04-23 00:42:14
  ผมลองทำดูเเล้ว ผมติดอยู่...
2018-02-25 18:56:56
  Homework comment
  ผมไม่อยากให้คุณได้คะแนน...
2019-04-27 01:29:07
  อาจารย์เขาบอกแนวข้อสอบม...
2019-04-27 00:44:29
  ขอสอบถามการเขียน c++ ครับ เ...
2018-04-02 12:19:21
  โค้ดตัวอย่างศึกษาให้เข้...
2017-11-26 14:50:05
  คำนวณค่าน้ำโดยรับค่ามิเ...
2017-11-20 23:15:26
  ขอบคุณมากครับ...
2017-08-16 18:27:25
  ทำเอง งง เอง กะลังทำใหม่ค...
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
  Article comment
  รบกวนขอสอบถามหน่อยนะครั...
2019-03-04 05:31:04
  สามารถนำตัวหนังสือจากภา...
2018-12-25 08:54:32
  มีcode ของ VB ไหมค่ะ ถ้ามีรบกว...
2017-09-28 16:50:02
  น่าจะได้ครับ ไม่เคยลอง
...

2017-07-11 09:59:35
  สามารถใช้ต่อกับ anycast ได้ไห...
2017-07-05 10:12:35
  ครับ คุณ "ติด" แล้วลองนึกต...
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
  9Mcode comment
  อยากได้...
2014-02-21 08:52:19

Link Exchange

อัตราค่าโฆษณา
Statistics of Sourcecode in Thailand
 
เริ่มต้น Phonegap เพียงคุณเขียนเว็บเป็นก็พัฒนาโปรแกรมบนมือถือได้!!! (อ่าน 12,103)
ศุภกิจ ทองดี (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
  • ห้ามใช้คำหยาบและคำพูดที่ไม่เหมาะสม
  • ขอสงวนสิทธิหากตรวจพบ ข้อความที่ไม่เหมาะสม ข้อความนั้นจะถูกลบทันที
ชื่อ
อีเมล์
รายละเอียด

 
 
7in1 USB-C Hub Dual Type-C Multiport Card Reader Adapter 4K HDMI For MacBook Pro
7in1 USB-C Hub Dual Type-C Multiport Card Reader Adapter 4K HDMI For MacBook Pro
สายต่อจอ สำหรับเครื่อง 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
คลิปสอนเขียนโปรแกรม
เรียนเขียนโปรแกรมดอทเน็ต
เรียนเขียนโปรแกรมแอนดรอยด์
เรียนเขียนโปรแกรมเบล็คเบอร์รี่
เรียนเขียนโปรแกรมซี ซีพลัสพลัส
เรียนเขียนโปรแกรมจาวา
เรียนการใช้งานลินุกส์
เรียนการเขียนโปรแกรมวินโดว์โฟน
เรียนการเขียนโปรแกรมพีเฮชพี มายเอสคิวเอล
9M Blog บอกเล่าเรื่องราว การเขียนโปรแกรมของ นายเอ็ม
บริการ ถ่ายภาพรับปริญญา
อัตราค่าโฆษณา
 
บทความที่เกี่ยวข้อง

ทดสอบใช้งาน ซิม 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