Phát triển ứng dụng WeChat Mini từ đầu với AI - Ghi chép chi tiết

Một người hoàn toàn không biết lập trình đã sử dụng AI để hoàn thành việc phát triển một ứng dụng WeChat Mini chỉ trong hai ngày. Bài viết này ghi chép toàn bộ quy trình từ phân tích yêu cầu, lựa chọn công nghệ, tạo mã nguồn, khắc phục sự cố đến cuối cùng triển khai, hy vọng sẽ cung cấp tài liệu tham khảo cho những bạn mới bắt đầu.

I. Tại sao muốn phát triển ứng dụng này?

Lý do rất đơn giản - tôi muốn ghi ch việc thực hiện các thói quen mục tiêu hàng ngày.

Trước đây, tôi đã sử dụng các phần mềm ghi chú như Notion và Feishu để theo dõi việc điểm danh, nhưng mỗi lần tương tác đều rất phức tạp, cần mở máy tính, tìm đến trang tương ứng, chọn thủ công... quy trình quá dài, trải nghiệm không tốt.

Tôi cũng đã thử các ứng dụng và mini program điểm danh trên thị trường, nhưng chúng thường tồn tại một vài vấn đề:

• Quảng cáo nhiều: Phiên bản miễn phí đầy quảng cáo, trải nghiệm kém
• Phí cao: Các chức năng cần thiết đều ở phiên bản trả phí
• Chức năng không phù hợp: Không có tính năng "nhận biết ngày làm việc" mà tôi cần - một số nhiệm vụ điểm danh của tôi chỉ thực hiện vào ngày làm việc, không cần điểm danh vào cuối tuần
• Dữ liệu không tự do: Dữ liệu được lưu trên máy chủ của người khác, muốn xuất ra rất phức tạp

Vì vậy tôi đã nghĩ: liệu có thể tự mình phát triển một ứng dụng không?

Nhưng tôi là một người hoàn toàn mới về lập trình, chưa từng làm phần mềm, cũng chưa học bất kỳ ngôn ngữ lập trình nào. Vì vậy, tôi quyết định sử dụng trợ lý AI để hoàn thành dự án này.

II. Phân tích yêu cầu: Để AI hiểu những gì tôi muốn

2.1 Cuộc trò chuyện đầu tiên: Mô tả yêu cầu

Tôi đã mô tả yêu cầu của mình cho AI:

Viết một ứng dụng di động Android, chức năng là thiết lập điểm danh, có thể tự động nhận biết ngày làm việc dựa trên lịch. Người dùng có thể thiết lập nhiệm vụ điểm danh, nhiệm vụ này là hàng ngày hay mỗi ngày làm việc. Khi hoàn thành hoặc không hoàn thành, có thể thêm ghi chú giải thích.

2.2 Sự hiểu biết và xác nhận của AI

AI không trực tiếp bắt đầu viết mã, mà trước tiên đã làm ba việc:

Thứ nhất, diễn đạt lại yêu cầu của tôi bằng lời của mình:

Dự án	Nội dung
Vấn đề cần giải quyết	Phát triển một ứng dụng "Quản lý điểm danh" trên nền tảng Android
Chức năng cốt lõi	Nhận diện lịch thông minh, quản lý nhiệm vụ điểm danh, ghi chép và ghi chú điểm danh
Một ứng dụng Android có thể cài đặt và chạy trực tiếp

Thứ hai, liệt kê những điểm không chắc chắn và đưa ra giả định:

• Ngày lễ mặc định là của Trung Quốc Quốc (lịch nghỉ do Quốc vụ viện công bố) → Đã loại bỏ, ngày làm việc tính từ thứ Hai đến thứ Sáu
• Dữ liệu chỉ lưu cục bộ, không cần đồng bộ hóa trên đám mây
• Cách thức điểm danh là nhấn nút thủ công
• Người dùng là cá nhân sử dụng, chỉ một người dùng

Thứ ba, đề xuất giải pháp công nghệ:

AI đã đề xuất khung Flutter (nền tảng đa nền tảng, hiệu suất phát triển cao), và đưa ra phương án dự phòng (Android Kotlin gốc). Cuối cùng tôi đã chọn Flutter.

2.3 Hỏi đáp nhiều vòng để xác nhận chi tiết

Trước khi bắt đầu chính thức, AI đã hỏi đáp nhiều vòng để xác định các quyết định quan trọng:

Câu hỏi	Câu trả lời của tôi
Lựa chọn công nghệ	Flutter (được đề xuất)
Cách thức kích hoạt điểm danh	Điểm danh thủ công (nhấn nút)
Dữ liệu có cần đồng bộ hóa trên đám mây không	Chỉ lưu cục bộ, không kết nối mạng
Quản lý dữ liệu ngày lễ như thế nào	Ngày làm việc tính từ thứ Hai đến thứ Sáu
Có cần chức năng thống kê không	Biểu đồ trực quan (bản đồ nhiệt, biểu đồ xu hướng)
Phong cách UI	Đơn giản theo thiết kế Material

Bước này cực kỳ quan trọng. AI không vội vàng bắt tay vào thực hiện, mà thông qua việc đặt câu hỏi có cấu trúc để đảm bảo sự hiểu biết về yêu cầu hoàn toàn chính xác. Điều này tránh được việc phải làm lại nhiều công việc sau này.

III. Lựa chọn công nghệ: Từ ứng dụng Android đến Mini Program WeChat

3.1 Phiên bản đầu tiên: Ứng dụng Android Flutter

AI đã tạo ra toàn bộ mã nguồn dự án Flutter, bao gồm các mô-đun sau:

checkin_app/
├── lib/
│   ├── main.dart                    # Điểm nhập
│   ├── services/
│   │   ├── database.dart            # Cơ sở dữ liệu SQLite
│   │   └── calendar_engine.dart     # Công cụ lịch
│   ├── providers/providers.dart     # Quản lý trạng thái
│   ├── screens/                     # Trang
│   │   ├── home_screen.dart         # Trang chủ
│   │   ├── add_task_screen.dart     # Thêm nhiệm vụ
│   │   ├── note_dialog.dart         # Hộp thoại ghi chú
│   │   └── import_holiday_screen.dart # Nhập ngày lễ
│   └── widgets/                     # Thành phần
│       ├── task_card.dart           # Thẻ nhiệm vụ
│       ├── stats_chart.dart         # Biểu đồ thống kê
│       └── heatmap_calendar.dart    # Lịch nhiệt
├── assets/data/holidays_2026_2030.json
└── android/                         # Cấu hình Android

3.2 Vấn đề gặp phải: Thiết lập môi trường biên dịch thất bại

Các bước xây dựng mà AI đưa ra là:

cd checkin_app
flutter pub get
flutter build apk --release

Nhưng tôi là một người hoàn toàn mới, sau khi cài đặt Flutter SDK và Android Studio theo hướng dẫn, quá trình biên dịch liên tục báo lỗi. Các vấn đề chính là:

1. Cấu hình biến môi trường Flutter SDK không chính xác
2. Phiên bản Android SDK không khớp
3. Xung đột các phụ thuộc

Bài học: Đối với người dùng mới hoàn toàn, ngưỡng thiết lập môi trường phát triển Android gốc quá cao. Mặc dù Flutter là khung đa nền tảng, nhưng để xây dựng APK Android vẫn cần môi trường phát triển Android đầy đủ.

3.3 Chuyển hướng sang Mini Program WeChat

Sau nhiều lần thử nghiệm giải quyết vấn đề biên dịch mà không thành công, tôi quyết định chuyển hướng - phát triển Mini Program WeChat.

Mini Program WeChat có những ưu điểm rất thân thiện với người dùng mới:

Điểm so sánh	Ứng dụng Android	Mini Program WeChat
Môi trường phát triển	Android Studio (vài GB)	Công cụ phát triển WeChat (v trăm MB)
Thiết lập môi trường	Phức tạp, cần cấu hình SDK, JDK...	Đơn giản, chỉ cần tải và cài đặt
Ngôn ngữ mã	Dart (cần học)	JavaScript (phổ biến hơn)
Phương pháp phân phối	Cần ký, đăng cửa hàng ứng dụng	Quét mã QR là có thể sử dụng
Rào cản người dùng	Cần tải và cài đặt	Mở trực tiếp trong WeChat

Tôi đã yêu cầu AI tạo lại mã nguồn cho phiên bản Mini Program.

IV. Quá trình AI tạo mã Mini Program

4.1 Xác nhận giải pháp công nghệ

Như trước đó, AI đã xác nhận giải pháp công nghệ:

Điểm quyết định	Lựa chọn
Khung phát triển	Nguyên bản WeChat (WXML + WXSS + JS)
Lưu trữ dữ liệu	wx.setStorageSync (cục bộ, không kết nối mạng)
Giải pháp biểu đồ	Vẽ bằng Canvas gốc
Phong cách UI	Đơn giản, thích hợp với quy thiết kế WeChat

4.2 Quá trình tạo mã

AI không tạo toàn bộ mã cùng một lúc, mà tạo từng bước, từng mô-đun:

Bước đầu tiên: Tạo cấu trúc dự án và tệp cấu hình

// app.json - Cấu hình toàn cục Mini Program
{
  "pages": [
    "pages/index/index",
    "pages/calendar/calendar",
    "pages/stats/stats",
    "pages/addTask/addTask",
    "pages/importHoliday/importHoliday"
  ],
  "window": {
    "navigationBarBackgroundColor": "#4A90D9",
    "navigationBarTitleText": "Trợ lý điểm danh"
  }
}

Bước thứ hai: Tạo các mô-đun công cụ cốt lõi

AI đã tạo ra ba mô-đun cốt lõi:

• utils/database.js — Các thao tác lưu trữ cục bộ (thêm/xóa/sửa/truy vấn nhiệm vụ/ghi chép/ngày lễ + phương pháp thống kê)
• utils/calendar.js — Công cụ lịch (nhận biết ngày làm việc, lọc nhiệm vụ)
• utils/chart.js — Vẽ biểu đồ Canvas (biểu đồ hình vành khuyên, biểu đồ đường, bản đồ nhiệt)

Bước thứ ba: Tạo từng trang

AI đã tạo lần lượt 5 trang theo từng mô-đun chức năng:

1. Trang chủ (index) — Danh sách nhiệm vụ điểm danh hôm nay
2. Trang lịch (calendar) — Chế độ xem lịch tháng + ghi chép điểm danh
3. Trang thống kê (stats) — Trực quan hóa biểu đồ Canvas
4. Trang thêm nhiệm vụ (addTask) — Ba chế độ tái sử dụng (thêm/chưa hoàn thành/ghi chú)
5. Trang nhập ngày lễ (importHoliday) — Nhập tệp JSON

4.3 Đảm bảo chất lượng mã nguồn

Sau khi tạo xong mã, AI đã tự kiểm tra toàn diện, kiểm tra:

• Tính đầy đủ tệp (27 tệp có đầy đủ không)
• Tính nhất quán API gọi (phương thức trang có tồn tại trong mô-đun công cụ không)
• Sự khớp cấu trúc dữ liệu (tên trường JSON có khớp với mã không)
• Lỗi logic (khớp loại mảng/đối tượng không...)

Quá trình kiểm tra đã phát hiện nhiều vấn đề và tự động sửa chữa, bao gồm:

Vấn đề	Mức độ nghiêm trọng	Cách khắc phục
Đường dẫn biểu tượng tabBar trống	Nghiêm trọng	Chuyển sang thanh điều hướng tùy chỉnh
Loại dữ liệu ghi chép trang lịch không khớp	Nghiêm trọng	Chuyển mảng thành đối tượng
Tên trường ngày lễ không nhất quán	Trung bình	Thống nhất tên trường
Bộ nhớ cache không đầy đủ sau khi nhập	Trung bình	Tải lại cache từ Storage

V. Các vấn đề quan trọng gặp phải trong quá trình phát triển

5.1 Lỗi biên dịch

Khi mở dự án bằng công cụ phát triển WeChat, lần biên dịch đầu tiên đã báo lỗi. Tôi đã gửi ảnh chụp lỗi cho AI, AI đã phân tích và đưa ra giải pháp khắc phục.

Kinh nghiệm: Khi gặp lỗi đừng hoảng hốt, hãy gửi toàn bộ thông tin lỗi (ảnh chụp hoặc văn bản) cho AI, nó thường có thể nhanh chóng xác định vấn đề.

5.2 Vấn đề hiển thị màu sắc

Đây là một ví dụ điển hình về "sự sai lệch trong hiểu biết của AI":

• Yêu cầu của tôi: Nhiệm vụ chưa hoàn thành hiển thị dấu chấm đỏ
• Sự hiểu biết của AI: "Chưa hoàn thành" = unfinished, vì vậy chỉ đánh dấu trạng thái unfinished là chấm đỏ
• Thực tế: Giá trị trạng thái "chưa hoàn thành" trong mã là missed, không phải unfinished

Kết quả là các nhiệm vụ chưa hoàn thành không hiển thị dấu chấm đỏ.

AI đã nhắc tôi in dữ liệu lịch ra để kiểm tra, mới phát hiện ra giá trị trạng thái là missed. Sau khi sửa tay, vấn đề đã được giải quyết.

Bài học: AI không thể đoán chính xác tên biến trong mã. Khi gặp hiển thị bất thường, hãy xác định giá trị thực của dữ liệu trước, sau đó mới kiểm tra logic.

5.3 Không tìm thấy tệp dữ liệu xuất

Sau khi xuất dữ liệu và lưu vào cục bộ, tôi không thể tìm thấy tệp đã lưu bằng trình quản lý tệp điện thoại.

Lý do là: API wx.saveFile của Mini Program sẽ lưu tệp vào thư mục riêng tư dành riêng cho Mini Program, đường dẫn thư mục này rất phức tạp và ẩn, trình quản lý tệp thông thường không thể truy cập.

Sau nhiều lần thử nghiệm, cuối cùng phát hiện ra rằng cách chia sẻ tệp cho bạn bè có thể giải quyết rất tốt vấn đề này.

Bài học: Hệ thống tệp của Mini Program khác với hệ thống tệp thông thường, cần hiểu cơ chế sandbox của nó.

5.4 Sự khác biệt giữa phiên bản AI tạo lần đầu và phiên bản cuối cùng

Thực tế, giữa phiên bản AI tạo lần đầu và phiên bản cuối cùng được triển khai, đã có không ít thay đổi. Một số chức năng AI tạo một lần đã đạt yêu cầu, một số khác lại được tôi hoàn thiện liên tục qua quá trình sử dụng, khi liên tục đề xuất yêu cầu mới và lặp đi lặp lại.

Các chức năng AI tạo một lần đã đạt yêu cầu:

• Chế độ xem lịch (lịch tháng + đánh dấu điểm danh)
• Lưu trữ dữ liệu cục bộ (không kết nối mạng, chạy hoàn toàn ngoại tuyến)
• Ghi chép điểm danh cơ bản (hoàn thành/chưa hoàn thành + ghi chú)
• Thiết lập tần suất nhiệm vụ (hàng ngày / ngày làm việc, ngày làm việc tính từ thứ Hai đến thứ Sáu)
• Biểu đồ thống kê (biểu đồ hình vành khuyên, biểu đồ đường xu hướng, bản đồ nhiệt lịch)

Các chức năng được hoàn thiện qua nhiều vòng lặp:

• Quản lý nhiệm vụ — AI ban đầu chỉ hỗ trợ "thêm" và "điểm danh", không có chức năng chỉnh sửa và xóa. Sau đó tôi đề xuất cần quản lý nhiệm vụ, AI đã thêm trang quản lý nhiệm vụ (taskManager), hỗ trợ chỉnh sửa, xóa, tạm ngưng nhiệm vụ
• Biểu đồ thống kê — AI ban đầu dùng Canvas vẽ tay biểu đồ hình vành khuyên và biểu đồ đường, nhưng hiệu quả hơi thô. Sau nhiều lần điều chỉnh kiểu dáng và tương tác, cuối cùng đã đạt được biểu đồ trực quan đẹp mắt hơn
• Cài đặt cá nhân hóa — Đây là một trang hoàn toàn mới. Trong quá trình sử dụng, tôi phát hiện cần tùy chỉnh màu sắc chủ đề, đặt thời gian nhắc nhở, sao lưu và khôi phục dữ liệu... AI đã thêm trang cài đặt (settings) từ đầu
• Xuất dữ liệu và chia sẻ — Ban đầu không có chức năng xuất dữ liệu. Sau đó tôi muốn có thể xuất dữ liệu điểm danh ra, AI đã thêm chức năng sao lưu dữ liệu, và thông qua cách "chia sẻ cho bạn bè" đã giải quyết được hạn chế của cơ chế sandbox hệ thống tệp Mini Program

Cảm nhận: Phiên bản AI tạo lần đầu là "nguyên mẫu có thể sử dụng", nhưng vẫn còn cách xa với "sản phẩm hữu ích". Điểm mấu chốt nằm ở: để AI chạy được khung cơ bản trước, sau đó dựa trên trải nghiệm sử dụng thực tế, từng bước đề xuất yêu cầu cải tiến, lặp đi lặp lại để hoàn thiện.

VI. Kết quả cuối cùng

6.1 Tổng quan dự án

Dự án	Nội dung
Tên dự án	Trợ lý điểm danh
Khung phát triển	Nguyên bản Mini Program WeChat (WXML + WXSS + JS)
Lượng mã	7 trang + 3 mô-đun công cụ + tệp cấu hình
Lưu trữ dữ liệu	Chỉ cục bộ, không kết nối mạng
Địa chỉ mã nguồn mở	GitHub

6.2 Chức năng cốt lõi

Quản lý nhiệm vụ

• Thêm, chỉnh sửa và xóa nhiệm vụ điểm danh
• Thiết lập tần suất nhiệm vụ (hàng ngày / ngày làm việc)
• Ngày làm việc tính từ thứ Hai đến thứ Sáu
• Đánh dấu trạng thái hoàn thành nhiệm vụ

Chế độ xem lịch

• Trình bày lịch tháng trực quan
• Đánh nhiệm vụ đã hoàn thành và chưa hoàn thành
• Nhấp vào ngày để xem chi tiết điểm danh ngày đó

Phân tích và thống kê

• Thống tình trạng hoàn thành nhiệm vụ
• Trình bày biểu đồ trực quan (biểu đồ hình vành khuyên, biểu đồ đường xu hướng, bản đồ nhiệt lịch)
• Truy vấn ghi chép điểm danh lịch sử

️ Cài đặt cá nhân hóa

• Tùy chỉnh màu sắc chủ đề
• Đặt thời gian nhắc nhở
• Sao lưu và khôi phục dữ liệu

6.3 Cấu trúc dự án

checkin_miniapp/
├── pages/
│   ├── index/                 # Trang chủ (điểm danh hôm nay)
│   ├── calendar/              # Trang lịch
│   ├── stats/                 # Trang thống kê
│   ├── addTask/               # Trang thêm nhiệm vụ
│   ├── settings/              # Trang cài đặt
│   └── taskManager/           # Trang quản lý nhiệm vụ
├── utils/
│   ├── calendar.js            # Lớp công cụ lịch
│   ├── chart.js               # Lớp công cụ biểu đồ
│   └── database.js            # Lớp thao tác cơ sở dữ liệu
├── app.js                     # Tệp điểm nhập Mini Program
├── app.json                   # Tệp cấu hình Mini Program
└── app.wxss                   # Tệp kiểu dáng toàn cục

6.4 Mã nguồn mở và phát hành

Dự án đã được mã nguồn mở trên GitHub: https://github.com/mark-D-kai/checkin_miniapp

Mini Program đã được phát hành, quét mã QR WeChat này để sử dụng.

VII. Tổng kết kinh nghiệm và đề xuất

7.1 Đề xuất cho người phát triển mới bắt đầu

Về hợp tác với AI:

1. Nói rõ yêu cầu trước, rồi mới để AI bắt tay vào làm — Đừng vừa nói "giúp tôi viết một ứng dụng", mà trước hết hãy mô tả vấn đề bạn cần giải quyết, có những ràng buộc gì
2. Trả lời câu hỏi của AI cần nghiêm túc — Các câu hỏi AI đặt thường là những điểm quyết định quan trọng, trả lời qua loa sẽ dẫn đến phải làm lại sau này
3. Khi gặp lỗi cần cung cấp thông tin đầy đủ — Chụp ảnh hoặc sao chép toàn bộ thông tin lỗi, đừng chỉ nói "lỗi rồi"
4. Kiểm tra từng bước, đừng đợi viết xong mới thử — Mỗi khi hoàn thành một mô-đun hãy thử nghiệm ngay, vấn đề càng phát hiện sớm càng tốt

Về lựa chọn công nghệ:

1. Chọn giải pháp có ngưỡng thấp nhất — Nếu chỉ là công cụ cá nhân sử dụng, Mini Program WeChat có ngưỡng thấp hơn nhiều so với ứng dụng gốc
2. Không cần theo đuổi công nghệ mới nhất — Phát triển nguyên bản WeChat (WXML + JS) tuy không khung框架酷 lắm, nhưng thân thiện nhất với người mới
3. Chạy được trước, tối ưu sau — Phiên bản đầu tiên chạy được là được, đừng quá bận tâm về chất lượng mã

Về quy trình phát triển:

1. Xác nhận yêu cầu > Mã hóa > Kiểm tra > Sửa lỗi — Thứ tự này không thể đảo ngược
2. Cần xem xét mã AI tạo ra — AI cũng có thể mắc lỗi, đặc biệt là tên biến, cấu trúc dữ liệu...
3. Tận dụng khả năng tự kiểm tra của AI — Để AI tự kiểm tra mã, có thể phát hiện nhiều vấn đề

7.2 Giải pháp này phù hợp với ai

• Có một yêu cầu nhỏ cụ thể, muốn làm thành công cụ
• Hoàn toàn không có nền tảng lập trình
• Sẵn sàng dành thời gian học hỏi và gỡ lỗi
• Yêu cầu không liên quan đến dịch vụ backend phức tạp

7.3 Giải pháp này không phù hợp với ai

• Muốn làm sản phẩm thương mại (mã AI tạo ra cần được chuyên gia xem xét)
• Cần kết nối mạng thời gian thực, hệ thống người dùng, thanh toán...
• Không muốn dành thời gian hiểu mã AI tạo ra

VIII. Lời kết

Là một người hoàn toàn không biết lập trình, tôi đã dùng hai ngày làm việc ngoài giờ, với sự trợ giúp của AI đã hoàn thành một Mini Program WeChat có chức năng đầy đủ. Mặc dù trong quá trình gặp không ít trục trặc (thiết lập môi trường Android thất bại, lỗi biên dịch, lỗi hiển thị...), nhưng cuối cùng đều đã giải quyết được.

AI sẽ không thay thế lập trình viên, nhưng nó thực sự đã biến "người không biết lập trình cũng có thể làm phần mềm" thành hiện thực.

Nếu bạn cũng có những yêu cầu nhỏ tương tự, hãy thử dùng AI để thực hiện. Điểm mấu chốt là: nói rõ yêu cầu, chọn đúng giải pháp công nghệ, gặp vấn đề đừng bỏ cuộc.

Có đề xuất gì xin để lại bình luận.

Bài viết này ghi lại trải nghiệm phát triển thực tế của tác giả, dự án đã mã nguồn mở, chào đón Star và PR.