02. Basic knowledge

---

อะไรคือ backend development ต่างจาก frontend dev ยังไง

ให้เปรียบเหมือน

• backend คือครัว : ทำอาหาร จัดการวัตถุดิบ ดูแลสูตรอาหาร สูตรจะผิดจะถูก จะอร่อยหรือไม่ก็ตรงนี้แหละ ฮ่าาา
• frontend คือพื้นที่ร้าน หน้าร้าน : ตกแต่งร้าน บริการลูกค้า

---

ภาพรวม backend ทำอะไรบ้าง

1 . จัดการ ฐานข้อมูล (Database Management)

• เก็บข้อมูลู้ใช้ สิ้นค้า บทความและอื่นๆ
• จัดการการเข้าถึงข้อมูล

2. ประมวลผลข้อมูล (Data Processing)

• คำนวณ
• จัดการ business logic ของระบบ

3. API (Application Programming Interface)

• สร้าง endpoint สำหรับ รับ-ส่งข้อมูล

---

Basic of Web development

Client-Server Model

Request

• เริ่มจาก client ส่ง request จริงๆ แปลไทยก็น่าจะ ส่งคำขอร้อง ฮ่า ไปยัง server
• Request หรือ คำขอร้องเนี่ยก็จะมี Http Method (GET, POST, PUT, DELETE) ตรง method จะไปลงลึกยัง หัดข้อถัดไปนะครับ
• Headers (ข้อมูลเพิ่มเติมของ request)
• Body (ข้อมูลที่ต้องการส่ง เช่น form data)

GET /api/users HTTP/1.1
Host: www.example.com
Accept: application/json
Authorization: Bearer token123

Response (การตอบกลับ)

• Server รับ Request และประมวลผล
• จากนั้นส่ง Response กลับไปยัง Client
• Response ประกอบด้วย:
  • Status Code (200 OK, 404 Not Found, 500 Error)
  • Headers (ข้อมูลเพิ่มเติมของ response)
  • Body (ข้อมูลที่ส่งกลับ เช่น HTML, JSON)

HTTP/1.1 200 OK
Content-Type: application/json
{
    "users": [
        {"id": 1, "name": "John"},
        {"id": 2, "name": "Jane"}
    ]
}

ขั้นตอนการทำงานทั้งหมด:

1. พิมพ์ URL ในเบราว์เซอร์ (เช่นwww.example.com)
2. เบราว์เซอร์สร้าง HTTP Request ส่งไปยัง Server
3. Server รับ Request และประมวลผล (เช่น ดึงข้อมูลจากฐานข้อมูล)
4. Server สร้าง Response และส่งกลับ
5. เบราว์เซอร์รับ Response และแสดงผลให้ผู้ใช้เห็น

ตัวอย่างในชีวิตประจำวัน:เปรียบเทียบกับการสั่งอาหารในร้านอาหาร:

• Client = ลูกค้า
• Request = การสั่งอาหาร
• Server = พ่อครัว
• Response = อาหารที่เสิร์ฟ
• Status Code = สถานะการสั่ง (สำเร็จ, หมด, ไม่มีในเมนู)

---

RESTful APIs

มาทำความเข้าใจเกี่ยวกับ API และ REST กันครับ

API คืออะไร?API (Application Programming Interface) คือชุดของกฎ โปรโตคอล และเครื่องมือสำหรับการสื่อสารระหว่างซอฟต์แวร์ เปรียบเสมือน “พนักงานเสิร์ฟ” ที่คอยรับคำสั่งจากลูกค้า (Frontend) และส่งต่อไปยังครัว (Backend)

Backend ใช้ API ทำอะไร?

1. เป็นจุดเชื่อมต่อกับ Frontend
   • รับข้อมูลจาก Frontend
   • ส่งข้อมูลกลับไปยัง Frontend
   • จัดการการร้องขอต่างๆ
2. จัดการข้อมูล
   • ดึงข้อมูลจากฐานข้อมูล
   • บันทึกข้อมูลใหม่
   • อัพเดทข้อมูลที่มีอยู่
   • ลบข้อมูล
3. การรักษาความปลอดภัย
   • ตรวจสอบสิทธิ์ผู้ใช้
   • จำกัดการเข้าถึงข้อมูล
   • ป้องกันการโจมตี

REST คืออะไร? REST (Representational State Transfer) คือแนวทางการออกแบบ API ที่ใช้หลักการพื้นฐานของ HTTP

GET /api/products           // ดึงรายการสินค้าทั้งหมด
GET /api/products/1         // ดึงข้อมูลสินค้า ID 1
POST /api/products          // เพิ่มสินค้าใหม่
PUT /api/products/1         // อัพเดทสินค้า ID 1
DELETE /api/products/1      // ลบสินค้า ID 1

เปรียบเทียบกับร้านอาหาร:

• API = พนักงานเสิร์ฟ
• REST = กฎการสั่งอาหาร
  • เมนูอาหาร = Resources
  • วิธีสั่ง = HTTP Methods
  • ใบสั่งอาหาร = Request
  • อาหารที่เสิร์ฟ = Response

---

Web Protocols and Communication

1. HTTP และ HTTPS คืออะไรHTTP (Hypertext Transfer Protocol) คือโปรโตคอลสำหรับการสื่อสารบนเว็บ

• เป็นแบบ client-server
• ไม่มีการเข้ารหัสข้อมูล

HTTPS (HTTP Secure) คือ HTTP ที่มีการเข้ารหัสข้อมูล

• ใช้ SSL/TLS ในการเข้ารหัส

• ปลอดภัยกว่า HTTP

• เห็นเป็นไอคอนกุญแจในเบราว์เซอร์

  จริงๆ เดี๋ยวนี้ก็น่าจะเป็น https กันหมดแล้วครับ

2. HTTP Methods

1. GET
   • ใช้ดึงข้อมูล
   • ไม่เปลี่ยนแปลงข้อมูลบน server
   • เช่น GET /users - ดึงรายชื่อผู้ใช้
2. POST
   • สร้างข้อมูลใหม่
   • เช่น POST /users - สร้างผู้ใช้ใหม่
3. PUT
   • อัพเดทข้อมูลทั้งหมด
   • เช่น PUT /users/1 - อัพเดทข้อมูลผู้ใช้ ID 1 ทั้งหมด
4. PATCH
   • อัพเดทข้อมูลบางส่วน
   • เช่น PATCH /users/1 - อัพเดทเฉพาะชื่อผู้ใช้
5. DELETE
   • ลบข้อมูล
   • เช่น DELETE /users/1 - ลบผู้ใช้ ID 1

3. HTTP Status Codes

1. 2xx - Success
   • 200 OK: สำเร็จ
   • 201 Created: สร้างข้อมูลสำเร็จ
   • 204 No Content: สำเร็จแต่ไม่มีข้อมูลส่งกลับ
2. 3xx - Redirection
   • 301 Moved Permanently: เวปนี้ได้ย้ายไปอยู่ที่ URL อื่นแล้ว
   • 302 Found/Temporary Redirect: เวปนี้ยังอยู่ แต่ว่าตอนนี้ใช้ URL อื่นเป็นการชั่วคราว เดี๋ยวจะกลับมาในอีกเร็วๆนี้ 😆😆
3. 4xx - Client Error
   • 400 Bad Request: คำขอไม่ถูกต้อง
   • 401 Unauthorized: ไม่ได้ยืนยันตัวตน
   • 403 Forbidden: ไม่มีสิทธิ์เข้าถึง
   • 404 Not Found: ไม่พบข้อมูล
   • 429 Too Many Requests: ส่งคำขอมากเกินไป
4. 5xx - Server Error
   • 500 Internal Server Error: เซิร์ฟเวอร์ผิดพลาด
   • 502 Bad Gateway: Gateway ผิดพลาด
   • 503 Service Unavailable: บริการไม่พร้อมใช้งาน

4. องค์ประกอบของ HTTP Request/Response

1. Headers

- ตัวอย่าง:

Content-Type: application/json
Authorization: Bearer token123
Accept-Language: th

1. Body

• เนื้อหาของข้อมูล
• มักอยู่ในรูปแบบ JSON
• ตัวอย่าง:

{
  "name": "กิตติ",
  "age": 25
}

1. Query Parameters

• พารามิเตอร์ที่ต่อท้าย URL ด้วย ?
• ใช้ & คั่นหลายพารามิเตอร์
• ตัวอย่าง

/products?category=electronics&sort=price

1. Path Paremeter

• พารามิเตอร์ที่เป็นส่วนหนึ่งของ path
• ตัวอย่าง

/users/123/orders/456

• 123 = user ID
• 456 = order ID

ตัวอย่างการใช้งาน:

GET /api/users/123/orders?status=pending HTTP/1.1
Host: example.com
Authorization: Bearer abc123
Content-Type: application/json
{
  "filter": {
    "date": "2024-01-13"
  }
}

ในตัวอย่างนี้:

• Path Parameter: 123 (user ID)
• Query Parameter: status=pending
• Header: Authorization และ Content-Type
• Body: JSON object ที่มี filter

Databases

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

1. Relation Database(SQL)
   • เก็บข้อมูลในรูปแบบตาราง
   • มีความสัมพันธ์ระหว่างตาราง
   • ยี่ห้อ: MySQL, PostgreSQL, Oracle, Microsoft SQL Server
2. NoSQL Database
   • Document-based
     • เก็บข้อมูลในรูปแบบ document
     • ยี่ห้อ: MongoDB,
   • Key-Value
     • เก็บข้อมูลแบบ key-value pairs
     • ยี่ห้อ: Redis, DynamoDB

2. Basic Data Modeling

1. Tables (ตาราง)
   • เปรียบเสมือนสมุดทะเบียน
   • เช่น: users, products, orders
2. Rows (แถว)
   • แต่ละรายการในตาราง
   • เช่น: ข้อมูลผู้ใช้แต่ละคน
3. Columns (คอลัมน์)
   • คุณสมบัติของข้อมูล
   • เช่น: id, name, email
4. Primary Keys
   • ตัวระบุที่ไม่ซ้ำกัน
   • มักใช้ id เป็น primary key
5. Relations (ความสัมพันธ์)
   • One-to-One (1:1)
     • เช่น: user - user_profile
   • One-to-Many (1:N)
     • เช่น: user - orders
   • Many-to-Many (N:M)
     • เช่น: products - categories

ตัวอย่างโครงสร้าง:

-- Users table
CREATE TABLE users (
    id INT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100)
);
-- Orders table
CREATE TABLE orders (
    id INT PRIMARY KEY,
    user_id INT,  -- Foreign key to users
    total DECIMAL,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

3. Basic SQL Commands

1. SELECT (ดึงข้อมูล)

-- ดึงข้อมูลทั้งหมด
SELECT * FROM users;
-- ดึงบางคอลัมน์
SELECT name, email FROM users;
-- ดึงตามเงื่อนไข
SELECT * FROM users WHERE age > 18;
-- ดึงข้อมูลที่เกี่ยวข้องกัน (JOIN)
SELECT users.name, orders.total
FROM users
JOIN orders ON users.id = orders.user_id;

2. INSERT (เพิ่มข้อมูล)

-- เพิ่มข้อมูลเดียว
INSERT INTO users (name, email)
VALUES ('John', '[email protected]');
-- เพิ่มหลายข้อมูล
INSERT INTO users (name, email) VALUES
    ('John', '[email protected]'),
    ('Jane', '[email protected]');

3. UPDATE (อัพเดทข้อมูล)

-- อัพเดทข้อมูลทั้งหมด
UPDATE users SET status = 'active';
-- อัพเดทตามเงื่อนไข
UPDATE users
SET email = '[email protected]'
WHERE id = 1;

4. DELETE (ลบข้อมูล)

-- ลบข้อมูลตามเงื่อนไข
DELETE FROM users WHERE id = 1;
-- ลบข้อมูลทั้งหมด (ระวัง!)
DELETE FROM users;

Caution

ข้อควรระวัง:

• ควรมี WHERE clause เมื่อใช้ UPDATE และ DELETE
• ควรทำ backup ก่อนการแก้ไขข้อมูลสำคัญ
• ระวังเรื่อง SQL injection

เรามาทำความเข้าใจเกี่ยวกับ Backend Frameworks และองค์ประกอบต่างๆ กันครับ

1. Frameworks คืออะไร และทำไมต้องใช้?

เหตุผลที่ต้องใช้:

1. ประหยัดเวลา
   • ไม่ต้องเขียนโค้ดพื้นฐานใหม่
   • มีฟังก์ชันพร้อมใช้งาน
2. มาตรฐานและความปลอดภัย
   • มีการจัดการความปลอดภัยพื้นฐาน
   • มีแนวทางการเขียนโค้ดที่เป็นมาตรฐาน
3. Community Support
   • มีผู้ใช้จำนวนมาก
   • มี libraries เสริมมากมาย

ตัวอย่าง Frameworks:

• Node.js: Express, NestJS
• Python: Django, Flask
• PHP: Laravel, Symfony
• Java: Spring Boot
• Go: Gin, Echo

2. โครงสร้างของ Backend Framework

1. Routes (เส้นทาง)

// Express.js example
app.get('/users', (req, res) => {
  // handle request
});
app.post('/users', (req, res) => {
  // create user
});

1. Middleware (ตัวกลาง)

// Authentication middleware
const authMiddleware = (req, res, next) => {
  if (!req.headers.authorization) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  next();
};
app.use('/protected', authMiddleware);

1. Controllers (ตัวควบคุม)

// User Controller
class UserController {
  async getUsers(req, res) {
    const users = await User.findAll();
    res.json(users);
  }
  async createUser(req, res) {
    const user = await User.create(req.body);
    res.status(201).json(user);
  }
}

3. Validation และ Error Handling

1. Validation (การตรวจสอบข้อมูล)

// Data validation
const validateUser = (req, res, next) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({
      error: 'Email and password are required'
    });
  }
  if (password.length < 8) {
    return res.status(400).json({
      error: 'Password must be at least 8 characters'
    });
  }
  next();
};

2. Error Handling (การจัดการข้อผิดพลาด)

// Global error handler
app.use((err, req, res, next) => {
  console.error(err.stack);
  // Different responses for different errors
  if (err.name === 'ValidationError') {
    return res.status(400).json({
      error: err.message
    });
  }
  if (err.name === 'UnauthorizedError') {
    return res.status(401).json({
      error: 'Invalid token'
    });
  }
  // Default error response
  res.status(500).json({
    error: 'Something went wrong!'
  });
});

4. OpenAPI (Swagger)

OpenAPI คือมาตรฐานสำหรับอธิบาย REST APIs

ตัวอย่าง OpenAPI Specification:

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0
paths:
  /users:
    get:
      summary: Get all users
      responses:
        '200':
          description: List of users
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'
    post:
      summary: Create new user
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CreateUser'
      responses:
        '201':
          description: User created successfully

components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: integer
        name:
          type: string
        email:
          type: string

ประโยชน์ของ OpenAPI:

1. Documentation อัตโนมัติ
2. สร้าง Client Code อัตโนมัติ
3. API Design First Approach การใช้ OpenAPI ช่วยให้:

• เอกสาร API เป็นมาตรฐาน
• Frontend และ Backend เข้าใจตรงกัน
• ลดข้อผิดพลาดในการพัฒนา

มาเรียนรู้เรื่องความปลอดภัยพื้นฐานสำหรับ Backend Development กันครับ

1. Authentication (การยืนยันตัวตน)

• JWT (JSON Web Tokens)

// สร้าง JWT
const token = jwt.sign({ userId: user.id }, 'secret_key', { expiresIn: '1h' });

// ตรวจสอบ JWT
const middleware = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  try {
    const decoded = jwt.verify(token, 'secret_key');
    req.user = decoded;
    next();
  } catch {
    res.status(401).json({ error: 'Invalid token' });
  }
};

• API Keys
• OAuth 2.0

2. Sensitive Data Exposure (การป้องกันข้อมูลรั่วไหล)

1. การเข้ารหัสข้อมูล:

// เข้ารหัส password
const bcrypt = require('bcrypt');
const hashedPassword = await bcrypt.hash(password, 10);
// ตรวจสอบ password
const isValid = await bcrypt.compare(inputPassword, hashedPassword);

3. Rate limit

เป็นการจำกัดการเข้าถึง api ของเราไว้จำนวนกี่ครั้งต่อวินาที ต่อนาที ต่อชั่วโมง แล้วแต่จะตั้ง จะไประดับต่อปีก็ดูสนุกดี ฮ่าๆ การเข้าถึงข้อมูลบน server ปกติแล้วเราก็ให้ทุกคนเข้ามาแหละ
แต่มันอาจจะมีบางคนที่เรียกมาบ่อยๆ แล้วไม่ได้ประโยชน์อะไร เช่นลองยิงเล่นๆดูสัก 10000 req/s แต่ไม่ได้อยากได้ response อะไร ทำให้ server เราก็ต้องประมวลผลไปโดยเปล่าประโยชน์
หรือ api บางเส้นอาจจต้องใช้เวลาในการประมวลผลนาน ก็ใช้ rate limit ได้อยู่นะ

Security Best Practices อื่นๆ

CORS (Cross-Origin Resource Sharing)

const cors = require('cors');
app.use(cors({
  origin: 'https://yourdomain.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

Basic Networking

1 . IP Address, Ports, และ DNS

1. IP Address

   • เป็นเหมือน “ที่อยู่” ของอุปกรณ์ในเครือข่าย
   • IPv4: 192.168.1.1 (เลข 4 ชุด)
   • ประเภท:
     • Public IP: ใช้สื่อสารบนอินเทอร์เน็ต
     • Private IP: ใช้ในเครือข่ายภายใน (192.168.x.x, 10.x.x.x)

2. Ports

   • 80: HTTP
   • 443: HTTPS
   • 22: SSH
   • 3306: MySQL
   • 5432: PostgreSQL

3. DNS (Domain name system)

   ตัวอย่าง:www.example.com-> 93.184.216.34

2. การสื่อสารระหว่าง User กับ Server ผ่าน URL

เมื่อผู้ใช้พิมพ์ URL:https://www.example.com/products?id=123

ขั้นตอน DNS Resolution:

User -> DNS Resolver -> DNS Servers -> IP Address
www.example.com -> 93.184.216.34

องค์ประกอบของ URL:

https://www.example.com:443/products?id=123
|      |     |          |   |        |
scheme |     |          |   path     query
       |     |          port
       |     domain
       subdomain

ขั้นตอนการเรียก:

1. User พิมพ์ URL ในเบราว์เซอร์ https://www.example.com/products?id=123
2. เบราว์เซอร์ขอ IP จาก DNS www.example.com -> 93.184.216.34
3. เบราว์เซอร์สร้าง HTTP Request GET /products?id=123 HTTP/1.1 Host: www.example.com
4. Request ถูกส่งไปที่ Server ผ่าน TCP/IP Client -> Internet -> Server (93.184.216.34:443)
5. Server ประมวลผลและส่ง Response กลับ HTTP/1.1 200 OK Content-Type: text/html
6. เบราว์เซอร์แสดงผลให้ User เห็น

Note

ข้อควรรู้เพิ่มเติม:

• ควรใช้ HTTPS เสมอสำหรับข้อมูลสำคัญ
• DNS caching ช่วยเพิ่มความเร็ว
• Firewalls อาจบล็อกบาง ports หรือ IP

---