วันอาทิตย์ที่ 16 กุมภาพันธ์ 2025 นี้ เรากำลังจะมีสอนกันในหัวข้อ “สร้างเว็บสำหรับ LINE LIFF ผนึกกำลังด้วย MongoDB” หรือในชื่อภาษาปะกิดว่า “Enhance LINE LIFF with MongoDB-Powered Web Apps”

เนื่องจากคอร์สนี้มีผู้เข้าร่วมจากหลากหลาย skill set และ experience

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

Table of content

• เว็บไซต์คืออะไร ?
• เว็บประกอบไปด้วยอะไรบ้าง ?
• จับรวมภาพเข้ากับที่เราจะเรียน

ในคอร์สนี้ที่เราจะมาเรียนรู้ในการใช้ library สุดฮิตอย่าง TailwindCSS เพื่อตกแต่งเว็บไซต์กัน

หลังจากนั้นเราจะทำให้เว็บของเราสามารถดึงข้อมูล LINE Profile จาก LINE LIFF API กัน เก็บข้อมูลลง [MongoDB Atlas](MongoDB Atlas)

และถ้าโอกาสดีเราจะลองต่อฐานข้อมูล MongoDB Atlas Vector Search สำหรับทำ AI กัน

แต่ก่อนอื่นนั้น เราต้องมาทำความเข้าใจการสร้างเว็บเบื้องต้นกันก่อน

เว็บไซต์คืออะไร ?

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

เว็บประกอบไปด้วยอะไรบ้าง ?

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

กลุ่มที่ 1 - สถาปัตยกรรมของเว็บแอปพลิเคชัน (Web Application Architecture)

เวลาที่เราใช้งานเว็บไซต์ในหลาย ๆ ครั้งเราจะได้ค้นพบว่า มันจะมีการทำงานด้วยกันประมาณ 3 ส่วน

• Frontend - ส่วนที่เราสามารถมองเห็นได้
  • มันคือสิ่งที่เราเห็นเป็นภาพ เห็นเป็นกล่อง เห็นเป็นปุ่ม คลิกได้ เลื่อนจับได้ บางครั้งขยับ แถมอาจมีสีด้วย
  • เราจึงเรียกสิ่งที่มองเห็นได้ จับต้องได้เหล่านี้ว่า “Frontend”
• Backend - ส่วนที่เราไม่ได้สามารถสัมผัสได้ แต่รู้ว่ามี 😱
  • มันคือสิ่งคอยรับคำสั่งจาก Frontend แล้วไปประมวลผลต่อ เช่น พอเรากดปุ่มโพสข้อความบนส่วน Frontend แล้ว ข้อมูลเรามันส่งไปที่ไหนไม่รู้ แต่อีกสักพักมันก็โผล่ขึ้นบนหน้าเว็บ
  • สิ่งที่ทำหน้าที่รับข้อมูล หรือ คำสั่ง คำร้องต่าง ๆ และนำไปประมวลตามความต้องการของเรา
• Database - ส่วนที่เก็บข้อมูลของเราไว้
  • หลังจากเรากดโพสไปแล้ว โพสของเราก็ปรากฎขึ้นบนเว็บ แปลว่า มันต้องมีสักที่ที่นึงเก็บข้อความที่เราพิมพ์อย่างแน่นวล

รูปแบบสถาปัตยกรรมที่มีทั้ง Frontend, Backend, และ Database แบบนี้ เราเรียกว่า 3-Tier Architecture

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

กลุ่มที่ 2 - เทคโนโลยีในการพัฒนา Frontend (Frontend Web Technologies)

ในที่นี่เราหมายถึง ภาษาที่ใช้ในการพัฒนาส่วนของ Frontend เบื้องต้น ซึ่งได้แก่

• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript

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

เปรียบได้ดั่งว่า HTML เป็นภาษาสำหรับขึ้นโครงสร้างของเว็บไซต์ ว่ามีส่วนประกอบอะไรบ้าง เช่น มีข้อความ, มีกล่องใส่วัตถุ, มีรูปภาพ, มีปุ่ม เป็นต้น

แต่ HTML อย่างเดียวไม่สามารถกำหนดรูปลักษณ์ หรือจัดวางตำแหน่งได้ เช่น ข้อความจะมีสีอะไร? อยู่ตรงไหน? กล่องจะมีขนาดเท่าไหร่? ปุ่มจะมีหน้าตายังไง?

เราจึงต้องใช้ CSS เป็นคนกำหนด ตกแต่งค่าหน้าตาของเหล่านี้ เช่น ข้อความสีแดงนะ ขนาดสัก 16px, กล่องนั้นจะมีมุมโค้งสัก 50% ให้กลมดิ้กไปเลย, รูปก็กว้าง 50% ของขนาดกล่องละกัน, และปุ่มไล่สีจากเขียวไปฟ้าก็ดี เช่นนี้ แต่ CSS ไม่สามารถกำหนดการโต้ตอบกับผู้ใช้ได้ เช่น กดปุ่มแล้วเกิดอะไรขึ้น? แอนิเมชันทำงานเมื่อใด?

และนั่นก็จะเป็นหน้าที่ของ JavaScript ที่จะคอยเป็นคนกำหนดว่า วัตถุต่าง ๆ บนหน้าเว็บนั้นจะมีหน้าที่อะไร เช่น

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

ซึ่งทำให้มันมีพลังอำนาจสูงมากในโลกของการพัฒนาเว็บไซต์

Fun Fact:

HTML และ CSS นั้นไม่ใช่ Programming Language หรือภาษาสำหรับเขียนโปรแกรมหรอกนะ แต่แท้ที่จริงแล้ว… HTML เป็น Markup Language ที่ตามหน้าที่มันเลยมีเวลาเพื่อกำหนดโครงสร้างนั่นเอง CSS ก็เป็น Stylesheet Language เอาไว้สำหรับแต่งองค์ทรงเครื่อง สไตล์ สีสัน ความสวยงามนั่นเอง

แต่ JavaScript นี่เป็น Programming Language จริง ๆ ที่ออกแบบมาเพื่อทำงานบนเว็บเบราว์เซอร์ เราสามารถเขียนคำสั่ง กำหนดตรรกะ ต่าง ๆ ได้นั่นเอง …ถึงแม้ตอนแรกมันจะเกิดมาเพื่อเป็น Scripting ก็ตาม แต่ก็เพราะความก้าวหน้าของเทคโนโลยีของเว็บไซต์ที่แหละ มันเลยได้เป็น Programming Language เต็มขั้น เราจึงได้เห็นการนำ JavaScript ไปพัฒนาทั้งเป็น Frontend และ Backend ต่าง ๆ

กลุ่มที่ 3 - องค์ประกอบของการทำงานเว็บ (Web Operation Components / Web Infrastructure)

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

ทำให้เว็บ ส่วนของ Frontend ทำงานได้

เว็บส่วนที่เป็น Frontend ที่ต้องแสดงผลนั้นหลัก ๆ พื้นฐาน เพื่อไม่ให้มันละเอียด และเข้าใจยากเกินไป ผมจะข้ามการทำงาน และ process ยิบย่อยออกไปออกไป และสรุปให้เข้าได้ง่าย ดังนั้นจะมีเพียง 2 อย่าง

1. Web Server - บ้านพักพิงของเหล่า HTML, CSS, JavaScript
   1. ดั่งที่เคย mention ไปก่อนหน้าว่า การที่เราจะเข้าถึงเว็บไซต์นั้นก็ต้องมีอยู่ให้กับเว็บเสียก่อน และสิ่งนั้นมันก็คือ Web Server ตามชื่อเลย Server ก็คือผู้ส่งมอบ คอยส่งมอบไฟล์ HTML, CSS, JavaScript ให้กับระบบ หรือ โปรแกรมที่เรียกร้อง
   2. ใน flow การทำงานทั่วไปนั้น เราจะใช้ Web Browser ในการเข้าใช้งานเว็บไซต์ และ Web Browser นั้นจะไปขอหน้าเว็บมาแสดงผลนั่นเอง
2. Web Browser - พาหนะสำหรับผู้ท่องโลกเว็บ
   1. ในการใช้เว็บเปิดดูหน้าเว็บไซต์นั้น เราจำต้องมีพาหนะในการไปยังที่ ๆ เว็บนั้นเก็บอยู่ แล้วนำมาเป็นแสดงผล และ Web Browser ก็คือคน ๆ นั้น
   2. Web Browser นั้น จะทำหน้าที่เป็นคนไปเรียกไฟล์ HTML, CSS, และ JavaScript ตามที่อยู่ที่เรากรอก จาก Web Server แล้วนำมา Render ขึ้นเป็นโครงและใส่สีตามที่ HTML, CSS กำหนด แล้วทำงานรัน JavaScript ขึ้นมา

จริง ๆ รายละเอียดการทำงานของ 2 อย่างนี้ยังมีอีกเยอะมากกกกก แต่เอาเท่านี้ก่อน เดี๋ยวเราจะล้นกันซะก่อน

จับรวมภาพเข้ากับที่เราจะเรียน

ถ้าหากเรานำเรื่องที่จะเรียนกันคอร์สมาจับ map กับเนื้อหาด้านบนจะออกได้เป็นแบบนี้ครับ

กลุ่มที่ 1 - สถาปัตยกรรมของเว็บแอปพลิเคชัน

Frontend

• Static Web App
• เราจะเขียนเว็บไซต์ชนิดแบบที่ตัวโครงสร้างหน้าเว็บจะไม่เปลี่ยนแปลง โครงสร้างจะเป็นแบบเดิมเสมอ หากต้องการเรียกข้อมูลเพิ่มเติม เราจะทำการส่ง request ไปยัง API (Backend) เพื่อให้ส่งข้อมูลตามที่เราต้องการมา

Backend

• REST API over HTTP
• เราจะใช้ REST API เพื่อเป็น interface สำหรับให้ Frontend ส่ง Request เข้ามา และ Backend ของเราจะทำการประมวลผลตามคำสั่งของเรา รวมไปถึงดึงข้อมูลจาก Database มาประมวลผลและส่งกลับไปด้วย

Database

• MongoDB Atlas
• เราจะใช้ MongoDB เป็นฐานข้อมูล สำหรับเก็บข้อมูลต่าง ๆ บนหน้าเว็บเรา
  • MongoDB เป็น Database ประเภท NoSQL ที่มีชื่อเสียงมาก ๆ ตัวนึง ซึ่ง MongoDB ถูกออกแบบมาเพื่อ focus ที่นักพัฒนาระบบ และตามความต้องการของระบบ มากกว่า ความสัมพันธ์ของข้อมูลเหมือนกับ RDBMS (Relational Database Management System) ซึ่งจะทำให้การเก็บข้อมูลนั้นยืดหยุ่นกว่ามาก ๆ และจะเก็บข้อมูลในรูปแบบโครงสร้างที่เหมาะกับการเรียกใช้งานของระบบเรามากกว่า
  • และ MongoDB Atlas คือ MongoDB เวอร์ชั่น Cloud ที่จะถูก managed และดูแลโดย MongoDB เอง แต่จะใช้ Cloud ของผู้ให้บริการ Cloud ชั้นนำของโลกไม่ว่าจะเป็น AWS, Google Cloud Platform, และ Microsoft Azure

กลุ่มที่ 2.1 - เทคโนโลยีในการพัฒนา Frontend

Markup Language = Plain HTML

• เราจะ HTML ตัวปกติ ธรรมดาบ้าน ๆ เลย เพื่อง่ายต่อการทำเข้าใจ และเนื่องจาก UI (User Interface) ของเราไม่ได้มีอะไรที่ซับซ้อนมากด้วย

Styling = TailwindCSS

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

JavaScript = Vanilla JavaScript

• ก็เครื่องใช้ JavaScript ปกติ ธรรมดา ๆ ไม่ใส่ไข่เลย เพื่อง่ายต่อการ setup และเหมาะสำหรับมือใหม่ด้วย

กลุ่มที่ 2.2 - เทคโนโลยีในการพัฒนา Backend

HTTP Server - Node.js with Express.js

• เราจะใช้ภาษา Node.js ทำเป็น Backend คู่กับ Express.js ซึ่งเป็น library สร้าง HTTP Server สำหรับเป็น REST API ให้ Frontend ได้มาเรียกใช้ด้วย
  • Node.js นั้นเป็น engine สำหรับการใช้งาน JavaScript ที่ปกติแล้วไว้ใช้เขียน Frontend นำมาใช้เขียนเป็น Server-side หรือ Backend ได้นั่นเอง ซึ่งสะดวกมาก ๆ

กลุ่มที่ 3 - องค์ประกอบของการทำงานเว็บ

Web Server = Netlify

• เพื่อความสะดวกเราจะใช้ Netlify เป็นที่สำหรับ host ไฟล์ HTML, CSS, JS ของเรา
• แต่ในขณะช่วงพัฒนาบนเครื่องเราจะใช้ Extension ใน Visual Studio Code เพื่อความง่ายต่อการพัฒนาและตั้งค่ากัน

Web Browser = LINE LIFF browser

• สุดท้ายแล้วเราจะนำเว็บไปใช้คู่กับ LINE LIFF ซึ่งเป็น browser ขนาดย่อมบน LINE กัน
• ซึ่งความสามารถของ LINE LIFF นั้นก็คือ เราสามารถที่จะดึงข้อมูลของผู้ใช้งานปัจจุบันมาแสดงผล และต่อยอดได้ โดยที่ต้อง Login อีกแล้ว
• แต่ในขณะช่วงพัฒนา เราสามารถ Modern Browser อะไรก็ได้ ไม่จะแต่ เหล่า Chromium-based browser, Google Chrome, และอื่น ๆ

แล้วเจอกันที่คลาสเรียนนะครับผม!