1 00:00:07,910 --> 00:00:11,480 Welcome back everybody Johnny B here with slopes dot com. 2 00:00:11,480 --> 00:00:15,970 And in this lesson we are going to pick up right off where we left in the last lesson. 3 00:00:15,980 --> 00:00:19,470 I know lesson was overly long and pretty heavy. 4 00:00:19,520 --> 00:00:23,180 So we're going to see if we can make this one little bit shorter and lighter. 5 00:00:23,180 --> 00:00:23,780 All right. 6 00:00:23,960 --> 00:00:31,050 So in the last one we created this or register user function and we've seen how it works in Postman. 7 00:00:31,220 --> 00:00:34,460 So now let's actually make it work here in our app. 8 00:00:34,460 --> 00:00:34,990 All right. 9 00:00:35,240 --> 00:00:39,060 So we're going to do is we're going to be working in our create account. 10 00:00:39,110 --> 00:00:40,880 VC does have to file. 11 00:00:40,890 --> 00:00:43,220 And right now we don't have we don't have much in here. 12 00:00:43,220 --> 00:00:49,100 All right so we're going to have to hook up all of our UI elements that are in the main storyboard. 13 00:00:49,340 --> 00:00:54,890 So I just option clicked on the main story board to bring up our assistant Peter Pan. 14 00:00:55,100 --> 00:01:03,920 Let's see if we can create a little bit more room and then closed the left and right panels and yes 15 00:01:03,950 --> 00:01:07,630 we want to hear with the create account view controller here. 16 00:01:08,030 --> 00:01:14,720 And we're just going to create some outlets for her for text fields and buttons and stuff. 17 00:01:14,720 --> 00:01:15,320 OK. 18 00:01:15,650 --> 00:01:17,770 So we'll start here with the user name. 19 00:01:17,780 --> 00:01:27,890 I'm going to control drag and drop over here and say user name text to 60 and we've got an outlet. 20 00:01:28,090 --> 00:01:34,220 I'm going to quick create my outlet's header. 21 00:01:34,310 --> 00:01:34,990 Whoops. 22 00:01:37,420 --> 00:01:38,200 There we go. 23 00:01:39,220 --> 00:01:48,960 Next up we have the e-mails from the control drag and drop it right here and say e-mail text then we 24 00:01:48,960 --> 00:01:59,920 have the password textfield this when to say Pass text then let's go ahead and do these other ones that 25 00:01:59,920 --> 00:02:01,720 we have right now. 26 00:02:01,960 --> 00:02:03,090 We're going to grab the image here. 27 00:02:03,100 --> 00:02:07,970 But make sure you have the actual image not the button that goes over it. 28 00:02:08,080 --> 00:02:10,990 Make sure you've got the profile of the full image right here. 29 00:02:11,160 --> 00:02:13,120 And I'm going to control drag. 30 00:02:13,330 --> 00:02:15,860 And here we're going to say user image. 31 00:02:15,910 --> 00:02:19,400 I am g and connect that. 32 00:02:19,420 --> 00:02:24,250 Now we're going to grab the actually we're not going to do the choose Avatar engineering background 33 00:02:24,250 --> 00:02:29,920 color buttons yet but we will need an IB action for this. 34 00:02:29,920 --> 00:02:31,480 Create a count button here. 35 00:02:31,660 --> 00:02:39,070 So I'm going to control drag and this time make sure that it is an action and we are going to say create 36 00:02:39,470 --> 00:02:42,240 a count press. 37 00:02:42,640 --> 00:02:45,960 OK so that's an actual touch up inside and connect. 38 00:02:46,510 --> 00:02:49,560 And you know what let's go ahead and add these other buttons here. 39 00:02:49,570 --> 00:02:52,330 While we're at it that way we won't have to do it later. 40 00:02:52,540 --> 00:02:59,610 So with the choose Avatar button select it i'm control and dragging and I'm going to say Pick have a 41 00:02:59,830 --> 00:03:06,050 are pressed and that's going to be an action and connect. 42 00:03:06,640 --> 00:03:12,280 And then below that one I'm going to grab the general background color and I'm going to say control 43 00:03:12,280 --> 00:03:25,750 drag and make this an action and say pick back just pick B.G. color pressed I'm going to say connect 44 00:03:25,900 --> 00:03:27,410 or connect there. 45 00:03:27,430 --> 00:03:30,810 All right so we have all the stuff that we need. 46 00:03:31,050 --> 00:03:36,330 But the most doublechecked username email password that one's already cooked up got the image. 47 00:03:36,340 --> 00:03:39,520 And these two and all three of these buttons are right so I think frigate's I'm going to go ahead and 48 00:03:39,520 --> 00:03:43,590 close our assistant editor and re-open our left and her right. 49 00:03:43,610 --> 00:03:45,360 Payne's answer. 50 00:03:45,400 --> 00:03:56,020 Now we are able to work in with what happens when we pushed push that create account pressed button 51 00:03:56,530 --> 00:03:57,840 and see what's going to happen. 52 00:03:57,980 --> 00:04:06,720 Well first off we are going to grab what is in the username text email text and password text and well 53 00:04:06,730 --> 00:04:12,340 not the not the username quite yet just email the password because remember in postman although we need 54 00:04:12,340 --> 00:04:15,530 to register a user as an email and a password. 55 00:04:15,880 --> 00:04:20,550 So let's go ahead and create some variables for those who are anti guard. 56 00:04:20,830 --> 00:04:31,270 Let email equal email text that text and we're going to do a check here so we're going to say Kamo which 57 00:04:31,270 --> 00:04:38,620 denotes where we're seeing Gardley email equal what's inside of the email that text if or where the 58 00:04:38,620 --> 00:04:44,830 email text text does not equal an empty string. 59 00:04:44,830 --> 00:04:50,340 And if all that checks out then we'll save that into the variable e-mail. 60 00:04:50,590 --> 00:04:52,150 If not then we're just going to say. 61 00:04:52,150 --> 00:04:53,630 Else return. 62 00:04:54,050 --> 00:05:04,030 Can number into the same thing with password rents that guard and led past equal to pass text dot text 63 00:05:04,540 --> 00:05:12,240 where the last text that text does not equal an empty string. 64 00:05:12,240 --> 00:05:15,210 Else we're going to return. 65 00:05:15,500 --> 00:05:22,700 OK so if you haven't looked at Guarda statements yet what it is essentially is another way of unwrapping 66 00:05:22,880 --> 00:05:24,950 optional values. 67 00:05:24,950 --> 00:05:25,600 OK. 68 00:05:25,820 --> 00:05:30,660 So the values of the text fields if you click on text here you'll see that the. 69 00:05:30,710 --> 00:05:32,010 Is an optional string. 70 00:05:32,030 --> 00:05:34,650 So that's why we have to unwrap them. 71 00:05:35,150 --> 00:05:40,790 And then once we have our e-mail on password all we're going to do is call our our register function 72 00:05:40,820 --> 00:05:48,170 inside of the service and we say all the service that is in it officer was instance dot registry user 73 00:05:48,880 --> 00:05:57,080 and we are going to pass here the e-mail and then we're going to pass in the Pass the password that 74 00:05:57,080 --> 00:05:59,450 we have that we unwrapped right here. 75 00:05:59,450 --> 00:06:05,120 And then on the completion if you click here and then press enter we get the our completion handler 76 00:06:05,150 --> 00:06:08,510 and we're going to rename it here to be success. 77 00:06:09,110 --> 00:06:17,270 And then here we can say if success then we're going to say print 78 00:06:20,640 --> 00:06:23,720 a registered user. 79 00:06:24,320 --> 00:06:25,290 OK. 80 00:06:25,780 --> 00:06:29,050 So simple as that. 81 00:06:29,390 --> 00:06:30,810 And we're going to save that. 82 00:06:31,240 --> 00:06:35,800 So let's talk about real people we've done and we're going to Hedding unwrapped and created variables 83 00:06:35,800 --> 00:06:37,330 for our email and password. 84 00:06:37,330 --> 00:06:40,120 And those are taken from the e-mail text and password. 85 00:06:40,120 --> 00:06:41,200 Text You. 86 00:06:41,260 --> 00:06:45,040 I text fields right here in our app. 87 00:06:45,160 --> 00:06:45,710 Right. 88 00:06:46,000 --> 00:06:51,070 And then we pass those into the office or to start in the sense that register user function that we 89 00:06:51,070 --> 00:07:00,190 created and the last lesson when we click on the use register user button OK. 90 00:07:00,490 --> 00:07:04,550 And if it's successful we're just going to print out this print statement right here. 91 00:07:04,550 --> 00:07:07,300 So let's go ahead and give that a try. 92 00:07:07,560 --> 00:07:14,260 I'm going to toggle off the software keyboard and here we're going to try registering it using I say 93 00:07:15,580 --> 00:07:24,500 test and register dot com and the password is 1 2 3 4 5 6 and I'm going to click here. 94 00:07:25,180 --> 00:07:32,210 And if it works you should see a print statement down here and in a few seconds. 95 00:07:32,360 --> 00:07:34,040 Remember there it is. 96 00:07:34,050 --> 00:07:40,270 So the server had gone to sleep against remember that if you don't want your server to ever go to sleep 97 00:07:40,270 --> 00:07:44,190 you're going to have to upgrade your account to the. 98 00:07:44,200 --> 00:07:47,510 I think the next one is called hobby and that's only seven bucks a month. 99 00:07:47,590 --> 00:07:48,970 So not a lot. 100 00:07:48,970 --> 00:07:53,860 And so if you want to have it always awake and always ready to respond immediately then you can do that. 101 00:07:54,220 --> 00:07:55,110 Right. 102 00:07:55,450 --> 00:08:01,510 So we registered to user in fact let's go ahead and check out our labs. 103 00:08:01,690 --> 00:08:10,390 If we come over here to M lab com or if you did the one the one button deploy with Heroku that will 104 00:08:10,390 --> 00:08:16,280 be here under resources you'll see the light bulb here and you can click on it and it'll take you to 105 00:08:16,550 --> 00:08:17,710 the same type of thing. 106 00:08:18,010 --> 00:08:25,660 So if we come over here and click on our on our server on our Mongo database we come down here to accounts 107 00:08:27,250 --> 00:08:33,570 then we should see right here test at the register dot com. 108 00:08:33,760 --> 00:08:35,360 So guys this is super cool. 109 00:08:35,380 --> 00:08:46,050 We just coded a web request gave it the information that we wanted it to send to the server to our API 110 00:08:46,050 --> 00:08:52,510 and the API took that information created a count object and then sent that over to our Mangu D-B online 111 00:08:52,510 --> 00:08:54,650 database and saved it here. 112 00:08:54,850 --> 00:08:57,260 So some super cool stuff. 113 00:08:57,460 --> 00:09:04,510 So that's step one the creating a user account process remember so we have really we just register to 114 00:09:04,530 --> 00:09:09,840 user the next two steps is to log in the user and then add the user. 115 00:09:10,240 --> 00:09:15,730 But in this video like I said we're going to keep it light and instead of jumping into some more heavy 116 00:09:15,940 --> 00:09:19,750 API code we're going to do a little bit of UI enhancements. 117 00:09:19,760 --> 00:09:20,080 All right. 118 00:09:20,080 --> 00:09:28,240 So what we're going to do if we check out our if we check out our designs these buttons they have some 119 00:09:28,240 --> 00:09:29,910 rounded edges. 120 00:09:30,100 --> 00:09:30,950 OK. 121 00:09:31,270 --> 00:09:41,260 Now we could do it the old fashioned way of coming over here to our loggin the CSA and having a id outlet 122 00:09:41,290 --> 00:09:48,740 for the button and then doing buttoned up layer that corner radius is equal to five. 123 00:09:48,880 --> 00:09:55,610 But you know you shouldn't really have a lot of that type of code in your view controller. 124 00:09:55,720 --> 00:10:00,760 If you can let's you want to extract that out into subclasses so that's all we're into. 125 00:10:00,760 --> 00:10:03,990 Just like we created a greeting view subclass. 126 00:10:04,240 --> 00:10:08,950 We're going to create a rounded button subclass of you I bind. 127 00:10:08,950 --> 00:10:09,420 All right. 128 00:10:09,640 --> 00:10:10,620 So let's go ahead and get started. 129 00:10:10,620 --> 00:10:16,160 I'm going to click on view and see a new file and we're going to do cocoa touch class. 130 00:10:16,210 --> 00:10:16,410 Good. 131 00:10:16,430 --> 00:10:21,160 Next we're going to look for you I button. 132 00:10:21,160 --> 00:10:22,060 Here we go. 133 00:10:22,100 --> 00:10:25,460 I'm going to say rounded. 134 00:10:25,770 --> 00:10:28,300 And we're going to say next. 135 00:10:28,630 --> 00:10:30,010 Create. 136 00:10:30,850 --> 00:10:31,170 All right. 137 00:10:31,190 --> 00:10:34,740 And we're going to delete this hand just like a greeting. 138 00:10:34,740 --> 00:10:38,260 Do we want to be able to see the changes right there and storyboards So we're going to make this and 139 00:10:38,360 --> 00:10:43,270 I'd be the Zeina will ever go. 140 00:10:43,750 --> 00:10:49,260 And we want to be able to change also the corner radius in storyboard. 141 00:10:49,360 --> 00:10:55,660 So we're going to create an inspectable soon to say I be inspectable That's a variable called corner 142 00:10:55,950 --> 00:11:02,250 radius that's going to be a C G float because that's what corner radius requires. 143 00:11:02,620 --> 00:11:09,470 And we'll set a default value of 3.0 and we're going to say dead set. 144 00:11:09,940 --> 00:11:17,260 So when we change in storyboard what's going to happen we are going to set the corner radius of the 145 00:11:17,260 --> 00:11:20,950 button to the new one that we just set. 146 00:11:20,980 --> 00:11:25,360 So self-declared a corner radius equal to the corner radius. 147 00:11:25,420 --> 00:11:33,370 So the do the run and Button UI buttons layer nut corner radius value will be set to this value right 148 00:11:33,370 --> 00:11:33,790 here. 149 00:11:33,970 --> 00:11:34,450 OK. 150 00:11:34,750 --> 00:11:41,830 So pretty straightforward and we're going to say override or if we just do awake from NIB. 151 00:11:41,860 --> 00:11:51,190 So when it is created when it awakes from its KNIBBS state we're going to say self dot set up Wii U. 152 00:11:51,330 --> 00:11:52,840 And that's just a function that we haven't created yet. 153 00:11:52,840 --> 00:12:01,180 So I want to get right here Mincy funk set up by you and here also we're just going to say self-taught 154 00:12:01,360 --> 00:12:09,670 player corner radius is equal to corner radius and then the last thing that we need to do is we're going 155 00:12:09,670 --> 00:12:15,820 to call a function called prepare for interface builder which you can see here is called when a decidable 156 00:12:15,820 --> 00:12:18,690 object is created in Interface Builder. 157 00:12:18,970 --> 00:12:19,530 OK. 158 00:12:19,780 --> 00:12:25,490 And then we're going to also need to call super dot prepare for Interface Builder. 159 00:12:25,830 --> 00:12:30,310 And if we go down here we can read a little bit about what it does this is called when a desirable object 160 00:12:30,310 --> 00:12:36,610 is created and in Interface Builder one Interface Builder instantiate a class with the desirable attribute 161 00:12:36,760 --> 00:12:41,550 it calls this method to let the resulting object know that it was created at design time. 162 00:12:41,740 --> 00:12:46,470 You can implement this method in your design classes and use it to configure their design time. 163 00:12:46,470 --> 00:12:47,550 Appearance right. 164 00:12:47,830 --> 00:12:56,210 So here we are also going to put self-taught set of view so that when it's sort of when we change in 165 00:12:56,260 --> 00:13:00,250 storyboard then we know to set it up right here right. 166 00:13:00,610 --> 00:13:05,790 So pretty straightforward it's going to clean up a couple of things and get rid of unwanted spaces. 167 00:13:05,800 --> 00:13:07,660 And I think that looks good. 168 00:13:07,690 --> 00:13:08,960 So to save it. 169 00:13:09,400 --> 00:13:15,490 And we're going to jump back into storyboard and let's go ahead and set those two buttons that we have 170 00:13:15,490 --> 00:13:21,880 to this class here in log and I I'm just selecting log in coming over here to its attribute or the identity 171 00:13:21,880 --> 00:13:22,770 inspector. 172 00:13:22,780 --> 00:13:30,220 And we're going to change its class to a rounded button and you can see that it already has a rounded 173 00:13:30,220 --> 00:13:36,210 appearance now and then we're into the same thing for the Create count button and they say rounded button 174 00:13:37,100 --> 00:13:38,940 and that looks now looks pretty good. 175 00:13:38,940 --> 00:13:41,550 I think we want a little bit more rounded though. 176 00:13:41,620 --> 00:13:48,700 So let's go ahead and come to our attributes inspector and you can see here this is the I.B. inspectable 177 00:13:48,700 --> 00:13:52,410 variable that we created in our rounded button class. 178 00:13:52,450 --> 00:13:58,390 So we're going to I'm going to bump this up to five and then the same thing with the create a count 179 00:13:58,390 --> 00:14:02,610 button and bump that up to five and see how that looks. 180 00:14:02,680 --> 00:14:06,210 And yeah I think that looks really good. 181 00:14:06,460 --> 00:14:09,910 And you know what that is all we are going to cover in this lesson. 182 00:14:09,910 --> 00:14:10,870 Short and sweet. 183 00:14:10,930 --> 00:14:14,040 We fixed up our credit account. 184 00:14:14,570 --> 00:14:20,470 B c we added B outlets for up for all of our stuff IB actions for our buttons that we're going to use 185 00:14:20,470 --> 00:14:26,340 in the future as well as the create a count button right now we went ahead and we called our office 186 00:14:26,340 --> 00:14:33,880 service that instance dot register user function passing into the email and password so that it could 187 00:14:34,140 --> 00:14:36,700 and then go ahead and follow it over. 188 00:14:36,700 --> 00:14:42,730 So if you command click and click on a method you can say jump to definition and I'll take you over 189 00:14:42,730 --> 00:14:43,220 there. 190 00:14:43,460 --> 00:14:49,870 And so just a refresher of what we did and the last lesson we are passing into this function the email 191 00:14:49,870 --> 00:14:52,980 and password we have our completion handler. 192 00:14:53,180 --> 00:14:57,030 And so we're we're just sending over to our online API. 193 00:14:57,110 --> 00:15:03,280 This web request with the information and the API handles creating the user or registering the user 194 00:15:03,290 --> 00:15:04,270 I should say. 195 00:15:04,270 --> 00:15:05,830 So that's some pretty cool stuff. 196 00:15:05,830 --> 00:15:08,500 Hope you guys are enjoying it so far. 197 00:15:08,500 --> 00:15:13,120 And before we sign off here I'm going to go ahead and just commit our changes. 198 00:15:13,150 --> 00:15:19,660 So we said get status say Get add that get to commit cash. 199 00:15:19,730 --> 00:15:23,500 And this was less than 10. 200 00:15:24,460 --> 00:15:31,300 And then I'm going to do get push origin lesson dash time. 201 00:15:31,670 --> 00:15:36,220 All right looking great guys and I will see you in the next one.