ส่วนประกอบของ Web Application

ส่วนประกอบของ Web Application 

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

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

เว็บแอปพลิเคชันในปัจจุบันประกอบไปด้วยการทำงานของเทคโนโลยีต่าง ๆ มากมาย ไม่ว่าจะเป็นตัวโปรแกรมเว็บบริการออกแบบแอพพลิเคชั่น (web application) เว็บเซิร์ฟเวอร์ (web server) เว็บเซิร์ฟเวอร์ซอฟต์แวร์ (web server software) ฐานข้อมูล (database) เว็บเบราว์เซอร์ (web browser) และอื่น ๆ ซึ่งแต่ละส่วนก็จะมีหน้าที่และการทำงานที่แตกต่างกันออกไป เราสามารถแยกส่วนประกอบของการทำงานของเว็บบริการออกแบบแอพพลิเคชั่นออกเป็นสองส่วนหลัก ๆ คือ เทคโนโลยีฝั่งผู้ใช้งาน (client-side technology) และ เทคโนโลยีฝั่งเซิร์ฟเวอร์ (server-side technology)

 

ส่วนประกอบฝั่งผู้ใช้งาน (Client-side Technology)

จากรูปทางด้านบน ด้านขวาของรูปเป็นเทคโนโลยีฝั่งผู้ใช้งานประกอบไปด้วย 3 ส่วนหลัก

1. เว็บเบราว์เซอร์ (Web Browser)
เว็บเบราว์เซอร์ เป็นซอฟต์แวร์ที่ผู้ใช้งานใช้ในการเข้าถึงเว็บบริการออกแบบแอพพลิเคชั่น  โดยที่เมื่อเริ่มต้นผู้ใช้งานทำการใส่ URL หรือว่าชื่อของเว็บไซต์ที่ต้องการเข้าใช้งาน เช่น https://www.google.com เมื่อเบราว์เซอร์ได้รับชื่อของเว็บไซต์ก็จะทำการแปลงจากชื่อของเว็บไซต์เป็น IP address ผ่านทาง DNS (ซึ่งจะอธิบายการทำงานในภายหลัง) หลังจากนั้นเว็บเบราว์เซอร์จะทำการสร้าง HTTP request เพื่อส่งคำร้องไปยังเว็บเซิร์ฟเวอร์ผ่านทางเครือข่ายอินเทอร์เน็ต เมื่อได้รับ HTTP response จากเว็บเซิร์ฟเวอร์ เว็บเบราว์เซอร์จะทำหน้าที่ในการอ่าน และแปลง HTTP response ให้เป็นข้อมูลที่ใช้ในการแสดงผลให้กับผู้ใช้งาน (ซึ่งอาจจะมีการเรียกใช้ Plugin ซึ่งจะอธิบายในส่วนต่อไป) ดังนั้นหน้าที่ของเว็บเบราว์เซอร์จะประกอบไปด้วย

• รับข้อมูลและคำสั่งจากผู้ใช้งาน
• แปลงคำสั่งของผู้ใช้งานให้เป็น HTTP request เพื่อส่งไปให้กับเว็บเซิร์ฟเวอร์
• ประมวลผล HTTP response และเรียกใช้ Plugin
• แปลงภาษา HTML, CSS, JavaScript ให้ข้อมูลสำหรับแสดงผลให้กับผู้ใช้งาน
• จดจำข้อมูลผู้ใช้งานเช่น ประวัติการใช้งาน ข้อมูล session และ cookie

2. ส่วนต่อความสามารถเว็บและเบราว์เซอร์ (Web Plugin และ Browser Add-on/Extension)
Web Plugin (ส่วนต่อความสามารถเว็บ) คือโปรแกรมที่ถูกเขียนให้ทำงานร่วมกับเว็บเบราว์เซอร์ Web Plugin ที่เป็นที่รู้จักกันดีเช่น Adobe Flash, PDF reader, Silverlight, Java Applet, และอื่น ๆ ซึ่ง Web Plugin เหล่านี้จะถูกเบราว์เซอร์เรียกใช้ก็ต่อเมื่อเว็บไซต์ที่เข้าใช้งานมีเนื้อหาที่ต้องแสดงผลโดย Plugin เช่น Adobe Flash Plugin จะถูกเรียกใช้โดยเบราว์เซอร์ก็ต่อเมื่อเจอเนื้อหาที่ต้องใช้ Flash Player ในการแสดงผล
Browser Add-one/Extension (ส่วนเพิ่มความสามารถเบราว์เซอร์) เป็นโปรแกรมที่ใช้ในการเพิ่มความสามารถให้กับเบราวเซอร์ เช่น ส่วนเพิ่มความสามารถที่ช่วยในการจัดการไฟล์ดาวน์โหลด ส่วนเพิ่มความสามารถที่ช่วยในการดาวน์โหลดไฟล์วีดิโอ เป็นต้น ซึ่งส่วนเพิ่มความสามารถเบราว์เซอร์เหล่านี้จะเน้นเพิ่มความสามารถให้กับเบราว์เซอร์ มากกว่าการประมวลผลเนื้อหาเว็บไซต์

3. ระบบปฏิบัติการ (Operating System)
ระบบปฏิบัติการทำหน้าที่ในการจัดการกับทรัพยากรของเครื่องคอมพิวเตอร์ ทำหน้าที่ในการรับ HTTP request จากเบราว์เซอร์และส่งต่อไปให้กับอินเทอร์เน็ต DNS ในระบบปฏิบัติการทำหน้าที่ในการแปลง URL ให้เป็น IP Address เพื่อค้นหาเครื่องเว็บเซิร์ฟเวอร์ สร้างการเชื่อมต่อ (TCP connection) ระหว่างเครื่องผู้ใช้งานและเครื่องเซิร์ฟเวอร์ ดังนั้นการทำงานของระบบปฏิบัติการจะเป็นสิ่งที่ผู้ใช้งานมองไม่เห็นแต่ก็มีความสำคัญมาก

ส่วนประกอบฝั่งเซิร์ฟเวอร์ (Server-side Technology)

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

1. เว็บแอปพลิเคชั่น (Web Application)
เว็บบริการออกแบบแอพพลิเคชั่น ถือว่าเป็นหัวใจหลักของเว็บไซต์เนื่องจากทำหน้าที่ติดต่อกับผู้ใช้งาน รับและแสดงข้อมูล ประมวลผลข้อมูล จัดการข้อมูลในฐานข้อมูล และอื่น ๆ เรียกได้ว่าเว็บบริการออกแบบแอพพลิเคชั่น เป็นซอฟต์แวร์ที่ให้บริการผู้ใช้งานทั่วโลกผ่านอินเทอร์เน็ต
หากนักพัฒนาได้เขียนเว็บบริการออกแบบแอพพลิเคชั่นตาม Model-View-Controller (MVC) แล้วก็จะสามารถแบ่งเว็บแอพพลิเคชันออกได้เป็นสามส่วนหลัก ๆ คือ

• ส่วนที่ติดต่อกับผู้ใช้งานเพื่อรับข้อมูลและแสดงผล (View)
• ส่วนที่ประมวลผลการทำงาน (Controller)
• ส่วนที่ใช้ในการติดต่อและจัดการกับข้อมูลและฐานข้อมูล (Model)

นักพัฒนาสามารถพัฒนาเว็บบริการออกแบบแอพพลิเคชั่นได้ด้วยภาษาคอมพิวเตอร์ที่หลากหลาย เราสามารถแบ่งภาษาที่ใช้ในการพัฒนาเว็บบริการออกแบบแอพพลิเคชั่นออกเป็นสองส่วนคือ Front-End Technology ใช้สำหรับพัฒนา View (ส่วนติดต่อกับผู้ใช้งาน) และ Back-End Technology ใช้สำหรับพัฒนา Model และ Controller (ส่วนประมวลผลและจัดการข้อมูล)

Front-End Web Technology
Front-End Web Technology จะหมายถึงส่วนของเทคโนโลยีที่ใช้ในการสร้างส่วนติดต่อกับผู้ใช้งาน ในการสร้างเว็บบริการออกแบบแอพพลิเคชั่น Front-End Technology ที่เป็นที่แพร่หลายได้แก่ HTML, CSS, และ JavaScript ซึ่งภาษาคอมพิวเตอร์เหล่านี้ถูกใช้อย่างแพร่หลายในการสร้างส่วนติดต่อกับผู้ใช้งานของเว็บบริการออกแบบแอพพลิเคชั่น ความหลากหลายของ Front-End Web Technology ถูกจำกัดด้วยมาตรฐานกลางที่ออกโดยองค์กรที่ไม่แสดงหาผลกำไรอย่าง World Wide Web Consortium (W3C) ซึ่งเป็นผู้กำหนดมาตรฐาน HTML, CSS, และ JavaScript เพื่อให้ผู้พัฒนาเบราว์เซอร์ให้แสดงผลข้อมูลในรูปแบบเดียวกัน เพื่อความสะดวกแก่ผู้ใช้งานและนักพัฒนา ซึ่งเบราว์เซอร์ในปัจจุบันต่างรองรับการประมวลผลของ HTML, CSS และ JavaScript โดยสมบูรณ์ แม้ว่าจะมีความแตกต่างในการแสดงผลไปบ้าง(เล็กน้อย)ในบางเบราว์เซอร์

Back-End Web Technology
Back-End Web Technology จะหมายถึงส่วนของเทคโนโลยีที่เป็นส่วนประมวลผลตรรกะและการทำงานของเว็บบริการออกแบบแอพพลิเคชั่น ไม่ว่าจะเป็นการตรวจสอบสิทธิ์การเข้าใช้ การเรียกดูและจัดเก็บข้อมูล การทำงานของเว็บบริการออกแบบแอพพลิเคชั่นในส่วนของ Back-End จะเริ่มหลังจากเว็บบริการออกแบบแอพพลิเคชั่นได้รับ HTTP request มาจากผู้ใช้งาน ทำการประมวลผล และส่งข้อมูลกลับไปให้กับผู้ใช้งาน เทคโนโลยีที่ใช้ในการพัฒนา Back-End ของเว็บบริการออกแบบแอพพลิเคชั่นจะมีความหลากหลายกว่า Front-End เนื่องจากไม่มีข้อจำกัดด้านมาตรฐานกลางดัง Front-End technology ที่ต้องรองรับมาตรฐานที่กำหนดโดย W3C เพื่อให้ทำงานกับเว็บเบราว์เซอร์ได้อย่างไม่มีปัญหา

2.1 เว็บเซิร์ฟเวอร์ซอฟต์แวร์ (Web Server Software)
Web server software เป็นโปรแกรมที่ทำงานอยู่บน web server ซึ่งหน้าที่หลักของ web server software คือการประมวลผล HTTP request ที่ได้รับมาและตอบกลับด้วย HTTP response ให้กับผู้ใช้งาน ปัจจุบันมี web server software หลายตัวที่ถูกใช้งานอย่างแพร่หลายเช่น Apache HTTP server, Internet Information Service (IIS) และ Nginx ยังมี web server software ตัวอื่นอีกมากในท้องตลาดที่ไม่ได้กล่าวถึงในทีนี้ อย่างไรก็ตาม web server software ที่ได้รับความนิยมอย่างแพร่หลายมากที่สุดในปัจจุบันคือ Apache HTTP server และผู้ใช้งานมักจะใช้คู่กับ PHP (ตัวแปลภาษา PHP) และ MySQL (ฐานข้อมูล)

3.ระบบปฏิบัติการ (Operating System)
ระบบปฏิบัติการบนฝั่งของเซิร์ฟเวอร์มีหน้าที่ในการจัดการกับทรัพยากรของเครื่องเซิร์ฟเวอร์ เช่น CPU memory และ bandwidth เป็นต้น เนื่องจาก web application เป็นบริการที่เปิดให้ผู้ใช้งานเข้าถึงได้ตลอดเวลา ดังนั้น ระบบปฏิบัติการบนเซิร์ฟเวอร์จึงต้องมีความเสถียรและสามารถจัดการกับทรัพยากรของเครื่องได้อย่างมีประสิทธิภาพ

การทำงานของ web application นั้นประกอบไปด้วยหลายส่วนทำงานร่วมกัน ซึ่งส่วนประกอบในการทำงานสามารถแยกออกเป็นสองส่วนนั่นคือ เทคโนโลยีในฝั่งของผู้ใช้งาน และเทคโนโลยีในฝั่งของเซิร์ฟเวอร์ โดยเทคโนโลยีในของฝั่งของผู้ใช้งานที่สำคัญคือ web browser และ plugin ที่ทำหน้าที่ในการอำนวยความสะดวกให้กับผู้ใช้งานในการท่องเว็บไซต์ ในส่วนของเซิร์ฟเวอร์ซึ่งมีหน้าที่ในการให้บริการ web application ให้กับผู้ใช้งานก็จะประกอบไปด้วย web application

ดังนั้น ก็ได้รู้จักการทำงานของเว็บแอพพลิเคชั่นไปแล้ว หากคุณสนใจที่จะทำเว็บแอพพลิเคชั่น  เรามีบริการออกแบบแอพพลิเคชั่น ไม่ว่าจะเป็น โปรแกรมขายหน้าร้าน ระบบขายหน้าร้าน ระบบสต๊อกสินค้า ระบบ POS โปรแกรมสต๊อกสินค้า เป็นต้น คุณสามารถติดต่อเราได้ที่ 02-046-8597 หรือ 094-551-6420 หรือ E-mail : info@ktndevelop.com พร้อมบริการคุณเต็มรูปแบบ บริการออกแบบแอพพลิเคชั่น  โปรแกรมขายหน้าร้าน ระบบขายหน้าร้าน ระบบสต๊อกสินค้า ระบบ POS โปรแกรมสต๊อกสินค้า