Web Application มีองค์ประกอบอะไรบ้าง

Web Application ประกอบด้วยอะไรบ้าง?

Web Application น่ะเหรอ? เอ่อ… ถ้าให้พูดแบบภาษาบ้านๆ ที่เคยเจอนะ มันก็เหมือนมีทีมเวิร์ค 4 คน คอยรับส่งงานกันอะ

Web Server: เจ้านี่แหละหน้าด่าน คอยรับออเดอร์จากลูกค้า (Client) ที่เป็นใครก็ได้ มือถือ แท็บเล็ต คอมพ์… คืออะไรที่ต่อเน็ตได้หมดอะ

Application Server: พอ Web Server ส่งออเดอร์มา เจ้านี่ก็เหมือนหัวหน้าทีม คอยสั่งงานลูกน้องอีกที ประมาณว่า “เฮ้ย! ไปเอาข้อมูลนี้มา!”

Database: ลูกน้องที่ว่าก็คือ Database นี่แหละ คลังข้อมูลขนาดใหญ่ เก็บทุกสิ่งอย่าง!

สรุปง่ายๆ ก็คือ Client สั่ง -> Web Server รับ -> Application Server สั่งงาน -> Database ส่งข้อมูลกลับไปให้ Application Server -> แล้ว Application Server ก็ส่งต่อให้ Web Server -> สุดท้าย Web Server ก็ส่งข้อมูลไปให้ Client อีกที จบ! คล้ายๆ ลูกโซ่เลยนะว่าไป

ตอนนั้นฉันเคยทำโปรเจกต์เว็บแอปฯ ตอนปี 2 ที่มหาลัย ตอนนั้นใช้ PHP, MySQL, Apache นี่แหละ เบสิกสุดๆ แต่ก็ทำให้เห็นภาพการทำงานของมันจริงๆ ว่าแต่ละส่วนมันสำคัญยังไง แล้วก็…ปวดหัวขนาดไหน ฮ่าๆๆ

Web App ประกอบไปด้วยกี่ส่วนอะไรบ้าง

เว็บแอปนะเหรอ? โอ๊ย พูดแล้วอยากกินกาแฟ (ไม่เกี่ยว 555) เอาจริง ๆ นะ เว็บแอปมันเหมือนบ้านหลังนึงที่เราเข้าไปอยู่

• User Interface (UI): เหมือนหน้าบ้านอ่ะ ใคร ๆ ก็เห็น เข้ามาก็เจอ ต้องสวย ต้องใช้งานง่าย (อันนี้สำคัญมาก)
• Browser Execution: คือห้องนั่งเล่นอ่ะ เราทำอะไรในนั้นได้บ้าง ดูทีวี เล่นเกม คุยกับเพื่อน ทุกอย่างเกิดในเบราว์เซอร์
• Single Page Application (SPA): เหมือนบ้านที่ทุกอย่างอยู่ในห้องเดียว ไม่ต้องเดินไปห้องอื่นให้เสียเวลา เร็วดี (แต่ก็อาจจะรกหน่อย)
• Data Retrieval: เหมือนห้องครัวอ่ะ เราไปหยิบอาหาร (ข้อมูล) มาจากตู้เย็น (ฐานข้อมูล) เพื่อเอามาทำอาหารกิน (ใช้งาน)
• Local Storage: เหมือนตู้เก็บของส่วนตัว เก็บของที่เราใช้บ่อย ๆ จะได้ไม่ต้องไปหาในครัวทุกที
• Security: เหมือนประตูบ้านอ่ะ ต้องแข็งแรง ป้องกันขโมย (แฮกเกอร์) ไม่ให้เข้ามาขโมยของ

ปีนี้ (2567) เรื่อง Security นี่สำคัญสุด ๆ ข้อมูลรั่วทีเดียว ชีวิตพังเลยนะเออ

Web Application มีอะไรบ้าง

Web Application: ประตูสู่โลกดิจิทัล ใครๆ ก็เข้าได้

• Static Web Application: เหมือนรูปถ่าย ไม่ขยับ เปลี่ยนยาก ข้อมูลตายตัว

• Dynamic Web Application: ตอบโต้ได้ เปลี่ยนแปลงตามสถานการณ์ ข้อมูลมีชีวิต

• Single-Page Application (SPA): หน้าเดียวจบ โหลดครั้งเดียว ประสิทธิภาพสูง ใช้งานลื่นไหล

• Multi-Page Application (MPA): หลายหน้า โหลดใหม่ทุกครั้ง ซับซ้อน แต่ยืดหยุ่น

• Progressive Web Application (PWA): ติดตั้งได้เหมือนแอป ทำงานออฟไลน์ได้ ประสบการณ์เหมือนแอปเนทีฟ

• Content Management Systems (CMS): สร้างเว็บง่าย ไม่ต้องเขียนโค้ด WordPress คือตัวอย่าง

• E-commerce Web Application: ร้านค้าออนไลน์ ซื้อขายง่าย จ่ายเงินสะดวก

ข้อมูลเพิ่มเติม:

• SPA เหมาะกับเว็บที่เน้นประสบการณ์ผู้ใช้ เช่น Gmail, Twitter
• MPA เหมาะกับเว็บขนาดใหญ่ ที่มีเนื้อหาหลากหลาย เช่น เว็บข่าว, เว็บบอร์ด
• PWA เป็นเทรนด์ใหม่ ที่เน้นความเร็ว และการใช้งานแบบออฟไลน์
• CMS ช่วยให้คนที่ไม่ใช่โปรแกรมเมอร์ สามารถสร้างเว็บได้
• E-commerce คืออนาคตของการค้าขาย
• Static Web App เหมาะกับเว็บ Portfolio ส่วนตัว
• ความเร็วในการโหลดหน้าเว็บคือทุกสิ่ง
• Web Application คือ Soft Power
• JavaScript คือราชาแห่งเว็บ
• Web App เปรียบเสมือนบ้าน ที่ใคร ๆ ก็สร้างได้

WEP Application และ Website ต่างกันอย่างไร

WEP Application กับ Website ต่าง?

• Website: ข้อมูลนิ่ง. อ่าน. จบ.
• Web App: ทำงาน. โต้ตอบ. เปลี่ยนแปลง.

Website คือ หน้ารวม. Web App คือ โปรแกรม. เข้าใจ?

เพิ่มเติม:

• Website ส่วนใหญ่ใช้ HTML, CSS, JavaScript แค่แสดงผล
• Web App ใช้ภาษาฝั่ง Server (Python, Java) + ฐานข้อมูล. ซับซ้อนกว่า.
• Netflix? Web App. Blog อ่านข่าว? Website.
• WEP Application? ไม่คุ้น. อาจหมายถึง Web Application เฉพาะทางด้าน Wireless Encryption Protocol รึเปล่า? ถ้าใช่, ก็คือ Web App แบบหนึ่ง.
• Web App ยุคนี้เน้น Progressive Web Apps (PWAs) ติดตั้งได้เหมือน App บนมือถือ.

ส่วนใดขององค์ประกอบของ Web Application มีหน้าที่ในการจัดการคําสั่ง

เว็บเซิร์ฟเวอร์รับคำขอ แอปพลิเคชันเซิร์ฟเวอร์ประมวลผลคำสั่ง

• Web Server: รับคำขอจาก client หน้าที่หลักคือการส่งต่อ ไม่ใช่การประมวลผลคำสั่งโดยตรง
• Application Server: แก่นหลักการทำงาน จัดการคำสั่ง ประมวลผลตาม logic ที่กำหนด

เพิ่มเติม: ฐานข้อมูล (Database) เก็บข้อมูล ส่วน Client คือส่วนแสดงผล (Frontend) ปีนี้เทรนด์ microservices แยกส่วนการทำงานย่อยๆ เพิ่มความยืดหยุ่น

#การออกแบบ #ส่วนประกอบ #เว็บแอปพลิเคชัน