ง่ายจริง! ทำความเข้าใจกับ PhoneGap/Cordova แบบเร็วๆ

สอน และทำเกี่ยวกับ Hybrid Mobile Application ตั้งแต่มันยังไม่ใช้ JQuery Mobile จะ 4 ปีแล้ว พอจับข้อสงสัยยอดนิยมของคนส่วนใหญ่ได้ เอามาอธิบายกันสั้นๆ ง่ายๆ ในนี้ดีกว่า

1. PhoneGap/Cordova คืออะไร?

ระบบ หรือโซลูชั่นที่ทำให้คนที่ทำเว็บเป็นอยู่แล้ว สามารถข้ามมาพัฒนาแอพพลิเคชั่นบนอุปกรณ์พกพาได้ง่ายที่สุด (Mobile Application หน่ะแหละ)​

ภาษาที่ใช้สร้างตัวแอพ สำหรับ PhoneGap/Cordova คือภาษาเว็บอย่าง HTML, CSS, และ Javascript

2. PhoneGap/Cordova เอาไปทำแอพพลิเคชั่นระบบอะไรได้บ้าง

ตามนี้

• iOS
• Android
• Windows Phone 7, 8, 8.1
• Windows 8, 8.1
• Windows Phone 10 (เรียกอีกชื่อว่า Universal App ทำงานได้ตั้งแต่ PC, Tablet, Smart phone)
• Firefox OS
• Ubuntu Phone
• BlackBerry
• Symbian

3. PhoneGap/Cordova ทำงานได้อย่างไร?

ให้มองว่า PhoneGap/Cordova คล้ายกับแอพพลิเคชั่นเว็บเบราเซอร์ทำเอง (Home-made Web Browser) ซึ่งหน้าที่ของมันคือเปิดไฟล์ HTML ที่ต้องการขึ้นมาแสดงแทนส่วนติดต่อผู้ใช้ หรือที่เราเรียกกันติดปากว่า User Interface

ซึ่งทีมผู้สร้าง PhoneGap/Cordova ได้สร้างต้นแบบของแอพพลิเคชั่นด้วยภาษา Native (ใช้ภาษาของระบบนั้นๆ สร้างขึ้น เช่น Android ก็ใช้ภาษา Java ส่วน iOS ก็ใช้ภาษา Objective-C) ให้ทำงานเหมือนกัน คือเปิดไฟล์ HTML, CSS, Javascript ขึ้นมาแสดง

ดังนั้น PhoneGap/Cordova เป็นแอพพลิเคชั่นแบบ Native ซึ่งมีส่วนติดต่อผู้ใช้เป็นหน้าเว็บที่อยู่ภายในแอพนั่นเอง (ไม่ได้เปิดไฟล์เว็บมาโชว์จาก Server อย่างที่บางคนเข้าใจผิด และถึงทำได้ในเชิงเทคนิค ก็ไม่แนะนำ)

4. PhoneGap และ Cordova แตกต่างกันอย่างไร

ให้เข้าใจว่า ทั้ง PhoneGap และ Cordova คือฝาแฝดที่เดินคนละเส้นทาง

• PhoneGap เกิดก่อน เป็นโครงการ Open-source สร้างโดยบริษัทชื่อ Nitobi โดนซื้อโดย Adobe เอาไปรวมกับ Solution ของ Adobe Dreamweaver เมื่อประมาณ 2 ปีที่แล้ว
• Cordova เกิดตามมา เพราะ Adobe และ Nitobi ต้องการให้ PhoneGap เป็นโครงการ Open-source ต่อไป เลยบริจาคให้

ดังนั้นทั้ง 2 เหมือนฝาแฝด ทำได้งานได้เหมือนๆ กัน แตกต่างตามกฎหมาย และวิธีนำไปใช้งาน

PhoneGap ผู้พี่จะเชื่อมต่อกับระบบ PhoneGap Build ของ Adobe อีกที

Cordova ผู้น้องถูกนำไปพัฒนาร่วมกับระบบต่างๆ เช่น โปรแกรมช่วยเขียนโค้ดอย่าง Visual Studio, Jet Brain และโครงการ Hybrid Mobile Application อื่นๆ เช่น AppGyver, CrossWalk, Ionic Framework

Based on true story.

5. แอพที่สร้างด้วย PhoneGap/Cordova เป็นแอพแบบ Native ใช่หรือไม่?

ใช่แล้ว แอพที่ได้เป็นแอพแบบ Native ทั่วไป เพียงแต่ส่วนติดต่อผู้ใช้ ถูกสร้างขึ้นด้วยภาษาเว็บฝั่ง Front-end นั่นก็คือ HTML, CSS, Javascript

6. ภาษาเว็บ Server อย่างเช่น PHP, ASP.NET ทำงานใน PhoneGap/Cordova ได้ไหม?

ไม่ได้ เพราะภาษาฝั่ง server ทั้งหมดจำเป็นต้องมีตัวแปลง หรือทำงานบน Web server โดยตรง ภาษาอย่างพวก PHP, Ruby on Rails, ASP.NET, หรือ JSP ไม่สามารถทำงานบนแอพพลิเคชั่นได้ (มือถือลูกค้าไม่มี Web server)

7. ถ้าต้องการเก็บข้อมูลบนแอพพลิเคชั่นที่สร้างด้วย PhoneGap/Cordova สามารถทำได้หรือไม่?

สามารถทำได้ ทาง PhoneGap/Cordova มีส่วนติดต่อกับฐานข้อมูลแบบ SQLite 3 ซึ่งเหมือนกับที่ภาษา Native ของระบบอื่นๆ ใช้

8. เขาว่ากันว่าใช้ PhoneGap/Cordova ทำแอพแล้วช้าจริงหรือ? แล้วแก้ไขได้อย่างไร?

PhoneGap/Cordova ไม่ได้มีส่วนเกี่ยวข้องในประสิทธิภาพของแอพพลิเคชั่น เหมือนที่อธิบายในข้อ 3

ส่วนที่ส่งผลต่อประสิทธิภาพของแอพโดยรวม เกิดได้จาก 3 ส่วนใหญ่ๆ

1. WebView และรุ่นของระบบปฏิบัติการ
2. Framework ที่เลือกใช้
3. วินัยในการเขียน Code ของนักพัฒนา

1. WebView

เจ้า Web View นี่คือส่วนสำคัญที่ทำให้แสดงผลไฟล์เว็บใน ใน Web view ของ Android รุ่นเก่าๆ ส่วนนี้ห่วยแตกพอสมควร (ให้ลองนึกถึงการ์ดจอ 3 มิติ ห่วยๆ) แถมเปลี่ยนไปเรื่อยๆ ทำให้ Web View ใน Android แต่ละรุ่นไม่เหมือนกัน

แต่หลังจาก Android 4.0 เป็นต้นมา Google ได้ปรับระบบเพื่อให้ Web View ส่วนนี้เหมือนกันหมด และอัพเดตตามกันได้เกือบทุกรุ่น ส่วนรุ่นเก่าๆ มีโครงการ Crosswalk ของอินเทลเข้ามาช่วย

ส่วนใน iOS ไม่มีปัญหา เพราะแกทำมาดีตั้งแต่ iOS 6 แถมใน iOS 8 นี่ยิ่งกว่าติดเจ็ท

2. Framework ที่เลือกใช้

ปัจจุบันนักพัฒนา (Developer) พัฒนาเว็บแอพได้เร็วกว่าเดิมมาก เพราะมี Framework มาให้เลือกใช้

แต่พอมาถึงยุค Mobile device เจ้า Framework พวกนี้กลับแผลงฤทธิ์

เพราะตอนที่ Framework ถูกสร้างขึ้นมาช่วงแรกๆ ไม่มี Smart phone หรือ Tablet ไม่มีระบบ Android หรือ iOS มีแต่ Windows, Mac และ Linux สเปคเทพมากมาย

ทำให้เวลามาทำงานบนอุปกรณ์พกพา สะดุดมั่ง ล้มมั่ง อืดมั่ง

นักพัฒนาควรศึกษา Framework ให้ดีก่อนที่จะเอามาใช้กับโครงการที่ต้องใช้งานบนอุปกรณ์พกพา เดี๋ยวนี้หลายๆ ตัวที่เหมาะสมกับการทำงานบนอุปกรณ์พกพา ก็เกิดใหม่มากมาย

3. วินัยในการเขียน Code ของนักพัฒนา

ตอนที่ผมสอน นักพัฒนาหลายๆ คนจะติดการทำงานมาจากฝั่งของการพัฒนาเว็บที่ไม่ดี เช่น

• บางคนตัดแปะ code จากอินเตอร์เน็ต ถ้าทำงานได้ก็บันทึกไว้ ไม่ได้ปรับแต่งอะไร
• บางคนไม่ใช้ Framework ก็ไม่เอาออก

วิธีปรับปรุงคือ

• ต้องเรียนรู้การทำงานของระบบให้รู้จริง
• เรียนรู้การสร้างแอพในแบบ Object-Oriented (OO) ให้เข้าใจ จะทำให้ทำงานง่ายขึ้น แก้ไขปรับปรุงแอพมีปัญหาน้อย
• เรียนรู้การสร้างแอพในรูปแบบ Agile และ Test-driven development จะทำให้สร้างแอพได้เร็ว ผิดพลาดน้อยในระยะยาว

9. เทคนิคการเพิ่มประสิทธิภาพตัวแอพที่สร้างจาก PhoneGap/Cordova

วิธีการเพิ่มความเร็วมีหลายเทคนิค ซึ่งต้องเลือกใช้ให้เหมาะสมกับงาน เช่น วิธีลดเวลาหน่วงของการกดปุ่มบนแอพ

ลองค้นหาเรื่อง Web optimisation ก็สามารถนำมาประยุกต์ใช้ได้เช่นกัน

สรุป

นั่นคือคำถามที่หลายๆ คนจะสงสัย และเท่าที่โค้ชพลนึกขึ้นได้ในตอนนี้ ไว้รอบหน้าจะมาเข้าใจกันง่ายๆ กับ Ionic Framework กัน

ใครสนใจมาอบรมกับโค้ชพลได้ตามด้านล่าง หรือจะให้ไปอบรมแบบเจาะเนื้อหาถึงที่ก็ได้นะ โทร 083-071-3373

• สร้าง Mobile App ด้วย HTML 5, Angular JS, และ Ionic Framework
• สร้าง Mobile App ด้วย HTML 5, JQuery Mobile, และ PhoneGap 4