For the whole process, we need to use these Python libraries:<\/p>\n
- \n
- Requests.<\/li>\n
- Streamlit.<\/li>\n
- Streamlit-Authenticator.<\/li>\n
- PyYAML.<\/li>\n<\/ul>\n
Also, we will import a Python standard library:<\/p>\n
The tutorial code can be found in my Streamlit starter template repository<\/a> on Github.<\/p>\n
Installing The Streamlit Package<\/h3>\n
First of all, I prefer to create a virtual environment by running python3 -m venv .env, and then installing the Streamlit package by running pip3 install streamlit.<\/p>\n
Now create a Python script. Let\u2019s call it streamlit_app.py.<\/p>\n
In complex projects that have too many functions, I prefer to have separate Python script files for my different functions and then import those into the streamlit_app.py or create a separate app with Flask or FastAPI.<\/p>\n
For example, in a keyword research app, I have a Python script for different functions that get data from Semrush, a script for getting the top 10 or 20 results from Google, a script to get the Google autocomplete and Google-related searches, etc.<\/p>\n
Get The Google Autocomplete Queries<\/h3>\n
For making requests, we need to use the Requests package. To get this package, you need to run pip3 install requests.<\/p>\n
Also, to parse the autocomplete API response, we need to import the Python standard JSON library.<\/p>\n
First of all, we import the JSON standard library, the Requests package for making requests, and Streamlit for creating our app.<\/p>\n
Then, I defined a function for getting the Google autocomplete queries as a list of strings.<\/p>\n
I used replace function twice to keep everything simple, but you can use re library for using regex.<\/p>\n
\"\"\"A Streamlit app for getting the Google autocomplete queries \"\"\"\nimport json import requests\nimport streamlit as st def google_autocomplete(keyword: str) -> list[str]: \"\"\"Get Google autocomplete queries for a seed keyword Args: keyword (str): The seed keyword Returns: list[str]: A list of the autocomplete queries \"\"\" google_autocomplete_api: str = \"https:\/\/www.google.com\/complete\/search\" google_autocomplete_params: dict = { \"q\": keyword, \"cp\": 8, \"client\": \"gws-wiz\", \"xssi\": \"t\", \"hl\": \"en-US\" } response = requests.get(google_autocomplete_api, params=google_autocomplete_params) list_google_autocomplete_uncleaned: list[list] = json.loads((response.content).decode(\"UTF-8\")[5:])[0] list_google_autocomplete_cleaned: list[str] = [ element[0].replace('<b>', '').replace('<\/b>', '') for element in list_google_autocomplete_uncleaned ] return list_google_autocomplete_cleaned\n<\/pre>\nThe Streamlit App<\/h2>\n
Up until now, we have installed the Streamlit package and defined our function to get the Google autocomplete queries. Now, let\u2019s create the actual app.<\/p>\n
To view the Streamlit app, we need to run the Streamlit with the run streamlit_app.py command in the terminal for running our app locally. After you run this command, by going to the http:\/\/localhost:8501\/ URL, you can view the app.<\/p>\n
Yes, it\u2019s blank because we didn\u2019t add any heading, etc., to it.<\/p>\n
![\"Running](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app.png\")
Screenshot from author, October 2022<\/span><\/div>\nAdd A Heading To The Streamlit App<\/h3>\n
Let\u2019s add a heading to our app. As you see above, I imported the Streamlit as st.<\/p>\n
Now by calling the st.title() function, we can add a heading to the page with a title style. Let\u2019s say st.title(\u201cThis is a next level SEO app\u201d).<\/p>\n
Remember that after editing your streamlit_app.py file and saving it, an icon appears in the top right corner of the page, and you must press Always return<\/em> to view the app changes without any page refresh.<\/p>\n
![\"Always](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-1.png\")
Screenshot from author, October 2022<\/span><\/div>\nNow our app looks like the image below. If your system theme is dark, your app is with a dark theme.<\/p>\n
![\"A](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-2.png\")
Screenshot from author, October 2022<\/span><\/div>\nAdd Text To The Streamlit App<\/h3>\n
For adding a text paragraph to the app, you need to use the st.write() function. For example, st.write(\u201cMake your ideas real\u201d).<\/p>\n
![\"Steamlit](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-3.png\")
Screenshot from author, October 2022<\/span><\/div>\nAdd A Text Input To The Streamlit App<\/h3>\n
As you saw in the Google autocomplete function, there was an argument called \u201ckeyword\u201d.<\/p>\n
This argument must come from the user input.<\/p>\n
To get the user input, we can use a text input field in Streamlit. With st.text_input() we can add a text input. For example, st.text_input(\u201cWhat is your seed keyword?\u201d).<\/p>\n
Also, in order to use the input keyword later to pass to our function, we must assign it to a variable.<\/p>\n
input_google_autocomplete_keyword: str = st.text_input( \"What is your seed keyword?\")<\/pre>\n
Now we want to run our app when there is an input keyword. Here, we use an if statement to check if the variable is empty or not.<\/p>\n
if input_google_autocomplete_keyword: output_list_google_autocomplete: list[str] = google_autocomplete( input_google_autocomplete_keyword)<\/pre>\n
![\"A](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-4.png\")
Screenshot from author, October 2022<\/span><\/div>\nDownload From The Streamlit App<\/h3>\n
So, we have added a heading, a line of text, and an input text field to get the user seed keyword.<\/p>\n
Now we must execute our written function and make a download button for the user to get the results in a text file.<\/p>\n
if output_list_google_autocomplete: st.download_button(\"Download the output\", (\"\\n\").join(output_list_google_autocomplete))<\/pre>\n
![\"A](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-5.png\")
Screenshot from author, October 2022<\/span><\/div>\nWe built our simple app! Let\u2019s change the app title and favicon.<\/p>\n
Before that, let\u2019s see the Streamlit app section code up until now.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-6.png\")
Screenshot from author, October 2022<\/span><\/div>\nChange The App Title And Favicon<\/h3>\n
The default title of the app is streamlit_app \u00b7 Streamlit, and the favicon of the app is the Streamlit icon.<\/p>\n
To change the title and favicon, we must use the st.set_page_config().<\/p>\n
Also, I prefer the app layout to be wide (you can test it).<\/p>\n
st.set_page_config( page_title=\"Oh My App!\", page_icon=\"😎\", layout=\"wide\"\n)<\/pre>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-7.png\")
Screenshot from author, October 2022<\/span><\/div>\nSet The App\u2019s Default Theme<\/h3>\n
The app theme is based on the user\u2019s system settings, but personally, most times, I find out the light theme has better contrast \u2013 and I don\u2019t want my team to put their time into finding out how to change the app theme.<\/p>\n
To set a default theme for the Streamlit app, first, you must create a folder, and name it .streamlit. Inside this folder create a file, and name it config.toml.<\/p>\n
Inside the config.toml you must insert the below lines to set your app\u2019s default theme.<\/p>\n
[theme]\nbase = \"light\"<\/pre>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-8.png\")
Screenshot from author, October 2022<\/span><\/div>\nAuthenticating Users In Streamlit<\/h2>\n
Imagine that after you deploy your app, someone finds out the app URL and accesses it.<\/p>\n
To protect your app, you must authorize the users before they can use the app \u2013 like most SASSs we use every day.<\/p>\n
For a Streamlit app, we can use the Streamlit-Authenticator package. To install it, in the terminal located in your app folder, type the pip3 install streamlit-authenticator command, and import the package into your app.<\/p>\n
I recommend you read the Streamlit authenticator package documentation<\/a> to get a better understanding of what is going on.<\/p>\n
import streamlit_authenticator as stauth<\/p>\n
Now create a config.yaml file for inserting our users\u2019 credentials.<\/p>\n
credentials: usernames: firstUser: email: firstuser@gmail.com name: The first username password: 12345 # Must be replaced with the hashed password secondUser: email: seconduser@gmail.com name: The second username password: 111213 # Must be replaced with the hashed password\ncookie: expiry_days: 30 key: some_signature_key name: some_cookie_name\npreauthorized: emails: - my@gmail.com<\/pre>\n
As in the package document you can see, now we must hash the passwords with the Hasher modules. I prefer to open an IPython and run the below code line.<\/p>\n
hashed_passwords = stauth.Hasher([\u201812345\u2019, \u2018111213\u2019]).generate()<\/p>\n
Creating A Login Widget<\/h3>\n
Now we must create a login widget where users can input their username, password, and then login into the app.<\/p>\n
First, you need to install the PyYAML package with the pip3 install pyyaml command and import it with the import yaml.<\/p>\n
Then create an authenticator object, and render the login module.<\/p>\n
with open(\".\/config.yaml\") as file: config = yaml.load(file, Loader=yaml.SafeLoader) authenticator = stauth.Authenticate( config[\"credentials\"], config[\"cookie\"][\"name\"], config[\"cookie\"][\"key\"], config[\"cookie\"][\"expiry_days\"], config[\"preauthorized\"]\n) name, authentication_status, username = authenticator.login(\"Login\", \"main\")<\/pre>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/11\/streamlit-tutorial-for-seos-how-to-create-a-ui-for-your-python-app-9.png\")
Screenshot from author, October 2022<\/span><\/div>\nShow The App To Successfully Logged In Users<\/h3>\n
Now we can use the authentication_status variable to see the app for our successfully logged-in users.<\/p>\n
if authentication_status: authenticator.logout('Logout', 'main') # OUR APP CODE COMES HERE\nelif authentication_status == False: st.error('Username\/password is incorrect')\nelif authentication_status == None: st.warning('Please enter your username and password')<\/pre>\nDeploy The Streamlit App With Docker<\/h2>\n
Now we are in the final step of developing our app.<\/p>\n
You can use different services for deploying your app, like AWS, Google Cloud, Azure, Heroku, DigitalOcean, etc.<\/p>\n
Before the Dockerfile, let\u2019s create the requirements.txt file. To do so, we can use the pip3 freeze > requirements.txt command.<\/p>\n
Streamlit Dockerfile<\/h3>\n
For deploying our app, I use Python 3.9.10.<\/p>\n
FROM python:3.9.10\nWORKDIR \/app\nCOPY . .\nRUN pip3 install -r requirements.txt\nCMD [\"streamlit\", \"run\", \"streamlit_app.py\"]\nEXPOSE 8501<\/pre>\n
Wrap Up<\/h2>\n
In this tutorial, we saw how we can create a stunning UI with pure Python, and deploy it with Docker.<\/p>\n
To learn more about different Streamlit widgets, see their well-documented API reference<\/a>.<\/p>\n
More resources: <\/strong><\/p>\n
\nFeatured Image: Yaran\/Shutterstock<\/em><\/p>\n