Exercise - Use CodeTour to build your web app functionality

Completed

Now that you have your Azure Static Web Apps project created on GitHub and connected to Azure, you can start making the app functional!

We'll build a very basic app. If you want, you can continue building up your web app after you complete the module to make it look better. We're going to focus on the functionality of connecting data with a web app.

Although the rest of this module will include explanations for the code that we're writing, you have two options for actually writing the functionality for this web app:

  • Use CodeTour and be guided through writing the JavaScript from within Visual Studio Code.
  • Copy and paste code from this module, like you did with Python code for the Jupyter Notebook files.

Using CodeTour offers you an opportunity to see how well you can write code when you have instructions, but not the exact code to copy and paste. If you want to challenge yourself, try starting with CodeTour. And you have nothing to worry about because you can always look at the code in this module to get back on track if you get stuck.

Whichever learning journey you choose today, you will be able to complete this module and create a functional app that helps Tune Squad basketball coaches choose which player to give a water break to, while optimizing the team's chances of winning the game.

Using CodeTour

Using CodeTour is easy. In fact, CodeTour is already set up in the repo that you cloned in the last unit!

Open the CodeTour extension in Visual Studio Code Explorer. You should see a list of tours. Each tour has a few steps in it to guide you through your code writing.

Screenshot that shows CodeTour in Visual Studio Code, with the green arrow highlighted.

To get started using CodeTour, select the green arrow for the first tour, called 1 - Create Variables. When you do this, a step pops up in a new file. Follow the instructions in the step, and then select the Next button at the bottom of the window to go to the next step.

Screenshot that shows the first step in a CodeTour file.

If at any point you want to stop using CodeTour, select the red square next to the CodeTour name. To resume, select that green arrow!

When you've finished a step in CodeTour, the next one will be available for you to start. Each CodeTour step guides you through creating a portion of the functionality for this app without giving you the exact code. If you get stuck, remember that you can always take a look at this Learn module or at the complete-code branch in the repository you cloned.

© 2021 Warner Bros. Ent. All Rights Reserved