Ionic FrameworkPhoneGap/Cordova

ความผิดร้ายแรงที่ควรเลี่ยง เมื่อทำโมบายล์แอพแบบ Hybrid ด้วย PhoneGap หรือ Ionic

เรื่องที่เกี่ยวข้อง - , , ,

เนื่องจากช่วงนี้คนทำเว็บ เริ่มหันมาพัฒนาโมบายล์แอพพลิเคชั่น แบบ Hybrid มากขึ้นเรื่อยๆ เพราะถ้าเป็นแอพจัดการข้อมูล ก็สามารถเรียนรู้ และพัฒนาได้รวดเร็วมากในสายคนทำเว็บ

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

สงสัยล่ะสิ ว่ามันคืออะไร?

มันคือการใช้แอพเป็นตัวแสดงหน้าเว็บจากเซิฟเวอร์ครับ

หัวใจของแนวคิดของการพัฒนาโมบายล์แอพ แบบ Hybrid

HTML CSS JavaScript

แนวคิดของการพัฒนาโมบายล์แอพ แบบ Hybrid คือ การรวมจุดเด่นระหว่างการพัฒนาเว็บเดิม กับการพัฒนาโมบายล์แอพ แบบ Native (ดูวิดีโอแนะนำเพิ่มเติมได้ที่นี่) ซึ่งทำให้นักพัฒนาเว็บสามารถเริ่มต้นสร้างโมบายล์แอพได้แทบจะทันที แถมทำแอพได้ทั้ง 2 ระบบ ยอดนิยมทั้ง iOS และ Android

ซึ่งถ้าเป็นสายนักพัฒนาจะพอมองภาพออกว่า ส่วนของภาษาเว็บจะรับหน้าที่จัดการส่วนติดต่อผู้ใช้ หรือ User Interface รวมถึงการจัดการข้อมูลทั้งหมด ซึ่งภาษาที่ใช้ทำหน้าเว็บแอพพลิเคชั่นปกติ จะถูกใช้ในส่วนนี้ ได้แก่ HTML, CSS, และ JavaScript

ซึ่งจุดนี้แหละ สำคัญ

ดันมีหลายคน (ย้ำว่าหลายคนเลยนะ) คิดว่าในเมื่อตัวเครื่องมืออย่าง PhoneGap, Cordova, หรือ Ionic มันสามารถแสดงหน้าเว็บแอพเดิมจากเซิฟเวอร์ได้ เราก็ใช้ตัวโมบายล์แอพดึงหน้า UI ของเว็บแอพเดิมมาเลยซี่ ไม่ต้องเขียนโค้ดใหม่ แถมออกแรงนิดเดียวก็ได้ทั้งแอพ iOS และ Android แล้ว

แบบนี้มันผิดมหันต์ตรงไหน?

ผิดครับ ผิดตั้งแต่เริ่มคิดจะทำแล้ว ยิ่งคนทำออกมาแล้ว หรือขายให้ลูกค้านี่บาปสุดๆ เลยนะ จะแจกแจงให้ฟัง

1. คุณไม่ได้ทำแอพแบบ Hybrid จริงๆ

แนวคิดการทำโมบายล์แอพแบบ Hybrid คือ ส่วน Client จะอยู่ในฝั่งโมบายล์แอพที่ติดตั้งลงในเครื่องลูกค้าประมาณ 95 – 100%

แต่ด้วยวิธีแบบโหลดหน้า UI ทั้งหมดมาจากเซิฟเวอร์ นั่นคือการทำโมบายล์เว็บแอพพลิเคชั่น (Mobile Web Application) แล้วสร้างแอพมาครอบอีกทีครับ

การเลือกวิธีทางเช่นนี้ เหมือนเลือกด้านมืดของพลัง (เพลงสตาร์วอร์มา!) ซึ่งจะก่อให้เกิดผลกระทบตามมาดังข้อต่อไป

2. มันจะทำให้ UX ของ Mobile Application คุณห่วยแตก

การเอาโมบายล์แอพเปล่าๆ มาดึงหน้าเว็บแอพพลิเคชั่น ไม่ต่างอะไรกับให้ลูกค้า บันทึกปุ่มลัด (Short cut) ของหน้าเว็บนั้นลงเป็นไอคอนในมือถือเลย

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

เพราะอย่าลืมว่าเน็ตลูกค้าจะติด FUP เมื่อไหร่ก็ได้ Wifi จะเดี้ยงเมื่อไหร่ก็ได้ การทำโมบายล์แอพแบบ Hybrid จะทำให้เราออกแบบโมบายล์แอพที่ทำงานแบบออฟไลน์ได้ดีกว่าครับ

3. ไม่ผ่านการพิจารณาตามกฎ App Store ของ Apple

อันนี้โหดจริง เพราะถึงแม้เครื่องมือการพัฒนาโมบายล์แอพแบบ Hybrid จะการันตีว่าใช้แล้ว คุณจะได้ไฟล์แอพ Android และ iOS แน่นอน แต่การเอาขึ้นร้านให้ลูกค้าดาวน์โหลดมันต้องผ่านการตรวจสอบก่อนนะ

ซึ่งถ้าใช้วิธีสร้างโมบายล์แอพเปล่าๆ มาครอบเว็บแอพพลิเคชั่น โดนเด้งจาก Apple นะครับ (Android ก็ละไว้ในฐานที่เข้าใจกันเนอะ)

เพราะเนื่องจาก UX ที่ห่วยแตก ก็เพียงพอที่จะทำให้ Apple ตีกลับโมบายล์แอพของคุณได้แล้ว เพราะนิยามหนึ่งของโมบายล์แอพพลิเคชั่น ต้องสามารถเปิดใช้งานได้ แม้จะไม่ได้เชื่อมต่อกับอินเตอร์เน็ต ไม่ใช้ขึ้นหน้าจอ Network Connection Error พวกนี้

สรุป

นั่นคือสิ่งที่พลอธิบายให้ทุกคน ทั้งที่สอบถามเข้ามาทางแฟนเพจ หรืออบรมกับพล มาจะ 4 ปีแล้ว ก็ยังมีพวกเราที่ยังไม่เข้าใจแนวคิด Hybrid หรือแอบขี้เกียจ ขออย่าใช้การพัฒนาโมบายล์แอพแบบ Hybrid มาทำตัวครอบแบบนี้เลย

มันส่งผลเสียทั้งตัวเราเอง (ไม่ได้เรียนรู้ประสบการณ์ใหม่ๆ ในการทำโมบายล์แอพ) ต่อผู้ใช้ (ได้โมบายล์แอพห่วยๆ ไปด่า) และต่อลูกค้าด้วย (โดนด่าจากผู้ใช้อีกที)

สุดท้ายนี้ขอย้ำ อีกครั้งเกี่ยวกับเทคโนโลยีที่ใช้พัฒนา Hybrid Mobile Application แบบ Cross Platform ว่า:

PhoneGap, Cordova, Ionic เปิดโอกาสให้นักพัฒนาเว็บอย่างเราๆ สร้างโมบายล์แอพพลิเคชั่นด้วยภาษาที่คุ้นเคยได้ ไม่ใช่เอามาครอบเว็บแอพพลิเคชั่นนะครับ 🙂

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu