Giới thiệu
Trong bài viết này, tôi sẽ chia sẻ về việc tái xây dựng ứng dụng ghi chép học tập mà tôi đã tạo trước đây bằng React, sử dụng TypeScript và Chakra UI. Tôi cũng đã triển khai ứng dụng trên Firebase, tự động hóa quy trình CI/CD bằng GitHub Actions, và thực hiện kiểm thử tự động với Jest và React Testing Library.
Mục tiêu của bài viết là phân tích cấu trúc ứng dụng, các thách thức trong quá trình phát triển và những bài học tôi đã rút ra từ quá trình này.
Tổng quan về ứng dụng
Ứng dụng này ghi lại nội dung học tập hàng ngày và thời gian học, tự động tính toán và hiển thị tổng thời gian đã chi.
| Tính năng | Nội dung |
|---|---|
| Tích hợp Supabase | Lưu trữ đám mây |
| Chức năng xóa | Các bản ghi đã đăng ký có thể bị xóa (cũng bị xóa từ Supabase) |
| Hiển thị Loading | Hiển thị spinner khi dữ liệu đang được truy xuất |
| Triển khai Firebase | Kiểm thử trong môi trường sản xuất |
Những điểm khác biệt so với bài viết trước
- Ngôn ngữ sử dụng: Chuyển sang TypeScript
- Triển khai React Hook Form
- Triển khai Chakra UI
Thách thức và giải pháp trong quá trình phát triển
1. Sự không nhất quán giữa mã kiểm thử và thực thi (các bài kiểm tra thất bại)
Vấn đề: Cách diễn đạt trong mã kiểm thử (ví dụ: trong ứng dụng ghi chép học tập) có chút khác biệt so với giao diện người dùng thực tế, dẫn đến lỗi.
Giải pháp: Trong mã kiểm thử, tôi đã điều chỉnh hàm getByText để xác định linh hoạt bằng cách sử dụng biểu thức chính quy (ví dụ: /ghi chép học tập/i).
Điểm quan trọng: Xem xét ngôn ngữ giao diện người dùng và ngôn ngữ kiểm thử cùng nhau.
2. Quản lý trạng thái
Vấn đề: Khó khăn trong việc xác định các trạng thái cần bao gồm trong useState.
records(dữ liệu danh sách)loading(cờ tải)error(thông báo lỗi)editingRecord(bản ghi đang được chỉnh sửa), v.v.
Giải pháp: Tất cả các thay đổi trong giao diện người dùng cần được quản lý như một trạng thái.
3. Hiển thị UI/Modal
Vấn đề: Tôi đã đặt modal bên trong một nhánh điều kiện (loading / error), vì vậy modal không xuất hiện khi tôi nhấn nút.
Giải pháp: Tôi đã đặt modal bên ngoài nhánh điều kiện và cần điều khiển nó bằng isOpen / onOpen / onClose.
Điểm cần cải thiện
1. Cài đặt và cấu hình môi trường
Tôi đã học cách xây dựng một môi trường phát triển Vite + React + TypeScript + Chakra UI từ đầu. Tôi đã nắm được quy trình áp dụng ChakraProvider cho toàn bộ ứng dụng và hiểu được tầm quan trọng của cấu hình.
2. Kỹ năng thực tiễn CI/CD
Tôi đã thêm "make test" vào một Makefile và thiết lập quy trình thực thi kiểm thử tự động trong môi trường địa phương. Tôi đã sử dụng GitHub Actions để tạo quy trình tự động build → test → deploy khi có một push.
3. Kỹ năng gỡ lỗi và cô lập
Tôi đã thành công trong việc cô lập vấn đề bằng cách thực hiện kiểm thử tái tạo với mã tối thiểu mà không bị nhầm lẫn bởi thông điệp lỗi. Tôi đã học cách xác định xem vấn đề là do môi trường hay mã.
Tôi đã trở nên nhanh chóng hơn trong việc phân biệt giữa "lỗi môi trường" và "lỗi thực thi".
Những bài học đã học được
- Rào cản gia nhập dịch vụ đám mây thấp hơn tôi mong đợi.
Supabase và Firebase có giao diện người dùng toàn diện, khiến chúng trực quan ngay cả với người mới bắt đầu. Tôi đã học mọi thứ từ việc tạo cơ sở dữ liệu, chỉnh sửa bảng, và triển khai.
- Tầm quan trọng của việc chia sẻ những gì tôi đã học.
Tôi đã có thể tự khắc phục sự cố bằng cách sử dụng tài liệu, bài viết trên Qiita và thông điệp lỗi.
- Trạng thái được xác định bởi việc có hay không có sự thay đổi trong giao diện người dùng.
Tôi nhận ra rằng thay vì đơn giản đặt mọi thứ trong useState, tôi cần sắp xếp nó sao cho chỉ những thứ ảnh hưởng đến màn hình mới nằm trong trạng thái.
Kết luận
Thông qua quá trình phát triển này, tôi đã có thể trải nghiệm toàn bộ quy trình tạo ứng dụng, từ tạo → kiểm thử → tự động xuất bản.
Tôi mong muốn tăng cường lượng đầu ra mà tôi sản xuất và củng cố kiến thức của mình.
Thực hành tốt nhất
- Luôn kiểm tra tính khả dụng của các mô-đun trước khi sử dụng.
- Sử dụng các công cụ hỗ trợ gỡ lỗi để phát hiện lỗi sớm.
Cạm bẫy thường gặp
- Không đồng bộ hóa trạng thái UI với trạng thái thực tế của ứng dụng.
- Bỏ qua việc kiểm thử tự động trong quy trình phát triển.
Mẹo hiệu suất
- Tối ưu hóa các truy vấn đến Supabase để giảm thời gian tải dữ liệu.
- Sử dụng lazy loading cho các mô-đun không quan trọng để cải thiện hiệu suất.
Giải quyết sự cố
- Nếu gặp lỗi trong quá trình kiểm thử, hãy xem xét kỹ lưỡng các thông điệp lỗi và sử dụng console.log để theo dõi trạng thái.
Câu hỏi thường gặp
1. Supabase là gì?
Supabase là một nền tảng phát triển ứng dụng mã nguồn mở cung cấp cơ sở dữ liệu và lưu trữ đám mây.
2. Tại sao chọn TypeScript?
TypeScript giúp tăng cường tính an toàn cho mã nguồn và giảm thiểu lỗi do sai cú pháp.
3. Chakra UI có ưu điểm gì?
Chakra UI cung cấp các thành phần dễ sử dụng và tùy chỉnh, giúp phát triển giao diện người dùng nhanh chóng và hiệu quả.
