girl working at computer

Web Apps: Diving In

  • Make a web app that displays images and plays sounds
  • Learn how to make data graphs in Python using Jupyter Notebooks
  • Make a data dashboard web app with Streamlit

STREAMLIT

Making a web app with Streamlit and Python is straightforward. Like block-based coding platforms, the Streamlit platform includes many components and widgets that can be added to your app with a single line of code. Most of the code is already written and packaged for you, so you can focus on the goals of your app, rather than getting bogged down in lots of difficult code. 

To practice using Streamlit, we will take one of our mobile app examples from Thunkable and App Inventor, and show how the same app can be built in web app form using Streamlit. 

ACTIVITY 1: SOUNDBOARD APP

Estimated time: 30 minutes

Code a Streamlit Web App

  1. Click button below to download assets (images and sound files) that will be needed to make the app.
  2. Follow this video to create a simple Soundboard app that plays sounds when a button is pressed.
    If you haven't already installed Python and Streamlit, complete the Exploring Web App Builders Activity before doing this activity.
  3. Add a fourth person to your app. Find an image and short sound file to add to the app. Here is a link to some famous speeches.
Download asset files

WORKING WITH DATA

The Python language works well with data. Python has many libraries specifically made to allow coders to read, manipulate, and plot data. When combined with the Streamlit platform, coders can easily make apps that analyze and display data for users. And you can take the next step to incorporate datasets and machine learning models into an app.

data graphs

Most programmers and data scientists work with data in Python is by using software called Notebooks. One of the most popular Notebook interfaces is Jupyter Notebook. According to the Kaggle Survey 2022 results, Jupyter Notebooks are the most popular data science interactive development environment (IDE), used by over 80% of respondents. 

Jupyter Notebook runs in a browser, although there are other interfaces. For example, it can integrate directly in Visual Studio Code. 

The engine behind the notebook that runs the code is called a kernel. For Python, you will use the ipython kernel. 

The notebooks allow you to write text as well as Python code. Text is written using a markdown language, with simple commands to format the text. It’s a good way to add headers and explanations of the code included in the notebook.

You can also execute Python code directly in the notebook. 

jupyter notebook screenshot of code cells

Similar to a physical notebook you might use in school, Jupyter Notebooks are a great way to take notes, organize your thoughts with a data project, and explore information. The added feature of executing code allows you to experiment with Python code in a controlled and organized way. 

Jupyter Notebooks help you to plan out and test different aspects of your web app before you jump to the Visual Code Editor to build the actual app.

PYTHON LIBRARIES

There are many libraries that you will need to use in your code to build your web app. A library is a collection of pre-written code that performs particular tasks. Programming libraries are very powerful and mean that your app can do powerful things with just a few lines of code. 

For Python, most libraries require that you first install them on your computer, then in your Python script file, you will import the libraries that you need. 

An example of the libraries you will need for using data are numpy and pandas.

Pandas allows your app to work easily with large amounts of data. It puts the data into something called a dataframe, and your app works with the dataframe. Numpy has many functions for performing numerical operations on the data in the dataframe.

In addition, there are many plotting and graphing libraries, which allow users to visualize the data. The most popular visualization libraries in Python are matplotlib, plotly, and seaborn

The following activity will use all of these libraries. The activity will take a dataset from a music and mental health survey to create a data dashboard app that displays the data in different ways for the user to interact with.

ACTIVITY 2: DATA DASHBOARD

Estimated time: 90 minutes

Build a Streamlit Web App

  1. Follow this video (Part 1) to install and run the Jupyter Notebook. Click link below to download the notebook file.
  2. Follow this video (Part 2) to build the data dashboard app using Streamlit.
  3. Your turn: Add one more graph to your data dashboard. You can choose from some of the other graphs from the original Jupyter Notebook, or make a new plot/graph in the Jupyter Notebook, and then integrate the code to Streamlit to add it to the dashboard.
Download Notebook

REFLECTION

Congratulations, you have made two web apps in Streamlit! Ask yourself these questions:

reflection
Did you run into any issues installing or running Jupyter Notebook or Streamlit?
How did you overcome issues when you ran into them?
How can you use the ideas from this lesson in your project?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Jupyter Notebook – popular data science interactive development environment to work with data through Python coding
  • Kernel – a process that runs and acts as the engine behind Jupyter Notebooks
  • Markdown language – the size of your problem or solution
  • Library – collection of pre-written code that performs particular tasks

ADDITIONAL RESOURCES

Jupyter Notebooks

 

Streamlit