Chương 4. THI CÔNG HỆ THỐNG
4.3. LẬP TRÌNH HỆ THỐNG
4.3.3. Phần mềm lập trình cho ứng dụng trên điện thoại
Để có một ứng dụng trên điện thoại hoàn chỉnh ta cần phải tiến hành gửi dữ liệu từ vi điều khiển lên một phần mềm lưu trữ dữ liệu, sau đó sang một phần mềm khác thiết kế ứng dụng nhận cơ sở dữ liệu đó về và hiển thị. Ở hệ thống này, sử dụng ESP8266 gửi dữ liệu lên Firebase lưu trữ và thiết kế ứng dụng trên phần mềm MIT App Inventor lấy cơ sở dữ liệu từ Firebase về.
❖ Gửi dữ liệu lên Firebase
Bước 1: Truy cập vào Firebase theo đường link https://firebase.google.com/
và bắt đầu tạo project.
Bước 2: Tạo Realtime Database
Hình 4.36 Màn hình bắt đầu tạo Realtime Database
Đầu tiên nhấn “Build” thanh công cụ sẽ xổ xuống phần “Realtime Database”
thì nhấn vào và nhấn “Create Database”.
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 78
Hình 4.37 Bắt đầu setup cho database
Chọn địa chỉ cho Database, ở đây nhóm chọn địa chỉ gần mình nhất là ở Singapore. Sau khi nhấn “Next” thì chọn chế độ “locked mode” và hoàn thành việc setup cho database sau khi nhấn “Enable”.
Hình 4.38 Sửa Rules cho database
Sau khi tạo được database nhóm tiến hành truy cập vào Rules của Realtime Database (1), chỉnh sửa lại thành “true”(2), và publish thay đổi (3).
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 79
Bước 3: Lấy thông tin Firebase cho vi điều khiển
Để Firebase có thể nhận được dữ liệu từ vi điều khiển gửi lên thì cần phải khởi tạo cấu hình Firebase, kết nối wifi và URL của Firebase bằng code cho vi điều khiển.
Hình 4.39 Lấy thông tin kết nối của Firebase cho vi điều khiển
Sao chép thông tin API Key (1) và URL (2) của Firebase thay vào code, đây là 2 thông tin quan trọng để Firebase và vi điều khiển có thể kết nối với nhau. Sau khi chạy code thành công kết nối với Firebase, ở phần Realtime Database sẽ hiển thị các thông số dữ liệu cần gửi lên như hình 4.40.
Hình 4.40 Màn hình hiển thị các dữ liệu trên Firebase
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 80
❖ Thiết kế giao diện ứng dụng điện thoại
Nhóm lựa chọn phần mềm MIT App Inventor để thiết kế ứng dụng điện thoại, dùng để theo dõi các dữ liệu nhiệt độ. Phần mềm sử dụng phương thích lập trình kéo - thả bao gồm cả phần thiết kế giao diện và viết code, gồm 2 phần chính là giao diện thiết kế Designer (hình 4.41) và giao diện lập trình Blocks (hình 4.42).
Hình 4.41 Giao diện thiết kế Designer Hình 4.42 Giao diện lập trình Blocks
• Giao diện thiết kế Designer
Hình 4.43 Giao diện chính để thiết kế của MIT App Inventor
Như hình 4.43 có thể thấy giao diện thiết kế Designer gồm 4 thành phần có nhiệm vụ quan trọng như sau:
(1) Palette: bao gồm các thành có thể kéo thả để đặt lên trên Screen như:
button, checkbox, switch,... Ở hệ thống này chủ yếu dùng ứng dụng chỉ để theo dõi nên chủ yếu chỉ sử dụng 2 thành phần image và label.
(2) Viewer: hiển thị giao diện của ứng dụng đang được thiết kế. Có thể kéo thả các thành phần trong Palette sang đây để xây dựng giao diện hoàn chỉnh.
(3) Components: hiển thị sơ đồ cấu trúc bố trí của các thành phần đã chọn từ Palette đặt trong Viewer.
(4) Properties: hiển thị các đặc điểm của từng thành phần đã được chọn.
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 81
Sau khi thiết kế xong giao diện, cần thả thành phần FirebaseDB trong nhóm Experimental của Palette vào Viewer. [17]
Hình 4.44 Thả FirebaseDB vào Viewer
Để kết nối ứng dụng với Firebase thì cần phải lấy 2 thông tin quan trọng từ Firebase bao gồm FirebaseToken và FirebaseURL.
Muốn lấy FirebaseToken và FirebaseURL cần phải quay lại phần mềm Firebase và tiến hành theo các bước:
- Vào project được tạo thành công trước đó, nhấn chọn vào phần “project settings” (1).
- Màn hình chuyển hướng đến Project settings thì chọn vào mục “Service accounts”(2) và nhấn chọn vào “Database secrects” (3).
- Sao chép phần Secrect (4) dán vào FirebaseToken bên MIT App.
- FirebaseURL là đường liên kết ở trong Realtime Database đã lấy được ở trên.
Hình 4.45 Cách lấy thông tin từ Firebase để liên kết ứng dụng
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 82
Sau khi sao chép, dán vào trong MIT App như hình bên dưới:
Hình 4.46 Dán thông tin vừa lấy được vào MIT App
• Giao diện lập trình Blocks:
Sau khi thiết kế xong giao diện và liên kết Firebase thì đến phần quan trọng nhất để một ứng dụng có thể hoạt động là code lập trình. Vì trong phần mềm code cũng được sử dụng thao tác kéo - thả nên muốn lập trình ứng dụng cần phải kéo thả các khối trong giao diện lập trình Blocks.
Hình 4.47 Khối nhận dữ liệu từ Firebase
Khối “whenFirebaseDB1.GotValue” ở hình 4.47 có nhiệm vụ khi ứng dụng yêu cầu một giá trị từ cơ sở dữ liệu Firebase, sự kiện "GotValue" sẽ được kích hoạt khi giá trị đó được trả về. Khối này có hai biến quan trọng: "tag" và "value". Biến
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 83
"tag" đại diện cho khóa của dữ liệu mà bạn đã yêu cầu, trong khi biến "value" là giá trị của dữ liệu trả về từ Firebase. Ví dụ trong hệ thống này nhóm sử dụng tag “set”,
“men” và vongtay” để khi lấy dữ liệu từ Firebase theo các biến lần lượt là “set_temp”,
“men” và “vongtay” thì các tag trên sẽ hiển thị thông số dữ liệu tương ứng.
Khối "whenFirebaseDB1.DataChanged" trong hình 4.48 có nhiệm vụ xử lý các sự kiện khi có sự thay đổi dữ liệu trong cơ sở dữ liệu Firebase. Khi sự kiện này được kích hoạt, nó sẽ kiểm tra giá trị của "tag" để xác định loại dữ liệu nào đã thay đổi. Nếu "tag" là "set", "men", hoặc "vongtay", giá trị tương ứng sẽ được hiển thị trên các nhãn tương ứng với đơn vị "°C". Nếu "tag" là "TOGGLE", giá trị sẽ được lưu vào biến toàn cục TOGGLE. Sau đó, giá trị của TOGGLE sẽ được kiểm tra: nếu là "1", màu nền của Label18 sẽ chuyển thành màu xanh và nhãn sẽ hiển thị "THE SYSTEM IS OPERATING"; nếu là "0", màu nền sẽ chuyển thành màu xám và nhãn sẽ hiển thị
"THE SYSTEM IS NOT OPERATING". Khối này giúp cập nhật giao diện người dùng ngay lập tức khi có thay đổi dữ liệu từ Firebase, đảm bảo thông tin hiển thị luôn chính xác và kịp thời.
Hình 4.48 Khối phát hiện sự thay đổi khi có dữ liệu mới
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 84
Sau khi thiết kế xong giao diện và code lập trình thì tiến hành build ứng dụng thành tệp “.apk” để tải về điện thoại hệ điều hành android. Quay về giao diện Designer và nhấn chọn các bước như hình 4.49
Hình 4.49 Build ứng dụng
Khi đã tải tệp bằng cách nhấn tải hoặc quét QR code thì nhóm đã có được ứng dụng hoàn chỉnh.
Hình 4.50 Màn hình giao diện ứng dụng hiển thị hệ thống chưa hoạt động
Hình 4.51 Màn hình giao diện ứng dụng hiển thị hệ thống đang hoạt động Ở hình 4.50 là màn hình giao diện của ứng dụng khi hệ thống chưa được nhấn giữ nút Start để khởi động nên sẽ hiển thị “the system is not operating” và khi nhấn chạy hệ thống sẽ được hiển thị “the system is not operating” như hình 4.51. Khi nhấn giữ nút Stop dừng hệ thống sẽ ứng dụng sẽ quay lại hiển thị như hình 4.50.
CHƯƠNG 4. THI CÔNG HỆ THỐNG
BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH 85
Sau đó tiến hành thiết kế icon biểu tượng để nhận diện cho ứng dụng như hình 4.52.
Hình 4.52 Icon biểu tượng của ứng dụng