Web Development for Robotics Course - Python

Learn to create web applications for your robots

Course Summary

Web applications are a key feature in robotics since they allow you to provide an interface for robots that can be used by anybody (especially inexperienced users).

In this course, you will learn to build simple, interactive web applications that you can integrate into your robotics development.

What you will learn

Rosbridge: Use the Rosbridge to connect your web pages to ROS
HTML5: Learn to build web pages containing the necessary elements to display your desired information. From simple titles and paragraphs to complex table data and forms to collect user's input and process that information
CSS3: Learn to style your web pages to make them look great
JavaScript: Learn basic instructions, types, arrays, and objects starting from programming logic.
ReactJS: Learn to create scalable web applications by providing an organized folder structure and compiler for your web components

Course Overview

Introduction

This unit summarizes the course objectives. First, it walks you through the basic concepts of web development, like HTML and CSS, its primary programming language, JavaScript, and finally, creating scalable web applications using one of the most popular frameworks, ReactJS.

HTTP Server

How to setup an HTTP server for your development environment

HTML basics

This unit presents the basic HTML elements, that will help you displaying information accordingly to the way they should using HTML notation

Working with Forms

This unit presents HTML forms, an essential element that groups different input types that allow you to get data from the user to the browser.

CSS - Styles for webpages

This unit is an introduction to CSS. You will understand CSS selectors and the most common attributes used to style web pages.

CSS - Exploring attributes

This unit presents essential CSS attributes. You will understand display elements in many ways and format them as you wish using the most common attributes to style web pages.

JavaScript - Making pages dynamic

This unit presents the JavaScript language, its main features, statements, syntax, basic variables, data types, and operators.

Working with Arrays

This unit presents the Array class of JavaScript and we will try some of its methods and properties while we read some data from the robot we have running.

ReactJS

This unit presents a quick way to start working with ReactJS. There are a couple of options to work with it. You will try the quickest one to make use of the framework.

Creating components

React components allow you to split your code into reusable and isolated pieces. This is great to keep your code organized and simple. So why do you need components? This is the best way to develop reusable parts of code. A component has its own state, gets parameters, and sends commands back to the code that imports it. Let's see how it works!

Teachers

Marco Arruda

Connecting Robots and Web. Passionate about learning/teaching.