- 62
- 529 177
Fanilo Andrianasolo
France
Registrace 13. 07. 2013
đȘ Craft Data Science That Gets you Noticed
âš Creative Content around Python App Frameworks | Video Editing & Content Creation | Community Building & Personal Branding
âš Creative Content around Python App Frameworks | Video Editing & Content Creation | Community Building & Personal Branding
EPIC Google Sheets to Interactive Dashboard in Python ft. Streamlit / CSS
Looking for an end to end implementation of a live stocks dashboard from Google Sheets to a Python Web App? In this tutorial, you'll discover my comprehensive workflow to build my Streamlit web dashboard:
- How I build a live Stocks tracker in a Google Sheets workbook
- How I connect to Google Sheets from Python using @AirbyteHQ ( airbyte.com/product/pyairbyte )
- How I build the Streamlit app with horizontal layout columns, Plotly Candlestick and a grid of indicators for easy reading
- How I add custom styling to the Streamlit app with heavy use of HTML inspection, targeting widgets to add colors, box shadows and new Google fonts
By the end of this video, you'll be equipped with the skills to quickly recreate Excel dashboards within Python web apps. No more struggling with complex VBA macros - empower yourself to generate interactive and visually appealing dashboards for financial data analysis.
---
đ§ Want a free, slower paced live coding of this tutorial? Sign up to my email list to be alerted first, and keep up to date with the latest news, tutorials and resources about Streamlit & friends ⥠andfanilo-newsletter.streamlit.app/
đ° Buy me a coffee to stay awake while editing www.buymeacoffee.com/andfanilo
đŁïž Find my socials on andfanilo.com
đ Links
- Source code + Sample Data: github.com/andfanilo/social-media-tutorials/tree/master/20240512-cssdashboard
- Or fork this Google Sheets: docs.google.com/spreadsheets/d/1DPzFbZ6Oh-FixU6hP5Eoix0wsgb_C2FHx9KAGEunph4/edit?usp=sharing
đ§ My tools (Affiliate links to support me!)
- đ Streamlit Official Book - amzn.to/3QuRPwl
- đ· Main Camera - amzn.to/3QvTosB
- đ· Main Lens - amzn.to/3svYCwq
- đïž Microphone - amzn.to/47l5ewA
- đ” Music & Sound Effects - www.epidemicsound.com/referral/a2p22s
00:00 Dashboard Mockup
01:08 Build live stocks tracker in Google Sheets
02:40 Create a service account for Python
05:14 Connect to Google Sheets with Airbyte
09:17 Download Google Sheets data to Python with Airbyte
10:31 Display a Dataframe with inline sparkline
12:14 Track data with an interactive Candlestick plot
14:42 Create a grid of indicators
16:41 CSS Styling Prerequisites: inspect HTML
19:04 Create a grid of company watchcards
20:54 Inject a Google font into the Streamlit title
22:51 CSS Styling of indicators into cards
25:09 CSS Styling of company watch cards
26:59 Enjoy the dashboard!
---
đȘ¶ A segment of this video was sponsored by @AirbyteHQ . It was very easy to setup, go build Streamlit apps over new data sources with Airbyte!
â ïž Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue providing you with free content!
#streamlit #python #datascience #dataapps
- How I build a live Stocks tracker in a Google Sheets workbook
- How I connect to Google Sheets from Python using @AirbyteHQ ( airbyte.com/product/pyairbyte )
- How I build the Streamlit app with horizontal layout columns, Plotly Candlestick and a grid of indicators for easy reading
- How I add custom styling to the Streamlit app with heavy use of HTML inspection, targeting widgets to add colors, box shadows and new Google fonts
By the end of this video, you'll be equipped with the skills to quickly recreate Excel dashboards within Python web apps. No more struggling with complex VBA macros - empower yourself to generate interactive and visually appealing dashboards for financial data analysis.
---
đ§ Want a free, slower paced live coding of this tutorial? Sign up to my email list to be alerted first, and keep up to date with the latest news, tutorials and resources about Streamlit & friends ⥠andfanilo-newsletter.streamlit.app/
đ° Buy me a coffee to stay awake while editing www.buymeacoffee.com/andfanilo
đŁïž Find my socials on andfanilo.com
đ Links
- Source code + Sample Data: github.com/andfanilo/social-media-tutorials/tree/master/20240512-cssdashboard
- Or fork this Google Sheets: docs.google.com/spreadsheets/d/1DPzFbZ6Oh-FixU6hP5Eoix0wsgb_C2FHx9KAGEunph4/edit?usp=sharing
đ§ My tools (Affiliate links to support me!)
- đ Streamlit Official Book - amzn.to/3QuRPwl
- đ· Main Camera - amzn.to/3QvTosB
- đ· Main Lens - amzn.to/3svYCwq
- đïž Microphone - amzn.to/47l5ewA
- đ” Music & Sound Effects - www.epidemicsound.com/referral/a2p22s
00:00 Dashboard Mockup
01:08 Build live stocks tracker in Google Sheets
02:40 Create a service account for Python
05:14 Connect to Google Sheets with Airbyte
09:17 Download Google Sheets data to Python with Airbyte
10:31 Display a Dataframe with inline sparkline
12:14 Track data with an interactive Candlestick plot
14:42 Create a grid of indicators
16:41 CSS Styling Prerequisites: inspect HTML
19:04 Create a grid of company watchcards
20:54 Inject a Google font into the Streamlit title
22:51 CSS Styling of indicators into cards
25:09 CSS Styling of company watch cards
26:59 Enjoy the dashboard!
---
đȘ¶ A segment of this video was sponsored by @AirbyteHQ . It was very easy to setup, go build Streamlit apps over new data sources with Airbyte!
â ïž Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue providing you with free content!
#streamlit #python #datascience #dataapps
zhlĂ©dnutĂ: 10 270
Video
Teasing Streamlitâs Next Biggest Changes
zhlĂ©dnutĂ 3,3KPĆed 2 mÄsĂci
The 5 latest releases seem to prepare the bigger Streamlit milestones. In this video you will see how the new features are smaller steps to big changes like multipage v2, dialog window and partial rerun/experimental fragment â Want to support me? www.buymeacoffee.com/andfanilo đŠFollow my daily updates on Twitter: andfanilo đŁïž Find me on: andfanilo.com đ Links - Popover Demo: popover...
Got Google Cloud Certified, bye Streamlit Cloud Deployment !
zhlĂ©dnutĂ 1,8KPĆed 2 mÄsĂci
Is it worth passing the Google Cloud Platform "Professional Cloud Architect" certificate to learn about GCP, and think about migrating apps from Streamlit Cloud to GCP? â Want to support me? www.buymeacoffee.com/andfanilo đŠFollow my daily updates on Twitter: andfanilo đŁïž Find me on: andfanilo.com đ Links - GCP Cheatsheet: googlecloudcheatsheet.withgoogle.com/ - Google Cloud Skills B...
5 Things I Wish I Knew Before Learning Streamlit
zhlĂ©dnutĂ 18KPĆed 3 mÄsĂci
Would you like to understand the main limitations of the Streamlit Python library for building data web apps, before picking it up for a project? In this video, I'll cruise through 5 obstacles that regularly come back within the community and multiple ways/hacks/techniques to work around those limits. You'll find out: - how to hack markdown and iframe to style your app - if it's possible to alt...
GenAI could change Python Web Apps YouTube
zhlĂ©dnutĂ 1,5KPĆed 4 mÄsĂci
I took a 3 month break to think about the future of my channel...but then I started overthinking about how digital twins could help me upload way more tutorials, how LLMs could make it easy to write Javascript web prototypes in place of Streamlit, and how it will affect my overall CZcams education strategy for 2024 GenAI is tearing through all parts of the job market, and developer educators ma...
How I Use OpenAI Assistants API To Control My Streamlit App
zhlĂ©dnutĂ 9KPĆed 6 mÄsĂci
Seen the OpenAI Dev Day Wanderlust Assistants API demo and wondering how to implement a similar web app in full Python? It's all thanks to the new Assistants API feature and its integrated Function Calling. In this video, I prototype a Streamlit version of the app. Through this quick overview, you'll learn to: - leverage Streamlit's Session State for a clean reactive app using an MVC-like patte...
If I was a Streamlit Beginner, Iâd read this! - Epic Book Trailer
zhlĂ©dnutĂ 2,6KPĆed 7 mÄsĂci
The âStreamlit for Data Scienceâ book by Tyler Richards just released an updated version 2. It provides the perfect project-based hands-down approach book to learn Streamlit. This trailer is proof of it. Giveaway Rules 1. Must be subscribed to my CZcams channel 2. Comment on this video, like what app you would build first 3. Must be 18 years or older to enter (or have your parentâs permission) ...
EVERY Streamlit News You Might Have Missed in Spring/Summer
zhlĂ©dnutĂ 2,5KPĆed 7 mÄsĂci
Catch up with all the Streamlit news you might have missed this last semester! In this video, I'm going through: - all the releases for new features like editable dataframe, chatbot elements and st.connection, - community components like Mito or streamlit paywall for app monetization, - and integrations with other libraries like Langchain, AssemblyAI or Clarifai Eveything Streamlit-related for ...
I Built a Youtube Chatbot ft. AssemblyAI / Llamaindex / Weaviate
zhlĂ©dnutĂ 1,4KPĆed 8 mÄsĂci
I wanted to use the opportunity of a Streamlit LLM Hackaton to build an app that integrates AssemblyAI for transcription, LlamaIndex for chatting with transcripts and Weaviate to store transcript embeddings in the Cloud. In this video, you'll see me speedrun through my whole process, from - downloading and extracting audio from my CZcams videos - transcribing 2 years of CZcams content with Asse...
Streamlit Reveals NEW CSS Styling Trick! (Hereâs How to Use)
zhlĂ©dnutĂ 8KPĆed 8 mÄsĂci
Want to change the style of a Streamlit button or Slider? In this tutorial, you'll discover the workflow I use to style some widgets using a new alpha release hidden in an external package by the Streamlit Developers. You will learn: - How to use the devtools to target a specific HTML element in your app - How to edit a widget styles through the Styleable Container component By the end of this ...
My Workflow for Building any Streamlit Dashboard Project
zhlĂ©dnutĂ 64KPĆed 9 mÄsĂci
Tired of manipulating Excel dashboards with complex VBA macros? In this tutorial, you'll discover a comprehensive workflow I use to build most of my Streamlit web dashboards with SQL. It involves three key steps: - How I load an Excel workbook into a Pandas DataFrame through a file upload widget, and display it into a Streamlit app with live-reloading - How I format the dataframe with SQL throu...
Snowflake Has A New Strategy For Streamlit
zhlĂ©dnutĂ 1,9KPĆed 10 mÄsĂci
Snowflake Summit shone new light on where it is taking Enterprise Streamlit to. In this video, we react to the Snowflake Summit 2023 keynote and get a deeper look into the collaboration between Snowflake and Streamlit as they set out to redefine how to curate, build and showcase Generative AI applications for enterprise. đ” Want to support me? www.buymeacoffee.com/andfanilo đŠFollow my daily upda...
I Prepared a Talk About Being a YouTuber For a Dev Event
zhlĂ©dnutĂ 398PĆed 10 mÄsĂci
How is my first talk since COVID going to fare? In this vlog, I will be sharing some BTS for building and giving my first talk in a while. There's a bit on how I structure, script and rehearse my talks, so you have an idea of a process if you plan to give your first talk too. â Want to support me? www.buymeacoffee.com/andfanilo đŠFollow my daily updates on Twitter: andfanilo đŁïž Find ...
Reacting to the Most Popular Streamlit LLM Apps
zhlĂ©dnutĂ 3,2KPĆed 11 mÄsĂci
Looking for inspiration and apps to show your managers/stakeholders to convince them of the value of Generative AI? In this video, I react to a lot of LLM-powered Streamlit apps, there's a lot of OpenAI, GPT-3.5, text-davinci and Langchain, to get you inspired to build more. â Want to support me? www.buymeacoffee.com/andfanilo đŠFollow my daily updates on Twitter: andfanilo đŁïž Find m...
Kickstart your Custom Streamlit Chatbot (ft. CSS & Langchain)
zhlĂ©dnutĂ 15KPĆed 11 mÄsĂci
Kickstart your Custom Streamlit Chatbot (ft. CSS & Langchain)
An Unfiltered Deep Dive into Streamlit's Limitations
zhlĂ©dnutĂ 10KPĆed rokem
An Unfiltered Deep Dive into Streamlit's Limitations
ChatGPT builds a Python Dash App for Me
zhlĂ©dnutĂ 2KPĆed rokem
ChatGPT builds a Python Dash App for Me
This Streamlit Chatbot works over your Notion documents
zhlĂ©dnutĂ 3,9KPĆed rokem
This Streamlit Chatbot works over your Notion documents
HTTPS, Global Secrets, App Embed | Streamlit v1.20-21
zhlĂ©dnutĂ 4,3KPĆed rokem
HTTPS, Global Secrets, App Embed | Streamlit v1.20-21
The Epic đ€ Hugging Face Tasks Overview
zhlĂ©dnutĂ 4KPĆed rokem
The Epic đ€ Hugging Face Tasks Overview
Streamlit App Showcase | Tips for making your app stand out!
zhlĂ©dnutĂ 11KPĆed rokem
Streamlit App Showcase | Tips for making your app stand out!
What's new in Streamlit 1.18-19? | Sharing Some Thoughts..
zhlĂ©dnutĂ 2,4KPĆed rokem
What's new in Streamlit 1.18-19? | Sharing Some Thoughts..
GPT is Taking Over the Streamlit Community
zhlĂ©dnutĂ 2,7KPĆed rokem
GPT is Taking Over the Streamlit Community
How to Convert a Streamlit App to an .EXE Executable
zhlĂ©dnutĂ 36KPĆed rokem
How to Convert a Streamlit App to an .EXE Executable
What's New in Streamlit? âą Improved Caching, Chart Colors & more
zhlĂ©dnutĂ 3,1KPĆed rokem
What's New in Streamlit? âą Improved Caching, Chart Colors & more
Surviving Your 1st Year of Youtube Side-Hustling
zhlĂ©dnutĂ 769PĆed rokem
Surviving Your 1st Year of CZcams Side-Hustling
10 extra Streamlit widgets you didn't know existed
zhlĂ©dnutĂ 16KPĆed rokem
10 extra Streamlit widgets you didn't know existed
You Donât Want To Miss Out On Streamlit's 2023 Features
zhlĂ©dnutĂ 6KPĆed rokem
You Donât Want To Miss Out On Streamlit's 2023 Features
Thinking About Streamlit's Real Competition âą Big Data & AI Vlog
zhlĂ©dnutĂ 2,5KPĆed rokem
Thinking About Streamlit's Real Competition âą Big Data & AI Vlog
More basic please
hahaha bon aprĂšs ils sont hnnĂȘtes dessus mais en tout cas oui tu as raison Fanilo x)
can we use libraries like daisyui to change the css using the invisible span element? it would be amazing
Thank you much for this video, you solved a team problem that we had for so long. Cheers mate !!!
Glad it helped! Hmm I should make a new, more modern version of this video đ
Don't learn streamlit, instead learn htmx
Iâd say learn both đ
@@andfanilo Have you heard the term's "Choose a language and you are married to it rest of your life. So choose wisely". I have wasted my life so many hours and days just looking for some shortcut and learning any new frameworks or library but at the end of everything I came back to Django and JavaScript.
Great content, thank you. Is it possible to create a bidirectional component with st.html ? I'm trying to make an image button and get the onclick value in python.
Thanks for the support! At this time it's not possible to get a callback from HTML to Python with st.html, you have to build a bidirectional component BUT you don't have to use the usual react template or react-less template from github.com/streamlit/component-template You can use discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064 instead Also I think there's this st-clickable-image discuss.streamlit.io/t/custom-component-to-display-clickable-images/21604 you can maybe get inspired from its code
not only educative but also entertaining + fun... Thank you very much Fanilo
Thank you for the kind words đ hope to see you on the next video!
Excellent i love it.
Thanks for watching! If didnât yet, check out my latest video too, it is another way of doing Google sheets Streamlit dashboard but in the same video style đ
Thank you @Faniloâ€
Thanks for watching, see you on the next one :)
Hi, friend! If you just want to read data from Google Sheets, thereâs an easy way to do it: - Open your spreadsheet in Sheets - Click on File - Click on Share, then âPublish to webâ - You can choose the entire document or just one sheet - It defaults to 'Web page', but you can easily change it to CSV - Click on "Publish" This will generate a link directly to the spreadsheet data. Just read it in Pandas[pd.read_csv('link')] and youâre good to go. This is just a tip from a 'Data From Beginner' who spent a lot of time figuring out how to connect with GSheets. Your tutorial was amazing, by the way! It gave me some great ideas! Iâll definitely try them out! Thanks!
Thanks for sharing! Yeah I saw this trick while browsing through the Google Workspace for Developers and thought there were so many ways to interact with Google APIs eheh. Do you know if it's possible to bake authentication into this webpage, just so not everyone who discovers the link has access to it?
how did you open streamlit preview in VS code
Actually it's just VSCode and a web browser side-by-side, but I configured VSCode margins so the topbar for both windows match for the screen recording ( gist.github.com/andfanilo/ae99aed9c454a46c1dbfe6a0b9fa0012 to check my config)
awesome
Thanks for watching, see you on the next one :)
You finally did it
It was a long ride! Hope you enjoyed it :) see you on the next one!
Amazing, stuff man!
Thanks for watching, see you on the next one :)
This is the game changer.
Thanks for watching, see you on the next one :)
Hi Fanilo, Thanks for sharing insight informations. Can we can change column header background color in ST. Kindly reply and how to do.(st.dataframe)
Streamlit is data hobbyist platform nothing more, it lacks basic framework for an application which is designed to do serious stuff. It can never become a platform to produce enterprise grade application. Itâs very heavy while running, practically struggling when you are trying to do some serious work, very often st.write which one of the basic component of platform starts throwing error. I thank you for sharing the truth to the developer community so that they know the Streamlit platform limitation.
Awesome Video which tts did you use for this? for the tldr? 1176 seconds
Hello, thanks for watching! It was probably ElevenLabs for this video đ€ ( elevenlabs.io/ )
Great!!!
Thanks for watching! See you on the next one :)
I really love the sparklines, one of my favorite features. And I HATE how hard it is still to read / write with google sheets, st.connection makes it much easier but on the google side it still is not super easy
Yeah, I find this service account creation demanding for new users đ that could be automated maybe, like with Terraform or a command to paste into Google Shell Sparklines ftw, I initially wanted to use the st-aggrid ones but they require an enterprise license so yay for Streamlit Sparklines! Thanks for watching :)
Awesome tutorial as always... I've used CSS too but that :has selector is a really great trick... Thanks for sharing and thanks a lot for the mention of my dashboard about Poverty â€
Credits to arnaudmiribel.github.io/streamlit-extras/extras/stylable_container/ for the initial idea, plus st.html makes it a little easier! And I did already tell you your dashboard was the initial trigger to this video? So thanks for building/sharing it đ looking for your next dashboard!
@@andfanilo I couldn't feel more proud, thank you for your support, I have learned a lot from your videos, I'm really glad to be useful for you and to give something back.
Great work, Fanilo. This video is going to be a goldmine for all streamlit users!
đȘ let's hope so! thanks for the support :)
can i say i love you??? cause damn dude, your explanation is perfect!!!!
Well thank you for the support I'm very grateful :) I hope you watch more then, I even just released a new video!
that is great
Thanks for watching, see you on the next one!
I love new trick with CSS :D
Eheh, this is actually a customized version of arnaudmiribel.github.io/streamlit-extras/extras/stylable_container/ made simpler with st.html. I figured it would be better to explain it so people get to learn CSS (sometimes I think my channel will be rebranded "CSS for data scientists"!) Until one day we get custom classes on widgets maybe one day đ
What is the difference beetwen pyairbyte and st gsheet connection?
gsheets-connection is an official st.connection ( docs.streamlit.io/develop/api-reference/connections/st.connection ) wrapper around GSpread to connect to GSheets. The library puts the connection and data in Streamlit cache for you so you only have to query it. It's a Streamlit-specific solution. Pyairbyte is a Python library for Airbyte ( airbyte.com/ ) that manages the connection and data download to a lot of different databases like MySQL, GSheets (which I use in the video) or BigQuery. It comes with more features than gsheets-connection like caching data in DuckDB, or fetching datasets already managed in a Cloud instance of Airbyte. If you work in a company that uses Airbyte to connect and manage multiple data sources, chances are you can directly download or refresh data from their self-hosted Airbyte platform. It's a popular solution amongst data engineers, not just specifically Streamlit. What I did in this tutorial is basically recreate a st.connection gsheet pyairbyte, without explicitly calling it st pyairbyte gsheet connection...
Ahh i see. Thank you for the comprehensive explanation
3 minutes after release, new record!
Ahah you're the first :D congrats!
It's 3 in the morning here and every time I put on streamlit I get fanilo hahahaha. Thanks for the videos bro!
đ Aren't my videos too "exciting" to get you to sleep?! Thanks for the support as always, very appreciated :) also there's a new one coming tomorrow eheh
@@andfanilo Very good videos, I was just looking at the backgrounds and how to make something more personalized, thanks man
Hi, I had this error below while I was trying to create the .exe file from my streamlit code: Error: The entrypoint file "app.py" is not included in the bundled files. Can someone help me?
I haven't tried stlite in a while but from github.com/whitphx/stlite/tree/main/packages/desktop there are some new configurations options to add to point to the entrypoiny.. But the honest best way would be to head to github.com/whitphx/stlite/issues if it still doesn't work, the author is very helpful there!