Ở bài 6, chúng ta đã xây dựng State Machine cho bộ não của máy.

Bây giờ đến phần mà khách hàng nhìn thấy đầu tiên:

Giao diện người dùng (UI/UX).

Một máy bán nước có phần cơ khí rất tốt nhưng giao diện khó sử dụng thì trải nghiệm vẫn rất tệ.

Mục tiêu của chúng ta là tạo một giao diện hiện đại, đơn giản, dễ bấm, lấy cảm hứng từ phong cách giao diện Windows/Material nhưng không sao chép logo hay nhận diện thương hiệu.

1. Màn hình của máy

Phiên bản mini có thể bắt đầu với:

• Màn hình cảm ứng 3.5–4.3 inch.

• ESP32.

• Độ phân giải khoảng 480×272 hoặc 800×480.

• Giao tiếp SPI hoặc RGB tùy loại màn hình.

Nếu muốn làm giao diện đẹp hơn, có thể chọn:

ESP32 + màn hình cảm ứng 4.3 inch + LVGL

LVGL là thư viện giao diện rất phù hợp cho các thiết bị nhúng.

2. Không thiết kế quá nhiều nút

Một lỗi phổ biến khi thiết kế máy bán hàng là đưa quá nhiều thông tin lên màn hình.

Ví dụ không nên:

┌───────────────────────────────┐
│ A1  Coca 10.000 │ A2 Pepsi... │
│ B1  Sprite ...  │ B2 Fanta... │
│ C1  Water ...   │ C2 Tea ...  │
│                               │
│ QR │ CASH │ CARD │ SETTINGS   │
└───────────────────────────────┘

Khách nhìn vào sẽ mất thời gian.

Chúng ta nên thiết kế:

┌───────────────────────────────┐
│        CHỌN ĐỒ UỐNG           │
│                               │
│ ┌─────────┐ ┌─────────┐       │
│ │  🥤     │ │  🥤     │       │
│ │ Coca    │ │ Pepsi   │       │
│ │ 15.000đ │ │ 15.000đ │       │
│ └─────────┘ └─────────┘       │
│                               │
│ ┌─────────┐ ┌─────────┐       │
│ │  🥤     │ │  🥤     │       │
│ │ Sprite  │ │ Fanta   │       │
│ │ 15.000đ │ │ 15.000đ │       │
│ └─────────┘ └─────────┘       │
└───────────────────────────────┘

Khách chỉ cần:

Nhìn → chọn → thanh toán → nhận hàng.

3. Thiết kế theo State Machine

Điểm quan trọng là:

UI không được tách rời State Machine.

Mỗi trạng thái của máy tương ứng với một màn hình.

IDLE
 ↓
Màn hình chờ

SELECT
 ↓
Màn hình chọn sản phẩm

PAYMENT
 ↓
Màn hình thanh toán

DISPENSE
 ↓
Màn hình đang lấy hàng

CHECK
 ↓
Màn hình kiểm tra

SUCCESS
 ↓
Màn hình hoàn tất

ERROR
 ↓
Màn hình báo lỗi

Như vậy phần mềm rất dễ quản lý.

4. Màn hình chờ — IDLE

Khi không có người sử dụng:

┌──────────────────────────────┐
│                              │
│          VENDING             │
│                              │
│       🥤  DRINK BAR          │
│                              │
│     Chạm để chọn sản phẩm    │
│                              │
│             10:30            │
└──────────────────────────────┘

Có thể thêm:

• Logo máy.

• Hình ảnh sản phẩm.

• Nhiệt độ.

• Khuyến mãi.

• Wi-Fi/4G.

• Đồng hồ.

Nhưng không nên nhồi quá nhiều thông tin.

5. Màn hình chọn sản phẩm

Đây là màn hình quan trọng nhất.

Ví dụ:

┌──────────────────────────────┐
│ Chọn sản phẩm                │
│                              │
│ ┌────────┐  ┌────────┐       │
│ │ Coca   │  │ Pepsi  │       │
│ │ 15.000 │  │ 15.000 │       │
│ │   A1   │  │   A2   │       │
│ └────────┘  └────────┘       │
│                              │
│ ┌────────┐  ┌────────┐       │
│ │ Sprite │  │ Fanta  │       │
│ │ 15.000 │  │ 15.000 │       │
│ │   B1   │  │   B2   │       │
│ └────────┘  └────────┘       │
└──────────────────────────────┘

Mỗi sản phẩm nên hiển thị:

• Hình ảnh.

• Tên.

• Giá.

• Mã sản phẩm.

• Trạng thái còn hàng.

6. Hết hàng

Không nên để khách bấm vào sản phẩm rồi mới báo hết hàng.

Ngay trên UI:

┌───────────────┐
│               │
│    Coca       │
│               │
│   HẾT HÀNG    │
│               │
└───────────────┘

Nút phải chuyển sang trạng thái:

DISABLED

Không thể nhấn.

7. Chọn sản phẩm

Khi khách chọn Coca:

┌──────────────────────────────┐
│         COCA                 │
│                              │
│            🥤                │
│                              │
│         15.000đ              │
│                              │
│     [   MUA NGAY   ]         │
│                              │
│     [   QUAY LẠI   ]         │
└──────────────────────────────┘

Không nên bắt khách đi qua quá nhiều màn hình.

Mục tiêu:

Từ màn hình chính đến thanh toán trong 1–2 thao tác.

8. Màn hình thanh toán

Ví dụ:

┌──────────────────────────────┐
│          THANH TOÁN          │
│                              │
│          Coca                │
│         15.000đ              │
│                              │
│     ┌───────────────┐        │
│     │      QR       │        │
│     │    ██████     │        │
│     │    ██  ██     │        │
│     └───────────────┘        │
│                              │
│     Quét mã để thanh toán    │
│                              │
│       [ HỦY GIAO DỊCH ]      │
└──────────────────────────────┘

Sau này có thể thêm:

QR

NFC

Thẻ

Tiền mặt

Nhưng bản mini đầu tiên chỉ cần QR là đủ.

9. Thanh toán thành công

Không chuyển ngay sang màn hình khác.

Nên cho khách thấy:

┌──────────────────────────────┐
│                              │
│             ✓                │
│                              │
│      THANH TOÁN THÀNH CÔNG  │
│                              │
│           15.000đ            │
│                              │
└──────────────────────────────┘

Sau khoảng thời gian rất ngắn:

PAYMENT
   ↓
DISPENSE

10. Màn hình đang nhả hàng

Đây là phần rất quan trọng.

Không nên để màn hình đứng yên.

┌──────────────────────────────┐
│                              │
│        ĐANG LẤY HÀNG         │
│                              │
│             ↻                │
│                              │
│       Vui lòng chờ...        │
│                              │
└──────────────────────────────┘

Có thể hiển thị animation:

Motor
  ↻
  ↻
  ↻

Trong lúc đó ESP32 thực hiện:

Motor ON
    ↓
Encoder đếm
    ↓
Đủ vị trí
    ↓
Motor OFF

11. Cảm biến xác nhận

Sau khi motor dừng:

DISPENSE

↓

CHECK

↓

IR Sensor

Nếu cảm biến phát hiện lon:

SUCCESS

Nếu không:

ERROR

UI lúc này có thể hiển thị:

✓ Đã giao sản phẩm

Vui lòng lấy hàng.

12. Màn hình lỗi

Không nên sử dụng những thông báo kỹ thuật như:

ERROR CODE: MOTOR_04

Khách hàng không hiểu.

Thay bằng:

┌──────────────────────────────┐
│             !                │
│                              │
│      KHÔNG THỂ LẤY HÀNG      │
│                              │
│  Vui lòng thử lại hoặc liên  │
│  hệ nhân viên hỗ trợ.        │
│                              │
│       [ TRỞ VỀ ]             │
└──────────────────────────────┘

Mã lỗi kỹ thuật chỉ dành cho màn hình quản trị.

13. Màu sắc

Với concept máy mà chúng ta đang thiết kế, có thể sử dụng:

Background
#F5F7FA

Primary
#2563EB

Success
#16A34A

Warning
#F59E0B

Danger
#DC2626

Text
#111827

Không cần sử dụng quá nhiều màu.

Quy tắc đơn giản:

1 màu chính + 1 màu cảnh báo + 1 màu thành công.

14. Thiết kế nút bấm

Nút cảm ứng phải đủ lớn.

Không nên:

[ OK ]

quá nhỏ.

Nên:

┌──────────────────────┐
│      MUA NGAY        │
└──────────────────────┘

Khách đứng trước máy có thể:

• tay ướt

• ánh sáng mạnh

• thao tác nhanh

Vì vậy vùng cảm ứng phải đủ rộng.

15. Không nên dùng quá nhiều animation

Animation chỉ nên giúp khách hiểu:

Đang xử lý
Đang thanh toán
Đang nhả hàng
Hoàn tất

Không nên:

• hiệu ứng bay quá nhiều

• chuyển cảnh quá lâu

• animation nặng

• video nền

Máy bán hàng cần:

Nhanh hơn là đẹp.

16. Kiến trúc UI

Chúng ta có thể tổ chức phần mềm:

UI
│
├── HomeScreen
├── ProductScreen
├── PaymentScreen
├── DispenseScreen
├── SuccessScreen
└── ErrorScreen

Trong khi phần điều khiển:

Core
│
├── VendingMachine
├── MotorController
├── SensorController
├── PaymentController
└── Inventory

Hai phần này giao tiếp với nhau.

              UI
               │
               ▼
        State Machine
               │
      ┌────────┼────────┐
      ▼        ▼        ▼
    Motor    Sensor   Payment

Đây là cách tổ chức tốt hơn rất nhiều so với việc nhét toàn bộ chương trình vào loop().

17. Dùng LVGL

Ở phiên bản đầu tiên, chúng ta có thể dùng LVGL để xây dựng UI.

Kiến trúc:

ESP32
 │
 ├── LVGL
 │     │
 │     ├── Button
 │     ├── Label
 │     ├── Image
 │     ├── Screen
 │     └── Animation
 │
 ├── Touch Driver
 │
 └── Vending Controller

LVGL xử lý giao diện.

ESP32 xử lý logic máy.

18. Ví dụ tạo nút

Một ví dụ đơn giản với LVGL:

lv_obj_t *btn;

btn = lv_button_create(lv_screen_active());

lv_obj_set_size(btn, 200, 70);
lv_obj_center(btn);

lv_obj_t *label = lv_label_create(btn);

lv_label_set_text(label, "MUA NGAY");
lv_obj_center(label);

Khi khách chạm vào nút, chương trình có thể chuyển State Machine:

currentState = SELECT;

Hoặc nếu đang ở màn hình chọn sản phẩm:

selectedProduct = 0;
currentState = PAYMENT;

19. UI không được điều khiển trực tiếp Motor

Đây là nguyên tắc rất quan trọng.

Không nên:

Button

↓

Motor

Mà phải:

Button
  ↓
UI Event
  ↓
State Machine
  ↓
Motor Controller
  ↓
Motor

Như vậy sau này:

• màn hình bị thay đổi

• thêm nút vật lý

• thêm app điện thoại

• thêm Web Admin

thì Motor Controller vẫn giữ nguyên.

20. Thiết kế hoàn chỉnh

Đến đây, hệ thống của chúng ta đã có kiến trúc:

                 TOUCH SCREEN
                       │
                       ▼
                    UI/LVGL
                       │
                       ▼
                STATE MACHINE
                       │
        ┌──────────────┼──────────────┐
        │              │              │
        ▼              ▼              ▼
     PAYMENT         MOTOR          SENSOR
        │              │              │
        ▼              ▼              ▼
      QR/API        DRIVER          IR/ENCODER
                       │
                       ▼
                     MOTOR
                       │
                       ▼
                    SPIRAL
                       │
                       ▼
                     🥤

Đây chính là lúc dự án bắt đầu giống một sản phẩm thực tế, thay vì chỉ là một mạch ESP32 điều khiển motor.

🧪 Bài thực hành

Trong bài này chưa cần làm toàn bộ giao diện.

Hãy làm theo thứ tự:

Bước 1

Tạo màn hình:

CHỌN SẢN PHẨM

Bước 2

Tạo 4 nút:

A1    A2

B1    B2

Bước 3

Khi nhấn A1:

selectedProduct = A1;

Bước 4

Chuyển sang:

PAYMENT

Bước 5

Giả lập thanh toán thành công bằng một nút:

THANH TOÁN

Bước 6

Chuyển:

PAYMENT
   ↓
DISPENSE

Sau đó mới kết nối với motor thật.

🎯 Tổng kết

Sau bài 7, chúng ta đã thiết kế được giao diện người dùng hoàn chỉnh về mặt luồng:

┌──────────┐
│  IDLE    │
└────┬─────┘
     ↓
┌──────────┐
│ SELECT   │
└────┬─────┘
     ↓
┌──────────┐
│ PAYMENT  │
└────┬─────┘
     ↓
┌──────────┐
│ DISPENSE │
└────┬─────┘
     ↓
┌──────────┐
│  CHECK   │
└────┬─────┘
     ↓
┌──────────┐
│ SUCCESS  │
└────┬─────┘
     ↓
    IDLE

Quan trọng nhất là chúng ta đã thống nhất một nguyên tắc:

UI chỉ nhận thao tác của người dùng. State Machine quyết định máy phải làm gì. Controller điều khiển phần cứng.

Đây sẽ là nền tảng để các bài sau không biến thành một đống code Arduino khó bảo trì.

Bài 8 — Kết nối thanh toán QR

Ở bài tiếp theo, chúng ta sẽ đưa thanh toán thật vào máy: tạo mã QR theo sản phẩm, nhận trạng thái thanh toán qua Internet, xác nhận giao dịch rồi mới cho phép ESP32 kích hoạt cơ cấu nhả lon.

Laravel không có một thư mục helpers mặc định. Nếu bạn muốn tự viết sanitizeHtml() thì nên tự tạo một helper riêng.

Với project của bạn, mình khuyên:

app/
└── Helpers/
    └── helpers.php

1. Tạo file

app/Helpers/helpers.php

Ví dụ:

<?php

if (! function_exists('sanitizeHtml')) {

    function sanitizeHtml(string $html): string
    {
        // code sanitize của bạn

        return $html;
    }
}

2. Cho Composer tự load

Mở:

composer.json

Tìm:

"autoload": {
    "psr-4": {
        "App\\": "app/",
        ...
    }
}

thêm files:

"autoload": {
    "files": [
        "app/Helpers/helpers.php"
    ],
    "psr-4": {
        "App\\": "app/"
    }
}

Nếu autoload của bạn đã có files thì chỉ thêm đường dẫn vào mảng đó.

3. Chạy Composer

composer dump-autoload

Sau đó có thể gọi ở bất kỳ Controller, Model, Service...:

$content = sanitizeHtml($request->content);

hoặc trực tiếp:

'content' => sanitizeHtml($request->content),

Cấu trúc mình khuyên dùng

app/
├── Helpers/
│   └── helpers.php
│
├── Http/
│   └── Controllers/
│
├── Models/
│
└── ...

Đây là cách khá gọn cho những function global, dùng nhiều nơi, như:

sanitizeHtml()
formatMoney()
slugify()
formatDate()

Còn nếu function chỉ phục vụ riêng cho Post, thì tốt hơn đưa nó vào Service/Action riêng thay vì biến mọi thứ thành global helper.

Ở bài trước, chúng ta đã có:

• ESP32

• Động cơ

• Driver

• Encoder

• Cảm biến rơi sản phẩm

Nếu tiếp tục viết chương trình theo kiểu:

if(...)
{
    ...
}

if(...)
{
    ...
}

if(...)
{
    ...
}

Thì chỉ sau vài ngày, chương trình sẽ trở nên rất khó đọc và khó bảo trì.

Các máy bán hàng thương mại không lập trình như vậy.

Họ sử dụng một mô hình gọi là State Machine (Máy trạng thái).

Mục tiêu

Sau bài này bạn sẽ:

• Hiểu State Machine là gì.

• Biết cách chia chương trình thành từng trạng thái.

• Thiết kế phần mềm giống máy bán hàng thương mại.

• Viết bộ khung chương trình đầu tiên.

  

State Machine là gì?

Hãy tưởng tượng một chiếc thang máy.

Nó không thể:

• mở cửa

• chạy

• đóng cửa

cùng một lúc.

Nó luôn ở một trạng thái xác định.

Ví dụ:

Đang chờ

↓

Đóng cửa

↓

Di chuyển

↓

Mở cửa

↓

Chờ

Máy bán nước cũng vậy.

Máy bán nước có bao nhiêu trạng thái?

Phiên bản mini của chúng ta sẽ có khoảng 8 trạng thái.

IDLE

↓

SELECT

↓

PAYMENT

↓

DISPENSE

↓

CHECK

↓

SUCCESS

↓

IDLE

Nếu có lỗi:

CHECK

↓

ERROR

↓

IDLE

Ý nghĩa từng trạng thái

IDLE

Máy đang chờ.

Màn hình hiển thị:

Xin chào

Mời chọn sản phẩm

Động cơ:

Không chạy.

SELECT

Khách chọn:

A1

B2

C3

D4

ESP32 lưu lại:

selectedProduct = A1;

PAYMENT

Máy chờ thanh toán.

Có thể:

• QR

• NFC

• Tiền mặt

Nếu thanh toán thành công:

↓

DISPENSE

DISPENSE

Motor bắt đầu quay.

Motor

↓

Spiral

↓

Lon tiến lên

Encoder bắt đầu đếm.

CHECK

Motor đã dừng.

ESP32 chờ:

IR Sensor

↓

Có lon chưa?

Nếu:

Có.

↓

SUCCESS

Nếu:

Không.

↓

ERROR

SUCCESS

Hiển thị:

Cảm ơn!

Chúc ngon miệng.

Sau vài giây:

↓

IDLE

ERROR

Ví dụ:

Sản phẩm bị kẹt.

Hoặc:

Hết hàng.

Máy sẽ:

• Báo lỗi

• Hoàn tiền (nếu có)

• Gửi log

Sơ đồ hoạt động

           +------+
           |IDLE  |
           +------+
               |
               v
        +-------------+
        |SELECT       |
        +-------------+
               |
               v
        +-------------+
        |PAYMENT      |
        +-------------+
               |
               v
        +-------------+
        |DISPENSE     |
        +-------------+
               |
               v
        +-------------+
        |CHECK        |
        +-------------+
          |        |
     Có lon      Không
          |        |
          v        v
   +---------+  +-------+
   |SUCCESS  |  |ERROR  |
   +---------+  +-------+
          \      /
           \    /
            v  v
          +------+
          |IDLE  |
          +------+

Khai báo State

Trong Arduino:

enum State
{
    IDLE,
    SELECT,
    PAYMENT,
    DISPENSE,
    CHECK,
    SUCCESS,
    ERROR_STATE
};

State currentState = IDLE;

Vòng lặp chính

void loop()
{

    switch(currentState)
    {

        case IDLE:
            break;

        case SELECT:
            break;

        case PAYMENT:
            break;

        case DISPENSE:
            break;

        case CHECK:
            break;

        case SUCCESS:
            break;

        case ERROR_STATE:
            break;

    }

}

Đây chính là "bộ não" của chiếc máy.

Ví dụ

Khách nhấn:

A2

ESP32:

currentState = SELECT;

Thanh toán thành công.

currentState = PAYMENT;

↓

currentState = DISPENSE;

↓

currentState = CHECK;

↓

currentState = SUCCESS;

↓

currentState = IDLE;

Không dùng delay()

Thay vì:

delay(5000);

Ta dùng:

unsigned long timer;

Ví dụ:

if(millis()-timer>5000)
{
    currentState = IDLE;
}

Ưu điểm:

Máy vẫn:

• đọc QR

• đọc nút bấm

• cập nhật màn hình

• gửi WiFi

trong khi đang chờ.

Tách chương trình

Không nên viết:

main.cpp

3000 dòng

Hãy chia:

src

├── main.cpp

├── motor.cpp

├── motor.h

├── payment.cpp

├── payment.h

├── display.cpp

├── display.h

├── sensor.cpp

├── sensor.h

├── vending.cpp

└── vending.h

Sau này dự án lớn hơn vẫn rất dễ quản lý.

Nhật ký hoạt động (Log)

Mỗi giao dịch nên lưu:

20:31:20

A1

QR

SUCCESS

Hoặc:

20:35:02

B3

ERROR

NO PRODUCT

Nhật ký giúp:

• tìm lỗi

• thống kê doanh thu

• kiểm tra bảo trì

Mở rộng trong tương lai

Khi đã có State Machine, việc thêm tính năng sẽ rất đơn giản:

IDLE

↓

UPDATE

↓

DOWNLOAD

↓

RESTART

Hoặc:

IDLE

↓

ADMIN MODE

↓

TEST MOTOR

↓

TEST SENSOR

Bạn không cần viết lại toàn bộ chương trình.

Kiến trúc hoàn chỉnh

           Người dùng
                │
                ▼
        Màn hình cảm ứng
                │
                ▼
           State Machine
                │
      ┌─────────┼─────────┐
      ▼         ▼         ▼
   Payment    Motor    Sensor
      │         │         │
      └─────────┼─────────┘
                ▼
              Display
                │
                ▼
             WiFi / Cloud

Đây là mô hình thường gặp trong các thiết bị IoT hiện đại, giúp mỗi thành phần có một nhiệm vụ rõ ràng và dễ bảo trì.

Bài tập

1. Tạo enum State với 7 trạng thái như trong bài.

2. Viết switch(currentState) trong loop().

3. Mỗi trạng thái chỉ cần Serial.println() tên của nó để kiểm tra luồng hoạt động.

4. Thử mô phỏng một giao dịch hoàn chỉnh:

   • IDLE → SELECT → PAYMENT → DISPENSE → CHECK → SUCCESS → IDLE.

5. Thử mô phỏng trường hợp lỗi:

   • IDLE → SELECT → PAYMENT → DISPENSE → CHECK → ERROR → IDLE.

Tổng kết

Đến bài này, bạn đã chuyển từ việc điều khiển từng linh kiện riêng lẻ sang thiết kế kiến trúc phần mềm cho cả hệ thống.

Bạn đã biết:

• State Machine là gì và vì sao nó được dùng trong máy bán hàng tự động.

• Cách chia chương trình thành các trạng thái rõ ràng.

• Tổ chức mã nguồn theo từng module.

• Sử dụng millis() thay cho delay() để hệ thống luôn phản hồi tốt.

Bài tiếp theo

🥤 Bài 7 — Thiết kế giao diện người dùng (UI/UX) trên màn hình cảm ứng

Chúng ta sẽ xây dựng một giao diện hiện đại theo phong cách Windows/Material Design, với màn hình chọn sản phẩm, giỏ hàng, trạng thái thanh toán, hiệu ứng chuyển cảnh và các nguyên tắc UX giúp khách hàng thao tác nhanh, trực quan và hạn chế nhầm lẫn khi sử dụng máy bán nước tự động.

Sau khi hoàn thành module Categories, chúng ta sẽ xây dựng chức năng quan trọng nhất của Blog CMS: quản lý bài viết (Posts).

Khác với Category chỉ có vài trường dữ liệu, Post sẽ liên kết với nhiều bảng khác nhau như Category, User, đồng thời hỗ trợ upload hình ảnh, kiểm tra dữ liệu đầu vào và hiển thị danh sách bài viết chuyên nghiệp.

Đây cũng là module có số lượng kiến thức nhiều nhất trong toàn bộ dự án.

Mục tiêu bài học

Sau bài này bạn sẽ thực hiện được:

• CRUD bài viết

• Upload ảnh đại diện

• Chọn Category

• Gán tác giả (User)

• Validation dữ liệu

• Hiển thị Relationship

• Tự động tạo slug

• Phân trang dữ liệu

  

Kết quả sau bài học

Danh sách bài viết sẽ hiển thị như sau:

1. Cấu trúc Database

Bảng posts

Quan hệ

User
   │
   ├──────< Posts >────── Category

Một User có nhiều Post.

Một Category có nhiều Post.

Một Post chỉ thuộc một User và một Category.

Chú ý:

1. Sửa migration create_posts_table

Đưa luôn cấu trúc hoàn chỉnh vào migration tạo posts:

Schema::create('posts', function (Blueprint $table) {
            $table->id();

            $table->foreignId('user_id')
                ->constrained()
                ->cascadeOnDelete();

            $table->foreignId('category_id')
                ->nullable()
                ->constrained()
                ->nullOnDelete();

            $table->string('title');

            $table->string('slug')
                ->unique();

            $table->string('image')
                ->nullable();

            $table->text('excerpt')
                ->nullable();

            $table->longText('content');

            $table->enum('status', [
                'draft',
                'published',
                'hidden',
                'scheduled'
            ])->default('draft');

            $table->timestamp('published_at')->nullable();

            $table->timestamps();
        });

Như vậy bạn không cần 3 migration riêng để:

• thêm category_id
• thêm image
• thêm slug
• thêm excerpt

nữa, nếu đây vẫn là database đang phát triển và chưa cần bảo toàn dữ liệu production.

2. Xóa các migration bổ sung cũ

Nếu bạn đã có các migration kiểu:

add_category_id_to_posts_table
add_image_to_posts_table
add_slug_and_excerpt_to_posts_table

thì có thể xóa chúng sau khi đã đưa cấu trúc cuối cùng vào migration create_posts_table.

Mục tiêu là migration tạo bảng posts ngay từ đầu đã hoàn chỉnh.

3. Sửa Post model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
        'user_id',
        'category_id',
        'title',
        'slug',
        'image',
        'excerpt',
        'content',
        'status',
        'published_at',
    ];

     protected $casts = [
        'published_at' => 'datetime',
    ];
}

4. Seeder sửa Factory

<?php

namespace Database\Factories;

use App\Models\Model;
use App\Models\User;
use App\Models\Category;
use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends Factory<Model>
 */
class PostFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */

    public function definition(): array
    {
        $status = fake()->randomElement([
            'draft',
            'published',
            'hidden',
            'scheduled',
        ]);

        return [
            // Định nghĩa dữ liệu mẫu
            'title' => fake()->sentence(),

            'slug' => fake()->unique()->slug(),

            'image' => fake()->imageUrl(1200, 800),

            'excerpt' => fake()->paragraph(),

            'content' => fake()->paragraphs(5, true),

            'user_id' => fn () =>
                User::query()->inRandomOrder()->value('id'),

            'category_id' => fn () =>
                Category::query()->inRandomOrder()->value('id'),

            'status' => $status,

            'published_at' => match ($status) {

                'published' =>
                    fake()->dateTimeBetween('-1 year', 'now'),

                'scheduled' =>
                    fake()->dateTimeBetween('now', '+1 month'),

                default => null,
            },
        ];
    }

}

1. create_countries_table
2. create_users_table
3. create_categories_table
4. create_posts_table

php artisan migrate:fresh --seed

public function posts()
{
    return $this->hasMany(Post::class);
}

Category.php

public function posts()
{
    return $this->hasMany(Post::class);
}

Post.php

public function category()
{
    return $this->belongsTo(Category::class);
}

public function user()
{
    return $this->belongsTo(User::class);
}

Đây là ba relationship được sử dụng xuyên suốt dự án.

3. Resource Controller

Tạo controller

php artisan make:controller PostController --resource

Đăng ký route

Route::resource('posts', PostController::class);

Laravel sẽ tạo sẵn:

index
create
store
show
edit
update
destroy

4. Hiển thị danh sách bài viết

Controller

public function index()
{
    //dd(Auth::user());
    //lấy sẵn user để sau này chặn ngay từ view chỉ có admin được xem all posts
    $user = Auth::user();

    $posts = Post::with(['category','user'])
        ->latest()
        ->paginate(10);

    return view('posts.index', compact('posts'));
}

Điểm quan trọng

with()

Laravel sẽ eager loading.

Không xảy ra lỗi N+1 Query.

Chú ý: nhớ kiểm tra route list trước coi đủ 7 món hay không.

php artisan optimize:clear

Kiểm tra:

php artisan route:list --name=posts

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">

        <link rel="stylesheet"
              href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.min.css">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

    <body class="font-sans antialiased">

        <div class="min-h-screen bg-gray-100">

            @include('layouts.navigation')

            <!-- Page Heading -->
            @isset($header)

                <header class="bg-white shadow">

                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">

                        {{ $header }}

                    </div>

                </header>

            @endisset

            <!-- Page Content -->
            <main>

                {{ $slot }}

            </main>

        </div>

    </body>
</html>

import $ from 'jquery';

window.$ = $;
window.jQuery = $;


import DataTable from 'datatables.net';


import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();



//cáu hình cho table posts index blade
const table = document.querySelector('#postsTable');

if (table) {
    new DataTable(table, {
        language: {
            search: "🔍 Tìm kiếm:",
            lengthMenu: "Hiển thị _MENU_ dòng",
            info: "Hiển thị _START_ đến _END_ / _TOTAL_",
            paginate: {
                first: "Đầu",
                last: "Cuối",
                next: "Sau",
                previous: "Trước"
            },
            zeroRecords: "Không tìm thấy dữ liệu",
            emptyTable: "Chưa có dữ liệu"
        }
    });
}

<x-app-layout>

    <div class="py-6">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

            <!-- Header -->
            <div class="mb-6 flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">
                        Quản lý bài viết
                    </h2>

                    <p class="mt-1 text-sm text-gray-500">
                        Danh sách tất cả bài viết trong hệ thống
                    </p>
                </div>

                <a href="{{ route('posts.create') }}"
                   class="inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2.5
                          text-sm font-semibold text-white shadow-sm
                          hover:bg-indigo-700">

                    + Thêm bài viết
                </a>
            </div>


            <!-- Card -->
            <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-200">

                <!-- Card Header -->
                <div class="border-b border-gray-200 px-6 py-4">

                    <div class="flex items-center justify-between">

                        <div>
                            <h3 class="text-lg font-semibold text-gray-800">
                                Danh sách bài viết
                            </h3>

                            <p class="text-sm text-gray-500">
                                Tổng cộng {{ $posts->total() }} bài viết
                            </p>
                        </div>

                    </div>

                </div>


                <!-- Table -->
                <div class="overflow-x-auto">

                    <table class="min-w-full divide-y divide-gray-200">

                        <thead class="bg-gray-50">
                            <tr>

                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    Tiêu đề
                                </th>

                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    Ngày
                                </th>

                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    Tác giả
                                </th>

                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    Danh mục
                                </th>

                                <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    Thao tác
                                </th>

                            </tr>
                        </thead>

                        <tbody class="divide-y divide-gray-200 bg-white">

                            @forelse($posts as $post)

                                <tr class="hover:bg-gray-50">

                                    {{-- TITLE --}}
                                    <td class="px-6 py-4">

                                        <a href="{{ route('posts.show', $post) }}"
                                        class="font-semibold text-gray-800 hover:text-indigo-600">

                                            {{ $post->title }}

                                        </a>

                                    </td>


                                    {{-- DATE --}}
                                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500">

                                        {{ $post->created_at->format('d/m/Y') }}

                                    </td>


                                    {{-- AUTHOR --}}
                                    <td class="whitespace-nowrap px-6 py-4">

                                        @if($post->user)

                                            <span class="text-sm font-medium text-gray-700">
                                                {{ $post->user->name }}
                                            </span>

                                        @else

                                            <span class="text-sm text-gray-400">
                                                —
                                            </span>

                                        @endif

                                    </td>


                                    {{-- CATEGORY --}}
                                    <td class="whitespace-nowrap px-6 py-4">

                                        @if($post->category)

                                            <span class="inline-flex rounded-full
                                                        bg-blue-100 px-3 py-1
                                                        text-xs font-medium text-blue-700">

                                                {{ $post->category->name }}

                                            </span>

                                        @else

                                            <span class="text-sm text-gray-400">
                                                —
                                            </span>

                                        @endif

                                    </td>


                                    {{-- ACTIONS --}}
                                    <td class="whitespace-nowrap px-6 py-4">

                                        <div class="flex justify-end gap-2">

                                            {{-- VIEW --}}
                                            <a href="{{ route('posts.show', $post) }}"
                                            class="rounded-lg bg-gray-100 px-3 py-2
                                                    text-sm font-medium text-gray-700
                                                    hover:bg-gray-200">

                                                Xem

                                            </a>


                                            {{-- EDIT --}}
                                            <a href="{{ route('posts.edit', $post) }}"
                                            class="rounded-lg bg-blue-100 px-3 py-2
                                                    text-sm font-medium text-blue-700
                                                    hover:bg-blue-200">

                                                Sửa

                                            </a>


                                            {{-- DELETE --}}
                                            <form action="{{ route('posts.destroy', $post) }}"
                                                method="POST"
                                                onsubmit="return confirm('Bạn có chắc muốn xóa bài viết này?');">

                                                @csrf
                                                @method('DELETE')

                                                <button type="submit"
                                                        class="rounded-lg bg-red-100 px-3 py-2
                                                            text-sm font-medium text-red-700
                                                            hover:bg-red-200">

                                                    Xóa

                                                </button>

                                            </form>

                                        </div>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="5"
                                        class="px-6 py-12 text-center text-sm text-gray-400">

                                        Chưa có bài viết nào.

                                    </td>

                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                </div>


                <!-- Pagination -->
                @if($posts->hasPages())

                    <div class="border-t border-gray-200 bg-white px-6 py-4">

                        {{ $posts->links() }}

                    </div>

                @endif

            </div>

        </div>
    </div>

</x-app-layout>

5. Hiển thị Relationship

Trong Blade

{{ $post->category->name }}

{{ $post->user->name }}

Không cần viết Query JOIN.

Đó chính là sức mạnh của Eloquent ORM.

6. Form tạo bài viết

Form sẽ có:

• Tiêu đề

• Slug

• Category

• Hình ảnh

• Mô tả ngắn

• Nội dung

Category

<select name="category_id">

@foreach($categories as $category)

<option value="{{ $category->id }}">
    {{ $category->name }}
</option>

@endforeach

</select>

Laravel sẽ lấy toàn bộ Category để người dùng lựa chọn.

Bước 1: sửa hàm store trong PostController

public function store(Request $request)
    {
        $request->validate(
            [
                'title' => 'required|max:255',

                'slug' => [
                    'required',
                    'max:255',
                    'unique:posts,slug',
                ],

                'excerpt' => 'nullable',

                'content' => 'required|string',

                'category_id' => [
                    'nullable',
                    'exists:categories,id',
                ],

                'tags' => 'nullable|array',

                'tags.*' => 'exists:tags,id',

                'image' => [
                    'nullable',
                    'image',
                    'mimes:jpg,jpeg,png,webp',
                    'max:2048',
                ],

                'status' => [
                    'required',
                    'in:draft,published,hidden,scheduled',
                ],

                'published_at' => 'nullable|date',
            ],

            [
                'title.required' => 'Vui lòng nhập tiêu đề.',
                'title.max' => 'Tiêu đề tối đa 255 ký tự.',

                'slug.required' => 'Vui lòng nhập slug.',
                'slug.unique' => 'Slug này đã tồn tại.',
                'slug.max' => 'Slug tối đa 255 ký tự.',

                'content.required' => 'Vui lòng nhập nội dung.',
                'content.min' => 'Nội dung tối thiểu 20 ký tự.',

                'category_id.exists' => 'Danh mục không tồn tại.',

                'tags.array' => 'Tags không hợp lệ.',
                'tags.*.exists' => 'Tag không tồn tại.',

                'image.image' => 'File tải lên phải là hình ảnh.',
                'image.mimes' => 'Ảnh phải có định dạng jpg, jpeg, png hoặc webp.',
                'image.max' => 'Ảnh tối đa 2MB.',

                'status.required' => 'Vui lòng chọn trạng thái.',
                'status.in' => 'Trạng thái không hợp lệ.',

                'published_at.date' => 'Ngày xuất bản không hợp lệ.',
            ]
        );


        /*
        |--------------------------------------------------------------------------
        | Lưu ảnh
        |--------------------------------------------------------------------------
        */

        $image = null;

        if ($request->hasFile('image')) {

            $image = $request
                ->file('image')
                ->store(
                    'posts',
                    'public'
                );
        }


        /*
        |--------------------------------------------------------------------------
        | Published At
        |--------------------------------------------------------------------------
        */

        $publishedAt = $request->published_at;

        // Nếu chọn Published nhưng không nhập ngày
        // thì lấy thời điểm hiện tại
        if (
            $request->status === 'published'
            && empty($publishedAt)
        ) {
            $publishedAt = now();
        }

        
        /*
        |--------------------------------------------------------------------------
        | SANITIZE CONTENT
        |--------------------------------------------------------------------------
        */

        $content = sanitizeHtml($request->content);


        /*
        |--------------------------------------------------------------------------
        | KIỂM TRA NỘI DUNG THỰC
        |--------------------------------------------------------------------------
        */
        //dd($content);

        if (mb_strlen(trim(strip_tags($content))) < 20) {

            return back()
                ->withInput()
                ->withErrors([
                    'content' => 'Nội dung phải có ít nhất 20 ký tự.',
                ]);
        }

        /*
        |--------------------------------------------------------------------------
        | Tạo Post
        |--------------------------------------------------------------------------
        */

        $post = Post::create([

            'user_id' => auth()->id(),

            'category_id' => $request->category_id,

            'title' => $request->title,

            'slug' => $request->slug,

            'image' => $image,

            'excerpt' => $request->excerpt,

            // Lưu HTML đã sanitize 
            'content' => $content,

            'status' => $request->status,

            'published_at' => $publishedAt,

        ]);


        /*
        |--------------------------------------------------------------------------
        | Lưu Tags
        |--------------------------------------------------------------------------
        */

        $post->tags()->sync(
            $request->tags ?? []
        );


        /*
        |--------------------------------------------------------------------------
        | Redirect
        |--------------------------------------------------------------------------
        */

        return redirect()
            ->route('posts.show', $post)
            ->with(
                'success',
                'Bài viết đã được tạo thành công.'
            );
    }
    //END store function

Create Blade Form:

<x-app-layout>

<div class="max-w-3xl mx-auto py-8">

    <x-ui.card
        title="Thêm Bài Viết"
        description="Nhập thông tin bài viết">

        <form
            action="{{ route('posts.store') }}"
            method="POST"
            enctype="multipart/form-data">

            @csrf


            {{-- TITLE --}}
            <x-ui.input
                label="Tiêu đề"
                name="title"
            />

            {{-- SLUG --}}
            <x-ui.input-slug
                label="Slug"
                name="slug"
                source="title"
            />

            {{-- EXCERPT --}}
            <x-ui.textarea
                label="Mô tả ngắn"
                name="excerpt"
                rows="3"
            />

            {{-- CONTENT --}}
            <x-ui.editor
                label="Nội dung"
                name="content"
                height="500px"
            />

            {{-- CATEGORY --}}
            <x-ui.select
                label="Danh mục"
                name="category_id"
                :options="$categories"
            />

            {{-- TAGS --}}
            <x-ui.select
                label="Tags"
                name="tags"
                :options="$tags"
                multiple
            />

            {{-- IMAGE --}}
            <x-ui.file-input
                label="Ảnh đại diện"
                name="image"
            />

            {{-- STATUS --}}
            <x-ui.select
                label="Trạng thái"
                name="status"
                :options="[
                    'draft' => 'Nháp',
                    'published' => 'Xuất bản',
                    'hidden' => 'Ẩn',
                    'scheduled' => 'Lên lịch',
                ]"
            />

            {{-- PUBLISHED AT --}}
            <x-ui.input
                label="Ngày xuất bản"
                name="published_at"
                type="datetime-local"
            />


            <div class="mt-6">

                <x-ui.button>
                    Lưu bài viết
                </x-ui.button>

            </div>

        </form>

    </x-ui.card>
    <!--card chứa form-->

</div>

</x-app-layout>

abc

7. Validation(---)

$request->validate([
    'title'=>'required|max:255',
    'slug'=>'required|unique:posts',
    'category_id'=>'required|exists:categories,id',
    'image'=>'nullable|image|max:2048',
    'content'=>'required'
]);

Laravel sẽ kiểm tra:

• tiêu đề bắt buộc

• slug không được trùng

• category phải tồn tại

• chỉ nhận ảnh

• dung lượng tối đa

• nội dung không được rỗng

8. Upload hình ảnh

Form

enctype="multipart/form-data"

Controller

$image = null;

if($request->hasFile('image')){

    $image = $request->file('image')
        ->store('posts','public');

}

Kết quả

storage/app/public/posts/

abc123.jpg

xyz456.png

Laravel sẽ tự sinh tên file ngẫu nhiên để tránh trùng.

9. Lưu dữ liệu

Post::create([

    'user_id'=>auth()->id(),

    'category_id'=>$request->category_id,

    'title'=>$request->title,

    'slug'=>$request->slug,

    'image'=>$image,

    'excerpt'=>$request->excerpt,

    'content'=>$request->content

]);

Tác giả sẽ được lấy từ

auth()->id()

Người dùng không thể giả mạo tác giả bài viết.

10. Hiển thị ảnh

Blade

<img src="{{ asset('storage/'.$post->image) }}">

Đừng quên tạo symbolic link

php artisan storage:link

Sau khi chạy lệnh này, Laravel sẽ tạo

public/storage

trỏ tới

storage/app/public

11. Cập nhật bài viết

Nếu người dùng chọn ảnh mới

Storage::disk('public')->delete($post->image);

sau đó upload lại.

Nếu không chọn ảnh

Laravel vẫn giữ ảnh cũ.

Đây là cách xử lý được sử dụng trong hầu hết các CMS hiện nay.

12. Xóa bài viết

Khi xóa

Storage::disk('public')->delete($post->image);

$post->delete();

Không nên để file ảnh bị "mồ côi" trong thư mục Storage.

13. Giao diện quản trị

Danh sách nên hiển thị

• Thumbnail

• Tiêu đề

• Danh mục

• Tác giả

• Ngày tạo

• Trạng thái

• Nút Edit

• Nút Delete

Có thể kết hợp:

• Tailwind CSS

• DataTables.net

• Badge màu

• Icon Heroicons

• Xác nhận trước khi xóa

Đây cũng là giao diện mà chúng ta sẽ sử dụng xuyên suốt các module còn lại.

Nếu sau khi chỉnh sửa giao diện mà k thay đổi gì phải chạy npm run build

14. Kết quả đạt được

Sau bài học này, Blog CMS đã có module quản lý bài viết hoàn chỉnh.

✔ Thêm bài viết

✔ Sửa bài viết

✔ Xóa bài viết

✔ Upload ảnh

✔ Relationship User

✔ Relationship Category

✔ Validation

✔ Hiển thị ảnh

✔ Phân trang

✔ Quản lý tác giả

Đây là một module CRUD thực tế mà bạn sẽ gặp trong hầu hết các hệ thống quản trị nội dung sử dụng Laravel.

Tổng kết

Trong bài học này chúng ta đã kết hợp rất nhiều kiến thức đã học trước đó:

• Resource Controller để xây dựng CRUD nhanh chóng.

• Eloquent Relationship để liên kết Post với Category và User.

• Validation để đảm bảo dữ liệu hợp lệ.

• Storage để quản lý hình ảnh.

• Authentication để tự động gán tác giả cho bài viết.

• Pagination giúp danh sách bài viết dễ theo dõi khi số lượng tăng lên.

Đến thời điểm này, dự án Blog CMS đã gần hoàn chỉnh và có cấu trúc tương tự nhiều hệ thống quản trị nội dung được sử dụng trong thực tế.

Bài tiếp theo

Ở Bài 28 — CRUD Users, chúng ta sẽ xây dựng module quản lý người dùng dành cho quản trị viên:

• Danh sách User

• Chỉnh sửa thông tin

• Thay đổi Role (Admin/User)

• Khóa hoặc mở khóa tài khoản

• Đặt lại mật khẩu

Sau bài này, Blog CMS sẽ có đầy đủ ba module quản trị cốt lõi: Categories, Posts và Users.

Ở bài trước, chúng ta điều khiển động cơ bằng cách:

Quay 1 giây

↓

Dừng

Cách này hoạt động khá tốt để thử nghiệm.

Nhưng nếu muốn máy hoạt động liên tục ngoài thực tế thì không đủ chính xác.

Mục tiêu

Sau bài này bạn sẽ:

• Hiểu vì sao không nên điều khiển bằng delay().

• Biết Encoder là gì.

• Biết Hall Sensor hoạt động như thế nào.

• Chọn loại cảm biến phù hợp.

• Điều khiển động cơ quay đúng một vòng.

  

Vì sao delay() không chính xác?

Giả sử hôm nay:

Motor

30 RPM

↓

1 giây

↓

Quay đúng 180°

Một tuần sau:

• Adapter yếu hơn.

• Lon nặng hơn.

• Nhiệt độ cao hơn.

Kết quả:

1 giây

↓

Chỉ quay 150°

Hoặc:

1 giây

↓

Quay 220°

Máy sẽ:

❌ Kẹt hàng

❌ Rơi 2 lon

❌ Không rơi lon nào

Máy thương mại làm thế nào?

Không ai đo thời gian.

Họ đo:

Vị trí của trục

Ví dụ:

0°

↓

45°

↓

90°

↓

180°

↓

360°

Khi đạt đúng vị trí yêu cầu:

Motor dừng.

Encoder là gì?

Encoder giống như chiếc đồng hồ đếm vòng quay.

Ví dụ:

Motor

↓

Encoder

↓

ESP32

Encoder sẽ phát ra xung.

Ví dụ:

1 vòng

=

200 xung

ESP32 chỉ cần đếm.

Điều khiển bằng Encoder

Ví dụ:

Đếm

0

↓

50

↓

100

↓

150

↓

200

↓

Dừng

Không quan trọng:

• Motor nhanh.

• Motor chậm.

Miễn đủ:

200 xung

Có những loại Encoder nào?

1. Optical Encoder

Dùng đĩa có nhiều khe.

LED

↓

||||||||||

↓

Sensor

Độ chính xác cao.

2. Magnetic Encoder

Dùng nam châm.

Nam châm

↓

Hall Sensor

Rẻ.

Bền.

Ít bụi.

3. Encoder tích hợp

Một số motor đã có sẵn encoder phía sau.

Đây là lựa chọn rất tốt nếu ngân sách cho phép.

Hall Sensor

Đây là loại mình khuyến nghị cho khóa học.

Ví dụ:

Motor

↓

Nam châm

↓

Hall Sensor

Mỗi lần nam châm đi qua:

Sensor phát:

HIGH

LOW

HIGH

LOW

ESP32 chỉ cần đếm.

Gắn Hall Sensor

          Nam châm

              ●

==============

Hall Sensor

Mỗi vòng quay:

Nam châm đi ngang qua Hall Sensor một lần.

Nếu muốn chính xác hơn

Gắn:

● ● ● ●

4 nam châm.

Khi đó:

1 vòng

=

4 xung

Hoặc:

8 nam châm

=

8 xung

Độ chính xác sẽ tăng lên.

Kết nối ESP32

Ví dụ:

Hall Sensor

VCC → 3.3V

GND → GND

OUT → GPIO27

Đọc tín hiệu

Ví dụ:

volatile int count = 0;

void IRAM_ATTR pulse() {
    count++;
}

void setup() {

    pinMode(27, INPUT_PULLUP);

    attachInterrupt(27, pulse, FALLING);

}

Mỗi xung:

count++

Điều khiển

Giả sử:

4 xung

=

1 vòng

Thuật toán:

count = 0

↓

Motor chạy

↓

Đếm xung

↓

Đủ 4

↓

Motor dừng

Không cần dùng:

delay()

nữa.

Cảm biến phát hiện lon rơi

Máy thương mại luôn có thêm cảm biến ở khay nhận hàng.

Ví dụ:

Lon

↓

IR Sensor

↓

ESP32

Nếu:

Lon đã rơi.

ESP32 sẽ biết.

Tại sao cần cảm biến này?

Nếu:

Motor quay.

Nhưng:

Lon bị kẹt.

Thì:

Encoder

OK

Nhưng

Không có lon.

Máy sẽ:

• Báo lỗi.

• Hoàn tiền.

• Thử quay lại.

Sơ đồ hoàn chỉnh

Button

↓

ESP32

↓

Motor Driver

↓

Motor

↓

Encoder

↓

ESP32

↓

IR Sensor

↓

ESP32

Bây giờ hệ thống đã có:

• Đầu vào.

• Điều khiển.

• Phản hồi.

Đây gọi là:

Closed Loop Control (Điều khiển vòng kín)

Khác với bài trước:

Button

↓

Motor

↓

Hết

Đó là:

Open Loop

Mô phỏng hoạt động

Khách bấm

↓

Motor quay

↓

Encoder báo

↓

Đủ 1 vòng

↓

Motor dừng

↓

Lon rơi

↓

IR Sensor xác nhận

↓

Hoàn thành

Nếu:

Không thấy lon

↓

ESP32 báo lỗi

↓

Hiển thị:

"Sản phẩm bị kẹt"

Chuẩn bị phần cứng

Bài tập

1. Gắn một nam châm nhỏ lên trục động cơ hoặc khớp nối.

2. Đặt Hall Sensor cách nam châm khoảng 2–5 mm.

3. Viết chương trình đếm số xung khi động cơ quay.

4. Thử tăng số nam châm từ 1 lên 4 và so sánh độ chính xác.

5. Gắn cảm biến hồng ngoại ở khay nhận hàng để phát hiện khi một lon nước rơi xuống.

Tổng kết

Sau bài này, chiếc máy của bạn đã chuyển từ mô hình điều khiển theo thời gian sang điều khiển có phản hồi, gần giống nguyên lý của các máy bán hàng tự động chuyên nghiệp.

Bạn đã biết:

• Vì sao delay() không phù hợp cho sản phẩm thực tế.

• Cách dùng Hall Sensor hoặc Encoder để xác định vị trí quay.

• Vai trò của cảm biến xác nhận sản phẩm.

• Khái niệm điều khiển vòng hở và vòng kín.

Bài tiếp theo

🥤 Bài 6 — Thiết kế phần mềm điều khiển: State Machine

Thay vì viết các câu lệnh if...else dài và khó bảo trì, chúng ta sẽ xây dựng chương trình theo mô hình State Machine, giúp máy xử lý rõ ràng các trạng thái như Chờ khách, Thanh toán, Nhả hàng, Kiểm tra cảm biến, Hoàn tất và Báo lỗi. Đây cũng là cách tổ chức phần mềm được sử dụng phổ biến trong các thiết bị nhúng và máy bán hàng thương mại.