Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

ROS for Beginners III: Web-based Navigation with ROSBridge

ROS cho Người mới III: Điều hướng Robot qua Web với ROSBridge

ROS cho Người mới III: Điều hướng Robot qua Web với ROSBridge

Ứng dụng React và JavaScript để điều khiển và giám sát robot ROS qua giao diện Web

4.5
(257 đánh giá)
1,720 học viên
Giảng viên
Anis Koubaa
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
3.0 giờ video
45 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Tạo giao diện web để điều khiển robot từ xa
Phát triển giao diện web cho điều hướng robot
Sử dụng JavaScript React để phát triển giao diện front-end
Sử dụng ROSBridge để tương tác với hệ sinh thái ROS

Yêu cầu

Làm quen với các khái niệm và hệ sinh thái ROS
Hiểu các khái niệm về điều hướng
Có kiến thức cơ bản về phát triển Web
Hiểu JavaScript

Đối tượng phù hợp

Kỹ sư robot đám mây
Người học và người đam mê ROS
Lập trình viên phát triển ứng dụng robot

Nội dung khóa học

6 phần • 45 bài giảng
1 Giới thiệu
2 Tổng quan về Thư viện và Tài nguyên
3 [Quan trọng] Cấu trúc dự án mẫu
4 Cách học khóa học này
5 [QUAN TRỌNG] Xử lý lỗi và tìm giải pháp khi gặp sự cố
6 Truy cập mã nguồn từ giảng viên cho khóa học ROSBridge trên Udemy
1 Cài đặt ứng dụng React mới
2 Hiểu cấu trúc của một ứng dụng React
3 Thiết lập theme bootstrap
4 Tạo các component Header và Footer
5 Thêm thanh điều hướng vào component Header
6 Tạo bộ định tuyến cho các trang
7 Tùy chỉnh footer
1 Tổng quan về component
2 Hiểu khái niệm state trong React
3 Tạo Component
4 Nhập thư viện ROSLIB
5 Tạo component thông báo
6 Logic kết nối với ROSLib và React State
7 Kết nối tới ROSBridge
8 Xử lý kết nối lại tự động
9 Viết code sạch và sử dụng file cấu hình
1 Tạo Component Điều khiển từ xa
2 Sắp xếp bố cục trang bằng cấu trúc lưới React
3 Phát triển Component Joystick trong React
4 Cấu trúc phương thức handleMove
5 Tạo publisher cmd_vel bên trong handleMove
6 Tạo và gửi tin nhắn twist bằng ROSLib
7 Thuộc tính event của component react joystick
8 Thiết lập vận tốc phù hợp từ throttle của component Joystick
9 Phương thức HandleStop
1 Lưu ý trước khi xem các bài tiếp theo
2 Thiết lập Mô phỏng Turtlebot3
3 Kiểm tra điều khiển từ xa với Turtlebot3
4 Tạo Component Robot State bằng ReactJS
5 Tạo subscriber vị trí và hiển thị vị trí trên bản đồ
6 Tạo subscriber cho hướng
7 Tạo subscriber cho vận tốc
1 Tổng quan
2 Tạo một component
3 Khởi tạo kết nối ROS trong Component
4 Nhập các thư viện JS Bản đồ và Điều hướng
5 Hiển thị bản đồ trên trình duyệt
6 Cải thiện bố cục trang
7 Hiển thị vị trí robot trên bản đồ

Giới thiệu khóa học

Welcome to the course on ROS for Beginners III Web-based Navigation with ROSBridge. I am Anis Koubaa, and I will be your instructor in this course. This course is the third course in the series ROS For Beginners. It is a project-based course that deals with how to develop a web interface to teleoperate and interact with ROS-enabled robots.

Project Overview

At the end of this course project, you will develop a web interface that will allow you to teleoperate and monitor the robot based on ROS. The Web interface will be developed using ReactJS, which is a popular JavaScript framework for front-end development.

We will first start by developing a component that will tell us whether the robot with which we would like to communicate is connected or not connected. Then, you will develop another component to teleoperate the robot through a web-based joystick in ReactJS. You also implement a button for stopping the robot in an emergency situation. Furthermore, the web interface will display live information about the robot such as its position, orientation, and linear and angular velocity. The last part of this project deals with map-based navigation. You will be able to display the navigation map on the web browser and send the goal location for the robot to navigate to. In the end, you will develop a comprehensive web interface that will allow you to interact with your robot easily through a web interface using the most popular JavaScript framework, which is ReactJS.

Why this course?

This course represents a first step into the world of cloud robotics.

Cloud robotics is an emerging topic in the last few years and it aims at integrating mobile robots with cloud computing systems and the Internet of Things through web services interfaces.

Besides, I have developed this course because there are not sufficient pointers and no comprehensive tutorials on how to make web browsers interact with robots.

What's worth in this course?

This course is unique in the sense that it is designed to Bridge the gap between the robotics world and the web development world.

In fact, most of the engineers who work in the robotic area do not have a background in web development, and most of the web developers do not have a background on robots or ROS. This course bridges these two areas together and provides a systematic introduction to the topic of web development for ROS-enabled robots.

Furthermore, we will use the ReactJS web development technology which the most evolving most popular javascript front-end development framework.

You will learn all the tricks in a step-by-step approach to help you save plenty of time looking around for scattered documentation.

Pre-requisites

To take the most benefit from this course, you should be already familiar with Robot Operating System (ROS) and its navigation stack. If you are not familiar with ROS, then take by two courses ROS For Beginners I and ROS For Beginners II before diving into this course.

As we will do some web development, it will be recommended to have some very basic understanding of HTML, CSS, and JavaScript, just basics and nothing advanced. You can take any introduction about HTML, CSS, and JS if you do not know about them.

It is not required that you have any Prior knowledge of ReactJS because I will introduce all the essential concepts in this course.

Welcome to the course and I wish you a pleasant learning experience.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Robotics
ROS Actions

ROS Actions

Edouard Renard

4.7 (149)
1,634
50.000đ -86%
Hiển thị tất cả khoá học Ros
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊