DB & Dev Course
0%
🚀

เรียนรู้การพัฒนาแอปพลิเคชัน
ตั้งแต่พื้นฐานถึง Deploy

คอร์สสำหรับผู้เริ่มต้น — พร้อมคำอธิบายศัพท์เทคนิค ตัวอย่างโค้ดจริง และแบบทดสอบ

12
บทเรียน
30+
ตัวอย่างโค้ด
7
แบบทดสอบ
📖
คำศัพท์โปรแกรมเมอร์
รู้จัก Data Type, Variable, Function และศัพท์สำคัญ
🗄️
ฐานข้อมูล & เครือข่าย
เข้าใจ SQL, Client-Server, API
💻
สร้างแอป & Deploy
ลงมือสร้างแอปจริง แล้วเผยแพร่ขึ้นอินเทอร์เน็ต
บทที่ 1 — บทใหม่!

คำศัพท์สำหรับโปรแกรมเมอร์
(Programming Vocabulary)

รู้จักศัพท์เทคนิคเบื้องต้นที่ต้องรู้ก่อนเริ่มเขียนโปรแกรม — รวมถึง Data Type ที่ใช้แทนข้อมูลแต่ละชนิด

1.1 Data Type — ชนิดข้อมูล (สำคัญมาก!)

ในภาษาโปรแกรม ข้อมูลทุกตัวจะมี "ชนิด" (Data Type) บอกว่าข้อมูลนั้นเป็นตัวเลข ข้อความ หรืออะไร เปรียบเหมือนการบอกว่าของในกล่องเป็น "อาหาร" หรือ "เครื่องดื่ม" เพื่อให้คอมพิวเตอร์จัดการได้ถูกต้อง

ชนิดข้อมูลพื้นฐาน

🔢
INT
จำนวนเต็ม
42, -7, 0, 1000
💧
FLOAT
ทศนิยม
3.14, -0.5, 99.99
📝
STRING
ข้อความ
"สวัสดี", "Hello", "123"
BOOLEAN
จริง/เท็จ
true, false
📅
DATE
วันที่
"2025-12-31"
📦
ARRAY
ชุดข้อมูล (ลิสต์)
[1, 2, 3], ["a", "b"]
🗂️
OBJECT
ข้อมูลแบบคู่
{name: "สมชาย", age: 25}
NULL
ค่าว่าง (ไม่มีค่า)
null, None, nil
💡

"123" กับ 123 ไม่เหมือนกัน! — "123" (มีเครื่องหมายคำพูด) คือ STRING (ข้อความ) ส่วน 123 (ไม่มี) คือ INT (ตัวเลข) — ข้อความบวกเลขไม่ได้!

Data Type ในแต่ละภาษา

ชนิดPythonJavaScriptSQL (MySQL)Java
จำนวนเต็มintnumberINT, BIGINTint, long
ทศนิยมfloatnumberFLOAT, DECIMALfloat, double
ข้อความstrstringVARCHAR, TEXTString
จริง/เท็จboolbooleanBOOLEAN, TINYINTboolean
วันที่datetimeDateDATE, DATETIMELocalDate
ค่าว่างNonenull / undefinedNULLnull

ตัวอย่างการประกาศตัวแปรพร้อม Data Type

Python
name  = "สมชาย"       # str   (ข้อความ)
age   = 25              # int   (จำนวนเต็ม)
price = 99.50           # float (ทศนิยม)
is_member = True        # bool  (จริง/เท็จ)
items = ["เสื้อ", "กางเกง"]  # list  (ชุดข้อมูล)
JavaScript
let name  = "สมชาย";      // string
let age   = 25;             // number
let price = 99.50;          // number
let isMember = true;       // boolean
let items = ["เสื้อ", "กางเกง"]; // array

1.2 คำศัพท์พื้นฐานที่ต้องรู้

Variable
ตัวแปร — กล่องเก็บข้อมูล
ใช้เก็บค่าไว้ใช้งานภายหลัง เช่น เก็บชื่อ เก็บราคา
let name = "สมชาย";
Function
ฟังก์ชัน — ชุดคำสั่งที่ทำงานซ้ำได้
เหมือนสูตรอาหาร เขียนครั้งเดียว เรียกใช้กี่ครั้งก็ได้
function greet() { ... }
Loop
ลูป — การวนซ้ำ
ทำคำสั่งซ้ำๆ จนกว่าจะครบ เช่น พิมพ์ชื่อสินค้าทีละตัว
for (let i = 0; i < 10; i++)
Condition (if/else)
เงื่อนไข — ถ้า...แล้ว...
ตัดสินใจตามเงื่อนไข เช่น ถ้าอายุ >= 18 แสดง "ผ่าน"
if (age >= 18) { ... }
Parameter
พารามิเตอร์ — ค่าที่ส่งเข้าฟังก์ชัน
เหมือนวัตถุดิบที่ส่งเข้าสูตรอาหาร
function add(a, b) { ... }
Return
คืนค่า — ส่งผลลัพธ์กลับ
ฟังก์ชันทำงานเสร็จแล้วส่งผลลัพธ์กลับมาให้ใช้
return price * 0.93;
Class / Object
คลาส / อ็อบเจกต์ — แม่พิมพ์ / ชิ้นงาน
Class = แม่พิมพ์ขนม, Object = ขนมที่ทำออกมา
class Product { ... }
Library / Package
ไลบรารี — โค้ดสำเร็จรูป
โค้ดที่คนอื่นเขียนไว้แล้ว เราเอามาใช้ได้เลย ไม่ต้องเขียนเอง
npm install express

1.3 คำศัพท์เกี่ยวกับการพัฒนา

คำศัพท์อ่านว่าความหมายตัวอย่าง
Frameworkเฟรมเวิร์คโครงสร้างสำเร็จรูปสำหรับสร้างแอปExpress, Django, React
IDEไอดีอีโปรแกรมสำหรับเขียนโค้ดVS Code, PyCharm
Bugบั๊กข้อผิดพลาดในโค้ดโปรแกรมค้าง / แสดงผลผิด
Debugดีบั๊กหาและแก้ไขข้อผิดพลาดใช้ console.log() ตรวจสอบค่า
Compileคอมไพล์แปลงโค้ดให้คอมพิวเตอร์เข้าใจแปลง Java → .class
Runtimeรันไทม์ช่วงเวลาที่โปรแกรมทำงานจริง"เกิด error ตอน runtime"
Gitกิตระบบติดตามการเปลี่ยนแปลงโค้ดgit commit, git push
Repositoryรีโพที่เก็บโค้ดออนไลน์GitHub, GitLab
Deployดีพลอยเผยแพร่โปรแกรมให้คนอื่นใช้อัปโหลดขึ้น Vercel
APIเอพีไอช่องทางให้โปรแกรมคุยกันGET /api/products
Frontendฟรอนท์เอนด์ส่วนที่ผู้ใช้มองเห็น (หน้าบ้าน)HTML, CSS, React
Backendแบ็คเอนด์ส่วนประมวลผลเบื้องหลัง (หลังบ้าน)Node.js, Python, PHP

1.4 สัญลักษณ์ที่ใช้บ่อยในโค้ด

สัญลักษณ์ชื่อใช้ทำอะไรตัวอย่าง
=กำหนดค่า (Assign)ใส่ค่าให้ตัวแปรx = 10
==เท่ากับ (Equal)เปรียบเทียบว่าเท่ากันไหมif (x == 10)
!=ไม่เท่ากับเปรียบเทียบว่าไม่เท่ากันif (x != 0)
&&AND (และ)ทั้งสองเงื่อนไขต้องจริงif (a > 0 && b > 0)
||OR (หรือ)เงื่อนไขใดเงื่อนไขหนึ่งจริงif (a > 0 || b > 0)
{ }ปีกกา (Curly Braces)ครอบกลุ่มคำสั่งif (true) { ... }
( )วงเล็บครอบพารามิเตอร์ / เงื่อนไขfunction add(a, b)
[ ]วงเล็บเหลี่ยมสร้าง Array / เข้าถึงข้อมูลตำแหน่งitems[0]
//คอมเมนต์บันทึกโน้ตในโค้ด (ไม่ถูกรัน)// นี่คือคอมเมนต์

1.5 ตัวอย่างรวม: อ่านโค้ดจริง

ลองอ่านโค้ดด้านล่าง แล้วดูว่าจำศัพท์ได้ไหม:

JavaScript — ตัวอย่างรวมศัพท์
// ประกาศ Variable (ตัวแปร) พร้อมกำหนด Data Type
let productName = "เสื้อยืด";    // String  (ข้อความ)
let price       = 350;           // Number  (ตัวเลข)
let inStock     = true;          // Boolean (จริง/เท็จ)

// สร้าง Function (ฟังก์ชัน) รับ Parameter (พารามิเตอร์)
function calcDiscount(originalPrice, percent) {
    let discount = originalPrice * (percent / 100);
    return originalPrice - discount;  // Return (คืนค่า)
}

// Condition (เงื่อนไข)
if (inStock == true) {
    let finalPrice = calcDiscount(price, 10);
    console.log("ราคาหลังลด: " + finalPrice);  // 315
} else {
    console.log("สินค้าหมด");
}

// Loop (วนซ้ำ) กับ Array (ชุดข้อมูล)
let colors = ["แดง", "น้ำเงิน", "ดำ"];
for (let i = 0; i < colors.length; i++) {
    console.log("สี: " + colors[i]);
}
✏️ แบบทดสอบ

ข้อมูลชนิด BOOLEAN เก็บค่าแบบใด?

A
ตัวเลขจำนวนเต็ม เช่น 1, 2, 3
B
ข้อความ เช่น "สวัสดี"
C
ค่าจริง (true) หรือเท็จ (false) เท่านั้น
บทที่ 2

พื้นฐานระบบฐานข้อมูล (Database Systems)

เรียนรู้ว่าฐานข้อมูลคืออะไร ทำไมถึงสำคัญ และมีกี่ประเภท

2.1 ฐานข้อมูลคืออะไร?

ฐานข้อมูล (Database) คือที่เก็บรวบรวมข้อมูลอย่างเป็นระบบ เปรียบเหมือนตู้เก็บเอกสารขนาดใหญ่ที่จัดเรียงไว้อย่างดี สามารถค้นหา เพิ่ม ลบ และแก้ไขข้อมูลได้อย่างสะดวกและรวดเร็ว

💡

ลองนึกถึง สมุดโทรศัพท์ในมือถือ — มีชื่อ เบอร์โทร ที่อยู่ เรียงตามลำดับ ค้นหาได้ง่าย นั่นคือหลักการเดียวกันกับฐานข้อมูล

2.2 ประเภทของฐานข้อมูล

📊
Relational DB SQL
เก็บข้อมูลเป็นตาราง (แถวและคอลัมน์) ใช้ภาษา SQL จัดการ เช่น MySQL, PostgreSQL
📄
NoSQL Document
เก็บข้อมูลรูปแบบอื่น เช่น JSON Document หรือ Key-Value เช่น MongoDB, Redis
☁️
Cloud DB Cloud
อยู่บนเซิร์ฟเวอร์ผู้ให้บริการ ไม่ต้องดูแลเอง เช่น AWS RDS, Firebase

2.3 ส่วนประกอบหลัก

คำศัพท์คำอธิบายตัวอย่าง
Table (ตาราง)เหมือนตาราง Excel มีแถวและคอลัมน์ตาราง customers
Row (แถว/Record)ข้อมูลแต่ละรายการสมชาย, [email protected]
Column (คอลัมน์/Field)ประเภทของข้อมูลname, email, phone
Primary Key (คีย์หลัก)ค่าไม่ซ้ำกัน ใช้ระบุแต่ละแถวid = 1, 2, 3…
Foreign Key (คีย์นอก)เชื่อมโยงข้อมูลระหว่างตารางuser_id → users.id

2.4 DBMS ยอดนิยม

DBMSจุดเด่นเหมาะกับ
MySQLฟรี ใช้งานง่าย เร็วเว็บขนาดเล็ก–กลาง
PostgreSQLฟรี ทรงพลัง ซับซ้อนได้ระบบขนาดใหญ่
SQLiteฟรี ไม่ต้องติดตั้งเซิร์ฟเวอร์แอปมือถือ โปรเจกต์เล็ก
MongoDBเก็บข้อมูลแบบ JSONข้อมูลไม่มีโครงสร้างตายตัว
✏️ แบบทดสอบ

Primary Key (คีย์หลัก) ทำหน้าที่อะไร?

A
ใช้เชื่อมโยงข้อมูลระหว่างตาราง
B
ระบุข้อมูลแต่ละแถวแบบไม่ซ้ำกัน
C
เข้ารหัสข้อมูลให้ปลอดภัย
บทที่ 3

ระบบเครือข่ายคอมพิวเตอร์ (Computer Networks)

เข้าใจการเชื่อมต่อคอมพิวเตอร์ และโมเดล Client-Server

3.1 เครือข่ายคืออะไร?

ระบบเครือข่าย (Network) คือการเชื่อมต่อคอมพิวเตอร์หลายเครื่องเข้าด้วยกัน เพื่อแลกเปลี่ยนข้อมูล แชร์ทรัพยากร หรือสื่อสารกัน อินเทอร์เน็ตที่เราใช้ทุกวันก็เป็นเครือข่ายขนาดใหญ่ที่สุดในโลก

3.2 ประเภทของเครือข่าย

🏠
LAN ท้องถิ่น
เชื่อมต่อในพื้นที่เล็ก เช่น Wi-Fi ในบ้าน ในออฟฟิศ
🌍
WAN วงกว้าง
เชื่อมต่อข้ามพื้นที่ขนาดใหญ่ เช่น อินเทอร์เน็ต
🔐
VPN เสมือน
สร้างทางเชื่อมต่อส่วนตัวผ่านอินเทอร์เน็ต

3.3 โมเดล Client-Server (สำคัญมาก!)

🖥️ Client
ผู้ขอ / เบราว์เซอร์
⚙️ Server
ผู้ให้บริการ
🗄️ Database
ฐานข้อมูล
💡

เปรียบเทียบร้านอาหาร: คุณ (Client) สั่งอาหารผ่านเมนู (API) → ครัว (Server) ไปเอาวัตถุดิบจากคลัง (Database) มาทำให้

3.4 คำศัพท์สำคัญ

คำศัพท์อธิบายง่ายๆตัวอย่าง
IP Addressเลขที่บ้านบนเครือข่าย192.168.1.1
Portเลขที่ห้องในบ้าน80 = เว็บ, 3306 = MySQL
DNSแปลงชื่อเว็บให้เป็น IPgoogle.com → 142.250.x.x
HTTP/HTTPSภาษาสื่อสารเบราว์เซอร์ ↔ เซิร์ฟเวอร์https://www.google.com
APIช่องทางให้โปรแกรมคุยกันผ่านเครือข่ายGET /api/products
✏️ แบบทดสอบ

DNS ทำหน้าที่อะไร?

A
เข้ารหัสข้อมูลบนเครือข่าย
B
จัดเก็บฐานข้อมูล
C
แปลงชื่อเว็บไซต์ให้เป็น IP Address
บทที่ 4

SQL พื้นฐาน (ภาษาจัดการฐานข้อมูล)

เรียนรู้คำสั่ง CRUD — สร้าง อ่าน แก้ไข ลบ ข้อมูล

4.1 SQL คืออะไร?

SQL (Structured Query Language) คือภาษาที่ใช้พูดคุยกับฐานข้อมูล แบ่งเป็น 4 กลุ่มหลัก เรียกว่า CRUD:

คำสั่งคำอธิบายCRUD
INSERTเพิ่มข้อมูล (เหมือนเขียนรายชื่อเข้าไป)Create
SELECTดึงข้อมูลมาดู (เหมือนเปิดสมุดอ่าน)Read
UPDATEแก้ไขข้อมูล (เหมือนลบแล้วเขียนใหม่)Update
DELETEลบข้อมูล (เหมือนฉีกทิ้ง)Delete

4.2 สร้างฐานข้อมูลและตาราง

SQL
CREATE DATABASE my_shop;
USE my_shop;

CREATE TABLE products (
    id          INT PRIMARY KEY AUTO_INCREMENT,
    name        VARCHAR(100)  NOT NULL,        -- ห้ามเว้นว่าง
    price       DECIMAL(10,2) NOT NULL,
    stock       INT           DEFAULT 0,       -- ค่าเริ่มต้น = 0
    created_at  DATETIME      DEFAULT CURRENT_TIMESTAMP
);

4.3 ตัวอย่าง CRUD ครบชุด

C = Create (เพิ่มข้อมูล)

SQL
INSERT INTO products (name, price, stock)
VALUES ('เสื้อยืดสีดำ', 350.00, 50);

R = Read (อ่านข้อมูล)

SQL
-- ดึงสินค้าทั้งหมด
SELECT * FROM products;

-- ดึงเฉพาะราคาต่ำกว่า 500 บาท
SELECT name, price FROM products WHERE price < 500;

U = Update (แก้ไข)

SQL
UPDATE products SET price = 299.00 WHERE id = 1;

D = Delete (ลบ)

SQL
DELETE FROM products WHERE id = 2;
⚠️

คำสั่ง DELETE และ UPDATE ควรมี WHERE เสมอ! ถ้าลืมใส่จะมีผลกับ ทุกแถว ในตาราง

✏️ แบบทดสอบ

คำสั่ง SQL ใดใช้สำหรับ "ดึงข้อมูล" มาดู?

A
SELECT
B
INSERT
C
DELETE
บทที่ 5

การออกแบบฐานข้อมูล (Database Design)

วางแผนก่อนสร้าง — ออกแบบตารางให้เชื่อมโยงกันอย่างมีระบบ

5.1 ถามตัวเองก่อนเขียนโค้ด

  1. แอปนี้ต้องเก็บข้อมูลอะไรบ้าง? (สินค้า ลูกค้า คำสั่งซื้อ)
  2. ข้อมูลเหล่านี้มีความสัมพันธ์กันอย่างไร?
  3. แต่ละข้อมูลมีคุณสมบัติ (Attribute) อะไรบ้าง?

5.2 ตัวอย่าง: ร้านค้าออนไลน์ (3 ตาราง)

SQL
CREATE TABLE users (
    id       INT PRIMARY KEY AUTO_INCREMENT,
    name     VARCHAR(100) NOT NULL,
    email    VARCHAR(150) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL
);
SQL
CREATE TABLE products (
    id    INT PRIMARY KEY AUTO_INCREMENT,
    name  VARCHAR(200)  NOT NULL,
    price DECIMAL(10,2) NOT NULL,
    stock INT           DEFAULT 0
);
SQL — เชื่อมโยงด้วย Foreign Key
CREATE TABLE orders (
    id         INT PRIMARY KEY AUTO_INCREMENT,
    user_id    INT NOT NULL,
    product_id INT NOT NULL,
    quantity   INT NOT NULL,
    order_date DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id)    REFERENCES users(id),
    FOREIGN KEY (product_id) REFERENCES products(id)
);

5.3 JOIN — รวมข้อมูลข้ามตาราง

SQL
SELECT
    users.name    AS customer,
    products.name AS product,
    orders.quantity
FROM orders
JOIN users    ON orders.user_id    = users.id
JOIN products ON orders.product_id = products.id;
บทที่ 6

การสร้าง Application เชื่อมต่อฐานข้อมูล

สร้างแอปจริงด้วย Python + SQLite — ไม่ต้องติดตั้งอะไรเพิ่ม

6.1 แอปมี 3 ส่วนหลัก

🖥️ Frontend
หน้าบ้าน
⚙️ Backend
หลังบ้าน
🗄️ Database
ฐานข้อมูล

6.2 ตัวอย่าง: Python + SQLite

Python
import sqlite3

conn = sqlite3.connect('my_shop.db')
cursor = conn.cursor()

# สร้างตาราง
cursor.execute('''
    CREATE TABLE IF NOT EXISTS products (
        id    INTEGER PRIMARY KEY AUTOINCREMENT,
        name  TEXT NOT NULL,
        price REAL NOT NULL,
        stock INTEGER DEFAULT 0
    )
''')

# เพิ่มสินค้า (ใช้ ? ป้องกัน SQL Injection)
cursor.execute(
    'INSERT INTO products (name, price, stock) VALUES (?, ?, ?)',
    ('เสื้อยืดสีดำ', 350.0, 50)
)
conn.commit()

# อ่านข้อมูล
cursor.execute('SELECT * FROM products')
for row in cursor.fetchall():
    print(row)  # (1, 'เสื้อยืดสีดำ', 350.0, 50)

conn.close()
บทที่ 7

การสร้าง Web Application

สร้างเว็บแอปด้วย Node.js + Express + MySQL

7.1 Web App คืออะไร?

Web Application คือโปรแกรมที่ทำงานผ่านเว็บเบราว์เซอร์ ไม่ต้องติดตั้ง เช่น Facebook, Shopee, Gmail

7.2 ตัวอย่าง: Node.js + Express

JavaScript — app.js
const express = require('express');
const mysql   = require('mysql2');
const app     = express();

const db = mysql.createConnection({
    host: 'localhost', user: 'root',
    password: 'your_password', database: 'my_shop'
});

app.use(express.json());

// ดึงสินค้าทั้งหมด
app.get('/api/products', (req, res) => {
    db.query('SELECT * FROM products', (err, results) => {
        res.json(results);
    });
});

// เพิ่มสินค้า
app.post('/api/products', (req, res) => {
    const { name, price, stock } = req.body;
    db.query('INSERT INTO products (name,price,stock) VALUES (?,?,?)',
        [name, price, stock], (err, r) => {
            res.json({ id: r.insertId, name, price, stock });
    });
});

app.listen(3000, () => console.log('http://localhost:3000'));
บทที่ 8

API และ REST

รูปแบบการออกแบบ API ที่นิยมที่สุด

8.1 REST API คืออะไร?

REST ใช้ HTTP Method บอกว่าต้องการทำอะไร:

Methodคำอธิบายตัวอย่าง
GETดึงข้อมูลGET /api/products
POSTสร้างข้อมูลใหม่POST /api/products
PUTแก้ไขข้อมูลPUT /api/products/1
DELETEลบข้อมูลDELETE /api/products/1

8.2 ตัวอย่าง CRUD API ครบชุด

JavaScript
// GET ดึงสินค้า 1 ชิ้น
app.get('/api/products/:id', (req, res) => {
    db.query('SELECT * FROM products WHERE id = ?',
        [req.params.id], (err, r) => { res.json(r[0]); });
});

// PUT แก้ไข
app.put('/api/products/:id', (req, res) => {
    const { name, price, stock } = req.body;
    db.query('UPDATE products SET name=?,price=?,stock=? WHERE id=?',
        [name, price, stock, req.params.id],
        () => res.json({ message: 'Updated' }));
});

// DELETE ลบ
app.delete('/api/products/:id', (req, res) => {
    db.query('DELETE FROM products WHERE id = ?',
        [req.params.id],
        () => res.json({ message: 'Deleted' }));
});
บทที่ 9

เชื่อมต่อ Frontend กับ Backend

สร้างหน้าเว็บที่ดึงข้อมูลจาก API มาแสดงผลจริง

9.1 ตัวอย่าง: HTML ดึงข้อมูลจาก API

HTML + JavaScript
<h1>รายการสินค้า</h1>
<div id="list"></div>

<script>
// fetch = คำสั่งขอข้อมูลจาก API ผ่านเครือข่าย
fetch('/api/products')
  .then(r => r.json())
  .then(products => {
    const el = document.getElementById('list');
    products.forEach(p => {
      el.innerHTML += `<p>${p.name} — ${p.price} บาท</p>`;
    });
  });
</script>
✏️ แบบทดสอบ

fetch() ใน JavaScript ทำหน้าที่อะไร?

A
สร้างฐานข้อมูลใหม่
B
เรียกข้อมูลจาก API ผ่านเครือข่าย
C
จัดเรียงข้อมูลในตาราง
บทที่ 10

ความปลอดภัยเบื้องต้น (Security Basics)

ภัยคุกคามที่มือใหม่ต้องรู้ และวิธีป้องกัน

10.1 ภัยคุกคามที่พบบ่อย

💉
SQL Injection
แทรกคำสั่ง SQL ผ่านช่องกรอก → ป้องกัน: ใช้ ?
🕸️
XSS
แทรก JavaScript ผ่านช่องกรอก → ป้องกัน: ตรวจสอบก่อนแสดงผล
🔓
รหัสผ่านรั่ว
เก็บรหัสผ่านแบบข้อความธรรมดา → ป้องกัน: ใช้ Hash (bcrypt)

10.2 Hash รหัสผ่านด้วย bcrypt

JavaScript
const bcrypt = require('bcrypt');

// เข้ารหัสก่อนบันทึก
const hashed = await bcrypt.hash('mypassword', 10);

// เทียบรหัสผ่านตอน Login
const ok = await bcrypt.compare('mypassword', hashed);
// ok = true → รหัสผ่านถูกต้อง!
🚨

ห้ามเก็บรหัสผ่านแบบข้อความธรรมดาเด็ดขาด! ต้องเข้ารหัส (Hash) ก่อนเสมอ

✏️ แบบทดสอบ

วิธีป้องกัน SQL Injection ที่ดีที่สุดคืออะไร?

A
ใช้รหัสผ่านยาวๆ
B
ติดตั้ง Antivirus
C
ใช้ Prepared Statements (?)
บทที่ 11

การ Deploy โปรแกรม
(เผยแพร่ให้คนอื่นใช้งาน)

เรียนรู้วิธีนำโปรแกรมที่สร้างเสร็จแล้ว ไปเปิดให้คนอื่นใช้งานจริง ทั้งแบบ Web App และ Standalone

11.1 Deploy คืออะไร?

Deploy (ดีพลอย) คือกระบวนการนำโปรแกรมที่พัฒนาเสร็จแล้ว ไป "ติดตั้ง" หรือ "เผยแพร่" ให้ผู้ใช้จริงสามารถเข้าถึงได้ เปรียบเหมือนการเปิดร้านอาหารให้ลูกค้าเข้ามาทานได้จริง หลังจากตกแต่งร้านเสร็จ

💡

การเขียนโค้ดบนเครื่องตัวเอง = "สร้างร้าน" | การ Deploy = "เปิดร้านให้คนเข้า"

11.2 ประเภทการ Deploy

ประเภทอธิบายตัวอย่าง
Web Appอัปโหลดขึ้นเซิร์ฟเวอร์ ผู้ใช้เข้าผ่านเบราว์เซอร์Vercel, Railway, AWS
Standaloneแจกไฟล์ .exe หรือ Installer ให้ติดตั้งในเครื่องPyInstaller, Electron
Mobile Appอัปโหลดขึ้น App Store หรือ Play StoreFlutter, React Native
Containerใช้ Docker บรรจุแอปพร้อม Environment ไว้ด้วยกันDocker, Kubernetes

11.3 Deploy Web Application

มีหลายแพลตฟอร์มให้เลือก จากง่ายสุดไปซับซ้อน:

Vercel ง่ายสุด
เหมาะกับ Frontend (React, Next.js) เชื่อม GitHub แล้ว Deploy อัตโนมัติ ฟรี!
🚂
Railway แนะนำ
รองรับทั้ง Backend + Database Deploy แอป Node.js + MySQL ได้ในที่เดียว
☁️
AWS / GCP มืออาชีพ
ยืดหยุ่นสูงสุด เหมาะกับระบบขนาดใหญ่ แต่ซับซ้อนกว่า

ตัวอย่าง: Deploy Web App ขึ้น Railway

เตรียมโค้ดบน GitHub

อัปโหลดโค้ดโปรเจกต์ (app.js, package.json) ขึ้น GitHub Repository

สมัคร Railway แล้วเชื่อม GitHub

ไปที่ railway.app → สมัครบัญชี → เชื่อมกับ GitHub → เลือก Repository

เพิ่มฐานข้อมูล MySQL

กดปุ่ม "New Service" → เลือก MySQL → Railway จะสร้างฐานข้อมูลให้อัตโนมัติ

ตั้งค่า Environment Variables

ใส่ค่า DB_HOST, DB_USER, DB_PASSWORD ที่ Railway ให้มา ลงในการตั้งค่าของแอป

Deploy!

Railway จะ Build และ Deploy ให้อัตโนมัติ ได้ URL เช่น my-shop.up.railway.app

ไฟล์ที่ต้องเตรียม (สำคัญ!)

JSON
{
  "name": "my-shop-app",
  "scripts": {
    "start": "node app.js"    // Railway จะรันคำสั่งนี้
  },
  "dependencies": {
    "express": "^4.18.0",
    "mysql2": "^3.6.0"
  }
}
JavaScript — ใช้ Environment Variable
// อ่านค่าจาก Environment Variable (ไม่ใส่รหัสผ่านตรงๆ ในโค้ด!)
const db = mysql.createConnection({
    host:     process.env.DB_HOST     || 'localhost',
    user:     process.env.DB_USER     || 'root',
    password: process.env.DB_PASSWORD || '',
    database: process.env.DB_NAME     || 'my_shop'
});

// ใช้ PORT จาก Environment Variable (สำคัญมากสำหรับ Deploy!)
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});
.env (ไฟล์เก็บรหัสลับ — ห้ามอัปโหลดขึ้น GitHub!)
DB_HOST=my-db.railway.internal
DB_USER=root
DB_PASSWORD=abc123secret
DB_NAME=my_shop
PORT=3000
⚠️

ห้ามอัปโหลดไฟล์ .env ขึ้น GitHub เด็ดขาด! ให้เพิ่ม .env ในไฟล์ .gitignore เสมอ เพราะมีรหัสผ่านอยู่

11.4 Deploy โปรแกรม Standalone (แบบติดตั้งในเครื่อง)

ถ้าต้องการให้ผู้ใช้ดาวน์โหลดแล้วเปิดใช้ได้เลย โดยไม่ต้องเปิดเบราว์เซอร์:

เครื่องมือภาษาผลลัพธ์เหมาะกับ
PyInstallerPythonไฟล์ .exeเครื่องมือ CLI / สคริปต์
ElectronJavaScriptแอป Desktopแอปที่มีหน้าจอ GUI เช่น VS Code
TauriRust + Webแอป Desktop ขนาดเล็กแอปเบาๆ ประสิทธิภาพสูง
GraalVMJavaNative binaryแอป Java ที่เปิดเร็ว

ตัวอย่าง: แปลง Python เป็น .exe ด้วย PyInstaller

Bash (Terminal)
# ติดตั้ง PyInstaller
pip install pyinstaller

# แปลงไฟล์ Python เป็น .exe (ไฟล์เดียว)
pyinstaller --onefile my_app.py

# ไฟล์ .exe จะอยู่ในโฟลเดอร์ dist/
# แจกไฟล์ dist/my_app.exe ให้ผู้ใช้ได้เลย!

ตัวอย่าง: สร้างแอป Desktop ด้วย Electron

Bash → เริ่มโปรเจกต์
mkdir my-desktop-app && cd my-desktop-app
npm init -y
npm install electron --save-dev
JavaScript — main.js (Electron)
const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 1000, height: 700,
        webPreferences: { nodeIntegration: true }
    });
    win.loadFile('index.html');  // โหลดหน้าเว็บที่สร้างไว้
});

app.on('window-all-closed', () => app.quit());

Electron จะ "ห่อ" หน้าเว็บ (HTML/CSS/JS) ของเราเข้าไปในแอป Desktop ที่เปิดได้บน Windows, macOS และ Linux เหมือน VS Code หรือ Discord ที่ใช้ Electron เช่นกัน

11.5 Docker — บรรจุแอปพร้อม Environment

Docker คือเครื่องมือที่ "บรรจุ" แอปพร้อมทุกอย่างที่ต้องใช้ (Node.js, MySQL, ไลบรารี) ไว้ในกล่อง เรียกว่า Container ใครเปิดกล่องก็ใช้ได้เลย ไม่ต้องติดตั้งอะไรเพิ่ม

Dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "app.js"]
Bash — สร้างและรัน Container
# สร้าง Image (แม่พิมพ์)
docker build -t my-shop-app .

# รัน Container (เปิดแอป)
docker run -p 3000:3000 my-shop-app

# เปิดเบราว์เซอร์ → http://localhost:3000
💡

เปรียบเทียบ Docker: เหมือนกล่องอาหารแช่แข็ง — ใครซื้อไปก็อุ่นแล้วกินได้เลย ไม่ต้องมีครัว ไม่ต้องมีวัตถุดิบ ไม่ต้องปรุงเอง

11.6 สรุปเปรียบเทียบวิธี Deploy

วิธีความง่ายเหมาะกับค่าใช้จ่าย
Vercel / Netlify⭐⭐⭐ ง่ายมากFrontend (React, HTML)ฟรี (มีแผนเสียเงิน)
Railway / Render⭐⭐ ง่ายFull-stack (Backend+DB)ฟรี → เสียเงินตามใช้
Docker + VPS⭐ ปานกลางทุกประเภท$5–20/เดือน
AWS / GCPซับซ้อนระบบขนาดใหญ่ตามการใช้งาน
PyInstaller / Electron⭐⭐ ง่ายStandalone desktopฟรี
✏️ แบบทดสอบ

Docker ทำหน้าที่อะไร?

A
เข้ารหัสข้อมูลในฐานข้อมูล
B
บรรจุแอปพร้อม Environment ไว้ใน Container
C
แปลงภาษา Python เป็น JavaScript
บทที่ 12

สรุปและแนวทางเรียนรู้ต่อไป

ทบทวนทั้งหมดที่เรียนมา และเส้นทางถัดไป

12.1 สรุปสิ่งที่เรียนรู้

บทหัวข้อเรียนรู้อะไร
1คำศัพท์โปรแกรมเมอร์Data Type, Variable, Function, Loop, Condition
2ระบบฐานข้อมูลประเภท, DBMS, Table, Key
3ระบบเครือข่ายClient-Server, IP, DNS, API
4SQL พื้นฐานCRUD — INSERT, SELECT, UPDATE, DELETE
5ออกแบบ DBPrimary Key, Foreign Key, JOIN
6สร้าง AppPython + SQLite
7Web AppNode.js + Express + MySQL
8API & RESTHTTP Methods, CRUD API
9Frontend + Backendfetch(), HTML เรียก API
10ความปลอดภัยSQL Injection, XSS, bcrypt
11Deploy โปรแกรมVercel, Railway, Docker, PyInstaller, Electron

12.2 แนวทางเรียนรู้ต่อ

⚛️
React / Vue.js
สร้าง Frontend ที่ทันสมัยและตอบสนองไว
🔑
Authentication
ยืนยันตัวตนด้วย JWT Token
🐳
Docker & CI/CD
ระบบ Deploy อัตโนมัติแบบมืออาชีพ
☁️
Cloud Services
AWS, GCP — รันระบบขนาดใหญ่
🎯

คำแนะนำ: ลองทำโปรเจกต์จริง เช่น สร้างเว็บ Blog หรือ Todo App แล้ว Deploy ขึ้นอินเทอร์เน็ต — การเรียนรู้ที่ดีที่สุดคือการลงมือทำ!

🎉

ยินดีด้วย! คุณเรียนจบแล้ว!

คุณได้เรียนรู้ครบทุกด้าน ตั้งแต่คำศัพท์โปรแกรมเมอร์ ฐานข้อมูล จนถึงการ Deploy