Đưa dữ liệu thật từ EzyPlatform vào website

Ở bài trước, chúng ta đã biến website mẫu thành website mang nhận diện Ezyvora bằng cách đưa Brand Guideline vào VS Code, thay logo, màu sắc, typography, Header, Hero Banner và các thành phần giao diện chính.
Tuy nhiên, phần lớn nội dung trên website lúc này vẫn đang được viết trực tiếp trong mã nguồn.
Điều đó có nghĩa là mỗi khi muốn thay đổi một đoạn giới thiệu, thêm một dịch vụ mới hoặc đăng một bài viết, chúng ta lại phải mở VS Code và sửa HTML.
Với một website doanh nghiệp thật, cách làm này không phù hợp.
Mục tiêu của bài này là chuyển website từ:
Giao diện tĩnh → Website sử dụng dữ liệu thật từ EzyPlatform
Sau khi hoàn thành, nội dung có thể được quản lý trực tiếp trên EzyPlatform, còn website chỉ chịu trách nhiệm hiển thị dữ liệu đó.

Bước 1: Xác định những dữ liệu nào cần đưa lên EzyPlatform

Không phải tất cả nội dung trên website đều cần lấy từ hệ thống.
Một số nội dung ít thay đổi, chẳng hạn slogan hoặc một vài CTA chính, có thể tiếp tục nằm trong mã nguồn.
Ngược lại, những nội dung thường xuyên thay đổi nên được đưa lên EzyPlatform.
Ví dụ:
  • Bài viết Blog.
  • Tin tức.
  • Dịch vụ.
  • Sản phẩm.
  • Dự án.
  • Case Study.
  • Thông tin liên hệ.
  • Nội dung giới thiệu doanh nghiệp.
  • Banner hoặc nội dung nổi bật.
Trước tiên, hãy yêu cầu AI rà soát website hiện tại.

Prompt mẫu

> Hãy đọc toàn bộ website hiện tại và xác định những nội dung nào đang được viết cứng trong HTML.
>
> Hãy chia thành 2 nhóm:
>
> 1. Nội dung nên giữ trong mã nguồn vì ít thay đổi.
> 2. Nội dung nên chuyển sang quản lý bằng dữ liệu trên EzyPlatform.
>
> Với nhóm thứ 2, hãy đề xuất loại dữ liệu phù hợp để quản lý.
>
> Chưa chỉnh sửa code.
Sau bước này, chúng ta sẽ có một danh sách rõ ràng trước khi bắt đầu ghép dữ liệu.
20260820162639346Z-7-1.png

Bước 2: Chuẩn bị dữ liệu trên EzyPlatform

Tiếp theo, đăng nhập vào trang quản trị EzyPlatform và bắt đầu tạo dữ liệu thật.
Tùy từng loại nội dung, bạn có thể sử dụng các module phù hợp.
Ví dụ:
  • Blog và Tin tức có thể quản lý bằng EzyArticle.
  • Sản phẩm và dịch vụ có thể sử dụng các dữ liệu sản phẩm hoặc nội dung tương ứng.
  • Hình ảnh được tải lên Media.
  • Những nội dung tùy biến khác có thể được quản lý bằng dữ liệu riêng tùy cấu trúc website.
Ở giai đoạn đầu, không cần tạo quá nhiều dữ liệu.
Chỉ cần nhập một số dữ liệu mẫu đủ để kiểm tra việc kết nối.
Ví dụ: 3 dịch vụ + 3 bài Blog + một số hình ảnh
Sau đó chúng ta sẽ dùng chúng để thay dữ liệu giả trên giao diện.

Bước 3: Xác định cách website sẽ lấy dữ liệu

Sau khi đã có dữ liệu trên EzyPlatform, bước tiếp theo là xác định website sẽ lấy dữ liệu bằng cách nào.
Với website EzyPlatform, có thể chia thành hai trường hợp chính.

Trường hợp 1: Nội dung cần SEO

Những trang như:
  • Trang chủ.
  • Blog.
  • Chi tiết bài viết.
  • Dịch vụ.
  • Chi tiết dịch vụ.
nên ưu tiên lấy dữ liệu ngay từ phía server trước khi HTML được gửi về trình duyệt.
Điều này giúp công cụ tìm kiếm có thể đọc được nội dung ngay trong HTML.

Trường hợp 2: Nội dung không yêu cầu SEO cao

Một số dữ liệu có thể tải sau bằng API phía trình duyệt.
Ví dụ:
  • Nội dung tương tác.
  • Các thao tác sau khi người dùng click.
  • Dữ liệu phụ.
  • Nội dung tải thêm.
Trước khi code, hãy để AI xác định cách phù hợp cho từng phần.

Prompt mẫu

> Dựa trên website hiện tại và danh sách nội dung cần đưa lên EzyPlatform, hãy đề xuất phần nào nên lấy dữ liệu bằng server-side rendering và phần nào có thể gọi API bằng JavaScript.
>
> Ưu tiên SEO cho Trang chủ, Blog, trang chi tiết bài viết và các trang dịch vụ.
>
> Chưa chỉnh sửa code.
20260820162639379Z-8-3.png
Sau khi AI đề xuất kế hoạch phù hợp bạn tiếp tục nhập prompt như giao diện dưới đây:
20260820162639453Z-11-3.1.png

Bước 4: Bắt đầu từ một khu vực đơn giản

Không nên chuyển toàn bộ website sang dữ liệu thật trong một lần.
Hãy bắt đầu từ một khu vực đơn giản.
Ví dụ, phần:
Dịch vụ nổi bật trên Trang chủ
Hiện tại website có thể đang viết cứng như:
<div class="service-card">
    <h3>Thiết kế website</h3>
    <p>Xây dựng website chuyên nghiệp cho doanh nghiệp.</p>
</div>
Mục tiêu là thay phần này bằng dữ liệu được quản lý trên EzyPlatform.

Prompt mẫu

> Hãy kiểm tra section "Dịch vụ" trên Trang chủ.
>
> Hiện tại dữ liệu đang được viết cứng trong HTML.
>
> Tôi muốn chuyển danh sách dịch vụ sang lấy dữ liệu thật từ EzyPlatform.
>
> Trước tiên hãy:
>
> * Xác định file đang render section này.
> * Xác định cấu trúc dữ liệu cần có.
> * Đề xuất cách lấy dữ liệu phù hợp.
> * Giữ nguyên giao diện hiện tại.
>
> Chưa chỉnh sửa code.
Khi AI đã xác định đúng, mới yêu cầu triển khai.

Bước 5: Ghép dữ liệu vào giao diện hiện tại

Sau khi đã xác định được nguồn dữ liệu, yêu cầu AI thay dữ liệu tĩnh bằng dữ liệu thật.

Prompt mẫu

> Hãy thay dữ liệu tĩnh trong section "Dịch vụ" bằng dữ liệu lấy từ EzyPlatform.
>
> Yêu cầu:
>
> * Giữ nguyên HTML structure và phong cách giao diện hiện tại nếu có thể.
> * Không thay đổi Brand Guideline Ezyvora.
> * Mỗi dịch vụ hiển thị tên, mô tả ngắn và hình ảnh nếu có.
> * Nếu dữ liệu không có hình ảnh, sử dụng fallback phù hợp.
> * Không hard-code lại dữ liệu dịch vụ trong HTML.
>
> Sau khi hoàn thành, hãy cho tôi biết những file đã chỉnh sửa.
Sau đó Preview website.
Nếu dữ liệu thật đã xuất hiện đúng, bạn đã hoàn thành bước chuyển đổi đầu tiên.
20260820161023788Z-5-5.png

Bước 6: Chuyển Blog sang dữ liệu thật

Blog là một trong những khu vực nên được đưa lên hệ thống sớm vì nội dung thường xuyên thay đổi.
Trang chủ có thể chỉ hiển thị một số bài viết mới nhất.
Trang Blog hiển thị danh sách đầy đủ.
Trang chi tiết hiển thị nội dung từng bài.
Quy trình nên làm theo thứ tự:
Danh sách bài viết → Trang chi tiết → Bài viết mới trên Trang chủ
**Prompt mẫu – Danh sách Blog
> Hãy chuyển trang Blog hiện tại sang lấy dữ liệu bài viết thật từ EzyPlatform.
>
> Mỗi bài cần hiển thị:
>
> * Tiêu đề.
> * Ảnh đại diện.
> * Mô tả ngắn.
> * Ngày đăng.
> * Link tới trang chi tiết.
>
> Giữ nguyên thiết kế card hiện tại.
>
> Ưu tiên cách render phù hợp với SEO.
>
> Không sử dụng dữ liệu giả hoặc localStorage.
20260820161023723Z-3-6.png
Sau khi danh sách hoạt động, tiếp tục với trang chi tiết.
Prompt mẫu – Chi tiết bài viết
> Hãy chỉnh sửa trang chi tiết Blog để lấy nội dung bài viết thật từ EzyPlatform theo slug hoặc định danh đang được sử dụng.
>
> Trang cần hiển thị:
>
> * Tiêu đề.
> * Ảnh đại diện.
> * Ngày đăng.
> * Nội dung bài viết.
>
> Giữ Header, Footer và Brand Guideline Ezyvora.
>
> Đảm bảo nội dung có sẵn trong HTML khi trang được tải để hỗ trợ SEO.
20260820161023671Z-1-6.1.png

Bước 7: Hiển thị bài viết mới trên Trang chủ

Khi Blog đã sử dụng dữ liệu thật, section bài viết mới trên Trang chủ cũng không cần dữ liệu giả nữa.
Prompt mẫu
> Hãy cập nhật section "Bài viết mới" trên Trang chủ.
>
> Lấy các bài viết mới nhất từ EzyPlatform thay cho dữ liệu tĩnh hiện tại.
>
> Chỉ hiển thị 3 bài.
>
> Mỗi bài gồm:
>
> * Ảnh đại diện.
> * Tiêu đề.
> * Mô tả ngắn.
> * Ngày đăng.
> * Link xem chi tiết.
>
> Giữ nguyên giao diện hiện tại.
Từ thời điểm này, mỗi khi đăng bài mới trên EzyPlatform, Trang chủ cũng có thể tự động cập nhật.
20260820161023685Z-2-7.png

Bước 8: Chuyển nội dung trang Giới thiệu sang hệ thống

Không phải mọi nội dung của trang Giới thiệu đều cần quản lý động.
Nhưng nếu doanh nghiệp muốn chỉnh sửa mà không cần mở VS Code, các phần như:
  • Giới thiệu chung.
  • Tầm nhìn.
  • Sứ mệnh.
  • Giá trị cốt lõi.
có thể được đưa lên EzyPlatform.
Prompt mẫu
> Hãy kiểm tra trang Giới thiệu.
>
> Tôi muốn chuyển các nội dung sau sang dữ liệu quản lý trên EzyPlatform:
>
> * Giới thiệu doanh nghiệp.
> * Tầm nhìn.
> * Sứ mệnh.
> * Giá trị cốt lõi.
>
> Giữ nguyên cấu trúc giao diện.
>
> Hãy đề xuất cách tổ chức dữ liệu phù hợp trước khi chỉnh sửa code.
Nếu nội dung này ít thay đổi, bạn cũng có thể giữ lại trong mã nguồn.
Điểm quan trọng là không cố gắng "động hóa" mọi thứ một cách không cần thiết.
20260820161023805Z-6-8.png

Bước 9: Chuyển thông tin liên hệ sang dữ liệu thật

Trang Liên hệ thường chứa:
  • Địa chỉ.
  • Số điện thoại.
  • Email.
  • Thời gian làm việc.
  • Mạng xã hội.
Những thông tin này nên được quản lý tập trung để nếu thay đổi, toàn bộ website có thể cập nhật theo.
Prompt mẫu
> Hãy chuyển các thông tin liên hệ đang được hard-code trên website sang dữ liệu quản lý từ EzyPlatform.
>
> Bao gồm:
>
> * Địa chỉ.
> * Số điện thoại.
> * Email.
> * Thời gian làm việc.
> * Liên kết mạng xã hội.
>
> Những dữ liệu này có thể xuất hiện ở cả Trang Liên hệ và Footer.
>
> Hãy sử dụng cùng một nguồn dữ liệu để tránh lặp lại.
Đây là một ví dụ quan trọng về việc một dữ liệu có thể được tái sử dụng ở nhiều vị trí trên website.
20260820161023737Z-4-9.png

Bước 10: Xử lý dữ liệu trống và lỗi

Website thật không phải lúc nào cũng có đầy đủ dữ liệu.
Ví dụ:
  • Bài viết chưa có ảnh.
  • Dịch vụ chưa có mô tả.
  • API tạm thời không trả dữ liệu.
  • Danh sách đang trống.
Vì vậy, cần yêu cầu AI xử lý các trường hợp này.
Prompt mẫu
> Hãy rà soát các phần đang lấy dữ liệu từ EzyPlatform.
>
> Bổ sung xử lý cho các trường hợp:
>
> * Danh sách trống.
> * Ảnh không tồn tại.
> * Mô tả bị thiếu.
> * Dữ liệu trả về null.
> * Lỗi khi tải dữ liệu.
>
> Không hiển thị lỗi kỹ thuật trực tiếp cho người dùng.
>
> Giữ giao diện ổn định ngay cả khi dữ liệu chưa đầy đủ.
20260820162639437Z-10-10.png

Bước 11: Loại bỏ dữ liệu giả còn sót lại

Sau khi các trang chính đã sử dụng dữ liệu thật, hãy yêu cầu AI rà soát toàn bộ dự án.
Prompt mẫu
> Hãy kiểm tra toàn bộ mã nguồn và tìm những dữ liệu giả còn sót lại.
>
> Tìm các trường hợp như:
>
> * Dữ liệu viết cứng trong JavaScript.
> * Mock data.
> * Mảng dữ liệu mẫu.
> * localStorage được sử dụng để giả lập nội dung.
> * Nội dung cũ từ template.
>
> Hãy liệt kê chúng trước.
>
> Chưa sửa code.
Sau khi kiểm tra danh sách:
> Hãy loại bỏ hoặc thay thế các dữ liệu giả vừa tìm thấy bằng dữ liệu thật từ EzyPlatform ở những nơi phù hợp.
>
> Không thay đổi các nội dung tĩnh mà chúng ta đã quyết định giữ trong mã nguồn.
20260820162639387Z-9-11.png

Bước 12: Kiểm tra dữ liệu từ Admin đến website

Bây giờ cần kiểm tra một điều rất quan trọng:
Thay đổi trên Admin có xuất hiện trên website hay không?
Hãy thử:
  1. Đăng nhập EzyPlatform Admin.
  2. Chỉnh sửa tên một dịch vụ.
  3. Thay ảnh đại diện một bài Blog.
  4. Đăng một bài mới.
  5. Lưu lại.
  6. Quay về website và Preview hoặc tải lại trang.
Nếu website hiển thị dữ liệu mới, luồng đã hoạt động đúng:
Admin EzyPlatform → Dữ liệu → Website
Đây là bước giúp website từ một sản phẩm "được code xong" trở thành một hệ thống thực sự có thể vận hành.

Bước 13: Yêu cầu AI rà soát toàn bộ luồng dữ liệu

Khi các phần chính đã hoạt động, thực hiện thêm một vòng kiểm tra.
Prompt mẫu
> Hãy rà soát toàn bộ website và các phần đang lấy dữ liệu từ EzyPlatform.
>
> Kiểm tra:
>
> * Có dữ liệu nào còn bị hard-code không.
> * Có dữ liệu nào được gọi nhiều lần không cần thiết không.
> * Có phần nào nên dùng server-side rendering nhưng đang gọi bằng JavaScript không.
> * Có API nào đang được gọi không đúng chỗ không.
> * Có xử lý null và dữ liệu trống chưa.
> * Có ảnh fallback chưa.
> * Có nội dung cũ từ template không.
>
> Ưu tiên SEO, khả năng tái sử dụng và dễ bảo trì.
>
> Trước tiên hãy liệt kê các vấn đề.
>
> Chưa sửa code.
Sau đó mới yêu cầu AI sửa những vấn đề hợp lý.
20260820162639482Z-12-13.png

Tạm kết

Sau khi website đã lấy được dữ liệu thật từ EzyPlatform, bước tiếp theo là tối ưu cách dữ liệu được hiển thị và tải xuống.
Ở bài tiếp theo, chúng ta có thể tiếp tục với tối ưu SEO, hiệu năng và cách tổ chức API, để website không chỉ có dữ liệu thật mà còn tải nhanh, dễ được Google đọc và dễ mở rộng về sau.