Mô tả

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.

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

Create a web interface to teleoperate a robot

Develop a web interface for robot navigation

Use JavaScript React front-end development

Use ROSBridge to interact with ROS ecosystem

Yêu cầu

  • Be familiar with ROS concepts and ecosystem
  • Recognizes the concepts of the navigation
  • Has basic knowledge on Web development
  • Understand Javascript

Nội dung khoá học

6 sections

Introduction

6 lectures
Introduction
04:45
Overview of Libraries and Resources
04:43
[Important] Seed project structure
00:41
How to follow this course?
00:14
[IMPORTANT] What is you face errors and need to debug and find solutions?
00:58
Accessing the Instructor Code for the Udemy ROSBridge Course
00:23

Create the Basic React Application

7 lectures
Install a new React Application
01:27
Understand the anatomy of a React App
07:28
Setting-up the bootstrap theme
04:05
Create a Header and Footer components
06:52
Add a navigation bar to the header component
07:00
Create a Router of Pages
08:01
Customize the footer
02:07

Connection Component: Establish a Robot Connection with the Web App

9 lectures
Overview of the <Connection/> component
03:10
Understand the concept of state in React
07:43
Create the <Connection/> Component
02:08
Import the ROSLIB Dependency
12:47
Create an Alert component
04:00
Connection Logic with ROSLib and React State
03:57
Connect to ROSBridge
03:32
Dealing with automatic reconnection
02:55
Clean code and use configuration file
05:35

Teleoperation Component: Drive your robot from the web app

9 lectures
Create a Teleoperation Component
01:28
Arrange page layout using the React Grid structure
02:59
Develop the React Joystick Component
04:52
The structure of the handleMove method
01:13
Create a cmd_vel publisher inside handleMove
04:00
Create and publish a twist message using ROSLib
04:14
The event property of the react joystick component
00:20
Setting the right velocities from the Joystick component throttle
01:58
The HandleStop Method
01:55

Display Robot Position, Orientation and Speed

7 lectures
Note before watching next lectures
00:17
Setup the Turtlebot3 Simulator
02:42
Test Teleop with Turtlebot3
03:57
Create the Robot State ReactJS Component
05:41
Create A position subscriber and visualize position on the map
06:41
Create a subscriber for the orientation
06:41
Create a subscriber for the velocities
05:58

Map-based navigation on the browser

7 lectures
Overview
01:37
Create a <Map> component
01:21
Initialize a ROS Connection in <Map> Component
01:19
Importing Map and Navigation JS Libraries
02:21
Visualize the map on the browser
06:48
Improve the page layout
00:36
Visualize the robot position on the map
05:41

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.