Chào mừng trở lại với Campfire Logs: Nghệ thuật Thử nghiệm & Lỗi

Trong nhật ký lần trước, #4 - Tái cấu trúc một cảm giác đơn giản sai lầm, tôi đã giới thiệu cho các bạn về một bản demo front-end mà tôi vừa tái cấu trúc để trở nên mô-đun và thân thiện với khả năng tiếp cận. Hôm nay, chúng ta sẽ nói về việc cải tiến các tính năng hiện có và thêm một số tính năng mới để tăng cường tính tương tác. Chúng ta cũng sẽ thảo luận về cách phân tách dữ liệu, giao diện và logic trong bản demo đã cải thiện khả năng bảo trì của mã nguồn bằng cách tách rời các thành phần của nó.

Tín dụng và ghi công

Tôi đã đề cập trong một số nhật ký trước đây rằng việc phát triển với sự trung thực là rất quan trọng đối với tôi. Điều này có nghĩa là phát triển ứng dụng và trang web một cách minh bạch và dễ tiếp cận. Điều này bao gồm việc đảm bảo rằng tín dụng và ghi công được ghi nhận một cách thích hợp khi sử dụng các tác phẩm sáng tạo của người khác.

Bản demo mà tôi đã tái cấu trúc ban đầu là một dự án khóa học. Tuy nhiên, để tránh vi phạm bản quyền với các tài liệu được cung cấp trong lớp học, tôi đã phải tìm kiếm tất cả các hình ảnh mới. Tôi đã tạo một trang tín dụng và ghi công để liên kết các hình ảnh với người sáng tạo và giấy phép mà tôi được phép sử dụng. Tôi đã sử dụng 11ty làm trình tạo trang tĩnh (SSG) với Nunjucks cho việc tạo mẫu, vì vậy tôi đã tạo một tệp dữ liệu chứa một mảng các đối tượng tín dụng để có thể dễ dàng cập nhật và bảo trì.

Hiệu ứng gợn sóng

Trang Tín dụng & Ghi công chỉ là khởi đầu. Các trang khác cũng cần tách dữ liệu khỏi mã nguồn. Ví dụ, trang chủ có một trình chiếu các Mặt hàng Nổi bật, nhưng tất cả các thông tin về hình ảnh và giá đều được mã hóa cứng trong HTML. Tôi đã tạo một tệp dữ liệu để chứa tất cả các thuộc tính của từng sản phẩm, cho phép sử dụng Nunjucks để tạo động các sản phẩm trên trang Gallery.

Kết nối với cộng đồng

Do tính tương tác động của các trang mà tôi đã phát triển, trang Sự kiện Cộng đồng trở nên khá nhạt nhẽo. Tôi đã quyết định sử dụng Zoho Calendar và API của Zoho để hiển thị các sự kiện, cung cấp một nguồn dữ liệu duy nhất cho sự kiện. Tôi đã phải thực hiện nhiều bước để lấy dữ liệu từ API, bao gồm kiểm tra token OAuth 2.0 và chuẩn hóa dữ liệu trả về.

Những gì tôi đã học được

Việc tái cấu trúc mã nguồn phức tạp thành một hệ thống dễ bảo trì đã dẫn đến nhiều tính năng mới và công việc không như tôi dự đoán. Nhưng công sức bỏ ra là xứng đáng. Tôi cảm thấy tự hào về những gì tôi đã đạt được trong việc tái cấu trúc này và nhận ra rằng mỗi khó khăn trên con đường học tập đều dẫn đến sự cải tiến đáng kể trong kỹ năng lập trình của tôi.

TL;DR

Tôi đã tái cấu trúc một bản demo front-end thành một hệ thống mô-đun và dễ bảo trì bằng 11ty, Nunjucks và JS. Tôi đã tách dữ liệu (tín dụng, sản phẩm, sự kiện) khỏi giao diện và logic, xây dựng một trang Tín dụng & Ghi công, và làm cho trang sản phẩm và sự kiện trở nên động và tương tác. Điều này giúp cải thiện khả năng bảo trì và sự minh bạch trong phát triển.

Trước khi bạn rời đi

Cảm ơn bạn đã dành thời gian đọc những khó khăn và thành công của tôi trong phát triển full-stack. Tôi khuyến khích bạn để lại bình luận về trải nghiệm của bạn, có thể bạn cũng đã gặp khó khăn tương tự với các API bên thứ ba. Trong nhật ký tiếp theo (#6), tôi sẽ chia sẻ tiến trình của dự án nền tảng blog của mình. Hãy quay lại sớm để xem những cập nhật mới nhất!