10 Phụ lục của đề tài
3.2 Quản lý API server của hệ thống Utraffic với PM2
3.3.2 Thiết kế API
Chúng tôi thiết kế các API sử dụng trong hệ thống hiện tại theo tiêu chuẩn
RESTful (hay còn gọi là RESTful API [43]). RESTful API là một tiêu chuẩn dùng
trong việc thiết kế các API cho các ứng dụng web để quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile. . . ) khác nhau giao tiếp với nhau.
Chức năng quan trọng nhất của RESTful API là quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE. . . ) và cách định dạng các URL cho ứng dụng web để quản các resource. RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API .
3.3.3 Định dạng trả về của API
Để việc giao tiếp giữa ứng dụng trên điện thoại, ứng dụng web với server API được dễ dàng, chúng tôi đã định nghĩa cấu trúc trả về của các API như sau:
1 { 2 " code ": xxx, 3 " message ": "", 4 " data ": { }, 5 " errors ": [ ], 6 " d e b u g E r r o r ": { } 7 } Trong đó:
• code là một số biểu thị trạng thái của kết quả. Chi tiết được thể hiện ở bảng
3.1:
Bảng 3.1: Danh sách trạng thái kết quả
Code Trạng thái Chi tiết
200 SUCCESS Thực hiện hành động thành công.
400 BAD REQUEST Tham số đầu vào không hợp lệ.
401 UNAUTHORIZED Người dùng chưa xác thực.
404 NOT FOUND Đường dẫn không tìm thấy.
409 CONFLICT Tài nguyên đã tồn tại.
500 INTERNAL SERVER ERROR Lỗi server.
503 SERVICE ERROR Dịch vụ lỗi.
• message giải thích cho trạng thái kết quả
• data là trường chứa dữ liệu trả về cho phía application
• errors là danh sách các lỗi (nếu có) dùng để phía application xác định và hiển thị chi tiết lỗi cho người dùng. Danh sách lỗi được định nghĩa trong bảng
Bảng 3.2: Định nghĩa danh sách lỗi
Reason Message Detail
required Missing parameter The parameters are missing
invalid Invalid format The field has invalid format
incorrect Incorrect The field has valid format but this value is incorrect
duplicated Duplicate The field has valid format but this value is duplicated
• debugError đây là trường chỉ trả về trong điều kiện kiểm thử. Trường này giúp lập trình viên dễ dàng nhận biết và sửa lỗi hệ thống hơn.
3.4 Ứng dụng Web
3.4.1 ReactJs
Ứng dụng web hiện tại của hệ thống phát triển chủ yếu dựa trên thư viện Re- actJS [44]. Đây là thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI) được phát triển bởi Facebook. Nó cung cấp tốc độ phản hồi tuyệt vời cho người dùng bằng cách sử dụng phương pháp mới để render trang web.
Single Page Application (SPA) là một công nghệ web mới đang rất được ưa chuộng hiện nay. Công nghệ này giúp khắc phục các điểm hạn chế của công nghệ web cũ (server-side render) như:
• Mã nguồn phía backend và frontend lẫn lộn vào nhau gây khó khăn cho nhà
phát triển.
• Với server-side render việc ráp dữ liệu vào giao diện được thực hiện ở server. Điều này gây tiêu tốn tài nguyên, làm giảm hiệu năng hoạt động của server.
• Mỗi khi người dùng chuyển trang, trang web cần tải lại toàn bộ tài nguyên
gây tốn băng thông, server phải tải nhiều và người dùng phải đợi lâu.
Những trang web được viết bằng công nghệ SPA sẽ chỉ tải các tài nguyên cần thiết ở lần đầu tiên. Mỗi khi người dùng mở trang khác, web chỉ tải những tài nguyên mới, chưa có chứ không tải lại tất cả, điều này giúp website hoạt động nhanh, mượt mà hơn, mang lại trải nghiệm tốt hơn cho người dùng.
Một số khái niệm trong ReactJs:
• Component: ReactJs được xây dựng xung quanh các component. Các com-
ponent này cho phép nhà phát triển chia UI thành các thành nhiều phần độc lập, có thể tái sử dụng nhiều lần ở những trang khác nhau trong dự án.
• Props: là viết tắt của "properties", là một đối tượng (object) lưu trữ các thuộc tính (attributes), dùng để truyền dữ liệu vào trong một component khi sử dụng. Khi thuộc tính của props truyền vào bị thay đổi, component sẽ tự động hiển thị lại. Các thuộc tính trong props chỉ có thể được đọc, không thể được thay đổi trong component đó.
• State: là một đối tượng lưu trữ các thuộc tính của component trong chính component đó. Tương tự như props, khi một thuộc tính của state bị thay đổi, component chứa nó sẽ tự động hiển thị lại. Các thuộc tính của state có thể đọc và thay đổi được trong component chứa nó.
• Lifecycle: là vòng đời của một component, hình 3.3 thể hiện các vòng đời của một component. Một số lifecycle thường được sử dụng trong Reactjs:
– componentDidMount(): Chạy sau khi component đã được render lần đầu.
– componentWillUnmount(): Chạy trước khi một component bị xóa khỏi
trang hiện tại.
– componentDidUpdate(): Chạy khi có một props hoặc state thay đổi.