จากเว็บไซต์ธรรมดา สู่ PERN และ Nextbase

At a glance

Client, Server, Database

Client คือฝั่งผู้ใช้ เช่นเบราว์เซอร์บนคอมหรือมือถือ Server คือระบบที่รับ request แล้วให้บริการ Database คือที่เก็บข้อมูลถาวร จะอยู่เครื่องเดียวกับ server หรือคนละเครื่องก็ได้

HTTP, API และ business logic

ลองรันจริง

สร้างโฟลเดอร์ใหม่ รัน npm init -y และ npm install express แล้วสร้าง 2 ไฟล์นี้

// server.js
const express = require("express");
const app = express();

// ข้อมูลตัวอย่างแทนฐานข้อมูล
const scores = [
  { student: "mint", subject: "Math", score: 18 },
  { student: "mint", subject: "Science", score: 15 },
  { student: "beam", subject: "Math", score: 12 },
];

// Business logic: ครูเห็นทุกคน นักเรียนเห็นแค่ของตัวเอง
function visibleScores(user) {
  if (user.role === "teacher") return scores;
  return scores.filter((s) => s.student === user.name);
}

// API endpoint
app.get("/api/scores", (req, res) => {
  // ระบบจริงจะอ่าน user จากการล็อกอิน ตัวอย่างนี้ส่งผ่าน query เพื่อให้ลองง่าย
  const user = { name: req.query.user, role: req.query.role ?? "student" };
  res.json(visibleScores(user));
});

app.use(express.static("public")); // เสิร์ฟหน้าเว็บในโฟลเดอร์ public
app.listen(3000, () => console.log("http://localhost:3000"));

<!-- public/index.html -->
<h1>คะแนนของฉัน</h1>
<ul id="list"></ul>
<script>
  async function load() {
    const response = await fetch("/api/scores?user=mint");
    const scores = await response.json();
    document.querySelector("#list").innerHTML = scores
      .map((s) => `<li>${s.subject}: ${s.score}</li>`)
      .join("");
  }
  load();
</script>

รัน node server.js แล้วเปิด http://localhost:3000 จะเห็นแค่คะแนนของ mint ลองเปิด http://localhost:3000/api/scores?role=teacher ตรง ๆ จะได้ JSON ของทุกคน

ทำไมต้องมี React

HTML บอกโครงสร้าง CSS บอกหน้าตา JavaScript เพิ่มพฤติกรรมและแก้ DOM ได้ การอัปเดตบางส่วนของหน้าโดยไม่ reload เกิดจาก JavaScript แก้ DOM และดึงข้อมูลแบบ asynchronous ไม่ได้เกี่ยวกับว่า HTML หรือ CSS ช้า

พอ UI ใหญ่ขึ้น เช่น feed, comment, like, notification การสั่งแก้ DOM ทีละจุดเริ่มดูแลยาก React ให้เราบอกว่า UI ควรหน้าตาเป็นอย่างไรตาม state แล้ว React อัปเดต DOM ให้

ปุ่มนับเลข 2 แบบ

<!-- index.html: เปิดในเบราว์เซอร์ได้เลย -->
<button id="like">❤️ <span id="count">0</span></button>
<script>
  let count = 0;
  document.querySelector("#like").addEventListener("click", () => {
    count += 1;
    // ต้องสั่งเองว่า element ไหนเปลี่ยน
    document.querySelector("#count").textContent = count;
  });
</script>

// components/LikeButton.tsx (ใช้ใน Next.js starter ของ Day 2 ได้เลย)
"use client";
import { useState } from "react";

export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>❤️ {likes}</button>;
}

จาก HTML เมื่อวาน สู่ component วันนี้

// เมื่อวาน (HTML)
// <div class="card"><h2>My Project</h2><p>My first website</p></div>

// วันนี้ (JSX ใน React): 1 component ใช้กับข้อมูลหลายชุด
type Project = { title: string; description: string };

function ProjectCard({ title, description }: Project) {
  return (
    <article className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </article>
  );
}

const projects: Project[] = [
  { title: "Portfolio", description: "My first website" },
  { title: "Calculator", description: "A small JS app" },
];

export default function Home() {
  return (
    <main>
      <h1>My Projects</h1>
      {projects.map((p) => (
        <ProjectCard key={p.title} {...p} />
      ))}
    </main>
  );
}

• class เปลี่ยนเป็น className เพราะ JSX เป็น JavaScript และ class เป็นคำสงวน
• {title} คือการแทรก JavaScript expression ลงใน UI
• ชื่อ component ขึ้นต้นด้วยตัวพิมพ์ใหญ่ เช่น ProjectCard
• .map() สร้าง card จาก array ไม่ต้อง copy HTML ซ้ำ 5 รอบ

PERN Stack

โค้ดครบเส้นทาง

-- 1. Database: สร้างตาราง (รันใน psql หรือ SQL Editor)
create table students (
  id serial primary key,
  name text not null,
  grade int not null
);
insert into students (name, grade) values ('Mint', 11), ('Beam', 12);

// 2. Server: backend/server.js  (npm install express pg cors dotenv)
require("dotenv").config();
const express = require("express");
const cors = require("cors");
const { Pool } = require("pg");

const app = express();
const db = new Pool({ connectionString: process.env.DATABASE_URL });
app.use(cors());
app.use(express.json());

app.get("/api/students", async (req, res) => {
  const { rows } = await db.query("select id, name, grade from students order by id");
  res.json(rows);
});

app.post("/api/students", async (req, res) => {
  const { name, grade } = req.body;
  // Validation คือส่วนหนึ่งของ backend logic: อย่าเชื่อข้อมูลจาก client
  if (!name || grade < 1 || grade > 12) return res.status(400).json({ error: "ข้อมูลไม่ถูกต้อง" });
  const { rows } = await db.query(
    "insert into students (name, grade) values ($1, $2) returning *",
    [name, grade],
  );
  res.status(201).json(rows[0]);
});

app.listen(4000, () => console.log("API on http://localhost:4000"));

// 3. Client: React component เรียก API
"use client";
import { useEffect, useState } from "react";

type Student = { id: number; name: string; grade: number };

export default function Students() {
  const [students, setStudents] = useState<Student[]>([]);

  useEffect(() => {
    fetch("http://localhost:4000/api/students")
      .then((res) => res.json())
      .then(setStudents);
  }, []);

  return (
    <ul>
      {students.map((s) => (
        <li key={s.id}>{s.name} (Grade {s.grade})</li>
      ))}
    </ul>
  );
}

$1, $2 คือ parameterized query ส่งค่าแยกจากคำสั่ง SQL กัน SQL injection ห้ามต่อ string เอง เช่น "... values ('" + name + "')"

ลงมือทีละส่วนได้ที่ PostgreSQL, Express และ Challenge Day 3

Nextbase แบบ A–D

Nextbase คือชื่อที่คอร์สนี้ใช้เรียกชุด Next.js + Supabase ไม่ใช่ architecture มาตรฐานแบบเดียว บางระบบอ่านข้อมูลจากเบราว์เซอร์ บางระบบอ่านบน Next.js server และบางฟีเจอร์สร้าง API endpoint เอง ตัวอย่างทุกแบบด้านล่างใช้ client จาก Supabase › สร้าง client

// app/live/page.tsx
"use client";
import { useEffect, useState } from "react";
import { supabase } from "@/lib/supabase";

type Student = { id: number; name: string };

export default function LiveStudents() {
  const [students, setStudents] = useState<Student[]>([]);

  useEffect(() => {
    const load = () =>
      supabase.from("students").select("id, name").order("id").then(({ data }) => setStudents(data ?? []));
    load();

    // Realtime: โหลดใหม่ทุกครั้งที่ตาราง students เปลี่ยน
    const channel = supabase
      .channel("students")
      .on("postgres_changes", { event: "*", schema: "public", table: "students" }, load)
      .subscribe();
    return () => {
      supabase.removeChannel(channel);
    };
  }, []);

  return <ul>{students.map((s) => <li key={s.id}>{s.name}</li>)}</ul>;
}

// app/api/students/route.ts
import { supabase } from "@/lib/supabase";

export async function GET() {
  const { data, error } = await supabase.from("students").select("id, name, grade");
  if (error) return Response.json({ error: error.message }, { status: 500 });
  return Response.json(data);
}

export async function POST(request: Request) {
  const body = await request.json();
  const name = String(body.name ?? "").trim();
  const grade = Number(body.grade);
  if (!name || !(grade >= 1 && grade <= 12)) {
    return Response.json({ error: "ข้อมูลไม่ถูกต้อง" }, { status: 400 });
  }
  const { data, error } = await supabase.from("students").insert({ name, grade }).select().single();
  if (error) return Response.json({ error: error.message }, { status: 500 });
  return Response.json(data, { status: 201 });
}

// เรียกจากที่ไหนก็ได้: เบราว์เซอร์ แอปมือถือ หรือ Postman
const res = await fetch("/api/students", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Mint", grade: 11 }),
});

// app/students/page.tsx  (ไม่มี "use client" = Server Component)
import { supabase } from "@/lib/supabase";

export default async function StudentsPage() {
  const { data: students, error } = await supabase
    .from("students")
    .select("id, name, grade")
    .order("name");

  if (error) return <p>โหลดไม่สำเร็จ: {error.message}</p>;
  return (
    <ul>
      {students.map((s) => (
        <li key={s.id}>{s.name} (ชั้นปีที่ {s.grade})</li>
      ))}
    </ul>
  );
}

// app/students/actions.ts
"use server";
import { revalidatePath } from "next/cache";
import { supabase } from "@/lib/supabase";

export async function addStudent(formData: FormData) {
  const name = String(formData.get("name") ?? "").trim();
  const grade = Number(formData.get("grade"));
  if (!name || !(grade >= 1 && grade <= 12)) throw new Error("ข้อมูลไม่ถูกต้อง");

  const { error } = await supabase.from("students").insert({ name, grade });
  if (error) throw new Error(error.message);
  revalidatePath("/students"); // ให้หน้า /students โหลดข้อมูลใหม่
}

// ใน app/students/page.tsx
import { addStudent } from "./actions";

<form action={addStudent}>
  <input name="name" placeholder="ชื่อ" required />
  <input name="grade" type="number" min={1} max={12} required />
  <button>เพิ่มนักเรียน</button>
</form>

เลือก architecture

ไม่มีข้อมูลสำรวจที่น่าเชื่อถือพอจะบอกว่าแบบไหน “นิยมที่สุด” ให้เลือกจากลักษณะงาน

Portfolio ต้องใช้อะไร

ถ้าเว็บมีแค่ About, Skills, Projects, Experience และลิงก์ติดต่อ เริ่มจาก static website (HTML/CSS/JS หรือ Next.js) ไม่ต้องมี Supabase แบบที่ทำใน Day 1 และ Day 2

ประวัติศาสตร์

มี 2 สายคู่ขนาน: สายการสร้าง application และ UI กับสายการจัดการข้อมูล ทั้งสองมาบรรจบกันตอนเราทำ full-stack app อย่าง PERN หรือ Nextbase

1. 1970Data
   Edgar F. Codd: Relational Model

   เสนอการเก็บข้อมูลเป็นตารางที่สัมพันธ์กัน เช่น Students, Courses, Enrollments เชื่อมด้วย key และใช้ constraint รักษาความถูกต้อง

2. 1970sData
   Ingres ที่ UC Berkeley

   โครงการฐานข้อมูลเชิงสัมพันธ์ของกลุ่ม Michael Stonebraker เป็นรากฐานก่อน POSTGRES

3. 1986Data
   POSTGRES (Post-Ingres)

   ต่อยอดจาก Ingres เช่นรองรับชนิดข้อมูลที่ยืดหยุ่นขึ้น เป็นรากของ PostgreSQL

4. 1989–1991Web
   Tim Berners-Lee: World Wide Web

   เชื่อมเอกสารด้วย URL, HTTP และ HTML เว็บยุคแรกคือเอกสาร คลิกลิงก์ = ขอเอกสารใหม่จาก server

5. 1994–1996Data
   Postgres95 → PostgreSQL

   Andrew Yu และ Jolly Chen เพิ่ม SQL ให้ POSTGRES แล้วเปลี่ยนชื่อเป็น PostgreSQL ในปี 1996 เก่ากว่า JavaScript และ React มาก

6. 1995Web
   Brendan Eich: JavaScript ที่ Netscape

   ให้เบราว์เซอร์ตอบสนอง event ตรวจฟอร์ม และแก้หน้าเว็บผ่าน DOM ได้ ไม่ได้มาแทน HTML/CSS

7. 1999–2005Web
   XMLHttpRequest และ AJAX

   JavaScript ขอข้อมูลแล้วแก้เฉพาะบางส่วนของหน้าโดยไม่ reload ชื่อ AJAX ดังในปี 2005 จาก Gmail และ Google Maps ปัจจุบันนิยมส่ง JSON มากกว่า XML

8. 2005Tools
   Linus Torvalds สร้าง Git

   ระบบ version control แบบกระจาย สำหรับพัฒนา Linux kernel (รายละเอียดใน Git)

9. 2008Runtime
   Google Chrome และ V8

   JavaScript engine ที่เร็วขึ้นมาก เขียนด้วย C++ ตัว engine ไม่เท่ากับเบราว์เซอร์ เพราะเบราว์เซอร์ยังมี DOM และ Web API

10. 2009Server
    Ryan Dahl สร้าง Node.js

    เอา V8 มารันนอกเบราว์เซอร์ พร้อมระบบ I/O แบบ non-blocking JavaScript จึงรันบน server ได้ Node.js เป็น runtime ไม่ใช่ framework

11. 2010Server
    Express.js

    framework บน Node.js ที่ทำให้เขียน route, middleware และ response ได้เป็นระบบ เช่น app.get("/api/students", …)

12. 2013UI
    Facebook เปิด React เป็น open source

    Jordan Walke และทีมสร้าง UI ด้วย component แบบ declarative เพื่อรับมือ UI ที่ state เปลี่ยนตลอด เช่น feed และ notification

13. 2010sFull-stack
    JavaScript everywhere และ PERN

    React ทำ frontend, Node/Express ทำ backend, PostgreSQL เก็บข้อมูล PERN เป็นชื่อเรียกชุดเครื่องมือ ไม่ใช่ผลิตภัณฑ์

14. 2016Framework
    Next.js

    React เป็นแค่ UI library ยังต้องเลือก router, rendering และ data fetching เอง Next.js รวมสิ่งเหล่านี้ไว้ เช่น routing และ server-side rendering

15. 2020Backend service
    Supabase

    PostgreSQL พร้อม auth, storage, realtime และ API เป็นบริการ ไม่ได้สร้าง database engine ใหม่ เปลี่ยนแค่วิธีจัดการ backend

16. 2022–2023Full-stack React
    App Router และ React Server Components

    Next.js 13 เปิด App Router (2022) และประกาศว่าเสถียรใน 13.4 (2023) Server Component ดึงข้อมูลและสร้าง UI บน server โดยไม่ส่ง JavaScript ของตัวเองไปเบราว์เซอร์

เดิม → ใหม่: แต่ละอย่างแก้ปัญหาอะไร

Git ฉบับเข้าใจหลักการ

เคยมีไฟล์ index_final.html, index_final2.html, index_final_REAL.html ไหม พอทำหลายคนหรือแก้บั๊กย้อนหลัง จะไม่รู้ว่าใครแก้อะไรเมื่อไร Git คือ distributed version control system ที่เก็บประวัติของโปรเจกต์เป็นชุด ๆ ที่อ้างถึงได้ ไม่ใช่ภาษาเขียนเว็บ และไม่ใช่บริการฝากโค้ด

1. 1980s–1990s
   RCS และ CVS

   version control ยุคแรก บันทึกประวัติไฟล์ แต่จำกัดเมื่อทีมใหญ่ขึ้น

2. 2000
   Subversion (SVN)

   แบบรวมศูนย์: ประวัติหลักอยู่บน server เครื่องเดียว

3. 2005
   Linus Torvalds สร้าง Git

   หลังโครงการ Linux kernel เลิกใช้ BitKeeper จึงสร้าง Git ให้ทุกคนมีประวัติครบในเครื่อง แตก branch และ merge ได้เร็ว

4. 2008
   GitHub เปิดตัว

   บริการฝาก Git repository พร้อม pull request, issue และ code review

4 พื้นที่ของ Git

git init                          # เริ่ม repo ในโฟลเดอร์ (สร้าง .git)
git status                        # ดูว่าไฟล์ไหนเปลี่ยน
git add index.html                # stage เฉพาะไฟล์นี้
git commit -m "Build homepage"    # บันทึกสิ่งที่ stage ไว้เป็น 1 commit
git log --oneline                 # ดูประวัติ

Branch และ merge conflict

Branch คือชื่อที่ชี้ไปยัง commit ล่าสุดของสายงานหนึ่ง ไม่ใช่สำเนาโปรเจกต์ ใช้ทดลองฟีเจอร์โดยไม่กระทบ main

git switch -c feature/navbar      # สร้างและย้ายไป branch ใหม่
# ...แก้ Navbar...
git add .
git commit -m "Add responsive navbar"
git switch main
git merge feature/navbar          # รวมกลับเข้า main

ถ้า 2 branch แก้บรรทัดเดียวกัน Git จะรวมเองไม่ได้และใส่ conflict marker ไว้ในไฟล์

<<<<<<< HEAD
<h1>Hi, I'm Mint</h1>
=======
<h1>Welcome to Mint's portfolio</h1>
>>>>>>> feature/hero

เลือกบรรทัดที่ต้องการ (หรือรวมเอง) ลบเครื่องหมาย <<<<<<<, =======, >>>>>>> ออกให้หมด แล้ว git add และ git commit อีกครั้ง

Git ต่างจาก GitHub อย่างไร

Pull request เป็นกระบวนการของ GitHub: แตก branch → push → เปิด PR ให้เพื่อนรีวิวและรัน check → merge เข้า main ลงมือทำได้ที่ GitHub

Workshop 1 คาบ

git init
git add index.html
git commit -m "Initial portfolio"
git branch -M main
git remote add origin https://github.com/USERNAME/REPO.git
git push -u origin main

คำถามทบทวน

• portfolio ที่มีแค่ About, Projects และลิงก์ติดต่อ ต้องใช้ database ไหม เพราะอะไร
• ทำไมใช้ ProjectCard + .map() แทนการ copy HTML 5 ครั้ง
• ทำไมไฟล์ app/projects/page.tsx ถึงได้ URL /projects
• Server Component กับ Route Handler ต่างกันอย่างไร
• ถ้าใช้แบบ A (Direct Supabase) ต้องเปิดอะไรในตารางก่อน
• commit แล้วแต่ยังไม่ push เพื่อนเห็นโค้ดไหม push แล้วเว็บเปลี่ยนทันทีเสมอหรือเปล่า
• เจอ merge conflict ต้องทำอะไร

คำศัพท์

ฝึกต่อ

เว็บสำหรับลงมือทำ

วิดีโอเรียนเอง

Next steps

• PERN Stack: ลงมือทำทีละส่วน
• Nextbase: Next.js + Supabase แบบไม่มี server แยก
• Challenge Day 3: สร้าง full-stack web