1 00:00:07,530 --> 00:00:08,430 What's up everybody. 2 00:00:08,460 --> 00:00:10,650 JOHNNY B here with slopes dot com. 3 00:00:10,650 --> 00:00:12,170 And welcome back to. 4 00:00:12,420 --> 00:00:13,270 Welcome back to class. 5 00:00:13,270 --> 00:00:18,930 We're continuing to work on our chat app and it's starting to shape up pretty well indeed. 6 00:00:19,020 --> 00:00:24,600 We're back in X code now we've spent the last few lessons talking about web requests and setting up 7 00:00:24,600 --> 00:00:30,780 our API eyes on Heroku and optionally Azi on a local host as well. 8 00:00:30,960 --> 00:00:39,540 So but now we're ready to jump back into X code and actually hook up with the API and start getting 9 00:00:39,540 --> 00:00:42,920 and sending data back and forth between the API and our client app. 10 00:00:42,930 --> 00:00:44,630 So it's is going to be some pretty cool stuff. 11 00:00:44,640 --> 00:00:46,140 So let's jump into it. 12 00:00:46,140 --> 00:00:49,020 This is where we left off in our app. 13 00:00:49,110 --> 00:00:58,260 You know we we've got the menu open menu working we can click on loggin and this isn't working yet but 14 00:00:58,260 --> 00:01:03,000 if we go to don't have an account to sign up here and this is where we're going to start working now 15 00:01:03,000 --> 00:01:10,530 because the how the API is set up when you don't have a user yet when you want to create a user there's 16 00:01:10,530 --> 00:01:17,460 three steps you got to go through socialist pull up postman here if you see over here in our in our 17 00:01:17,520 --> 00:01:22,400 requests from the collection that you imported the postman you'll see we have three numbers here. 18 00:01:22,410 --> 00:01:24,020 We got one two and three. 19 00:01:24,030 --> 00:01:28,920 The first is to off is to register a new user. 20 00:01:28,950 --> 00:01:29,530 OK. 21 00:01:29,760 --> 00:01:38,360 And so what that does is it sends to the API an email and password and registers a user for that account. 22 00:01:38,370 --> 00:01:42,430 The next step is to log in that user. 23 00:01:42,780 --> 00:01:49,650 And when you log in the user this is where we get back the token that we talked about in Lesson 6 about 24 00:01:49,650 --> 00:01:56,430 web requests and API has and this token is necessary to do any of the further requests that we want 25 00:01:56,430 --> 00:02:03,120 to do like sending a message retrieving chat messages you know adding channels. 26 00:02:03,120 --> 00:02:09,390 Anything on the API that is locked down meaning you know the API has lots of functions for doing different 27 00:02:09,390 --> 00:02:12,310 things and some of them are locked down. 28 00:02:12,330 --> 00:02:19,530 So you have to have that API her sorry you have to have that off tokin key that is inside of the header 29 00:02:19,800 --> 00:02:21,830 to access those functions. 30 00:02:21,840 --> 00:02:22,410 Right. 31 00:02:22,740 --> 00:02:28,530 So first we're going to register a user they're going to log that user in and then we're going to create 32 00:02:28,620 --> 00:02:30,260 a new user. 33 00:02:30,270 --> 00:02:34,990 All right so registering a user and creating a user are a little bit different when you register it. 34 00:02:35,010 --> 00:02:39,990 It just creates an email and password user. 35 00:02:39,990 --> 00:02:44,610 When we do the AD user what we're going to be doing is we're going to be adding things like the avatar 36 00:02:44,610 --> 00:02:49,140 name the Avatar background color and some other information that we need for it. 37 00:02:49,140 --> 00:02:49,900 All right. 38 00:02:50,040 --> 00:02:52,350 So let's get started in this video. 39 00:02:52,360 --> 00:02:56,780 All we're going to do is get the registering the user set up. 40 00:02:56,790 --> 00:02:57,460 OK. 41 00:02:57,750 --> 00:03:02,890 So let's let's take a look at just this register user call OK. 42 00:03:02,910 --> 00:03:06,010 So right now it's set up to be on our local host. 43 00:03:06,060 --> 00:03:13,470 So let's go ahead and fire our local host up an open terminal and open up a new tab. 44 00:03:13,950 --> 00:03:20,340 And if you remember from our last video to get the local host up and running we also have to have Mungo 45 00:03:20,360 --> 00:03:22,570 d among the database for running's. 46 00:03:22,570 --> 00:03:24,600 I want to say Mungo D 47 00:03:27,720 --> 00:03:32,010 and wait for that to get up and running you can see here it says that waiting for connections on port 48 00:03:32,100 --> 00:03:33,620 2 7 0 0 1 7. 49 00:03:33,750 --> 00:03:40,370 And that's just what we want to see and then open up a new tab and we need to change directory into 50 00:03:40,380 --> 00:03:42,870 our Power Chat API folders. 51 00:03:42,890 --> 00:03:45,690 I'm going to say CD and that's on our desktop. 52 00:03:45,780 --> 00:03:49,870 So I say CD to desktop and then CD Mac chat API. 53 00:03:50,100 --> 00:03:50,620 OK. 54 00:03:50,820 --> 00:03:59,590 So once we're in here after you've done your NPM install all we got to do is to NPM run dev. 55 00:04:00,000 --> 00:04:03,700 All right so that is up and running says database connection ready. 56 00:04:03,720 --> 00:04:14,300 So now we can actually send this register call to our local hosted API and I can say something like. 57 00:04:14,520 --> 00:04:19,650 Jay at test register dot com. 58 00:04:20,070 --> 00:04:28,110 So we talked about web requests in the past and as part of the content that you can send with an HDTV 59 00:04:28,110 --> 00:04:30,830 request is a header and a body. 60 00:04:30,840 --> 00:04:33,190 So like I said some of them are locked down. 61 00:04:33,300 --> 00:04:35,410 This request is not. 62 00:04:35,460 --> 00:04:39,420 So you can see here that we don't have an authorization header or anything. 63 00:04:39,420 --> 00:04:44,100 All we're doing is saying what kind of the content type is but then here in the body we're actually 64 00:04:44,100 --> 00:04:54,330 sending Jaison in the form of an email with a email string value and a key of password and a string 65 00:04:54,900 --> 00:04:56,750 value for that key password. 66 00:04:57,000 --> 00:05:05,670 And if we say send here what we're doing is we're we're sending this to the post request to our local 67 00:05:05,760 --> 00:05:10,370 LEA hosted API at the path at V-1 account register. 68 00:05:10,450 --> 00:05:10,910 OK. 69 00:05:11,070 --> 00:05:14,060 And so if I say send. 70 00:05:14,380 --> 00:05:15,350 It's going to send it to it. 71 00:05:15,370 --> 00:05:20,320 And you can see here it says that we successfully created a new account. 72 00:05:20,700 --> 00:05:26,240 And if we open up one of our other tools that we downloaded in the last couple of videos robo Mungo 73 00:05:26,850 --> 00:05:32,840 if we come over here and we looked at our chat happy I would come down here to accounts and double click 74 00:05:33,160 --> 00:05:35,530 if I scroll down here to the bottom. 75 00:05:35,700 --> 00:05:40,450 There we go we can actually see that we just registered user. 76 00:05:40,450 --> 00:05:44,730 All right so Jay at test register dot com. 77 00:05:44,730 --> 00:05:51,190 All right so I'm I'm showing you all this in postman so that you can get an idea of what kind of stuff 78 00:05:51,190 --> 00:05:57,900 we're going to be passing back and forth to the API and what the kind of responses are in the next video 79 00:05:57,930 --> 00:06:00,620 that we'll be looking at the off and create user. 80 00:06:00,880 --> 00:06:03,310 But for now we're just going to stick with this registry user. 81 00:06:03,400 --> 00:06:10,570 So we're know that we're going to be needing to send something to a an API with with the Ural and the 82 00:06:10,570 --> 00:06:11,210 post. 83 00:06:11,230 --> 00:06:17,290 We know that we're going to need to be sending somebody and we know that we're going to need a simple 84 00:06:17,290 --> 00:06:18,820 header in the type of application. 85 00:06:18,850 --> 00:06:24,280 Jason So let's jump into next code and get started on all that. 86 00:06:24,280 --> 00:06:30,190 So first thing I think we need to create some a service so all this stuff is going to be handled inside 87 00:06:30,190 --> 00:06:32,360 of a file called Office service. 88 00:06:32,380 --> 00:06:40,570 So let's create a new group and click right click on SMAC here and say new group and that new group 89 00:06:40,570 --> 00:06:42,100 is going to be called 90 00:06:44,780 --> 00:06:46,190 services. 91 00:06:46,330 --> 00:06:46,970 OK. 92 00:06:47,210 --> 00:06:50,520 We're going to create a new file here inside of it. 93 00:06:51,290 --> 00:06:54,490 And this can just be a swift file. 94 00:06:54,520 --> 00:06:57,900 All right call it off service. 95 00:06:58,500 --> 00:06:59,050 OK. 96 00:06:59,100 --> 00:07:00,640 And create. 97 00:07:01,460 --> 00:07:10,790 OK so this service is going to handle all of our log in create user register user functions as well 98 00:07:10,790 --> 00:07:15,310 as some some other variables that we're going to want to code up. 99 00:07:15,350 --> 00:07:15,860 OK. 100 00:07:16,130 --> 00:07:17,430 So let's go ahead and create it. 101 00:07:17,430 --> 00:07:21,630 So we're going to take a class off service. 102 00:07:22,610 --> 00:07:22,990 OK. 103 00:07:23,000 --> 00:07:24,880 This is going to be a singleton. 104 00:07:25,100 --> 00:07:31,560 Meaning that this is going to be accessible globally and there can only be one instance of it at a time. 105 00:07:31,560 --> 00:07:40,640 So when I say static let instance cool off service and we're just going to initialize that and then 106 00:07:40,640 --> 00:07:48,920 we're going to create a few variables here that we are going to store in the user defaults meaning that 107 00:07:48,920 --> 00:07:53,580 those are going to be persisted even after the user closes the app. 108 00:07:53,630 --> 00:07:58,490 And these are going to be things like whether they whether the user has logged in so that we don't have 109 00:07:58,490 --> 00:08:02,360 to enter in the username and password every single time we open the app. 110 00:08:02,690 --> 00:08:08,810 The other thing is going to be the token and the last thing is the user e-mail so that when we reopen 111 00:08:08,810 --> 00:08:12,150 the app we can get all of the info for for the user. 112 00:08:12,200 --> 00:08:12,690 OK. 113 00:08:13,040 --> 00:08:14,390 So we go ahead and create those. 114 00:08:14,390 --> 00:08:22,880 Like I said we're going to be using the user defaults and we say let defaults equal user defaults dot 115 00:08:23,300 --> 00:08:25,190 standard game. 116 00:08:25,190 --> 00:08:30,200 So if we click on here on user default it says an interface to the user's default database where you 117 00:08:30,200 --> 00:08:35,960 store key value pairs persistently across invocations of your app on a given device. 118 00:08:35,960 --> 00:08:41,930 So basically this is the most simple way of saving data in your app and you don't want to use it for 119 00:08:41,930 --> 00:08:47,630 things like images and any like heavy duty data. 120 00:08:47,630 --> 00:08:48,020 All right. 121 00:08:48,140 --> 00:08:53,960 So just use the user defaults for simple things like strings and billions and that kind of stuff for 122 00:08:53,960 --> 00:08:54,390 it. 123 00:08:54,680 --> 00:08:58,090 It's also not super secure so you don't want to store passwords and stuff. 124 00:08:58,520 --> 00:09:06,130 So it's just out we're going to say a VAR is logged in and this is going to be a big. 125 00:09:06,770 --> 00:09:12,920 And like I said this is just a bully and that will help us to be able to do checks on how we want the 126 00:09:12,920 --> 00:09:13,760 UI to display. 127 00:09:13,760 --> 00:09:20,090 So for instance if we're logged in then we're going to show in the menu that logon button is actually 128 00:09:20,090 --> 00:09:21,330 going to show the users name. 129 00:09:21,350 --> 00:09:23,650 But if we're not logged in then it's going to say log. 130 00:09:23,710 --> 00:09:24,220 OK. 131 00:09:24,620 --> 00:09:29,820 And we're to create some getters and setters for this are going to take it. 132 00:09:30,020 --> 00:09:35,780 And so what we want to do is when we when we try to access this we're going to look into the user defaults 133 00:09:35,840 --> 00:09:39,530 and see if see if this value exists. 134 00:09:39,530 --> 00:09:52,520 So I say return defaults dot bhool for key and the key is going to be a constant that we haven't created 135 00:09:52,520 --> 00:10:00,340 yet but it's going to be called whip's logged in key. 136 00:10:00,350 --> 00:10:03,560 OK so let's go and go in and create that right now. 137 00:10:03,560 --> 00:10:11,000 So let's jump into Constans and create a new header here called user defaults. 138 00:10:11,270 --> 00:10:16,820 And we're going to have we're going to have three use a default conference here so we're going to add 139 00:10:16,820 --> 00:10:18,180 all of them right now. 140 00:10:18,200 --> 00:10:32,460 First we're going to say let token underscore key equal tokin we're going to have the logged in key 141 00:10:33,090 --> 00:10:37,510 and that's just going to be logged in. 142 00:10:37,890 --> 00:10:46,810 And lastly we're going to have user e-mail and that's going to be equal to user e-mail. 143 00:10:46,860 --> 00:10:50,560 I was going to say that and jumped off the service. 144 00:10:50,780 --> 00:10:56,560 OK so now when we try to access all service data instance that is locked in. 145 00:10:56,700 --> 00:11:00,730 We're going to look into our user defaults and see if that exists. 146 00:11:00,810 --> 00:11:01,390 OK. 147 00:11:01,710 --> 00:11:07,110 And then if we want to set it we need to centers around and say set and we are going to say 148 00:11:12,870 --> 00:11:15,250 defaults dot set. 149 00:11:15,450 --> 00:11:25,110 And the one that we want is the value for key in case we're going to see new value for key and that 150 00:11:25,110 --> 00:11:27,130 same key logged in key. 151 00:11:27,440 --> 00:11:29,310 All right perfect. 152 00:11:29,310 --> 00:11:32,810 So you going create a little bit of space here. 153 00:11:33,390 --> 00:11:39,480 All right so the next one is for the off tokens I would say bar off token and this is going to be a 154 00:11:39,480 --> 00:11:45,090 string and we're going to create a couple of getters and setters against them as they get. 155 00:11:45,450 --> 00:11:57,800 And this is going to be return defaults to value for key string and came and so the key for the token 156 00:11:57,800 --> 00:12:00,310 is token key. 157 00:12:00,740 --> 00:12:07,020 And then we have to cast it as a string because you will see here if we click right here on the first 158 00:12:07,160 --> 00:12:10,600 value this returns and optional any. 159 00:12:10,700 --> 00:12:11,030 OK. 160 00:12:11,060 --> 00:12:13,780 So we got to cast it as a string. 161 00:12:14,240 --> 00:12:21,150 And when we said it we are going to say defaults got set. 162 00:12:21,380 --> 00:12:29,060 And what we want here is the value and the value is new value meaning whatever it is that we set this 163 00:12:29,120 --> 00:12:31,830 equal to when we're calling it up and I need to fix this. 164 00:12:31,870 --> 00:12:33,700 That should be a token. 165 00:12:33,920 --> 00:12:37,740 And the key is again tokin key. 166 00:12:37,850 --> 00:12:45,840 And lastly we have our user emails and we save our user e-mail and this is also a string. 167 00:12:46,340 --> 00:12:50,780 And you know I can actually just copy these getters and setters because this is going to be the same 168 00:12:50,780 --> 00:12:56,250 thing except for the key which is user email. 169 00:12:56,450 --> 00:12:57,110 Perfect. 170 00:12:57,110 --> 00:13:04,160 So now we have just created these three variables that we'll be able to access anywhere and also be 171 00:13:04,160 --> 00:13:07,590 reading and writing to and from our user defaults. 172 00:13:07,590 --> 00:13:11,980 So these these of these variables will be persisted across. 173 00:13:12,530 --> 00:13:13,220 App launches. 174 00:13:13,220 --> 00:13:13,570 All right. 175 00:13:13,700 --> 00:13:14,750 So that's perfect. 176 00:13:17,090 --> 00:13:21,820 All right so now we are actually ready to create our registered user function. 177 00:13:21,830 --> 00:13:23,650 So how do we do that in X code. 178 00:13:23,660 --> 00:13:29,840 You know here in Postman it seems pretty simple all we got to do is press the send button and it does 179 00:13:29,840 --> 00:13:36,320 it for us but we got a code that all out here in X code ourselves so we're going to over got to do is 180 00:13:36,320 --> 00:13:46,430 create an actual web request specify the headers specify the body specify how we want to see that response 181 00:13:46,430 --> 00:13:47,840 come back and everything. 182 00:13:48,050 --> 00:13:52,620 And what we're going to do is we're going to use something a library called Allum of fire. 183 00:13:52,790 --> 00:13:58,970 And what this does what Alma fired does is it's a it's a library built on top of Apple's you r l session 184 00:13:59,860 --> 00:14:04,240 a framework that makes making web requests a lot easier. 185 00:14:04,280 --> 00:14:14,380 OK so here we're going to import Alamar fires say import Alamo fire again it's super easy to use. 186 00:14:14,660 --> 00:14:21,470 Let me open up Safari and show you where to find some more documentation. 187 00:14:21,470 --> 00:14:32,260 If you just Google Alamo fire and come up here to the get hub Alamo fire page then you can see a lot 188 00:14:32,260 --> 00:14:34,000 of great information. 189 00:14:34,000 --> 00:14:43,280 Alamo fire is one of the best documented and maintain libraries out there so highly highly recommended. 190 00:14:43,300 --> 00:14:44,140 See here. 191 00:14:44,140 --> 00:14:46,990 So here's where usage making a request. 192 00:14:47,110 --> 00:14:51,130 So it's super simple all you have to do is say you call Alamo fire. 193 00:14:51,130 --> 00:14:56,610 Then you say Doc request and then you pass in the your L that we're trying to hit. 194 00:14:56,680 --> 00:15:03,580 So in our case it would be something like this local host account register and then you specify how 195 00:15:03,580 --> 00:15:06,020 you want the response to be. 196 00:15:06,040 --> 00:15:12,850 Most of the time we want it to be J song but in the case of the register function what we actually want 197 00:15:13,560 --> 00:15:16,760 what we actually want is a response string. 198 00:15:16,970 --> 00:15:22,240 Yes so the response string handler uses the response string serialized to convert the data returned 199 00:15:22,240 --> 00:15:23,790 by the server into a string. 200 00:15:23,920 --> 00:15:30,520 Ok so the register user api function is just a little bit unique in that way and that the response that 201 00:15:30,520 --> 00:15:32,600 we get back is actually a string. 202 00:15:32,740 --> 00:15:41,410 Ok so it's pretty simple so let's go ahead and create a function to do that register and say func register 203 00:15:42,110 --> 00:15:43,010 user. 204 00:15:43,510 --> 00:15:50,050 And remember from our postman some of the things that we're going to need to be able to pass to the 205 00:15:50,050 --> 00:15:50,470 API. 206 00:15:50,470 --> 00:15:52,590 It is an e-mail and a password. 207 00:15:52,800 --> 00:16:01,980 OK so we're gonna say email which is a type of string and pass word which is also a string. 208 00:16:02,500 --> 00:16:10,180 Ok but we need one more thing here because web requests are asynchronous meaning that we send off the 209 00:16:10,180 --> 00:16:15,850 web request and then we don't know when the response is going to come back do we. 210 00:16:15,910 --> 00:16:22,210 And so as a result we can't say register a user and then immediately try to do something with what we 211 00:16:22,210 --> 00:16:23,550 expect to come back. 212 00:16:23,780 --> 00:16:31,170 OK so what we need to do is have a way of knowing once it's finished and we do this with something called 213 00:16:31,170 --> 00:16:33,790 a completion handler. 214 00:16:33,790 --> 00:16:39,460 So if we come back over here into Constans we're going to create a new constant and this is going to 215 00:16:39,460 --> 00:16:48,370 be called type alias and the name is completion handler and the type is I'm just going to write this 216 00:16:48,370 --> 00:16:58,600 out and then we'll talk about it in cases underscore success bool and then dash and arrow and then open 217 00:16:58,600 --> 00:16:59,890 close parentheses. 218 00:16:59,890 --> 00:17:03,260 I said Don't freak out if you don't understand what's going on right here. 219 00:17:03,400 --> 00:17:05,460 Let's go through it a little bit at a time. 220 00:17:05,680 --> 00:17:12,730 So first off what does a type Illyas type alias is simply renaming a type. 221 00:17:12,730 --> 00:17:20,560 I can do this I could say type alias and I'm going to say Johnny and type expression is string. 222 00:17:20,680 --> 00:17:22,090 Then I could say something like. 223 00:17:22,140 --> 00:17:29,780 Let name of type Jhonny equal Johnny. 224 00:17:30,400 --> 00:17:38,390 And so you'll see here what we've done is simply remapped the type of string to this type called Johnny. 225 00:17:38,670 --> 00:17:45,880 So that's what the type aliases all we're doing is saying completion handler is of this type and what 226 00:17:45,880 --> 00:17:46,690 is this type. 227 00:17:46,870 --> 00:17:49,150 Well this is a closure. 228 00:17:49,180 --> 00:17:56,200 OK we're creating a very simple custom closure and what a closure is is it's a first class function 229 00:17:56,200 --> 00:18:00,220 that can be passed around in code. 230 00:18:00,610 --> 00:18:08,740 So basically how we're going to be using it is we're going to send off a web request OK and then once 231 00:18:08,740 --> 00:18:16,330 that request is done we are going to say completed and pass into that closure. 232 00:18:16,330 --> 00:18:17,360 True or false. 233 00:18:17,620 --> 00:18:25,130 And then we can do a check on that later on to see whether the web request was successful or not. 234 00:18:25,370 --> 00:18:27,950 OK so it's a little bit complicated. 235 00:18:28,210 --> 00:18:31,960 And so this is a very simple example of a closure call the completion handler. 236 00:18:32,040 --> 00:18:38,590 A little bit later on we're going to do a little bit more complex work with closures and I'm hoping 237 00:18:38,590 --> 00:18:45,550 that at that point you'll have used the simple one a little bit more and that once we get into the other 238 00:18:45,820 --> 00:18:48,250 uses of it it will click into place a little bit better. 239 00:18:48,250 --> 00:18:48,620 Right. 240 00:18:48,760 --> 00:18:53,420 So don't worry if you don't fully understand this completion handler right now. 241 00:18:53,740 --> 00:18:54,270 It all. 242 00:18:54,270 --> 00:18:57,280 It will become more clear as we use it and as we go on OK. 243 00:18:57,730 --> 00:19:04,420 So here we go we got a completion handler here and so jump back to our office service not swift and 244 00:19:04,420 --> 00:19:05,810 right here at the end. 245 00:19:05,890 --> 00:19:08,680 We're going to say completion 246 00:19:11,750 --> 00:19:17,910 at this gay being which is just the key word that we need for our completion and then we're going to 247 00:19:17,910 --> 00:19:26,500 say completion handler and you'll see here that it's passing in a ball and returning nothing. 248 00:19:26,580 --> 00:19:27,370 OK. 249 00:19:27,660 --> 00:19:33,150 So first thing we're going to do is we're going to set the e-mail to be all lowercase just to make things 250 00:19:33,210 --> 00:19:33,890 easier. 251 00:19:33,960 --> 00:19:42,440 When I say lower case e-mail you called to the e-mail that is passed in hand just say your case it came. 252 00:19:42,960 --> 00:19:45,450 Then we're going to need a header. 253 00:19:45,450 --> 00:19:45,940 All right. 254 00:19:46,110 --> 00:19:52,230 So remember back in Lesson 6 we talked about web requests with headers and headers are kind of like 255 00:19:52,590 --> 00:19:58,460 kind of like an attachment to the CTP requests where you can specify the type of content you can add 256 00:19:58,530 --> 00:20:02,050 authorization headers API keys and other things like that. 257 00:20:02,130 --> 00:20:02,650 OK. 258 00:20:02,850 --> 00:20:09,660 And so what that looks like here in X code is we're going to create a J saw Jason object. 259 00:20:09,750 --> 00:20:09,990 OK. 260 00:20:09,990 --> 00:20:17,310 And we do that by saying Let header equal square brackets. 261 00:20:17,850 --> 00:20:24,070 And then we put in a key and a value in the type of strings during to. 262 00:20:24,300 --> 00:20:29,230 Let Ted are equal and content type 263 00:20:31,950 --> 00:20:37,980 Colin Lissa's application slash. 264 00:20:38,210 --> 00:20:53,320 Jason then character set is equal to T F Dash 8 OK and you build this if this these errors go away. 265 00:20:53,810 --> 00:20:55,090 OK so looks good. 266 00:20:55,220 --> 00:21:01,490 And you might remember this from our postman if we come up here and look at these Hetter you see something 267 00:21:01,490 --> 00:21:02,050 similar here. 268 00:21:02,060 --> 00:21:02,720 Content-Type. 269 00:21:02,720 --> 00:21:04,040 Application J song. 270 00:21:04,280 --> 00:21:08,930 And so we're just kind of replicating the what we have here in postman in here. 271 00:21:08,930 --> 00:21:15,150 Here in code crafting our very own web request from X code. 272 00:21:15,200 --> 00:21:16,520 All right so let's keep going. 273 00:21:16,520 --> 00:21:20,770 The next thing that we're going to need is a body in case of that body. 274 00:21:21,140 --> 00:21:26,240 And the same thing we're going to create a just an object and we're going to say this one is of type 275 00:21:26,240 --> 00:21:35,460 string you canned and the light is equal to again opening those square brackets. 276 00:21:35,480 --> 00:21:37,520 I'm going to say hard two key value pairs. 277 00:21:37,550 --> 00:21:39,920 If we look in postman What do we need. 278 00:21:39,920 --> 00:21:44,980 If we look at our body here we're going to need an email and a string and a password and a string. 279 00:21:44,990 --> 00:21:45,450 OK. 280 00:21:45,650 --> 00:21:46,820 So let's go ahead and do that. 281 00:21:46,820 --> 00:21:53,290 So this is going to be email and the email is lowercase e-mail. 282 00:21:53,750 --> 00:21:58,560 And then you do a comma to denote that we have multiple key value pairs. 283 00:21:58,820 --> 00:22:03,500 And the next one is going to be password. 284 00:22:03,940 --> 00:22:07,820 And that is going to be the password that we pass in. 285 00:22:07,840 --> 00:22:08,040 All right. 286 00:22:08,050 --> 00:22:14,920 And it's extremely important that what you have here and here matches up exactly with what you have 287 00:22:14,920 --> 00:22:15,830 here and here. 288 00:22:15,940 --> 00:22:16,440 OK. 289 00:22:16,690 --> 00:22:21,060 So now we have defined what our header is what our body is. 290 00:22:21,100 --> 00:22:25,260 And so now we're actually ready to create the web request. 291 00:22:25,520 --> 00:22:25,750 OK. 292 00:22:25,780 --> 00:22:34,070 And so like we were looking in on their hub page all we got to do is say hello fire dot request. 293 00:22:34,120 --> 00:22:40,930 So we create the request and what we want is this one right here because we're going to be doing a little 294 00:22:40,930 --> 00:22:44,790 bit more complicated stuff than just simply making a web request. 295 00:22:44,800 --> 00:22:52,510 We need to be able to send a web request with a specific type of method whether it's get post you know 296 00:22:52,510 --> 00:22:53,340 et cetera. 297 00:22:53,350 --> 00:23:00,010 We need to be able to pass in parameters which is our body here and we need to be able to specify the 298 00:23:00,190 --> 00:23:06,250 type of encoding and we need to be able to pass headers as well. 299 00:23:06,250 --> 00:23:06,720 All right. 300 00:23:06,970 --> 00:23:13,360 So that might seem a little bit daunting at first but I promise as we keep using this you're going to 301 00:23:13,360 --> 00:23:14,810 get the hang of it real quick. 302 00:23:15,160 --> 00:23:15,350 OK. 303 00:23:15,370 --> 00:23:21,880 So we see here that we need your help and we haven't actually defined that yet so let's come over here 304 00:23:21,880 --> 00:23:28,830 to Constance as well as open up Safari and just run over to our Heroku page. 305 00:23:28,840 --> 00:23:29,380 OK. 306 00:23:29,680 --> 00:23:30,790 All right so here in Heroku. 307 00:23:30,790 --> 00:23:34,470 Go ahead and click on your check to check to be app. 308 00:23:34,540 --> 00:23:43,690 Come over here to settings and we are going to grab this you URL right here and you can click on it 309 00:23:43,720 --> 00:23:47,340 if you want and you'll see that. 310 00:23:47,470 --> 00:23:49,860 Wait for it to come back on line. 311 00:23:50,770 --> 00:23:51,550 All right there we go. 312 00:23:51,640 --> 00:23:53,480 This is Chaddy API is alive. 313 00:23:53,530 --> 00:23:53,800 All right. 314 00:23:53,810 --> 00:23:55,120 So good. 315 00:23:55,160 --> 00:24:02,680 So if we come over here to a postman what you see here is the local host 2005 for our online Heroku 316 00:24:02,680 --> 00:24:06,900 version that is this guy right here. 317 00:24:06,910 --> 00:24:14,160 OK so jump back to X code with that you are Ehle copy and we are going to set up our your L Constans 318 00:24:19,140 --> 00:24:27,000 and the first one is our base you are caesareans say bass you are all equal to piano that you are all 319 00:24:27,000 --> 00:24:32,790 that we just copied plus the one at the end for version 1. 320 00:24:32,980 --> 00:24:40,350 Then if you look in Postman the what comes after that his account slash register. 321 00:24:40,500 --> 00:24:47,310 OK so are you are all register is going to be equal to 322 00:24:49,800 --> 00:24:53,860 base and need to do the string interpolation here. 323 00:24:54,140 --> 00:25:02,190 So that's going to be bass you are l Plus account slash register tacked onto the end. 324 00:25:02,370 --> 00:25:09,560 So when I say that and jam packed into our office service here and we going to pass and the U R L and 325 00:25:09,560 --> 00:25:12,980 that u r l he is u r l. 326 00:25:13,120 --> 00:25:15,000 News Corps register. 327 00:25:15,020 --> 00:25:22,340 The method is of course Dr. Post which you can again see here in post-Mandela post. 328 00:25:22,670 --> 00:25:27,040 The parameters is the body soon to see body. 329 00:25:27,230 --> 00:25:29,670 The encoding is. 330 00:25:29,770 --> 00:25:40,270 Jason is here son in coding default and the headers is of course our header that we created right above. 331 00:25:40,720 --> 00:25:47,960 And then we're going to say Dot and this is where we specify our response and you see that there's a 332 00:25:47,960 --> 00:25:54,560 whole bunch we can do response data where the response just comes as data as the sun for this particular 333 00:25:54,560 --> 00:25:57,080 case we're going to do a response string. 334 00:25:57,080 --> 00:25:59,250 Most of the time you'll be working with response Jason. 335 00:25:59,300 --> 00:26:07,220 But in this particular case for the register API call it a response string OK to press that and then 336 00:26:07,220 --> 00:26:11,830 press return again so that we get the completion handler. 337 00:26:11,860 --> 00:26:17,870 When I say here with this selected here I'm going to say response so I'm just renaming what we get past 338 00:26:18,170 --> 00:26:22,430 to use as response in hearing code. 339 00:26:22,490 --> 00:26:30,270 We're just going to say if response does result that error is equal to nil. 340 00:26:30,290 --> 00:26:34,430 So if everything went hunky dory then we're going to see a completion. 341 00:26:34,440 --> 00:26:35,920 Tis true. 342 00:26:36,110 --> 00:26:39,050 And so this completion is right here. 343 00:26:39,080 --> 00:26:46,280 The custom completion handler that we that we coded so that will know when the web request is completed 344 00:26:46,310 --> 00:26:48,650 and when it's successful. 345 00:26:48,890 --> 00:26:58,730 So if everything didn't go well else then we're going to say completion is false and we're going to 346 00:26:58,730 --> 00:26:59,440 go ahead and do it. 347 00:26:59,440 --> 00:27:07,730 Debug print to see see what went wrong Serene's debug print and when to say response result that error 348 00:27:08,270 --> 00:27:10,150 as any. 349 00:27:10,940 --> 00:27:13,900 So that's just going to print out what went wrong for us. 350 00:27:13,910 --> 00:27:19,610 I just want to say that and you know we are running really long on this whole and so I'm afraid I'm 351 00:27:19,610 --> 00:27:22,300 going to have to cut it short right here. 352 00:27:22,790 --> 00:27:29,200 But so far in this lesson what we've done is we've created our 3 off service variables is logged in 353 00:27:29,220 --> 00:27:35,660 off token user email and then we have created our register user function and the next lesson we're going 354 00:27:35,660 --> 00:27:37,030 to actually use it. 355 00:27:37,070 --> 00:27:43,600 OK so just to finish off for a quick I'm going to go ahead and commit our changes so I'm back here when 356 00:27:43,620 --> 00:27:46,120 I see it PWT to make sure I'm in the right directory. 357 00:27:46,260 --> 00:27:53,360 Get status and then get add that good commit dash. 358 00:27:53,500 --> 00:27:58,050 And this is lesson 9. 359 00:27:58,580 --> 00:28:03,220 All right guys I will see you in the next one when we are going to work more with the API.