IV. CHƯƠNG 4: XÂY DỰNG THUẬT TOÁN CHO ROBOT TỰ HÀNH
4.6. Giao tiếp giữa robot và web
4.6.1. Thiết kế trang web
Sử dụng Angular framework để xây dựng giao diện trang web, được viết bằng ngôn ngữ TypeScript do Microsoft phát triển với ưu điểm dễ đọc, dễ bảo trì.
a) Cài đặt các công cụ và môi trường.
63 - Node.js phiên bản v14.10.0
- Npm phiên bản 6.14.8
b) Cài đặt Angular CLI
npm install -g @angular/cli
Tiếp theo, chúng ta tạo thư mục angular mới với my-app là tên thư mục.
ng new my-app
Chọn yes để tự động tạo routing cho dự án. Khi gặp câu lệnh thông báo hỏi từ terminal.
? Would you like to add Angular routing? (y/N)
Chọn loại ngôn ngữ SCSS để hỗ trợ việc thiết kế giao diện trang web. SCSS là ngôn ngữ tương đồng với CSS nhưng bảo mật thơng tin tốt hơn, giúp code an tồn hơn cho trang web
Chương trình tạo ra các thư mục như hình. Lúc này, chúng ta có thể bắt đầu làm việc hồn chỉnh với Angular Framework.
Hình 57: Cây thư mục chương trình
c) Cài đặt và thiết kế trang web
Để xây dựng trang web client và thiết kế giao diện. Chúng ta cần cài thêm bootstrap, đây là thư viện thiết kế CSS để xây dựng hỗ trợ trang web.
npm install --save bootstrap
Khi cài đặt bootstrap hoàn tất. Mở file styles.scss trong thư mục để thêm câu lệnh import bootstrap vào.
import "~bootstrap/dist/css/bootstrap.css";
Sau đó tiếp tục tạo các component trong angular để xây dựng trang web theo ý mình.
65 Trong sản phẩm của nhóm, nhóm thực hiện đã làm sơ lược 3 phần components gồm phần header, main và footer. Với phần header là phía phần đầu chứa tên web của nhóm, phần main chứa nội dung cần hiện cho người dùng xem và cuối cùng là phần footer kết thúc của 1 trang web.
Để thiết kế trang web, nhóm sử dụng Hypertext Markup Language để viết nội dung trang và SCSS với bootstrap để thiết kế trang web
Hình 58: Giao diện trang web 4.6.2. Xây dựng server
Xây dựng server web là một node của thư mục robot ROS 2. Khi triển khai, robot cũng sẽ thực thi node server để server lắng nghe các thông số từ Raspberry và Socketio. Mục đích là để phát dữ liệu đó cho webclient sử dụng, triển khai bằng package aiohttp dùng để tạo HTTP client/ server cho Asyncio hỗ trợ cả server websocket lẫn client websocket.
Triển khai code server.
Import aiohttp và socketio để hỗ trợ việc tạo server socket hỗ trợ thu phát dữ liệu liên tục cho client.
from aiohttp import web import socketio
Import threading hỗ trợ việc xử lý đa luồng, giúp cho server có thể vừa lắng nghe dữ liệu từ robot, vừa thao tác phát dữ liệu lên web.
import threading
Khai báo các đối tượng để triển khai server
sio = socketio.AsyncServer(async_mode='aiohttp') app = web.Application()
sio.attach(app)
Hàm main sử dụng triển khai server với http://localhost:8080/ def main(args=None):
try:
rclpy.init(args=args)
server = MyNode(sio, data) web.run_app(app, port= 8080) except KeyboardInterrupt:
rclpy.shutdown()