The Unity GPS Course | Track User Locations, Build A POI App | Diego Herrera | Skillshare

The Unity GPS Course | Track User Locations, Build A POI App

Diego Herrera, Unity & Augmented Reality Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (4h 1m)
    • 1. INTRO GPS FinalDone

      2:22
    • 2. Introduction

      2:56
    • 3. We look at installing the required software to create our application (Unity 3D)

      5:07
    • 4. Augmented Reality Camera Setup

      9:11
    • 5. Introducing GPS & Location Services

      10:27
    • 6. Creating A Visual GUI Placeholder

      15:47
    • 7. Preparing The Project For Export

      4:39
    • 8. IOS Installation

      6:19
    • 9. Android Installation

      5:57
    • 10. Creating A Google Cloud Live Account

      9:54
    • 11. Setting Up the App Layout And Scrolling Menu Buttons

      16:41
    • 12. Creating A Scene Controller

      13:34
    • 13. Adding The GPS Code

      11:14
    • 14. Learn How To Load Data From A Website URL From Inside Unity

      18:31
    • 15. Refactoring Code To Improve Functionality

      3:56
    • 16. Processing The JSON Code From A URL

      11:23
    • 17. Populating A Virtual Object With Json Data

      16:01
    • 18. Using The Real Names On Our Prefabs

      3:30
    • 19. Calculating Distance Using GPS

      14:27
    • 20. Dynamic Button Listeners

      16:10
    • 21. Sorting Results By Nearest First Part 1

      19:05
    • 22. Sorting Results By Nearest First Part 2

      9:56
    • 23. EndOfCourse

      14:06

About This Class

The Unity GPS course gives you step by step instructions in a hands on manner, you'll not only learn the how to use gps inside Android and IOS applications but the why along the way.

Do you want to build location based apps? 

Do you want to learn how to load information from the Google places API and process the Json code successfully inside Unity?

Then this is the right course for you!

You will learn exactly how to :

  • Enable GPS services on both Android & IOS devices

  • Create a functioning app which connects to Google and loads nearby places of interest

  • Knowledge of how to pull from a www address via Unity

  • Knowledge on how to load JSON data into Unity

  • Top Skill : Run an algorithm to determine the nearest location considering the curvature of the earth

All assets are included to create a fully functional nearest first location based application.

This valuable skill set is everything to need to create fantastic real world applications in the future.  Add GPS location services to your portfolio and knowledge bank today.

Note : There is an part of the course where we use a credit card to validate a google account.  This is optional, I continue the course with demo data for students who do not have one or it's not possible, so don't worry, just continue in the videos :)

This course is perfect for beginners through to more advanced students, simply follow along with my instructional videos and you'll have the tools to create smarter, faster gps enabled applications.

Please check out the preview videos to learn just how much you'll learn on this course :)

Transcripts

1. INTRO GPS FinalDone: - Hello and welcome. My name's Diego, and I'm the instructor for this course. I've got over 16 years experience in both Web on mobile projects. I've currently got over 22,000 students. Why should you choose me as your instructor while I try to teach you the Why not just how we do things by providing you it step by step instructions throughout the course. After the initial installation process, we jump straight into the code on. I'll show you exactly how to enable location services for both Android and IOS devices. We then move on and jump straight across to Google places where together will open an account, create a project and get your license key ready for installation inside unity. As the course progresses together, we build being my place finder application, a dynamic application that loads website addresses, pulls Jason code down on, then sorts the data by nearest first using the popular programming language C sharp. By the end of this course, you'll have a fully functional application that works on any right anywhere in the world for both Android and IOS. So what are you waiting for? Guys, sign up today and join my community of students 2. Introduction: Okay, guy. So welcome to my new A mini course on how to use GPS services on a mobile device for both Android and IOS. Now, lots of people struggle with this on right now. We're at the end of September in 2018. So even if you've been looking at YouTube, tutorials have things like that with the new IOS that's come out. I was 12 on the newest latest versions of Android. Things aren't always up to date, so people are struggling with this. Which is exactly why I wanted to put together this little mini course on de mystify exactly how everything works. Now we're going to need a couple of things. The 1st 1 is, of course, unity. Unity three D is a game engine that's free to download. If you're unfamiliar with what is, aren't you going to need either and android or an IOS device? So anything from an eyeful for S iPhone five or six will be suitable on anything that running marshmallow, which is android six are outwards, should have enough kind of brains inside it to actually get the results that you're looking for. Now what we're going to do is we're going to quickly have a look at unity just in case you guys don't already have that. And then we're going to jump into the software. Andi, get ready for our first little project. Now, the way that I've structured this is to do it in stages, keeping everything as simple as possible. So sometimes we'll jump onto the Unity document documentation website on Grab a Hold off that recommended cold. But I will always explain exactly why we're doing what we're doing on what everything does . So you guys can follow along comfortably on understand exactly what's happening now. Once we've got the actual location services working, what I'm going to do is quickly build its mind if isis and encourage you guys to do the same on, we'll do a quick mini GPS riel World field tests. I want to go outside on DSI if your device can pick up the GPS location of where you are on . If you are on IOS is a few extra steps that we need to do as that permissions or the P list Permissions List properties is a little bit tricky, so sometimes people miss things in the build settings, but don't worry will cover everything. Okay, now, once that's done, I'm going to then take it a little bit of a step further on. I'm going to demonstrate how I've personally used GPS services for an up in the real world . So without further ado, I'll see you in the next video and let's get started. 3. We look at installing the required software to create our application (Unity 3D): Okay, guys, welcome back. So it's time to jump straight in now. Now the first thing I want to do is ensure that you have the correct software on my personal preference is to use the unity three D gaming engine to develop applications on games on. This is because it's multi platform I can build once inside the software on. Then I can deploy to various devices. So it doesn't really matter if my client or myself has an android device on IOS device. A couple of changes here and there on. We don't have to rebuild the entire thing all over again, which is fantastic. So first thing that I want to do is simply grub myself. I rolled myself in the corner. There we go, Aunt, he we are looking at Google. So if you just go across to the unity three d dot com website, here we go. This is as ascetics. The end of September 9 2018 on the page may change every now and again. The image will definitely change, but this is the unity three D website now on the left. Inside here there's a blue button that say's get unity on the top right hand corner. We have this little icon here that is for creating an account which we will need. But if you don't have unity, I want you to do this. When you're actually installing software on If you do have unity, then you've no doubt already got one. So first things first. Then let's come across over here and click, Get unity. So this will take us through to the loading page. This has recently switched around. Think it's basically down to the marketing they're trying to push the plus account. But like I said, there is a free version here, which is what I'm going to be using today to basically show you how this works. Now, if you've already got unity and you just want to upgrade to the latest version scroll all the way down to the bottom on it. Here is the link to the software that you guys will need. Now I'm no actually going to upgrade my version of unity, and the reason for this at the moment is because I'm halfway through a project on. I can sometimes interfere with the cold as the libraries have bean graded on I don't want to bring my project that I'm currently working on. So just bad. Any money? Guys, if you do currently have unity, don't jump straight in a grade unless you've completed the project that you currently working on. Now, for everybody else, all the money to do is click. Try Personal on. This is totally fine to use our software until you earn over 100,000 U. S. Dollars. So once you've built your fantastic GPS application and made $100,000 then you'll need to upgrade to the different licenses. But I'm sure you'll not be too bothered at that point. Now all you have to do is click get unity, He accept the terms and I'm on a Mac today. So it's asking me to download for Mark, but this automatically switches. If you're using Windows now, I'm not going to teach you how to install software. I'm sure you guys already know how to do this, But what I will say is, if I just grab the software installer for a second, I just want to make sure one thing is included. So if I just open this up, what we're going to use as the background of our GPS. App is euphoria now. It's not of you for your course, but it's the easiest way to kind of use a background camera as view for is now integrated fully within unity itself, which is fantastic. Now, if you don't know what New four year is it? Some augmented reality software that has Bean integrated recently as a partner with unity, which is fantastic. Okay, so if I just jump down and grab my installer for a second bounce in a way, there we go. It's already running. Let's just install anyway. I know it's already ringing in the background. What I want to show you guys is about three clicks in, so want to re. Here we go. Look, we are faced with a list off different modules that can be installed. Now, I just want you to make sure that this one is ticks because that's a software that we're going to use for the backgrounds camera. Now all the rest of it is get unity and visual studio. If it's a fresh install on DE, depending on what you're installing android or IOS, take the relevant libraries on, then install the software by clicking. Continue. Okay, I So get the software installed. Get visual. Basic. If you don't already have it and make sure unity sticks, I'd recommend the documentation as well. Mine's unchecked because it's already installed on my software. My hard drive. But take whatever you guys fancy. Just bear in mind. It does get a little bit large. So only install the Facebook in the window side if you're actually wanting to use that right now, for example. Okay, guys, I'll see you in the next video. 4. Augmented Reality Camera Setup: Okay, guys, welcome back. So it's time to actually get office project money. Now, all I've done at this point is open up the unity software on. Then I logged into my account over here, if you don't already have an account like I said, when I want to do to install the software to create an account, if you haven't already done that, simply jump across to the Unity website and create yourself a unity I d. You don't have to do this, but it makes things a lot easier. You can click a little bottom that's a skip or continue. I think it is on that will open up the software until you hear is well. But when you're going through the services inside unity and you want to add things that adverts or you want to connect a cloud services or something like that, then you will need a unity I d toe associate your account with so that your software will work accordingly. Now, if you've already got unity, you'll be on the projects tab. And if you're a newbie, if you're brand new to unity, then you'll be on this learned tab. Either way, I want you to click new as we're going to be starting a brand new project. So here we go. If I just click new There we go. It'll just reload for a second. Now, what are my options? Well, let's give it a project name. So this will be my GPS. Meaning up on. I'm going to be using three D as a template on the location where I'm saving it is on my cloud account, which is with some software colt sink. If you don't already have sink, I can give you guys a link to it if you want to email me. But it's basically some free software that gives you about five gigabytes off space on the cloud on. It's really handy to save your products from the cloud. Just in case you ever have any hard drive issues on, you need to download a copy. Okay, That said, we've got everything ready. Let's click to create our project on. There we go. It's opened up. Now, if you remember, I said I wasn't going to actually upgrade my software to the latest version right now, which is why I have this little box here is going to close it on. Here is my empty app. Air into project ready to begin now, if the layout differs slightly on yours, what I want you to do is click on layout in the corner and this is the default layout that have. So if you want us to look exactly like mine, then just simply click on default up in the corner, appear and it will rejig your your project to look just like mine. Now the first thing I want you to do is write up at the top. If I scroll just up here, it's a is a game object now. Apologies. It can't see that right now on the actual cuts off the screen recording software, but where it says game object right across the top menu. What I want you to do is go down on the first thing that we're going to do is we're going to load in the augmented reality camera straight away, right out of the box. So here we are. Let's import of euphoria. Assets we go is just importing. Now. The next thing they're going to do is before the project gets larger, with additional files and additional folders and assets I want you to decide on if you want to build right now for Android or for IOS on. That's because it will have to convert the library's down in the project folder for the corresponding platform. Okay, so why don't need to do is go up and click on file right up at the top up here on click on build settings. Now, here we have the empty sample scene. That's fine. For now, I'm going to choose the West as my target platforms. So I just click IOS. There we go on, Just click switch platform down in the bottom corner. Now, this will take a little while, but not too long in hindsight. Should have really done this before I am bolted. The view Fourie assets for the camera. But like I said, the products pretty empty, so he shouldn't take too long. Okay, it that's done. So before we jump out of this, I'm going to quickly I d it the player settings down in the corner here. Okay. And I will bring up this side menu in the inspector. I'll just move myself across to the side a little bit. There we go now. What I want you to do is I'll just pull this out slightly, like so on. I just want you to give your up projects a company name. I'm just going to use what I always use, which is a are gamer on the product. Name is GPS many out, which is the name of the project. As I actually set it up, I just moved this a little bit more. There we go. Now we have a bunch of different tabs available here. It's currently opened up the other settings tab, but by all means, you can add an icon on Justin resolution as this is the tap that gives you all the options to do it. If you want it to be portrait or landscape and things like that, OK, but if you are looking at GPS in unity, you guys probably already know this thing. Only thing I want to really draw attention to is on the other settings here. Then I want you to come down and make sure that the bundle identify at much as the company name. But that's hop. So I'm going to put in a our gamer, which I'm actually going to write in lower case. There we go on the project. Name is GPS up, so that will be fine as it is. Okay. Now, as we scroll down, um, I'm going to build just for iPhone. I'm going to be building for iPod on as this is for us. I'm also having to decide on my targets STK on my minimum I West version. Now I'm going to use 11 as a target platform on. I need to use the device sdk. And that's because the Euphoria software doesn't work in the simulators. You actually tohave a physical iPhone or iPod device connected to Xcor to make this work. Now, if you're using Android, you won't have the settings. Don't worry about it. Just make sure that the bundle identify a set up correctly, and for now, that's okay. We do have to fill out the camera and location description Lee to run, but we'll do that later on. So not to worry. The reason why I'm choosing I West 11 by the way, is because it will use the A R kits off where on instead of view for his own based software and in my particular case. I don't need to do that. But the last thing is to come down on, open up this X are settings tab and I just want you to make sure that of euphoria augmented reality is actually checked. OK, call. So that's the build on the player settings. Don't enough before we actually have spot myself back for a second way. G o. It's done enough for us to actually play with this until we're ready to actually deploy now . Okay, So as we already have an A r camera, we don't need the other camera, so I'll just remove that for a second. Then I'll select my A r camera dropping it. That's up on in the inspector tag. That last the main camera. Okay, so if I just hide myself for a second that we go, then what I want to draw your attention to is the euphoria configuration down here. Let's just open that up on. You can see that it doesn't have a license key, but it should be OK if you're unfamiliar what this is. Simply click add license and sign up for a license with euphoria, which is completely free. But like I said. It's not a view for your course, so I don't really want to die aggress Too much interview for I'm just double checking that everything set up toe work correctly. Okay, now everything looks fine. Eso off course, guys, if you have any questions regarding view four year, I'm more than happy to help. But like I said, it's just that I don't want to die aggress too much and become a little bit distracted going into the ins and outs off off before your itself. Now what I want to do is press play. Now on. Let's see if the our camera actually works on the video kicks in. So there we go. Fantastic. So if I bring in the other camera now, I'm just a free you guys out here I am. I'm in the corner as well as on the screen right in front of you. So the Euphoria camera is working now. The reason I wanted to do this is so that when we build the first version of the app Weaken go outside. Andi used the video camera. Basically, it's a background to give us a sense of bearings about where we are. Then what I'm going to do next is abbots and text across the bottom down here that will basically display are longitude and latitude. Okay, fantastic. So for that, I'll see you in the next video, guys. 5. Introducing GPS & Location Services: Okay, Fantastic Guys, we are set up and ready inside Unity. We've got our a our camera, which we're going to use as a background image. It's now time to look at how we get our GPS functionality working using C sharp unity on whatever device you guys have selected. So I just grew up myself into the corner once more. There we go on Dhere. We are this trial left you off last time. Now what I forgot to do unfortunately is tell you to actually receive your file. So let's save this. But I'm not going to save it as the sample scene. I want to go inside the scene's folder and I'm going to call this main that we go now. Once you've created the scene, it should appear inside here. There we go. Main. I can now delete the sample. Sina's we don't need it on. Then the final thing would be to go to file on built settings on. Then sample CV isn't there, so I could click it Deletes. And I want to add the open scene, which is the main scene. Okay, there's no real difference between the main seen on this scene It's just simply for my own purposes that have renamed the scenes for late to run so that I know exactly what I'm talking about each time. So let's get rid. Okay? The first thing that we're going to do then I want you to go to the assets. I don't need to create a new folder. So right, click and create folder. There we go on using a capital s. I'm going to write the word scripts, as this is where we're going to store our GPS script. Whatever else we end up building as we go along on, then the first thing that I want to do is create a file a c sharp file. There we go, and I'm just going to name it. Ask GPS. Okay. So that has created our base foundation GPS scripts, which we can see over him side here. And if I double click, it will open up. Mano developed off, um, visual studio, if that's what you got. Seven store, which is actually what I've got. It stopped. Okay, here we are. So we are now in a visual studio. I'll just bring this down a little bit just to get it in the frame nicely for you guys. There we go. OK, so this is our base unity GPS script. As you know, you've probably created 100 also yourselves. Now, the whole concept of this is basically to initialize the location services on the mobile device. Now, the reason why I wanted to put this cost together initially is because this has changed slightly and now doesn't work correctly on Eiffel unless you used the documentation, the updated documentation Zarei from unities website. Now, it used to be in the past that you could create a start to co routine in start. We don't need the update for now, so it's still you. So we would start a co routine in the start method on then that would trigger off a loop which would first check if location service have bean allowed by the user on. Then if they had, then it would access the GPS information on load that in. Now. Let me show you what's kind of changed. If I just quickly switch back to the browser for a second. What I'm going to do is type in unity. GPS on this will bring up the Google results for what I've just looked for now, the kind of some of the videos that we're talking about that are now a little bit out of DEET and it doesn't work properly on the iPhone. AB still works occasionally on Android, though, So we go now. What I want to do is click on location services and here is the updated documentation, which gives you all the information on how to activate the GPS system inside a mobile device. Now, what I want to draw your attention to is just waiting to grab where it says I e numerator Um, copy all the way down to here. Now, let's copy this on, drop it into our GPS file on then at what I'm going to do is explain exactly what it is that we're doing. So let's just overwrite this Start functioning by pasting in the GPS scripts. Now, very mind if you look here Our this class is called test location services, and that's the reason that I didn't overwrite the GPS class name now instead off having the normal void start function. What is now required specifically for the IOS side to function correctly is that the start needs to actually be a night enumerated for a coral team. Then as it jumps in, what it will do is check the input permissions on. Check the specific location commissions on, see if they are enabled by the user. Now, if they're not enabled by the user, then it will break out off this loop on job back down to the bottom and continuously through. Now if they are enabled by the user, which is basically when you open the app, allow this up to use your location and press the bottom. Then we'll continue in the script and it will enable using unities input library. It will start the location service this morning. Connect to the chip on the GPS technology on the device on ping up to the satellite on within about five or 10 seconds. Return a value now. It does differ the time based on things like if you're indoors outdoors. If you're in an area of good coverage, for example, so it's a compensate for this. We then move into a wild on. It will go around if I just click the while loop all the way down to here on it will check the status on, see if it's still initializing or if it has actually found your target locations with waits for a second on, then looks back again. So there's a maximum wait time off 20 seconds, which you can alter if you want to. So we initially set the maximum wait. Time is an integer number 20 on jumps in Annex A's Okay, is busy location service status initialized. If it isn't, it waits for a second and removes one from this 20. Now, if it gets down to zero or less than one, then that means the service didn't start. The device was unable to locate the position off the user on it will print timed out, which is great in the D book, but not very good for the actual users. So we will be changing some gold slightly to give us a little bit feedback now. It also gives us a status if it's failed, and it will say that it's unable to determine the device location. However, in most cases, if you're not in an area by coverage and you are outdoors rather than indoors, are not surrounded by thick walls, for example, then it should go through on actually print out the location off the device itself. Now what it does is from the location it will get. The last data, which is over written every time the GPS dates on it, will overwrite two variables which are latitude on the longitude and then right down at the bottom to save on battery. It will stop the location services. So in this particular case, the script is used to first find where the user is on. Then stop the GPS service from running on. I don't actually want it to do that. So I'm going to comment this out and save the file. That means that this script will continuously run Aunt Update, which does kill the battery slightly, but not that much. Now. The second thing, it's like tweet, but I'm going to make is inside here the import location start. We can add two overriding promises. Now the 1st 1 is a number that we want for the desired accuracy in meters. Now it doesn't really work on less than five, but let's say I want mine to be on accurate within 10 meters off when stood. I can simply please attend there or you can put a five in if you want to be uber accurate. Now, the second perimeter is the one that dictates the battery, life, performance and things like that. And it's the update method. So you guys have to decide how often you want this this loop toe run around on update location. So I want this to update every time I move 10 meters outside. Now, the accuracy kind of works in conjunction with this between five and 500. Now, if you're using an app that simply wants to dictate how far Location A is to location be within 500 meter, then that would be classed as a low accuracy application. So, for example, if you wanted to know, the difference from London to New York 500 meters from the center of each city doesn't really matter too much. However, if you wanted to find out the distance from a local shop toe where I currently stood in the street, then I would want this to be a lot more accurate. So maybe five or even 10 meters now you can play around with this number later on. As we actually build this to the device on. See what you think is suitable for you guys. Okay, so I want you to save the file for now. Andi, in the next video, I'm going to show you how we're going to use this on. Actually pass the information through to some additional variables on a different script on display the GPS location on the screen in front of us as well. Walking around. Okay, guys, I'll see you in the next video. 6. Creating A Visual GUI Placeholder: look, everybody. So now it's time to use our script in a functional manner. Now, what I actually want to do is if it to switch back to unity for a second. Here we go. There we go. I want to on the game view here, the camera will kick in, but down at the bottom, on the left, on on the right. I want to display the longitude and latitude off my current location. Now, in this particular case, I'm going to use a singleton approach, which means that the GPS game objects when we attached the script to the game object will be carried through to any additional scenes. So we will continuously be tracking the GPS location off the user so that we can then tap into the information if we require. So what we're going to do is just quickly jump back across to the visual studio software Amano developed bend what you're using on right up at the top. What I'm going to do is I'm going to create a couple of public flows which will hold the longitude on latitude locations. So these will be public well public static folks. Actually, there we go on. What we're going to do is just have one cold longitude. There we go on. We also need want to hold the latitude now we g o on that we go. Everything should be fine Now That means that we can access thes here from another script on down the bottom. They will actually be over written here within the class every time the script updates based on the distance in meters that we walked which in my particular case, I select and 10 meters on, then to update the longitude and latitude now to access this script. What I'm going to do is I'm also going to make a public version off Thies this GPS script which we will call instance and that we can access that throughout. So we're going to make a public version off this GPS class which we will name instance, if I can spell that correctly there we go on, then I just want to create a void awake function which will happen before the start function to just check if this class already exists. If this game object already exists on, if it does, then to use the version that's there and If it doesn't then to create an inversion on that means that we will not be duplicating on wasting memory by constantly creating versions off this software. So all I want to do basically, is do a quick if statement to check if our GPS class, which is the instance in fact sorry, it needs to be a static GPS instance. There we go. I just want to check if it's equal to know on If it is equal to know, then what I want to do is say that instance equals this and that basically, say's when the script initially runs. I want you to check if this game object has being created are not on in the awake function . It will do that before anything else. Now, the first time you urinate, the instance will be no. So we will set this GPS collapse instance to become this actual script that were actually morning right now. But this will only wrong the first time, as the second time this one's on any additional scenes, Then this will already exist, so it won't need to create an additional version of itself on the last thing I'm going to do it. Just make sure that we don't destroy this on load, which is the game object that we're actually using this on. That means that this inbuilt unity function will make sure the game object that's created in the hierarchy is carried through onto the additional scenes. Okay, so save the file on just quickly jumped back Teoh Unity for a second. Now what I want to do is in the hierarchy on the left hand side, I want you to right click on, create an empty game object on. This will act as a holder for our GPs that we go look on. Then I want you to come across while the GPS is selected on in the Inspector. Just click add component. And I wanted to add the GPS script to this component. Okay, and that's pretty much all we need to do for this at the moment. Now let's switch to the scene tab up at the top on. I'm just going to switch to too deep for a second Now. What I want to do is right. Click, and then we're going to create a canvas which will act like a screen protector over the top off the device. OK, so imagine that we have the mobile device in front of us on we place a screen protector over the top. What we're going to do is right the user interface text items onto this canvas. Therefore, when the background changes with the video camera as we move around, the text will remain exactly as it is, just like there were a protective screen over the top of the glass of the mobile device. So to do this, we go, You I on go down to canvas. Okay, so if I just double click on the canvas, we can see the canvas now the shapes a little off. And that's because I haven't decided yet on my orientation of my device. So what I'm going to do is if I go to game, I can click this tab here on changing from free aspect to be an iPhone six on. Don't do it in the portrait mode, which, if you don't have this, you can simply click plus icon and add a new item to the menu. But an iPhone six is 7 67 50 in wit. Sorry. On 1334 in height So as soon as I do that look, the game view changes on acts in that dimensions so that I can see how it would look on that specific resolution. Now if I wouldn't switch back to my scene, we can see the canvas has also adjusted accordingly. So now the canvas has the shape off the iPhone six dimensions based on what I've selected on the game view. Now, the other thing that I want to just double check while the canvases selected is that I want to change this option here in the Inspector so changing from screen space, overly to be screened space camera. Okay, so what that actually does is drop in this little render camera, so it's looking for a camera to adjust with. So it's drag in the A R camera into that slot. Now, don't worry. If it shrinks down, it just means that we need to double click to zoom back into our canvas again. Okay, so what I'm going to do next, then, is I'm just going to add a little panel down at the bottom here, which will be semi transparent, so we'll still be able to see through it. but it will make things a little bit clearer when we want to actually read the text for the location services. Okay, so right click on the campus. Not like that. But like that, then we go and go down to you. I and just add a panel now initially will take over the entire screen. But we don't want it that so I just dropped these down to about there on. I'm just going to adjust the color to be black so that we can see it a little bit clearer on that Should be okay. Maybe I'll make the transparency a little bit stronger that we go. Okay, so now we've got some kind of ur user interface area torture that play with or what I want to do now is add the text boxes, which will hold the GPS coordinates for our longitude latitude. So to do that, we're going to need to tanks, boxes. Let's right. Click on add a U I text element that we go on. I'm just going to just this to make it a little bit wider and taller on. I'll change the text to say a lot on champagne. A bunch of commands. That what key? Sorry on then. I want to change the color to be white so we can see it and then just going to drag here on increase the font size slightly. That should be big enough. I'll send to the text both horizontally and vertically, and then I want to position this in the center. So if I scroll up to the top click here in this wreck transform, I can hold shift. And also at the same time, which will adjust the position on the anchor point to be the center that we go and then using the move toe up in the top left hand corner. I'm just simply going to move this up slightly. There we go on rename this to be latitude or that for short. Now, once we have that element, if I right click, I could duplicate it on then just simply bring you down slightly. There we go. What? Just being attacked by a fly? Sorry, guys alone. Leave that in the video rather than editing out as you guys might find it amusing F this is the longitude on. Then open the top. I'm just simply going to name this long for short. Okay, so now we have a text element that is for latitude and for long. Ejide. All we really need now is a script. Actually. Grab ahold of this from the GPS script on, then assigning to the relevant boxes. So let's create one final empty game object here, which I'll call my text manager. There we go on. What I want to do is come across and add a component now on the higher on the inspector. Sorry, not the hierarchy. Okay, So I'm going to create a new script which I will also call text manager. Now we go make sure new script is selected on just simply pressure return on, then created. Add on that will automatically create a script called text Manager and assign it to this game. Object now just is a little bit off a tidy up. All new scripts appear at the root off the asset folder. So I just want to click this on Draghi inside my scripts folder just a tiny of projects lightly on. Just to see how this looks, I'm going to switch to the game view on take the box that says maximize on play which will make the camera take over the full screen area on when I press play. We should have the video in the background on the dimensions should be in proportion. I look, we can read the text over the top nicely. Okay, so when this first loads thes will be hopefully it will be zero. I won't remain as they are. There will be over rhythm on. Then, when the GPS services actually become enabled, the longitude and latitude will be updated and it will dynamically overwrite this box. So the text holding area will be overridden without actual GPS longitude and latitude, which will be pretty cool. Okay, So off play mode for a second on the reason why I wrote so many numbers in is just as a visual guide. Basically, in case the numbers were too long to make sure they fit in the box. But I'm just going to quickly click on lots on reset back to zero. There we go on a lawn on change you back to zero as well. Okay. So save the project. There we go on. Now let's jump into this new script for the text manager. So just double click. There we go. Now, the job of this script is to actually interact with the text items that are on the screen. So the first thing we need to do is make sure, but the top we are using from the unity engine, the unity you I the user interface libraries. This will give us access to unique tools such as the text elements Onda such like that. So over the top, I want you to create a public text holding area. There we go for both the lots on the long variables. Okay. Okay. Now, if you remember, if we just jump back to the GPS script for a second, we made these two variables public static floats that are then over written down at the bottom as the loop occurs. Now, because their public static flows, that means the text manager will be able to access them. So we don't really need to start function for now. So I take this out, but on the update, I want to continuously update the to text variables that are on the screen. Now we're going to drag these two in from the inspector in a moment, but What I'm going to do is I'm going to use the update function, which is called once per frame. So basically, it will do a check on the GPS on update the text box every time a new frame is loaded in the software. So if the app running at 30 frames per second, then it will update this statement 30 times a second or 60 times a second, which will make it very, very accurate. Quick. Now, I don't usually play with update functions too much because they're quite heavy on the app itself on battery performance. But in this particular case, or what we're doing is over writing a text field. Such a simplistic action won't be very consuming at all. So what we want to do is get our to text items. So latte on. What I'm going to do is I'm going to set flat to equal the from the GPS script. I'm going to grab the latitude variable that we created Andi. I'm also going to get the long Onda said that to be the GPS longitude. But there's one more thing we need to do, because if you remember, these guys are floats which are basically numbers with the decimal point. Now these two here are text items. Therefore again, an error thrown here that says that can convert a float to a text item. So what we need to do at the end is to convert this to a string on. What that will do is change it to be text. So like so there we go. But what I actually want to do is get this text element which will grab a hold off this game object. But I don't want to attack its name. What I want to do is overwrite the text component that's attached. So if you don't back across, if we go after the latitude text component, then the error message will go away because what we're trying to do is get the game object the text item on. Then what we're going to do is jump into the text component inside that on overwrite it with whatever the GPS, latitude and longitude strings are currently set up. Onda, save the file on. That's it for the little test. So what I'm going to do now is pause a video on in the next video. We're going to build this out on Let's give it a quick test. Okay, guys, I'll see you in the next video. 7. Preparing The Project For Export: Okay, everybody, welcome back. So this is where we last left off. We just created the text manager on. I just want to do a little quick update here. What I'm going to do is I did set the latitude text variable to equal the string boat. I want to make it look a little bit nicer. So what I'm going to do is just put a little string before it so that we have something visual on the screen, long, not long. There we go on, and this will correspond then with the actual text element on the screen that we can see here down at the bottom. So basically, all I'm doing is when we replace this box here, I'm adding the string on, then on connecting the GPS coordinates. Speaking of which, I forgot to do something nice. What I want you to quickly do is just open up the GPS script now. I did create a couple of variables up at the top. Andi, down here, we do get the GPS. But I forgot to actually update our variables. So we need to do that now. This one here will be updated each time I moved 10 meters. These actually could do with being floats asses. Well, just to be tied it. There we go. Now, what I need to do basically is on the update on the fixed update. I want to overwrite these variables with the local variable inside here. Now, it doesn't matter too much about performance in this case because it's not doing any checks with the GPS. All its checking is if our GPS has changed and overwrite the variable. So what I'm going to do is grab this for a second on. I'm just going to pop back up top here on. We're just going to create an extra function. So what I'm going to do is used the fixed update function, So this will do the check three times every second. It shouldn't really affect the performance that much this way because unlike the normal date, it will be doing the up to 60 on by using the fixed update. It will do the check on average about three times a second in comparison to, say, the normal update statement, which will run between 30 and 60 frames per second. So it shouldn't be too intensive for the user Now, what would like to do is a little bit off defensive programming. We're only going to run this if the imports from the location services are actually enabled . Okay, so let's update the longitude. Latitude variable was latitude. There we go. And set that to be the data received from the start co routine down the bottom on. Then finally, we're going to get the longitude on. Set that to equal the long itude. There we go. OK, so quick recap we have the static variables. Then we are creating an instance which will use later on. Don't worry, guys. It's just a little bit of forward thinking. Then we've got the fixed update now, which, on the update, will check against this variable on this variable here on board only Do that if it's enabled by the user. Now these are static, which means that they are accessible fire at the text manager on its the text manager's job to update the text. Tell you what, let's change this to be a fixed update as well, just to give it that little edge on the performance. Okay, so let's actually hook a text up now if we don't back on, click on the text manager. You can see that we now have the script updated Onyx looking for to text fields. So let's just drop those in there. We go on while we're here. I'm just going to edit the canvas. I make sure that the scaler X set correctly to scale with the screen size on my reference resolution. If you remember a 7 50 by 1334 and that comes from up here, look for the iPhone six. That would just make sure that my my panel is the right size when actually built this out. Okay, I think we're ready to go, guys. So what we're going to do in next video is build it for IOS on if you're on Android User than the following video. After that, I'll show you how to do it for Android. Okay, I'll see in the next video, guys. 8. IOS Installation: Okay, then, guys, it's now time to build this out onto our IOS device. Now, before we do that, we just need to update a couple of things. Now, if you go up to the top and click on file on, open up the build settings, then what I want you to do is check that was seen. That's open up at the top is actually included on at the top of the build. Make sure I West and then click on the player settings. I just hide myself for a second that we go on, Move this to side. There we go. OK, so what we now need to do We need to check the company name on the product Name are filled in. You can pop in icon in, if you like, just to make it easy to find on your device on, then the resolution presentation. I'm only going to use mine in portrait, so I'll uncheck that, But it's a personal preference, guys. Then let's go to the other settings on. I need you to make sure that the bundle identify where is in Andi, then this is the important part. So the camera usage description is there and it say's those required for augmented reality of euphoria has filled out automatically. Now what we need to dio is we need to add for the permissions that we also need to require GPS access. So this is required for GPS tracking or something like that is just the message that the user will see when they actually first run the application. Now it has to be on the device. Sdk, not the simulator. And that's because the computer doesn't have GPS on Day of Euphoria. Doesn't work on a simulator either. In my particular case has mentioned before, I'm just building for iPhone only on dime, using IOS 11 with the architecture set to be universal. Okay, so everything is set up now. I'll just bring themselves back in and put myself back into the corner where we g o now? Yeah, we're ready to go, guy. So what? The only other thing that we need is tapped in the export this now and open it up in X code . Now, if you're completely new to developments are for IOS, you may not have X code installed. It's a Mac only piece of software on this is how x code looks If you don't have it, guys, what you only to do is jump into the app store. Andi minute. I'm not connected. But just simply search for X cold in the corner on then. Donald the software. Okay, let's hide that for a second. On you. We go. Right. So we're ready to go, guys. Now what I'm going to do is I'm going to click build on room, which will automatically export the application on open it up in X code. You can if you want, just build this out and then open it up from a local directory. But I'm quite happy to just run it off the cuff. Okay, then let's let's give it a run. So there we go. We are now building out. I'm calling mine IOS build. I'm just popular on my desktop on There we go. I already did a build earlier on just to make sure that everything was working. Right. Okay, so here we go. I'll just leave this exporting for a second, Okay? I'll just pause the video instead and come back to you guys when it's completed. Okay, guys. So that's just opened up X code automatic A with the project inside. Now, if you tried to build this, you may have an error, and that's because you need to sign it. Now, make sure you click on the first project Tab on. Click Up here on this will take you to this menu. Now, if you don't have an apple developer account, then simply pause a video on jump across to the apple Developer website by going through Google on, then just sign up for an account. Now, I'm not 100% sure if it's still possible, but you used to be able to simply register for an account for free, but only have to pay when you wanted to actually publish the application onto the APP store so it shouldn't cause you to any problems. Now, I've already gotten account, so I just need to simply connect it. There we go. Now it will load my up with my own developer credentials. Okay, so let me just scroll down the side for a second. Onda, come to the info p list and you can see Look, this is the information that the APP requires and you can see this is where the privacy with camera on the physical GPS location information is added, so just double check that this is written in. Otherwise, the APP will fail to function as you actually wanted to. Okay, The next thing is to actually Kinect a device. So I've got my iPhone next to me here. Just our luck. It's where we dio I landing the drop down, out. Use my iPhone. There we go on. In theory, Gary's that moment of truth. Let's build and run the up. So here we go. I'll just wait for the app to install on my device just here on. Then I'll switch the camera to be a little bit larger so you can actually see what happens as there hasn't went installs. Okay, it's just over the top, but we can see that it's signing the product, and now it's installing it to my phone. So good news is no errors. Here we go. Look, it's now installing. I've got the unity logo on Dhere. We go. If I just hold the camera, you can see it's asking to use my GPS. So let's agree, followed by the GPS. So it must have asked for the camera the last time. Sorry, guys. Are there we go. Look on. There we are. So if you fancy stalking May, that's where I am currently based, which is just a little bit north of Barcelona just to save you. Hassle of Googling that. Okay, great. So what I'm going to do now is I'm going to jump outside on, walk around a little bit on and just double check that the GPS information is updating correctly. Okay, Cool, guys. I'll see you in the next video. 9. Android Installation: Okay, guys. So here we go again. We're just about to put this onto your android device. Now on the only thing prior to this that are actually doing is I've gone into the build settings again on I switched it from IOS to Android just to save on time on the video as the process contain a couple of minutes. Okay, So what we're going to do is we're going to edit the place settings, so I'll just move myself again. I put myself in this corner this time. There we go on, we're going to go through the player settings, and then ultimately, we're going to plug a USB connection directly to the android device on push the app across . Now, there is something that we need to do. First on that is that I need you to check. Your android device is in debugging mold. Okay, so off we go to Google for a second on. If you do a search for android enabled de booking, you'll get two links. This is a previous page that was loaded into Google on then, a little bit further down the page, you'll get an official do blink to the Google Android page. Now I have both open. So the 1st 1 here is Google's information on how to enable de booking on Android. Now, if I just open that page for a second when we go down, you just need to follow these steps by tapping a button seven times and receiving a message and then ultimately down here that we can enable us b d booking. Okay, call. Now, the reason why I opened up two tabs is because this is for the most recent version of Android and you guys might not have that. So the other link up at the top here. If I open that tab, there we go. This is how you enable debugging on different versions off the android software. So if you're using Android five or anything previous to that, which a doubt. But I wanted to cover it for you guys. Just in case. Then this would be the page that would give you the instructions on how to do that. Okay, cool. So let me just close out of thes two for a second on jump back to unity. So here we are again. We're looking at the build settings Let's go into the player settings. Now, on the right hand side on, I'm going to do the same. Going to make sure that my resolution is only for portrait on upside down. So no landscape for me on then in the other settings. Here we go. Um, Down There it is. The package name needs changing to a are gamer or whatever. You want yours to be called on. I'll just call this the GPS app again in lower case for the GPS spell that we go. Okay. Now, before he works best on Android six or greater. So I need you guys to change this to be a minimum of marshmallow. I'm going to put it up to seven. Just to be just to be safe. Um, now the rest of it could be left alone. Arm seven. It's fine. Andi, what else do I want to do? And it comes down to the bottom. Andi, tick for euphoria. There we go on. That will enable of euphoria, settings, the publishing settings. We don't need to mess around with this as we're not pushing this to the app store. Okay, We just double check. Everything is OK on the one think There it is. I want you to uncheck android TV compatibility. That doesn't really matter if you leave Android game on. Okay, that should be a guy. So if you have your device on just looking down Because this is where my mobile is just unlocking the device. There we go. So if you have your mobile set up now to be on debugging mold with USB, then all you have to do now is press build on run. Now, while this is doing this, I'll just call this on droid for a second. We go on, that's exporting. Um, I don't want to save it. Eyes asking me for my android sdk directory. Okay, I'll just navigate through for a second. Okay? So after a brief intermission off about 45 minutes, I have fixed the sdk. He turned out that it wasn't actually the sdk. That was the issue. Java had just updated on the SDK Tools folder needed to be updated as well. But anyway, now we're ready to build, so here we go. Guys, I've got my android device unlocked beside me. I'm going to overwrite the a p k. It's now looking for my device. Found it on. There we go. Look, everything is running according to plan. Nothing can go wrong now. OK, so now what is going to do is is basically package everything up just the way the ex school did on push it across to my android device. So we'll have a brief intermission for a second. Okay, guys, it's just deploying the player now. And there we go on my android device. If I just bring the camera up again, Here we go. Look, it is asking me to allow for it to take pictures and videos, so I'll allow that. Then it's asking for the GPS. If you guys can see that the light reflection, I'm finally Here we go. Shourd built up. Um, a little the camera in displaying my GPS down at the bottom. There we go. Fantastic. OK, guys. Brilliant. Well, that's the build for android. Done. Cool. So I'll see you guys in the next video 10. Creating A Google Cloud Live Account: Hi, guys. Welcome bike. So it's now a time to move on again. Now, what we're going to do this time is we're going to use our GPS coordinates we've just got from the mobile device on. Then we're going to bounce them through to an online database on query the results for local services. So, for example, we're going to use Google places a p I on. I'm going to send my coordinates and specifically what I'm looking for to recreate things like a list of bars, a list of hotels on whatever else you want. Point of interest wise. Let's get going then. I want you to go to Google, and I want you to simply search for the Google Maps. AP I okay. On the link that I want you to click on Is this one up at the top? This is to the cloud dot google dot com ford slash maps platform. Now they do give you $200 credit because in I think it was July around the 18th they changed the pricing scheme. So it's now a chargeable service. This but to $200. Sorry, it per month will give you around 5000 requests. So under a fair usage policy, that's going to be sufficient for most people, especially in the training on learning section that you're currently in. Okay, right. The first thing that you were going to find out is that you will need a Google account, so I'm already logged in a corner. But if you don't have a Google account, simply pause the video and create one okay for everybody else. Let's have a quick look at a website that now under products, you can see they've broken up the maps into three different sections Maps, routes for directions on places on. This is one that we're going to concentrate on first. Now, if you look at a price in as I mentioned earlier, you do get $200 off free usage. Now, if I'm interpreting that correctly, that works out about ah, 165 requests per day from your application. So it should be more than enough for you to complete the application in the development stage on it, not cost you a penny, which is great. Okay, now, ofcourse, the first thing you need to do is quickly get started Button. So there you go now What you have to do is create a product on. Then you have to set up billing for the cloud platform, so that will require a credit card but won't charge unless you actually breach those terms and conditions which we shouldn't do. Eso provided we look take care. You shouldn't have anything to worry about now if for whatever reason, we do go over the $200 a month limits, then expelled at three cents per request as the place is a P, I also includes nearby search results information all the basic local contact information of the venue on the atmospheric information for things like if it's a welcome and things like that Okay, enough talking for now. Let's just get going. What I want you to do is click on places and click. Continue now, This will ask you to either create a project or selective project. Now, I've already got a project, so I'm going to choose my building run from my building run TV website. Now we go onto click Next. Now you'll have to create one here. If you don't already have one, the next thing it will do is go through on actually for your billing information. Now, under this account, I've already added my billing information so the page will redirect but it then it will bounce again. It straight through to the a p I dashboard. So he would go look on the 1,000,000,000 section through it goes on Dhere We are so now. It just asked me to enable the a p I So here we go. Next, it's now enabling the A p i and generating a key for me. There we go. So here is my a P I heat. I'm just going to copy that on save the offline. Just give me one second. Okay, I've done that. So now what I want you to do is click done. Onda At the moment the ap, AKI won't have any restrictions on it. So you get a little message about the top Look, saying you should restrict the a p I. So let's go across to the credentials which you can also access from here in a p I and go to credentials. So let's jump in. Aunt, here is my a p I key on the name of my a p I on then there are some restrictions here. Now what I'm going to do is I'm going to set my AP restrictions to only be able to use the Google places a p I. There we go just to make sure that I don't accidentally use my credit and save that now it should take a few minutes to kick in. Now, the next thing that I'm going to do is show you how to restrict the number of requests per day. So if you come across to the AP eyes, okay and then come across to the places a p I for Web. Here we go. It should load in with the information on in the middle. There's this link here. Look for quotas. Now, if you click on quarters, it will load up the information on it shows you look for the widgets on for the premium services for the job script requests on. Then finally, the overall daily requests. What I've done is I've changed my limit here. The reason for that is because what I did was I worked out how much the average cost off the request. Waas. Based on the documentation from the pricing on Google on. Then I divided my $200 by that over 30 days. On average on it gave me about 165 requests per day. So that's why I've set my request today at 165 I always recommend double checking it because don't rely on my months alone, but that should covers. OK, so now we've got a Google account with the place is a P I set up. We've got our a p I key on. We've set our daily limits. Now what we're going to do from within unity is we're going to make a Web request a www request on We're going to ping the Google Cloud Server and ask it for specific information Google than we turn that information as Jason code are Jason pen away from which is basically Java script surrounded by brackets and a few back slashes for the non technical people are on the course now to give you an example of how that looks. I've got a window open here on this is a website address that we're going to be calling up at the top. Now, I've swapped out my current location with a radius of 500 untold it that I'm looking for restaurants. So if I changed that word for bars or something else, it would load different information on then at the end, I've pasted in my a P r ky. So that's what we're going to do later on would just kind of setting up a foundation. And this is the example of the Jason cold Now the problem with this is that it's multi dimensional, which for the non techies again means basically it's a list of information on then inside that list, that's kind of a sub list off information now. The problem with that is that Unity can handle Jason cold fairly well, but it's only linear. So with a multi dimensional array, we can't use the normal Jason utilities from Unity. But there's a few plug ins of things like that that we're going to use to get around this problem. But you can see the type of information that you have in the results. Here, we can see my longitude and latitude. We can see the name of the town that I'm currently in, which is handed. We can also then come down on see the names off different venues on that place I ds on their coordinates and everything else. Now that's important, because what we're going to do is we're going to load each place and story in a list. We're then going to use a fancy algorithm which considers the curvature of the Earth to work out the distance in meters or miles, depending on how you want your set up from our current location to that specific venue. Then we consort the list by the nearest first, and that's basically the functionality of the app and how it work. So we're going to be faced with a bunch of buttons, and that's the general functionality off our nearest first places up. So you be able to click on bars or restaurants or hotels within the APP it will ping through to the cloud services on then that will return this cold. Then, with a bunch of fancy algorithms inside, our unity will be able to order the list by the nearest first. Okay, fantastic. Get everything set up the way I've just done it. Maybe the page will change. I mean, Google is subject to change on the website as as frequently as day and night. So if it looks a little bit different, just have a little bit of a look around the Web site. They may have renamed eight, depending on when you're taking this course, but you should be fine. Okay, guys, I'll see you in the next video. 11. Setting Up the App Layout And Scrolling Menu Buttons: Okay, everybody, welcome back and welcome to Section two. Okay, so in this section, we're going to use what we've already learned from section one on expanding that to create our very own mini up. Okay, so why don't we need to do Is open unity up on open up. A new project on the name of the project is my place finder. Now, the only real difference from the set up is that we're going to be using a two D template as this one won't use view. Four years of background. That's why I wanted to start a new project so that we started clean on. We didn't have all the additional of euphoria assets imported into project already. He just seemed a little bit easier that way. Okay, so when you already create your project okay, so that's booted up. Now, I'm just going to switch to the inspector. There we go. On changing from free. Expect to use the same resolution as earlier, which waas a iPhone six in portrait there. Regards if you give that a little bit more room. Okay. Now there are resource is available for this video, so make sure you pause a video and download them if you haven't already. Now, I've already got my downloaded and saved on my desktop. So if I just open my finder for a second, grab the assets. The folder that you're looking for is called Pack, and I simply want you to drag that into the project folder. Now, all this is is a bullish of sprites on the script files from the previous section so that we don't have to rewrite the GPS code. Now, I've also included, if you just open up this pack folder, I've also included some high resolution images which are the big brothers off the sprites that I've been resized for use in the actual course. Now, I've also included the Photoshopped file somewhere if I can find that, did it, they're idiots. There's a photoshopped foul. So if you want to open up this on, swap the graphics out for something else or choose font or something like that and I thought that might be hand before you. If you actually want to build this out to your mobile device or you publish this eventually , then don't forget to delete the high res on the photo shopped files as you won't need that in the actual end. Final up. Okay, right. So let's get going, then dies. What we're going to do is we're going to If I just brought this up into maximize for a second here, we got a little bit more room to actually demonstrate with you guys. Top up. There we go. So this is the iPhone six work area now, but the top we're going tohave the logo off the application, which is my place finder on but I thought would look really cool is if we hard a series of bottom's going vertically down the actual screen, which we're going to put inside a scroll. Rex. It can tap and drag up and down on these bottoms will represent different degrees. So, for example, food and drink points of interest, hotels on parks and things like that. So then, in the background, the GPS script will do its job and actually find where the user is on. While that happens over two or three seconds, the user will be able to select an item from the list. When they click the button. This will take them through to an additional scene on in the background. It will ping up on asked Google for the places that are near the user related to that specific keyword. So points of interest are bars or restaurants off something like that. Google, then in the background, return all the Jason cold on that. The idea is then to use that information on, create a custom list with a button beside so that the user could then click on get directions straight to that place from where they currently are. We're also going to add in a fancy piece of code which will work out the distance from the current users position to each venue on the fly on either give them the results in meters or kilometers, depending on you guys decide. Okay, and that's basically what I wanted to give you guys, a kind of framework that you can then expand upon if you need to. Now, I thought about going a little bit more in depth on this, for example, when you click on the food, but it could then have sub categories for the different types of food. Black Pete, zero ice cream, depending on what you want. But as this is a GPS course. I didn't want to die aggress too much in the user interface side. I wanted to kind of streamline the process and just stay on track. Okay, that said, Let's get going, guys, the first thing we're going to need is a canvas over the top. So let's add a you. I come verse over the top off the entire scene that we go a switch to the scene. Double click the converse on. There we go. Okay, So as before, we're going to change the scale at to scale with the screen size and give it the reference resolution off Whatever you guys chose, and I've chosen the iPhone six to actually go with, And that's because it's kind of a middle ground mobile at the moment. Some android devices or smaller someone drug devices a larger on the same revalue west as well. If you're working on an actual five, for example, will be slightly smaller on actual X will be much taller, so you need to have a little bit of a play and decide what really suits your needs. Now, in this case, I'm not going to switch it to the camera. I'm going to leave it as an overlay just to show you that both ways work, right? First in we're going to need is to make it look a little bit pretty. Okay, so I want you to right click on D. I want you to add a U I image. Okay, We're going to use this as a background, so that will load in in the centre in theory. Oh, doing something. Importing about ground. Ok, there we go. Right. So here we go. There's the image. Now select the image. Click on the wreck, Transform on, then holding shift and old. We can set the position and pivot at the same time as a software sees a put the top here, look. So when I click, it will take over the full size off the compass. There we go. Okay. Cool. Now, inside the sprites folder here is a background image. If I select the image here on the right hand side is looking for an image. Let's just drop that in there, okay? And this is just so it doesn't look a little bit too plain. Okay, right now on the canvas, we want to rename by just clicking and clicking again on the actual image on creates a second image, which we will name title. Have you guessed it? We're going to drive the title Sprite onto that one. Now scroll down and click set. Native size on that will resize the graphic. There we go. Look now holding shifted All this time, I'm going to position at the top in the center. So shifting all to set the pivot alien and position. Okay, now I don't want it to Hi. I'm don't worry about not being able to read the text. We're going to sort that out as well. So let's just zoom in a little bit here. We g o bring this down to about here now in play mode, Let's have a quick look. Come out. Looks okay, so we just need to actually make it so it can see the text a little bit more now, a quick, easy way to do that is to come down and had a component to it as a shadow. There we go. Now, on the effect. Let's have a two on minus two. I want to press play this time it should stand out just a little bit more. There we go. OK, getting their one final thing. Then let's give it a bit of a background off the title. At one final image, this will be the titles background. I'll drop you behind the title on the High rocket. Position you in the top center as well holding, shift adult. But the width will be 7 50 on going to increase the height slightly as well. Now this is going to act as a background on the actual title itself. So what I want to do is just lower the a pass ity of the color to about. Click on this here. Let's put it about halfway. There we go on. I'm also going to change the collector. I'm going to use a color picker Onda. Choose a blue that's a little bit darker than this one, so if we start with this one on, then click underneath, then we go a little bit darker. Let's not count the A pass ity again, and that should be a little bit more eligible. Let's have a quick look and not bad. Not bad. I mean, we just have a little bit of a a little bit of a plate. Let's have a look. I mean that a little bit stronger. Maybe a little bit darker. There we go. OK, cool. Right. Front out. That's OK. The cosmetics. You guys come play with until the candles come home. I just want to get going and get things up and running for you guys, right? So the idea is we're going to have the my place flying. A local talk will have a little back button or quit bottom up at the top on then. This section here will be the area that the actual user uses the up the actual user interface section. Right? Okay, call. So on the canvas. Now, the most important part, what I want you to do is right. Click on. We're going to add you. I scroll view down at bottom. There. Okay. Now for ease. I want you to click on here again on let's initially make it full size. So shift, adult click. There we go. They don't want you to zoom in a little bit on grab the top bar on, just pull it down to its just slightly under. There we go. And it should snap just underneath the title area. Okay, so what is this? Well, basically, you've seen these around on Did you may have used and you may not have, but basically, if I just expand the scroll view, there's a view Port Onda content box. Now the content box is where the content will appear. And if I just right, click on add a couple of images in Well, she kind of how this works wrong One Sorry, it's just add a u I image inside the content. Don't bother following along. Just just watch. For now, I'm only doing this as a demonstration. I'll just duplicate. That's a little bit on And hey, we g o let's just move you down. Let's grab you a movie. You know that? How we g o you hear? I love you here. Okay, so now the content area look doesn't convert the full set of images. Now, when I press play, I've done that for reasons he can see how it works. I can click a move thes inside on. You can see that I'm restricted it really? Because off the size of the content box. So at the moment you can still see these two graphics, but they would actually be hidden if we added additional content over the top. Now, the problem comes when you don't know how many buttons you're going to need. Or if a client wants to populate the application with, say, a bunch of products you're never really going to know. Go, olive end up and eventually having in the list. So how do we get around this, right? Let me just remove these for a second on show you what we're going to do. Okay, right. We're going to add a couple of components to this now. So click on Lee the content Div on I want you to art something called a vertical layout group If I just moved myself to the side again There we go. You can see the properties down at the bottom. Now the job of a vertical layout group is very similar to say, a table on a word document it will organize in columns the content within Now, for example, if I expand the pad in and I say that I want space it at the bottom of each element that goes in sorry toe, have 10. Then when I automatically now add a couple of images again on just position you one more time. There we go. Now, if I just duplicate this, look what happens. Look, it automatically sorts out the matches to the height off. The content still doesn't get around the problem, though. When we have MAWR, he needs to automatically expand the content books on. This has been a problem for lots of people myself included in the past have use cold to count the bunch of elements on automatically increment that height and all sorts of crazy things. But after losing mostly than I needed to on the matter, I realized that or what we actually needed to do would be to art a content size fitter. Try this before the past, and it did work until I realized we had to set vertical fit two minutes size. That corrects the problem completely. Okay, so switch this to men size. Okay, there's no content. Looks of the boxes strong, hugely, right down to zero. Basically Now, what are we going to put in sight while we're going to put a bunch of bottoms in on the buttons? If I right click, go to you in at the bottom, the bottles himself or 7 50 with by 4 20 in height on. That's the size off the graphics that are included across the bottom. Here, I just put myself back into the corner. There we go. OK, cool. So to give you an example now, if I switch this bottom the initial bottom for this one, which is peel I for points of interest. There we go on. Then I duplicate this button. Andi, swap the content for safe food. I do the same again two more times on on this button. Here, we will use the hotel's there we go on. Then, on the final button, we will use the parks graphic. Now look what's happening to the content. It's automatically adjusted to the height based on the amount of content in in Inside the Inside the Dev. So it's basically match in with the vertical layout group on matching the bottoms heights, and with now you may want to adjust the just the height. Or maybe put two by two. If you wanted to do columns instead, you would use a horizontal layout group for that one or a grid even agreed layout. But I wanted to do it this way and keep the size of a little bit high. So that is very nice and big and graphical. Andi, I wanted to demonstrate how to use the scroll view correctly. So now look what happens. Look, I can scroll up and down and you can see assumes I hit parks and outdoors. Then it stops me from scrolling automatically. Now, this means that you can add as many years you want in here, and it will dynamically populate. Now we're also getting a little bit of unwanted action. Look. And you see, I can move horizontally as well. On click on the skull, Scroll few skull view. Then on the right hand side in the inspector. Look, you can uncheck horizontal. I'm also going to remove the scroll balls. Specifically, don't need the horizontal school bar. Andi, I'm also going to get rid of the vertical scroll bar, and that's because the image runs off automatically. So the user will kind of know intuitively that various additional content down below as the graphic ones off. Let's just give that a quick look or more time. I know we've got this little line of side now, but don't worry. Um, but there you go. I think that will be enough to kind of explain to you guys and demonstrating a graphical way exactly what we're going to be doing with this little mini up. OK, Cool. I'll see when the next video where we tidy things up a little bit and actually make this start to work. 12. Creating A Scene Controller: Okay, guys, welcome back to Section two. OK, so now let's jump straight in and figure this out. Let's get rid of this little margin down the ran side where the scroll Bar waas along with the one down at the bottom. Now these two were basically just margins on the view port here on its for the scroll bars when the actual component is initially added. So in the inspector, if you select the view port, you can simply change right to be zero on the bottom to be zero as well. There we go. Look. So that's nice and neat. Now it's up to you guys. If you want to change the height of these on, I actually like them a little bit smaller, but I wanted Like I said earlier on, I mentioned that I wanted to demonstrate the scroll view. I like them being about 3 70 just resize that to show you way we get like so. But it does distort the text and squash it down a little bit. So it's it's up to you guys what you want to do. Maybe I'll just put it somewhere in the middle. Now the other thing that you can do from a cosmetic point of view is if you select the content, we can add some space it on. You can add maybe 10 or 15 spacing on if you press play now, that means that we'll have a slight gap between each button on you. Be able to see the background through it. So it is completely up to you guys. I mean, have a combination. If you want. Let's ar 15 on the on space in and then on the View port. If we had 15 on the right of 15 on the left, then, well, that's not 15 to the top is. Well, there we go, then these buttons actually float with the border, which I do actually like the look off. It's just that it's now cropping off the text, which kind of messes it up for me. And then you'd have to jump into the boat, earn and resize natural width down like so to about 3 90 threw em 7 20 So it's it's completely up to you guys. Let me just have a look how that looks. In fact, I might I might keep this with the border and the original demo. Then I did for myself. I didn't have a board around it, but yeah, quite like that. I'm gonna I'm gonna do that. I'm gonna have the width at 7 20 Even though the graphic 7 50 is not extorting the text too much because we've shrunk the height down as well. Okay, now I've got the cosmetic sorted out. What I'm going to do is actually delete the other buttons because we're going to use a prefab instead. So here is the bottom. I'm just going to rename this as points of interest. There we go. And we don't need the text that appears inside that actually sees the word bottom. There. Look, you see, so we don't need that, so I'm going to get rid of that as well. Like so. OK, then. Cool. Okay, Now, this button is going to be quite easy. All is going to do is when we click it passed through a keyword on switch the scene to the list of you seen. Okay, So what we're going to need is we're going to need to create a script and attach that to an empty game. Object here and I'll just call this scene controller. There we go. And I'm going to add a new script now called seeing controller. Okay, like so there we go, create on odd on. Then I'm going to jump to the top level of the assets and drop that incite the scripts folder. So drop you into the pack on then from the part into the scripts folder just to keep things nice and neat. There we go. OK, so let's double click on open this up in visual studio or model developed depending which one you you're using on. Like I said, the job of this is basically to switch the scene. We're also going to have the function to quit the application on. We're going tohave the function to actually ping Google from here. So it's a multipurpose script on all the bottoms will have it attached to it. So here we go here is visual studio booting up So going I would doing right. So if we're messing around with a scene, the first thing we're going to need to do is make sure that we're actually using the unity engines seen management library up at the top. We don't need an update statement. So I get rid of you for a second. I will actually swapped that for public void, which will just call. Quit that we go. No, no, on application. Quit. Just quit the auto. Correct. Beat me there to jump the gun a little bit. Okay, so this will now use the application. Quit built in function for unity. And that's it. So when we do create a quit button, we're just going to call that function, and it will drop the app into the background and quit out. Okay, The 2nd 1 is obviously the one that switches the scene on passes through this variable for us to use with Google. So I'm going to create a public void which we will call change, seen like so there we go on. What this will do is it will take in a string which will just name the scene. And that means that we can use the same function. Then from when we are on the main seen on, we jump through to the list view on, then click the back butter on John back to the main. Seen we could just pass in a string off which ever seen we want to bounce around on it. Saved repetition on the cold. Okay, so this time what we need to do is use a scene. Manager Onda, we need to load. The scene will do it a synchronously Onda. We are just going to pass in the scene. Like so what that will do is it will switch Whatever see has been passed in from when the user has clicked the button. Okay, so that will handle the actual scene changing now when we call the button were actually going to call two functions. The 1st 1 is going to be the key word. What's going to call the function that passed the keyword so that Google can then send that up to the server on Then it will ask for the changing off the scene. So what we're going to call before is a public void called Ask Google Okay on or what this will do is will pass in a string, which will be the key word spell keyword. There we go on what I'm going to do about the top is under to create a public static string which will be our keyword on, then here we will set the keyword to equal What fact? I'll call this past keyword. There we go on. Then the variable will be overridden with whatever we are passing in. Now, to demonstrate this, let me to show you quickly on the bottom. Jump back to unity for a second. If I select the bottom now on the bottom here in the inspector, when he just finishes loading, there we go. It's now asking for an old click event. Well, we're going toe to We're going to drag in the scene control here on the first thing that we're going to do in this particular case is we're going to call the ask Google function, Andi. In this particular case, what we will pass through is point off interest with underscores. And that's one of the parameters that you can pass through to the mapping AP I. It's an actual keyword that we're going to use. You could have bar pub park, historical underscore buildings many, many things you can have a look at the documentation for Google maps and have a look at the place is a P I on the full list of different things that you can pass on. Then the second thing that we're going to do for drug scene controller back in again is to simply call the change seen on. Although the scene doesn't exist yet. I'm going to name this list view. OK, so now what we're going to do is we're going to just simply save the file on. Then I'm going to save the scene as the list of you seen, just as it is right now. So list on the skull view on. I'm just going to drop that inside the scene view. There we go. Okay, so now up top. You can't really see. I just bring it down. It stays. List view about the tops are now on the list of you. Now, if I go back to the scenes, I'm going to rename this one as main. Okay? Now, on the scene control. Here on start. I'm just going to debug out the key word from the top off the actual script. Okay, so when we're on the main seen here, we go for just switched to the main seen. Now, there we go. It's just switching, right? That's done. It say's mean across the top. We're just double click on the bottom. Let's have a look. Yep, so it should d broke down at the bottom in the console point of interest If that static variable is working because both scenes contain the same controller. So it's press play. It should debug nothing. There we go. Look, it says no, down in the corner. But if I click through there we go. If I add the other seen to it, then I'll actually be able to switch through. Let's cut the new seen by going to file build settings. There we go and what I want to do it just at the list view, which will then allow us to actually navigate through. So if I go to my project, I'm just drive list view in There we go. Now I press play on. We should be on the main. Seen it should say no In the bottom corner, Fuente de bugs out that string if I get rid of the errors first. Sorry for this guy's there we go. So just press play on. Here we go. It says No in the corner. Take maximize of playoff, actually, to make it a little bit easier to see the console. There we go on, then. Now, when I click on point of interest, there we go. Look, it's passed through from one scene because the variable static it will transfer through our beheld the memory so we can still access that variable from a different scene. Now we're going to do is over, right that every time that this scene actually loads so that we got the D bookings work. You know, just save this now, and I'm just going to my script for a second. Andi, delete that. Okay? I'm just to make things a little bit easier for us in testing. If we open up the list of you, I'm going to add a little back button up in the corner. So let's open up the list view. There we go. Make sure it stays like, have you up at the top here on then on the canvas. I'm just going to add another bottle in a You are a bottom. Here we go on position you into the top left. Like so, let's have a quick look. If there's a sprite we could use, um right. We'll leave it at the year, we'll leave it at the default on. Why not to make it a little bit bigger. So about adults 90 in height on about 90 in width. There we go. I'm just going to position this by I. So let's bring this down a little bit. Now we go off the edge slightly about here on. Then I'm going to go inside the button and change the text to be back Arrow like so on. Increase the font size now if you want to, you can. You can swap the bottom background to maybe much the actual much the background blue A little bit more like So I may be changed the text color off the back arrow to be white now So now we have a button. If we select the button and rename this as a bark, there we go. Oh, what we need to do is if I just zoom out slightly, I'm going to come down and I'm going to on the click event for the back button dragged the scene controller in again on call the change. Seeing that function that we go on, the scene that we're looking for is the main seen. Okay, so save that and go back to Maine that we go. So now when I press play, we are on the main scene that we go. I click through the button appears. Look up at the top on the top of the top Here it says, I'm on the list. View on now. I should be able to navigate back as well. There we go. The buttons disappeared, Which means I know, among the main seen. Okay, fantastic call. Save it on. And I'll see you in the next video where we make this a prefab and then move on to the GPS . 13. Adding The GPS Code: okay, They welcome back So straight in let's jump into the canvas on open the scroll view and let's drill down to find our point of interest button. Now what I'm going to do is just simply temporarily rename it to be called button prefab. Like so on. I went to right, click down at the bottom and create a folder for my pre fabs. There we go. And then drag this bottom prefab into their okay, when he goes, Blew up here. There we go. We can now rename that back to be point of interest. Okay, call. Fantastic. So now what we need to do is just ragout this bottom prefab a few times. So one to on three. There we go. Now, the 2nd 1 I'm going to have this as the food one. The 3rd 1 will be hotels on Final One will be for the parks. Okay, cool. Now, first things first. Let's just hook up the on click events. So the point of interest has already got it on food. When you click seen control, let's drop you in. That's just hook this up to ask Google for instead of points of interest, we kept us a food. You could also absolute bars. Or you could have support restaurants and going to use food on. Then I'm going to add a second scene control that link here to change the scene down here for the last few. And there we go. And that's why I made it a prefab initially, because although the scene controller isn't hooked up as soon as I'm dropping in with the same function name it automatically pre fills it out for the list view just to make things a little bit easier. So let's drop the scene controller in again. Assume as I hook this up to remember, Ask Google. It thinks our point of interest from a prefab, but I don't this time I want hotels cooking this in control on more Andi. Then we're going to change the scene for the list view again on then. Finally, on the park's seem control the drops in changed function for the ask you go on. This time I'm going to look for Park. Drop the scene control there in the final time. If I could do that, here we go always on the last one. Change the scene there we go to the list view. Okay, Course I'm not. Spot the graphics out, So if I go to my pack into the sprites on just up these up, so click on food, let's drop in the food image that on the hotel's bottom let's drop in on the hotels. But there, on on the park's let's drop in parks, safe the scene, press play on and basically see how it looks. China. I like the look of that guys. I think it looks really well now. Like I mentioned before hand, if you wanted to, you don't have to go straight to the list view. You could go to a secondary menu. For example, when you click on food, you could have additional set off of bottoms to filter down for the different categories or saying with points of interest. Maybe you want historical buildings, beaches, entertainment places, our tour guide offices or something like that. Maybe instead of having local hotels, you might just want accommodation on. Then you could have apartments for rent or estate agents or hotels. It's totally up to you guys. Like I said, this is more of a framework that I want to give you so it can expand on this. But really, I want to show you a cool way to use GPS. Andi. Speaking of which, let me just come out of play moored on. Let's start using the GPS. So what I want to do is create an empty game object here on that will be for the GPS. There we go. Now, all we have to do is going to the park on into the scripts. And then I want you to slate the GPS game objects and just drag this on over here on. There we go. And if you remember, the GPS script has the don't destroy on load functionality. So if I press play, it will have the GPS here. Don't destroy, unload Look on the left. Onside. And when I go through to the next scene that we go, you can see Look, that the GPS script has been carried through, so the least fee will also know exactly where I am. Okay, Cool. Now, the next thing that we're going to need is to give this a little bit of attached one now. So what I want you to do is go through to the scenes on. Just load up the list view now, temporarily? Yep. I'll save the sea. There we go. Temporarily. We've got this little button here up top. Now what I want to do is we're just going to add a couple of text items on, then use a text manager to make sure that the GPS is working correctly and passing through to the next scene on. The reason why we've got to build this out is because the computer doesn't have a GPS, a chip inside it. So let me have a quick look. Where to Put this inside the scroll view inside the content. What I'm going to do is at a U I. Panel. Initially, we're going to delete this afterwards and we go now. The panel wants to actually be 7 50 wits on about 300 in height. We go. So much new. Down is a panel. Look on, which is using this as a placeholder for a couple of text items. So this I'll just mean this as lattes duplicated. Name this lawn. Then we go Andi. Then I just need to resize this If our highlight them both holding shift, click the scale tool on just made them a little bit bigger island position and both in center shik adult that we go while the both selected increase the font size sent to the text on that should be enough are just position the latitude one slightly above on the long chewed one slightly below. Okay, don't worry about the text because it will be replaced anyway if this is actually working as it should. So down here, that's just temporarily out the tax controller. So I'll just call you text controller. There we go on, then in the PAC have included the script. So here we are. Here's a text manager. I just drank you onto their on, then drag in the lot Here. I'm the long Okay, so let's save this on. Go to build settings now. Don't worry about it not being switched across to IOS and Android early Iran. There's hardly anything inside this project now in comparison to early, where we had all the euphoria, libraries and additional environmental tools that's required. So I'm just going to simply switch the platform now, and you can see that it will happen much quicker than when we previously did. this. Okay, so that's done. Let's just hook this up exactly as we did before. So into the player settings. I just moved myself across to the side again. Change the company name to be whatever your company name is. The resolution wants to just be portray its take off my escape and then just jump down to the other settings and change the bundle i d. To be a gamer on it is called the My Place Finder. Up with a capital M as well. Why not? There we go. So just come down and make sure that we have got the location description written in. Otherwise, the GPS won't work, so it's used to find the user's location that we go. I mean, just that we'll check everything else. I'll use IOS 11 again. Why not just for my iPhone on the device? SdK. And I think we're ready to go guys, as we don't need the eggs on setting. Wait one second before we build it, though, just to make life a little bit easier, let's put myself back that we go. I want you to just click on the back bottom, go to your pre fabs folder. I don't like it in there that we go. Okay, Now save the scene and jump back to the top level on. Open up the main scene into the pre forms folder. Open a canvas and just drop with the back water up here. There we go. Now we're going to rename this bite button to say, Quit on. This time, I'm going to make the text. Actually say, Well, not say anything, but have an X inside a square on shrink the front down a little bit. Like so. Ariel doesn't really look very known Export. It will do for our for our purposes right now. In fact, I'll get rid of the box around the edge. I don't like you. There we go. OK, so tap the quick button on. We're just going to hook up the scene. Controller on call the quick function just a little bit easier for when we're actually demo ing this on. It needs to be there anyway. So why not seeing control? That never lets me do it. Okay. Down to the scene. Controller on. Quit. Okay, Right. Cool. So now let's have a quick look when we run this application that the quick bottom will work , in theory, untested. And you can't test it inside the edit to either because it's a mobile device function. Well, it works on maps as well on software. When you exported, exceeds or mark files once you've actually run, it is just that it doesn't really work in the editor. That's what I was trying to get at. Okay, so we've got these. Now we've got these little funky buttons on. We've got this quit bottom we can click on it will pass through, even though it's not working. The latitude and longitude zero at the minute. But a back button works. And the quick bottle books. Okay, cool. Let's save everything. I don't want you to go file built settings on the magic button off building run. Okay, so give it a quick test. Build out your device on. Make sure that the GPS is working out. See my next video 14. Learn How To Load Data From A Website URL From Inside Unity: Okay, guys. Well, I'm happy to report that the GPS test was successful on So far, so good. Everything's working as it should be. Now what I've prepared for you for the next section and the next video is another little goody pack. Now what I want you to do if I just go to the top level for a second, there are some resource is for this video on its called pack too. So I wanted to just navigate to pack to downloaded. If you don't have it on just simply, Dragon, drop that into the unity project. So if I go like that, there we go close this that should import to the little goody pack. Now what I've done for you is I've taken a little bit of the work, the leg work out of it for you. And I've created a prefab to be able to display the information. We still need to populate it, of course, but I wanted to give you a few icons and a few bits and bobs basically to help you along on the way. I've also included a very sort after file for handling multi dimensional Jason cold for both Android and IOS. Now the old way of doing this for multi dimension at multi dimensional arrays was to use let Jason. But that seemed to be very problematic for me. As soon as IOS 11 came out on, seniors were on I West 12 point Whatever. I've sought out an alternative. Andi given it. You guys in the goodie pack So good news. You've got something very handy for the next section. So let's have a quick look inside. What I want to do is just switch scene and I'm going to switch to the list view for a second and then come back over and have a look inside pack, too. Now you can see impact to their a bunch of icons. This is for the food and drink category. This is a button for when you click. It will link to Google to give directions to the user. This is for the hotels category, points of interest on, In my particular case, the parks the dot nets cold is here 200 or the Jason on what I've done for you is like a said. I've created a bunch of pre fabs now. I was originally just going to do one boat? Um, I thought I'd be more flexible for you guys if you had independent pre fabs that were loaded in depending on Category two selected on that way, If you wanted to expand a panel or add more information on a particular category, they you would have that flexibility. Okay, so let's do a little bit of a tidy appear. We no longer need the point of interest or the panel or the text controller, so I'll delete those for now. There we go. Thou gone. Andi, replace this content with in a hypothetical situation. We're going to load in the park prefab initially. So it's just a rag that into the content and you can have a quick look. Now, before we do anything, let's just duplicated a bunch of times by holding command on D or control. Indian windows are right click on duplicate, so just duplicate this a bunch of times. There we go. Now, if I go to my game view, make sure maximize on place selected when I hit play, you can see what I've put together. Okay, so here we are now, looking at the least view now, hypothetically you would have the different park names listed here, Andi. The algorithm would work out the distance from where we currently are using our GPS on this amount or alter. Then this is a little button on when you click on it will go to the corresponding place based on the GPS coordinates. Now I'll just come out of this for a second on give you a little bit of, ah, demo and mixing much the pre fabs so they can see what what my concept idea is. I dropped food. One end. I dropped hotel one in, maybe duplicate the food won a couple of times on dropped the original prefab in popular top. Now regards for points of interest on duplicate you a little bit. Okay, so he can see the different pre fabs that I put together now. Obviously, in theory, wouldn't see all these at once. You would, from the initial page click on a specific category, for example, parks on. Then it would load in just the parks with the park icon, the park name the distance on the map. But the reason why I gave you for different pre fabs is because, for example, on the hotel. Maybe you'd want to add the number of stars at the hotel has or the street name or something like that. So I wanted to give you the flexibility. And as the course is based on the functionality of GPS rather than cosmetics of the off the graphic user interface, I thought I'd give you a base framework prefab and give you the flexibility to change that to your heart's content. But you can see that the list is working very nicely. Okay, so if I come out of this for a second and delete all but one Mike so it's have a bit of a closer look at this in the scene view. So what I've really done that is I created a list prefab, which is actually a panel inside the panel. I added a bunch of user interface items, so I, right clicked, went down to the U I and other various different items. The 1st 1 Wasson image. Andi, I simply swapped the image script out for the pin, which is part of the assets part where I've provided on. Then we've got a couple of text items now the title and distance works like the different. What I did was I call a picked the blue from the background over the top to keep it looking nice. Andi put the front toe about 43 immediate bold, but the title is slightly different because I pre you've gotta appreciate that. Some places are named with longer names and others, so it looks a little bit high while a little bit tall. Look, this seems to be some space in here, but there's a reason for that. The difference in the two is that on the title I clicked best fit on the right hand side over here. Now what that will do is it will automatically increase and decrease the size of the text based on the amount of text that's inside. So if I copy and paste this a few times, watch what happens to the text that we go Look, it starts to shrink. Now I consider the fact that we shouldn't really have a title with more than two lines, so I use that as my base on. Then I resize the minimum size down to 28 which is what you're seeing now as anything smaller when you zoom down is going to be a little bit illegible. So that's how I engaged the height and the width off the title box on by keeping attacks just in normal rather than the weight of the text meaning bold, such as the distance it gives us just that little bit of extra room. Okay, so I just delete the rest on Leave it like that on. Then the final thing that I added waas a button where I just basically swapped out the graphic for something that I thought would be recognizable as a mark with a point of interest on it On then, inside the button, we have the visit text, which is just positioned off center down the bottom rather than being over the top. And that's kind of how I put prefab together. Like I said, I was going to just leave it at that. Andi, using the cold depending on what we search for, just simply swapped the icon as that's what would really need to do. But in hindsight, thinking about it. If I use different pre fabs for different categories like this, for example, then maybe the food one could be a little bit taller. Um, if I go in and increase the height to say to 20 like so on, then we could had have 1/3 column for the address of the venue. So you've got that flexibility to mix and match between them on because their independent pre fabs, then whatever changes you make to one of them will not apply to the other categories. Okay, Anyway, die aggressing for a second. So called, We've got a few pre fabs. Let's have a look at how we can actually load some cold now from a website. Now to do this, what we're going to do is we're going to use unities www request. And if you just open up Google for a second, Andi, just open a new tab. Rather, there would go so far, typing unity W two b w It will bring up the documentation page on from here. Look, you can see that there are various different sub categories under this command. This is how we're going to request information from U R l on its what you need to do. If, for example, you wanted to connect a web server, Andi log in to retrieve the user's information and then load that into the app dynamically , which is a very sort after a skill set that lots of my students have asked me. For now, the only real difference in this one on this one is this base request will act almost like a hyperlink on a website where when you click it, it just goes to a website unloaded on the screen. The difference is that Unity can then download that information on. We can read it inside unity. So if it's plain, text the next nice and use it now. If, for example, you want to to send authorization using a password or even something a little bit more complex, like uploading an audio file or sending an image as an attachment in an email that he would you need to use the form or even the bindings anyway, or what we need to do is have a look at the A p I for the beauty beauty you request. Now it does accept both http on Haiti T. P s the secure connection. The only difference between Android on and on and IOS is that if you wanted to use FTP as a connection, then you're gonna run into a few problems with the annual West Side. Anyway, this is how it looks. What we're going to do is basically create a string that will act as the U. R l on then using an i e numerator so we can call this in a co routine or we can use the demo code of the start. We were just calling, saying that we're going to use a library for the www system from Units it on. We're going to pass in the U. R l What that will do it automatically fire across to this link. Whatever it is, it will then yield on return, which basically means wait until you get a response back from that website. When it does, then the remaining cold will run until we get to the end. So in our particular case, we're going to connect up, unload the Jason code, wait until it comes back when it's come back. Then we just simply going to write it out into the console for now. So the part that we want really is going to steal all steel all this section just temporarily just for speed on then we're going to jump back across to unity. Now, inside the assets, that element inside the pack inside the scripts, we we already have a scene controller. So let's have a quick look at the scene control because we've got the ask Google function here. Now, what this is going to do is when we connect from the home page through to the least view, what it does is it will just simply set the keyword to be the past keyword. I'm going to take that one step further now on going to get it to start a co routine which we haven't created yet. But we're going to call one called Make U R l request. There we go. Now all we need to do is absolute create dysfunction. Now it will be a choral team, so we cannot use the cold. Then there we go. We can use the code that we've just kind of stolen from unity. Now what I want to do is change the words start for make you are l request. Like so on. Then we're going to change this from being public to just being a bass string and place it inside the I knew Marie to request. Okay, Now, in the demo, what this is supposed to be connected to is an object that has a material on. Then it would load this J peg and apply the texture off the information returned to that material. Now, when we don't need to do that, because we we just want to write the code out. So what? I'm going to do a simply debug log out the w w text that comes back from our web request. Now, I've set up a little bit of demo data for you guys so that we don't have to be using our credit with the Google cloud accounts. What I did was I used my or GPS. Andi. I did a quick search on the A P. I unloaded in the local parks off, which I think about three within 500 meters of where I am right now. Got one to the left or want to the right. And then there's kind of a duplicate piece of data that I think somebody did while they were on holiday or something. But anyway, what I need to do then is I want to show you where I put it. Now on my own personal website, which is building run TV, some of you may be familiar with this already. It's where I run my own little, many videos on lots of side projects on student requests and things which covers things like View four Year and Endless Runners on and How to Create Box or characters and things like that. So I'll let you have a look at this if you want in your own time. But what I've done is if we forward slash from the address on, do you go after a directory called GPS course forward slash again on, then go after the parks. Jason dot Jason. Okay, on what this will do is it will load the Jason cold, Hopefully for spelt it correctly, it would load the Jason code that I retrieved earlier. Oh, I four afford it. And that's because I forgot to put a Capital J in the second word. Here we go. There we go. So this is the Jason code that I retrieved earlier using my own Google Cloud accounts or just as a demo, we're going to pull Vicks u R l up of the top somewhere to copy that on. You can see that we've got the results sounding. We've got a bunch of sub elements as in as a multi dimensional array. Inside the results tab on giving the geometry and the name of the venue of things like that . So this is what I'm expecting to see exactly, as is inside the debug console if the girl request actually works. So copy this over the top on. Let's just jump back to unity, not unity. Sorry, Visual studio Onda. Let's swap out this u R L for my own parks, Jason, code on then when the server response we should have the output of the text written out onto Debo console and it's that simple to pull you are out. That is, of course, providing the actual it works. So save it on. Let's have a look at Google. I'm going to at Google. Sorry up Unity. I'm going to make sure that maximize on play is actually off. So there we go on my scene Controller is set, so if I just go to the correct seen, that would help. But to the main scene where the buttons are, you can see. Look, when I click the button, if we switch to the scene, go to the parks point of interest. Doesn't really matter. You can see. Look, that we're asking Google here the command is being called. So we've already got the cold ready and set up for this to actually work. Let's just hope it does work. First time, which will be great. Okay, So before we do the next step and actually test this, just one more thing. Now, this is working off a co routine from the ask Google function. Now it will immediately switch the scene before the coating can complete on retrieve the data back so it won't actually debug the console information out. So what I'm going to do temporarily is just remove this function. Now what we will be doing is will be setting the results off this in another static variable so that they following following scene, can load that data rent with ease on will just simply keep over right in the variable. Now what I'm expecting toe happen then now is rather than it jumping through to the next scene, it will simply list out in the console down here the information from the Jason Code If everything runs according to plan. Okay. So it should set points of interest and call the U. R L. That's click on parks. Andi. It would help if I clicked on the button and just remove the function, which is points of interest. Let's click on points of interest, not parks. Are you working? There we go. Fantastic. Okay. So the hate Timur look, Haswell, the HTML attributes that Jason Cole has been successfully retreat from this server on. Then we're going to actually process this Jason cold and try to dynamically load in pre fabs based on the correct information on the category that the user has actually selected. Okay, great. So far, so good. Guys. I'll see you in the next video. 15. Refactoring Code To Improve Functionality: Okay, guys, welcome back. Now, this video is a little bit different because what I've actually done is I've jumped back through in the course slightly to re factor this cold a little bit to make you a little bit better. Re factor basically means rejig or move around. If you are familiar with the term. Now what we've just done. If I just open up the scene control for a second Here we go. We are setting the Ask Google Command on click of the button on were over writing the keyword and calling the request. Then what the existing video would have told you to do would be to create another variable on pass this text element, this string through to the following script. But there's a better way of doing things. So what we're going to do is inside unity. Let's just create inside the Scripts folder, which is inside Park. I'm just going to create a new C sharp script, which we would have done anyway for the list view. Okay, now let's open up. Lis mon Fact, let's switch scenes first. Here we go, switch scenes to the list view on, then let's just out a game object here for the list view so that we can actually have the script on the scene. So let's add a component on. I want the list view script. Now, the job of the list you would be to process the Jason cold and then load in the correct pre fabs based on what you've actually chosen from the category menu. But what I want to do is I actually want to take the cold that we've got on the scene controller on move it to the list view because it works a little bit better. There is a bit cleaner. So if you open up so you have the scene controller on, the less you in scene, what I want you to do is simply cut out. This starts colt in cold on, then on the list view inside the start. We're just going to do a little check. Basically, if on the scene controller the the variable for the key word is not equal to no meaning, it's not empty. Then what I want you to do is start the Corentin request, which means we'll have to lift the cooler team from here. Save the file on pasty onto the list view, so I'll just paste that underneath the void for now. Okay, so now what's goingto happen then is the scene control. If I jump back in unity, re enable the button I jumped through to the main scene we got was just wait for it to update that we go on on the main seen now. Yes, I could save it. I'm going to re enable this bottom to choose from my change seen on Go through to the list view. Okay, now, just a test. This is working well. It will debug the text if it's actually working. So here we go on unity for switch to the console. Let's just press play here on now. In theory, we compress any of the bottoms eso This time I will press parks and outdoor. It should jump through to the list view on because the keyword will not be No, it should ping through start the core routine on detection appear. Okay through we go on, there we go look fantastic. So it's a lot cleaner this way. I feel it's in the right place, Basically. Okay. So, like I said, this is just a mini update video that I've jumped back and intersected. So what I'll do is a positive video now, and I will continue with the course just as before. 16. Processing The JSON Code From A URL: Okay, guys, welcome back. So it's time to move on now and actually use the data that we've retrieved on, then proper pass it and process it inside the C sharp cold. So this is where you guys are going to learn how to actually process and store the information from a multi dimensional Jason array. Now, to do this, what we're going to do is on the list view. I want you to up at the top here that make sure that we're using a new library. Now, the library that we're using is actually called Newton Soft on. Then we're going after the Jason Library specifically on. This will have a bunch of functions inside it that will be able to actually loop through a Jason Array, a multi dimensional array on then populated story in a list inside our specific class. Now every Jason file is slightly different. Andi, I find that the easiest way to do this, especially when using the third party such as Google for the A P I, is to use an online resource. Now, if you have a quick look inside unity inside the project for pack too. No, no. The original PAC. Sorry, there's a folder called Cold. Now What I've done is I've actually given you guys a sample code that I uploaded to the server. So here's the parks cold, and here's a point of interest cold on the one that I de mode in the previous videos was from the park's Jason. Now what we need to do, basically, is open this up, so I'm just going to open it up on copy and copy. Not copy and paste. Copy everything from it on. Then close the file. Now Go to Google Law when I'd be able to use on what I want you to search for is Jason to c sharp dot com on This is a fantastic website that does exactly what it says on the tin. Basically, if we paste our Jason cold in here, what this website will do is it will look through and loop through all the sub elements on creates a C sharp class for which we can store all that information without missing any fields or anything else. Now, whether we use all that information is irrelevant. What we need to do is be able to actually access the actual buttes that we do want to use soap A. Extend that the cold from here. Or you can jump up to the building run website again on grab it from from the website. There, through the GPS course link, I'm 16 that just simply click. Generate on what it has given us a c shop class. We have all the different sub elements inside the Jason code on the most important one is down at the bottom, which is the result here, as this holds the information such a place name, Andi icon and the idea and things like that. You see, and that's that's the information that we're going to try and access along with inside these HTML attributes the GPS co ordinates so that we can do the comparison from our current location through to the online. Uh, resource is location. Okay, cool. So click copy down at the bottom on. Then what I want you to do is just simply grab ahold of this cold here on. We're going to paste at the bottom off the list of you after the class I wanted to paste in the class that's generated. Now what this will do is, it will look through and create their route Object which uses a list off results. The list of results is above here. On that, in turn, has sub classes that it calls above. So this is all we really need to actually put together our little function on. Then what we're going to do is after we've grabbed a hold off the Jason cold and we've got a text I want to make a function called create list on. We're going to pass in the Jason cold through to this function. Okay, so we need to pass in the w w text item. Okay. And now, down on the bottom, we're just going to create a public void, which is called create List on this will expect this string to come in which we will call Jason strength. Okay, brilliance. And then because we've got that class down at the bottom with the root object on the results. Now, what we need to do is create a new route. Object. Okay, So, route object, which we're going to call the places and that equals a new route. Objects. Okay, Now what we're going to do is go into Newton soft on through the Jason cold. We're going to do a command called Jason. Convert on. This is part off the Newton Soft library. Now, inside that class, there's an object called or functions. Are it called Populate? Object on. This is where all the magic happens and you can see. Look, it's looking for a value on a target where the value is our Jason text. The target is the new route objects that we've just created from the class down at the bottom. That's a object. Look, I just dealt out again and make it easier. So who is the value while the value is the Jason string on? What's the object target? Well, that is the my places. Okay, now, that should handle it. That should convert the information from the Google AP I, Jason cold on a story dynamically inside a class on. Then we've created an object to access all our information. Okay, so let me just show Hang on one second. I've got a little era there we go. Got Teoh the brackets. So let me show you exactly how this works then. Now, obviously, we've got numerous places, so we will eventually be doing a falling to look through all the items. But just for now, just to check this is works. I want to make sure that the data has been stored correctly in the main class, the route object and then all the sub classes within. So let me show you how to do this. If I just jumped to unity for a second, you can see here the parks Jason called is selected. Now, if we have a look, we've got the results. We've got the geometry and then inside the geometry, we have the location. And inside that we then have, like, stewed longitude on if we go down a bit, we've got things like photo references. Place I ds vicinity, which is the address on things like the name of the business, for example. So we can really pick and shoes and decide what we want to actually get ahold off. So let's see if we can debug out from this item. I'm going to try and get the name of the item, which is the park Francesc on. I'm also going to get the vicinity. I'll get the address on may be the latitude and longitude, so This is the first item in the list. Now, to get a hold of that, what we have to do is go through the police is object. So let's just de book out. So if I put a full stop instead, it would work better. There we go. Now what am I actually going to d book? Well, I'm going into my places. Object then. From that. What do I want to go after a while? I want to go after the results variable here, which is actually a list of items. So there's results now from this because look, it's a list. The list will start zero and go. 123456 onwards, depending on how many results are returned. So to get a hold of the 1st 1 what I want is to go after zero that will give me the first item in the list. Now, if we look here, results is its own class. And inside that imagine a table off results on each one of these is the column header across the top. Well, then the content will be populated down based on rules. So if I want to go after the first result I'm in the table on, then if I want to go after the first item, then I could just go after geometry or the rating on the vicinity. So for this one, let's get a hold off. If we just press dot again, you can see that we can go inside the list on Choose which column we want to retrieve. Well, let's get ahold of the name for the 1st 1 Okay, that I'm going to copy and paste is a few times, and we're going to get different information instead of getting a hold of the name. This time, I'm going to get a hold off. Let's have a look. Vicinities. Is that what it's called? Let's have a look. Yep, Vicinity. Okay, so let's go down the list to the vicinity, and this should give me the address. Now, what I want to do is get the lot of longitude and latitude. So let's get that lucky to first. Now that is inside the geometry of here. Look on, then we have location on. Then let's do longitude or the Children off location. So here we go. We're going into geometry that we go on then into the Children, which is location which also has two Children. One of them is latitude on. Then the other one. It is O l N g Longitude. There we go. So in theory, now, for this first item, when I hit the button, it should ping up to the server. Grab the Jason data Redback, use the fancy code library toe actually looked through all the elements on their Children on, then dynamically populate the route object masterclass on all sub classes beneath it. Then we're going to first results on trying to grab this information. And if all goes well, just to make it a little bit easier to see. I'm not going to deport the text out here now on. And I don't think it's debugging anywhere else. Finest deep again of a seeing controller. No, we're fine. So shouldn't have the Jason called appearing now down at the bottom. It should just be the results off the first item, which is the park front cess. So let's give it a run, guys, here we go. Play. It doesn't matter which one I click because it's connecting to my server at this point. So I click food and drink on Dhere We go. There we go. Look. So we have the place Name? We have the address. We have the latitude. Are the long shoot fantastic Guys. Okay, I'll see When the next video. Where we put this into a loop on in Stan. She ate the correct prefab based on the type off item that we've actually selected on. Then it should just work. OK, Fantastic. I'll see you in the next video. 17. Populating A Virtual Object With Json Data: Okay, guys, welcome back. So this is where we love last left off. Okay, So what I want to do now is we're going to do a little bit of defensive programming. I'm going to leave the d book code in now. Just as a little bit of a reference. Now, what I mean by defensive programming is imagine if the key word that the user had searched for all the button that they pressed doesn't reach to retrieve and return any results. That's going to throw an error. And it's going to break the code and effectively the app. So the first time that could happen is up here in the create list. I don't want it to try and create this route object if the Jason String doesn't exist. So let's put in a little if statement here that say's if the Jason String is not equal to know. Basically, if he has some information, then that's when I want you to run this code. So will only run this. If the Jason String isn't equal to know the second time. Once it's then created, the object is down here when we're going to start actually populating theatrical and in Stan she ate in the prefab, populating the content with the right information. I'm going to check that the number of results isn't zero. Otherwise, when it tries to create our game objects, it could through another era, as we're tryingto access, for example, the vicinity that doesn't exist because there isn't result. So the easiest way to do that is just to give the places results, array a quick check to see the actual count. Now, this time, what we're going to do is just debunk out a number off the results. So here we go. Let's come back to unity. Hit, play, Andi. When I hit the button, it should give me a number of items for fantastic. OK, so that's the check that we can do. So now we can do it. If statement to check If the places dot results dot count not contained. Sorry, count is greater than zero. So sorry. Actually, it's probably better to check if it's known old There we go. If it's not equal to know meaning because basically could be zero aunt have this this result right here. So let's have a quick check then. So if there is a result. Now we can actually look at grabbing a hold of that information on creating our brief ups. So first thing that we need to do is do a fallen. So we're going to look through all off our different items. The way that I just done that, by the way, is just hitting the tab key twice Fact for hit tub and create you for loop. So here we have a for loop on. We're starting with an integer, A whole number. Which variable is I at zero on? We're checking while ever I is less than the count which is here. I want you to come inside this cold loop on add 12 I an increment the number. So let's do a quick check. If I grab the name here, I place this here and change the zero for the letter I which will give me the name of the first item then the second and third. So I just get rid of this cold up here for a second and come back Andi press play. So here we go. It should give me the names off the different items inside my list on there we go. Look, So we have four entries. So we have the park, which is actually to my right, the big park. Then the second and the third items are actually both the same park there. The part on the left. The difference is one of them has bean added to the system by a tourist. Can't really tell what language studies I'm not going to attempt except probably going to be wrong. But basically part The Castle park is one to my left. Onside. Now I go go this before because the results were a little bit weird. I didn't really know what that Waas. So I copied and pasted this name into Google, and I found that somebody had added the park to Google maps. Now, this is a problem that you could face when you're using the other third party data. I mean, if you want it to be nice and clean for riel up, you could remove this from the list on. Then you would clean up the cold a little bit and make sure the results were relevant. But for this demo, this is totally fine, as the whole point of this course is to teach you how to use GPS. Any useful manner inside unity. Okay, enough said about that. It's working how we want it to. OK, so what do we need to do next? Well, let's have a quick look inside the assets on. We've got our little pre facts. Not that one side inside, packed to the button, pre fabs. So we've got the list prefab, which is a point of interest. The prefab for food, prefab for hotel and prefab for park. Now what we're going to do is we're going to do a switch statement to decide which pre fireball going toe load in on the way they were going to determine. That is by accessing the steam controllers keyword variable. So instead of debugging here, what I'm going to dio he is just above the four loop before we even jump into the loop. What I'm going to do is I'm going to set a string which I will call the word okay. And this will be equal to the scene control. That's keyword. So that will be park or points of interest or whatever you guys have actually decided upon on then. Secondly, we need a second string, which will be the prefab name that we go on by default. Let's set it to the 1st 1 which is a quick look list. Prefab. Okay, list freefall. Okay, so we've got a prefab name here, Variable, and we've also got the word. So now let's do a switch. And for those of you who don't know what a switch command is, just press tab twice. Remember, it will actually give me the default breakdown. What we're going to do is we're going Teoh. It's It's going to switch through a bunch off different checks until it finds a march on. When a match is found against what we're switching on, it will run the code on break out of the little switch State don't. So we're going to switch on the word if I just put that into that. There we go. Okay. So let's switch on the word. If the case is that the word that we're switching on happens to be the point, is it point or points of interest? Just double check has to be identical. Scroll down a little bit. There we go. It's point off interests or want to copy this? I'm paste it here. Okay, So if the case is that we're actually switching on the word point of interest. So if this much is this, then what I want to do is set the prefab name to be equal to the least prefab. So I just grabbed that from above for a second that we go on. Then if it finds a match one second, it's a one second. I sorry it's sulking at me because the prefab variable inside the switch can't actually see this one here. It will need to be moved up to the top. So let's just pop you in here as a private string called Prefab. OK, so now we've got that there it can access the variable. Okay, so if this now matches, then prefab name will be less prefab, which he actually isn't if all. Anyway, on if that's true, then I want you to break out off the switch statement. Now, if it turns out that the case is actually a little slightly different, just write the break command in there again. Let's imagine annex food that's passed through. Is it upper case or lower? Case? Lower case food, lower case. Hotel I'm lower case Park. Okay, so if it's lower case food, I just copy and paste you a few times that we go hotel or park. Then what? I want the pre fuck name to be. It's slightly different for each one. Let's pop you in a little bit of copy paste. Here we go. Paste you in there. I'm paste you that the only difference is the name of the prefab house. The word at the end. So on and park. There we go, guys. Okay, so the default is if it doesn't much just break out. Okay? So basically, now what's happening is we're using the keyword and switching through in determining the name of the pre fact that we want to load. So now we've done that we can actually look at in Stan Shih ating our prefab. So if I go after a game object, which I will call the pre Fogg there we go. This is going to equal. And instead Enshi ated game objects that we're going to create and we go. Okay. So what I want to do is load a resource. So resource is dot load and you can see that load actually takes a string, which is a path to the prefab on. My pre fabs are in the assets folder inside Pack too. And Putin pre fabs. There we go on, then we're going toe. Add on the end the name off the prefab. Which is why I did the switch statement. So we just need to add the prefab name onto the end of it. Now it's still got an Arab extrovert finished the line. Okay. Now, this needs casting as a game object as well, so as game, you know, just moved the of this across slightly as the game object. Okay, cool. So if you don't buy where there's another way of doing this, you don't have to put this at the end. You can if you want to do it like that at the beginning instead. Okay, Now, what I want to do next sent is in theory, that's what creates out the game objects that would just get rid of the bracket site. There we go. So this should spawn the correct prefab from the pre file folder where I've stored mine depending on which button I've clicked on from the category. Now what we need to do next. If I just saved this is I want to position this inside the actual content live. One of the easiest ways I found to do that is to simply tag the content live. So here we go. Let's jump through to the right scene. At least jump through to the list of you. Here is thesis crow view viewpoint content. Andi just going to go across to the tag on Add a new tag so we'll just call this content and then click on the content on tag the content box with the content tag and save the scene. Now if we go back to the scripts or weaken Dio is we can look for that actual game object. So game object content Boco contents holder even is probably a better name. We're going to make this equal to a game objects which we will find the object with the tag on. The tack that we gave it is content. They know that's what I gave it anyway. Okay, so now what we can do is we can make the content holder become the parents off the prefab weaken. Go after the prefab on we consent the transforms parent to equal the content holders. I'm transform. We don't know for any position, but there we got No, we don't. We just want to transform. Okay. Before we give this a quick run, let me just double check the everything is working on looking good. So we are checking if the string is no, we're checking. If the results are no, were then switching through the correct prefab within doing a for loop on the weekend. Stan, she ate it and place it inside the correct transform. Ah, one second, guys. Now, this would require us to have a resource is folder. The newest version has split this function, and now you have to load in the asset database. So to make this actually work, what I'm going to do is also the path slightly for the button pre fabs and save the file. Now this resource is got load function looks for a resource is folder and we don't have one . So let's create a resource is full. It has to have a another case are so resource is on. Then what I want to do is move those prefab into this folder. So if I go and get my button pre fabs folder. I'll just reveal it in my finder. Then I can copy that folder on are going to place it inside. The resource is folder. Okay, so if I just revealed this one and finder I can place my resource is in the apologist for that. Guys, it was just a old way of doing things on. It's a force of habit forming. Sorry, s O. Yeah. The resource is folder is one where we would load any pre France in dynamically. So I just moved them across from the pack and everything should be okay. So now it will look in the resource is folder unload through the bottom, pre fabs switching the name dynamically. Now, if you do want to learn the other way of doing things, just google the function to instead of loading, you can load assets at path. But the problem with that one is that we're building out to mobile devices. So the absolute path that will change based on being on android or IOS. So overall, this is a better solution to just have it using the resource is dot load function. Okay, So should we give the wrong guys. Let's have a quick look. Here we go. So I'm pressing play and I'm going to click on the parks to try and load in the correct pre flop. If everything goes according to plan, my regards making bigger for you guys, it should load the pre fronts in on D, then find the content they've on. Position them perfectly in the correct place. That's how I look. Fantastic. There we go, guy. So we've got the four different entries. Now let's have a look at swapping the actual titles off each one. So for that, I'll see you in the next video. 18. Using The Real Names On Our Prefabs: Okay, guys, welcome back. So it's now time to actually populate this information with the correct titles. Now, what I've done is I've expanded the content Div on dragged in a prefab to make this a little bit easier to actually explain. So on the pre far. But you can see that we have the icon, which is actually an image on then as Children off the prefab. We have the two text elements. So the easiest way I thought to grab ahold of this was to create a text array and then swap out the titles for the actual text that written inside. Okay, so let's just switch back to visual studio for a second. So in order to use the text user interface I need to be using from the unity engine the u I library. Okay. And then because we've got the library, we can now create a text array which I will call the text eso on, then make that equal the pre fabs child components. So gets comp. Oh, sorry. Gets components plural. Then we g o as there we go. So get components in Children because this isn't a race more than one. We're going after the text item. Like so That means that now, on the actual text on the first item, which is a title, I can set that text to equal the place is results from I which is the initial element. And then I want to go after the name and save it. Okay, let's see if this works. Okay, So open up Unity wait for its date in the corner. We go. Done. Okay. Call liken. Delete this prefab initially Onda se the scene. Go back to the main scene. Don't start from scratch. Here we go, guys. So play. And then if I go down to the parks and click Park should load the pre fabs with each corresponding name written in from the Jason Gold. Fantastic guys. Okay, just is a bit of a test. I mean, the data is going to be the same, but I want to check out a prefab switching. So let's go into food and see if the correct pre five attacks by a fly again to see if the correct prefab loaded for food There we go. Brilliant. Okay. Fantastic. So now you know how to use the Jason cold on dynamically populate a corresponding title on everything works completely. Find the points of interest is loading in the points of interest. 35 on just two. Tested the hotels is loading in the hotel's prefab. Okay, fine. Brilliant. Okay, Now what we need to do is work out the distance using our courage. GPS against the location targets GPS on. Do some fancy maths to work out the distance based on kilometres or meters or miles. So for that are see when the next video guys. 19. Calculating Distance Using GPS: Okay, everybody, welcome bike, right? It's time to make the magic happen on. In order to do this, I want you to make sure that you've downloaded the resource is for this video. Now the resource is our in a video pack. Cold pack three. So that's what you eat in court. I've got mine here already, So I'm just going to drive this into the assets project panel. Andi, you will a second. Okay, There we go. Right. Open up the pack. Three on the script. Out. Let's have a look at is called geo cold. Okay, Now let's have a quick look at this function on. Don't worry. If it looks a little bit overwhelming, I'll explain the important part right now. Now, this is a public static class, which means that we can call this from other scripts I've put in already. The miles and kilometres meters off the earth. OK, so this is for the months then what it does is it works out using sphere on using pie divided by 1 80 to return a radiant on the differences. Now what we have to do is call this function Kulka distance passing in the latitude along Shoot off our current destination. Our current location. Sorry. On the latitude and longitude off the destination. What this will do isn't returned back the line below on what this does is he accepts a little parameter the end. So we're passing through once more Once it's done it the first time, then calculates it with the earth radius in miles Here. Now down here we have also worked out the distance in kilometres on in, meters on, down at the bottom I've got an e numerator which is basically just a list on We have miles , kilometers or meat. Now in order to use this then what we do is we call the count distance function on At the end we decide which one of the enumerated values miles kilometers are meters we actually want to use now. If it's in miles, then it will run this line here, work out the earth radius in miles from above. If we call and we say we will meet us then it would return this for you here on if we want kilometers, then it will return kilometers from up here Now down at the bottom. I've got a little bit of deep D booking cold, which I just want you to cook out and save file because on the list for you. Now, if we go down just here once again, we need to make sure that we're using the system as well because this uses a maths function . So down we go. Let's paste this line in here on comments out debug code. Now what this is just doing now is on debugging out from the text which is the name of the police for mulish. Remember, on we're passing through into the depot cold The result off the calculated distance from the Geo code Cal Class. Now we pass in our current longs to latitude. This at the moment is my current location as I'm going to use it as a demo for you guys and then from the results off each one off the places were then going through the initial results on going on the for loop through down the list on getting the latitude and longitude of each item on at the end. I've said that I wanted back in meters on. This will work out the based arm, the circumference of the Earth the distance from one geographical location using GPS coordinates to another, and he will give us a distance in meters. How cool is that, then? Just to make it pretty, I use a month round function, and I rounded to two decimal places. Now, to give you a bit of an example, This is a website that I use sometimes just to get my GPS. Coordinate. What? My gps dot com. Then I punched in my address and he gave me my latitude and longitude, which is correct it right here. No, if I just zoom out for a second down here, there's another town called Pineda. Now, the distance from this train station to my house is about 78 kilometers. So if you go to Google and let me just steal my GPS location on a minute. So rob this for a second. There we go. I just punched this into Google maps. Okay, so this is my GPS coordinates, and I got them from up top Appear. Look, now there's a cool little feature on the mumps. If you right click, you can get the distance, you can measure the distance. And if I click here, then I zoom right out, moving across. Sorry. Like this. Grantee of the value. Look, I can measure the distance to the other location. Case. I just moved down. Cross to Pineda. Here is Pineda. Look, and there's a train station. So drop you on that. I come over here on zoom in. Well, 4.8 kilometers. So about five kilometers. If I've got the train station. Correct. Let's have a quick look. Pretty much. Yeah. Okay. So I'm expecting about five kilometers in the results. Now to check this if I just close one to some of the camera for a second, so I can actually close that. There we go. Rising back across. If I grab a hold off Pineda on the train station, there we go. I can get the longitude latitude off that place. Look now, just for a demo. If I paste this here temporarily. There we go on I copy and paste this line above Just commented out. What I'm going to do is work out my location to this specific place here. We g o so talked about that paste over. So I've got my longitude, latitude or latitude Longitude. Sorry on then the destination latitude and longitude. And if I change this for kilometers like so and save the results, let's have a look at the results that come back. So I'm expecting it to be accurate within a few 100 meters. So maybe half a kilometer out, I depends, based on actual exact point that I pinpointed myself. So here we go on the results is 4.84 So it's point for it's actually pretty much bang on it , maybe point for and this may have actually been rounded down slightly on the global map side. But you can see that this is working out exactly how I wanted. Okay, Now it still said the names of each venue because I left that in the beginning. Now, this time, what I'm going to do is I'm going to De Becker deep book out. Sorry, the name of the venue. As it loops through each place on this time I'm going to use my current GPS on dynamically change with the latitude and longitude of each place from the Google places. GPS returned Jason coat that we've got in the demo now very mind in the list. There are two parks beside me. One is approximately 100 meters to the left for the center of the park. On the other one is just over 200. Maybe about 2 20 to 30 to the center off the other park. So expecting results around 100 and around 200 to 2 20 And don't forget, make sure it's in yet. Meters. Okay, right. So let's save the file. If you want to test this yourself, by the way, then all you have to do is swap. The GPS coordinates from the Google Resource is up here. Let's have a quick look in action. Okay, So the 1st 1 is called the Castle Park or Park Casto on the other one is Francesc Mafia the part? So when I press play, I'm going to get the full results. Two of them are three of them. In fact, for the park on the other one is full. The bigger park down this side. So between 100 and 200 for the results and here we go. Look. So from the Google results from Google Places results that is to 22 the center. So whoever put that on the map has got it pretty much bang in the centre. This one is a little bit lower at 74 meters. But this one is done by a user whose uploaded that to go places so he may be may have bean in a different part of the park somewhere around it. The center of the park is 100 7 based on Google maps. And I said, It's around 100 so it's pretty much Martin guys. Fantastic. So now what do we do now? We've got this distance need to populate it in the list. So let's have a look at how we can do that when we've got the text here. So what I'm going to do is I want to take this line a copy it for a second, but instead off putting it into the debug log. I'm going to place it directly into a variable called distance which will be afloat called distance. I'm not well equal the return of value off this amount. Okay, so I just need to remove the brackets at the end. They're ago from the deeper glogg. I was still getting an error float. Distance equals Oh, sorry. No afloat Double there we go because it's rounded to two decimal places. Okay, so now we have very recalled distance. We're going to play with that afterwards. What I'm now going to do is assigned the text for the distance box to equal our variable distance from the results of the GPS. And here we go. This will give from my current location. Sorry, guys. Put it inside the text box. I need to convert that double to a string. Now it always Okay, right. Here we go. So this will use my current location dynamically. Look through Populate a list as well as debug out bottom. So here we go. Let's have a look. Okay, So down we got sparks. Click. The park on the distance should be written in for each right. Fantastic 219 78 1 or seven anti to six. So now it's just a case of making it look a little bit prettier. So here we go. Instead of just writing out the distance. What I'm going to dio is I'm going to write a little bit of tanks saying that the distance is this on. Then at the end, I'm also going to art meters or a letter m at the end. So now it will right into the box. Not only the return result, but the word distance for the cosmetics point of view. Andan em at the end for meters. Okay, Now, just to test this and want to swap it two kilometers and I'm expecting the results to be sent, like 0.2 or four or something like that. So let's have a quick look. Here we go. So just changing two kilometers and at the end off here. There we go. Switch this to go after kilometers Uncle Buck into unity on it. Play. Here we go. The results are 0.20 point 07 Is there a part one and 0.23 kilometers? Fantastic. Ok, guys, Now many upgrade that you could do if you wanted to. You could check if the results off this distance variable in meters is say greater than 500 on then instead of writing out, the text equals this with meters. We could do it if else and say if it's greater than 500 put it in kilometers instead. Okay, cool. So just a quick many overview then. So this function here is set to calculate the distances from two points based on a sphere. Okay, so we've got a big sphere in front of. There's one points he at one point here on it will draw around using pi and find the distance for each one. We then divide that up by either miles, kilometers or meters on, then down at the bottom. We have a little in numerator so that we can do a switch statement while an if statement here. Sorry, I'm switch between the different the different doubles to check against. Call it or what we have to do is use the static class to your cold cock and then call the count distance function passel in latitude, longitude, latitude, longitude. On. In this particular case, I've hard coded my GPS. Now when this goes to the device, of course, what we would do is we would remove this and we would have GPS dots latitude on GPS dots, longitude that will work on the device. But off course, other minutes. All I'm doing is testing on actual laptop on it doesn't have a GPS chip. So that's why I'm hard, Cody. Right in the next video, we're going to get the bottom working, so I'll see you then 20. Dynamic Button Listeners: Okay, guys, let's get this button working now. Now what I've done is I've drive back out the pre from so that can give you a bit of a visual example of what's actually happening here. Now we have the listing prefab, which is getting duplicated as we go down. We have the icon, its first text item, the second text item. And then we have this bottom, which within it has its own little text item. Now, what I'm actually trying to do is dynamically change the on click events. Now, normally, you just click out dragon function. Andi decide where to go. But the problem is, we don't actually know where we want to go until the data has been loaded dynamically on the loop. So for that, what we're going to do is we're going to write some cold and add a listener using script so that we can dynamically call the function when we click it. Therefore, we're using cold to set the on click event listener. Okay, so how do we do that? Well, first of all, we need to get a hold of the bottom. I'll just delete this prefab for an hours. We're not going to need it on. Jump into the cold. Now, this is a loop where we're looping through the places and created the pre flop. So what we're going to need is a bottle which are just call button. Okay, now the button is inside the prefab. Well, not the places. Sorry, Prefab Andi. It's actually a child component. So let's get the component, not components, but component in the Children on the one that I'm after is the bottom Like so then what I'm going to do is dynamically change the name of this bottom to be the name off the place. So to do that, let's set the buttons name they would go to equal, cold above, up here from the places results on, get the name okay so quickly Jumped back to unity press play. And let's see if the name of the bottom is switching dynamically. Onda. We can actually find the component that be the first The first hurdle to get over. To be honest, let's go back to the mean now when I click parks, here we go. There we go. Now let's expand the list for you Drill down into the pre fabs. Here they are, Onda. The buttons name has changed. Look dynamically in the inspector. Therefore, we know which one would actually after. Okay, now the reason I'm doing this is because I want to add a listener and I want to give the cold away to dynamically assign a link to a specific venue. Now, by using the name off the venue. That means that when someone clicks the buttons, the Cold War, all the right buttons have it go down the list. It will only add to the listener to the bottom that has that name. Now it doesn't matter if two and happened to be for the same place like I have with the guy who has gone to Google and added the part. The link will be exactly the same. So it doesn't really matter now if you wanted to maybe change this team's introduce instead , depending on the data that you guys are actually going to use, then that's something else that you could do as well. You could just add a counter and change the name of the bottom to be, for example, the counter that's going through. So it's sort of changing it to be the results name. Let's just change it to be I to string. Then we go so it can actually write it into the box on. That means that now there's absolutely no chance that any of the bottoms will have the same identifying name. Now, I just wanted to use the name for more of a visual purpose. But now you understand how it works. Let's leave it. I So if I press play now, will have the list of venues on the bottom should be named 01234 or 123 depending on how many results you have. Scroll down. Here we go. Look into the content. I look the buttons now called zero on the next person's called warm. Okay, so now you understand how that works. How we've got ahold of the child. Bottom component. Now what we need to do is art a listener. So to do this what? It's come down to the bottom off the class, not the entire script on. I want you to create a void which we're going to call at listener. Okay. Okay. And we're going to pass in a couple of things. One the first thing we're going to do is actually pass in the bottom. Which alcohol be that we go button. And we also need a u r l to actually go to so wants a passing a string called u R L Now the way that we're going to do this thing is get our books and I will be that were passed putting in on go after the on click event handler on. We're going tow ard a listener to it. Now a listener expects parameters to be passed through, like so on. What we're going to do is go after application and we're going to open a u r l the u R L What we want is the one that's passed through up here. Okay, so that's actually do this, then. Now we need to out the listener here, and it's expecting a bottom, which is our bottom Here, look, and it's also expecting a string which we haven't created yet. What we're going to call a add what we're going to call it. You are out. So let's just create You are all now just to stop it from sulking for a second. There we go now inside the goodie pack. If you open it up, there's one called directions. Link on. This is directions from Google. It's the link up at the top. So if I got a Google for a second just basis in like so then we go. It should give directions from my house to the local park. There we go. So put the top. We've got the location. Latitude longs to on the destination latitude, longitude, what at the end, actually there. So what we need to do is dynamically swap this out connection about, um it will link through correctly on the bottom. So let's just test it out. For now, that's just paste billing directly straight in there we go without any changes. For now. Now, what should happen then is we looked through the button and then we call the art listener function passing in the button on this u R l shrink. The ad listener is then called on. It will call application. You are l on click off that specific bottom dynamically over writing the cold for the on click event handler. So let's have a quick look to see if this actually works here. We go. Just get rid of that, Andi. Then we go. Now if I want to visit the local park from my current GPS. Okay, so this one, if I click on the mouse, it links through and there we go. It's loading up now with the Google directions on. That's exactly what's going to happen on the device. Now, don't worry. If you noticed that my my distance had disappeared from here, that's because if you remember in my visual studio cold, I swapped this from being the default debug cold to absolutely use the long, soon latitude on the device when we built out. Okay, so now what we need to do is basically swap these parameters for the places results. Now, this is a little bit long up here. So what I'm going to do is I'm just going to grab it for a second, and we're going to create a smaller easier to use a couple off variables. They're going to be doubles because that's how they are inside the places, class down at the bottom, off the actual script. So the first double, which we will call the target latitude that will equal the results geometry location latitude on. If I just copy you and paste you for a second, the target along will be the multitude off place. No, actually, it's L N g not L O. And okay, right. So let's find the right parts to swap out of this on, basically dynamically change it. So if I'm art 684 that's That means that the 1st 1 here is my latitude, and that's my longitude so that I can leave alone. This must be the destination, because the one at the end also matches where I currently am. So if I come in here, we break outs of the string and then back in yet, like so on. What we need is the tawny a latitude here. I'm messing up with one. Okay? Now, if we break out of that string like so there we go. Then. I want my target latitude in that I mean this one. We're going to break out of that string again. Delete the second quote. I'm putting my target Longitude. Okay. Capital. L sorry. There you go, guys. Okay, Right. So in theory now, the direction should differ slightly. Based on the places in the list. now. So here we go given with that another run. Just play on and and we go back on. Dso the parks off, right? Let's have a look. The 1st 1 is the park down the road. 200 meters. So if I click this, it should give me directions to park Mafia. Ah ha! There we go now it's actually only here. I could walk it across here, but you've got to drive around a six. Curry sets up for the for the car. Okay, let's go back to Unity and click the other park and it's gone to the same place. Why you doing this? OK, I'll have a quick look at the cold that we just double check that it is not just me. That's correct. OK, so it's not it's not. That's not the problem, and the code is fine. It must be that this one is bad data inside the inside the actual Jason Code that would just double check if I click my zit taking me to the wrong park. Yes, it is, but maybe it's no, Actually, it's not actually wrong. To be honest, if I expand this, this is the name of the park that's 200 meters away. This is the name of the park in either Greek or Russian or something on. That's that way 100 meters, which is the same as this in Spanish. This one just stays park in my grant, so it must be the entry, a double entry for the big park as well. So as long as when I click this one with the correct name on on this one with the correct name on if they go to the right place is fantastic. It works, so it's just a little bit of bad data. It's nothing too much to worry about. To be honest, the bad data side, because this is using parks now imagine I mean a tourist location as well. Imagine how many people are taking photographs and uploading them on. People are part of the Google crowds where they're uploading their own images and things. Now, if you are doing this four places, as in shops or businesses, then the data will be a lot more accurate, especially for businesses onda local shops because the actual venues will have cleaned our listings in the Google Maps directory. So not to worry The most ideal, of course, is to connect this to your database. Unload the Jason coding from a pre defined database. Okay, then. Good news, guys. I mean, in a nutshell. We've got this up now for any much of functional. We've got the buttons at the front, which you can add as many as you want to. The quick button also works is very lightweight, so it loads like lightning on the device. On depending on what you want to click, it will. Loading the Jason cold, Andi switched the pre Phibes on, populated with all the correct data Apart from the distance. In my particular case, as I'm using the debug GPS or rather not the debug GPS, I'm using actual local devices. Okay, Right. So next thing, the next thing to do is to kind of shuffle the results toe, order them by the nearest first. As I thought, that would be kind of handed. So what I want you to do first, though, is come into your visual studio on wherever we have these longitude on latitude, I want you to swap it out for the real longitude and latitude. So remember you can break in and outs of a string like so on. Dhere. I want my longer toot on what I want you to do. Basically, guys is test this on the device and see if you bump into anything. Everything should be okay. That so we just have to swap these out. Like so I'm finally you. You could go here like it's okay, right? This should be ready, Teoh actually work. I don't need your IQ and deep comment you out. I'm double check. Double check the distances that Yep, yep, everything's fine. OK, guys, right. Save everything. Go through to unity. Say, that's go up to the build settings just to double check that they're in the right order on your on the correct platform on. I just want you to build this out now and give it a bit off a run. Now, obviously you're going tohave completely different results. Unless you've updated the Jason code because it will be using the distance to my local area based on the code. So I'm sure these parks are thousands off meters away from some of you guys. So by all means, you can edit the Jason cold. That's why I included it in the actual pack itself. Let's have a quick look. So as a park. And here's the cold look so you can change these if you want. Or you can use the Google places a p i yourself and swap the content. OK, so don't worry if they're miles away anyway, because the most important thing is that when this loads up, it doesn't crash out. It finds your GPS and using the data that it has, it at least works out the distance, however, millions of miles that maybe away from where you currently are. And then ultimately, when you click the mouse button, it will load Google maps on loading the directions. After that, all we have to do then is shuffle the data by nearest first on. Then we tweak everything and actually connect this to the real places. A p I to make it fully functional app. Okay, cool guys. I'll see when the next video 21. Sorting Results By Nearest First Part 1: Okay, guys, welcome back. So I've just built it back out to my iPhone. Andi, everything works. I mean, the only slight issue the I personally hard is I've got the plus version off the iPhone. Andi, when I actually set this up, if you remember, if we just well, not switched to have seen. But I'll just explain it to you guys. If you remember when we created the pre fabs there were set at 7 50 with based on the size of the canvas. Well, this is a plus version, so it's it's got a larger resolution. So if you guys are using things like an S eight something that's nine or iPhone eggs or whatever an iPhone Telemann, then you may have seen the same thing. The pre fabs are too small when you go through onto the list view. So we just press play for a second. Hey, we g o. So although the data loaded nicely here, if the width is higher than 7 50 then you get these kind of edges and you get aboard around the end. So that's easy to fix. I mean, there are two ways of doing this. What I normally do is go down to the actual content here on Make It So that the I've mess around with Layout Group basically so that it controlled or manipulated the width and the height. Unfortunately, that only works when they're already here. When we dynamically populate, it is when we run into a bit of a problem. So what I'm going to do is do it in the cold. It's nice. And is it when you know how The first time I did this, it took me ages. I was trying to work out screen with, based on different devices and landscape and portrait. All I had to do was getting a hold off the prefab, get a hold off its transform on, then go after the local scale and set that to be a new vector. So basically reset the scale and make sure it's 111 because what will happen, you see, is when you're looking at the go back to you, say, let's make sure save that when we're looking here, it's 7 15 with, but when you're on a larger device, it's still 7 50 which basically makes a scale go down to zero point something. So by forcing that back upto one, it gives it a bit of a boost. I makes it larger. Okay, Cool. So that's that sorted. I just see it now. What we need to do now. Well, we need to organize our data. Andi, To do that, we're going to create a list and store all our pre fabs inside it. Now, my initial way of doing this when I was doing this in kind of a trial face was to create this entire prefab on, then store it as a game object in the class, which works great. Until I decided to pull that back out on Green Stan. She ate it back onto the scene using the pre flop that was pre flop. But the game object that was stored in the in the list class. Now the problem was that the game object was created, but all the sub elements all the text on the images and the buttons they all disabled and stopped working. So there's no kind of quick way around this. I also looked at shuffling the data off the route. Object Problem is, we only have the longitude and latitude, so we'd have to look through everything, rubbed the long to latitude store those in the temperate variable and then order the list based on calculating the distance and wow, Let's not bother. Let's go for a nice, easier route. So what we're going to do is we're going to create a little mini class down at the bottom, so we want to create a public class, which I'll just call item We go now. The item is going to store everything that we need. So it's going to store the prefab. It's going to store and prefab type. It's going to store the title the distance on. Of course, the you are out to click through for the button, so we'll have everything to kind of re populate our content over again. So we're not going to store a game object because it causes a problem by deactivating or the sub components. OK, so we're going to need a public string to save the actual pre five name for the type of prefabricated. If it's the whole tell all the point of interest, for example, we're also going to need another string for the title, so the title I'm naming them in a certain way on purpose. Guys. Eso Now we're going to need a public double which will actually hold the distance. So the distance There we go, Andi Then we're going to need a string for the u R L So a public string for the U. R l Okay, so from this, we should be able to Reinstein, she ate a new game object on, put the title in the distance in on, then hook up the bottom so that it works. Okay, so we've got a class. How do we now populate this? Well, the first thing we're going to need is an actual constructor, so we need to create our first item. Okay? And this will allow us to actually in Stan. She ate each element basically, so we want a public string. So 1st 1 is the pea name, and I'll do it in lower case. Then we need another string for the title in lower case the distance. Oh, sorry. A double. There we go for the distance on, then. Finally, another string for the u. R l. Okay, so if we create that now we assigned the variables are passed in here into the actual item . So the P name equals the lower case. P name. The title equals the lower case title. Now we go, and then we've got the double or the distance. Even so, the distance equals that distance on. Then finally, we've got the u R l, which is going to equal the URL that's passed in. Okay, so that for now, I think he's okay for the class. The next thing we need now is to create a list off items. So let's go right up to the top on a pier that's creates a public list. There we go off items on, I want to call it items on making equal to a new list. There we go off the type of objects item. Okay. Now, while we're up here, we're also going to include using the system link. Okay? You don't Actually, I don't have to do that in visual studio, but a model developed It probably will have to. So that's why I put things like this in guys. Now, what link is is a bunch of libraries that has some really cool functions to compare very bills in a list so I can order things by the sending off my name. So on and so on. Okay, so now we've got this list already, and we've got the item class ready. Well, how about we populate the items every time we looked through? So let's let's get ahold of my items. Which is the list of the top. I like art. Something to it. What I want to add is a new item on the item that I want is the name off the theme prefab name. So that's this variable up here. So prefab name is the first element. Then we want the title where we've got the title up here. So that's the text. Well, that's actually this here. The places results name. So grab you. There we go. Then. We want the distance, which is fine. We've already got you on. Finally, we want the u R l which we have just above Okay, course. So that will populate our list. So if I come out of the fall, which is just here, if I just want to test this, I can de book Andi, I can get my items on. I can count the list now on. It should write them and before into the console for us. So let's have a quick look to see if the list has been populated properly. Here we go. Click console on four from that state. Okay, cool, guys. So now we've created a list That means that we can now order this list however we want, and then we populate the scene. Now the reason for this, for example, if I just put it into, um, full size for a second and maximize on play There we go. Now imagine, for example, we're looking at food drink, so this list will be quite extensive. Now, maybe you want to make the content live, starts about here instead on you, maybe want to put a drop down in at the top. On change of the drop down, you could call a different function to sort by name. Distance rating, whatever you want. Really? The world is your oyster on this one on. Basically, all you'd have to do is re populate the list afterwards based on the result. So the trick is to make this is flexible as possible. Now, you might be wondering why I didn't just put this in right at the beginning on Order it by nearest first. Well, maybe you don't want to do that. Maybe you just want to have everything listed and then allow the user to decide. So by doing it this way is kind of giving you the flexibility. Okay, Right now what we're gonna need next. Well, for come down here, we're going to need a public void. But it doesn't have to be public. Even it could just be a normal void on this particular one will be called re populate. Okay, way Go. Okay, right now re populate. This is going to take in the list off items. Then we go, which is the items list that's passed in. But I'm gonna rename this one has items past just to make it easier to differentiate. Okay, So what this function will do, then, is it will be passed an organized list off items, depending on what you've decided on whether that be to order by the title off distance or any additional variables that you may have put into your specific class. Now what? The first thing this thing is going to need to do is to actually wipe the content live because otherwise the new items will appear at the bottom off the list the way that it could is written. So it will first populate. And then it will sort onda add the additional to the bottom. So what we need to do is to get a hold of that content. Div Andi, destroy all the Children, which sounds very friendly. Now what I'm going to do is I'm going to take you from here. All 9 72 I'm gonna cut it on. I'm going to pay Stay up in the start function here. Now, I just need to copy this part here on delete the word game object because right up at the top, we're going to aren't the content holder there. And that will make it so that the other functions within this overall masterclass of list view will be able to see the content hold of variables. I've just save that for a second. Okay, so now if I come down yet, that's not showing any errors, which is great. Okay, so now we've got a hold off the content holder, in theory, from the top, then the re populate function wants to actually look through the different child transforms on destroy all the kids. So let's do that, Sam. Do it for each loop. There we go. On variable I'm going after is a transform which we will call child on the collection that I'm after is the content holders transform? There we go. So that should grab a hold of all the Children inside the content holder box area Then the fun part. We get to destroy all the Children, so destroy the child game object There we go. So to test this out just before we destroy the child let's de book on. Log out the child's name So child dots, game objects dot name. There we go. OK, so it should say the name off each game object. In fact, that's art A little bit of text just to make it more legible. Okay, so now we'll know when it is killing each child. What at the time here we go as press play on watch the magic happen. So in theory, you won't see anything because it will populate the list destroyed instantly. Come out of maximize for a second so that you can see the console on and here we go on. You see nothing. I love it when a plan comes together and I forget to actually call the function. So after we have counted them, let's, uh, let's get rid of this. In fact, let's just destroy a re populate the late Sorry. There we go on passing the items. Okay, so now it should actually run my code. Now have told it to do that. That's what That's what I get for trying to kill kids. That's a little bit of common for you. Okay, let's have a look on. There we go. Look, it's killed. The kids, they're all collapsed at the minute is really about this. I might have to change Children, making study some better. Anyway, what you can see is it's destroying the game objects. So that's working as I wanted it to. So good stuff right now. I don't actually want to re populate the items at a minute. All I wanted to do is make sure that the kids were being destroyed from the list. What we would now want to do is we want to look through the items that passed in to this function. Andi, then re in Stan she ate the game objects. But before we do that, we want to sort the list. So let's create a function here. Cold order by distance that we go there. We go order by distance, and it will be passed in a list of items like this. So let's just go in there, Okay? Right. So how do we do this, then? Well, the order by distance will sort the list for us using link statements on Then that function will call the re populate on pass in the sorted list. The sorted list will then re populate our content. They've on everything should come together. Okay, so how are we going to do this, right? Well, the first thing that I want to do is get a hold off my actions passed in and make that equal items passed in boots. This is where we use our link kind of lumber expression to do a search, really? On order, order the list again. So I want to order by descending. Okay. And now he's gonna ask me what I want to order by descended. Well, what I want to order is a which is basically just the first thing I want toe. Get ahold off inside the list on then I want to set this not a sink. Sorry. I want to set that to go after the distance. There we go. So what Vicks will do now? No. Oh, I don't need the double brackets. One second. There we go. Yes. So what this will do now is it will get my items past list here. This variable on it will reassign it to an organized by descending value the distance. I just need to cast the arts a list again that we go. Okay, Cool. So now we have passed in the bunch of original items and then kind of got the variable toe overwrite itself by going after the distance value on comparing the variable here to the distance for each item in the list. It will automatically order our list by comparing all the elements. Then we just cast it back to a list so it could be dropped in here. So now, in theory, if we call the re populate and pass in the list off items past that we go, then they should pass through the list ready for us to were re populate. Okay, so all we have to do now is recreate the list. However, I'm approaching the limits on the on the video. The time limit set as a guideline. So I'll do that in the next video case. 22. Sorting Results By Nearest First Part 2: Okay, then, guys, let's get this running. Has we want it to now? So all we have to do is re populate the list with a first and we're going to need. Here's a prefab, so we might as well borrowed a line from above. Andi. Then we loop through all the items. I'll just paste that in that for a second. Now what we want to do is look through all our items past count the amount there we go on. Then we just need to re populate this again. Nice. So here we go. Let's repopulate based on the item's past elements. So instead of the prefab name, it will be items past I for the actual initial count off here dots the prefab name. There we go. So that will dynamically change the name based on what we first populated the list for the top. Then we have to actually position the pre five in the correct location. So let's get the pre fabs transform and set the parent to equal the content holders transform. Okay, right, Cool. So let's see if this is working weight. Before I do this, I actually have to call the function otherwise it won't work again. So we this time we want to order by distance. There we go, and I need to pass it in the items. Okay, Court. So there we go. Right. It should, in theory, spawn kind of an empty prefab at this point now. Okay, so let's just play the app. Click in on Bond. There we go. Ok, perfect. So I got the right prefab. Andi, nothing should work there we go on the title is just the default or switch to food. It should be the food prefab. Perfect. Okay, cool. Let's do the title of the distance. So the same as before. Let's create a text array called the text on that can equal the pre fabs gets the component or components Eva in Children on the components that we're going after all the text elements. There we go. Ok, so the text zero text there yo should equal the pre for No. The items past sorry items passed for the current item that were on Which is I on? We're getting hold off the title. Okay, there we go. Now if I copy, Lex aren't paste it below. Then this one he is going after the distance. Instead, There we go. But we're going to make it look pretty again, like so on. Say, distance. We go at the distance, but we need to cast it as a string. Well, not casted is a string. Sorry. Needs to convert it to a string at the end. Now then, we'll add the letter M in my particular case. Okay. And then all what we need to do is get hold of the button. So I might as well borrow from up here for a second as the bottom. Yep. Here we go. Where are we paced you in that? So instead of going after the prefab? Yep. That's fine. But unbuttoned button to string on, then all we have to do is add the listener to this new item. So we're going to pass in a bottle, which is the button, Andi. It's also asking for a string your l So that is on the items passed for the current item arm. We're going after the U R l. Okay. I think that's eight guys, right? So, in theory, if the list is ordered correctly, um, what I'll do is I'll just cancel this out for a second. Now we go, so it doesn't run, Aunt. Now, let's have a look at the results. So let's go down to the parks. Both. Here we go. Ah, the distance won't come in because I'm using the local that my real GPS One second while I just switch it back into debugging mode. Um, a bit of a bum. Here we go. So copy you paced you there on swap out my latitude for you don't need to cut u boat. We go now. The longitude here can swap out you and then I just copy out. Okay, so I'm not bother doing that on the u R l down at the bottom. I just want This is a visual thing for the moment. So let's see if the distance loading now on That way, we can compare to see if the results are correct. So here we go down Sparks on. We have to 19 on. It's a fan. Cesc Park. Where is the closer parks? Are this one on the castle park that much closest are hoping that we get the weird one at the top. Then the castle park, Then this world and then finally just the park off Margaret's. So when I comment, this park in should wipe all the items on do our fancy new order by distance, which then re populates list. Here we go. Okay. So fingers crossed, guys, everything should work down. We go on. You ordered in the right money? Yes, I'm no, Uh, it is ordered in the reverse. Okay, right. One second. Endless. What? The code. So if we're ordering the wrong way around, let's just order order by Andi. See what the results come out this time. But hey, at least you know how to do it in furthest. First, if you want to team to keep it that way. Okay, Right. Are you in the right? Order the castle park at the top? Yes. Fantastic. We have a user added entry, followed by the park, followed by Francesc, followed by the General Park of Margaret. And that, my friends, is how you can use GPS to load Jason Day. Torreon. Andi, organize it by the nearest first. So all you'd have to do now would add additional functions if you wanted more, more functionality. I mean, here is got order by distance But maybe you wanted to add a bunch of buttons and duke some kind of switch on what? You actually order it by order by name or whatever you want. Order by reviews for a restaurant, for example. And you can add extra graphic user interface buttons to the scene. I'm just maybe lower this this section down a little bit out a little menu bar here or maybe some buttons across the bottom of the app. I make it so when you press them it, reshuffle the results. Okay, fantastic. So let's have a quick overview. Now we've got everything ready to connect to the live data from Google. So we got points of interest. 400 hotels on the parks, the prefab. That's what didn't fantastically well, everything's now or good organized and reshuffled by distance Nearest. First, we Dima checked out the link. If you remember, I didn't switch my GPS, so I just want to make sure that the listener is connected. Andi, it opens up Google, which it does fantastic. However, it thinks I'm in the North Atlantic Sea because I don't have any GPS coordinates. There we go. Okay. So apart from that one slight thing. Everything's working guys from top state. We've got our own nearest first place, finer. That's dynamic. So in the final video of this section, what we're going to do is connect this back to the rial GPS on to use Google's A P I to pull data dynamically. Now there's one thing I want to add on this as well earlier on in the course, except a limit to how Maney requests per day. I'm I wanted Teoh use on my up so that I didn't receive any charges on. It works out at 165 which is right. But if I set my request limit toe 165 in Google for some reason, I get a maximum exceeded request limits error. So I had to up the limit to about 500 or 1000 or something like that on. I mean, for my personal purposes. I know I'm not going to go over up anyway, So just in case you guys have any issue trying to retrieve data, that's probably why so in the next video, then, like I said, let's go look at Google places on loading in the real data I'm just gonna jump back in my code now on rejig my our results to use the real data once more. Okay, fantastic. I'll see what the next video guys. 23. EndOfCourse: Okay, guys, Welcome bike. So it's now time toe, actually. Hook open to the rial. A p I and source live data. Now, I wanted to start this video on Google again because I need you to get your Google a P I key. So you can't remember how to do that. Just typing Google maps A p I or something like that on jumped three to the cloud platform . Okay, Now, from here, you get the side menu and you can navigate through, or you can go directly to your cloud dot google dot console and that will take you through to the same place. But either way, I needed to jump in. I'm just come over here and click on console that one. Sure. Inside the console. You can use a sidebar here to navigate through to the A P I and get some credentials. Okay, then. Right. That said, let's get to it. So I've currently got modeled of it while visual studio. Sorry, Open on. But I'm looking at the list view as this is where the request to the U. R L is actually made now at minute. What it's doing is it's loading in the U R L from my building run website on going after the demo data that we've got. Well, let's comment that out and create a new string underneath mutual equal if you jump into the pack three download. There is a Google link to a p i dot txt file. So I want you to just copy this. Okay, close you and close you on. Let's paste this string in here and have a look at it. Well, let's have a look. So this is the link to do a nearby search using Google's AP I I'm asking for the return data to be in Jason on. I'm giving it my latitude and longitude from our GPS class as my current location. I'm then giving it a request for radius of, say, 500 meters to where I currently ham. So if you want to have less or more, you can alter this number. Bear in mind the largely amount, the more data will be received back, and you need to handle that on the request may increase. Then it's asking for the type off venue that I'm after while I'm going to pass in one of the key word category I've selected from my main seen. So it will either be the hotel keyword that's passed through, or the park or point of interest or whatever you want. Now what you guys need to do is paste in your key on, then close the line at the end. So opposed video for a second while I paced mine in. Okay, that's done. So I can. I'm going to leave the debugging code in as I may need to come back, but I think that you are out will be pretty sound. So let's have a quick look. Let me save this. And although the GPS won't work, then I just want to check if the earl at least throws an error or something to make sure that we are connecting up to the A P I correctly. So here we go on. I'm going to ask for parks just to be nice and easy. Ah, come out of maximizing play mold. Here we go. Are we getting anything back? That's all I'm after right now. Maybe we would, if I actually d booked out the the result off the W W text. So let's devote out the result just deceived. There's some kind of response coming back from Go, Here we go. It's probably going to be something to do it invalid location or something like that or a bad request of some kind. But I just want something to come back to make sure I'm connecting to the right place. Here we go. Okay. We've got hate to ever actually buttes and he's empty. Fantastic zero results because it doesn't know where I am. So from nowhere, 500 meters is still nowhere. Fantastic. No, the a p I has actually responded rather than with an error message off too many uses or too many connections or whatever reason, bad requests. Everything went through OK, apart from the fact that it doesn't know where I am. And that's completely fine because I haven't told you where I am. Were not on my mobile device. My latitude and longitude are only going to be visible when we actually build this outside . Just give this one last quick scanner are making sure that my distance is set correctly to my riel gps. Andi, the maps will be to the GPS. Okay, guys. Right. Let's Let's build this out to the device on. Make sure that everything's warning as it should on. Remember what I said about the limit for the A P. I key for the limits of requests. Don't forget, if you start receiving a result are saying that too many requests have been made for your key. You need to up the daily limits and mines correctly set to about 2000 even though I'm not going to use it. It stopped Google from actually playing up on giving me a headache with the development stage. So if you get that result, you're not allowed to connect or too many connections or your daily number of limits for request has been exceeded or something like that. Just simply up the amount. Okay. Cool, guys. Right. Let's build this out to my device on our See you in a second. Okay, guys, good news. So it's working. Look, I have a list off points of interest that are near me. The only thing I forgotten to do was to re scale the prefab when we re populated the list. But yet look fantastic. We've got a list of places all near me on it loads dynamically from the Google AP, I awesome, That's how. Look for hotels. Yeah, There we go. We've got apartments and hotels and food and all sorts of things. So what else have we got? Let's have a look. Yeah, Brilliant. There we go. The hotels are loaded in Fantastic. OK, guys, Brilliant. Right? Let's have a quick look, man, I'll just stop X code from running. Here we go. Right. I'll get rid of X code. That's fine. Now all we need to do then remember, is down here. We need to get a hold of prefab. Not the tanks. The prefab. Andi, get the transforms local scale and set that to be a new vector. Three 11 on one. Okay, call. Right. Let's have a quick chat, guys. That is it. Well, neatly, I've got a bit of a surprise for you. That is the foundation framework now completed. Now think about everything you've learned here not only how to enable the location services on Android and IOS, but then how to put that use into a practical situation. And I'm looking here because my more bars here talking about the efficacy. So to put that use into a riel willed application that you could use in your own town while while you're on holiday. Or you could actually release this into the APP store If you wanted to just bear in mind that you'd have to earn something back to offset the amount off the Google cloud costs. Now, where could you take this in the future? Well, let me show you what something that I worked on before was actually kind of just switch projects for a second. I want to give you guys a little bit of inspiration. Okay, so this is something that's taken about who about six or seven months on and off to actually put together. But you can see where the foundation ideas came from. Yep. It's totally fine that we go. I just upgrade the product and I can see where the foundation idea came from for this new app. So the mini course that I just don't if you continue to expand on the application, you could see where this girl's. Now, this is an app that I've built for my local town. If in fact it's for the entire coastline Now we don't need the intro. So what Second? Okay, so This is the main seen off the application after the APP has detected your GPS. Andi. Figure out what town you're in now. When I press play, you'll see how the design is similar to what we've just been creating. It's just a meticulous a step further. Now we have many buttons up at the top. On the right is a configuration so we can swap town for any time we want. Andi. I can also change the language, Spanish or whatever language we want on the fly. Now the menu system on here has a bunch off different categories in the same way that we've just been doing. But the difference is, rather than just clicking on shops and loading in the GPS, this doesn't just use Google. What this does is connect to my server and retrieve local shops that I've added from the website. Now to demonstrate this, if you go into a category like shops, for example, we've got a nice, cool video up at the top. Onda. We got greeting message and then you can see the sub categories here. Now if I show all you can also see additional places from the list on their all different types of sub categories. It's dynamically coming down from the website from the Jason content that I've added. So the tools that I've taught you in this course are actually working in this app. That's very app works on the same way. So we look at places to eat and when I choose, for example, remote, which is a type of wine over here, then what it will do is connect to my server on find everything in that category in the same way that we've been looking for the local parks on the local hotels based on the cast review that I selected. So I hit the button. It goes off on returns from Jason. The Jason incomes back on populates the list. Okay, this is slightly different. It doesn't click through on a mop. It just has an image off the current venue. But it's got my distance in meters. The reason this is working is because I hard coded Mayer. My GPS coordinates on it is actually 500 meters away. So this is accurate to about 20 meters from just where I am. I've also got a drop down to find a different place on if you wanted to. You could filter the results by their communities to see if they have a happy hour if they self fooled if they have toilet facilities on various other things now going further instead of just clicking the mop in the GPS, this goes more in depth. Look on. We have a menu with photographs of the venue which load in, and everything is populated dynamically, in exactly the same way it asked for the Jason cold on. Then it does something with it as it's looping through the items. So to give you an example here, this what's hot button does actually open up, walks up handling to the right mobile device on the way that I did. That is exactly the way that I've taught you guys early wrong. So why, in fact, I'll show you one more thing we've also got. I think the menu works here, too, yet look so a similar thing Once again, the actual planning that went into the app that we've just created is exactly the same in here. It's just more in depth. So in the same way that it populate the title here on the description and the image is exactly what we've just done with our own prefab. So hopefully this will give you guys a little bit of inspiration on the kind of application on a commercial level that you could actually do. So there's lots of lots to go out, and it's no, I don't want to just showcase this app. I want to inspire you to think, Well, that could be good. Or maybe I could use a button to do this, really build upon the skill set that you've got because you have not only learned how to use GPS. I've taught you how to pull Jason cold from a website you are. L populates an object and then a sign that dynamically in the list, then order the list by GPS. So really, it's a good example of real world use, and that's exactly what I wanted to show you with this application on the screen right now , apart from that guy's, I hope you've really enjoyed the course on. I look forward to seeing you in my other courses. Any questions? Don't worry. Always you can always find me on Twitter or directly through the normal groups, Aunt once again. Thanks for taking the course. I've really enjoyed teaching this one. And I hope you guys have enjoyed taking it too. Okay. Bye bye for now.