4.2.2.2. Cấu trúc của service
Service được chia thành 9 components tương ứng với 9 đối tượng quản lý trong hệ thống quản lý nghiệp vụ chăn nuôi lợn trong trang trại bao gồm: Event, EventType, Farm, HealthStatus, Pen, Pig, Role, User, WeightType.
Danh sách các API trong service Event
Component Event: Bao gồm API lấy các sự kiện từ chuồng nuôi, tạo sự kiện chochuồng nuôi, cập nhật thông tin sự kiện chuồng nuôi, xóa sự kiện chuồng nuôi.
Đỗ Đình Nam – D17HTTT1 67
Hình 4.12. Danh sách các API của component Event
Users
Component Users: ao gồm các API đăng nhập, đăng ký tài khoản hệ thống, active tài khoản, thay đổi mật khẩu và lấy thông tin User.
Hình 4.13. Danh sách các API của component Users
EventType
Component EventType: bao gồm API lấy các loại sự kiện chuồng nuôi, tạo loại sự kiện chuồng nuôi, cập nhật thông tin loại sự kiện chuồng nuôi.
Hình 4.14. Danh sách các API của component EventType
Pig
Component Pig: bao gồm API lấy danh sách lợn theo chuồng nuôi, theo trang trại, thêm lợn vào chuồng nuôi, tìm lợn theo mã AI đã gán, cập nhật và xóa thông tin lợn.
Đỗ Đình Nam – D17HTTT1 68
Hình 4.15. Danh sách các API của component Pig
Farm
Component Farm: bao gồm API lấy danh sách trang trại theo người dùng, tạo trang trại, lấy thông tin của mỗi trang trại, lấy tất cả thông tin lợn trong trang trại, cập nhật và xóa thông tin trang trại.
Hình 4.16. Danh sách các API của component Farm
HealthStatus
Component HealthStatus: bao gồm API tìm kiếm, tạo và cập nhật thông tin trạng thái sức khỏe.
Đỗ Đình Nam – D17HTTT1 69
Hình 4.17. Danh sách các API của component HealthStatus
Pen
Component Pen: bao gồm API lấy thông tin chuồng nuôi theo id, lấy thông tin các chuồng trong trang trại, tạo mới chuồng nuôi, cập nhật và xóa thông tin chuồng nuôi.
Hình 4.18. Danh sách các API của component Pen
WeightType
Component WeightType: bao gồm API lấy thông tin loại cân nặng cho lợn, tạo loại cân nặng mới và update thông tin của loại cân nặng.
Hình 4.19. Danh sách các API của component WeightType
4.2.2.3. Triển khai
Service chạy môi trường develop trên hệ điều hành Window với chuỗi lệnh sau ở terminal:
Đỗ Đình Nam – D17HTTT1 70
2. yarn dev
Service chạy môi trường Production trên hệ điều hành Ubuntu với chuỗi lệnh sau:
1. yarn build
2. yarn start-production
4.2.3. ReactJS WebApp
WebApp của em được xây dựng bằng Framework ReactJS. Là nơi người dùng thao tác với hệ thống. Lý do em lựa chọn ReactJS vì những lợi ích mang lại cho người lập trình và hệ thống:
ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nó sử dụng cú pháp đặc biệt là JSX. Thông qua JSX cho phép nhúng code HTML và Javascript.
ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những component độc lập. Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn.
Rất nhiều thư viện cung cấp sẵn cho ReactJS mẫu (Template) như: Table, Button, Grid, Tabs, Tags, Slide,.. như AntDesign. Giúp người lập trình tập trung vào sáng tạo logic và thiết kế mà không còn phải tốn công sức chỉnh sửa html và css thủ công.
4.2.3.1. Thư viện sử dụng
Thư viện Ý nghĩa
Material-UI
Thư viện cung cấp các component để có thể tạo ra trang web một cách nhanh chóng hơn, mà không phải đi css từng chút một.
antd Tương tự như Material-UI, Ant Design cung cấp nhiều component có sẵn với style hiện đại và dễ dàng tùy chỉnh.
Đỗ Đình Nam – D17HTTT1 71 axios
Là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp cho js và Nodejs.
chart.js
Là một Framework của Javascript dựa trên HTML5 để tạo các biểu đồ và đồ thị động, có tính tương tác cao và hỗ trợ responsive, tùy chỉnh hiển thị dữ liệu theo ý muốn.
date-fns Thư viện cung cấp bộ công cụ toàn diện nhưng đơn giản và nhất quán để xử lý ngày tháng trong js.
Formik
Giúp chúng ta giải quyết vấn đề phiền toái nhất trong form là: nhận giá trị ở trong và ngoài form state, validate giá trị và trả lại error messages, xử lý việc submit form.
node-sass Cung cấp khả năng sử dụng sass thay vì css. Sass là code viết css có cấu trúc, dễ đọc và dễ maintain hơn.
uuid Một thư viện giúp ReactJS sinh ra uuid (Universally Unique IDentifiers) sử dụng để định nghĩa ClientUuid khi gọi tới API Streaming Service.
Yup Formik dùng để quản lý form rất tốt. Cùng với Yup –
package dùng để validate dữ liệu giúp người dùng giải quyết hầu hết vấn đề trong form.