Let’s see what a Web App is and how it can be developed quickly with the Streamlit framework. You don’t need to have extensive web development skills – just a smattering of Python.
We all know the applications that can be installed on PCs and mobile devices. A Web App is a software application that runs inside a browser.
This means that users can use the application through a product such as Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Chromium and derivatives without having to download or install any software on their device.
Web apps have a front end it’s a back end that is, a part that is loaded on the users’ client devices and another that works on the server side, “behind the scenes”.
Il front end uses HTML, CSS and JavaScript, languages that can be used on any device that supports a web browser such as a desktop computer, notebook, tablet, smartphone and so on.
There are many Web App categories and can generally offer many of the features of a traditional desktop or mobile application with the convenience of being accessible from anywhere with an Internet connection.
Web Apps can be restricted by performance of the Internet connection and of the network in general while traditional applications use the resources of the device on which they are running.
We have said that to use a Web App it is not necessary to install any software on the device; a traditional application is usually limited to a specific operating system, for example Windows, macOS, Linux, Android, iOS with the ability to eventually load it into virtualized environments or with emulation.
The updates for Web Apps they are performed on the server side and are therefore automatically available to all users; in the case of traditional applications it is necessary to manually download and install the updates as they are released.
What is needed to develop a Web App
Developing a Web App requires technical knowledge programming and web development.
Before starting to develop a Web App it is obviously important to have clear what you want to achieve and the features you want to include. In the initial stage it is essential to think about the page structure and application design.
The following step consists in choosing the most suitable technologies to use for the development of the Web App: in addition to HTML, CSS, JavaScript, the use of the front end of a framework like React o Angular. Similarly, it is necessary to identify the procedures to be developed on the slope back end.
The Web App development process can be, depending on the project you intend to implement, very complex and time-consuming: you may need to work with a team of developers or hire professionals to create the application, test it, publish it, resolve any bugs not surfaced during the phases of testing and maintain it. The DevOps or better yet DevSecOps philosophy also and above all applies to Web Apps.
Create a Web App with Streamlit
Streamlit is an open source framework that allows you to build interactive web applications using Python code with very limited effort: you don’t have to be full-stack developer
Streamlit is designed to help data scientistresearchers and developers to easily create and share analysis, reports, data visualizations and machine learning models with an intuitive and attractive web interface.
Thanks to Streamlit it is possible to use Python code to effortlessly create visualizations, charts, tables and other interactive components: i widget allow Web App users to explore and interface with data in a really simple way.
As mentioned, the main advantage of Streamlit is that developers can quickly create interactive Web Apps even without specific knowledge in the field Web development: you don’t even need to know the basics of HTML, CSS and JavaScript. You just have to know Pythonnot even too deeply.
Streamlit supplies a series of components which can be inserted into the pages of the Web App and which can be directly and immediately recalled: titles, fields for entering data, tables and graphs.
Per install Streamlit and start using the framework just use a Linux distribution, for example the latest version of Ubuntu. It can be developed locally or, for example, on a cloud server.
The following commands, to be given in the terminal windowallow you to update installed packages, load Python and install Streamlit:
apt update -y && apt upgrade -y
apt install python3-pip -y
pip install streamlit
At this point, you can verify that everything works and get a taste of Streamlit’s potential by simply typing:
streamlit hello
By connecting from the browser with thelocal IP address shown by Streamlit, you can check what kind of Web Apps you can create.
In the picture you see a public IP address because we used a test cloud server: using the ufw firewall on Ubuntu, we allowed incoming connections on port 8501 used in this case by Streamlit only for our static IP used in the office:
ufw allow from IP ADDRESS to any port 8501
One of the main characteristics of Streamlit is that they are not used callback: each interaction with the Web App causes the script to “repeat” from top to bottom. An approach that leads to obtaining really clean and easily readable code.
With a click on the button at the top right then on Run on save it is possible to have the Web App automatically reloaded upon each modification of the underlying Python source code.
To use functions e components specific to Streanlit it is essential to declare import streamlit as st In the file app.py.
Streamlit functions can then be invoked using the syntax st.function-name. For example: st.title(“Titolo Web App”).
Some examples of components that Stramlit provides:
subtitle st.subheader(“My subheader”)
code block st.code(“a = 123”)
dataframe/table st.dataframe(my_data_frame) e st.table(my_data_frame)
file JSON file st.json(my_json)
graphic st.line_chart(my_data_frame) or st.pyplot(my_mpl_figure)
button clicked = st.button(“Clicca qui”)
casella selected = st.checkbox(“OK”)
choice option choice = st.radio(“Choose an option”, [“abc”], [“def”])
text box st.text_input(“Cognome:”)
numeric input num = st.number_input(“Choose a digit”)
As the Streamlit support page dedicated to session state explains it is possible to use the object cache to memorize the execution of functions. In this way it is possible to memorize and keep the result of the processing (useful for functions that require time to be completely executed).
Streamlit recalculates the cached value every time the function name or code is changed and when the function’s input parameters are changed as well.
Session State instead, it can be used to store a variable between different executions of the application.
Once development is complete, the Web App can be published (deployment) on Streamlit’s Community Cloud in full title free.
As explained in the Deploy an app section, you can upload your application to GitHub and then connect it with a Streamlit workspace.
Alternatively, for example, you can use Hugging Face, a community strongly oriented towards support for projects artificial intelligence. In this case, simply create a user account then upload the Python app app.py.
We suggest you scroll the Streamlit home page to the paragraph Build powerful apps: you will find many examples of Web Apps, even very powerful ones, that you would not even have thought could be developed with a very limited effort.
By clicking on Go to app you can check the functioning of each Web App while with a click on View source code check its corresponding Python source.