Web Developer

วิธีต่อยอดระบบ Web Application ที่มีอยู่เดิม สู่ Mobile Application

เรื่องที่เกี่ยวข้อง - ASP.NET, Java, Mobile Application Development, Node, Node JS, Server

เว็บ เป็นหนึ่งในระบบที่พวกเราชาวไทยคุ้นเคยกันเป็นอย่างดี โดยเฉพาะคนรุ่นยุคบุกเบิกของการทำเว็บไซต์ และเว็ฐแอพพลิเคชั่นเมืองไทย ที่มีภาษา PHP รู้จักกันในภาษาที่ไม่ซับซ้อน เข้าใจง่าย เห็นผลเร็ว รวมถึงภาษาอย่าง ASP, Java, .NET ที่มีให้เลือกใช้แตกต่างกัน

โดยเฉพาะตอนนี้ที่ PHP ได้กลายเป็นพื้นฐานของระบบ CMS อย่าง WordPress, Joomla, Drupal หรือ Framework ดีๆ ก็มีพัฒนามาอำนวยความสะดวกอย่าง Laravel และ Codeignitor ที่หลายๆ คนก็ใช้กันอยู่

แต่พอลูกค้าเรียกหาการใช้งานระบบเว็บแอพพลิเคชั่นผ่านโทรศัพท์มือถือรุ่นใหม่ อย่างสมาร์ทโฟน (Smartphone) หรือแท็บเลต (Tablet) ทำให้พวกเราหลายๆ คนต้องหันมามองวิธีการพัฒนาโมบายล์แอพพลิเคชั่น เพื่อตอบโจทย์ และรองรับตลาดที่ใหญ่กว่าหลายเท่านัก

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

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

ระบบเดิมของเรา Web Client-Server

ถ้าเราต้องการพัฒนาเว็บแอพพลิเคชั่นขึ้นมาสักตัว ในท้ายที่สุดแล้วพวกไฟล์ต่างๆ เช่น HTML, CSS, JavaScript ต่างๆ รวมถึงภาษา Server อย่าง PHP หรือ Java ก็จะถูกเอาไปไว้ใน Server ที่เราติดตั้งฐานข้อมูลไว้ให้ทำงานเรียบร้อย

ยกตัวอย่างกรณีนี้ เอาเป็น PHP แล้วกันเนอะ

ทีนี้เวลาลูกค้าเข้าเว็บของเรา ก็จะมีการใช้โปรแกรมแบบหนึ่งที่ชื่อ Web Browser (ใครทำเว็บมา จะจำกันได้แน่ๆ ก็คือ IE) โดยโปรแกรมนี้จะทำการส่งสัญญาณขอให้ Server ส่งหน้าเว็บที่พร้อมโชว์ให้ลูกค้าดูมาให้หน่อย

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

หลังๆ มาก็มีเทคนิคที่เรียกว่า Ajax ทำให้การทำงานส่วนนี้สะดวกรวดเร็วขึ้นมาก แต่ไม่อธิบายในที่นี้แล้วกันเนอะ

เอาล่ะ ทีนี้โมบายล์แอพพลิเคชั่นมาอยู่ส่วนไหนในระบบเว็บแอพพลิเคชั่นของเรา?

ระบบต่อขยาย Mobile Client-Server

หากเปรียบเทียบแล้วโมบายล์แอพพลิเคชั่น จะอยู่ในบทบาทเดียวกับโปรแกรมคอมพิวเตอร์มากกว่า นั่นคือตัวโปรแกรมเกือบทั้งหมด อย่างเช่นส่วนติดต่อผู้ใช้ (User Interface) จะอยู่ถูกติดตั้งอยู่ในเครื่องลูกค้าโดยตรง

ตรงนี้ทำให้เราสามารถมองได้ว่า Smart phone หรือ Tablet เป็นคอมพิวเตอร์ที่ลงโปรแกรมได้เหมือนกับ PC หรือคอมพิวเตอร์ Notebook ทั่วไป (แต่รูปแบบการใช้งานก็แตกต่างออกไปนะจ๊ะ)

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

คำถามคือตอนนี้โมบายล์แอพพลิเคชั่นของเราไม่ได้อยู่ที่ฝั่ง Server เหมือนเว็บแอพพลิเคชั่นอีกต่อไปแล้ว โมบายล์แอพพลิเคชั่นจะติดต่อกับฐานข้อมูลเดิมอย่างไร?

ต่อเข้าระบบฐานข้อมูลเดิม ผ่าน Web Service หรือ Web API

เนื่องจากแอพพลิเคชั่นของเราแยกออกจากฝั่งของ Server อย่างชัดเจน เรียกว่าอยู่บ้านคนละหลังกันแล้วก็ได้ ทำให้ต้องมี “ประตู” ที่สร้างขึ้นมาโดยเฉพาะ ในการรับส่งข้อมูลแลกเปลี่ยนกัน

วิธีการสร้าง “ประตู” ที่ว่านี้ กำหนดเป็นมาตรฐานที่ีเรียกว่า Web Service จนพัฒนามาเป็น Web API ในปัจจุบัน

ดังนั้นโมบายล์แอพพลิเคชั่น จะส่ง/รับข้อมูล ผ่าน “ประตู”​ ที่ทางเจ้าของสร้างขึ้นมาโดยเฉพาะ เพื่อควบคุมการเข้าถึง และใช้งานทรัพยากรเดิม อย่างเช่นฐานข้อมูลในระบบของเรา

ซึ่ง Web Service หรือ Web API ไม่ได้รองรับเฉพาะการทำงานกับโมบายล์แอพพลิเคชั่นเท่านั้น เพราะเนื่องจากมันเป็นมาตรฐานที่ทุกฝ่ายยอมรับ เราสามารถพัฒนาโปรแกรม หรือระบบอื่นๆ เพื่อมาเรียกใช้งาน Web Service หรือ Web API นี้ได้ เช่น

  1. Desktop Application บนคอมพิวเตอร์
  2. ระบบเว็บแอพพลิเคชั่นที่เข้ามาใช้งานระบบเดิมของเรา
  3. อุปกรณ์ IoT (Internet of Things) ต่างๆ ที่คอยส่งข้อมูลมาเก็บไว้ในระบบ
  4. หุ่นยนต์ และระบบอื่นๆ

พวกเราน่าจะพอมองภาพออกว่า การพัฒนา Web Service หรือ Web API ได้กลายเป็นขั้นตอนสำคัญ ในการต่อขยายระบบเดิมที่เรามี ให้รองรับกับเทคโนโลยีใหม่ๆ ไม่ได้ยึดติดกับแค่ระบบเว็บแอพพลิเคชั่นเดิม

การพัฒนาโมบายล์แอพพลิเคชั่นด้วยเทคโนโลยี Hybrid

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

ตรงนี้ต้องเคลียร์ให้เข้าใจกันเลยว่า

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

ตอนที่สอนจะมีให้ลองคิดภาพตามว่า ไฟล์ HTML, CSS, JavaScript นั้นถูกนำมาสร้างเป็นส่วน UI และการทำงานของตัวแอพพลิเคชั่นจริงๆ เลย ไม่จำเป็นต้องส่งคำขอไปที่ Server

ส่วนข้อมูลจาก Database Server ก็จะทำการรับส่งผ่าน Web Service และ Web API เหมือนกับภาษาอื่นๆ เช่น Objective-C, Swift, Java, .NET

ดังนั้นหากจะออกแบบให้ ตัวแอพเป็นแค่แอพหน้าเปล่าๆ แล้วโหลดหน้าเว็บบน Server เดิมมาแสดง อยากจะบอกว่า

อย่าาาาาาา

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

วางแผนขยายระบบยังไงดี?

จากที่คุยกันมา น่าจะเห็นตรงกันอย่างแรกเลยว่า

ถ้ายังไม่มี Web API ก็เริ่มพิจารณาการวางแผนออกแบบ และสร้างได้แล้ว

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

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

ยิ่งช่วงนี้พลก็มีโอกาสไปบรรยาย และจัดเวิร์คชอปเน้นด้าน Web API หลายที่เหมือนกัน เพราะสร้างแล้ว มันจะอยู่คู่เราไปอีกนาน ต้องจริงจังนิด ที่ปรับสอนไปในแต่ละที่ก็มีภาษาหลักๆ ดังนี้

  • PHP (เรียนรู้วิธีทำ Web API เริ่มต้นด้วย Slim Framework ที่นี่)
  • Node.js
  • .NET Framework
  • Ruby on Rails
  • Python

สนใจจัดเวิร์คชอปกันสักที ก็ทักมาทางแฟนเพจได้จ้า

เริ่มต้นเรียนรู้ สร้างแอพ iOS และ Android ด้วย Google Flutter เรียนกับโค้ชพลได้เลย

เนื้อหาเข้าใจง่าย, เรียนรู้จากโปรเจคจริง, ดูได้ทุกเวลา ไม่มีวันหมดอายุ

https://www.youtube.com/watch?v=zOGeelhrDaY

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save