5 step เพื่อรู้จักกับ PhoneGap! โลกใหม่ของการพัฒนา Mobile Application ด้วย HTML5/Javascript/CSS

 

PhoneGap คืออะไร?

น่าจะเป็นคำถามที่คนอีกกว่าหลายล้านคนทั่วโลกเริ่มถามถึง หลังจากงาน 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 ทำงานอย่างไร?

หากจะพูดให้ง่าย การทำ 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 เป็นอย่างไร?

รูปแบบการพัฒนา 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 แล้วล่ะก็ คงต้องถามถึงราคาที่ต้องลงทุนแน่นอน

โชคดีจริงๆ ที่ PhoneGap นั้นเป็น open source เปิดให้ทุกคนรวมถึงคุณนำไปใช้งานได้ฟรีๆ ดังนั้นคุณไม่จำเป็นต้องเสียค่าใช้จ่ายเพิ่มเติมสำหรับเทคโนโลยี PhoneGap ครับ

แต่ก็มีบริษัทบางที่ สร้างเครื่องมือที่ทำให้การทำงานผ่าน PhoneGap นั้นง่ายขึ้น อย่างเช่น Adobe Dreamweaver CS6 ที่มี feature อำนวยความสะดวกในการ export web project ของคุณออกเป็น Mobile Application ง่ายๆ ครับ

หรือจะเป็น XCode ของ Apple ที่ตอนนี้มี Project Template ของ PhoneGap มาให้พร้อม

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

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 ครับ