Welcome to Part Two of
the Streamlit 101 series. In this part, we're going to learn about how to build an actual
Streamlit application. All right, and so let's get
started in building the app. So the first thing is you
want to fire up your terminal or command line prompt. So I'm going to assume that you already have Conda installed and so we're going to start by creating a new Conda environment. So you want to type in conda create name and then let's give it a name. Let's call it streamlit101 and then we're going to use
python 3.10 as an example, and you could feel free to
use any other Python versions that you like as well, hit on enter and it's going to ask whether to install the
following libraries. So type in Y, enter. Wait a few moments. All right, and now your
Conda environment is ready and you want to install Streamlit, so type in pip install streamlit or you can use Conda. But for simplicity, for 99% of the case we could use pip install
streamlit, pip install streamlit, and Streamlit will be included in the environment list of Conda. Enter, there you go. You already have Streamlit installed. And to make sure that it's working, you could type in streamlit hello and this should open
up a demo application. All right, and so this is
the demo app from Streamlit and it is apparently working. You could try out the different pages in the multi-page app demo here. All right, you could interact
with the input widgets and the app will update itself. You could rerun it here as well. Check out the plotting demo here. You could also include a progress bar. To create this particular app, you could use the following code here. Copy the code, and you could paste it inside a blank app file. This is the mapping demo and it's using the
st.pydeck chart command. And when the app is loading, you'll notice that there
is the running man here. All right, and it's loading up and you could interact with this map. You could zoom in and you could zoom out. And to create this app demo here, you could use the following. You could copy here. All right, and you could interact with the application by unticking or ticking the various tick boxes here. Let's check out the dataframe demo. So these are the countries to be included. This is the input widget and you could select
countries that you like. Right, and then the
dataframe will be updated, the chart will be updated, and the code here is the
one from the default. If you remove countries here, the dataframe and plots
will be updated as well. All right, and so let's
head back to the terminal and when you're finished
with the demo app, you could hit on the control
plus and also C buttons at the same time, Control C, and it will stop the server and you're back in your command line. So here I'll create a empty folder. How about I call it sandbox and then I'll change it to
the sandbox folder here. For those of you who are wondering where you are in your environment, you could type in pwd which will print your working directory, and the working directory is
here, User/chanin/sandbox. So this might be different for you and it will allow you
to know where you are. And when you know where you are, you could use the finder here or your directory browser, and then you could pinpoint the files on your local computer. So why don't we start by
creating a simple application. If we use VI or VIM, you could create the app by
typing in vi streamlit_app.py or we could do it the traditional route and use a text editor
of your choice as well. For this example, I'll use this VIM and it's a text-based text editor. So in order to include the contents, I'll hit on the I button and you'll notice that
it'll change to insert here, and I'm going to import Streamlit as st. I'm going to include a title for the app. I'll call it My first app and I'll use something.write
to print out something. And guess what, I'm going
to print hello world. I'm going to print out hello world. So this is the right of passage for any new programming language or Python library that
you're learning about. And so we're going to save it. I'm going to hit on escape button and then I'm going to hit on the colon and then wq for write and quit. All right, and so we've saved the file to streamlit_app.py. To look at the contents, I could do this cat streamlit_app.py and here I see the
contents of the app file. And so let's run the app. In order to do that, type in streamlit run streamlit_app.py. So you start with streamlit run and then you could replace this with the name of the app file
that you would like to run. And then hit on enter and then your app has been loaded here, your first app, hello world. And it's as simple as that. You have a working Streamlit
app in only a few lines of code and if you're wondering, just head over back to the command line. So you'll notice that
this is a running app. So let me show you when
I open up a text editor and modify the contents. So I'm in Chanin and then Sandbox and this is the app. I'll open it up. Okay, and my app is here. Let me see if I could increase the size. All right, I'll resize this window here and I'll open up the application. So what if I add some emojis here? Let's have this guitar,
My first app, save it and then you'll notice that
upon saving your source file which has been changed, you'll notice that you're
going to see a message at the top right-hand corner and it says source file changed, and it asks whether you want to rerun it or you want to rerun it all the time. So if you missed that, you could just refresh the page and you see the app has been updated. And you'll notice here that
there's no interactive widgets, so why don't I do this? I'll add an interactive widget. I'll add it to the same
panel here, text_input. I'll say Enter your name and I'll provide an example. An example text would be
let say John, let's see. I saved it by hitting on the
Control + S on the Windows, Command + S on the Mac, and I'll say always rerun. So whenever I make the
change and I save it, the app will be updated automatically. Okay, so you have this text
input called Enter your name and the default answer is
provided in here to be John, and you have hello world. And let's say that you want
to print out hello world you want to change world
to let's say hello John. All you want to do is you want
to assign this to a variable. Let's just say st_name and I'll use the F string, st_name. This is one way of doing it, a more difficult way of doing it, and I'll show you an
easier way of doing it. Save it, and then you
see there's hello John and what if I change this to Mary? Now enter, and the text
is updated, hello Mary. Or what if I just want to leave it blank? And it'll just say hello and the name box here is empty, and you could type in let's say Jerry. Hit on enter, and you have hello Jerry. Okay, and this is the more difficult way and so let me show you a
more easy way of doing it. I'll just comment out
that previous version. So the easy way is to type in st.write and then hello, and then
comma, and then st_name. Save it, and then you
have here hello Jerry. And if you want to add exclamation mark, you could do that. So there is two approach of doing it and it allows you to accept the input widget here from the user. And if you'd like to
put it into the sidebar, you could do this. You could add .sidebar. And then you save it and then you'll notice that
the text input box here using the sidebar, it
will go to the sidebar, and the sidebar here is
collapsible like that. And so congratulations, you've built your first Streamlit application. So what app do you want to build today? Drop a comment down below and let us know which topic you would like to learn more about. Thank you for watching
until the end of the video. If you find this video helpful, please make sure to smash the like button and also subscribe to the channel. If this is your first time watching the Streamlit 101 Series, please make sure to also watch part one for an overview of what
Streamlit is all about and also continue to Part Three where you're going to learn
about the available resources that you could leverage in using Streamlit which will help you to get unstuck. And so I'll see you in the next video.
