1 1 00:00:01,210 --> 00:00:02,890 Hey guys welcome back, in this video 2 2 00:00:02,890 --> 00:00:06,590 we're going to be creating alerts through the web. 3 3 00:00:06,590 --> 00:00:08,460 It's gonna be a bit of a speed run, 4 4 00:00:08,460 --> 00:00:11,540 because you're gonna find that now that we've done 5 5 00:00:11,540 --> 00:00:14,303 all the dark work of creating our models, 6 6 00:00:15,690 --> 00:00:19,430 creating alerts through the web is really simple. 7 7 00:00:19,430 --> 00:00:22,023 It's basically just the same as creating items. 8 8 00:00:23,030 --> 00:00:27,350 So, let's recap first what we did in order to create items. 9 9 00:00:27,350 --> 00:00:29,780 First, we have a blueprint, and we 10 10 00:00:29,780 --> 00:00:31,433 have to register that in the app. 11 11 00:00:32,360 --> 00:00:33,890 Then we've defined the blueprint, 12 12 00:00:33,890 --> 00:00:35,900 and it has two endpoints, one that shows us 13 13 00:00:35,900 --> 00:00:38,910 a list of the items, and one that takes in 14 14 00:00:38,910 --> 00:00:42,460 some form data or choosing the template 15 15 00:00:42,460 --> 00:00:44,910 and then creates an item with that. 16 16 00:00:44,910 --> 00:00:47,270 And then we've also got the two templates, 17 17 00:00:47,270 --> 00:00:50,250 the index.html template, that showed just 18 18 00:00:50,250 --> 00:00:52,572 a list group of items, and the 19 19 00:00:52,572 --> 00:00:55,750 new_item.html, that just has a form. 20 20 00:00:55,750 --> 00:00:58,610 And although this looks very complicated, 21 21 00:00:58,610 --> 00:01:01,140 it's basically just a couple of divs, 22 22 00:01:01,140 --> 00:01:04,870 a label, and an input for each property that we need. 23 23 00:01:04,870 --> 00:01:09,070 The rest are all adding some data to this HTML 24 24 00:01:09,070 --> 00:01:11,253 so that it knows exactly what to display. 25 25 00:01:12,600 --> 00:01:16,610 But in terms of the concepts that we're dealing with, 26 26 00:01:16,610 --> 00:01:21,610 it's really just a form and then a list of things, 27 27 00:01:22,290 --> 00:01:25,610 and appropriate views, or endpoints 28 28 00:01:25,610 --> 00:01:27,720 to deal with those two things. 29 29 00:01:27,720 --> 00:01:29,740 So, we're gonna do that for alerts as well, 30 30 00:01:29,740 --> 00:01:32,053 and it's gonna be more or less the same. 31 31 00:01:34,960 --> 00:01:37,630 The first thing is to create the 32 32 00:01:37,630 --> 00:01:40,693 alert blueprint and register it with our app. 33 33 00:01:42,700 --> 00:01:44,930 Next, we're gonna create the actual blueprint 34 34 00:01:44,930 --> 00:01:48,523 in it's own file, alerts.py, inside views. 35 35 00:02:05,550 --> 00:02:06,790 And then we're gonna create the two 36 36 00:02:06,790 --> 00:02:08,503 end points within the blueprint. 37 37 00:02:26,020 --> 00:02:27,720 Now that we've got the two end points created, 38 38 00:02:27,720 --> 00:02:29,060 because these are the only two things 39 39 00:02:29,060 --> 00:02:31,580 that we wanna do with alerts for now, 40 40 00:02:31,580 --> 00:02:33,140 we just have to fill them in. 41 41 00:02:33,140 --> 00:02:36,330 The index is going to take in a list of all the alerts, 42 42 00:02:36,330 --> 00:02:38,403 and present a template with that data. 43 43 00:02:39,340 --> 00:02:42,440 Whereas the new end point is going to 44 44 00:02:42,440 --> 00:02:45,190 take in some data from a form. 45 45 00:02:45,190 --> 00:02:47,980 Now the data that we're gonna need is just the data 46 46 00:02:47,980 --> 00:02:50,990 that the alert model takes in it's constructor. 47 47 00:02:50,990 --> 00:02:53,613 So that's item ID, and price limit. 48 48 00:02:56,230 --> 00:02:59,080 And then it's going to create a new alert with that data. 49 49 00:03:04,410 --> 00:03:06,950 Now, if this doesn't happen, it means 50 50 00:03:06,950 --> 00:03:09,020 that we are in a get request. 51 51 00:03:09,020 --> 00:03:11,260 So we just return the render template 52 52 00:03:11,260 --> 00:03:14,483 of alerts/new_alert.html. 53 53 00:03:16,730 --> 00:03:18,520 Now let's go over to our templates 54 54 00:03:18,520 --> 00:03:22,770 and create our alert folder, and in here, 55 55 00:03:22,770 --> 00:03:26,803 we're gonna create two files, index.html, 56 56 00:03:28,080 --> 00:03:31,563 and we're also gonna create new_alert.html. 57 57 00:03:32,770 --> 00:03:33,750 Now we're gonna do something that 58 58 00:03:33,750 --> 00:03:35,440 I generally don't recommend, which is 59 59 00:03:35,440 --> 00:03:37,630 copy and paste some code, but we're gonna go 60 60 00:03:37,630 --> 00:03:41,450 to items index, and paste it into alerts index. 61 61 00:03:41,450 --> 00:03:44,373 And that's because this stuff is going to be very similar. 62 62 00:03:45,680 --> 00:03:47,070 Instead of items though, we're 63 63 00:03:47,070 --> 00:03:49,183 always going to be using alerts. 64 64 00:03:59,720 --> 00:04:02,860 We're gonna show an alert text for each item 65 65 00:04:02,860 --> 00:04:04,940 in the list group, and then we're gonna show 66 66 00:04:04,940 --> 00:04:09,940 another link with the item ID and the items URL. 67 67 00:04:10,170 --> 00:04:13,860 Notice that we have alert.item.url, 68 68 00:04:13,860 --> 00:04:18,860 because in the alert model, we have self.item 69 69 00:04:19,350 --> 00:04:22,330 equal item.get_by_id, so it's going to 70 70 00:04:22,330 --> 00:04:24,730 retrieve the item from the database, 71 71 00:04:24,730 --> 00:04:29,440 and then alert.item will give us an actual item object. 72 72 00:04:29,440 --> 00:04:32,150 And once we have an item object, we can access 73 73 00:04:32,150 --> 00:04:35,683 it's properties like the URL, or tag name, or whatever else. 74 74 00:04:37,570 --> 00:04:39,113 So that's the index. 75 75 00:04:40,700 --> 00:04:44,427 We just have to change this to new_alert, 76 76 00:04:45,340 --> 00:04:50,340 and there we go, we have created our index for alerts. 77 77 00:04:51,360 --> 00:04:54,380 Very straightforward, all we had to do is just copy it 78 78 00:04:54,380 --> 00:04:56,550 and change a couple of things, because 79 79 00:04:56,550 --> 00:04:58,320 we're just showing some data from our database, 80 80 00:04:58,320 --> 00:05:01,070 and we've done all the work beforehand with the models. 81 81 00:05:02,150 --> 00:05:04,700 When we come to new alert, it's 82 82 00:05:04,700 --> 00:05:07,290 also going to be quite similar. 83 83 00:05:07,290 --> 00:05:11,133 So I'm gonna open the new item, copy and paste it in here, 84 84 00:05:12,230 --> 00:05:15,250 and then make a couple of changes again. 85 85 00:05:15,250 --> 00:05:18,040 We're going to change that to create alert of course, 86 86 00:05:18,040 --> 00:05:20,460 and then we're going to only keep 87 87 00:05:20,460 --> 00:05:22,900 the parts that we need for the alert. 88 88 00:05:22,900 --> 00:05:25,040 So the alert takes in two values, 89 89 00:05:25,040 --> 00:05:28,090 item ID and price limit, so we're gonna delete 90 90 00:05:28,090 --> 00:05:30,573 the tag name one, and we're just gonna keep 91 91 00:05:30,573 --> 00:05:34,960 this first one for item ID, and we're gonna 92 92 00:05:34,960 --> 00:05:36,290 tell the user all the information 93 93 00:05:36,290 --> 00:05:38,493 it needs in order to do that. 94 94 00:05:43,920 --> 00:05:46,200 And it's not gonna have a placeholder, 95 95 00:05:46,200 --> 00:05:48,950 and by the way, if you're thinking, 96 96 00:05:48,950 --> 00:05:51,570 how the hell is the user gonna know the item ID 97 97 00:05:51,570 --> 00:05:53,200 in order to put it into this form, 98 98 00:05:53,200 --> 00:05:54,500 that's a very good question, we're gonna 99 99 00:05:54,500 --> 00:05:55,750 tackle that in the next video. 100 100 00:05:55,750 --> 00:05:57,983 So don't worry too much about it just now. 101 101 00:05:58,880 --> 00:06:01,430 The other div, so this one is dealing with item ID, 102 102 00:06:01,430 --> 00:06:04,093 the other one is gonna deal with the price limit. 103 103 00:06:05,340 --> 00:06:10,340 So that is what price do users want to be 104 104 00:06:10,630 --> 00:06:13,753 emailed at or notified when it goes under that? 105 105 00:06:16,240 --> 00:06:20,183 And we're gonna put something like 120. 106 106 00:06:24,890 --> 00:06:28,563 And then we're gonna have price limit help here, 107 107 00:06:29,600 --> 00:06:32,793 and this has to have the ID of priceLimitHelp, 108 108 00:06:35,130 --> 00:06:37,170 and the text in the help is gonna be 109 109 00:06:37,170 --> 00:06:40,140 under which price for the item 110 110 00:06:40,140 --> 00:06:42,223 would you like to get notified? 111 111 00:06:43,570 --> 00:06:46,523 There we go, that looks all alright, 112 112 00:06:47,800 --> 00:06:50,560 and this has to be create-alert-form, 113 113 00:06:50,560 --> 00:06:53,090 not create create-item-form, just to 114 114 00:06:53,090 --> 00:06:55,560 have a slightly different class name there, 115 115 00:06:55,560 --> 00:06:59,700 I'm gonna go over to the new item and make sure that, 116 116 00:06:59,700 --> 00:07:03,350 yeah, this needs an ID as well, of queryHelp, 117 117 00:07:03,350 --> 00:07:04,640 must have missed that earlier on, 118 118 00:07:04,640 --> 00:07:07,360 but the area described by property 119 119 00:07:07,360 --> 00:07:09,720 says that this input field is described 120 120 00:07:09,720 --> 00:07:14,720 by the query help element, and there was no such element. 121 121 00:07:14,890 --> 00:07:18,633 So it has to exist there, such as it does here. 122 122 00:07:19,510 --> 00:07:23,950 And so yeah, that's it, we have everything. 123 123 00:07:23,950 --> 00:07:25,940 We have everything done. 124 124 00:07:25,940 --> 00:07:29,640 It was very simple because it's very similar 125 125 00:07:29,640 --> 00:07:31,790 to the items that we had already, 126 126 00:07:31,790 --> 00:07:35,120 all we had to do is copy, change a couple of things, 127 127 00:07:35,120 --> 00:07:37,160 make sure that we're taking in the data that we want, 128 128 00:07:37,160 --> 00:07:40,560 and showing the data that we want, and that's us. 129 129 00:07:40,560 --> 00:07:43,650 So we can run our app, and how about 130 130 00:07:43,650 --> 00:07:46,353 we go at it, see if it all works? 131 131 00:07:53,400 --> 00:07:55,650 So we have a single alert at the moment, 132 132 00:07:55,650 --> 00:07:58,350 and it is for this one, and we can create new alerts 133 133 00:07:58,350 --> 00:08:02,830 if we want, with an item ID and a price limit. 134 134 00:08:02,830 --> 00:08:06,870 Now, how do users know the item ID? 135 135 00:08:06,870 --> 00:08:09,030 That's a very good question, and the answer is 136 136 00:08:09,030 --> 00:08:14,030 they don't, but we do need a way to tell 137 137 00:08:14,520 --> 00:08:17,620 them that, or we need a different way of 138 138 00:08:17,620 --> 00:08:19,973 handling the alerts altogether. 139 139 00:08:21,010 --> 00:08:24,400 Now, when a user creates an item, 140 140 00:08:24,400 --> 00:08:28,790 so if we go to /items/new, they're gonna give us 141 141 00:08:28,790 --> 00:08:31,053 a URL, a tag name and a query. 142 142 00:08:32,200 --> 00:08:34,290 And as soon as they press create, 143 143 00:08:34,290 --> 00:08:35,680 we're just gonna save that to the database, 144 144 00:08:35,680 --> 00:08:37,200 and we're not gonna tell them a thing. 145 145 00:08:37,200 --> 00:08:40,713 So there is no way for them to look at the item ID. 146 146 00:08:42,920 --> 00:08:46,530 So that's a problem, but on top of that, 147 147 00:08:46,530 --> 00:08:49,570 there is another problem, which is 148 148 00:08:49,570 --> 00:08:51,660 if we tell the user the item ID 149 149 00:08:51,660 --> 00:08:53,720 of the item they have just created, 150 150 00:08:53,720 --> 00:08:56,950 is it really fair that we ask them 151 151 00:08:56,950 --> 00:09:01,250 all this technical data in order to create an item, 152 152 00:09:01,250 --> 00:09:03,140 and then we ask them that as well as creating 153 153 00:09:03,140 --> 00:09:06,160 the item in this form, then they go over to another form 154 154 00:09:06,160 --> 00:09:08,743 to create an entirely new thing, an alert? 155 155 00:09:09,960 --> 00:09:12,110 And I'm gonna tell you right now, 156 156 00:09:12,110 --> 00:09:14,880 users will not do that, if you put this out there, 157 157 00:09:14,880 --> 00:09:17,910 and you ask a user to find this technical data, 158 158 00:09:17,910 --> 00:09:20,040 that they probably won't be able to find, 159 159 00:09:20,040 --> 00:09:23,230 and then to fill in two forms, not one but two 160 160 00:09:23,230 --> 00:09:24,740 in order to use your application, 161 161 00:09:24,740 --> 00:09:27,640 I'm gonna tell you right now, nobody's gonna use this app. 162 162 00:09:28,870 --> 00:09:30,800 So we have to do something about it. 163 163 00:09:30,800 --> 00:09:32,530 We're gonna talk about exactly what that is 164 164 00:09:32,530 --> 00:09:34,770 in the next video, but just rest assured, 165 165 00:09:34,770 --> 00:09:37,750 by the end of this app, we're only gonna require users 166 166 00:09:37,750 --> 00:09:41,800 to fill in one form, and no technical data. 167 167 00:09:41,800 --> 00:09:44,120 So, we're gonna make a bunch of improvements to this app 168 168 00:09:44,120 --> 00:09:47,280 in the next few videos to achieve that. 169 169 00:09:47,280 --> 00:09:48,770 Thanks for joining me for this one, 170 170 00:09:48,770 --> 00:09:50,220 I'll see you on the next one.