Make a Web App using Python for both Frontend and Backend? YES!
Hi! I’m Abhijit Sethi, currently in my 3rd Year of Computer Science Engineering.
If you’re reading this article, you’re looking for alternatives to frameworks like Flask and Django OR you’re just looking for something new!
Let me introduce you to a recently developed framework for interactive data apps . It’s Streamlit. However, before I tell you more about Streamlit, let me break down the previous sentence so we know what we are working with.
What is a Framework?
To put it simply, a framework is a well-defined structure that developers use in order to create their apps/websites/designs etc. We use frameworks as they involve tried and tested methods of development, additionally they bring uniformity to code, globally.
What exactly is an Interactive Data App?
Data Apps are an enveloping term used for apps that involve rich data analysis, optionally accompanied by simple visualizations to explain the underlying implications of the analysis.
Hence, an interactive data app allows us to tweak certain values in our data and see how these result in varying outcomes.
Through today’s article, I’ll be showing you how to make a web app which consists of a Login form, Database connection via PostgreSQL and a feedback form — with Streamlit.
Why Streamlit?
Ideally you’d find a few paragraphs on the advantages and ease of developing in this section, however to see the true potential it’s better with some code snippets and corresponding output. So Let’s Begin!
Step 1 : Install Streamlit by following the guide here → Installation - Streamlit Docs.
Step 2 : There is no step 2.
Let’s start coding!
Want to make a Login Form?
This is a good time to understand how Streamlit renders components. Under the hood, it is built on top of React. Due to this, Streamlit re-renders components on a regular basis, which is why placing our Login form’s input boxes and buttons inside a form-like component would be a better choice.
To do so, just change the code in this manner.
Note : Here we use st.form_submit_button() instead of st.button().
If you want to add Authentication using Hashing and JWT tokens, I’d urge you to follow this article :
How to Add a User Authentication Service in Streamlit | by M Khorasani | Towards Data Science
Want to link your app to a database?
For this demo, I’ll be using Postgres SQL.
My database consists of a table Demo which has 2 rows. We want the following output :
Code :
So what is happening here?
First we need to understand what these @ symbols are doing. In Python, @ helps us to declare a decorator for classes, methods etc.
@st.experimental_singleton — Used to share same object across multiple users. Since you don’t want to connect to the database multiple times in a session, we use this.
@st.experimental_memo — Used to memoize the function calls. (Memoization is an optimization technique used to speed up execution by storing the results of expensive function calls and returning the cached result when the same inputs occur again). Here, we are running fetchall() over and over again, we choose to memoize the function.
Now that the decorators are understood, the init_connection() initializes the connection to the database using the secrets written in another file.
The secrets file is used when apps need to be deployed and as a common practice, developers place the database access credentials in a separate file.
Secrets.toml :
Additionally, a feedback form couldn’t hurt right?
Explore the API Reference section in the Streamlit Documentation. You’ll find many more cool features that Streamlit offers!
Putting it all together!
If we were to append the various components, it would be too clunky. Hence, we’ll break it up into a multi-page app.
The structure we follow consists of 3 pages :
Login
Database Connection
Feedback Form
Each page will follow this structure :
We’ll be using st.sidebar() for this purpose.
Code :
And just like that, you’ve learnt how you can make a simple app which has the Front-end and Back-end completely coded in Python.
This is a simple web app, however with this you have already learnt how to create multiple pages, make a connection to your database and retrieve data.
Most projects you work on would require these concepts — hence, you’ve learnt and implemented some really important stuff here.
Before leaving, I’d like you to modify this web-app to authenticate user login. It shouldn’t be hard as you have already learnt how to retrieve data from the database and now, it’s just a matter of how comfortable you are at writing database access queries.
In the future, I plan to showcase the true real-time data analytics power of Streamlit. Stay Tuned for that, see you!
If you would like to reach out to me, you can mail me here : sethiabhijit70@gmail.com
Additional Reading for comparing Streamlit with Flask:
