น่าจะเป็นคำถามที่คนอีกกว่าหลายล้านคนทั่วโลกเริ่มถามถึง หลังจากงาน Adobe MAX 2011 ที่ Adobe ประกาศบนเวทีเลยว่า ได้เข้าซื้อ Nitobi ผู้เป็นเจ้าของเทคโนโลยี PhoneGap เรียบร้อยแล้ว และในเมื่อเทคโนโลยีหนึงถูกซื้อโดย Adobe มันก็กลายเป็นเรื่องที่น่าสนใจทีเดียวว่า Adobe มองเห็น และกำลังจะทำอะไรกับเจ้า PhoneGap

ดังนั้นเรามาทำความเข้าใจในเทคโนโลยีนี้กันดีกว่า เพื่อจะได้ใช้มันกับงานของคุณได้ถูกต้อง และเรียนรู้การใช้งาน Adobe Tool ที่กำลังจะออกมา support เทคโนโลยีนี้ในอนาคตอันใกล้

1. กำเนิด PhoneGap

ในอดีตนั้น อุปกรณ์มือถือที่เราเรียกติดปากว่า Mobile Device หรือ Device นั้นต่างก็มีระบบปฏิบัติการของตัวเอง (เรียกย่อๆ ว่า OS “โอเอส”) ไว้เพื่อจัดการการทำงานต่างๆ เช่นการบันทึก Contact หรือเชื่อมต่อ Internet ซึ่งไม่ว่าจะเป็น Nokia หรือ Samsung ต่างก็มีระบบ OS เป็นของตัวเอง

และในเมื่อ Developer อยากจะพัฒนา Application มาให้กับ Mobile Device ที่ต้องการ ก็จำเป็นต้องเรียนรู้ภาษา programming ที่ออกแบบมาเฉพาะกับ OS นั้นๆ ซึ่งถ้าโลกนี้มันมีแค่ 1 – 2 OS ก็ไม่น่าตื่นเต้นเท่าไหร่หรอก หากแต่ว่ามันมีเยอะหน่ะสิ! เวลา Developer หรือนักลงทุนจะเริ่มพัฒนา Mobile Application ก็จะเก้ๆ กังๆ ว่าจะลงทุนเงินและเวลาให้กับ OS ไหนดี เพราะการพัฒนา Application บน OS ตัวใดตัวหนึ่งนั้นใช้เวลาและเงินทุนมาก นับไปตั้งแต่ซื้อ Tool, จ้าง Programmer ที่เชี่ยวชาญ, ศึกษาระบบของ OS นั้นๆ จนไปถึง​Model การตลาดและการขายต่างๆ ขอแต่ละเจ้าก็ไม่เหมือนกัน ยิ่งถ้าต้องการให้บริการหรือสินค้าของตัวเองไปปรากฎบนทุกๆ OS นั้นเป็นเรื่องที่ใช้เงินทุนมหาศาล

ทว่าเมื่อมนุษย์สร้างปัญหาขึ้นมา ก็ต้องมีมนุษย์ที่คิดแก้ปัญหา มีคนกลายกลุ่ม (และหลายบริษัท) พยายามสร้างรูปแบบการพัฒนา Mobile Application  แบบพัฒนาทีเดียว แต่นำไปใช้งานได้เหมือนกันบน Mobile OS แต่ละเจ้า นั่นคือต้นกำเนิดของรูปแบบการพัฒนา Mobile Application ที่เราเรียกว่า Cross-platform นั่นเอง ซึ่งในเวลาที่เขียนบทความนี้อยู่โลกก็แบ่งออกเป็นส่วนๆ ให้กับ Apple iOS, Google Android, Windows Phone, และ RIM BlackBerry ไปเรียบร้อยแล้ว การสร้างชุดเครื่องมือในการพัฒนา (ที่เรียกกันติดปากว่า Tool หรือ Framework) จึงมุ่งเน้นไปที่เจ้าใหญ่ๆ ที่พูดถึงอยู่นี้ให้ได้ ในตอนแรก Adobe Flash เป็นเทคโนโลยีตัวเต็งที่สร้างชื่อจากการเป็น Cross-browser technology มาก่อน แต่ก็ต้องหรี่แสงไปด้วยวาทะของ Steve Jobs และในขณะเดียวกันก็จุดประกายให้ HTML5 ขึ้นมาผงาดอยู่บนเวทีได้ในเวลาอันรวดเร็ว

แต่แล้วทั้งแล้ว HTML5 ก็ยังยืนอยู่ฝั่ง Web technology อยู่ดี มันต้องเข้าถึงด้วย Web browser ผ่านเครือข่าย Internet ตามลักษณะของ Website ดั้งเดิม คำถามคือเราสามารถนำ Web technology มาสร้างเป็น Mobile Application จริงๆ ได้ไหม? เราจะสามารถสร้าง  Application ที่สามารถ download ผ่าน Online Store ทั้งหลาย, ทำงานได้แม้จะไม่ต้องเชื่อมต่อกับ Wifi หรือ 3G และสามารถพัฒนาเพื่อใช้งานกับอุปกรณ์บน Device ต่่างๆ โดยที่ใช้ภาษาการเขียน Web อย่าง HTML/Javascript/CSS ได้อย่างไร?

หนึ่งในคำตอบนั้น ก็ไม่พ้นเทคโนโลยีที่ร้อนแรงที่สุดตอนนี้ที่มีชื่อว่า PhoneGap นั่นเอง

2. PhoneGap ทำงานอย่างไร?

PhoneGap นั้นอาศัยหลักการง่ายๆ ที่คุณควรทำความเข้าใจ เพื่อที่จะรู้ว่ามันจะพาคุณไปได้ไกลแค่ไหน (photo by oskay)

หากจะพูดให้ง่าย การทำ Website แต่เดิมคือการสร้าง HTML file และรวมรูปรวมถึง link ต่างๆ เข้าด้วยกันแล้วเอาขึ้นไปไว้บน Server เพื่อให้ผู้ใช้เปิดผ่าน Web browser จาก computer ของตัวเอง นั่นหมายถึงไม่มีการติดตั้ง Application บนเครื่องของผู้ใช้ แต่เปิดใช้งานผ่าน Web browser ซึ่งจำเป็นต้องอาศัยการเชื่อมต่อ Internet อยู่ตลอด

แต่รูปแบบการทำงาน PhoneGap นั้น มันจะทำการ “ห่อ” Website ทั้งหมดของเราให้เป็น Application (ให้นึกถึงข้าวมันไก่ในตอนเช้าที่มันถูกห่อกระดาษก่อนใส่ถุงให้เราหิ้วมากินที่ออฟฟิศ) โดย “กระดาษห่อ” ที่ PhoneGap เตรียมไว้ให้นี้ (ภาษาฝรั่งเรียกว่า Wrapper) แต่ละแบบก็จะเหมาะสมกับการทำงานบน Mobile OS แต่ละเจ้า ซึ่งตอนนี้ก็เรียกว่า Support เกือบจะทุก Mobile OS เลยทีเดียว ตั้งแต่ iOS, Android, Windows Phone, webOS, Symbian และ Bada

3. แนวทางการพัฒนา Mobile Application ด้วย PhoneGap เป็นอย่างไร?

การใช้งาน PhoneGap สำหรับ Web Developer หรือ Designer นั้น ถือว่าสะดวกมาก (photo by smallandround)

รูปแบบการพัฒนา Mobile Application ด้วย PhoneGap นั้น จะเป็นการใช้ความรู้ความสามารถในการเขียน Website หรือที่เขาเรียกกันติดปากกันไปอีกนานว่า HTML5/Javascript/CSS เป็นหลัก (ผมได้ยินเสียงหัวเราะเบาๆ ของ Web Designer กับ Web Developer นะ) เพียงแต่คุณต้องปรับรูปแบบการทำงานให้เหมาะกับ Mobile User Experience แทนที่จะเป็น Web User Experience เท่านั้น ซึ่งจะขอกล่าวถึงในโอกาสต่อไป

บางคนอาจจะถามว่า แล้วมันสามารถพัฒนาเรียกใช้งาน function ต่างๆ ใน Mobile Device ได้ไหม? สามารถถ่ายภาพผ่าน Camera ได้ไหม? หรือจะเก็บข้อมูลไว้ใน Database ภายในเครื่องได้หรือเปล่า? ขอตอบตรงนี้ว่าได้ครับ เพราะ PhoneGap จะมีชุดคำสั่ง (เรียกกันทั่วไปว่า API) ไว้ให้คุณเขียนเพื่อเรียกใช้งาน feature ส่วนนี้โดยเฉพาะ

จากนั้นเมื่อทุกอย่างเรียบร้อย ก็จะเป็นขั้นตอนการ “Packaging” ตัว Project ของคุณให้กลายเป็น Application File ที่เหมาะสมกับ Mobile OS แบบต่างๆ เพื่อที่จะ upload ขึ้นไปบน Online Store ต่อไป

ตอนนี้ผมกำลังเรียบเรียงเนื้อหาและวิธีการใช้งาน PhoneGap ออกมาเป็นหนังสือไว้ให้ทุกคนได้ใช้อ้างอิงและเรียนรู้กัน และจะปล่อยบางส่วนออกมาให้ทุกคนได้ comment กัน

4. PhoneGap มีค่าใช้จ่ายหรือเปล่า?

PhoneGap นั้นเป็น open source นั่นหมายความว่าคุณไม่ต้องมีค่าใช้จ่ายในการเริ่มนำมันมาใช้งาน (photo by quazie)

หากเริ่มสนใจจะใช้งาน PhoneGap แล้วล่ะก็ คงต้องถามถึงราคาที่ต้องลงทุนแน่นอน โชคดีจริงๆ ที่ PhoneGap นั้นเป็น open source เปิดให้ทุกคนรวมถึงคุณนำไปใช้งานได้ฟรีๆ ดังนั้นคุณไม่จำเป็นต้องเสียค่าใช้จ่ายเพิ่มเติมสำหรับเทคโนโลยี PhoneGap ครับ แต่ก็มีบริษัทบางที่ สร้างเครื่องมือที่ทำให้การทำงานผ่าน PhoneGap นั้นง่ายขึ้น อย่างเช่น Adobe Dreamweaver CS5.5 ที่มี feature อำนวยความสะดวกในการ export web project ของคุณออกเป็น Mobile Application ง่ายๆ ครับ หรือจะเป็น XCode ของ Apple ที่ตอนนี้มี Project Template ของ PhoneGap มาให้พร้อม

5. แล้วจากนี้จะติดตามเทคโนโลยี PhoneGap และเครื่องมือของ Adobe ในการใช้งาน HTML5 อย่างไร? 

"PhoneGap น่าสนใจมาก แต่จะติดตามเพิ่มเติมได้อย่างไร? หรือจะมี training ไหม?" (photo by Tostie14)

Adobe อยู่ในช่วงก้าวแรกของเทคโนโลยี HTML5 จริงๆ อย่าง Adobe MUSE และ Adobe Edge ที่ยังอยู่ในช่วง Beta ตอนที่เขียนบทความอยู่นี้ แต่ก็สามารถสร้างภาพให้มองเห็นอนาคตอันใกล้ว่า Adobe กำลังสร้างเครื่องมืออะไรให้เทคโนโลยีนี้บ้าง

คุณสามารถไป download และเริ่มศึกษาการพัฒนา Mobile Application ได้ทั้งจาก Website ของ JQuery Mobile  และ PhoneGap รวมถึงตัวทดลองใช้งานของ Adobe Dreamweaver ได้แล้ววันนี้ ซึ่งต้องบอกว่าการพัฒนาของทั้ง 2 ค่ายนั้นมีอยู่ตลอดเวลาจึงควรเข้าไปเช็คบ่อยๆ

หรือจะคอยติดตามกิจกรรมของ User Group: Thai Adobe Developer Community โดยการลงทะเบียนรับข่าวสารและกิจกรรมที่ให้คุณเข้ามาร่วมสนุกและเรียนรู้กันได้เป็นระยะ จากนั้นค่อยไป subscribe Vimeo Channel และ Like ThaiADC Fan Page ได้ใน Facebook เช่นกัน

และวันที่ 28 มกราคม 2555 ในงาน Bangkok Adobe Camp 2012 ช่วง Developer Session ผมกับ Peter ก็จะมาพูดถึง PhoneGap และแนวทางของเทคโนโลยีตัวนี้เช่นกันครับ ตอนนี้รีบไปลงทะเบียนจองที่นั่งกันก่อนที่ Website นี้ได้เลยครับ รายละเอียดเพิ่มเติมสอบถามที่คุณ Kajorn Bhirakit ได้เลย

Enjoy PhoneGap ครับ

เชิญเข้าร่วมกลุ่ม Thai Adobe Developer Community

ลงทะเบียนเพื่อรับข่าวสารเพื่อเข้าร่วมกิจกรรม,​ สัมผัสเทคโนโลยีใหม่ๆ ก่อนใคร, พบปะกับเพื่อนในวงการเดียวกัน,​ และมีสิทธิ์ลุ้นรับของรางวัล และ software จาก Adobe ในกิจกรรมของกลุ่มครับ

สมัครเข้าร่วมกลุ่มเพื่อรับแจ้งกิจกรรมทาง email และรับสิทธิร่วมสนุกรับของรางวัลได้ที่นี่ (ถ้าไม่มี Adobe Account ระบบจะให้คุณลงทะเบียน Adobe Account ก่อนครับ) จากนั้นติดตามข่าวสารได้ทาง ThaiADC Fan Page ครับ

และถ้าคุณใช้ JQuery Mobile เป็น Javascript framework ในการเขียนเว็บแนวใหม่ ไม่ว่าจะเป็น Responsive Web หรือ Mobile Application ด้วย PhoneGap ละก็ หนึ่งในงานที่คุณต้องใช้เวลาคือการสร้างและปรับแต่ง Theme ให้กับ Web Project คุณนั่นเอง

แต่วันนี้ผมมีเครื่องมือหนึ่งมาแนะนำครับ ชื่อว่า Theme Roller (ก็ของ JQuery Mobile เองแหละ) ที่จะทำให้คุณสร้างและแก้ไข Theme ของ project ที่สร้างด้วย JQuery Mobile ได้ง่ายและสะดวกขึ้น

ใช้กันอย่างไรดูใน video ได้เลยครับ หรือถ้าใครอยากลองแล้วก็เข้าไปที่ JQuery Mobile: Theme Roller​ ได้เลย

ว่าแต่คุณใช้ Javascript framework ตัวไหนกันบ้างครับ?​ และคิดว่ามีข้อดีอย่างไรบ้าง comment แชร์กันด้านล่างได้เลย!

หรือถ้าจะให้ผมอธิบายสั้นๆ ก็ลองนึกว่ามันคือภาษาในการเขียน website ที่ชื่อ HTML ตัวเดิม แต่เป็นเวอร์ชั่นล่าสุด (รุ่นที่ 5) ที่มีการปรับปรุงความสามารถหลายๆ ด้าน ให้คุณสร้าง Web ได้ดีขึ้น ได้สะดวกขึ้น และที่สำคัญ ให้อ่านและทำความเข้าใจได้ง่ายขึ้น

โดย HTML5 เนี่ยไม่ได้กระโจนออกมาอยู่ในสมรภูมิ web development technology โดดๆ นะครับ มันมากับสหายอีก 2 คน นั่นก็คือ CSS และ Javascript ซึ่งทั้ง 3 ตัวนี้ รวมเป็น web development platform ที่เนื้อหอมมากๆ เลยทีเดียว

แต่เนื่องจากความล่าช้าในการพัฒนา (เวอร์ชั่นที่ 4 ใช้กันมานานมากกก) ทำให้มาตรฐานการสร้าง web ที่เติบโตมากับสมัยอันรุ่งเรืองของ Internet โดน Flash ได้แย่งความโดดเด่นไปได้ ในฐานะ development platform ที่สร้าง interactive content ได้เร็วและน่าตื่นตาตื่นใจกว่า

แต่ Steve Jobs ก็เป็นคนที่ฉายแสงลงบน development platform ตัวนี้อีกครั้ง จนเกิดเป็นสงครามความเชื่อกระจายไปทั่วโลก ใครสนใจก็ลอง search คำว่า HTML5 vs Flash หรือ Apple VS Flash ได้ครับ

เอาเป็นว่าโลกตอนนี้หันมามอง HTML อีกครั้ง

ที่น่าตื่นเต้นคือ Adobe ได้ประกาศว่า จะสร้างชุดเครื่องมือที่ทำให้ Developer และ Designer ทำงานกับเทคโนโลยี HTML5 ที่ใช้งานได้ง่ายดายไม่แพ้เทคโนโลยี Flash เลยทีเดียว

Web Standard to Mobile Platform

ทีนี้เนื่องจาก HTML5 มันใช้งานง่ายกว่าเดิม และยุคที่พวกเราอยู่คือยุค Post-PC หรือเรียกง่ายๆ ว่าเป็นยุคที่ Smart phone และ Tablet ครองโลก ทำให้มีคนคิดว่าเจ้าเทคโนโลยี web standard นี่มาน่าจะเอามาลง Mobile ได้นะ ก็เป็นที่มาของเทคโนโลยีที่ชื่อว่า JQuery Mobile และ PhoneGap

Introducing to JQuery Mobile

หากใครทำ website ยุคนี้แล้วก็ต้องรู้จัก Javascript ซึ่งเปลี่ยน website นิ่งๆ ธรรมดาๆ ให้มีสีสัน และ Interactive ที่น่าตื่นตาตื่นใจ ไม่แพ้ multimedia technology อย่างอื่น โดยนิยมใช้ในการสร้าง website ให้สวยงาม จนไปถึงสร้าง web application ที่มีลูกเล่นดูดีน่าใช้อย่าง Campfire และ Facebook

และแทนที่ทุกคนจะต้องมานั่งเขียน Javascript ตั้งแต่นับ 1 ใหม่ ก็มีนักพัฒนาหลายๆ กลุ่มรวมตัวกันเขียนชุดคำสั่ง หรือที่เรียกกันติดปากว่า framework มาเพื่อให้นักพัฒนาคนอื่นใช้งานกัน และรวมตัวกันเป็น community ที่คอยปรับปรุงและพัฒนาให้มีลูกเล่นการใช้งานใหม่ๆ อยู่เสมอ โดย framework ที่มีผู้นิยมใช้กันก็อย่างเช่น script.aculo.us, Mochikit, Dojo Tookit, Spry framework, และ jQuery

JQuery นั้นเรียกได้ว่าเป็น Javascript Framework ที่ร้อนแรงที่สุดตัวหนึี่งในยุคนี้ และมีการต่อยอดออกไปเป็นชุดพัฒนา Web Mobile Application ที่มีชื่อเรียกว่า JQuery Mobile นั่นเอง

โดย JQuery Mobile framework นั้นออกแบบการทำงานมาเพื่อให้พัฒนา Web Mobile Application ได้อย่างสะดวกและรวดเร็ว โดยใช้ความรู้ในการสร้าง Website ด้วย HTML/CSS/Javascript มาใช้ โดยรายละเอียดเพิ่มเติมนั้นสามารถดูได้จาก Official website หรือลองเปิด demo ใน smartphone และ tablet ของคุณตาม URL http://jquerymobile.com/demos/

และสามารถติดตามข้อมูลผ่านหัวข้อ JQuery Mobile ใน website FlexBlog ได้ครับ

Introducing to PhoneGap

อันว่า Mobile Application นั้นเป็นตลาดที่เติบโตก้าวกระโดดที่สุดในวงการธุรกิจ software ในรอบหลายสิบปี สร้างรายได้นับแสนล้านดอลล่าร์ และยังมีทีท่าว่าจะโตขึ้นไปอีกเรื่อยๆ

ถึงแม้ว่าการใช้ JQuery Mobile ทำให้ website สามารถเปิดและใช้งานได้ “คล้าย” Native Mobile Application แต่จริงๆ มันก็ยังเป็น “Website” ไม่ใช่ Mobile Application ที่สามารถอัพโหลดขึ้น App Store หรือ download ลงมาติดตั้งใน smart phone หรือ tablet ได้

PhoneGap เป็นเทคโนโลยีที่มาเติมเต็มความต้องการนี้ โดยมันจะทำการแปลง Project Website ของคุณให้เป็น Mobile Application ที่สามารถอัพโหลด และติดตั้งได้เหมือนกับ Mobile Application ทำให้ขีดความสามารถของ Web Standard Platform อย่าง HTML5 มีประโยชน์มากขึ้นไปอีก

ที่สำคัญ Adobe เพิ่งเข้าซื้อ Nitobi ผู้สร้าง PhoneGap เข้ามาอยู่ในอาณัติของตัวเอง ต่อไปคงมีการพัฒนาอะไรที่น่าตื่นตาตื่นใจอีกแน่ๆ

สำหรับผู้ที่ต้องการทราบข้อมูลของ PhoneGap เพิ่มเติม ดูรายละเอียดเพิ่มเติมได้ที่ www.phonegap.com หรือติดตามผ่านหัวข้อ PhoneGap ใน website FlexBlog ได้เลยครับ

Where to go from here

เอาล่ะ เป็นอันว่าในบทความนี้ คุณได้ทำความรู้จัก (อาจจะรู้อยู่แล้วก็ได้ ) กับ HTML5, JQuery Mobile, และ PhoneGap ที่เป็น 3 เทคโนโลยีหลักที่จะช่วยให้คุณพัฒนา Mobile Application ด้วย Web technology ได้อย่างลื่นไหล และสะดวกรวดเร็วกว่าแต่ก่อนมากทีเดียว

และพบกับบทความตอนที่ 2 ที่จะนำเครื่องมือที่คุณต้องใช้งาน มาแนะนำให้รู้จักกันว่ามีข้อดีและข้อเสียอย่างไรครับ

ราตรีสวัสดิ์และขอให้ผ่านวิกฤตอุกทกภัยครั้งนี้ไปด้วยกันครับ