WEBVTT 00:00.180 --> 00:00.780 All right. 00:00.810 --> 00:04.050 So we're back if you watch that optional kind of boring video. 00:04.140 --> 00:08.850 We're now moving on to an exciting and non-optional video which is all about the project we're going 00:08.850 --> 00:09.410 to make. 00:09.540 --> 00:14.400 So we're going to build a simple web app to start using node and my Eskew all together. 00:14.400 --> 00:15.780 So what is this app. 00:16.170 --> 00:23.790 Well it is called join us and it's a cult mailing or excuse me a startup mailing list application. 00:23.790 --> 00:28.320 So it's you probably seen this before when there's a new company that's launched maybe you haven't but 00:28.340 --> 00:32.820 if there's a new company that's launched they're not quite ready yet but they want to get their name 00:32.820 --> 00:37.950 out there they want to start getting interested parties registered or collecting their information so 00:37.950 --> 00:43.590 they can send updates or so they can invite them you know once the application is launched. 00:43.590 --> 00:48.840 So that's what we're going to build basically a way of collecting people's emails and it looks like 00:48.840 --> 00:49.690 this. 00:49.830 --> 00:52.860 Now I'm not you know a great designer. 00:52.860 --> 00:54.910 And anyway that's not the focus of this course. 00:55.110 --> 00:56.980 Hopefully you think it looks ok enough. 00:57.090 --> 01:00.050 But really what I just want to go over are the different features. 01:00.090 --> 01:01.740 Now it's very feature rich. 01:01.740 --> 01:08.550 The point is to make it simple but to show you how the we're connecting with my Q Well through Noad 01:08.880 --> 01:14.520 and how this application kind of showcases both selecting information and inserting information. 01:14.520 --> 01:16.930 So the first thing you'll see there is a photo here. 01:17.100 --> 01:20.730 And we don't have to worry about copyright or licensing issues. 01:20.730 --> 01:23.730 I actually took this photo as a bit of a brag I guess. 01:23.750 --> 01:28.090 Sorry but back to the content here we've got. 01:28.140 --> 01:31.720 Join us in big letters and then we've got into your e-mail to join. 01:32.010 --> 01:39.630 And then a number here and this number changes so 518 is basically the count of all the users currently 01:39.630 --> 01:40.320 in our database. 01:40.350 --> 01:47.330 So when I made kind of this but what we call this the alpha version that I made screenshots of that 01:47.340 --> 01:48.730 I'm I made before. 01:48.750 --> 01:50.370 You know I have to make that up before I teach it. 01:50.490 --> 01:56.500 So when I made this version I had 518 users in the in the waitlist in the database. 01:56.580 --> 01:58.340 We are 100 percent not tickled. 01:58.500 --> 02:01.290 Then the other thing is this. 02:01.290 --> 02:05.430 Enter your email join now button which you enter an email. 02:05.610 --> 02:10.020 It's going to take that e-mail address and insert it into our database. 02:10.470 --> 02:13.990 So there's kind of two things we're doing right selecting. 02:14.010 --> 02:16.250 We're going to count how many users are in the database. 02:16.260 --> 02:18.430 We don't need all the information we don't need. 02:18.430 --> 02:20.210 518 email addresses. 02:20.250 --> 02:21.460 We just want to know how many. 02:21.810 --> 02:26.270 And then we want to be able to insert something from a form when you click this button. 02:26.280 --> 02:31.810 It's going to go send the data to our node server than the node server is going to send it over to the 02:31.870 --> 02:33.010 My School database. 02:33.180 --> 02:34.750 Wait to see if it worked or not. 02:34.860 --> 02:36.850 And then it will do something you know. 02:36.900 --> 02:37.970 We'll decide what it does. 02:37.980 --> 02:41.880 Does it take you to a new page or is it just refresh the page does it show you a message that says you're 02:41.880 --> 02:42.800 signed up. 02:42.840 --> 02:43.680 Whatever does. 02:43.890 --> 02:49.430 But the key really is about adding information to our database and getting information out. 02:49.680 --> 02:51.240 OK so that's how it basically works. 02:51.240 --> 02:52.230 Let me show it to you. 02:52.470 --> 02:53.130 Here I am. 02:53.160 --> 02:53.910 I've got. 02:53.910 --> 02:55.020 Join us. 02:55.020 --> 02:57.610 Let's create a new user here. 02:57.690 --> 02:58.730 Let's call it. 02:58.790 --> 03:04.360 How about Lou the cat at gmail dot com. 03:04.670 --> 03:05.770 We click Join now. 03:09.470 --> 03:14.640 And you can see takes us back which we can decide what to do if we want to change that will I'll show 03:14.640 --> 03:15.290 you how. 03:15.390 --> 03:18.790 But now it says we've got it 519 on our waitlist. 03:19.050 --> 03:23.180 And you know I can refresh I can stop the server which will see you in a little bit. 03:23.190 --> 03:24.990 This will be 519. 03:24.990 --> 03:26.730 This isn't hard coded in. 03:26.730 --> 03:29.030 This is coming straight from the database. 03:29.250 --> 03:29.510 OK. 03:29.520 --> 03:31.030 So that's it. 03:31.050 --> 03:36.820 Now let's talk about how it works what's the workflow like when I go on my computer like I just did 03:37.410 --> 03:41.910 and I refresh the page or I enter that address and I hit enter. 03:41.910 --> 03:46.460 A request is sent to our node server which will see how it is set up in a little bit. 03:46.560 --> 03:51.890 And the no js server has code that says oh OK this client is asking for our home page. 03:52.070 --> 03:58.420 Well on the home page we're supposed to have a number here of the total number of users in our database. 03:58.440 --> 04:07.660 So let's ask hello my ask you all database can you tell me how many users are in the database and hopefully 04:07.780 --> 04:09.660 you're aware that would be a count. 04:09.820 --> 04:17.770 So would do a select count start from users that will come back and it will say ideally 518 or whatever 04:17.770 --> 04:19.360 it is a thousand users. 04:19.360 --> 04:25.510 And then my server the code there takes that number and it plugs it in puts it right here and it sends 04:25.510 --> 04:29.000 us the page sends it back and I see the page. 04:29.080 --> 04:34.660 Same thing roughly the same thing happens when I enter my email and they click Join now I'm sending 04:34.660 --> 04:40.470 my information my e-mail to the no server with a message basically saying I want to add this. 04:40.630 --> 04:41.420 I'm signing up. 04:41.530 --> 04:44.500 So then my server says Oh this time this person is trying to sign up. 04:44.500 --> 04:47.470 They're not just asking for the home page they're trying to sign up. 04:47.700 --> 04:48.140 OK. 04:48.170 --> 04:48.590 My ask. 04:48.590 --> 04:53.880 Well I'd like to insert this user within with this e-mail address then my ask. 04:53.880 --> 04:58.790 Well we'll say that worked or oh we actually already have a user with that e-mail so we can do that 04:59.050 --> 05:03.370 or something else maybe there's an error that will be sent back. 05:03.370 --> 05:05.390 No jast figures out what to do. 05:05.440 --> 05:10.110 Do I send an error message or do I send a congratulations success message. 05:10.110 --> 05:12.970 Do I just take them back to the home page and refresh it. 05:13.300 --> 05:15.690 That's you know the decisions that are made here. 05:16.030 --> 05:17.070 So that's the basics. 05:17.140 --> 05:19.150 But then the next thing is where do we start. 05:19.150 --> 05:21.100 There's a lot of pieces here right. 05:21.130 --> 05:26.260 We have to talk about no genius installing that we have to talk about how it communicates with my ass. 05:26.250 --> 05:31.100 Q Well we have to talk about creating web apps and HDMI and CSSA and Javascript. 05:31.180 --> 05:34.890 All of this stuff there's a lot of moving pieces. 05:34.900 --> 05:35.910 So where do we start. 05:36.160 --> 05:42.100 Well we're starting with this handy dandy green box will draw your attention to the right side of the 05:42.100 --> 05:47.870 screen which tells you we're starting basically with the relationship between no genius and my s. 05:47.870 --> 05:52.560 Q Well how do we talk from javascript to my ask you up. 05:52.720 --> 05:58.660 So we're going to start with basic things like I want to select the current date from javascript or 05:58.660 --> 06:02.600 I want to insert a single user into my s queue up so no web app. 06:02.620 --> 06:08.680 This whole left side of the screen will be gone for the first part but then once we have this relationship 06:08.680 --> 06:13.570 established we figured out how to insert a user we figured out how to select all users or select the 06:13.570 --> 06:14.380 count. 06:14.500 --> 06:21.160 Then we will then kind of expand into the web application and add in the logic for creating a web app. 06:21.550 --> 06:23.580 So that's our game plan we're with this site. 06:23.950 --> 06:28.120 So the very last thing to discuss is what our table will look like. 06:28.120 --> 06:34.330 So for this web app very simple right all that we need to store for every user and we'll just call it 06:34.330 --> 06:42.460 users we could call it you know emails or interested people or whatever weightlifters but we'll go with 06:42.460 --> 06:45.670 users and all we need to store is their email address right. 06:45.670 --> 06:48.820 That's the key thing and that's all they're entering. 06:48.820 --> 06:52.360 But it's also would be really useful to store created ads. 06:52.390 --> 06:59.410 So we have a time stamps for when that user was created so that we could do things like figure out when 06:59.410 --> 07:04.870 most of our users signed up or what day that week most users are signing up or just count how many users 07:04.870 --> 07:05.660 we've had. 07:05.780 --> 07:08.300 You know this year compared to last year. 07:08.410 --> 07:11.550 So it's really nice to have created that is very simple as well. 07:11.560 --> 07:15.240 So those are the two fields we'll be working with the two columns and that's it. 07:15.280 --> 07:16.310 Nice and simple. 07:16.510 --> 07:21.080 And then the other thing to discuss is our game plan from here on out and our first goal. 07:21.160 --> 07:27.070 We talked about how we're only working with this side of the table or of this diagram what we're going 07:27.070 --> 07:33.940 to work up to is using Noj as to randomly generate an answered over 500 users into our database. 07:33.940 --> 07:36.700 So I had five 518 users in there. 07:36.880 --> 07:38.800 They all had unique emails. 07:38.830 --> 07:40.640 I did not code those by hand. 07:40.720 --> 07:47.070 I used a tool that generates some for me and then I'm going to take that and insert them into our database. 07:47.110 --> 07:53.230 So basically shows you the power of using a language like node that we can very very quickly generate 07:53.230 --> 07:57.310 data and not have to waste time getting 500 test users in there. 07:57.340 --> 07:59.230 So that's the first goal we're working up towards. 07:59.230 --> 07:59.920 In this section.