App skeleton building 2 – Streamlit Essentials – Configuring the Environment, Managing Packages, and More

App skeleton building 2 – Streamlit Essentials – Configuring the Environment, Managing Packages, and More

Now, save the app.py file and click on Always rerun in the web app (in the top-right corner); in this way, all the new lines of code will be immediately executed as soon as we save them. As shown in Figure 4.11, we have added the menu on the left-hand side of our web app. This menu contains the four tasks we included in the activity list. If you want, you can click on the x button to minimize the left-hand side column:

Figure 4.11: Left-hand side menu

To let our menu do something, we have to add some logic for each of its items. We can do this by adding the following code in the main function. At the moment, we are just displaying some sub-headers any time we select a specific option on the menu:

Figure 4.12: Adding some logic to the main menu

The code in Figure 4.12 is quite easy: we create a list of four items (the activity variable) and use it to populate a selectbox on the sidebar. This means that this selectbox will show only four options. When we select one of these options (for example, Sentiment Analysis, as shown in Figure 4.13), we need to perform a related action. This logic is valid for all four different options, so we need some ifs (four ifs because we have four options) to understand the value of the selection in the selectbox. Simply put, we check if our selection in the selectbox is equal to any of the items in the menu; if so, we just print a subheader (for now, the related action is only printing a subheader; we’ll write a more complex action in the future) with the item’s name and a blank line. So, if we select Sentiment Analysis, we print a Sentiment Analysis subheader on the screen, as displayed in Figure 4.13:

Figure 4.13: “Sentiment Analysis” selection from the left-hand side menu

At this point, it should be clear that any kind of logic has to be applied in the main function inside its specific if clause. For example, if we want the About section to do something more than just display a subheader containing the About text, we can write the code for its business logic in the following way:

Figure 4.14: Business logic inside the “About” section

To summarize, when the choice variable is equal to About, we display a subheader on the screen containing the About text, followed by an empty line (st.write(“”)), and then some text formatted with the Markdown language.

The code we wrote with the st.markdown instruction is quite self-explanatory; we are just printing (using the Markdown format) some information on the screen about our web application and a clickable link to Streamlit’s website, considering that the [streamlit](https://streamlit.io) instruction is just the Markdown syntax to include hyperlinks in the text:

Figure 4.15: The “About” section of our web app

So far, we’ve created a very neat skeleton (that is, a structure) for our web application, imported all the libraries we are going to use, created a main function where we created a menu (…, which will be displayed on the left-hand side of the app and is collapsible) containing all the tasks our web application is going to cover, and created the About section of the app, putting some business logic inside its if clause.

It’s incredible, but this simple skeleton can be applied to all the web applications we are going to build from now on. All we need to change or adapt is the list of tasks (the list inside the menu on the left-hand side) and the business logic for each of these items.

The point is that, even if the web app is working well now, it is not very appealing. So, let’s try adding some decorations.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top