Giai đoạn 4 · B25–B32 · 8 buổi cuối

Cất nóc rồi bàn giao lên Internet.

Một Mini-CRM chỉ thật sự có giá trị khi người giám sát mở được nó giữa công trường, trên chiếc iPhone đang có trong túi. Tám buổi cuối nối việc deploy với cách kể đúng câu chuyện của một công ty Remodeling.

Xem lộ trình 8 buổi Làm checkpoint

Ranh giới thực dụng: trang này mô phỏng checklist, URL và luồng kiểm thử. Không đưa mật khẩu, không giả vờ đã deploy server thật, không cam kết email, thanh toán hay đăng nhập ngoài khả năng của môi trường.

Minh họa các bậc triển khai từ máy tính cá nhân lên Server, Ubuntu VPS, Streamlit Cloud rồi lên iPhone — Cùng một App: từ máy cá nhân → Server → Ubuntu VPS hoặc Streamlit Cloud → màn hình iPhone.

Mô hình “cất nóc”

Đường đi của một ứng dụng

4 tháng · 32 buổi · 1 giờ/buổi

Trong ba giai đoạn trước, ta đã dựng tool báo giá, xử lý Excel/CSV, tạo SQLite và ghép Mini-CRM bằng Streamlit. Giai đoạn này không học để khoe thuật ngữ: mỗi bậc trả lời một câu hỏi của công trường — ai chạy app, app ở đâu, dữ liệu đi thế nào và người dùng có dùng được không?

01 · Nền

Máy cá nhân

Nơi viết và chạy thử code. Phù hợp để sửa nhanh, nhưng người khác không tự truy cập được.

02 · Môi trường

Server

Máy cung cấp môi trường để ứng dụng chạy và được truy cập qua mạng.

03 · Xuất bản

VPS / Cloud

Ubuntu VPS cần chuẩn bị và bảo vệ; Streamlit Cloud là đường xuất bản thuận tiện cho Mini-CRM.

04 · Bàn giao

iPhone

Điểm kiểm chứng cuối: mở, nhập, xem trạng thái và thao tác được dưới ánh sáng công trường.

B25 → B32

Tám buổi, hai sản phẩm cuối khóa

Tuần 13–14Cất Nóc & Deploy

B25
Mô hình triển khaiServer là môi trường để ứng dụng chạy và được truy cập; vẽ đường đi từ code đến người dùng.
B26
Ubuntu VPSChuẩn bị môi trường, cập nhật, kiểm tra quyền truy cập và giữ bí mật thông tin đăng nhập.
B27
Streamlit CloudĐưa Mini-CRM Streamlit lên môi trường có thể truy cập; phân biệt xuất bản với “đã kiểm thử xong”.
B28
Tối ưu & phát hànhKiểm tra giao diện, luồng dữ liệu và thao tác thực tế trên màn hình nhỏ.

Sản phẩm:
Đưa App lên Online

Bằng chứng:
Checklist + kiểm thử iPhone

Tuần 15–16Tờ Rơi Kỹ Thuật Số

B29
Cấu trúc HTMLĐịnh nghĩa cấu trúc và nội dung: tiêu đề, phần, danh sách, nút và liên kết.
B30
CSS cơ bảnĐiều khiển kiểu dáng và bố cục để trang đọc được, đặc biệt trên điện thoại.
B31
Đọc Landing Page đối thủPhân tích cấu trúc, thông điệp, bằng chứng và lời kêu gọi hành động; không sao chép nội dung.
B32
Định hình thông điệpGhép dịch vụ, giá trị, bằng chứng và hành động tiếp theo cho công ty Remodeling.

Sản phẩm:
Thiết kế Landing Page

Bằng chứng:
Wireframe + cấu trúc HTML/CSS

Làm như người bàn giao

Hai worked example trước khi bấm “phát hành”

Checklist Mini-CRM

Không nhầm “chạy được” với “dùng được”

Môi trường: app khởi động, thư viện đúng, URL mẫu mở được.
Luồng dữ liệu: nhập khách hàng → lưu → đọc lại → trạng thái công trình còn đúng.
Giao diện: bảng không tràn ngang, nút đủ lớn, lỗi nhập liệu có thông báo.
Thiết bị: kiểm tra bằng khung nhỏ trước, sau đó mở trực tiếp trên iPhone.
Bảo mật: không đặt mật khẩu, token hoặc thông tin khách hàng thật vào code mẫu.

Trình kiểm tra responsive

Đổi kích thước, nhìn thấy lỗi trước khách hàng

Chiều rộng khung: 390px

Mini-CRM09:41

Công trình đang theo dõi

Nguyễn Minh · Sơn bếpThi công

Trần Hà · Cải tạo phòng tắmKhảo sát

Lê An · Bàn giaoHoàn tất

Giám sát công trường dùng Mini-CRM trên iPhone với danh sách dự án và trạng thái — Tình huống bàn giao: người giám sát cần xem trạng thái nhanh, không cần mang cả laptop ra công trường.

Playground · code dưới 15 dòng

Thử ý tưởng, không giả vờ deploy

Các đoạn dưới đây chỉ giúp kiểm tra tư duy và cấu trúc. URL là mẫu; nút không gửi dữ liệu ra ngoài. Khi làm bài thật, thay checklist bằng quy trình phát hành phù hợp với môi trường của đội.

Python · kiểm tra cấu hình

Biến “thiếu cấu hình” thành lỗi dễ đọc

Trong một ứng dụng có database, thông báo rõ ràng tốt hơn một lỗi mơ hồ. Không đặt secret thật vào đoạn mẫu.

config = {"app": "mini-crm", "db": "sqlite"}
required = ["app", "db"]
missing = [k for k in required if not config.get(k)]
if missing:
    print("Thiếu:", ", ".join(missing))
else:
    print("Cấu hình cơ bản đã đủ")

HTML/CSS · sửa trực tiếp

Bản xem trước là thao tác cục bộ trong trình duyệt.

B32 · cấu trúc thông điệp

Kéo Landing Page từ dịch vụ đến CTA

Một Landing Page Remodeling không cần nói mọi thứ cùng lúc. Nó cần dẫn người xem qua đúng thứ tự: công ty làm gì, kết quả có ý nghĩa ra sao, vì sao nên tin và bước tiếp theo là gì.

Hero

Cải tạo không gian sống, theo một quy trình bạn nhìn thấy được.

Giới thiệu rõ dịch vụ Remodeling và phạm vi công việc trước khi dùng thuật ngữ kỹ thuật.

Lời hứa

Biết hôm nay đang ở bước nào, biết bước kế tiếp là gì.

Giá trị không chỉ là “đẹp hơn”, mà là tiến độ và quyết định trở nên dễ theo dõi hơn.

Bằng chứng

Cho xem quy trình, ảnh công việc và cách cập nhật.

Phân tích đối thủ để nhận ra bằng chứng cần có; học cấu trúc, không sao chép nội dung hay nhận diện.

Hành động

Đặt lịch khảo sát cho không gian của bạn.

CTA nên nói rõ bước tiếp theo, thay vì chỉ để một nút “Gửi” không có ngữ cảnh.

Wireframe Landing Page cho công ty Remodeling gồm phần mở đầu, dịch vụ, quy trình, bằng chứng và lời kêu gọi liên hệ — Wireframe là bản vẽ để kiểm tra thứ tự thông điệp trước khi tốn thời gian làm đẹp bằng CSS.