Giai đoạn 3 · Tháng 3 · B17–B24

Từ code chạy trong Terminal đến Mini-CRM nằm gọn trên điện thoại.

Tám buổi học không tạo thêm một demo xa lạ. Bạn nâng cấp chính Tool Báo Giá Lát Sàn, Hệ Thống Tiến Độ và dữ liệu khách hàng thành giao diện Web trực quan, có báo cáo, bộ lọc và đường ống lưu trữ thật.

Nguyên tắc của chương trình: thực dụng, dùng ngôn ngữ xây dựng, code dưới 15 dòng khi có thể — mỗi buổi phải tạo ra một mảnh dùng được trong công việc.

Mockup giao diện Streamlit báo giá lát sàn trên màn hình điện thoại, có chiều dài, chiều rộng, đơn giá USD và nút tính báo giá

Mục tiêu giai đoạn

Biến logic thành một mặt tiền dễ dùng.

8 buổi · 4 tuần

Người giám sát cần thấy gì?

Không phải một màn hình đầy thuật ngữ. Họ cần nhập số đo nhanh, nhận báo giá rõ, nhìn thấy công trình đang ở bước nào và biết bản ghi khách hàng đã đi vào đâu.

  • 01Nhập liệu có chủ đích. Ô nhập chiều dài, chiều rộng và đơn giá thay cho việc sửa code bằng tay.
  • 02Kết quả có phản hồi. Nút bấm kích hoạt logic Python khi người dùng thực sự yêu cầu tính toán.
  • 03Báo cáo để quyết định. Table, biểu đồ và bộ lọc đưa danh sách dự án ra khỏi file rời rạc.
  • 04Dữ liệu không thất lạc. SQLite nhận bản ghi từ Web để Mini-CRM có thể báo cho chủ thầu.
B17–B19Mặt tiền Showroom
B20–B22Bảng Báo Cáo Visual
B23–B24Ghép nối hệ thống

Đường đi của một bản ghi tốt: input → Python logic → output → lưu trữ.

Hãy kiểm tra từng mũi tên, thay vì chỉ nhìn thấy một giao diện đẹp.

Bản vẽ thi công

Lộ trình 8 buổi: mỗi tuần dựng một lớp.

Từ widget nhỏ đến hệ thống có dữ liệu. Các sản phẩm của Giai đoạn 1 và Giai đoạn 2 là vật liệu đầu vào, không bị bỏ lại phía sau.

BUỔI 17

Giao diện Streamlit

Khởi tạo mặt tiền Web với nút bấm và ô nhập. Xác định dữ liệu nào người dùng cần cung cấp, dữ liệu nào do chương trình tính.

Sản phẩm tại chỗ

Form nhập chiều dài, chiều rộng, đơn giá USD.

BUỔI 18

Bố cục và phản hồi

Sắp xếp nội dung để người dùng đọc được trên điện thoại; phản hồi kết quả ngay sau thao tác, không để nút bấm “im lặng”.

Sản phẩm tại chỗ

Màn hình báo giá có vùng kết quả rõ ràng.

BUỔI 19

Tích hợp logic Python vào Web

Đưa Tool Báo Giá Lát Sàn của Giai đoạn 1 lên giao diện. Logic vẫn là tính Sqft rồi nhân đơn giá USD; Web chỉ trở thành cách tương tác mới.

Sản phẩm tại chỗ

Web Báo Giá Lát Sàn.

BUỔI 20

Hiển thị bảng Table

Đưa danh sách công trình vào một cấu trúc dễ quét, thay vì bắt người quản lý đọc từng dòng trong Terminal.

Sản phẩm tại chỗ

Bảng dự án với trạng thái và thông tin cần theo dõi.

BUỔI 21

Hiển thị biểu đồ

Dùng biểu đồ để nhìn phân bố và xu hướng trạng thái dự án, không dùng biểu đồ chỉ để trang trí.

Sản phẩm tại chỗ

Visual báo cáo cho chủ thầu.

BUỔI 22

Lọc dữ liệu trên Web

Bộ lọc thay đổi phần dữ liệu đang hiển thị theo điều kiện chọn; nó không tự ý thay đổi cấu trúc SQLite vĩnh viễn.

Sản phẩm tại chỗ

Dashboard Quản Lý với danh sách công trình đang kẹt tiến độ.

BUỔI 23

Kết nối Web với SQLite

Thiết lập điểm giao tiếp để giao diện đọc và ghi dữ liệu giữa lớp Web và database.

Sản phẩm tại chỗ

Bản ghi khách hàng và dự án có nơi lưu trữ.

BUỔI 24

Xử lý luồng dữ liệu tự động

Hoàn thiện luồng nhập thông tin khách trên Web → tự động lưu vào Database → báo cho chủ thầu.

Sản phẩm hoàn tất

Mini-CRM dùng được trên điện thoại.

Worked example 01 · B17–B19

Cùng một logic, hai mặt tiền.

Trong Terminal, người học nhập số đo rồi chương trình tính Sqft và nhân đơn giá USD. Khi chuyển sang Streamlit, logic tính toán không bị viết lại thành một “mẹo giao diện”: nó được đặt sau sự kiện của nút Tính báo giá.

InputChiều dài · chiều rộng · đơn giá
LogicSqft × đơn giá USD
OutputBáo giá đọc được trên điện thoại
Giao diện Web báo giá lát sàn trên điện thoại
Mặt tiền mới, logic cũ đã được kiểm chứng ở Giai đoạn 1.
Input → logic → output

Web Báo Giá Lát Sàn

Ô nhập nhận số đo; nút bấm là thời điểm chạy logic; vùng kết quả cho người dùng thấy diện tích và báo giá. Kiểm tra dữ liệu nhập trước khi tính để tránh kết quả vô nghĩa.

length = st.number_input("Chiều dài")
width = st.number_input("Chiều rộng")
price = st.number_input("Đơn giá USD")
if st.button("Tính báo giá"):
    sqft = length * width
    st.write(sqft * price)
Hiển thị → lọc → quyết định

Dashboard Quản Lý

Table dành cho danh sách. Biểu đồ dành cho phân bố trạng thái. Bộ lọc giúp chủ thầu tập trung vào các công trình đang kẹt tiến độ mà không làm thay đổi dữ liệu gốc.

st.dataframe(projects)
st.bar_chart(status_counts)
status = st.selectbox(
    "Lọc trạng thái", statuses
)
st.dataframe(projects[
    projects["status"] == status
])
Web → SQLite

Thêm một bản ghi có trách nhiệm

Ở B23–B24, form không chỉ hiện thông báo thành công. Dữ liệu phải đi qua thao tác ghi vào SQLite, sau đó có thể đọc lại để danh sách phản ánh đúng trạng thái.

customer = {
    "name": name,
    "phone": phone,
    "status": "Khảo sát"
}
save_to_sqlite(customer)
st.success("Đã lưu khách hàng")
Đèn cảnh báo

Đọc dashboard như người quản lý

Vùng đánh dấu công trình kẹt tiến độ là tín hiệu hành động: chọn điều kiện lọc, xem bản ghi liên quan, rồi cập nhật trạng thái qua luồng dữ liệu đã thiết kế.

st.metric("Đang kẹt",
          stalled_count)
st.warning(
    "Cần theo dõi hôm nay"
)

Worked example 02 · B23–B24

Mini-CRM là một đường ống, không phải một nút “Lưu”.

Khi khách để lại thông tin, bản ghi cần đi qua đủ ba điểm: biểu mẫu Web nhận dữ liệu, SQLite lưu dữ liệu, dashboard đọc lại và báo cho chủ thầu.

01 · Nhận

Biểu mẫu Web

Tên khách, thông tin liên hệ và trạng thái ban đầu “Khảo sát”.

02 · Lưu

SQLite

Bản ghi đi vào bảng KhachHang hoặc DuAn thay vì nằm tạm trong màn hình.

03 · Báo

Mini-CRM

Danh sách, bộ lọc và tín hiệu kẹt tiến độ giúp chủ thầu biết việc cần làm.

Sơ đồ luồng Mini-CRM từ biểu mẫu Web qua SQLite đến danh sách và trạng thái dự án
Đường ống dữ liệu: nhập trên Web → lưu SQLite → hiển thị trạng thái.

Playground · mô phỏng rõ ràng

Thử công tắc Terminal ↔ điện thoại.

Khối dưới đây là mô phỏng client-side của luồng input → Python logic → output. Nó không giả vờ đã kết nối Streamlit server hay SQLite; mục tiêu là nhìn thấy cách cùng một công thức phản hồi khi người dùng thay đổi số đo.

Nhập ba giá trị, bấm nút, rồi kiểm tra kết quả. Khi xây ứng dụng thật, bạn sẽ thay lớp mô phỏng này bằng widget Streamlit và hàm báo giá đã đóng gói ở Giai đoạn 1.

Chưa chạy phép tính.

Bản xem trước sản phẩm

Dashboard phải làm lộ ra việc cần làm.

Ở B20–B22, bảng và biểu đồ bổ sung cho nhau: bảng giữ chi tiết từng công trình; biểu đồ cho thấy phân bố trạng thái; bộ lọc biến một màn hình tổng quát thành danh sách hành động.

Đèn cảnh báo không thay thế phán đoán của người giám sát. Nó chỉ rút ngắn khoảng cách từ dữ liệu đến câu hỏi: công trình nào đang kẹt, và bản ghi nào cần được cập nhật?

Dashboard quản lý công trình có bảng dự án, biểu đồ trạng thái và vùng đánh dấu công trình đang kẹt tiến độ
Bảng để tra cứu, biểu đồ để nhìn xu hướng, bộ lọc để tập trung.

Checkpoint B17–B24

Kiểm tra đúng kỹ năng, không đoán mò.

Tám câu hỏi tương ứng với tám kỹ năng. Chọn một đáp án cho mỗi câu. Kết quả được chấm ngay trên trang và checkpoint được lưu dưới dạng assessmentEntry để theo dõi kỹ năng.

8 câu · 8 điểm
B17widget nhập liệu

Thành phần nào nhận chiều dài từ người dùng trong một form Streamlit?

B18sự kiện nút bấm

Vì sao dùng nút “Tính báo giá”?

B19tích hợp logic

Kết quả Web Báo Giá Lát Sàn phải dùng lại điều gì từ sản phẩm trước?

B20hiển thị bảng

Thành phần phù hợp để xem danh sách công trình là gì?

B21biểu đồ trạng thái

Biểu đồ giúp người quản lý nhìn thấy điều gì?

B22lọc giao diện

Bộ lọc trên Web nên thay đổi điều gì?

B23kết nối SQLite

Mục tiêu của kết nối giữa giao diện Web và SQLite là gì?

B24luồng dữ liệu

Sau khi nhập thông tin khách, Mini-CRM cần làm gì?

Kết quả của bạn
0/8

Tạo bài sửa lỗi

✓ Checkpoint đã được lưu.