Build your first Streamlit app - Python Tutorial

- Now that you learned what Streamlit is and how you can use it to build web applications, let's jump into code spaces to build your first Streamlit application. In this video, I will show you the basics of how to execute basic Streamlit commands, such as writing titles and text, integrating other packages like the datetime package, and creating a simple button. Let's get started. When you navigate to your code spaces, it'll look something like this, where most likely it'll have the README file showing, your terminal on the bottom, and to the left, you'll see your navigation menu. Before you get started with your code spaces, note that each time you load in a new code space, not each time you have a new code space session, but again, a whole new code space, you will need to install your requirements. So you'll see this requirements.txt file. If you click on it, you'll see these are the various packages you will need to use throughout this course that are not included in the base Python package. So to install these different packages, what you could do is you could do pip install -requirements.txt. And so you run this in your terminal by clicking enter. And note that this may take a moment for it to download everything, but once it does, you should be good to go. And you may get a notice such as you can upgrade pip. You're welcome to do that, but you do not have to. Once you have your requirements installed, let's exit out of these, and navigate to the chapter_1 folder. So inside this folder again, you'll have your beginning and ending files. So let's select the 01_02b.py file to begin coding. So like I mentioned before in these coding files, these beginner files will have the comments in there to help guide you through which code. But like I mentioned before, if you get stuck or need to check the finished code for reference, you can take a look at the 01_02e.py file. Note that the structure will remain the same throughout this course. Let's begin by importing the packages that you will need for this particular file. So you'll begin by importing the Streamlit package as st. And note that this is pretty standard to alias this as st. And so this package you'll use for pretty much all of the coding files in this course, which makes sense, since you're building Streamlit applications. Next, you'll want to bring in the datetime package. So you'll just do from datetime import datetime. And so you'll notice when you're coding, with a Streamlit application, generally most of the Python code will function, and you'll type it out the same like you would in any other Python file. After that, you can use the st.title function to create a title for your Streamlit application. So you could call it something such as My First Streamlit App. So what this will do is this is one of the functions where it will show text to your end users, and there are various sizes for this, but note that title is generally the largest, but you can also do header and subheader functions that slowly tier down in size, again, with title being the largest. After that, you can use the st.write function to write a friendly greeting to your end user. So for example, you could say "Hello, world!" And then you could say, "This is my first Streamlit application." So again, note the structure is pretty similar for these different types of text functions where you have your parentheses, and then your quotation marks with the message that you wish to show to your end user. Next, let's use that write function again, but this time, let's display the current date and time. So to do that, use st.write. And then you can put the current date and time, and then you'll put a comma. And then let's use the datetime package and use .now to get the current date and time. And then you can format it using .strftime. And then in these parentheses, you can format the date using a percentage sign, Y-%m-%d, and then you can add $H, a colon, and then %M, another colon, and %S. And so what this will do is again, it'll gather that current date and time using this datetime.now function. Format it, and then it will display it to your end user. Note that Streamlit will show this as one output. So even though you have this text string in here and then this date time function here, it'll just show it in one line of output. Finally, let's create a button your users can press. This is a great functionality to allow your users to interact with your Streamlit apps versus only being able to simply look at information displayed. To do this, you'll use an if statement, and the st.button function, and then inside the parentheses and quotation marks, you can name the button. So again, that's what's going to show to the end user. So if you put click me here, that is what they will see in the button for them to click. And make sure you have your colon after that. And so inside the button function, make sure you indent properly, and then you could do various things inside the button function depending on what it is you want to accomplish. Let's just do a simple st.write function to display a message saying, "You clicked the button." But note that this button function will be heavily utilized throughout this course from everything from setting messages to LLMs to generating embeddings. So the reason why you structure it with this if statement is this provides a logic for when the button function returns true when clicked, it will allow you to execute whatever command you have within that. So in this case, again, you'll just be having this simple message. Now, let's run your first Streamlit application. You'll want to open up the terminal if it is not open already, or you can simply navigate to the bottom here. So again, if let's say this terminal is closed down, you can navigate to the top left here terminal and new terminal. If you need to open a new one to use. Since each of these files is within a folder, you will need to navigate to the folder you wish to run your file from, using the cd function and the folder name. Note if you don't do this, and let's say you try to run it using Streamlit, run 01_02b.py, and click enter. It'll say, hey, this file does not exist, and you'll be like, why is that? It's right there. It's again, because you're not in the correct directory. So the way you will be changing directories when you run each file in this course, you'll just simply use cd and then you'll navigate to the correct chapter folder. So in this case, it's cd chapter_1. So note that each time you run something in this terminal, or again, you exit out this terminal, you will need to make sure that you change the directory to navigate to that correct folder in order to access the different Python files within it. Once you're in the correct directory, you'll mainly use the command Streamlit run in this course to run your various Python files. So for this file, you will run 01_02b.py. Once you click enter, you'll then get a message like this, and then you'll be able to open in your browser, your Streamlit application. Now, note that this message will eventually disappear on the right side. No worries if that happens. If it does, simply navigate to the port section, and then you'll be able to see here, ah, it looks like yes, I have a port here, 8501. And it looks like it is running my 01_02b.py file. So you click here as well to navigate to that URL using that globe button. So again, you can see it here, but you'll click on that little globe button there to get to it. Now you have your first Streamlit application. So this is generally what it'll look like. Again, with Streamlit, you can make all sorts of different customizations, but I will keep it fairly simple throughout this course and have you focus more on the content itself. So here you'll see you have your title, which is in big, bold text saying "My First Streamlit App," and then below it you have your smaller text. So again, that's a more normal size saying "Hello World," this is my first Streamlit application. Below that, you'll see the current date and time, which for me, is 7-30 of 2025 at this time. And then you also have your button here, which says "Click me." So again, in your function of "Click me" is what you put inside those parentheses. And once you do that, again, it'll execute whatever commands you have beneath it. So in this case, it's just showing the message. "You clicked the button!" In the top right here, you'll see the three little bubbles, and you'll be able to rerun your application if you need to. You could also navigate to different settings, print it, or record a screencast. So these are pretty common to see with your Streamlit application. So once you're done with your Streamlit application, you can exit out of this. And then I highly recommend to kill your terminal to make sure that the port is not continuously running your Streamlit application out there. So to do this, you can right click and click kill terminal. And so once you do that, it should then clear it out. Note that sometimes it'll still have a terminal here, or again, if you need to navigate up here to the top left. New terminal to put a new one in, you can do that as well. The big thing when it comes to killing the terminal of why I recommend doing this, again, is just to make sure that it's not running in the background or if for some reason something is going wrong with your Streamlit application, especially once you're connected to the OpenAI API, such as if it's running an infinite loop, this is a quick and easy way for you to stop that application, is just killing the terminal on the backend. That will shut down all the processes to make sure that it is stopped, and then you can restart from there. Note that you can sometimes use the Control + C buttons to close out of the terminal, but sometimes this command won't work to stop the current process. So again, you can always just right click and click kill terminal as well. Great job on building your first Streamlit application. It may be a simple one, but these are the building blocks you need to be able to explore more interesting functionality as you proceed in the course. In the next lesson, you'll dive into more widgets such as sliders, text inputs, and multi-selects, allowing you to build richer user interfaces. Let's go.