Simple Web App with Flask and Heroku - Python GUI for Beginners

  Рет қаралды 216,524

Python Simplified

Python Simplified

Күн бұрын

In this tutorial, I will show you how to create a Web Application with Flask!
This video the also the first episode of The Battle of the App Frameworks, where 🤩🤩 YOU GET TO CHOOSE THE WINNER! 🤩🤩
Today we will create a simple "Hello World" Application with Flask, which includes:
* an HTML template containing the structure of a web page
* a CSS stylesheet containing design instructions
* a Python backend that communicates with a web server
And we will also 🚀DEPLOY🚀 this application for free with Heroku! 😁
This tutorial covers all the basics of Flask, from start to finish! (excluding Javascript interactions, which we will leave for later 😜)
⏰ TIME STAMPS ⏰
00:00 - Battle of the App Frameworks
00:25 - Flask Overview
01:17 - Flask Directory Structure
01:52 - HTML Structure
06:52 - Python Backend
09:31 - Warning: this is a development server ⛳
09:42 - Message Flashing
11:04 - A secret key is required
13:38 - CSS Styling
18:05 - CSS doesn't update - Clear Cache!
20:14 - Procfile and Requirements
22:42 - Deploy Flask App with Heroku
24:43 - Thanks for watching! :)
*********************************
🐍 IMPORTANT NOTES/LINKS 🐍
Install Flask 🌶
* Anaconda: conda install -c anaconda flask
* PyPI: pip install flask
Install Green Unicorn 🦄
$ pip install gunicorn
Change Production Server to Development Server: ⛳
$ export FLASK_APP=sayHello
$ export FLASK_ENV=development
$ flask run
Complete project on Github:
github.com/MariyaSha/greeting...
Link to logo from my Kivy App:
github.com/MariyaSha/SimpleGr...
Beautiful icons are by:
www.freepik.com/
www.flaticon.com/

Пікірлер: 345
@robinferizi9073
@robinferizi9073 2 жыл бұрын
Note: html and css are not programming languages they’re mark up languages, as there is nothing in html or css that makes them Turing complete
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Hi Robin 😊 Don't worry, I'm definitley aware of it! After all, "markup" is the "M" of HTML! 😃 It's just not a technicality I wanted to focus on at this point in time, especially as part of a "quick overview". If I use the term "markup language" to explain a different term - I also need to explain what it means and how it differs from a "programming language". If I were to film a video about HTML or markup languages in general - I would have probably used the technical definitions instead of an abstraction. But here's a caviat - the term "markup language" is not very well defined and I can make the argument that it overlaps with the definition of "programming language". There's an ongoing debate on this, you can actually find many different opinions on Stack Overflow and each of them has a valid logic behind it. In my opinion, markup is a subset of programming as even web pages are programs in one way or another. Even static pages without any JS interactions are encoded by a computer, so it does seem to fit the definition... but that's just my opinion 😉 Anyhow, I don't see a reason to dig so deep... 😅 just refer to "markup" as an abstraction of "programming" hahahah
@robinferizi9073
@robinferizi9073 2 жыл бұрын
@@PythonSimplified yeah good point, nice vid too
@PythonSimplified
@PythonSimplified 2 жыл бұрын
@@robinferizi9073 thank you so much! 😃
@shoshanamofaz3012
@shoshanamofaz3012 2 жыл бұрын
You may already know this but html and css make web pages look pretty while JavaScript is the engine that makes them work.
@robinferizi9073
@robinferizi9073 2 жыл бұрын
@@shoshanamofaz3012 yeah I know what they do, and that’s the reason they are known as markup languages
@darioalb00
@darioalb00 Жыл бұрын
Wonderful!!! I am an old developer (61 years old) trying to learn the current technologies. Already tired of volunteer tutorials that know little about teaching, I come across this one, which in just 25 minutes, conveys all the basics I need to learn. I am amazed!!! Congratulations!!!
@PythonSimplified
@PythonSimplified Жыл бұрын
Thank you so much for the awesome comment, Darío!! I have another Flask tutorial (but twice as long unfortunately 😅 haha) and it shows you how to combine a SQLite database with your app, creating a Groceries List application: ⭐ Flask SQLite Web Application Step by Step Tutorial - HTML, Jinja, CSS, JavaScript, Python: kzfaq.info/get/bejne/rJlzhrSctbDYcZc.html It's a bit more advanced than this tutorial, but it gives you some additional tools to use on your exciting new journey :))) If you're not yet familiar with SQLite or databases in general, I have some really nice tutorials that you may find useful: ⭐ SQLite Basics: kzfaq.info/get/bejne/hc6aYKaiprLWp58.html ❗you'll need to add connection.commit() after each data insertion command, I've accidentally skipped it in the tutorial above 😅 then you can practice your SQLite skills and learn how you can generate databases by automatically copying them from the web (what we call Web Scraping): ⭐ Web Scrape Databases with SQLite and Mechanical Soup: kzfaq.info/get/bejne/g9F3hNCL1LPZgoE.html This one includes the connection.commit() command I've mentioned above 😉 Best of luck and I hope it helps! :))
@darioalb00
@darioalb00 Жыл бұрын
@@PythonSimplified What a frustrating!!! Much of my illusion was to see my Flask app run in the cloud. I was waiting for the weekend to have the necessary time to carry it out, and I find that Heroku is no longer free !!! Do you know any good alternative ???
@Soulo_Sreeni
@Soulo_Sreeni 2 жыл бұрын
The way of explanation is phenomenal ! I feel great that KZfaq recommended it to me today 🤩
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Yeey! I'm so happy you liked it! 😀 Welcome aboard! 😁
@developerx962
@developerx962 2 жыл бұрын
I am so happy because you are just given us the best statement "and since we have saved this file inside the appropriate template folder, flask will be able to find it with no issues"
@DevStephenW
@DevStephenW Жыл бұрын
Just found your videos. Such a perfect tutorial. The right speed, the right amount of explanation and detail. Great stuff.
@janusztarnowski115
@janusztarnowski115 Жыл бұрын
simple application enter your details kzfaq.info/get/bejne/er2eaJB2z562XYE.html
@Andrew-Escudero
@Andrew-Escudero Жыл бұрын
You are great! Love the clarity, simplicity, and positivity in your videos. Look forward to learning more from you!
@g.rioscairo
@g.rioscairo 2 жыл бұрын
I simply loved this tutorial. First time using Flask and Heroku! And it all worked so smoothly, nice :)
@MichaelSwartout
@MichaelSwartout 2 жыл бұрын
I swear this is the first time I have every seen you on a windows pc. You are such a wonderful teacher. Who likes to play some Steam games and not just code. Oh ya!
@spadezap9728
@spadezap9728 2 жыл бұрын
Thanks so much! I have been looking everywhere on how to do this and this is the only video that explained it well!
@thebarryman
@thebarryman Жыл бұрын
Best tutorial for Flask I've seen so far, thank you!
@BogdanAnghelina
@BogdanAnghelina Жыл бұрын
I'm now starting to learn Python through the Mimo mobile app. After a few chapters, I started practicing and looking for more complex projects. Your video is very explanatory and I congratulate you on that! Although I have a pretty solid background in HTML, CSS, and WordPress (PHP), I'm just now starting to understand Python and I think it's awesome what you can do with it.
@rnseby
@rnseby 2 жыл бұрын
Thanks for the great walkthrough. Quick and straightforward.
@darcydonelle2340
@darcydonelle2340 2 жыл бұрын
Great video! Deployed my version of the app, and it works wonderfully, as expected. Thank you!
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Yeeey!! Super happy to hear!! Thank you so much 😃
@estebanglsa
@estebanglsa Жыл бұрын
I love these videos! You really do a great job explaining. The sad part is: Heroku no longer offer free deployment 😥
@kayodeadechinan5928
@kayodeadechinan5928 2 жыл бұрын
I really like your way of teaching! Great videos!
@TheSuperRunner
@TheSuperRunner Жыл бұрын
Great tutorial! I'm trying to write a web app (with basically no web experience) for a new project of mine and this made things a lot more clear.
@mauno91
@mauno91 2 жыл бұрын
You can force a cache refresh on a single page: Ctrl + F5 for Windows. Shift + Reload for Safari.
@happyjohn1656
@happyjohn1656 2 жыл бұрын
Wow this is amazing, so awesome to know! Thanks Mauno! 🤗 9:22 PM 2/20/2022
@godkaboom
@godkaboom 2 жыл бұрын
Ctrl+Shift+R is what you'll need to refresh without using cache
@fersaol
@fersaol Жыл бұрын
Thanks to you I have been able to deploy a working web app, you deserves all the best in the world. Thanks a lot!!!!!
@vigneshpadmanabhan
@vigneshpadmanabhan 2 жыл бұрын
Thanks a lot! Such an amazing video. I have always wanted to deploy the solutions I create on the web, but never took the step, thanks to the youtube algorithm, found this video by chance and I like your teaching approach. It's simple to follow and easy to execute. Would love to see a sequel to this video.. would it be possible for us to have a MySQL or SQLite or PostgreSQL anything you would prefer, that can store the names we type? I am interested to learn more about this. A little bit about myself, I'm a data science guy and I never got a chance to do anything beyond proof of concept at work and personally was never exposed to a platform that can host an app on the web free. So this is my start. Thanks again!
@maxwellochieng4924
@maxwellochieng4924 2 жыл бұрын
You are the BEST, I found your video at a point i was learning how to deploy my ML models in Heroku
@markus4394
@markus4394 Жыл бұрын
Thank you for a great tutorial. Got me to transition from making simple console apps to a real webapp!
@ralphanthony5198
@ralphanthony5198 8 ай бұрын
Great video, amiga! Awesome work! I definitely love all your videos!!!
@trtlphnx
@trtlphnx 2 жыл бұрын
I Love Your Lessons; Very Eclectic and Cogent ~ You Are Vastly Appreciated ~!
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you so much for the lovely feedback, trtlphnx! 😁
@S0190S
@S0190S Жыл бұрын
Way simpler to use Heroku than AWS. Thank you for this video! I learned Flask in my bootcamp and have been needing a simpler deployment method. Thanks again!
@rrivillox
@rrivillox 2 жыл бұрын
Flask is my first framework love. It's very easy and functional. Thanks my dear teacher and lovey friend. Your videos are a fresh air on Python's tutorial. :8)
@niklase5901
@niklase5901 Жыл бұрын
Great! Just the intro i needed for this! Thanks!
@mixschnack
@mixschnack Жыл бұрын
Mariya Shanti doesn't babble on forever, but says, bang, bang, do this and that and everything works. And that's how it is. Here and there, some questions arise, which she partly answers - to my full satisfaction - and partly does not. For example, she doesn't explain how she manages to get the font file loaded and displayed on every system. On her system it works without additional effort, because the font ("Shanti") is installed on her system. On other systems the font would first have to be loaded from a website or an appropriate stored font file. All in all, this video gives a good overview of the steps necessary to develop and deploy a web app and introduces some "best practices" that are common among experienced programmers. A great video. More of it please!
@myke6972
@myke6972 2 жыл бұрын
don't know anything about flask yet, but after I watched this video, I understand all of the parts discussed in the video, thanks alot!
@simonmenlah1817
@simonmenlah1817 2 жыл бұрын
Hey! I just fell in love with you and your method of teaching and can't stop learning via your channel...
@renderartist
@renderartist 10 ай бұрын
Incredibly helpful and fun tutorial, thank you! Building some experiments with flask that I made with ChatGPT and seeing how easy it is to take it online in a nice packaged way is great. I like that there are options for easy to deploy SQL databases in Heroku. 👍🏼
@123arskas
@123arskas Жыл бұрын
Love your energy !!! Thanks for the tutorial
@thomasschnitt2840
@thomasschnitt2840 Жыл бұрын
Thanks for the video! A little remark: UTF-8 is not necessarily 8-bit. It is a variable-length character encoding standard using one to four one-byte (8-bit) code units.
@netbin
@netbin 2 жыл бұрын
Exploring python with Cécile’s videos becoming even more fun
@mindfreaksaad
@mindfreaksaad 2 жыл бұрын
This is a fantastic guide. Thanks!
@achinthasandaruwan9435
@achinthasandaruwan9435 2 жыл бұрын
Simplifying overload! Btw, I love KZfaq algorithm ❤️
@user-wf1rp2hp5u
@user-wf1rp2hp5u 2 жыл бұрын
항상 잘 보고 있어요!
@gaudino110
@gaudino110 Жыл бұрын
Great tutorial, simple but quite complete. Your speech is lovely, not too fast and perfectly understandable even for a non native English speaker like me. I'm in love with you, not gonna lie.
@BigPoppaJNutZ
@BigPoppaJNutZ 2 жыл бұрын
Another great tutorial! Thanks!
@watermanli
@watermanli 2 жыл бұрын
It's really beautiful, Amazing.......ly! You opened the door, in such a nice and clear way...
@NagasakiNightmare
@NagasakiNightmare Жыл бұрын
I feel like no one is doing what you’re doing. I’m glad to have found this, because I can code in Python well enough, but I have never done anything front end outside of ncurses. (Old man, new tricks)😂 Thank you so much!
@Gorlung
@Gorlung 2 жыл бұрын
your videos broaden my knowledge and inflame my libido
@bharathkarkera3223
@bharathkarkera3223 Жыл бұрын
explanation in best possible way.. thank you so much!!
@imoniteochie6355
@imoniteochie6355 24 күн бұрын
i like the way you teach it makes it so easy to under stand as a beginner
@AlexanderMaynor-tt3fx
@AlexanderMaynor-tt3fx Жыл бұрын
You are a angelic human being and so smart! Thank you for making such amazing content and being a light for the world!
@PythonSimplified
@PythonSimplified Жыл бұрын
Wow, Alexander! Thank you so much for the incredible comment!! 😀😀😀 It's a great honour to have lovely folks such as yourself supporting me on this magical journey! 😊
@eminedogan3125
@eminedogan3125 2 жыл бұрын
Thank you so much for this great video. Amazing clear explanation.. I am really happy I found your channel.
@HakermodOfficiel
@HakermodOfficiel 2 жыл бұрын
Just what I needed. Thank you
@evertonsston
@evertonsston 7 ай бұрын
Thank you so much for this explanation!!
@ashutoshdevgotra
@ashutoshdevgotra 2 жыл бұрын
best ever tutorial, I am from india...keep making such easy and learning full projects
@bekiyerom62
@bekiyerom62 2 ай бұрын
thanks lovely you do it in the most simplest way
@She_cooks2023
@She_cooks2023 8 ай бұрын
Great Job!!! Loved it totally
@johnwindsor5426
@johnwindsor5426 2 жыл бұрын
So nice talk. it is a gread video tutor. I like it so much! Last about heroku part, it is super!😊👍👍👍
@adedoyinayobami2820
@adedoyinayobami2820 Жыл бұрын
I have a problem activating my virtual env with my windows cmd.great content enjoy your tutorial up to the virtual env moment
@erickanyiri3463
@erickanyiri3463 6 ай бұрын
How am i just finding your channel now 😊 Great stuff
@nicosaavedra82
@nicosaavedra82 Жыл бұрын
Thanks!! i did it!! so happy!
@MyTubeAIFlaskApp
@MyTubeAIFlaskApp Жыл бұрын
This video inspired me to learn Flask Because of you, I am here.Thank You very much.
@gabrielfernandez9660
@gabrielfernandez9660 2 жыл бұрын
I love your videotutorials!!
@narbigogul5723
@narbigogul5723 Жыл бұрын
Great video, thanks for sharing!
@omarpalacios9734
@omarpalacios9734 6 ай бұрын
Awesome video! Thank you so much. Спасибо :)
@cesarac666
@cesarac666 2 жыл бұрын
oH my God! The only one that Run fine!! Greate Job Mariya....Thx
@falagerifamily
@falagerifamily Жыл бұрын
So great!! Thanks🎉🎉
@Tobs_
@Tobs_ 2 жыл бұрын
awesome, this is something I have been keen to learn from you 👍
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Happy to hear Tobs! 😁
@nathanaelmehari1909
@nathanaelmehari1909 Жыл бұрын
Thank you very much i enjoyed the course because you try to make it fun as possible
@bicycleninja1685
@bicycleninja1685 2 жыл бұрын
You're very talented and knowledgeable! Thanks for taking us through the steps.
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you so much Bicycle Ninja! 😀 I have an additional Flask tutorial if you'd like to combine your app with an SQLite database: kzfaq.info/get/bejne/rJlzhrSctbDYcZc.html It's a bit longer than this one, but it's also a much more useful application 😉
@bicycleninja1685
@bicycleninja1685 2 жыл бұрын
@@PythonSimplified Will check it out! I also loved your Python graphics tutorial with the procedurally generated trees and landscape. Absolute genius! Helps grasp the concept and take it to another level.
@meganwancura4013
@meganwancura4013 Жыл бұрын
This was so helpful!!!! Thank you!!!!
@yoyochris924
@yoyochris924 2 жыл бұрын
Great explanation. Thanks!
@ianpropst-campbell6028
@ianpropst-campbell6028 Жыл бұрын
Thank you for this great video!
@SuperlativeCG
@SuperlativeCG 2 жыл бұрын
Great tutorial. Very helpful.
@freezoulou
@freezoulou 2 жыл бұрын
Well explain as always I repeat again and again thank you very much you help me a lot :)
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you so much dexteuse freeman! I'm so happy to hear that! 😀😀😀
@lenapham9377
@lenapham9377 Жыл бұрын
Great teacher, wish you all the best!
@kwamenadadson
@kwamenadadson Жыл бұрын
Thanks your video saved my life today
@learnincredibledesign
@learnincredibledesign Жыл бұрын
Love the way of teaching
@alexnefayne4266
@alexnefayne4266 Жыл бұрын
This is a great tutorial.. Thankyou.
@lirostin
@lirostin 2 жыл бұрын
Thank you for your video! I made it )
@paulthomas1052
@paulthomas1052 Жыл бұрын
Great work !!
@mbundesmond3696
@mbundesmond3696 Жыл бұрын
Wow great explanation, thumbs up ☺️❤️
@theronkasita4196
@theronkasita4196 2 жыл бұрын
Well explained Thank you all the way from Africa Namibia
2 жыл бұрын
You're amazing! I love you so much :D
@bazazoo2827
@bazazoo2827 Жыл бұрын
Hello Mariya, great to see ya 8D I'll be waiting for the update on the DearPy GUI app, docs are not up for mass adoption yet
@MrThekid2009
@MrThekid2009 2 жыл бұрын
Liked, Subscribed & hooked for life! Kudos!
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Yeeey!! Super happy to hear! Welcome aboard!! 😃😃😃
@---------------__
@---------------__ Жыл бұрын
I really enjoyed your tutorial :)
@Blooddarkstar
@Blooddarkstar Жыл бұрын
This was brilliant!
@blaiseyonga9686
@blaiseyonga9686 2 жыл бұрын
I enjoy the way you explain something😄😄😄😄
@biniyammengiste7413
@biniyammengiste7413 2 жыл бұрын
waw, very nice. Thank you!!
@mightyaripage
@mightyaripage 2 жыл бұрын
Love the manbearpig reference
@antonvorobiev9507
@antonvorobiev9507 2 жыл бұрын
You are wonderful!!!
@yakhyobekmamadaliyev6315
@yakhyobekmamadaliyev6315 2 жыл бұрын
Sposiba Very much. ti taught me khorosho☺️☺️☺️👍👍
@PythonSimplified
@PythonSimplified 2 жыл бұрын
hahahaha Pozalusta ,Yakhyobek!!! 😀
@dacianfd8418
@dacianfd8418 10 ай бұрын
Nice!
@x-jbbj-x8107
@x-jbbj-x8107 2 жыл бұрын
Thanks for the help !!!
@giovannicanedoli7669
@giovannicanedoli7669 2 жыл бұрын
This was so interesting, really a nice video!
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you! 😊
@NOURTCS
@NOURTCS 2 жыл бұрын
Great perfect 🤩 you do beautiful coding & clean Thanks
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you Noureddin! 😁
@toulasantha
@toulasantha Жыл бұрын
👏👏👏 charisma factor 100%
@Ozimbat
@Ozimbat 2 жыл бұрын
Amazing video as usual!
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you so much Ozimba! 😁😁😁
@roshanikumbharkar6266
@roshanikumbharkar6266 Жыл бұрын
thank you so much dude you're a god
@taylortoast2
@taylortoast2 Жыл бұрын
@PythonSimplified which part of this app utilizes JavaScript? Thank you for your content.
@madhandasari2028
@madhandasari2028 2 жыл бұрын
Great video, thanks a lot :)
@udbhav3760
@udbhav3760 2 жыл бұрын
I learned something new today thanks for the video ✌️
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you Udbhav! :DDD
@DaveFanch1022
@DaveFanch1022 2 жыл бұрын
Awesome explanation! I'm working on a web trading app and Heroku was a great option to deploy!
@PythonSimplified
@PythonSimplified 2 жыл бұрын
Thank you so much Dave! Super glad I could help! 🙂 I'm actually going to share an even better solution than Heroku in the next few days - there's a new way to deploy your Flask/Django apps directly from the IDE! It's not out publicly yet, but I got special access and I can't wait to share it with everybody! 😃😃😃
@SadaraxTutorials
@SadaraxTutorials 2 жыл бұрын
@@PythonSimplified Hey, love the video! Do you know when you'll be releasing the Django directly from IDE video? I'd love to see it!
@hasansyed4293
@hasansyed4293 2 жыл бұрын
Wonderful !
@pauloalmeida3728
@pauloalmeida3728 2 жыл бұрын
Yep the app is still online. Thanks 😎
@Jelvix
@Jelvix 2 жыл бұрын
Thank you! Flask resembles a LEGO constructor, which you can use to build whatever you want using Python libraries or Flask extensions. Python developers from Jelvix say that with Flask, you can add new modules when you need them, rather than being bombarded with details for the first time.
@PythonSimplified
@PythonSimplified 2 жыл бұрын
You're welcome! Enjoy! 😄
Django QuickStart Web Application for Beginners
23:11
Python Simplified
Рет қаралды 83 М.
FOOLED THE GUARD🤢
00:54
INO
Рет қаралды 63 МЛН
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 93 МЛН
Did you believe it was real? #tiktok
00:25
Анастасия Тарасова
Рет қаралды 12 МЛН
Универ. 13 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:07:11
Комедии 2023
Рет қаралды 6 МЛН
3 PYTHON AUTOMATION PROJECTS FOR BEGINNERS
17:00
Internet Made Coder
Рет қаралды 1,5 МЛН
Python Classes and Objects - OOP for Beginners
8:01
Python Simplified
Рет қаралды 536 М.
Use a Drag & Drop Editor to Make Tkinter Python GUI Applications!
11:16
Simple Machine Learning GUI App with Taipy and Tensorflow
30:52
Python Simplified
Рет қаралды 166 М.
build a meme Python website (Flask Tutorial for Beginners)
13:30
NetworkChuck
Рет қаралды 458 М.
If __name__ == "__main__" for Python Developers
8:47
Python Simplified
Рет қаралды 383 М.
FastAPI, Flask or Django - Which Should You Use?
9:49
Tech With Tim
Рет қаралды 50 М.
Flask vs Django in 2024 - Make a RIGHT Choice (Difference Explained)
9:32
Daniel Dan | Tech & Data
Рет қаралды 39 М.
Create a GUI app with Tkinter - Step by Step Tutorial
23:56
Python Simplified
Рет қаралды 609 М.
iPhone 16 с инновационным аккумулятором
0:45
ÉЖИ АКСЁНОВ
Рет қаралды 519 М.
Best mobile of all time💥🗿 [Troll Face]
0:24
Special SHNTY 2.0
Рет қаралды 1,4 МЛН
Cadiz smart lock official account unlocks the aesthetics of returning home
0:30