2.6 Web Apps: Diving In
Welcome to the exciting world of web app development! In this lesson, we’re going to dive into creating interactive web applications using Python and a fantastic tool called Streamlit. Think of this as stepping into a workshop where you can build your own digital creations.
What We’re Going to Build:
Imagine you want to create a web page that can show pictures and play sounds. That’s exactly what we’ll start with.
We’ll learn how to display images and integrate audio into our web apps. This is a fundamental skill that opens up many possibilities, from creating multimedia presentations to interactive games.
Data Visualization with Python and Jupyter Notebooks:
But that’s not all! We’ll also explore how to visualize data using Python and a tool called Jupyter Notebooks.
- Python: Python is a powerful and versatile programming language that’s widely used in data science and web development. It’s known for its readability and ease of use.
- Jupyter Notebooks: Think of Jupyter Notebooks as interactive digital notebooks where you can write code, add text explanations, and display graphs and charts all in one place. It’s an excellent tool for exploring data and creating visualizations.
We’ll learn how to create different types of graphs, like bar charts, line graphs, and scatter plots, to represent data in a visually appealing and informative way. This skill is crucial for understanding and communicating data insights.
Streamlit: Making Web Apps Easy:
Now, let’s talk about Streamlit. This is where the magic happens! Streamlit is a Python library that makes building web apps incredibly simple.
- Simplified Development: Streamlit takes care of much of the complex coding behind web development. You can add interactive elements like buttons, sliders, and text boxes with just a few lines of code.
- Focus on Functionality: Instead of worrying about the intricate details of web development, you can focus on the core functionality of your app. For example, you can concentrate on how your app displays images or handles user input.
- Block-Based Analogy: Imagine building with building blocks. Streamlit provides pre-built components (like those blocks) that you can easily assemble to create your web app.
From Mobile to Web:
To make things even clearer, we’ll take examples from mobile app development platforms like Thunkable and App Inventor. These platforms use a visual, drag-and-drop approach to app creation. We’ll then show you how to recreate the same apps as web apps using Streamlit. This will demonstrate how easily you can transition from mobile to web development.
Creating Data Dashboards:
Finally, we’ll learn how to create data dashboards using Streamlit. A data dashboard is a visual display of key information that helps you monitor and understand data at a glance. Imagine a control panel that shows you all the important metrics in one place.
Why This Is Important:
- Accessibility: Web apps can be accessed from any device with a web browser, making them highly accessible.
- Data-Driven Decisions: The ability to visualize and analyze data is essential for making informed decisions.
- Rapid Prototyping: Streamlit’s simplicity allows for quick development and testing of your ideas.
In Summary:
This lesson will equip you with the skills to:
- Create interactive web apps with images and sounds.
- Visualize data using Python and Jupyter Notebooks.
- Build data dashboards with Streamlit.
Get ready to explore the exciting world of web development and unleash your creativity! Let’s get started!
ACTIVITIES
These are the activities for this lesson:
ACTIVITY 1: SOUNDBOARD APP
Estimated time: 30 minutes
Code a Streamlit Web App
- Click button below to download assets (images and sound files) that will be needed to make the app.
- Follow one of these videos to create a simple Soundboard app that plays sounds when a button is pressed.
- if coding on your computer
If you haven’t already installed Python and Streamlit, complete the Exploring Web App Builders Activity before doing this activity. - if coding online
- if coding on your computer
- 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.
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.
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.
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
Depending on whether you are coding on your computer or in the cloud, follow the appropriate set of videos.
- On your computer:
- In the cloud:
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.
REFLECTION
Congratulations, you have made two web apps in Streamlit! Ask yourself these questions:
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?
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?
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?
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 – a language that allows you to format text easily so it is more readable
- Library – collection of pre-written code that performs particular tasks
ADDITIONAL RESOURCES
Jupyter Notebooks
- Misra Turp’s Hands-On Data Science Youtube playlist
- Exploratory Data Analysis with Python and Pandas Profiling with Andy McDonald
Streamlit
- Streamlit App Gallery has many great app examples with source code provided
- Data Professor’s How to Build Your First Data Science Web App in Python-Streamlit
- Getting Started with Streamlit in Python with Andy McDonald
