Exercise - Use CodeTour to build your web app functionality
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 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'll be able to complete this module and create a functional app. The app will help 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.
To get started using CodeTour, select the green arrow for the first tour, called 1 - Create Variables. When you select the arrow, 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.
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