รู้จักกับ Web Technology
เทคโนโลยีเว็บ = เทคนิคที่ใช้คอมพิวเตอร์แลกเปลี่ยนข้อมูลกัน โดยใช้ภาษา Markup และสื่อมัลติมีเดีย ทำงานบนพื้นฐานของ WWW และอินเทอร์เน็ต
เว็บเทคโนโลยีคืออะไร
- เทคนิคหรือวิธีการที่ใช้คอมพิวเตอร์ในการแลกเปลี่ยนข้อมูล
- ใช้ภาษาเครื่องหมาย (Markup Language) และสื่อมัลติมีเดียเป็นหลัก
- ช่วยให้คอมพิวเตอร์และผู้ใช้สื่อสารกันผ่านเครือข่ายได้
- ครอบคลุมแนวคิดพื้นฐานของ World Wide Web (WWW)
- อาศัยอินเทอร์เน็ตเป็นโครงสร้างพื้นฐาน
ที่มาของ WWW
| ปี | เหตุการณ์ |
|---|---|
| มีนาคม 1989 | Tim Berners-Lee เสนอเอกสาร Information Management: A Proposal ที่ CERN |
| ตุลาคม 1990 | ระบุเทคโนโลยีรากฐานของเว็บ: HTML, URI/URL, HTTP |
ปัญหาต้นเรื่องที่ CERN: การสูญหายของข้อมูล (Information Loss)
และข้อจำกัดของโครงสร้างเดิมที่เป็นลำดับชั้น (hierarchical) อย่างเดียว
3 เทคโนโลยีรากฐาน
| เทคโนโลยี | ย่อมาจาก | ทำหน้าที่ |
|---|---|---|
| HTML | HyperText Markup Language | ภาษา markup กำหนดโครงสร้างหน้าเว็บ |
| URI | Uniform Resource Identifier | ตัวระบุทรัพยากรแบบไม่ซ้ำกัน บอกว่าทรัพยากรคืออะไร/อยู่ที่ไหน |
| HTTP | HyperText Transfer Protocol | ข้อกำหนดการส่งข้อมูลบนเว็บ ใช้รูปแบบ Request-Response |
URI vs URL — ข้อสอบชอบถาม
| URI | URL | |
|---|---|---|
| ความหมาย | แนวคิดที่กว้างกว่า ใช้ระบุ (identify) ทรัพยากรใด ๆ | บอกที่อยู่ (locate) ของทรัพยากรบนอินเทอร์เน็ต |
| ต้องอยู่บนเว็บไหม | ไม่จำเป็น — ไฟล์ในเครื่องก็เป็น URI ได้ | ปกติชี้ที่อยู่บนเครือข่าย |
| ตัวอย่าง | file:///myfileplace/path/file.docx | https://cmu.ac.th/index.html |
ทุก URL เป็น URI แต่ไม่ใช่ทุก URI ที่เป็น URL
วิวัฒนาการ Web 1.0 / 2.0 / 3.0
| ยุค | ลักษณะ | ผู้ใช้ทำอะไร |
|---|---|---|
| Web 1.0 | เว็บอ่านอย่างเดียว (read-only) เนื้อหาคงที่ | อ่านอย่างเดียว |
| Web 2.0 | เว็บโต้ตอบได้ มี social media, user-generated content | อ่านและเขียน |
| Web 3.0 | เว็บเชิงความหมาย (semantic) ข้อมูลเชื่อมโยงกัน กระจายศูนย์ | อ่าน เขียน และเป็นเจ้าของข้อมูล |
Client-Server Model
ทุกอย่างในเว็บวางอยู่บนวงจรนี้ ตั้งแต่ขอหน้า HTML ไปจนถึงเรียก API
Front-end vs Back-end
| Front-end (Client-side) | Back-end (Server-side) | |
|---|---|---|
| ทำงานที่ไหน | เบราว์เซอร์ของผู้ใช้ | เครื่อง server |
| เทคโนโลยี | HTML, CSS, JavaScript, React | NodeJS, Express, PHP, Java, Python |
| หน้าที่ | แสดงผลและโต้ตอบกับผู้ใช้ | ประมวลผล logic, จัดการฐานข้อมูล, ให้บริการ API |
| ผู้ใช้เห็นโค้ดไหม | เห็นทั้งหมด (View Source / F12) | ไม่เห็น เห็นแค่ผลลัพธ์ที่ส่งกลับ |
SSR (Server-Side Rendering): สมัยก่อน server สร้างไฟล์ HTML แบบ dynamic แล้วส่งกลับทั้งหน้า
เช่น PHP, JSP ปัจจุบันนิยมให้ server ส่งเฉพาะ ข้อมูล JSON ผ่าน API แล้วให้ front-end วาดหน้าเอง
การแลกเปลี่ยนข้อมูลผ่าน API
API (Application Programming Interface) = กลไกที่ให้ซอฟต์แวร์สองส่วนสื่อสารกันโดยใช้ชุดคำจำกัดความและโปรโตคอล
Client --- request (x=1, y=2) ---> Server
API service: นำ x + y
Client <--- response (3) ---------- Server
- Web API = ส่วนติดต่อระหว่าง web server กับ client
- สื่อสารผ่าน HTTP protocol เป็นหลัก
- บริการ API ปกติอยู่ฝั่ง server ส่วน client เป็นผู้ร้องขอ
เทคโนโลยีการเผยแพร่เว็บ
- Version control — Git, GitHub (ดูบท Git & GitHub)
- ช่องทางเผยแพร่ — GitHub Pages, hosting, cloud
- Automation — เครื่องมือ build และ deploy อัตโนมัติ