เรียนรู้การพัฒนาแอปพลิเคชัน
ตั้งแต่พื้นฐานถึง Deploy
คอร์สสำหรับผู้เริ่มต้น — พร้อมคำอธิบายศัพท์เทคนิค ตัวอย่างโค้ดจริง และแบบทดสอบ
คำศัพท์สำหรับโปรแกรมเมอร์
(Programming Vocabulary)
รู้จักศัพท์เทคนิคเบื้องต้นที่ต้องรู้ก่อนเริ่มเขียนโปรแกรม — รวมถึง Data Type ที่ใช้แทนข้อมูลแต่ละชนิด
1.1 Data Type — ชนิดข้อมูล (สำคัญมาก!)
ในภาษาโปรแกรม ข้อมูลทุกตัวจะมี "ชนิด" (Data Type) บอกว่าข้อมูลนั้นเป็นตัวเลข ข้อความ หรืออะไร เปรียบเหมือนการบอกว่าของในกล่องเป็น "อาหาร" หรือ "เครื่องดื่ม" เพื่อให้คอมพิวเตอร์จัดการได้ถูกต้อง
ชนิดข้อมูลพื้นฐาน
"123" กับ 123 ไม่เหมือนกัน! — "123" (มีเครื่องหมายคำพูด) คือ STRING (ข้อความ) ส่วน 123 (ไม่มี) คือ INT (ตัวเลข) — ข้อความบวกเลขไม่ได้!
Data Type ในแต่ละภาษา
| ชนิด | Python | JavaScript | SQL (MySQL) | Java |
|---|---|---|---|---|
| จำนวนเต็ม | int | number | INT, BIGINT | int, long |
| ทศนิยม | float | number | FLOAT, DECIMAL | float, double |
| ข้อความ | str | string | VARCHAR, TEXT | String |
| จริง/เท็จ | bool | boolean | BOOLEAN, TINYINT | boolean |
| วันที่ | datetime | Date | DATE, DATETIME | LocalDate |
| ค่าว่าง | None | null / undefined | NULL | null |
ตัวอย่างการประกาศตัวแปรพร้อม Data Type
name = "สมชาย" # str (ข้อความ)
age = 25 # int (จำนวนเต็ม)
price = 99.50 # float (ทศนิยม)
is_member = True # bool (จริง/เท็จ)
items = ["เสื้อ", "กางเกง"] # list (ชุดข้อมูล)let name = "สมชาย"; // string
let age = 25; // number
let price = 99.50; // number
let isMember = true; // boolean
let items = ["เสื้อ", "กางเกง"]; // array1.2 คำศัพท์พื้นฐานที่ต้องรู้
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 ตัวอย่างรวม: อ่านโค้ดจริง
ลองอ่านโค้ดด้านล่าง แล้วดูว่าจำศัพท์ได้ไหม:
// ประกาศ 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 เก็บค่าแบบใด?
พื้นฐานระบบฐานข้อมูล (Database Systems)
เรียนรู้ว่าฐานข้อมูลคืออะไร ทำไมถึงสำคัญ และมีกี่ประเภท
2.1 ฐานข้อมูลคืออะไร?
ฐานข้อมูล (Database) คือที่เก็บรวบรวมข้อมูลอย่างเป็นระบบ เปรียบเหมือนตู้เก็บเอกสารขนาดใหญ่ที่จัดเรียงไว้อย่างดี สามารถค้นหา เพิ่ม ลบ และแก้ไขข้อมูลได้อย่างสะดวกและรวดเร็ว
ลองนึกถึง สมุดโทรศัพท์ในมือถือ — มีชื่อ เบอร์โทร ที่อยู่ เรียงตามลำดับ ค้นหาได้ง่าย นั่นคือหลักการเดียวกันกับฐานข้อมูล
2.2 ประเภทของฐานข้อมูล
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 (คีย์หลัก) ทำหน้าที่อะไร?
ระบบเครือข่ายคอมพิวเตอร์ (Computer Networks)
เข้าใจการเชื่อมต่อคอมพิวเตอร์ และโมเดล Client-Server
3.1 เครือข่ายคืออะไร?
ระบบเครือข่าย (Network) คือการเชื่อมต่อคอมพิวเตอร์หลายเครื่องเข้าด้วยกัน เพื่อแลกเปลี่ยนข้อมูล แชร์ทรัพยากร หรือสื่อสารกัน อินเทอร์เน็ตที่เราใช้ทุกวันก็เป็นเครือข่ายขนาดใหญ่ที่สุดในโลก
3.2 ประเภทของเครือข่าย
3.3 โมเดล Client-Server (สำคัญมาก!)
ผู้ขอ / เบราว์เซอร์
ผู้ให้บริการ
ฐานข้อมูล
เปรียบเทียบร้านอาหาร: คุณ (Client) สั่งอาหารผ่านเมนู (API) → ครัว (Server) ไปเอาวัตถุดิบจากคลัง (Database) มาทำให้
3.4 คำศัพท์สำคัญ
| คำศัพท์ | อธิบายง่ายๆ | ตัวอย่าง |
|---|---|---|
| IP Address | เลขที่บ้านบนเครือข่าย | 192.168.1.1 |
| Port | เลขที่ห้องในบ้าน | 80 = เว็บ, 3306 = MySQL |
| DNS | แปลงชื่อเว็บให้เป็น IP | google.com → 142.250.x.x |
| HTTP/HTTPS | ภาษาสื่อสารเบราว์เซอร์ ↔ เซิร์ฟเวอร์ | https://www.google.com |
| API | ช่องทางให้โปรแกรมคุยกันผ่านเครือข่าย | GET /api/products |
DNS ทำหน้าที่อะไร?
SQL พื้นฐาน (ภาษาจัดการฐานข้อมูล)
เรียนรู้คำสั่ง CRUD — สร้าง อ่าน แก้ไข ลบ ข้อมูล
4.1 SQL คืออะไร?
SQL (Structured Query Language) คือภาษาที่ใช้พูดคุยกับฐานข้อมูล แบ่งเป็น 4 กลุ่มหลัก เรียกว่า CRUD:
| คำสั่ง | คำอธิบาย | CRUD |
|---|---|---|
| INSERT | เพิ่มข้อมูล (เหมือนเขียนรายชื่อเข้าไป) | Create |
| SELECT | ดึงข้อมูลมาดู (เหมือนเปิดสมุดอ่าน) | Read |
| UPDATE | แก้ไขข้อมูล (เหมือนลบแล้วเขียนใหม่) | Update |
| DELETE | ลบข้อมูล (เหมือนฉีกทิ้ง) | Delete |
4.2 สร้างฐานข้อมูลและตาราง
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 (เพิ่มข้อมูล)
INSERT INTO products (name, price, stock)
VALUES ('เสื้อยืดสีดำ', 350.00, 50);R = Read (อ่านข้อมูล)
-- ดึงสินค้าทั้งหมด
SELECT * FROM products;
-- ดึงเฉพาะราคาต่ำกว่า 500 บาท
SELECT name, price FROM products WHERE price < 500;U = Update (แก้ไข)
UPDATE products SET price = 299.00 WHERE id = 1;D = Delete (ลบ)
DELETE FROM products WHERE id = 2;คำสั่ง DELETE และ UPDATE ควรมี WHERE เสมอ! ถ้าลืมใส่จะมีผลกับ ทุกแถว ในตาราง
คำสั่ง SQL ใดใช้สำหรับ "ดึงข้อมูล" มาดู?
การออกแบบฐานข้อมูล (Database Design)
วางแผนก่อนสร้าง — ออกแบบตารางให้เชื่อมโยงกันอย่างมีระบบ
5.1 ถามตัวเองก่อนเขียนโค้ด
- แอปนี้ต้องเก็บข้อมูลอะไรบ้าง? (สินค้า ลูกค้า คำสั่งซื้อ)
- ข้อมูลเหล่านี้มีความสัมพันธ์กันอย่างไร?
- แต่ละข้อมูลมีคุณสมบัติ (Attribute) อะไรบ้าง?
5.2 ตัวอย่าง: ร้านค้าออนไลน์ (3 ตาราง)
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
);CREATE TABLE products (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(200) NOT NULL,
price DECIMAL(10,2) NOT NULL,
stock INT DEFAULT 0
);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 — รวมข้อมูลข้ามตาราง
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;การสร้าง Application เชื่อมต่อฐานข้อมูล
สร้างแอปจริงด้วย Python + SQLite — ไม่ต้องติดตั้งอะไรเพิ่ม
6.1 แอปมี 3 ส่วนหลัก
หน้าบ้าน
หลังบ้าน
ฐานข้อมูล
6.2 ตัวอย่าง: Python + SQLite
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()การสร้าง Web Application
สร้างเว็บแอปด้วย Node.js + Express + MySQL
7.1 Web App คืออะไร?
Web Application คือโปรแกรมที่ทำงานผ่านเว็บเบราว์เซอร์ ไม่ต้องติดตั้ง เช่น Facebook, Shopee, Gmail
7.2 ตัวอย่าง: Node.js + Express
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'));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 ครบชุด
// 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' }));
});เชื่อมต่อ Frontend กับ Backend
สร้างหน้าเว็บที่ดึงข้อมูลจาก API มาแสดงผลจริง
9.1 ตัวอย่าง: HTML ดึงข้อมูลจาก API
<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 ทำหน้าที่อะไร?
ความปลอดภัยเบื้องต้น (Security Basics)
ภัยคุกคามที่มือใหม่ต้องรู้ และวิธีป้องกัน
10.1 ภัยคุกคามที่พบบ่อย
?10.2 Hash รหัสผ่านด้วย bcrypt
const bcrypt = require('bcrypt');
// เข้ารหัสก่อนบันทึก
const hashed = await bcrypt.hash('mypassword', 10);
// เทียบรหัสผ่านตอน Login
const ok = await bcrypt.compare('mypassword', hashed);
// ok = true → รหัสผ่านถูกต้อง!ห้ามเก็บรหัสผ่านแบบข้อความธรรมดาเด็ดขาด! ต้องเข้ารหัส (Hash) ก่อนเสมอ
วิธีป้องกัน SQL Injection ที่ดีที่สุดคืออะไร?
การ 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 Store | Flutter, React Native |
| Container | ใช้ Docker บรรจุแอปพร้อม Environment ไว้ด้วยกัน | Docker, Kubernetes |
11.3 Deploy Web Application
มีหลายแพลตฟอร์มให้เลือก จากง่ายสุดไปซับซ้อน:
ตัวอย่าง: 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
ไฟล์ที่ต้องเตรียม (สำคัญ!)
{
"name": "my-shop-app",
"scripts": {
"start": "node app.js" // Railway จะรันคำสั่งนี้
},
"dependencies": {
"express": "^4.18.0",
"mysql2": "^3.6.0"
}
}// อ่านค่าจาก 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}`);
});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 (แบบติดตั้งในเครื่อง)
ถ้าต้องการให้ผู้ใช้ดาวน์โหลดแล้วเปิดใช้ได้เลย โดยไม่ต้องเปิดเบราว์เซอร์:
| เครื่องมือ | ภาษา | ผลลัพธ์ | เหมาะกับ |
|---|---|---|---|
| PyInstaller | Python | ไฟล์ .exe | เครื่องมือ CLI / สคริปต์ |
| Electron | JavaScript | แอป Desktop | แอปที่มีหน้าจอ GUI เช่น VS Code |
| Tauri | Rust + Web | แอป Desktop ขนาดเล็ก | แอปเบาๆ ประสิทธิภาพสูง |
| GraalVM | Java | Native binary | แอป Java ที่เปิดเร็ว |
ตัวอย่าง: แปลง Python เป็น .exe ด้วย PyInstaller
# ติดตั้ง PyInstaller
pip install pyinstaller
# แปลงไฟล์ Python เป็น .exe (ไฟล์เดียว)
pyinstaller --onefile my_app.py
# ไฟล์ .exe จะอยู่ในโฟลเดอร์ dist/
# แจกไฟล์ dist/my_app.exe ให้ผู้ใช้ได้เลย!ตัวอย่าง: สร้างแอป Desktop ด้วย Electron
mkdir my-desktop-app && cd my-desktop-app
npm init -y
npm install electron --save-devconst { 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 ใครเปิดกล่องก็ใช้ได้เลย ไม่ต้องติดตั้งอะไรเพิ่ม
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "app.js"]# สร้าง 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 ทำหน้าที่อะไร?
สรุปและแนวทางเรียนรู้ต่อไป
ทบทวนทั้งหมดที่เรียนมา และเส้นทางถัดไป
12.1 สรุปสิ่งที่เรียนรู้
| บท | หัวข้อ | เรียนรู้อะไร |
|---|---|---|
| 1 | คำศัพท์โปรแกรมเมอร์ | Data Type, Variable, Function, Loop, Condition |
| 2 | ระบบฐานข้อมูล | ประเภท, DBMS, Table, Key |
| 3 | ระบบเครือข่าย | Client-Server, IP, DNS, API |
| 4 | SQL พื้นฐาน | CRUD — INSERT, SELECT, UPDATE, DELETE |
| 5 | ออกแบบ DB | Primary Key, Foreign Key, JOIN |
| 6 | สร้าง App | Python + SQLite |
| 7 | Web App | Node.js + Express + MySQL |
| 8 | API & REST | HTTP Methods, CRUD API |
| 9 | Frontend + Backend | fetch(), HTML เรียก API |
| 10 | ความปลอดภัย | SQL Injection, XSS, bcrypt |
| 11 | Deploy โปรแกรม | Vercel, Railway, Docker, PyInstaller, Electron |
12.2 แนวทางเรียนรู้ต่อ
คำแนะนำ: ลองทำโปรเจกต์จริง เช่น สร้างเว็บ Blog หรือ Todo App แล้ว Deploy ขึ้นอินเทอร์เน็ต — การเรียนรู้ที่ดีที่สุดคือการลงมือทำ!
ยินดีด้วย! คุณเรียนจบแล้ว!
คุณได้เรียนรู้ครบทุกด้าน ตั้งแต่คำศัพท์โปรแกรมเมอร์ ฐานข้อมูล จนถึงการ Deploy