Build A Streamlit Web App From Scratch (incl. NoSQL Database + interactive Sankey chart) 🚀
Вставка
- Опубліковано 2 лип 2024
- 👉 Explore All My Excel Solutions: pythonandvba.com/solutions
𝗗𝗘𝗦𝗖𝗥𝗜𝗣𝗧𝗜𝗢𝗡
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
In this video, I will be showing you how to build a Python web application from scratch using Streamlit. I will also show you how to connect your streamlit app to a database. In particular, we will be using a free NoSQL database from deta. I will cover the entire process from start to finish and show you how easy it is to build your own web application. We will also learn how to create an interactive Sankey chart using Plotly. Additionally, I will show some very nifty streamlit tricks. After this video, you will be confident to develop your own web apps.
🌍 𝗟𝗜𝗡𝗞𝗦:
▶ Source Code: github.com/Sven-Bo/streamlit-...
▶ More Streamlit Tutorials: • Streamlit Tutorials
▶ Streamlit cloud - secrets management: docs.streamlit.io/streamlit-c...
⭐ 𝗧𝗜𝗠𝗘𝗦𝗧𝗔𝗠𝗣𝗦:
00:00 - Intro
01:23 - Dependency installation and basic settings
03:58 - Coding out the entry area
09:51 - Coding out the plotting area
16:24 - Add a navigation menu
18:32 - Styling of the app
20:12 - Set up a NoSQL database
26:35 - Connect streamlit to a NoSQL database
29:03 - How to handle environment variables on a server
29:38 - Outro
𝗧𝗢𝗢𝗟𝗦 𝗔𝗡𝗗 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🆓【𝗙𝗥𝗘𝗘】Excel Add-in (𝗠𝘆𝗧𝗼𝗼𝗹𝗕𝗲𝗹𝘁): pythonandvba.com/mytoolbelt
📊 Data Visualization Excel Add-In (𝗚𝗿𝗮𝗳𝗹𝘆): pythonandvba.com/grafly
🤪 Fun Emoji Excel Add-In (𝗘𝗺𝗼𝗷𝗶𝗳𝘆): pythonandvba.com/emojify
📑 Excel Templates: pythonandvba.com/go/excel-tem...
🎓 My Courses: pythonandvba.com/go/courses
📚 Books, Tools, and More: pythonandvba.com/resources
𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🔗 LinkedIn: / sven-bosau
📸 Instagram: / codingisfun_official
💻 GitHub: github.com/Sven-Bo
💬 Discord: pythonandvba.com/discord
📬 Contact: pythonandvba.com/contact
☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here:
▶ pythonandvba.com/coffee-donation
👉Website Demo: share.streamlit.io/sven-bo/streamlit-income-expense-tracker/app.py
👉Streamlit Playlist: ua-cam.com/play/PL7QI8ORyVSCaejt2LICRQtOTwmPiwKO2n.html
👉Deploy your streamlit app for free on Heroku: ua-cam.com/video/nJHrSvYxzjE/v-deo.html
👉Add user authentication to your app: ua-cam.com/video/JoFGrSRj4X4/v-deo.html
💬I will be here in the comments section. For any issues, please provide your exact error message, and I will try to help.
Hey, just wanted to drop a quick note to say thank you for making that UA-cam video! It was seriously so helpful and I loved how you presented the material. Great job!
Thanks for the positive feedback, Mark André! Appreciate you taking the time to leave a comment. 🤩
This is brilliant! I finally start to understand some core Python/programming-concepts and this is a great tool for learning more. I especially liked the database-bit, which I didn`t believe I would.
Well done! I recommend your channel whenever I can.
Great to hear! And thanks for your support - I appreciate it! 👍
very well said, this is very well done video !
Awesome tutorial. The pacing is excellent. The editing is top-notch.
Thanks for watching and the positive feedback. Glad you liked it! 👍
This is exactly what I am looking for. Your codes are neat and your presentation is easy to follow. Thanks a million!
Thanks for the kind words! Stay awesome! 👍
Your Streamlit videos are so helpful, thank you so much, you've become my favourite UA-camr!
Happy to hear that! Thanks for watching. Happy Streamlit-ing! 🎉
Great explanation. This video is about 10 advanced Streamlit videos in one!
I did't get completely that plot but I will give it a chance later.
Thanks for watching. Glad you liked the video :)
Excellent content !!! This channel deserves over 1 million subscribers. Mach weiter so!
Ah Ricardo Campos, you're making me blush! Thanks for the kind comments and happy to hear that you're enjoying the videos!
Precise and to the point 👏👏👏👏
Thank you! :)
Love your tutorial videos, short but valuable. Love from the 🇺🇸
Glad you like them! Greetings to the US 👋
Excellent tutorial. I like your code organisation with all these sections and comments, will borrow this from you.
BTW never heard of Sankey charts. Thank you for sharing this with us. ❤️
Thanks for the kind words! I am glad you enjoyed it. Happy Coding! :)
So much to unpack. Only the Sankey could be its own tutorial... Thank you
Thanks for watching. Agree, the Sankey chart turned out to be more complicated than I initially thought 😅
Thanks for sharing another great vid!
Btw Deta looks cool!
Thank you, Jay!
You are awesome! I thought I knew all about streamlit, you proved me wrong. 😊
Glad I could help! Thanks for watching and for the kind words.
That is amazing. Extremely great job
Thank you! Glad you liked it! :)
Great video, it would be interesting to see if any of the st caching magic decorators apply to connecting to the db? Or is that reopened each time the app reloads?
Thanks for the tutorial, i learn a lot from only a single video :)
Happy to hear that it was useful; thank you for taking the time to leave a comment and for watching the video!
This is very helpful for me thank you!!!
Glad it was helpful! Thanks for watching!
I LEARNED A LOT FROM YOU BRO THANKS
Happy to hear that! Thanks for watching and taking the time to leave a comment - I appreciate it! :)
Great tips.🎉 Thanks a lot.
Glad you liked it. Thanks for watching and taking the time to leave a comment!
Excellent video as always!
Fast, clean and nice explanation of every aspect! I learned Streamlit from you, thx for finding the time to make these excellent videos.
I have a request. Could you show us how to edit an entry in the database? Not from the db panel, but from inside the streamlit app.
Great to hear! Regarding your request, you could use the 'update' method (docs.deta.sh/docs/base/sdk#update)
In this video, you can see an example on how to use it: ua-cam.com/video/eCbH2nPL9sU/v-deo.html
I hope it helps! :)
didaktisch unglaublich gut! Weiter so!
Vielen Dank, Stefan!
Excellent explanation and very very helpful
Thanks for the kind words! I'm glad you found the explanation helpful. 👍
Thank you for an excellent video. I look forward to watching more of your videos! (deta is very different and the website is a bit of a nightmare to navigate (imho) so I chose a different path there.)
Thanks for watching. And yes, I am also sometimes lost in the "deta space", to be honest 😅
@@CodingIsFun there's always MongoDB , but I just used tinydb for local deployment.
This is awesome thank you so much!
Glad you like it! Thanks for watching and taking the time to leave a comment! :)
@@CodingIsFun and a subscriber, lots of great practical content thank you!
God Bless you my brother
Thanks! 🙏
Great video :)
Thank you! :)
All your videos are good.
Thank you! 😀
YOU ARE THE BEST!!!!!!!
THANK YOU! :)
Great video! Could you do another video where you add a budget creation step with a table that has drop-downs for selecting the expense/income accounts? This would be hugely helpful and applicable for a job I am working on.
Thank you for watching the video & your suggestion.
i don't know english, but see your video, i can understand, thank you alot
Glad you liked it. Thanks for watching and taking the time to leave a comment!
You Sir are awesome. These tutorials are easy to follow and you do a great job explaining what its happening, thank you. One question if I may, could you do a tutorial for using a local db rather than a cloud based one? I ask as I like many have real restrictions on where we can send and store our data. And for my application it would need to be a local db using postresql for example? Or would it be easy to modify what you have here maybe?
Thanks for watching the video and your suggestion! :)
Would be cool to teach how to create a public available app.
But anyway cool to play around :)
Thank you for watching the video & your suggestion.
If I can take the time to say how much I enjoyed this content and such a rich solution to a Streamlit App development .
I am self taught now for 7 years and I really seem to identify with your style of coding. Ex. Using different list in settings and looping through to establish your datasets.
I just love the way this came together and it was well thought out and delivered.
My only concern is what of Deta is Depricated for some reason ?
I guess doing a fetchall and storing on a local DB would do the trick using cron job ?
Your thoughts are appreciated...
Thank you for watching and for your kind words. I'm glad to hear that you appreciate my coding/teaching style. Regarding your question: Yes, Deta has undergone significant changes in recent months. The product is now called Deta Space (which you can still use for this project, but the steps differ, and you would need to refer to the current documentation). However, as you mentioned, you could also use any other database of your choice. Happy coding! :)
Very inspiring and professional. Would like to know how to automatically switch to the visualization page after pressing submit on the input form.
Thanks so much for watching the video and leaving a comment! Your request is definitely noted. However, I get a ton of requests for custom solutions and, as much as I'd love to help everyone out, I just don't have the time in my schedule to develop and test all of them. I hope you can understand. Happy Coding!
Great video!
May you please make another video connecting streamlit
webpage to a MySQL database
Thanks for watching and your suggestion
it work on my pc thx bro vеry much
You're very welcome! Thank you for watching and for the comment!
Hello, and THANK YOU. Streamlit is now one of my favourite tools thanks to your helpful videos and tutorials. Just one thing though if you could please help, Deta is now upgraded to Space I think and I can't set it up.
Thanks for watching. I'm happy to hear that you found my Streamlit tutorials helpful. That's right - Deta Cloud is now Deta Space. So, the steps I've shown here are not exactly the same. You'll need to check out the updated Deta Space documentation: deta.space/docs/en/introduction/start/. Good luck with your project, and happy coding!
This is fantastic! I just started to learn Python and found your great video!!! May I ask two questions. I received "No module named 'database' " error message from Python, but the code still runs (with data stored in deta), which is really strange. Also, what if I have a multipage streamlit app and need to collect multiple user inputs on different pages? I think it can be very complicated. Do you have any advice or reference to recommend?
Thanks for watching. Hard to tell from a distance why you are getting an error message. Not sure about your exact use-case, but you can also collect (save data to a database) on multiple pages. Happy Coding!
@@CodingIsFun Thank you! :) One follow-up question. Should we type "pip install database" before we "import database from db" ? or since we created database.py, we do not need to install anything?
@@sounmanhong6601 There is no need to use pip, as the database.py is a local module.
Very good tutorial. Really help me in learning streamlit. By the way, hope you can make some small tutorials on Deta. Another question is, can you share some code to show how to sum all expenses in a year, instead of in a month. TQ
Thank you. Glad you liked the video.
Here is your code to sum up all incomes for all periods:
entries = fetch_all_periods()
total_income_all_entries = sum([sum(entry['incomes'].values()) for entry in entries])
Happy Coding!
Can i make summation based on year? Tq
@@zahiruddinzahidanishah787 Yes, that is also possible. I am sure you can tweak the code I have provided you earlier - just give a try ;)
@@CodingIsFun Ok, sure. I will give it a try. TQ
Great explanation, one question though,How do I add multiple tab in header section of page?
Thanks! 16:59 min
ua-cam.com/video/hEPoto5xp3k/v-deo.html
Have you done anything on inventory management ? I am in the shipping/logistics space and what to build something for my team of 3 - shipping containers to be more specific
Thanks for watching. I do not have specific inventory management video on my channel.
Got it do you recommend a video for me to watch - Will be working on some of your videos this week. @@CodingIsFun
Amazing video! How could you add an option to visualize all the periods' information in the same chart? Thanks!
Thanks so much for watching the video and leaving a comment! Your request is definitely noted. However, I get a ton of requests for custom solutions and, as much as I'd love to help everyone out, I just don't have the time in my schedule to develop and test all of them. I hope you can understand. Happy Coding!
Hi would like to request you to make a video on creating streamlit Web app for generating Invoices in PDF.
Thanks for watching the video & your video suggestion. Sounds like an exciting video topic. I cannot make any promises, but l will see what I can do.
Thanks a lot Sir... Your explanations are too good. I did learn a lot from you . One question Sir. Is it possible to update the data which I have already added. I like to do the update in the application itself . Otherwise one can fetch the data and do the correction with out going to the DB. I appreciate it.. thanks...Manohar
Hi Manohar. Yes, that is possible. Please refer to the deta docs to update values in the DB: docs.deta.sh/docs/base/sdk#update
Happy Coding!
As always great video! Thanks for sharing your wisdom with us.
I can't manage to make the config.toml file to not break my streamlit app. Whenever I save the file, a new error appears and it is about streamlit not being able to read utf-8 or something. Nothing on the internet has helped me so far.
Have you ever faced this kind of problems with themes?
Ensure your config.toml is UTF-8 encoded and without special characters. Verify the file syntax and its location in a .streamlit directory at your project root. Also, make sure you're using Streamlit v0.79 or newer, which support themes. If these don't help, sharing your error message can help to pinpoint the issue better.
I wonder if you could do a tutorial on how to connect streamlit data to AWS databse such as S3 buckets or DynamoDB. Much Appreciated
Thanks for watching and for your suggestion. I'll keep it in mind. In the meantime, you might find the following tutorial on connecting Streamlit to S3 useful: docs.streamlit.io/knowledge-base/tutorials/databases/aws-s3. Happy coding!
At 6:52 , You are adding columns to the form. However, in the output, selectbox for year is added below that of month. IS this expected ?
Yes, that is expected -> streamlit is mobile responsive. If you maximize the window, you can see the columns.
Great video.
My question is that can we add config.toml as code to app.py file directly?
Thanks for watching. As far as I can see, this seems not possible (reference: docs.streamlit.io/library/advanced-features/configuration)
What text editor do you use to build a web application with streamlit? Jupyter notebook doesn't seem to work.
I have never used Jupyter Notebook's for testing streamlit application, but there might be some possibilities. Check out the following discussion: discuss.streamlit.io/t/working-with-jupyter-notebooks/368
In the video, I have used the text editor 'Atom'.
I hope it helps!
@@CodingIsFun I have just downloaded Atom. I'll try it out and see how it works.
feel like ti is ticking way too fast for lol. but hey, as long as you do what you love- the sky is the limit! also just a little advice to
Thanks for watching and for your feedback!
hey @coding is fun. i am having trouble getting my api key from deta as when i go to thier website its asking me to request for devoloper accses and then create a project in "builder" is there anyway to get your api key instally like you did in the video? thanks.
Thanks for watching. The interface from Deta has changed quite a lot. I myself now find it much harder to navigate there. I would suggest having a look at their updated documentation.
You can also use streamlit Tabs for navigation.
Thanks! Yes, Streamlit tabs are also a great (native) option (but that feature was introduced after releasing the video).
@@CodingIsFun Oh. Damn, I thought it was introduced at the beginning. Anyways, A very good video. I got to learn many tricks! My favorite: col1.metrics. :D :)
Sir ,your videos are flawless.
I have a query that is :
streamlit customized themes are not applied even though I have saved .streamlit/config.toml files in all my projects else everything works fine.
Please help me out of this problem
Please include the theme in your setup.sh file, like so:
www.screencast.com/t/tmbfYXm8p
pastebin.com/SKYJJq1x
As option we can use sqlalchemy and slqllite for manage db CRUID and filtration
You can use any DB you like :)
@@CodingIsFun sqlalchemy not db thise is like python ORM make translation to SQL. You can write query code on python, and automate translate to many SQL dialects. Like django ORM.
@@CodingIsFun sqlalchemy not db thise is like python ORM make translation to SQL. You can write query code on python, and automate translate to many SQL dialects. Like django ORM.
@@sergeysergey421 Yes, you could also use SQLAlchemy. Yet, I cannot promise to make a tutorial on that.
Pls made video on Excel VBA
Thanks for your comment & suggestion!
Hello! I wonder i f i can get a Machine Learning Tutorial using streamlit? It will be a very big help
Thank you for watching the video & your suggestion. Cheers, Sven ✌️
If anyone else is annoyed by the warnings about missing labels, you can change the `st.expander("Comments") part to:
```
with st.expander("Comments"):
comment = st.text_area("comment",
placeholder="Enter comment...",
label_visibility="hidden")
```
Bro What Text Editor did you used to make this website like Sublime, VS Code so on
I am used "Atom" in the video.
Please, made video an example of a multipage application
Thanks for watching the video and your video idea! Much appreciated!
Yes
thank you for so much
Is there any way to deploy it into a multi page app, the only difficulty i am having ^^
Thanks for watching. Are you referring to the new streamlit feature? blog.streamlit.io/introducing-multipage-apps/
What exactly is the issue you are facing?
@@CodingIsFun i am unable to deploy it inta a multi page file...
@@ki7985 Ok, but what exactly is the issue and which hosting/cloud service are you using? More details would be helpful
Hi, hast du dein Jupyter Notebook irgendwie angepasst? Die Toolbar sieht bei dir anders aus?
Grüße
Hi Max Musterman ;) Ich nutze die Jupyter Notebook Erweiterung 'Zen Mode': towardsdatascience.com/three-jupyter-notebook-extensions-that-minimize-distractions-bd9ec98f0e2c
Beste Grüße zurück
Sven
this is amazing, but what if I want my format to be a float instead of an integer? I tried to change it to "%f" but it still does not accept it.
Thanks for watching. Which number do you mean?
@@CodingIsFun thanks for replying, you are becoming my favourite programmer.. I mean floats for the expenses and incomes. But tried %f and it showed an error and that it would still be an integer.
awesome tutorial, congratulations. but i'm with problems to implement. the main page works, but when i click in data visualization the error "HTTPError: HTTP Error 401: Unauthorized" appears. Please help me, i'm not a expert, i just trying to implement the projetc until the end.
Thanks for watching and for your question. Hard to tell from a distance why you are facing an error. Sorry that I cannot help.
How come you don't structure you code in functions?
Or use streamlit secrets for the keys?
Thanks for watching. Because it is just an example :)
please help me with Deta... I created the account but created as programmer and it's all different from what you're doing... how can I do it???
Got it!!!!
Great!
AttributeError: module 'streamlit' has no attribute '_is_running_with_streamlit'.This error happens every time I try to plot the Hiplot view. Do you have any tips to resolve?
Thanks for watching. Unfortunately, with that bit of information, I cannot help you. You might want to take some time to write down which line of code is causing the error; let me know if you have modified the code from the tutorial, explain in more depth what you did to troubleshoot the problem and provide some more context. Thanks!
My theme hasn’t changed after following th instructions ? Can anyone help
Thanks for watching. It has not changed locally or on a web server? Which streamlit version are you using?
Do we need to run this app every single time using cmd??
No, as explained in the video
Want to use it in costing dashboard
Great! Happy Coding! :)
Submit button is not showing ...why??
Thanks for watching and for your question. Hard to tell from a distance why you are facing an error. Sorry that I cannot help.
i have got an error 'list' object has no attribute 'keys'
Thanks for watching and for your question. Hard to tell from a distance why you are facing an error. Sorry that I cannot help.
@@CodingIsFun Thanks for replying
Hey i cannot use developer mode ..plz help
Please contact the deta support team. Thanks!
Hey everyone, I am getting this error: Missing Submit Button
This form has no submit button, which means that user interactions will never be sent to your Streamlit app.
To create a submit button, use the st.form_submit_button() function. And I have the correct code ... submitted = st.form_submit_button("Sava Data")
if submitted:
Please clone the repo and try it again. Happy Coding!
Why do I always receive the warning message that I don't have the latest version of pip. Even though I've updated it🤦♂️
You may be using multiple Python environments, and the updated pip is installed in a different one. Make sure you're using the correct environment or try using "python -m pip" instead of just pip.
@@CodingIsFun I just wanted to say a huge thank you for teaching me programming! As a teacher, I was a complete noob until you showed me the ropes a few weeks back. Now, I've got four awesome Streamlit apps that make my job a lot more fun. Let me buy you a coffee to say thanks! And by the way, what's your favorite IDE for coding?
@@arnoldtvisagie Awesome work on making those four Streamlit apps! It's great to hear that I was able to help you along the way. My favourite IDE is definitely VS Code - it's got so many cool features and extensions. Thank you for offering to support me with a coffee ☕! You can do so here: pythonandvba.com/coffee-donation. Keep up the good work. Happy Coding! 🚀
They've changed Deta =[. Been having issues setting up the database
Yes, I know. ☹ Check out the new documentation: deta.space/docs/en/reference/base/sdk
Happy Coding!
i dont have that preset can i get it sowhere
Which preset? All files can be found here: github.com/Sven-Bo/streamlit-income-expense-tracker
A
wesome
Thanks!
Good tutorial, but too much time is wasted on Deta NoSQL database. Database popularity statistics don't lie. Most Python developers want simple, local SQLite databases to start, then PostgreSQL, MySQL, and other SQL databases.
Please redo this tutorial using SQLite. Thank you.
Thanks for watching the video and sharing your opinion/request.
Hey there ,
Why in the world did you choose that Deta platform to create the database bro, a new user like me even can't find how to get the api key to create a database
Worst experience 😞 bro, everything was going fine untill you started with the deta platform.......
Deta has changed after releasing the video... Cheers, Sven ✌️
this deta space is literally the worst ui i have ever seen; its impossible to navigate through the website; i am pissed
I feel you! I'm not a fan of the new UI either. I find myself lost in (Deta) space too 😬
With your help, coding is fun!
Happy to hear that! :)
this is great and I followed up until Deta... :( I've spent 30 mins on trying to get a new project setup with no luck
Thanks for watching. Yes, deta cloud changed to deta space. I am also not very happy with that change 😅 Please refer to the deta space documentation: deta.space/docs/en/reference/base/sdk
I hope it helps! Happy Coding!
Thank you for your videos. Please could you help me with the following question. After I import a .csv with only two decimals like 1.00 or 333.00, the following lines don't maintain those two decimal. Those decimals become 1.000000 or 333.000000. I would like to have only two decimal. Could you help!?
with st.expander("Table"):
st.write(category_df.style.background_gradient(cmap="Blues"))
csv = category_df.to_csv(index=False).encode('utf-8')
st.download_button("Download", data=csv, file_name="file.csv", mime="text/csv",
help='Click here to download')
with st.expander("Table"):
df_selection["month"] = df_selection["date"].dt.month_name()
sub_category_Year = pd.pivot_table(data=df_selection, values="amount", index=["name"], columns="month")
st.write(sub_category_Year.style.background_gradient(cmap="Blues"))
with st.expander("filtered"):
st.write(df_selection.iloc[:500, 0:20:1].style.background_gradient(cmap="Blues_r"))
Thank you very much for watching the video and your comment. Your requirements are well noted. Yet, I receive many requests for creating individual solutions. As much as I want to help, I simply do not find the time in my daily schedule to develop & test all the different requests. I hope you can understand. Thank you!