Getting Started with Streamlit: part 1 Build Your First Web App

Imagine creating an interactive web application in Python without needing to know HTML, CSS, or JavaScript. Sounds exciting, right? That’s what Streamlit makes possible. It’s a tool designed for data enthusiasts and developers who want to showcase their projects in a user-friendly and visually appealing way.

In this article, I’ll guide you through creating your first Streamlit app with step-by-step instructions and plenty of examples. By the end, you’ll have a running app that you can share with others.

What is Streamlit?

Streamlit is an open-source Python library that allows you to create web apps for data science, machine learning, and other Python projects. It’s incredibly intuitive — just write Python code, and Streamlit takes care of generating the interface.

Why Choose Streamlit?

• Ease of Use: No front-end development skills are required.
• Interactive Widgets: Add sliders, buttons, and file up-loaders with just one line of code.
• Real-Time Updates: Apps refresh automatically when the code changes.
• Free Deployment: Share your apps with Streamlit Cloud.

Here’s an example of what you can build:

Step 1: Setting Up Your Environment

Before we dive in, let’s get Streamlit installed. Open your terminal or command prompt and run:

pip install streamlit

Once installed, confirm it’s ready to use by typing:

streamlit --version

If everything is set up correctly, you’re good to go!

Step 2: Create Your First Streamlit App

Let’s build a basic app that welcomes the user and displays a chart.

Step 2.1: Write the Code

1. Open your code editor and create a new file called first_app.py.
2. Paste the following code:

Step 2.2: Run the App

1. Open the terminal and navigate to the folder containing first_app.py.
2. Run the app:

streamlit run first_app.py

Your browser will open automatically, and you’ll see your app at http://localhost:8501.

Step 3: Adding Interactivity with Widgets

Widgets are the heart of Streamlit apps. Let’s explore a few interactive elements you can add.

Example 1: Dropdown Menu

This creates a dropdown where users can select their favorite programming language.

Example 2: Button

When the button is clicked, a message appears.

Example 3: Checkbox

When the checkbox is checked, a random table appears.

Step 4: Displaying Images and Files

Streamlit makes it easy to display images or upload files. Let’s see how.

Example 1: Display an Image

Example 2: Upload a File

This feature is perfect for data apps where users upload files to analyze.

Step 5: Data Visualization

Streamlit integrates well with libraries like Matplotlib, Plotly, and Seaborn. It also includes built-in charting functions.

Example 1: Bar Chart

Example 2: Line Chart

Step 6: Deploying Your App

Once your app is ready, you can deploy it online for free using Streamlit Cloud.

Steps to Deploy:

1. Push your code to a GitHub repository.
2. Go to Streamlit Cloud.
3. Log in with your GitHub account.
4. Select your repository and deploy your app.

Within minutes, you’ll get a shareable link to your app!

Visit Link APP: https://first-app-talaatx.streamlit.app/

Reference:

☁️ Introducing Streamlit Cloud! ☁️

GitHub - talaatmagdyx/Getting-Started-with-Streamlit

Part 2:

Getting Started with Streamlit: part 2 Streamlit Components: The Building Blocks of Interactive…

Conclusion

Streamlit is an incredible tool for anyone looking to build interactive Python applications quickly. In this article, you learned:

1. How to set up Streamlit.
2. How to create a simple app.
3. How to use widgets and visualizations to make your app interactive.

Now it’s your turn. Experiment with more widgets, connect APIs, or even add a machine learning model to your app. The possibilities are endless with Streamlit.

Happy coding! 🚀