Building Your First Interactive Web App from your Jupyter Notebook in Minutes!

Arthi Rajendran - Medium

Have you been writing & learning Python for way too long but have never seen it in action? Do you dream of building interactive and engaging user interfaces without the hassle of learning complex web development frameworks? Well, look no further! In this tutorial, we’ll dive into the exciting world of Streamlit and learn how to create your first interactive web app in minutes. With Streamlit’s simplicity and power, you’ll transform your Python code into a captivating user experience that will leave your users begging for more!

Photo by Balázs Kétyi on Unsplash

Streamlit: The Game-Changing Python Framework

Before we dive into the code, let’s take a moment to appreciate the game-changing power of Streamlit. Streamlit is a Python library that allows you to effortlessly transform your Python scripts into fully interactive web applications. Whether you’re a data scientist, a machine learning engineer, or just someone who loves creating beautiful UIs, Streamlit has got you covered. Its intuitive API and vast ecosystem of built-in widgets make it a joy to work with, empowering you to build incredible web apps with minimal effort.

Building Your First Simple Streamlit App

Let’s get our hands dirty! Below is the code for our first Streamlit app, and the game-changing point is you can run it from your Jupyter Notebook (local or Colab).

!pip install streamlit

%%writefile app.py

import streamlit as st

st.title("My First Streamlit App")

# Create a text input field
name = st.text_input("What is your name?")

# Create a message
message = "Hello, " + name + "!"

# Display the message
st.write(message)

!npm install -q localtunnel

!streamlit run app.py &>/content/logs.txt &

!npx localtunnel --port 8501

Understanding the Magic Behind the Code

Let’s break down the code and understand how it works:

1. We start by installing Streamlit using !pip install streamlit. It's as simple as that!
2. Next, we import Streamlit and give it the alias st for convenience.
3. We set the title of our app using st.title("My First Streamlit App"). This will be displayed prominently at the top of our app, capturing the attention of our users.
4. We create a text input field by calling st.text_input("What is your name?"). This allows our users to enter their names and engage with our app on a personal level.
5. We concatenate the entered name with a greeting message using message = "Hello, " + name + "!". This creates a personalized message.
6. Finally, we display the message to our users with st.write(message). Each time the user enters a new name, the message will dynamically update, adding a touch of interactivity to our app.

To Recap, we have used Streamlit’s powerful functions:

st.title — Gives your app a prominent title
st.text_input — Gets input from the user
st.write — Displays a Text on the App

Power Boosting with localtunnel

To make our app accessible to the world, we need to expose it to the internet. That’s where localtunnel comes in! We use !npm install -q localtunnel to install localtunnel, and then we leverage it with the following commands:

• !streamlit run app.py &>/content/logs.txt & runs our Streamlit app in the background and redirects the console output to a log file. This ensures that our app keeps running, even if we close the terminal.
• !npx localtunnel --port 8501 exposes our app to the internet by creating a public URL. Anyone with access to this URL can now experience the magic of our interactive app!

Photo by Joao Viegas on Unsplash

Congratulations! You’ve just created your first interactive web app using Streamlit. With its straightforward API and powerful features, Streamlit opens up a world of possibilities for transforming your Python code into captivating user experiences. In just a few lines of code, you’ve learned how to create a text input field, generate personalized messages, and display them in real time to your users. And with the magic of localtunnel, you’ve made your app accessible to anyone on the internet, amplifying its impact.

The Execution

But remember, this is just the beginning of your Streamlit journey. The library offers a plethora of widgets, such as sliders, buttons, and charts, allowing you to create even more engaging and interactive experiences. You can explore the Streamlit documentation to uncover the full potential of this remarkable tool.

So go ahead, supercharge your Python apps with Streamlit, and watch as your creations come to life with an attention-grabbing UI that will leave your users wanting more. It’s time to unleash your creativity and build the next generation of interactive web apps!

In the next blog posts, we’ll dive deeper into Streamlit’s widgets and demonstrate how to create dynamic charts, incorporate machine learning models, and deploy your app to the cloud. Stay tuned for the exciting sequel!

Now it’s your turn to try it out. Access the Jupyter Notebook from Github, and let your imagination run wild. Embrace the power of Streamlit, and create web apps that will revolutionize the way you showcase your Python projects.

Get ready to level up your Python game with Streamlit — because your code deserves to be experienced, not just executed!

Thanks for sticking around until the end. Visit me on my Linkedin to have a more in-depth conversation or any questions.