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.

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–B28)

  • B25
    Mô hình triển khai: Từ máy cá nhân lên đám mây Hiểu bản chất Server là máy chủ hoạt động 24/7. Phân biệt môi trường phát triển (Localhost) và môi trường công cộng (Internet) để thợ và chủ nhà truy cập được.
    📋 Giáo án Giảng viên & Thực hành B25 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Tình huống: Tắt laptop thì web trên điện thoại có mở được không? ⏱️ 25' Live Code: Kiến trúc Client-Server, Port mạng, requirements.txt ⏱️ 20' Thực hành: Đóng gói danh mục thư viện phụ thuộc ⏱️ 5' Nghiệm thu & Giải đáp

    Mục tiêu: Học viên hiểu đường đi từ code Python trên máy tính → GitHub Repository → Cloud Server → Màn hình điện thoại; tạo file requirements.txt chuẩn.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Thiếu file requirements.txt: Server không biết máy học viên cài những thư viện gì nếu không có file này. Giảng viên hướng dẫn: "File requirements.txt giống như bảng kê vật liệu gửi cho nhà máy".

    🛠️ Bài tập thực hành tại lớp

    Bài 1 (Cơ bản): Tạo file requirements.txt chứa các thư viện cần thiết: streamlit, pandas.
    Bài 2 (Thực chiến nâng cao): Dùng lệnh Terminal pip freeze > requirements.txt để tự động xuất phiên bản chính xác các gói thư viện đang cài đặt.
    Cấu hình triển khai · File chuẩn B25requirements.txt
    # BUỔI 25: FILE DANH MỤC THƯ VIỆN BẮT BUỘC KHI DEPLOY
    streamlit>=1.28.0
    pandas>=2.0.0
    # Lưu ý: sqlite3 đã tích hợp sẵn trong Python, không cần khai báo
    # Kiểm tra danh mục cài đặt trong Terminal: pip install -r requirements.txt ✅ Môi trường sẵn sàng cho việc xuất bản lên Server!
  • B26
    Làm quen Ubuntu VPS & Dòng lệnh Linux cơ bản Làm quen với hệ điều hành máy chủ phổ biến nhất thế giới: Các lệnh sống còn ssh, ls, cd, quản lý tiến trình nền và giữ bí mật thông tin tài khoản.
    📋 Giáo án Giảng viên & Thực hành B26 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Tình huống: Thuê máy chủ đám mây giá rẻ 5$/tháng ⏱️ 25' Live Code: Lệnh Linux SSH, mkdir, git clone, chạy nền nohup / tmux ⏱️ 20' Thực hành: Viết kịch bản tự động khởi chạy app ⏱️ 5' Nghiệm thu & Lưu ý bảo mật

    Mục tiêu: Học viên không sợ màn hình đen của Linux; biết cách kết nối SSH và chạy ứng dụng Streamlit ở chế độ nền (background process).

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Tắt cửa sổ SSH làm tắt luôn App: Nếu chạy streamlit run app.py thông thường, khi đóng cửa sổ terminal thì app cũng chết theo! Dạy lệnh nohup streamlit run app.py & hoặc dùng tmux để giữ app luôn sống.

    🛠️ Bài tập thực hành tại lớp

    Bài 1 (Cơ bản): Viết kịch bản dòng lệnh Linux tải mã nguồn từ GitHub về thư mục /var/www/remodeling-crm.
    Bài 2 (Thực chiến nâng cao): Viết lệnh mở cổng mạng firewall (UFW) cho cổng 8501: sudo ufw allow 8501.
    Bash Shell · Kịch bản chạy trên máy chủ VPS B26deploy_vps.sh
    #!/bin/bash
    # BUỔI 26: KỊCH BẢN TỰ ĐỘNG CHUẨN BỊ MÁY CHỦ UBUNTU
    echo "=== BẮT ĐẦU THIẾT LẬP MÁY CHỦ REMODELING CRM ==="
    
    # 1. Cập nhật hệ điều hành
    sudo apt update && sudo apt upgrade -y
    
    # 2. Cài đặt Python và Pip
    sudo apt install -y python3-pip python3-venv git
    
    # 3. Tạo môi trường ảo và cài đặt thư viện
    python3 -m venv venv
    source venv/bin/activate
    pip install -r requirements.txt
    
    # 4. Mở cổng mạng tường lửa cho Streamlit
    sudo ufw allow 8501/tcp
    
    # 5. Khởi động app chạy nền độc lập
    nohup streamlit run mini_crm_app.py --server.port 8501 --server.address 0.0.0.0 > app.log 2>&1 &
    echo "✅ App đang chạy nền tại cổng 8501! Kiểm tra nhật ký: tail -f app.log"
    # Kết quả: Máy chủ VPS sẵn sàng phục vụ 24/7.
  • B27
    Xuất bản lên Streamlit Cloud (Miễn phí & Nhanh gọn) Giải pháp xuất bản tối ưu nhất cho giám sát xây dựng: Kết nối tài khoản GitHub với share.streamlit.io để biến code thành một đường link web chính thức có bảo mật SSL HTTPS.
    📋 Giáo án Giảng viên & Thực hành B27 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Tình huống: Gửi link cho chủ thầu bấm vào xem ngay ⏱️ 25' Live: Tạo repo GitHub, đăng nhập share.streamlit.io, chọn nhánh main ⏱️ 20' Học viên deploy Mini-CRM của riêng mình ⏱️ 5' Nhận link web công khai & Kiểm tra

    Mục tiêu: Mỗi học viên có 1 đường link web cá nhân (dạng https://ten-hoc-vien-crm.streamlit.app) mở được trên bất kỳ thiết bị nào.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Lỗi ModuleNotFoundError trên Cloud: Xảy ra khi học viên quên commit file requirements.txt lên GitHub. Dặn học viên kiểm tra kỹ trên trang github.com trước khi bấm Deploy.

    🛠️ Bài tập thực hành tại lớp

    Quy trình thực hành 3 bước:
    1. Push mã nguồn hoàn chỉnh lên GitHub repository: git add . && git commit -m "Deploy CRM" && git push
    2. Truy cập https://share.streamlit.io, bấm "New App".
    3. Chọn Repository, Branch main, Main file path mini_crm_app.py và bấm "Deploy!".
    Checklist cấu hình xuất bản Cloud B27deploy_checklist.txt
    # CHECKLIST XUẤT BẢN STREAMLIT CLOUD THÀNH CÔNG:
    [✓] Kho chứa GitHub đã được đặt ở chế độ Public hoặc cấp quyền.
    [✓] Tệp chính nằm ở thư mục gốc: mini_crm_app.py
    [✓] Tệp khai báo thư viện: requirements.txt (có streamlit, pandas)
    [✓] Tệp dữ liệu mẫu: khach_hang.csv hoặc cong_trinh.db đã được đẩy lên.
    [✓] Đường link công khai hoàn tất: https://cong-trinh-crm.streamlit.app
    # Trạng thái trên Streamlit Cloud: Status: Running 🟢 | HTTPS Secured 🔒
  • B28
    Tối ưu & Nghiệm thu trải nghiệm trên iPhone Kiểm tra thực tế thao tác dưới ánh sáng ngoài công trường: Nút bấm đủ to cho ngón tay chạm, font chữ tương phản cao, hướng dẫn thêm Web App ra màn hình chính (Add to Home Screen) như một Native App.
    📋 Giáo án Giảng viên & Thực hành B28 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Cầm điện thoại mở trực tiếp link vừa deploy ⏱️ 25' Live: Tối ưu UI mobile, kiểm tra tốc độ tải mạng 4G/5G ⏱️ 20' Thao tác thêm biểu tượng icon vào màn hình iPhone ⏱️ 5' Tổng kết hoàn thành sản phẩm Deploy

    Mục tiêu: Học viên tự tay mở app trên điện thoại của mình, thêm phím tắt Home Screen và thử nhập 1 công trình thực tế ngoài sân.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Thao tác Add to Home Screen: Hướng dẫn trên trình duyệt Safari của iPhone: Bấm nút Share (hình vuông có mũi tên trỏ lên) → Chọn "Add to Home Screen" (Thêm vào MH chính). App sẽ có icon chuyên nghiệp và mở toàn màn hình không có thanh địa chỉ Safari!

    🛠️ Bài tập thực hành tại lớp

    Bài tập nghiệm thu: Mở iPhone/Android, truy cập URL Cloud của bạn. Nhập thông tin 1 căn hộ thực tế, kiểm tra số tiền tính toán và chụp ảnh màn hình lưu vào hồ sơ báo cáo khóa học.
    Quy trình nghiệm thu thực địa B28iphone_qa_check.txt
    # TIÊU CHUẨN NGHIỆM THU 5 SAO TRÊN IPHONE:
    1. Tốc độ mở trang dưới 3 giây qua kết nối 4G/5G công trường.
    2. Các nút "TÍNH BÁO GIÁ", "LƯU HỒ SƠ" to rõ, bấm chính xác bằng 1 tay.
    3. Bảng dữ liệu tự động căn lề, không bị cắt cụt số tiền.
    4. Trạng thái dự án hiển thị màu rõ ràng: Khảo sát (Vàng), Thi công (Xanh lam), Bàn giao (Xanh lá).
    5. Biểu tượng ứng dụng nằm trang trọng trên màn hình chính iPhone.
    # Kết quả: Ứng dụng Mini-CRM chính thức đi vào vận hành thực tế!
Sản phẩm hoàn thành:
Mini-CRM Online trên Cloud
Bằng chứng nghiệm thu:
URL công khai + Chạy trên iPhone

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

  • B29
    Cấu trúc HTML5 chuẩn Semantic cho Landing Page Xây dựng bộ khung tờ rơi trực tuyến cho công ty Remodeling: Dùng các thẻ ngữ nghĩa <header>, <section>, <article>, <footer> giúp công cụ tìm kiếm Google chấm điểm uy tín cao.
    📋 Giáo án Giảng viên & Thực hành B29 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Tình huống: Khách hàng tìm kiếm dịch vụ sửa nhà trên Google ⏱️ 25' Live Code: Cấu trúc tệp index.html, các thẻ ngữ nghĩa semantic ⏱️ 20' Thực hành: Dựng khung sườn Landing Page dịch vụ sửa sàn ⏱️ 5' Nghiệm thu & Giải đáp

    Mục tiêu: Tạo file index.html hoàn chỉnh gồm: Thanh tiêu đề Menu, Khối Hero giới thiệu, Khối 3 Dịch vụ trọng tâm, và Chân trang thông tin liên hệ.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Lạm dụng thẻ div: Người mới hay dùng toàn thẻ <div> khiến Google không hiểu cấu trúc trang. Hướng dẫn dùng đúng ngữ nghĩa: <header> cho đầu trang, <main> cho nội dung chính, <section> cho từng phân khu.

    🛠️ Bài tập thực hành tại lớp

    Bài tập xây dựng: Viết khung sườn HTML cho trang "ProFlooring Remodeling Services" với 3 khối dịch vụ: (1) Lát sàn gỗ tự nhiên, (2) Lát sàn nhựa Vinyl chống nước, (3) Đục phá & xử lý sàn cũ.
    HTML5 Semantic · Khung sườn chuẩn B29landing_page.html
    <!DOCTYPE html>
    <html lang="vi">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ProFlooring - Dịch Vụ Cải Tạo Lát Sàn Chuyên Nghiệp</title>
    </head>
    <body>
      <header>
        <nav>
          <strong>🏗️ ProFlooring USA</strong>
          <a href="#dich-vu">Dịch vụ</a>
          <a href="#bao-gia">Báo giá nhanh</a>
          <a href="tel:5550199">Hotline: (555) 0199</a>
        </nav>
      </header>
    
      <main>
        <section class="hero">
          <h1>Thay Đổi Không Gian Nhà Bạn Với Sàn Đẹp Chuẩn Mỹ</h1>
          <p>Khảo sát trong 24h · Bảo hành thi công 5 năm · Hơn 500+ dự án hoàn thành.</p>
          <a href="#bao-gia" class="btn">Tính Báo Giá Ngay &rarr;</a>
        </section>
    
        <section id="dich-vu">
          <h2>Dịch Vụ Thi Công Trọng Tâm</h2>
          <article><h3>Lát Sàn Nhựa SPC Vinyl</h3><p>Chống nước 100%, chống mối mọt, độ bền 20 năm.</p></article>
          <article><h3>Sàn Gỗ Kỹ Thuật Engineered</h3><p>Vẻ đẹp sang trọng của gỗ sồi tự nhiên.</p></article>
          <article><h3>Xử Lý & Cân Mặt Bằng Sàn</h3><p>Cán vữa phẳng chuẩn laser trước khi lát ván.</p></article>
        </section>
      </main>
    
      <footer>
        <p>&copy; 2026 ProFlooring Remodeling. Giấy phép thầu #TX-9876543.</p>
      </footer>
    </body>
    </html>
    # Cấu trúc HTML5 chuẩn SEO sẵn sàng được khoác áo CSS!
  • B30
    CSS Styling & Bố cục Responsive Mobile-First Thiết kế phong cách công trường chuyên nghiệp: Nhúng font chữ Be Vietnam Pro, sử dụng bảng màu tương phản cao (Cam phản quang, Xanh thợ thi công), nút bấm CTA to bản bấm êm tay.
    📋 Giáo án Giảng viên & Thực hành B30 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Tình huống: Trang web nhìn đẹp trên iPhone của khách hàng ⏱️ 25' Live Code: CSS Variables, Flexbox, Grid, Media Query max-width: 768px ⏱️ 20' Thực hành: Trang trí nút bấm, thẻ dịch vụ, bo viền ⏱️ 5' Nghiệm thu & Giải đáp

    Mục tiêu: Viết file style.css áp dụng hệ màu công trường, responsive hoàn hảo từ màn hình máy tính 1200px xuống điện thoại 390px.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Thiếu thẻ meta viewport: Nhắc học viên thẻ <meta name="viewport" content="width=device-width, initial-scale=1.0"> là điều kiện tiên quyết để CSS responsive hoạt động trên điện thoại.

    🛠️ Bài tập thực hành tại lớp

    Bài 1 (Cơ bản): Tạo biến màu CSS: --ink: #173B3F; --accent: #D96C3F; --safety: #F0B44D;. Áp dụng màu cho tiêu đề và nút bấm.
    Bài 2 (Thực chiến nâng cao): Dùng Flexbox hiển thị 3 thẻ dịch vụ nằm ngang trên Desktop và tự động xếp chồng 1 cột trên Mobile.
    CSS3 Responsive · Phong cách công trường B30style.css
    /* BUỔI 30: CSS STYLING CHO LANDING PAGE REMODELING */
    :root {
      --ink: #173B3F;       /* Xanh thép công trường */
      --accent: #D96C3F;    /* Cam phản quang đồ bảo hộ */
      --safety: #F0B44D;    /* Vàng cảnh báo an toàn */
      --ground: #F4F0E8;    /* Nền xi măng sáng */
      --paper: #FFFFFF;
    }
    
    body {
      margin: 0;
      font-family: 'Be Vietnam Pro', sans-serif;
      background: var(--ground);
      color: var(--ink);
      line-height: 1.6;
    }
    
    .hero {
      padding: 60px 20px;
      background: var(--ink);
      color: #fff;
      text-align: center;
    }
    
    .btn {
      display: inline-block;
      padding: 14px 28px;
      background: var(--accent);
      color: #fff;
      text-decoration: none;
      font-weight: 800;
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(217, 108, 63, 0.4);
      transition: transform 0.2s, background 0.2s;
    }
    .btn:hover {
      background: #B9512F;
      transform: translateY(-2px);
    }
    
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      padding: 40px 20px;
      max-width: 1100px;
      margin: auto;
    }
    
    .card {
      background: var(--paper);
      padding: 24px;
      border-radius: 14px;
      border: 1px solid #D9D4C9;
      border-top: 4px solid var(--accent);
    }
    # Kết quả: Giao diện Landing Page sang trọng, tin cậy, chuẩn thẩm mỹ công trình cao cấp.
  • B31
    Mổ xẻ Landing Page đối thủ cạnh tranh tại Mỹ Phân tích các trang web thầu lớn tại Mỹ (Angi, Houzz, thầu địa phương): Giải mã công thức chuyển đổi gồm Bằng chứng thi công (Before/After), Giấy phép (Licensed & Insured), Đánh giá 5 sao từ Google Maps.
    📋 Giáo án Giảng viên & Thực hành B31 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Trực tiếp mở website 3 nhà thầu Mỹ đang chạy quảng cáo ⏱️ 25' Phân tích 5 khối níu chân khách hàng: Hero, Social Proof, Portfolio, FAQ, CTA ⏱️ 20' Học viên lên danh sách điểm cần bổ sung vào trang web mình ⏱️ 5' Đúc kết kinh nghiệm

    Mục tiêu: Học viên hiểu tâm lý khách hàng khi giao nhà cho người lạ sửa chữa: Khách không mua code, khách mua sự an tâm và minh bạch.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Thiếu bằng chứng (Social Proof): Nếu web chỉ nói mình giỏi mà không có ảnh công trình thực tế, khách sẽ thoát trang sau 5 giây. Giảng viên dạy cách đưa khối Before/After và review thực tế vào vị trí đắc địa nhất.

    🛠️ Bài tập thực hành tại lớp

    Bài tập thực chiến: Soạn thảo khối "Tại sao chọn chúng tôi? (Why Choose Us?)" gồm 4 lợi ích then chốt: (1) Báo giá chính xác không phát sinh, (2) Thợ lành nghề có bảo hiểm trách nhiệm, (3) Thi công đúng tiến độ cam kết, (4) Dọn dẹp sạch sẽ trước khi bàn giao.
    HTML Snippet · Khối Social Proof tin cậy B31social_proof.html
    <!-- KHỐI XÂY DỰNG LÒNG TIN VỚI KHÁCH HÀNG (SOCIAL PROOF) -->
    <section class="trust-banner">
      <div class="badge">🛡️ Đầy đủ Giấy phép & Bảo hiểm (General Liability $2M)</div>
      <div class="badge">⭐ 4.9/5 Đánh giá trên Google (120+ nhận xét của chủ nhà)</div>
      <div class="badge">⏱️ Cam kết tiến độ: Bàn giao đúng hẹn hoặc phạt 100$/ngày</div>
    </section>
    
    <section class="testimonial-card">
      <p>"Đội thợ làm việc cực kỳ ngăn nắp, lát xong 1,200 sqft sàn chỉ trong 3 ngày và dọn dẹp sạch sẽ không còn một hạt bụi vôi!"</p>
      <strong>- David Nguyen, Chủ nhà tại Katy, Texas</strong>
    </section>
    # Tác dụng: Tăng tỉ lệ khách nhấp vào nút "Gọi Thầu" lên gấp 3 lần!
  • B32
    Định hình thông điệp & Ghép nối toàn hệ thống (Landing Page + Mini-CRM) Điểm chạm hoàn tất của 4 tháng học: Đặt nút kêu gọi hành động (CTA) "Báo Giá Nhanh Trực Tuyến" trên Landing Page dẫn thẳng sang Web App Mini-CRM đã deploy. Một hệ thống khép kín tạo ra khách hàng thật.
    📋 Giáo án Giảng viên & Thực hành B32 (60 phút)Instructor Kit

    🎯 Mục tiêu bài dạy & Kế hoạch 60 phút

    ⏱️ 10' Nhìn lại hành trình 32 buổi: Đo đạc → SQLite → Streamlit → Deploy ⏱️ 25' Ghép nối: Đặt link Streamlit Cloud vào nút bấm trên Landing Page ⏱️ 20' Nghiệm thu toàn khóa: Học viên demo hệ thống hoàn chỉnh ⏱️ 5' Trao chứng nhận nghiệm thu khóa học

    Mục tiêu: Hoàn thành cỗ máy vận hành khép kín cho công ty Sửa chữa nhà: Từ Landing Page tiếp thị → Bấm link báo giá Streamlit → Dữ liệu lưu vào SQLite → Giám sát theo dõi tiến độ trên iPhone.

    💡 Bẫy lỗi thường gặp & Mẹo sư phạm

    • Liên kết mở tab mới: Trên thẻ <a href="https://your-app.streamlit.app" target="_blank" rel="noopener"> luôn thêm target="_blank" để khách tính xong vẫn giữ nguyên trang web chính của công ty.

    🛠️ ĐỒ ÁN TỐT NGHIỆP TOÀN KHÓA HỌC (32 BUỔI)

    Nghiệm thu cuối cùng:
    1. Landing Page hoạt động đẹp mắt với số điện thoại bấm gọi ngay.
    2. Nút "TÍNH BÁO GIÁ TỰ ĐỘNG" mở ra ứng dụng Streamlit Cloud đã deploy ở B27.
    3. Mọi tính toán diện tích, chiết khấu và phụ phí nhà cũ chạy chính xác.
    4. Bản ghi khách hàng lưu an toàn vào cơ sở dữ liệu SQLite.
    HTML + Mini-CRM Integration · Mã nguồn tốt nghiệp B32final_landing_page.html
    <!-- BUỔI 32: ĐOẠN MÃ GHÉP NỐI LANDING PAGE VỚI MINI-CRM ONLINE -->
    <section class="cta-banner" style="background:#173B3F; color:#fff; padding:60px 20px; text-align:center;">
      <h2 style="font-size:2rem; margin-bottom:12px;">Sẵn Sàng Làm Mới Căn Nhà Của Bạn?</h2>
      <p style="max-width:600px; margin:0 auto 30px; color:#C4D2CB;">
        Không cần chờ đợi thợ đến đo đạc. Tự tính toán chi phí dự toán sàn nhà của bạn chỉ trong 30 giây với công cụ tính tự động của chúng tôi.
      </p>
      
      <div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
        <!-- NÚT DẪN SANG ỨNG DỤNG STREAMLIT CLOUD ĐÃ DEPLOY TỪ B27 -->
        <a href="https://share.streamlit.io" target="_blank" rel="noopener" class="btn" style="background:#D96C3F; color:#fff;">
          🚀 TỰ TÍNH BÁO GIÁ NGAY (ONLINE APP)
        </a>
        
        <!-- NÚT BẤM GỌI TRỰC TIẾP TRÊN IPHONE -->
        <a href="tel:5550199" class="btn" style="background:transparent; border:2px solid #F0B44D; color:#F0B44D;">
          📞 GỌI GIÁM SÁT: (555) 0199
        </a>
      </div>
    </section>
    # Chúc mừng! Khóa học 32 buổi Lập trình Python cho Giám sát Công trường đã hoàn thành trọn vẹn với đầy đủ sản phẩm thực tế!
Sản phẩm tốt nghiệp:
Landing Page + Mini-CRM
Bằng chứng hoàn thành:
Hệ thống vận hành khép kín

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”

  1. Môi trường: app khởi động, thư viện đúng, URL mẫu mở được.
  2. 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.
  3. 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.
  4. Thiết bị: kiểm tra bằng khung nhỏ trước, sau đó mở trực tiếp trên iPhone.
  5. 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

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.
Nghiệm Thu Toàn Khóa Học (32 Buổi · 4 Tháng)

Chúc Mừng Bạn Đã Hoàn Thành Toàn Bộ Lộ Trình!

Từ những dòng lệnh Python đo diện tích sàn đầu tiên, bạn đã hoàn thiện cỗ máy vận hành khép kín: Cơ sở dữ liệu SQLite, ứng dụng Web Mini-CRM Streamlit và Landing Page tiếp thị chuyên nghiệp sẵn sàng bàn giao cho doanh nghiệp.

⌂ Xem lại Tổng quan 32 buổi ← Về Trang chủ LapTrinhRobot.com
Zalo 📞