netProbe: Esp32 network Monitor 05

This is my 5th video in my series about creating a network probe on an ESP32 microcontroller. In this video I want to put together a basic, Minimum Viable Product (MVP), version of the Angular client. It’s not going to be pretty, but should allow me to manage the netProbe remotely and make sure all the basics are working. This is not an Angular tutorial so I will skip most of the coding other than showing the main components and the general plumbing of the client. I also will show anything that was new to me, I did run into a problem getting the Http Post to work so show how I updated microDot to get that working. The next video, 6, should be the last, I will look to clean the client with more styling, add some more error catching, and put everything together on the esp32 board. Then have a look at how well it is all working.

00:00 Introduction
01:07 Creating a new netProbeUI Angular project.
01:40 Adding Material Design components.
02:40 Adding Angular Google Charts
04:25 Adding the project to GitHub
04:58 Reviewing the home page design.
06:30 Walk through the home page component.
11:39 Walk through the history (charting) component.
16:18 Walk through the host component.
18:41 Look at problem I ran into doing a JSON post from the host component, CORS Options not supported by MicroDot.
22:22 Look at how I fixed the CORS Option problem.
26:27 Wind up, what’s happening in the next video (6)

Resources