1 00:00:00,060 --> 00:00:06,299 Good, before we go ahead and build this nice application from scratch I would 2 00:00:06,299 --> 00:00:10,620 like to quickly mention the steps that we need to go through to come up with 3 00:00:10,620 --> 00:00:15,210 this web application. So that's what I'm going to do in this lecture but first of 4 00:00:15,210 --> 00:00:20,160 although I want to make sure you know our web application is built. So almost 5 00:00:20,160 --> 00:00:26,150 every web application has a front end and the back end now the front end is 6 00:00:26,150 --> 00:00:32,399 the HTML and the CSS part and JavaScript when when a website has JavaScript. Now we 7 00:00:32,399 --> 00:00:41,820 have HTML and CSS in our case so this here is the HTML of this side and here 8 00:00:41,820 --> 00:00:48,420 you see a link and that's the CSS so this is the code, the part that renders these 9 00:00:48,420 --> 00:00:55,649 elements you like this title here and this line of text and this input and 10 00:00:55,649 --> 00:01:01,620 this button and then the CSS is responsible for sterilizing these things. 11 00:01:01,620 --> 00:01:07,200 So without CSS you'd still have these elements, but you wouldn't have these 12 00:01:07,200 --> 00:01:15,659 nice colors and fonts and animations and so on. So that's the CSS part and 13 00:01:15,659 --> 00:01:20,780 this is a front-end. Now the backend is you know you expect the user to enter 14 00:01:20,780 --> 00:01:28,400 some data in here so an email address and a number for the height. Now the 15 00:01:28,400 --> 00:01:34,590 frontend gives you the place where to put this but there's where the frontend 16 00:01:34,590 --> 00:01:42,030 role ends because then the front end will just send this two pieces of data 17 00:01:42,030 --> 00:01:49,350 to your back-end which is handled by Python so you'll send this to Python as 18 00:01:49,350 --> 00:01:56,100 two strings or a string and a number. And that's where the backend starts so 19 00:01:56,100 --> 00:02:01,320 Python, what Python will do then it will grab this two pieces of data and then 20 00:02:01,320 --> 00:02:07,590 maybe it will analyze them if it needs to so it can calculate something out of 21 00:02:07,590 --> 00:02:13,950 this data or later it can send them to a database, so the 22 00:02:13,950 --> 00:02:17,790 data base is also part of the backend like the scripting language which is 23 00:02:17,790 --> 00:02:23,519 Python in our case. And so you use the database as a storage for your data and 24 00:02:23,519 --> 00:02:30,660 then you can also send back data to the front-end again like you can say thank 25 00:02:30,660 --> 00:02:35,760 you for registering with this email address so you can display the email 26 00:02:35,760 --> 00:02:40,349 address of the user there and so you're interacting back and forth with the 27 00:02:40,349 --> 00:02:46,530 front end and the back end. So that's about the concept. Now the steps we need 28 00:02:46,530 --> 00:02:52,799 to go through. Well first it depends but I prefer to be the frontend first and 29 00:02:52,799 --> 00:02:57,120 then move to the backend. Some people they start with the backend 30 00:02:57,120 --> 00:03:03,840 and I prefer to know first the requirements, the user requirements so I 31 00:03:03,840 --> 00:03:10,860 want to have a clear idea of what I expect from the user. So I first want to 32 00:03:10,860 --> 00:03:17,730 build this interface and make sure I am getting this two pieces of data. So in 33 00:03:17,730 --> 00:03:22,440 the next lecture I'm going to build HTML part and then the CSS part very 34 00:03:22,440 --> 00:03:28,560 quickly and so those are the first two steps and so I'll build these files locally 35 00:03:28,560 --> 00:03:33,569 as simple HTML files and I'll try them or the browser by just double-clicking 36 00:03:33,569 --> 00:03:39,540 them, so I'm not incorporating these HTML files with the Flask application just 37 00:03:39,540 --> 00:03:46,739 yet. Once I do that, next what we'll do is I'll be the basic structure of a Flask 38 00:03:46,739 --> 00:03:52,980 application so like a Python script where I will import the Flask library 39 00:03:52,980 --> 00:03:58,440 and the other libraries and also build some some basic functions and I'll have them 40 00:03:58,440 --> 00:04:04,709 ready for adding more code than. And so once I have this structure concept in 41 00:04:04,709 --> 00:04:09,599 mind, once I have laid that out, I'll then go ahead and make sure I'm getting 42 00:04:09,599 --> 00:04:15,989 these data correctly in Python so the email address and the height and then I 43 00:04:15,989 --> 00:04:19,289 will use some print statements important to make sure that I'm getting them 44 00:04:19,289 --> 00:04:26,920 correctly without using a database yet. Then I'll create a database in PostgreSQL 45 00:04:26,920 --> 00:04:32,470 and once I do that I'll create a table, so that's the next step, creating tables and 46 00:04:32,470 --> 00:04:38,560 two fields, so emails and height fields. Once we have a database and the table 47 00:04:38,560 --> 00:04:46,570 ready, we will send the data that we get from these two inputs using Python we 48 00:04:46,570 --> 00:04:51,820 will send them to the appropriate database table and store them as rows in 49 00:04:51,820 --> 00:04:58,450 the database table, so up to this point we have stored data in the database table 50 00:04:58,450 --> 00:05:05,770 and then what we want to do we want to send some average height of all the 51 00:05:05,770 --> 00:05:10,930 records that we have in the table so we want to send them to the user, but first 52 00:05:10,930 --> 00:05:16,330 of all I'll need to query some override code to query data from the table and 53 00:05:16,330 --> 00:05:21,700 also calculate that average and I'll print that out, so print statements just to 54 00:05:21,700 --> 00:05:26,950 test out things and then once this value is being calculated correctly then I'll 55 00:05:26,950 --> 00:05:35,710 write the code that sends an email to the user with this data so with the average, 56 00:05:35,710 --> 00:05:42,940 the height average and maybe the height the user input for themselves, so the height 57 00:05:42,940 --> 00:05:48,850 of the user and the average height. And then lastly we will deploy this web 58 00:05:48,850 --> 00:05:53,440 application online so that you can send it to anyone and they can access it from 59 00:05:53,440 --> 00:05:57,940 the web, and yeah basically that's it. Those are the steps. There are quite a 60 00:05:57,940 --> 00:06:03,970 few steps, but you'll learn a lot from what I'll do here. So let's get ready, and yeah 61 00:06:03,970 --> 00:06:08,000 I'll see you in the next lecture, start building the front end, yep.