Tạo ứng dụng trên điện thoại

Một phần của tài liệu ĐỒ án môn học 1 đề tài đếm sản PHẨM BẰNG cảm BIẾN HỒNG NGOẠI NGÀNH CÔNG NGHỆ kỹ THUẬT điện tử VIỄN THÔNG (Trang 57 - 62)

Ứ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

Một phần của tài liệu ĐỒ án môn học 1 đề tài đếm sản PHẨM BẰNG cảm BIẾN HỒNG NGOẠI NGÀNH CÔNG NGHỆ kỹ THUẬT điện tử VIỄN THÔNG (Trang 57 - 62)