แนวทางการเรียนรู้การพัฒนาเว็บแอพพลิเคชั่น (Web Development)
บทความที่จะแนะนำแนวทางและรวบรวมเนื้อหาที่เกี่ยวข้องในการเตรียมความพร้อมสู่การเป็น Web Developer
สารบัญเนื้อหา
- FrontEnd Development
- HTML5
- CSS3
- CSS Framework
- JavaScript
- TypeScript
- Bootstrap
- TailwindCSS
- React
- Vue
- Backend Development
- PHP
- Laravel Framework
- Node.js
- Express
- C#
- ASP.NET Core MVC
- Java
- Spring Boot
- Python
- Django Framework
- Flask Framework
- Backend as a Service (BaaS)
- Firebase
- Static Site Generators
- Next.js
- Nuxt.js
- Git & GitHub
- Postman
FrontEnd Development
FrontEnd Development คือ การพัฒนาโปรแกรมระบบหน้าบ้าน (UI : User Interface หรือ หน้าตาของแอพพลิเคชั่น) โดยผู้ใช้งานสามารถมองเห็นและมีส่วนร่วมหรือโต้ตอบภายใน Web Browser ได้
HTML5
HTML (HyperText Markup Language) เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างภาษาโดยใช้ ตัวกำกับ (Markup Tag) เพื่อควบคุมการแสดงผลข้อมูล รูปภาพ และวัตถุอื่น ๆ ผ่านทาง Web Browser มาตรฐานของภาษา HTML มีการจัดโครงสร้างและการแสดงผลของเนื้อหา โดยมีคุณลักษณะเด่นที่สำคัญ เช่น
- เล่นวิดีโอ
- แสดงตำแหน่งทางภูมิศาสตร์
- เก็บไฟล์ในลักษณะออฟไลน์
- แสดงกราฟิก
- การป้อนข้อมูลแบบใหม่ เช่น search, number, range, color, tel, url, email, อื่นๆ เป็นต้น
หลักสูตรที่เกี่ยวข้อง
CSS3
CSS (Cascading Style Sheets) เป็นภาษาที่ใช้สำหรับนำมาตกแต่งเอกสาร HTML ให้มีหน้าตาและสีสันที่สวยงามน่าใช้มากยิ่งขึ้น
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร CSS เบื้องต้น : ต้องมีพื้นฐาน HTML5
CSS Framework
คือ เครื่องมือที่ช่วยให้นักพัฒนาสามารถออกแบบเว็บไซต์ได้ง่ายและรวดเร็วขึ้น หน้าที่หลักของ CSS Framework คือ จัดเตรียมวางโครงสร้างหน้าเว็บขั้นพื้นฐานเอาไว้ให้ผู้พัฒนาสามารถเลือกปรับแต่งได้ตามความต้องการโดยที่ไม่ต้องเขียนโค้ดเองทั้งหมด เช่น การสร้างปุ่ม แบบฟอร์ม เมนู เป็นต้น
ข้อดีของการใช้ CSS Framework
- ลดระยะเวลาในการออกแบบเว็บไซต์
- ลดโอกาสการเกิดข้อผิดพลาด ซึ่งสามารถนำเว็บไซต์ที่ออกแบบนั้นไปทำงานในเบราว์เซอร์หรืออุปกรณ์ได้หลายแบบ เช่น Desktop , Mobile เป็นต้น
- ตัวอย่าง CSS Framework เช่น Bootstrap , TailwindCSS เป็นต้น
JavaScript
เป็นภาษาคอมพิวเตอร์ที่ใช้ในการพัฒนาเว็บร่วมกับ HTML เพื่อให้เว็บนั้นสามารถตอบสนองกับผู้ใช้งานหรือแสดงเนื้อหาที่แตกต่างกันไปโดยจะอ้างอิงตามเว็บบราวเซอร์ที่ผู้เข้าชมเว็บใช้งานอยู่เป็น ภาษาที่ทำงานฝั่งผู้ใช้ (Client Side Script) โดยเว็บเบราว์เซอร์จะทำหน้าที่ประมวลผลคำสั่งที่ถูกเขียนขึ้นมาและตอบสนองต่อผู้ใช้ได้ทันที
ความสามารถของ JavaScript
- สามารถเปลี่ยนแปลงรูปแบบการแสดงผลของ HTML,CSS ได้
- ตรวจสอบความถูกต้องของข้อมูลได้
- เก็บข้อมูลผู้ใช้ได้ เช่น การใช้ Cookie , Local Storage เป็นต้น
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร JavaScript เบื้องต้น : ต้องมีพื้นฐาน HTML5 , CSS3
TypeScript
เป็นภาษาที่ถูกออกแบบมาเพื่อช่วยให้การเขียนโปรแกรมด้วย JavaScript นั้นมีประสิทธิภาพมากยิ่งขึ้น โค้ดที่ถูกเขียนด้วย TypeScript นั้นจะถูกแปลงให้เป็น JavaScript โดยความสามารถของ TypeScript นั้นสามารถไปใช้สำหรับการพัฒนาระบบได้ทั้งส่วนของ FrontEnd และ BackEnd
ทำไมต้องใช้ TypeScript
- Superset ของ JavaScript หมายถึงสามารถใช้ทุกฟีเจอร์ใหม่ๆของ JavaScript ได้ (JavaScript ทำอะไรได้ TypeScript ก็ทำได้เหมือนกัน)
- Compile ก่อนใช้งาน กล่าวคือ การใช้งาน JavaScript นั้นจะไม่รู้เลยว่าโค้ดทำงานถูกต้องหรือไม่ จนกว่าจะนำโปรแกรมไปรันบน Browser แต่ TypeScript จะตรวจสอบข้อผิดพลาดที่อาจจะเกิดขึ้นก่อนที่จะรันโปรแกรมทำให้ทราบได้ว่าโปรแกรมของเรานั้นทำงานผิดพลาดตรงจุดใด
- Static Type หมายถึง เป็นภาษาที่มีชนิดข้อมูลสืบเนื่องมาจาก JavaScript นั้นเป็นภาษาในรูปแบบ Dynamic Type คือ ตัวแปรที่เก็บข้อมูลนั้นสามารถเปลี่ยนแปลงชนิดข้อมูลได้ตลอด (ทำให้เกิดบั๊กได้ง่าย) จึงได้มีการพัฒนา TypeScript ขึ้นมาเพื่อกำหนดชนิดหรือประเภทข้อมูลลงในตัวแปรได้
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร TypeScript : ต้องมีพื้นฐาน JavaScript
Bootstrap
Frontend Framework ที่รวม HTML, CSS และ JavaScript เข้าด้วยกันเป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดมาตรฐานหรือรูปแบบการพัฒนาเว็บไซต์ในส่วนของ User Interface (UI) และทำให้เว็บรองรับการแสดงผลขนาดหน้าจอที่แตกต่างกันอีกด้วย
จุดเด่นของ Bootstrap
- มี UI ที่สวยงาม
- โค้ดมีความสวยงามง่ายต่อการพัฒนาเว็บ
- เรียนรู้ง่ายและเป็นที่นิยมใช้ทั่วโลก มีการพัฒนาและปรับปรุงต่อเนื่อง
- ประหยัดเวลาในการพัฒนาเว็บไซต์
- รองรับการแสดงผลในอุปกรณ์ที่มีหน้าจอต่างขนาดกัน
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Bootstrap : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript
Tailwind CSS
คือ Utility-First CSS Framework ที่ช่วยให้สามารถออกแบบเว็บไซต์ได้อย่างรวดเร็วรวมถึงปรับแต่งหน้าเว็บไซต์หรือกำหนดรายละเอียดต่างๆได้ตามความต้องการ เนื่องจากมีคำสั่งหรือ Class สำเร็จรูปที่สามารถเรียกใช้งานได้ทันทีโดยที่ไม่จำเป็นต้องเขียน CSS โดยตรง
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร TailwindCSS : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript
React
คือ ไลบราลี่ ของภาษา JavaScript ที่ใช้สำหรับสร้าง User Interface (UI) หรือหน้าจอของแอพพลิเคชั่น ถูกนำมาใช้สำหรับสร้างหน้าเว็บโดยแบ่งการแสดงผลหน้าเว็บออกเป็นส่วนย่อยหลายๆส่วน โดยที่ไม่ต้องเขียนหน้าเว็บเก็บไว้ในไฟล์เดียว เพื่อให้ง่ายต่อการจัดการ จากนั้นค่อยนำส่วนย่อยดังกล่าวมาประกอบกันในภายหลัง เราจะเรียกองค์ประกอบที่แบ่งออกเป็นส่วนย่อย ๆนี้ว่า คอมโพเนนต์ (Component) ข้อดีของการสร้างคอมโพเนนต์ คือ สามารถที่จะออกแบบแล้วนำกลับมาใช้งานในภายหลังได้ โดยที่ไม่ต้องเสียเวลาเขียนใหม่
แนวคิดของ React
- Component คือ ส่วนประกอบต่างๆที่ถูกนำมาประกอบรวมกันเป็นหน้าเว็บ (คล้ายๆ สร้าง tag ขึ้นมาใช้เอง)
- State คือ ข้อมูลที่อยู่ภายในคอมโพเนนต์ (Component) แต่ละตัว
- Props คือ ข้อมูลที่ถูกส่งจากคอมโพเนนต์ (แนวคิดมาจากการกำหนด Attribute หรือ Properties ใน HTML)
สำหรับการสร้าง Component นั้นก็จะมีรูปแบบการเขียนคล้ายๆกับ HTML แต่ React จะใช้ส่วนที่เรียกว่า JSX ในการเขียนซึ่งมีความคล้ายคลึงกับ HTML มาก โดยการเขียน JSX นั้น คือการเขียนคำสั่ง HTML ในไฟล์ JavaScript
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร React : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript
Vue
คือ Framework ที่ใช้สำหรับสร้าง User Interface (UI) หรือหน้าจอของแอพพลิเคชั่นในรูปแบบไดนามิกที่สามารถอัพเดตบางส่วนของแอพพลิเคชั่นโดยไม่ต้องโหลดแอพพลิเคชั่นขึ้นมาใหม่ทั้งหมด
Vue.js หรือเรียกสั้นๆว่า Vue ถูกนำมาใช้สำหรับสร้างหน้าเว็บโดยแบ่งการแสดงผลหน้าเว็บออกเป็นส่วนย่อยหลายๆส่วน โดยที่ไม่ต้องเขียนหน้าเว็บเก็บไว้ในไฟล์เดียว เพื่อให้ง่ายต่อการจัดการ จากนั้นค่อยนำส่วนย่อยดังกล่าวมาประกอบกันในภายหลัง เราจะเรียกองค์ประกอบที่แบ่งออกเป็นส่วนย่อย ๆนี้ว่า คอมโพเนนต์ (Component) ข้อดีของการสร้างคอมโพเนนต์ คือ สามารถที่จะออกแบบแล้วนำกลับมาใช้งานในภายหลังได้ โดยที่ไม่ต้องเสียเวลาเขียนใหม่
จุดเด่นของ Vue
- มีขนาดเล็ก ทำงานได้อย่างรวดเร็ว
- มีโครงสร้างการเขียนที่ไม่ซับซ้อน
- แบ่งแอพพลิเคชั่นออกเป็นส่วนย่อยๆ หรือเรียกว่า Component ง่ายต่อการปรับปรุงแก้ไขและพัฒนาระบบ
- เป็นรูปแบบ Dynamic Webpage หมายถึง เนื้อหาในหน้าเว็บมีการเปลี่ยนแปลงตามเงื่อนไขที่กำหนด
- มีเครื่องมือและ plugin ต่างๆให้เลือกใช้งานมากมาย
- ทำงานข้าม Platform ได้ (Window , Mac , Linux)
- รองรับการทำงานกับ Browser ได้ทุกตัว เช่น Microsoft Edge , Google Chrome , Safari , Firefox , Opera เป็นต้น
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Vue : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript
Backend Development
Backend Development คือ การพัฒนาโปรแกรมหลังบ้าน หรือการทำงานเบื้องหลังในแอพ เช่น การทำงานกับฐานข้อมูลโดยผู้ใช้งานไม่สามารถมีส่วนร่วมหรือโต้ตอบได้ ฉะนั้นถ้าต้องการพัฒนาระบบหลังบ้าน ต้องมีพื้นฐาน การจัดการฐานข้อมูล
PHP
เป็นภาษาคอมพิวเตอร์ที่ใช้ในการพัฒนาเว็บ เนื้อหาในส่วนนี้จะกล่าวถึงการทำงานเบื้องต้นเพื่อให้ผู้เรียนเข้าใจหลักการเขียนโปรแกรมและคำสั่งพื้นฐานต่างๆในภาษา PHP สำหรับนำมาพัฒนาเว็บ
- การนิยามตัวแปร (Variable)
- ตัวดำเนินการต่างๆ (Operator)
- โครงสร้างควบคุมพื้นฐาน (Control Structure) สำหรับควบคุมการทำงานต่างๆภายในโปรแกรม
- การนิยามอาร์เรย์ (Array)
- ฟังก์ชั่น (Function)
- การเขียนโปรแกรมเชิงวัตถุ (OOP)
- ทำงานร่วมกับฐานข้อมูล (Database)
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร PHP : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript , SQL
Laravel Framework
หมายถึง ชุดเครื่องมือสำเร็จรูปที่มีการจัดวางโครงสร้างโปรเจกต์ PHP และไลบรารีต่างๆไว้เรียบร้อย นักพัฒนาไม่จำเป็นต้องเขียนโค้ดด้วยตนเองทั้งหมด ทำให้สามารถพัฒนาเว็บแอพพลิเคชั่นด้วยภาษา PHP ได้อย่างมีประสิทธิภาพ รวดเร็ว และ มีความปลอดภัยมากยิ่งขึ้น
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Laravel Framework : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript , SQL ,PHP
Node.js
เป็น ชุดเครื่องมือ ในการแปลคำสั่งของ JavaScript หรือ JavaScript Runtime Environment กล่าวคือ สามารถนำ JavaScript ไปรันใน Windows , Mac , Linux ได้เลยโดยไม่ขึ้นกับ Web Browser และถูกสร้างขึ้นมาเพื่อทำงานฝั่ง Server เป็นหลักคล้ายๆ กับภาษา PHP , Laravel Framework (PHP) แต่การใช้งาน Node.js จะมีข้อดีคือ ผู้พัฒนาเว็บสามารถควบคุมการทำงานของเว็บทั้งฝั่ง Frontend และ Backend ได้โดยใช้ JavaScript เพียงภาษาเดียว โดยที่ไม่ต้องเสียเวลาเรียนรู้หลายภาษา
ข้อดีของ Node.js
- ใช้ JavaScript ในการพัฒนาเว็บทั้งฝั่ง Frontend และ Backend
- ทำงานแบบ Non-Blocking I/O โดยใช้วิธีการแบบ Asynchonous โดยจะไม่รอการตอบสนองแต่ละ Request ให้แล้วเสร็จ แต่จะทำการย้ายการทำงานไปอยู่เบื้องหลัง แล้วรอรับ Request ต่อๆไปทันที
- แบ่งการทำงานออกเป็นแต่ละโมดูล แล้วนำมาใช้เฉพาะส่วนที่จำเป็น ทำให้โค้ดที่ต้องประมวลผลมีขนาดเล็กลง
Express.js
เป็น Framework ของ JavaScript ที่ใช้งานร่วมกับ Node.js เพื่อสนับสนุนการทำงานของ Web Server ให้มีความง่ายและสะดวกสบายมากยิ่งขึ้น เนื่องจากมี Feature หลายๆอย่างที่น่าสนใจ เช่น Routing การจัดการ Request , Response และ Middleware เป็นต้น
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Nodejs : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript , MongoDB
C#
เป็นภาษาคอมพิวเตอร์ที่ใช้สำหรับการพัฒนาโปรแกรม เนื้อหาในส่วนแรกจะกล่าวถึงการทำงานเบื้องต้น เพื่อให้ผู้เรียนเข้าใจหลักการเขียนโปรแกรมและคำสั่งพื้นฐานต่างๆในภาษา C# เช่น
- การนิยามตัวแปร (Variable)
- ตัวดำเนินการต่างๆ (Operator)
- โครงสร้างควบคุมพื้นฐาน (Control Structure)
- การนิยามอาร์เรย์ (Array)
- เมธอด (Method)
- การเขียนโปรแกรมเชิงวัตถุ (OOP)
หลักสูตรที่เกี่ยวข้อง
ASP.NET Core MVC
เป็นเฟรมเวิร์คในการพัฒนาเว็บแอพพลิเคชั่นที่มีทั้งระบบหน้าบ้าน (Front-End) และ ระบบหลังบ้าน (Back-End) รวมอยู่ในโปรเจกต์เดียวกันโดยใช้ สถาปัตยกรรม MVC (Model-View-Controller) และเขียนด้วย ภาษา C#
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร ASP.NET Core : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript , C# , SQL
Java
เป็นภาษาคอมพิวเตอร์ที่ใช้สำหรับการพัฒนาโปรแกรม เนื้อหาในส่วนแรกจะกล่าวถึงการทำงานเบื้องต้น เพื่อให้ผู้เรียนเข้าใจหลักการเขียนโปรแกรมและคำสั่งพื้นฐานต่างๆในภาษา Java
- การนิยามตัวแปร (Variable)
- ตัวดำเนินการต่างๆ (Operator)
- โครงสร้างควบคุมพื้นฐาน (Control Structure)
- การนิยามอาร์เรย์ (Array)
- เมธอด (Method)
- คอลเลคชั่น (Collections)
- การเขียนโปรแกรมเชิงวัตถุ (OOP)
หลักสูตรที่เกี่ยวข้อง
Spring Framework
หมายถึง ชุดเครื่องมือสำเร็จรูปที่มีการจัดวางโครงสร้างพื้นฐานของแอพพลิเคชั่นและไลบรารีต่างๆไว้เรียบร้อย ช่วยอำนวยความสะดวกในการพัฒนาแอพพลิเคชั่นด้วยภาษา Java สำหรับใช้เขียน Web และ Back-End Application รวมถึง Microservices นักพัฒนาไม่จำเป็นต้องเขียนโค้ดด้วยตนเองทั้งหมด ทำให้สามารถพัฒนาระบบได้ง่ายมีความปลอดภัยและทำงานได้รวดเร็วมากยิ่งขึ้น
Spring Boot เป็นชุดเครื่องมือสำเร็จรูปสำหรับพัฒนาแอพพลิเคชั่น ทำงานอยู่บนพื้นฐานของ Spring Framework
ความสามารถของ Spring Boot
- มีชุด Starter Library / Dependencies Starter อำนวยความสะดวกในการจัดการไลบราลี่ที่ใช้งานในแอพพลิเคชั่น
- มี Auto Configuration ลดขั้นตอนการตั้งค่าการใช้งานต่างๆ
- มี Built-in Server ในตัว (Embeded Application Server) สามารถรันตัวเองได้โดยไม่พึ่งพา Application Server จากภายนอก
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Spring Boot : ต้องมีพื้นฐาน Java , OOP , SQL , JSON , Postman
Python
เป็นภาษาคอมพิวเตอร์ที่ใช้สำหรับการพัฒนาโปรแกรม เนื้อหาในส่วนแรกจะกล่าวถึงการทำงานเบื้องต้น เพื่อให้ผู้เรียนเข้าใจหลักการเขียนโปรแกรมและคำสั่งพื้นฐานต่างๆในภาษา Python เช่น
- การนิยามตัวแปร (Variable)
- ตัวดำเนินการต่างๆ (Operator)
- โครงสร้างควบคุมพื้นฐาน (Control Structure)
- การเขียนโปรแกรมเชิงวัตถุ (OOP)
หลักสูตรที่เกี่ยวข้อง
Django Framework
คือ Framework สำหรับสร้าง Web Application ฝั่ง BackEnd ที่พัฒนาด้วยภาษา Python
จุดเด่นของ Django Framework
- ใช้ภาษา Python ในการพัฒนา มีรูปแบบการเขียนโค้ดที่ไม่ซับซ้อนและเข้าใจง่ายอีกทั้งยังเป็นภาษาที่ได้รับความนิยมในปัจจุบัน
- แยกการทำงานออกเป็นส่วนย่อยๆ โดยใช้สถาปัตยกรรม MVT (Model-View-Template)
- ใช้งานได้อย่างอิสระ สามารถปรับปรุงแก้ไข หรือ กำหนดวิธีการทำงานใหม่ได้ตามความต้องการ
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Django Framework : ต้องมีพื้นฐาน Python , OOP , HTML5 , CSS3 , JavaScript , Bootstrap5 , SQL
Flask Framework
คือ Micro Web framework สำหรับการพัฒนาเว็บด้วยภาษา Python รองรับ Web Server Gateway Interface (WSGI) โดยสาเหตุที่เรียกว่า Micro Web Framework ก็คือโครงสร้างเว็บ ไม่ซับซ้อน มีขนาดเล็ก ไม่ต้องการเครื่องมือหรือไลบราลี่อะไรมากมายเหมือน Framework เจ้าอื่นๆ เขียนคำสั่งไม่กี่บรรทัดก็สามารถทำงานได้เลย
ข้อดีของ Flask
- ทำเว็บได้อย่างรวดเร็ว
- มีขนาดเล็กเพราะไม่ได้พึ่งไลบราลี่เยอะ
- มีความยืดหยุ่นสูง
- มีโครงสร้างที่ไม่ซับซ้อนง่ายต่อการทำเว็บ
- มี Community ขนาดใหญ่
- ไม่ต้องทำ Server เพราะมี built-in ในตัวสามารถเขียนและทดสอบได้เลย
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Flask Framework : ต้องมีพื้นฐาน Python , OOP , HTML5 , CSS3 , JavaScript , Bootstrap5 , SQL
Backend as a Service (BaaS)
Firebase
เป็นบริการของ Google ที่ให้ บริการเกี่ยวกับการจัดการระบบหลังบ้าน (Backend Services) โดยรวบรวมเครื่องมือต่าง ๆ สำหรับอำนวยความสะดวกแก่นักพัฒนาแอพพลิเคชั่น ทั้งในส่วนของ Mobile Application, Web Application เป็นต้น การใช้บริการของ Firebase ช่วยลดภาระและระยะเวลาในการพัฒนาระบบหลังบ้านเองและทำให้พัฒนาแอพพลิเคชั่นได้อย่างมีประสิทธิภาพมากยิ่งขึ้น
ตัวอย่างบริการของ Firebase
- Realtime Database , Cloud Firestore (บริการฐานข้อมูล)
- Authentication (บริการเกี่ยวกับการจัดการผู้ใช้งาน)
- Cloud Message (บริการเกี่ยวกับระบบแจ้งเตือน)
- Cloud Storage (บริการเกี่ยวกับไฟล์)
- Hosting (บริการเกี่ยวกับการเผยแพร่แอพพลิเคชั่น)
- Performance Monitoring & Google Analytic (วิเคราะห์ประสิทธิภาพ การทำงานของแอพพลิเคชั่น)
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Firebase : ต้องมีพื้นฐาน HTML5 , CSS3 , JavaScript , Bootstrap
Static Site Generators
Next.js
Next.js เป็น React Web Framework เพื่อแก้ปัญหาสำหรับเว็บที่ต้องการทำ SEO ( Search Engine Optimization) คือทำให้เว็บติดหน้าแรกของ Search Engine เป็นการทำให้เว็บค้นหาผ่าน Google เจอได้ง่ายมากยิ่งขึ้น เนื่องจาก Next.js นั้นช่วยทำ SSR (Server Side Rendering)
จุดเด่นของ Next.js
- Server Side Rendering (SSR)
- Static Site Generation (SSG) ทำการ build และ Render HTML จากฝั่ง Server แล้วส่ง HTML ไปทำงานที่ฝั่ง Client
- Hot Reload (แก้ไขการทำงานแล้วเห็นผลทันที)
- Routing สามารถจัดการ Routing ง่ายๆผ่าน File System (Pages)
- Optimization จัดการเรื่อง Performance (ทำให้เว็บทำงานเร็วขึ้น)
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Next.js : ต้องมีพื้นฐาน React
Nuxt.js
Nuxt.js เป็น JavaScript Framework ที่พัฒนาต่อยอดมาจาก Vue.js เพื่อแก้ปัญหาสำหรับเว็บที่ต้องการทำ SEO (Search Engine Optimization) คือทำให้เว็บติดหน้าแรกของ Search Engine ทำให้เว็บค้นหาแล้วเจอได้ง่ายมากยิ่งขึ้น เนื่องจาก Nuxt.js นั้นช่วยทำ SSR (Server Side Rendering)
จุดเด่นของ Nuxt.js
- Server Side Rendering (SSR)
- Static Site Generation (SSG) ทำการ build ไฟล์ vue.js ทั้งหมดออกมาเป็นไฟล์ HTML / CSS / JavaScript (Static Website)
- Hot Reload (แก้ไขการทำงานแล้วเห็นผลทันที)
- Routing สามารถจัดการ Routing ง่ายๆผ่าน File System (Pages)
- รองรับการทำงานกับ TypeScript
หลักสูตรที่เกี่ยวข้อง
ข้อกำหนดหลักสูตร Nuxt.js : ต้องมีพื้นฐาน Vue.js
Git & GitHub
Git เป็น Version Control รูปแบบ Distributed Version Control System (DVCS) ใช้สำหรับติดตาม ตรวจสอบการแก้ไขไฟล์ หรือ Source Code ซึ่งสามารถตรวจสอบได้ทุกตัวอักษร ทุกบรรทัด ทุกไฟล์ พร้อมทั้งระบุว่าไฟล์ดังกล่าวถูกปรับปรุงแก้ไข ณ ช่วงเวลาใด และใครเป็นผู้แก้ไขทำให้นักพัฒนาสามารถติดตาม การเปลี่ยนแปลงของโค้ดได้ตลอด หรือแม้กระทั่งย้อนเวลาโค้ดกลับไปก่อนตอนที่จะพังก็ยังทำได้ ดังนั้น Git จึงเหมาะสำหรับนักพัฒนาไม่ว่าจะเป็นงานเเบบเดี่ยวหรือแบบทีมเพราะสามารถเรียกดูได้ ว่าคนในทีมใครเป็นคนเขียนหรือใครเป็นคนแก้ไขโปรเจกต์ในแต่ละส่วน
GitHub เป็นเว็บเซิฟเวอร์ที่ให้บริการในการฝากไฟล์ Git หรือ Git ที่ทำงานบนเว็บไซต์ ทำให้สามารถใช้ Git ร่วมกับคนอื่นได้ผ่านเว็บไซต์ซึ่งจะมักนิยมใช้เก็บ Project Open Source ต่างๆ
หลักสูตรที่เกี่ยวข้อง
Postman
คือ เครื่องมือสำหรับทดสอบระบบ API ที่พัฒนาขึ้นมาเพื่อตรวจสอบว่า API ของเรานั้นสามารถทำงานแล้วได้ผลลัพธ์ตรงตามวัตถุประสงค์ที่ต้องการหรือไม่
