[MUSIC] It's time now to dig in to this GeoFence stuff. And to do a case study, what we're going to do is we're going to show how we get those call backs. How we implement a GeoFence and how we use the simulated track all into one package, that we can use this in our own code at some point in the future if we're so interested. And so here's what we're trying to do as our high level idea. We're trying to have a map application that we've seen before that shows location. And we're going to use our simulated movement. We use the track that we created in the previous lecture. We're going to have a hard-coded geofence region meaning the app's going to have a specific location that it's looking for, and that'll be the second point in our track. We'll have an activate switch which will turn on and turn off the geofence region as well as turning on the tracking of the user. That'll be the activate switch. We'll have a manual status request, so we can show the process of hitting a button and getting a response back, regardless of crossing the boundaries of just knowing whether we're inside or outside. And then we'll have a text label which indicates whether or not we have received an enter and exit alert. And then the last thing that we want is we want notifications so that when the user crosses those boundaries, we get notified and what we'll do in those cases, is we'll pop up a local notification to the user saying that we entered or we exited that spot. Okay? So as with previous code examples, what we're going to do is follow several steps. We're going to build the project and the UI first, then we'll set up the info.plist parameters. We will request permissions from the user in order to use background location, do notifications. We'll set up our location manager which is responsible for tracking and providing the geo-region services in our map. I'll set up our map. We'll make sure that user tracking works. So before we do the geo-regions, what we're going to do is just make sure that we're following our user okay. That'll involve us importing the track and simulating it. And then we'll go ahead and implement the geo-region. Construct it, track it, and then respond to it. Hopefully our user interface will look something like on the left by the time we're done. All right, so let's get started. Let's for the first step, as indicated, let's build that UI. This is a lot like a previous UI that we've built, and so hopefully it won't take too long and be too complicated. So let's switch to Xcode and let's create a new project. This will be a project with a single view app. iOS application, single view application, create and we will call it a geofencedemo01, I guess. Objective C, we don't need core data and we'll keep it here in our repository. Now this is going to have a map, so we're going to want to make sure we add our map view library. Map kit. Implements the map view, go ahead and add that. And then jump over to our storyboard where we'll create our application. All right, let's see, so our biggest piece is that we want our map view. So let's go ahead and drop that on here and make it fill up most of the screen for the time being. We'll do constraints at the end. And I'm going to put a toolbar at the bottom. Drop that at the bottom, great. And I'm going to put a bar button item, so bar button. There we go. Bar button item which is going to contain a view. So let's see if we can add that there. And let's see Our view in there, just a generic UI view. because this is going to contain our switch. Not a view controller just a view, okay. And we'll see if we can add that here. That's what I wanted in the first place okay. Within that I'm going to add a switch, great. Adding it on the UI and then making sure it shows up over here correctly, great. And then next to that I'm going to have a label, drop that label in next to the button, to the switch rather. And I'm watching over here on the left to make sure that it's showing up at the level that I want it to show up at. One of these items is going to be a button, the other one I don't want, so I'm going to go ahead and delete the one I added initially. And then we're going to add two labels, one label is going to contain the information. So I want it, is it in the toolbar? Good. One's going to have the information about whether we're inside or outside, so responding to this button, and the other one is going to have alerts. I'm going to Option-drag that over and get another one. Okay, I like that so far. So let's go ahead and clean it up a little bit. We'll make this say Activate since that's what we want the switch to do. So we're going to change the size a little bit, maybe move that over. I'm just rough placing things for the time being. All right, let's add a flexible space after the UI View and before that button. Okay, my labels don't seem to have. Let's see, my labels don't seem to be on the same level as those items, hm. Okay so what we going to do is we're going to replace those items with labels. I'll say tool bar, bar button items is what I'm looking for. Bar buttons items and we're going to add those as labels instead and we just won't use them as buttons. Yeah actually, I don't think that. What I'm going to do is I'm going to add, A bar button item. Okay let's get rid of these labels. I'm going to do the same thing that I did with the switch with the labels. Get rid of those, I'm getting overwhelmed here by all that pieces, okay good. It's at a bar button item again. There. Okay, let's get another UI view. All right, and I want that at the end. Great. All right, there we go. Now, let's get a flexible space in there. And, not very convincing. And then we actually want to duplicate that again, so if we can create another one. All right, let's get rid of the flexible spaces because those aren't working for me right now, put them in in a second after we get everything laid out. Option-drag that over here, good and then let's add our labels into those bar button items. There, great. And one there. All right. That was more work than I expected. All right. So, this one is going to eventually have enter exit. So just put time being we'll just put event in there so we know that that's going to have event. And then this one is going to say inside or outside. So we'll make that say inside for the time being. And now we're going to add some spacers in there now that we have everything where they need to be. In a second. I'm going to reduce the size of this. So that's the length of our width. Okay, so let's see if we can add a constraint so that this remains in the center of its label. So we'll start with outside label, and let's make its width minimal. And let's make it so that it's centered in its box, there we go. And then we'll make it the text is aligned center, and then we want to center it within its container. Bam, bam, okay. And option command equal to see if it laid out okay. Like it, all right. And then here do the same thing with event, I'm going to select event. Here we go, I'm going to make sure that it's text aligned center. And I want to get it, the constraint so that it's going to be aligned horizontally in the center, add those two constraints, Option+Cmd equals that. And then I'm going to shrink the container that it's in. Option event equal. Select event option command equal. Great, all right, and then let's slide this. Let's redo that whatever I did, and now let's move this, let's align that to the right side so that it has, come on. All right, let's add some spaces in there to see if the spaces will take care of it for us. Space in there, great, and space in there, great. Now what I want to do is I want to keep item and outside together because those are kind of clustered. You hit the item button and get the response on outside and then event is going to come from call back so they are not going to be initiated. Okay, so I like that's all laid out, all we need to do now is add the constraints on top of that. So let's start with our tool bar how's our tool bar doing? Kick that all the way down to the bottom. All right and our toolbar, we want to anchor that at the bottom. So we'll give it left, right and bottom. Anchor that. And then our map view, we want that to actually be left, right, bottom and top. Anchor that. That's Option+Cmd equal the map view. Make sure that's okay. And select toolbar, Option+Cmd equal that, make sure that's okay. Great, now our activate bar button item here, we actually want that. That's going to be managed by the toolbar so, I think everything there is okay. But within this particular view, we need to specify how we want activate aligned and I want that to be on the left side, to be the standard space. That's fine. And I also want it to be centered in its container vertically. So that's fine. And then I'm going to Option+Cmd equal that. Looks good but my switch didn't Let's get that switch in place too. Here, select the switch. Okay. Let's see. Option, okay. Now the switch, I'm selecting the switch. And I want to put that so that it has got a standard on the right. Hit OK and I also want the switch to be centered in the container. Right, and I didn't put any specification between those two yet so I need to do that. But let me Option+Cmd equal for the time being. Good, and then I want there to be a standard distance between these two guys. So let's see if we can do that. I'm going to control drag from switch to activate. And I'm going to say that I want Horizontal spacing. And then I'm going to come over here and I'm going to adjust that spacing to use standard value. Hit enter, and then Option+Cmd equal while I've got the activate selected. Option+Cmd equal the switch, Option+Cmd equal. And it looks like I need to get a little bit more space in my bar button item. So let me see if I can select that view and, it's not letting me, how can I get that a little bit bigger. Let's see. Well let's give it a simulated run. And let's see how it lines up. Slide it over to our other space. Okay and it looks like it is overwriting. So let's look back and see if we can fix that now let's see. All right so this particular item might activate, let's see it here, activate leading let's go ahead and change that from being standard to being zero. And let's make this switch trailing be equal to zero distance from the right as well. And let's select this switch and Option+Cmd equal, select activate, and Option+Cmd equal. Good, that gave it more space. And now let's see if we can make the width a little bit smaller. The activate, activate width a little smaller, great. And now we can say that we want the distance between switch leading and switch trailing. We're still using a constant distance for that. Let's run it and see how that comes out. It's going to be good enough for this demo. What I don't like about it, is I don't like the way the switch looks like it's associated with the item instead of being associated with activate. So, that's right here, that's because the distance is standard. If we made that zero, perhaps that would work better. And maybe if we select Activate so that rather than being center aligned, it's right aligned. Sorry, little bit of details perhaps not necessary for this case study, but one of those obsessive compulsive things. All right, it's not great, it should be way over on the left but I'm going to stop with that. Okay, so that's building the UI. Next thing that we're going to do is we're going to set up the info.plist permissions. That's within the manifest, and then we're going to set up the request for permissions within the code. Thanks. [MUSIC]
