Giao diện DApp

Vẻ đẹp của các Decentralized App nằm ở việc bạn có thể không cần dùng tới Backend để duy trì dịch vụ. Một giao diện được kết nối trực tiếp với Blockchain nếu được thiết kế tốt vẫn tạo ra một trải nghiệm mượt mà cho người dùng.

https://remix.run

Trong phạm vi series, chúng ta sẽ sử dụng RemixJS để xây dựng một ứng dụng. Lý do chọn RemixJS thay vì NextJS? Theo quan điểm của người viết, NextJS được tạo ra theo hướng "opinionate" và phục vụ cho hạ tầng Vercel. Còn RemixJS, bản thân nó là opensource và được thiết kế để hoạt động với mọi hạ tầng.

Điều này càng được khẳng định khi ChatGPT đã chuyển từ NextJS sang RemixJS.

@preview

Khởi tạo RemixJS

Chúng ta sử dụng câu lệnh create-remix với các cài đặt mặc định.

Ta được cấu trúc dự án như sau:

Cài đặt DaisyUI

DaisyUI có thể xem như một superset của TailwindCSS. Thay vì phải viết các css class dài, DaisyUI tạo nên các class lớn và cho phép tái sử dụng một cách thống nhất.

Thêm DaisyUI và tailwind.config.ts:

Ngoài ra chúng ta cũng sẽ refactor lại các tổ chức các file css vào thư mục styles.

Xoá file tailwind.css, cập nhật app/root.ts, và thêm styles/index.scss với nội dung:

Sử dụng font mặc định Inter. Đối với màn hình lớn 1rem = 16px, còn nếu màn hình nhỏ thì 1rem = 14px.

Khởi động ứng dụng

Thay thế nội dung file app/routes/_index.tsx:

Chạy lệnh pnpm dev ta sẽ được giao diện như hình.

Giao diện ứng dụng.

Cài đặt môi trường

Ứng dụng có thể chạy trên nhiều môi trường như test, staging, hoặc production. Thay vì thay đổi configs cho từng môi trường một cách thủ công, chúng ta có thể thiết lập nhận biết môi trường tự động từ đó xuất ra bộ cài đặt phù hợp với môi trường đó.

Bạn có thể tái sử dụng Infura API ở Bài 3. Triển khai Smartcontract.

Lưu ý các giá trị trong configs là công khai. Vì vậy, cần tránh lưu các giá trị secret ở trong configs.

Sử dụng SDK

Chúng ta đã triển khai SDK ở Bài 4 và sẽ sử dụng nó để đọc giá trị biến counter trong bài này.

Kết quả sẽ được:

Giá trị counter được load và hiển thị.

Phụ lục

The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0

Cập nhật bộ biên dịch mới cho scss trong vite.config.ts.

Autoformat trong VSC

🎨 Prettier - Code formatter by Prettier

❓ How do you format code on save in VS Code - Stackoverflow