Beep Boop 3: Create a Web App with Data and ML
Tags: beginners, codenewbie, programming, tutorial
Published: 2021-08-20 21:10:04

--- 
title: Beep Boop 3: Create a Web App with Data and ML
description: In part 3 of this series, we use data from real and animated basketball players from the film Space Jam: A New Legacy, to create a web app that simulates basketball games and makes decisions about who needs a water break.
tags: beginners, codenewbie, programming, tutorial
series: "Beep Boop"
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oo3cvjq2y4f8rdu5hp9.png
---

Thanks to everyone who joined us live for the 3rd episode of [Beep Boop with the Microsoft Reactor](aka.ms/BeepBooptube)- we started an awesome new [Microsoft Learn module](aka.ms/beepbooplinks3) where we used a machine learning model to simulate basketball games with the data we cleaned up last time! 👩‍💻👩🏽‍💻



If you missed the fun live, don't worry- you can watch the replay [here on YouTube](aka.ms/beepboop3), and in the embedded video below!



{% youtube tPfundi6Bz0 %}



**On this episode we cover:**



- [5:20](https://youtu.be/tPfundi6Bz0?t=320) [Chloe](https://twitter.com/ChloeCondon) tells us about an [AI/ML talk she did this weekend](https://aka.ms/beepboopbit) where she mentioned Beep Boop 🤖💕


- [9:20](https://youtu.be/tPfundi6Bz0?t=560) Previously on Beep Boop... we catch folks up on what they missed last episode! 🔁

- [14:17](https://youtu.be/tPfundi6Bz0?t=857) We introduce what we'll be working on this week, a [Microsoft Learn module where we'll learn how to create a web app that uses data to make decisions on the basketball court](aka.ms/beepbooplinks3) 🏀 

- [15:08](https://youtu.be/tPfundi6Bz0?t=908) One of our awesome viewers tells us about a [VS Code](aka.ms/beepboopvscode) extension that rainbow-ifies CSV files! 🌈📁

- [16:20](https://youtu.be/tPfundi6Bz0?t=980) A refresher on what tools you'll need to download to follow along with this session - [VS Code](aka.ms/beepboopvscode), an [Azure account](aka.ms/beepboopazure), and a few other bits and bobs ☁️🧵

- [18:04](https://youtu.be/tPfundi6Bz0?t=1084) Now that our data is squeaky clean 🧼, let's double check that we've [set up our local environment](https://aka.ms/beepboop3links2)


- [25:14](https://youtu.be/tPfundi6Bz0?t=1514) We [merge the two datasets](https://aka.ms/beepboop3links3), and add identifiers to our DataFrame so that we know who's who 👀🐰


- [30:38](https://youtu.be/tPfundi6Bz0?t=1838) We start our new machine learning adventure by [making a model](https://aka.ms/beepboop3links4), and [calculating some standard deviations](https://aka.ms/beepboop3links5) ➗🤓

- [43:32](https://youtu.be/tPfundi6Bz0?t=2612) First glimpse of our LIVE [web app](https://aka.ms/beepboop3links6) that we just made together! 😳💻

- [50:45](https://youtu.be/tPfundi6Bz0?t=3045) We learn about the [Code Tour extension](https://aka.ms/bbcodetour) in [VS Code](aka.ms/beepboopvscode) and how it can guide you through adding the JavaScript to your web app 👩🏽‍💻

- [55:55](https://youtu.be/tPfundi6Bz0?t=3355) Franklin gives us the scoop on how he feels about creating basketball game simulations with the Tune Squad 🐶🦴

*Did you have fun? Check out [Beep Boop 4: Add AI to Your Web App](aka.ms/beepboop4) where we add even more cool features to our web app - see ya then, friends!*