Ứng dụng được thiết kế trên MIT App Inventor 2, là một nền tảng cho phép người dùng có thể lập trình ứng dụng Android ngay trên trình duyệt web của máy tính cá nhân. MIT App Inventor 2 sử dụng các giao diện đồ hoạ đã được thiết kế sẵn để tạo nên giao diện ứng dụng, sau đó sử dụng các khối mã bằng cách kéo và thả để tạo các đoạn mã nguồn bên trong ứng dụng.
38
Hình 3.17: Các công cụ thiết kế giao diện trong App Inventor
39
Hình 3.18: Thiết kế giao diện ứng dụng
Bằng cách sử dụng các công cụ trong hình 3.17, người thực hiện đã thiết kế nên giao diện trên ứng dụng điện thoại được miêu tả ở hình 3.18. Trong đó, sử dụng các “Label” kết hợp với “Horizontal arrangement” để đặt tên và căn chỉnh vị trí các nhãn tên. Sử dụng “TableArrangement” và các “Label” để tạo dữ liệu dạng bảng. Trong bảng dữ liệu này, dữ liệu sẽ được hiển trị trong 7 ngày gần nhất bao gồm thời gian, số lượng sản phẩm đếm được và số thùng đóng gói được. Sau đó, liên kết Firebase đến ứng dụng bằng cách sử dụng Firebase URL và Firebase token như ở hình 3.19.
40
Hình 3.19: Liên kết ứng dụng đến Firebase
Với yêu cầu là quan sát dữ liệu trong 7 ngày gần nhất, người thực hiện chọn các dữ liệu sẽ được lưu trữ và hiển thị theo thứ trong tuần. Trên cơ sở dữ liệu ở hình 3.20, các dữ liệu được lưu trữ dưới dạng “nhãn tên: dữ liệu” trong đó “nhãn tên” được đặt theo cú pháp “thứ trong tuần + thông tin” ví dụ như “MondaySP” là số lượng sản phẩm của thứ 2, “MondayTH” là số thùng của thứ 2 và “MondayTIME” là ngày – tháng – năm của thứ 2 đó.
Ở hình 3.21 mô tả việc sử dụng các khối mã để thiết kế chức năng cho ứng dụng. Khi dữ liệu trên Firebase thay đổi, khối “if then” đầu tiên sẽ lấy dữ liệu của “nhãn tên” là “MondayTIME” và hiển thị lên trên màn hình ứng dụng. Tương tự cho các khối “if then” còn lại. Nếu “nhãn tên” nào chưa được tạo trên Firebase, thì màn hình sẽ hiển thị “Not Found” tại ô chứa dữ liệu đó như trên hình 3.18.
41
Hình 3.20: Lưu trữ dữ liệu trên Firebase
Hình 3.21: Thiết kế chức năng ứng dụng
42
CHƯƠNG 4
KẾT QUẢ THỰC HIỆN