Build a Weather App with iOS10 & Swift 3 | Sandra L | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build a Weather App with iOS10 & Swift 3

teacher avatar Sandra L, Front Development

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (2h 17m)
    • 1. Intro

    • 2. Weather App Interface

    • 3. Random Background

    • 4. OpenWeather App API

    • 5. Download City Weather Data

    • 6. info.plist

    • 7. Getting Weather Data

    • 8. Temperature in Celsius

    • 9. Change City Alert Dialog

    • 10. Weather Icon

    • 11. Google TimeZone API

    • 12. Date & Time

    • 13. 13 displayTimeDisplaying Time

    • 14. Updating Time

    • 15. Wrap Up

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, you will build a Weather App with the API, to fetch and display weather data directly in your application.


Prerequisites & Requirements:

You will need access to a Mac computer running OS X 10.10 or later No prior programming experience is required. The course has been specially designed for beginners. The first chapters will walk you through the download and install process of the XCode 8 Application (to build iPhone Apps).

Meet Your Teacher

Teacher Profile Image

Sandra L

Front Development


My name is Sandy. I am a freelance Front End Engineer based out of Toronto, in Ontario, Canada.

- Check out the latest Learning Path Series :

React.js - Front End & Fullstack - React 16.8 + 

Intro to React: Getting Started - watch Intro to React: Learn the fundamentals - part 1 - watch Intro to React: Learn the fundamentals - part 2 - watch Build a Countdown Timer with React.js - watch Simple Todo List with using React & HTML5 Localstorage - watch React, Node.js - Build a Quote Generator with a Restful API - watch Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch Learn React Redux in less than 1 hour - watch Getting Started with React Router - watch Introduction the React Hooks - ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Intro: and there's the more we're gonna combine working with Time data locations. So we're gonna use the Google FBI to identify the city time zone. And this way, the local time off the selected city. We're going to use another FBI as well, which is gonna be up in with them up to get weather forecast data. So you're going to see that the process will be fairly simple, and by the end, you're going to get a fully functional with up, so that's begin. 2. Weather App Interface: Okay, so let's begin with the weather up, we're going to start with the interface, so I'm gonna start decorating a new exclude project. So that's gonna be a single of your application. I'm gonna need this one with her up. So everything is gonna be the same language. Swift off course, and we're going to target iPhones. Click next. I'm going to see these on the deck stuff, and I am also providing some assets for this weather up project. And that's gonna be grievance that we're going to choose to display as backgrounds. So you have Graydon one grade in 2 to 3, four and five, so we're going to display them randomly. So that's gonna be we're gonna have a function which is gonna allow to select randomly ingredients from here you need to display as a background. So that's gonna adds. That's gonna be for the decoration off the interface. So we're gonna add them actually right away. Let's do that because we're gonna take care of these shortly, so make sure that this one is checked and I'm gonna click finish here ago. And in order to get things organized, I'm gonna create a group right away. So that's gonna be so. I'm gonna select this one, you know? So that's gonna be the root folder. So that's click Onyx, right? Click. And I'm going to select in your group a year ago. So having your group and I'm gonna name this one credence, and then I'm going to select demo and drug them over. So as soon as you see that this is actually, like offering each insert you can release, and you can see that now, this is part of this group, single group, single group Credence here ago. So we're gonna go back. So we're gonna go street, actually to the main story board and start to create the interface. So I'm gonna go look up for are you? I image you and this one is going to hold an image. So one Graydon image. So I'm gonna add constraints. That's gonna be zero on each side, no margin, and then I'm gonna click. Add four constraints. There you go. Then I'm going to select a date frames and I'm gonna move this gap at the top by drugging these all the way up, we'll make sure that there is no gap okay, and then let's. And then that's select this one again, and I'm gonna click update constraints. So as soon as you no longer see the orange dotted lines, so you're fine. So as long as this is blue, this is what you're good to go Next, I'm gonna create an outlet, so I can programmatically used this imagery to hold recruitment image. So I'm going to select it, then press control and drag over to my view, can shoulder, then release. And I'm gonna name this one ingredient image. You click Connect Perrigo. So I'm gonna go back to the main store, worked for months to just leave those two side by side for now. So we are the bruising the assistant editor for now, in order to have them side by side. So I'm gonna keep this one selected, and on the right, I'm gonna have all these options here at the top of the image. I'm going to select one from the least that I have just added, like the 1st 1 green one year ago. So we're gonna have a first brilliant displayed. So let's turn the application just to see how it looks for now, So that's maybe just and interface with agreed in view here ago. So that is our view. And what we're gonna do next, also shortly is to allow to display randomly. So from this list, So either great aunt 12 34 or five. And also feel free to Google or to look up different president images. So just make your own selection, and we're going to see later how to use a function interview to randomly select Jamaica section within a bounce within the range. So we're gonna then be able to randomly display credence. We're going to see that shortly. So for now, I'm just gonna continue with the interface. I'm gonna go back to Standard Eater right here, and I'm gonna add a few elements labels that we're gonna use to display data information about the weather where the forecast for one seating furniture. So I'm gonna have a label here at the top. I'm gonna put it right here, and you're gonna see those guides that you can use to guide you. And I'm gonna release, like, right at the corner. Let me show you against Listen, as you see them, you can release We're gonna have concerns right away. We're going to take care of them. So one by one. So let's actually make this one large enough so we can display the time. So this label is gonna be for the time. So I'm gonna give this one like so and then I'm gonna add constraints right away. So that's maybe zero. Okay, you remove this one. Actually, 1st 0 and then they were at the top, so that may not be right. I'm gonna check right away, actually, because I'd like to have, like, some margin on the left and also at the top. So I don't want this to be, like, flushed completely to the left, so I'd like to have some margins. I'm gonna check. I'm gonna confirm the with and the height as well. It should be fine. 38 or I'm going around this up to 40. 124 the with and 40 for the heights. So I'm gonna add to or constraints. Here you go. So, yeah, actually, this is what I was thinking. So I'm gonna confirm of date frames, and I'm gonna change it. Try to it. So by going to side Inspector here for leading space to super view. I'm gonna add, like, 20 twenties about. That's about right. So that's the right distance that I'd like between the border of the edge and the left edge of the label. So we're gonna keep this as 20. Enter. I'm gonna confirm Let's do the same for the top here. Top space to doubly out. I'm going to select and change the constant from 0 to 20. Yeah, that's quite rights. Okay, So next, what I'm gonna do is changing the color off the text. So I'm gonna go back to attributes inspector and select here color. And that's gonna be once. Here we go. I'm just gonna put to your time for now. Just so we know that this is gonna be the time label. Of course, we're gonna need to create connections. So outlets, so from here. So what I'm gonna do is pretty simple. I'm gonna just select and press option in order to duplicate this one. Their vote super easy. And under me, I'm just gonna need to actually ethical my bed. So I'm gonna go back and do command Z at injured rights. You're gonna press on out option, then drag down, then really serious. And now you have a new label that you have duplicated from this 1st 1 This one is gonna be dates level. We're gonna add constraints as well. That sex here. So that's gonna be 20 for the left. Margins of leading or the top. So that may be too much. I'd like to have a distance between the first label and this one. So about 10 maybe we can arrange later on. Then we're gonna confirm also the within heights. Same as for the 1st 1 and then add broken streams. Hero. So I think it's confused right here, because actually, it understands this as being 10 pixels. Actually, it understands it as being 10 pixels from the tops of all the way from the top. So I'm going to do it differently, go back to thighs. Inspector removed this one completely. And actually, what I'm gonna do is I'm just gonna remove what's not necessary. So that is two that is extra. Same for this one. So I've got three, and there's one left to do. So what I'm gonna do, I'm gonna do it from here. So let's select this one, and then I'm gonna person control and drag here to go to Time label release. And then I'm gonna say vertical spacing and what I'm doing here is to create the constraints related Lee to the first label, which is timetable as opposed to the top age, as opposed to the top edge off the super view. I want to create a distance between the first label and this one. So I'm gonna select vertical spacing here ago, and now it's better. It's fun. So now we've got the blue lines football, so very good. I'm gonna need to know the one, and that's gonna be four. The weather descriptions are like, if it's rainy or windy, something like that. So we're gonna be able to read it right under the date. So I'm gonna do the same to duplicate this one. I'm gonna press an option, then dragged down release, just gonna check. So what is the distance between those two? So that is up space. So I think I'm gonna need to adjust that bottom space. Okay, so I'll need to just get your head, because looks like it's all the laps, so that's gonna be 10 year ago, and I'm gonna do the same for this one right below. So let's begin by adding constraints for top left. So here, I'm gonna go from 20. I'm not going to sell it this one. Then I'm gonna confirm 1 20 for the with and 44 the heights. Here we go. I may have too many Looks like, so I'm going to remove them. This one is extra. Okay, So regards. We've got the with the height and the leading last, I'm gonna select. So I'm gonna press control and drag and target this one date label released vertical spacing and from the right. So you see that this is giving us, like, a weird number. I'm gonna update to 10. So now we have 10 pixel distance between, like each of them. So this is, like, nicely distributed vertically. So next I'm gonna also of date. So we know what we have here. So that's gonna be description label. Actually, I'm going to write something which is more meaningful, like I'm gonna Right. So this is just hard coding information for now, So I'm gonna put windy here. It's gonna be a date like we're going to read. For example, October like 23rd random time label. It's gonna be like five. 40 PM, for example. Okay, so this is what we're going to read. But of course, it's gonna be dynamically rendered using data that we're going to get from a p r. So that's gonna be leader last. We're going to get here a big label to display the temperature. So I'm gonna get another that I'm gonna this time create from scratch. Thats dragging you one right here. I'm gonna make it like, almost square. Although it's gonna be no merger. Like so Okay, so let's add some constraints. 20. So I'm going to get this one leader. Maybe how may be right now, So 16 that see what it got? All Maybe right now. So 16 that see how it goes? That's gonna be 100 40. So let's round up to 150 with and Porter Heights to 90 year ago at work constraints, I'm gonna need to of date frames. And here I'm going to write something random. Like, um, that's gonna be I'm gonna use Celsius. Like for the temperatures. I'm gonna put 21 degrees and only this, You know, this little symbol of circle that I would get from somewhere the engine it like, just to represent. So for foreign night, you'd have I can't go back to preferring you to have something like that. And four degrees. That's a little circle that will need to get because it's not like something that I can type from my keyboard, so I'll get it later. But that's gonna be degrees. Just type it completely, okay? And then we're gonna increase. I'm gonna make it white as well for the color, and we're gonna make it bigger. So this do that from here from the phones size. So Well, for now. So we're not gonna get this. Um, God rather remove it, actually, because I expect to just have numbers and the degree Celsius symbol then. So I'm just gonna put it like so for now. And also for the phone to wait. It's gonna be actually not regular, but I'm gonna put it light like so for the description, I'm gonna make it bigger as well. The date is gonna be bigger as well. So that's 28. So let's do the same. So I'm just gonna simply type. It's 28 and for the time it's gonna be like, slightly below the values like, um, 26 were even lower 22. Okay. And I may want to actually switch them swipe position, having the date here and then the time. But while after it's just a matter of her consists, I'm just gonna leave it as is. And then after, of course, you can, um, customize and polish and then below. So right below I'm gonna have a label, though that's maybe for the city. I'm gonna put it here. We're gonna make it large enough so we can read. So which city? So, for rich idiots who were reading the data. So, for example, I'm just may put Paris gonna change the color whites. We're gonna make it to very large and then aligned a year ago. So what's left to do is to add constraints, So that's gonna be, like 47. So from between the label and tops up into the top, then confirm the with heights 50. Rounding up what's left to do is also to align this label in the centre horizontally and here ago, and I'm gonna confirm with date frames. That's it. So let's see how it goes. So for now. So this is what we're gonna do? We may change later? I don't know. Not sure. So what I'm gonna do next is anyway to allow to army add some margins for all of them. I'm gonna do that next. So what we're gonna do, we're gonna add some margin. So let's say we have some margin here for this label. That seems about right. So that's the right distance between this label and the left edge. So we made you about the same. And also what we're gonna do is to allow to display Brendan lease agreements, background. So we're gonna do that next. 3. Random Background: So what I want to do in this video is to update a little bit chilly out, first of all, and then we're gonna move on to display the great guns readily. So let's select, actually. So each of them, this one first, actually, we're gonna go to size inspector. And I hope that it may tell me information about the distance here, So maybe not. So what I'm gonna do is gonna be pretty simple. I'm just going to drag this one until he actually aligns with this label. Hoping that Is that hoping that this is actually going to give me? Yeah. Okay, so it's not gonna give me some time. It gives you a guides showing you that this is the line with one element on the view. I'm gonna do it differently. So I'm just gonna select this one and removed here, this one what I want, I'm gonna actually select it and drag control drag and select this label here. And from this dialogue, I'm going to select one which is gonna be leading. That's gonna low me to align with the leading information of this label. You see that? This gave me so this blue line. So this means that now this level is a line through with this one. So on the left side. So now I'm gonna kick this one selected out of date frames. And here as well, I have the information off the line leading, so it doesn't give me any constant looks like, So I may need to do it for all of them the same way. So that's remove it for all of them. I was hoping it would give me, like value, but we just, you know, re do it. Okay, so I'm gonna do the same. So here, I'm gonna confirm first of date frames. Then I'm gonna do the same. Control. Drag here. Select Leading. Here we go. Let's confirm then control drag. Too windy. Leading your ego. Confirm update frames. I mean the same. Select the time, Mabou and target this one here October 23rd release and then select leading and then of Jake Frames to confirm here ago. So now it's nicely aligned with the rest off the elements. Okay, so we've got a label for the city for the temperature description, weather, weather description for guest, the date and the time of Okay, So we're going to create also connections for those and for now. So what I want to do is to because we already have an outlet for this great into image. You. I want to create a function which is gonna allow to display randomly. So the background images, I'm going to remove this function because we're not gonna use it, so deletes. Okay, And this function is gonna be pretty simple. I'm gonna call this one display back, grown, and here I'm gonna crude index to get a random number that I'm gonna get from dysfunction with this function, which is arc for random uniformed bet six one permanent off type you into 32. Okay. And here we're gonna actually specify. So this parliament is used to specify arrange so meaning that with this function, you can rent only generate a number within a certain range that you're gonna defined by using this argument that needs to be of type you white into 32. So basically, I could get, like, sense. That's just one example, and I'm just gonna show you how it works. So I'm gonna print index, just gonna put something like a random number. And then we're gonna congratulate the juice. We're gonna be able to read in the console. So a random number that's gonna be each time generated. So each time that we Oh, we're gonna need to get my bed. Okay? Print index. Yeah. So the mistake that I do right away so is that this is expecting a type, which is you. I didn't 32. So I'm gonna need to wrap So this number within this in order to gets an object of type you are in 32. And here, then. But I was drink. You are joking. That's why it wasn't happy. So let's see now. So because this is a type your way in 32 So what I'm gonna do is gonna be pretty simple anyway, ultimately, we're going to use intelligence so we could actually do something like so we're gonna need to convert afterwards. So this index that we get from this function into an integer still not happy, so I'm gonna use the interpretation said that's just for demo. Okay, so let's try that. So here, I'm gonna call this function display background. Let's try. So let's move that to the side and we should be able to read. That's actually like in the middle. Random number nine. You see, let's run it again. So that's gonna give you a number within this range, which was gonna be, which is gonna be between zero and nine and now for so 10 represents the upper bounds, meaning that 10 is going to present the limits. So that's gonna be a number between zero money. So let's try that again. So you see the gist of it. So what we want is to create something random to generate something random, and we're gonna use that too, then generates a number and then display So an object random. And here it's gonna be an image. So let's see how we're gonna do that. So first I'm going to remove that, And here, instead of having 10 we're gonna have so let's see how many we have. So we've got five, so six is going to represent the upper bounds. So six is gonna be like the utter number, so it's gonna stop before six. So we're going to get a number between zero and six, and I'm actually realizing that I'm gonna need to date Just so we don't have because I'd rather it's gonna be It may be zero. So I'm just gonna date that. So that's gonna be 012 and then three for that's it's okay. So I just need to replace option words in my code with five, OK? And after that. So I'm gonna then assigned to greedy INTs image you and the party image that's gonna be you . I image. So we're gonna create an image image, objects named for the property, and that's gonna be radiance. So this is how their innate each of them. So I did that on purpose and then J peg for the extension. And right here we're gonna fast. So the number that we get from this, that's gonna be Index. And of course, I'm gonna need to rub this one, because otherwise not gonna be happy. We need an integer so that's not gonna work. If this is, this is a type you white inch 32 that's just for this function. So we're gonna get index best here, and that's gonna be calm. Been aided with this string right here because we're using the interpolation Houssine. So this is how it's gonna work. So let's now call this function from the view did load and try that again. So this time you may have we should have a different background image a year ago. So that's different. Let's try another one, Terry, go. So when you won again? So the other thing that I'm gonna do is I'd like to make those that will be bigger. So that's fine with this one. So I like the size of this one. I like to make each of them bigger, So Okay, so that's just a personal choice. Let's go here, attributes, Inspector and could increase the phone size starting with this one. So that's 30. So I'm going to make this one way bigger, like, maybe 35. 40. This one wind is fine, and this one is to be were bigger as well. Okay, I like this. OK, so we're gonna need to adjust the width of this one, so let's do that from the size inspector. So we've got the with here. We're gonna make it like 115 since. Fine. Okay, Pretty good. So that's also changed the front weights. I'd rather have something. Lights for the time and same for the weather description. It needs to be light. Perfect. Okay. And I'm gonna also drag those one down and because I have moved them down. So now I need to confirm update the constraints. So I'm going to do that here. Update constraints here ago. And now we've got the time and dates. So it's like a group. So this is related. And here we have a group to display the weather data information. Perfect. Okay, so that's cool. So let's try that. See how it looks. Okay, that's not about Okay, So next what we're gonna do is, um, naturally, I'm thinking that's that may need to drag them will be turned down because I'm gonna get so later you're going to see that we're gonna add in that bar at the top. So let's actually get them all selected here ago. I'm gonna have, like, here later. We're gonna have enough bar that we're gonna use to. I'll have, like, the action that we're gonna use to have a control and that's gonna allow to have an inner dialogue to change the city you create like so you can change the city and then display the weather information for that see and also displayed the time for this. So but now, because we have moved against of those labels, we're gonna confirm again with a day constraints, and that's it. Although we're gonna need to create outlets as well for the labels. But what we're gonna do right away, I'm going to introduce you to one FBI, and this one is open with the map, and we're gonna use this one, so we're gonna get a key as well. So I'm gonna show you how to set up a key in order to use to access their data. And so we're gonna use these FBI introduce who gets whether information about this city, and then we're gonna be able to then dynamically display whether information including the time, so that's gonna be a different process for the time date in time. So we're going to see that next 4. OpenWeather App API: So we're on the front page off the up and with a map. So that's a website that's gonna provide you. So I am right now on the front page of the up and with the maps with the main page, and that is a website which is gonna provide you with, um whether detailed information per city. So here we're looking at London. Great routine. So this is nine degrees Celsius for now. So this is night. So as we speak, you can also look up. So whatever you'd like So Toronto, for example, search. And of course, So there is a way to get so, um, information that you can then include in your application darkly. And for that, you're gonna need to sign up for an account right here. You're gonna be able to proceed. So I already have an account. So you simply have to fill out to create a user name and to your email password and confirm the password, and then just agreed to terms of service except around then credit account. So I'm not sure if you have to confirm in your in books, so just go through the process of creating and you accounts and then you're gonna be good to go, So because I already have an account. So I'm just gonna simply signing mistakes here ago. So now I am on my accounts of my home and here I'm gonna be able to get my A P IQ's information. So I think it also look at my services to Sure. Okay, So that tells you actually saw the limits of requests that you can do so per hour, Produced the pretend minutes every 10 minutes, you can proceed with 600 requests, which isn't bad. This is something that you can use for free, absolutely free. We're gonna go to that as well. So So that is something that you can use for absolutely free. So you don't need to pay in order to. And that's just for demonstration. So for a dame of projects, so that is gonna be absolutely free. And here gonna be able to get your A p I key information. You guys are creating Yuki. So we're gonna get this one so it defaults and let's go straight to some instructions as to how to use the a p I. So I'm the one that I like to use is the current weather data. So we're gonna go to this one to get some insight, so first you can look up. So first, you cannot kept with the CD name, So that's gonna be you have one example here of how to a couple with the sea name. So you're gonna have this. I'm gonna actually copy that. So you're gonna have this long string where you're going to specify your query, So that's gonna be with the seeding name, and then you're gonna be able to do that with the key. So let's go see if it's actually providing us with the way to set this up with a key. I'm not too sure. Okay, so here you've got the perimeters. I mean, which I think a response directly. The type of response that you get so that resemble that resemble actually the type of response that you get. So that's gonna be in a Justin ferment. So that's gonna be like a dictionary, a collection of key value pairs, and you're gonna be able to excess but values specific value based on the key. And you also have apparently, so the excellent formats But I think that the default format is Jessen. So I'm not too sure us to how you actually So that's gonna be the end person to separate. So that's really like So let's try on then. I'm gonna go back to get my key. No, actually, so no, it's not key. I just checked actually on a previous think is gonna be up I d And then you're gonna be able to get so the FBI key that was provided in your account. Okay, I'm already signed up. Let's go. Yeah. There you go. So here, we've got the details as to how you can set up your request. So you've got so here the general main string segments. So you're gonna start like this than the city and the idea this for I d and then the up i d . So let's go gets I think it's gonna be in the accounts. Perego my a p I keys here and here, so there's no quotes. Here we go. I'm gonna paste my peaky and then just click enter And here ago. So here we've got an example of a response that you're going to get for a particle this city, but that's pretty straightforward. Okay, so that is pretty straightforward. So here you have. So the coordinates, so cords that is short for coordinates. Then this is another dictionary that includes the information for the loan longitude and latitude. You can also close this one just to at some space, and then you've got the information about the weather. So here you have information about so the weather itself, which is clear description, which is clear sky. So we may use that as a description as to how the way they're used for a city. So we're gonna be able to read clear sky in a replication. I'm going to quote this one. So you think that this is a collection of dictionaries? Okay, so that's a big dictionary. That's then includes all the dictionaries. Then we've got me and he would have information that we're gonna need. And that's gonna be temperature. And that is actually in a particular format here. Ah, you need of measurements, which is Kelvin. So we're gonna need to convert that from killed in into Celsius. So that's something that we're going to do then. So when we get the information which is here a double. So we're gonna get strings. They're actually doubles as well for the longitude and latitude for the weather. So that's gonna be obviously a string here, so we're gonna need to convertible of things before we can actually display them. You know, we've got information about the wind as well. The clouds. So basically, we're going to actually use this information here. This as well. We're gonna use that as well. And also, I think that's about it for the name we're just gonna use to full for the name. So and also Danny. Okay, so next I'm gonna show you. So how to then, do a query? We're gonna use the same Euro energy to perform a request, and then that's gonna allow us to then include those data in a replication. So we're going to see that next 5. Download City Weather Data: so back in our applications. So I'm gonna create We're gonna create an extension from this view controller, meaning that we're going to keep things, um, segmented, so to create an extension. So I'm gonna do it from here, So that's gonna be extension. And that's gonna be accurate. An extension off these view controller here and then inside. So what I'm gonna do is deal with everything which is related to downloading data from the Internets. So I'm gonna call this function. So that's going to get city, whether data and this function is gonna take several permanent, starting with a string mural, and that's gonna be of type string. There were gonna get to completion, and that's gonna be used to then return those information that we're gonna download from the Internet. So here we're gonna get first the weather, Then we're gonna get, um, description. And also we're gonna give the icon. So I think that's about eating good back to actually the browser eso we said that we were gonna get so the weather information. So I'm actually I think we're gonna use this Well, the coordinates. So I should get that as well. Well, maybe later. So that's gonna be a different part off this tutorial, which is gonna be to use the coordinates in order to identify the times of the city's so we can display the current local time. So that's gonna be later. Let's go back to our code. So, actually, as I was saying so, probably what I'm gonna do is actually adding here, So that's gonna be let's. And that's gonna be as double. So we're gonna use that as well. So let's see what's, uh, needs to be changed. Okay, so in certain underscore for each of them Okay, so that is the new sweeped three syntax here, let's close this. Okay? To have a bit of you. Looks like I have an extra Berenice is here. Here we go. OK, so we're good to go. So one of them do is we're gonna curry to hear a request, and we're gonna be able to create a request with the euro. So that's the thing that we're going to start with. So from this train mural that we get here, I'm gonna It creates a one year old, and that's gonna be off type Europe because we're gonna need to perform an http request with an actual our euro A week it was gonna be here. Actually, this one. I'm just gonna call it Strength City because actually, what I'm gonna get here, it's like, this is actually what I'm gonna get here is the city that we're looking for. So that's gonna be Euro that we're gonna do, like with one partner, which is gonna be a strength so here ago. So we're gonna do you have a query using this? So this string girl So first it's gonna be a strength, and then we're gonna convert it into one euro when you're a performance. Okay? And here and here's so we're just gonna replace I'm gonna make this like level. So just in case that you need to replace the A P I key, so I think it's gonna be more manageable to do it from one location. I'm just gonna remove that and I'm gonna create right away. One variable on this one is gonna be a P I key. Actually, I'm gonna call it like a p I I i d. So I'm just gonna keep this segment. So that's just the a P I key. Here you go. So then it's gonna be, like in one place that you can change it. And after that, so that to me just explosively specified that this is a string. And after that, I'm just under used the interpretation sick. Next to then refer to this P I I d variable and unwrapping because this isn't optional. And also next, right here with guts here, hard coded. So the city. So we're gonna pass this as an argument. So which ever values past as an argument? So when we look up a city so that's gonna be right here. So we're gonna use this strength city value Mariner to pass the name of the city. So for which we want to get and return the weather information, That's also okay, so that is actually a P I idea. Okay, so now we've got our year old that you were creating, So with this function your own. So now what I'm gonna do is creating a tusk. So that's gonna be let Tusk. We're gonna do everything on one line. That's gonna be first with Euro Session jury and then did a task with your own gonna proceed with a request using one euro. So that is this one that takes one per minute, and that's gonna be this one with your own. And then we're going to get from this request. Still in return data and also response and air and error did. There's in your and this is what we're gonna do. We're gonna check first. If we have any air by Doreen, they Erin you so then we can proceed with the rest. The other thing we're gonna do is check eight. We've got Valley data because we may not have some Valley data by doing this request. So that's gonna be we're doing So here. Optional chaining. Meaning that we're doing a comparison to check if first we have so existing information for the you know. So this is checking. If yes, And if it's true, then it's gonna sign. So which ever value to data valued. So we're gonna be able to then use data valued and we're gonna do do catch to then purse the data that we get from this FBI requests. So that's gonna be so We have a response, which is, and Justin Format. So we're gonna get a Justin Dictionary and we're gonna parse these, Jason. So first we're going to try. So this isn't do try by doing Jason serialization, then just objects. So we want to get justice, object from read about it that would get here. If it's good, then option is going to be immutable, congeners. And that's gonna be as Anna's dictionary. And if it's good, So we should be able to print something which is similar to what we've seen in the browser , something that we're going to get one dictionary I have to finish to complete my do catch. So meaning that if there's any air so I could prints, for example, that description of the error and that's gonna be used for the bugging. If there's any air localized in description, it is doesn't seem to be to completing, But I'm just gonna write it completely. Okay. Oh, I am missing one important thing here. I'm sorry. So I wasn't that we're doing here an optional chaining and you do that with if lets the meaning that here this is an if comparison and then you Carina Constance, from this. So if this is true, then you create a constant so he'll it's confirmed that as well. Okay, so we're good to go. So now we've got So there was just one less thing before we actually run this. So here we're doing, so do try to parse the Giessen, and then we're going to start by simply printing. So the dictionary, which is returned as a response So that's gonna be this data that we're gonna get so Internet to perform a task. So that is something that you're going to do less. So first, I'm just gonna keep things organized. We hear this is the Jew, then you have got. Then you've got and if and if as well. And then you've got your task requests so that he's test, and at the end of it, you're gonna do task resume, and that's gonna be used to then execute the request. So you need this part? Absolutely. So that is important in order to execute the request. So then we're going to call this function from beauty load to do it from the start. So for now, we're not gonna use any information because we're not using any completion. So that's just gonna be for the city of course, we're gonna need to then specify here. I'm gonna put Paris to begin with, and then he we're gonna need to. Then we're gonna complete with the code later. So for now is just, um we've got a lot of things that were going to pass here after doing the request. So But for now, we're just doing the test for this function to see what it actually returns. And I think that here normally you expects doubles. It's not happy. So instead, I'm just kind of put 00 00 just one time, OK, but seems to be good. So we're gonna be able to run a tests, and at the end of its we're gonna have a completion. That's gonna be one. Everything is good to go. And this is expecting. We're just gonna put, like some Rendon's dummy values because that's gonna be then completed with actual data that we're gonna get from this appears. I just want to actually do a test. Okay, so here, then we would get, um, stuff like so strain than devil here, this train. 12 then a double. And then another double here. Okay, so let's just pretend that we actually get something in return. And I think that here is not gonna be good, because supposed to be. Yeah. No, I think it's fine. Okay, so let's run that. So what we want is to see what we get back from these AP requests. So here. So we passed city information here, you see? So that's gonna be parents, so it's gonna run so and a p I request using the information for parents. So let's look in the console. Okay, so there's nothing here, and that's because here you can read. 6. info.plist: So in this video, I'm gonna show you how to remove the restriction which is related to downloading from any, um, source source from the Internets. So we're gonna so we're going to remove that restriction. So by updating the info police, so we're gonna add an extra Parmenter. So here, this is a private least and you've got here. So all the barriers for your application and you can also have it in the source code format by selecting source code. And this isn't XML format, so that is actually a big dictionary. And each firm owner comes with the key and one value, so that can be of any time, so type objects. So here you see a string. So sometimes you also have bullion here. This is a 1,000,000,000. So this is true. So here this isn't all the parameters. So a key, then the value which is a strain. And for this one, you actually have in every. So that means that it can include different informations of values for this para meter. So this is so I think this is related to the type of device processor for the application. The same for this one you can actually specify so the so for what type over. So here you connect And for this one as well, this isn't a race you can actually specify. So for what type off orientation for this application is so you can specify. And this one is also with this permit or so that is injury for the value, and it can specify. So what type of orientation is supported for these applications of poor treats? Landscape fanciful. So we're gonna add one extra, remember? So that's gonna be that's going to resemble this permit. We're gonna have a key, and for the value it's actually gonna be, that's gonna be one key inside of it. We're gonna have another value, which is gonna be a type of bullion. So let's go back to that's gonna be easier to format by giving. So let's go back to we're gonna go back to the for Mets parade a list, so that's gonna be easier to date and from here, So you're gonna click Plus to have an extra field, and we're gonna type and this up transport her hair ago. So that's just up transport, security setting. So that said this one the 2nd 1 So that is up transport, security settings, and you're gonna see that it's gonna change to a dictionary. So basically, here we're just added one extra para vender, which is a dictionary. And now inside this dictionary, we're gonna add another key value pair we're gonna click plus, and this one is gonna be this allow arbitral reloads. So that's gonna be a boolean. So that's not enter. And we're gonna update to the value of this 1,000,000,000 to Yes, let's stab over to here and then select Yes, Syria go. And that's gonna allow to load data from any Internet source of regardless of the particle , which is either http or https. And I want to show you before we go back to the view controller. So how it close as a source code? So you're going to see that now at the bottom, we've got this extra key. So that's the key. And then the value, which is a dictionary that includes another key value, keep out the apparent. So that is the keys of the one that allows do then do arbitrary loads from any Internet source. And then it is set to true. Okay? And you could also have dated from here, So if you like, you could actually said it to false, But this is not what we want. So we're gonna put it back to truth. So we're gonna save and then go back to view controller. We're going to run again on this time, we should be able to read in the console. So the detail off this response, which is a dictionary year ago. Let's go bigger. You know, it's actually all the way to the bottom. So, actually, just check your console at the bottom. You see that? This is similar to what we read in the browser is the first we've got. So we've got the clouds. So the coordinates that we're gonna use look like this little bits of the order is different. So we've got the coordinates. We're gonna use that. So we've got the key here. That includes another dictionary with let and long. We've got made as well. So this is what we're gonna look at with the temperature here. We're gonna take this one. We've got the name. So the name of the seeded that we're looking up and I think it's about it we're gonna use also weather for the description. We're going to use that as well. So we've got about four thing that we're gonna look up and we're gonna go into details about that. So we've got the dictionary, so that is the highest level. And then we're gonna go down the truth to select so which ever dictionary that we want to use in order to then extract the value corresponding to what we want to display in a replication. So let's see that in the next video. 7. Getting Weather Data: So we've got the same in every console, so I just want to show you again. So this is actually the highest level off the tree. So are Jackson Ferment. So here we go. So I just wanted to show you again in the browser, because for now, I'm using a pretty format. So that is actually one, um, chrome extension that you can use, which is called Jason You just to make it look prettier and also easier to read, because you see that this is called a coded. So first you got the key than for each value of this is in blue. This is double formats, and in business trip for Memphis is green. So you could certainly use Do you could certainly use this just in view. Crume extension. In order to make the response off your A p. I requested a prettier So we're gonna look at this dictionary with the key court shortfall coordinates. So we're gonna start with that. We're gonna need to look at this one as well. Weather and main for the temperature. So I'm going to start with, uh, cords, which is good. The uptight dictionary, actually. So we're gonna get that from this one. And that is the key, This one chord. Now that's gonna be as Ennis dictionary. So we're gonna go step by step. So let's take her the coordinates for now. Then we're gonna get the let coordinates, and that's gonna be from cord this time. So we go down. So one step lower and then regard target this one, which is gonna be long. So we want to get the value for this key. And that's maybe as double here. We're gonna do the same for Longitude on my bed. I didn't reverse actually. Here. This is gonna be first lots going to start with this one, and then the next one is gonna be longitude. So both of there is gonna be a type double. I need to confirm for each of them. Okay, Next we want to get So you said that I wanted to get the weather information. So the description. So we're gonna go first, the step off weather that's gonna be from hears from that level, which is just addict. And then we want to get the value, which is actually this diamond array. That's good. Um, think to notice here. So here, the secretary type format parade. So you think that this is so you see that this is square brackets as opposed to curly brackets. So that is personally that may include several dictionaries. Maybe, but for now, we're gonna target. So the first sediments of this one. All right, let me see. Yeah. So that's just injury here. And then the dictionary say Okay, so what we're gonna do is then get, um that is weather. I'm gonna need to do another step, which is gonna be whether Zero. Because I'm gonna need to target than the first object of that collection, which is then a dictionary inside. You see, that's inside Missouri. So that is one down. But this is one dictionary object. Let's review weather. And then first, I'm gonna do zero as dictionary a year ago, and then I'm gonna be ready to get that information, which is the description. Let Dexter, and that's gonna be from weather zero. And that's gonna be for this. Keep description, which is gonna be a type string. Next. I want to get so we said the temperature. So that is another dictionary that includes another dictionary. Actually, That's a dictionary. My bed. Okay, so that's going to copy that. And this one is gonna be I'm gonna call this one main just just see. Clear. And then that is, um, for the key main and then inside this one. So I want to get the temperature that's gonna be 10 then from Maine. Gonna get 10 and this one is gonna be as a double as well. So I think we've got everything. So let's just, uh, do a quick check list. The first we've got the weather, the weather is gonna be this one. And description is gonna be this one. Actually, this is this one. Okay, so I am missing one. Um, so you have got the weather. Okay, so I should have called attempt weather. Okay, so we've got the weather, then we've got the description, which is gonna be here, then rip cuts the longitude and latitude, so that's good on it for good. So we're going to be able to then passed this in the completion handler here. So starting with we have first, we want to get the weather, which I think should be actually. Okay, so I'm gonna change that to a double, because that's actually double. So I think that's why I was confused. So that's a double that we should expect for the temperature here. So this is here. Double gonna best 10. It's gonna be this one. And then for the description is gonna be a string that's gonna be desk. Then for the third, it's gonna be the icon. Okay, Yeah, we forgot the icon. Actually, I'm going to use the eye contractually disclaim like your little registration, like next to, um, the weather description. So that's gonna be this one, and we're going to need to do another. There's gonna be another query that we're going to do with thing the query. But that's something that we're going to do, uh, later time, but for now, which is gonna get its because we're gonna just leader. So we are in the state where we're getting so the data information. So that's gonna be at this level, actually right here. Gonna call this one Aiken. And that's gonna be whether zero I'm gonna get so the value for this key icon. So that was what was missing. So right after description, I'm gonna get the icon then next I'm gonna get so latitude and longitude. So that's gonna be those two here. That's cord and then long cord. So if this is all good, so let's go back to the top. So, actually, what I'm gonna do at this level is so let me change a few things here. So to make it more clear, actually, I'm just gonna remove all of that and just retype. It's gets EU weather data. So I'm gonna pass Paris as an argument. We're gonna look it up for Perry's. So, first we've got a double which corresponds to the temperature. Then we've got So let me go back. Because description and then like, are you OK? Description icon. And finally loud and log. Okay, that's a lot off data. So we're gonna prove them. So first I'm gonna prince. That's gonna be the temperature is. Then we're gonna best him next. Uh, gonna prints the temperature is not very. We're just gonna put camera temperature isn't here. I'm gonna put the description from the same line. The icon we don't really We don't really need some Just put let's and then passed. The value returned here has left and then along finally, which is going to do with this return long? Okay, so if this works all properly, fine, probably, and find we should be able to read it And consoles of this, including toe Which of the values return. So the data that we get from the request and also that we pass as argument values using the completion right here Let's do that. Let's run. And here ago. So here, you see that you've got so the information that we just got actually that currents phones too. The request. The return that we have here it's attempt to 80 49. So this is the same that we read. So that's clean. So that is precise, accurate. So that is accurate. And also the description and finally, the Latin long that we're gonna be able to use to then get the current political time. So what wanted you next is to them display. So here, going back to our storyboards, we want to display those information on our interface. We're going to see that next we're gonna need also to create connections 8. Temperature in Celsius: So now we're going to create outlets for those labels so we can programmatically display the data that will return from this appear request. So we're gonna create that right here. So starting with here that time. So as we're here, So we're gonna do that, actually later to get the local time. So that's gonna be first time legal, and then it's gonna be date legal. Then we've got So this one is gonna be description label. This one is gonna be attempt label. Okay, so that's about it. And for the Latin. Um, so that is actually information that were used that were going to use for another purpose later. The Phanom, it's just stick here off displaying that. No, I'm just gonna Let's just I'm gonna quit. Commence just to leave it to Plaza de Mayo. Now, I'm just gonna pass the value returned in this closure to first. That's gonna be description label, and that's gonna be tested. And then time on my bed temp label. It's gonna be 10. That's it for now. So that's around this. Oh, I'm missing something. So let's go to standard meter. I was just going to test, so we have so the label object. But what we want is to assign so the string value to the text. Very so for every label, you haven't expertise. So this is what we're gonna update in order to display some texts care about? I'm gonna also because this is a double here. So because we're passing here it as a double, I'm gonna need you also does this within the interpolation, so it can extract the value and then displayed as a string. Okay, we're good to go. Okay. So he took sometimes to have date and also looks like it's bigger because actually, the number the value which is returned is not degrees Celsius, but this is actually Calvin. So this is a longer number like, actually, what we have is to 80. Let's see what we have here. Okay, so there is also this information that we're gonna need to look at because what rendering at the same time simultaneously is to download data in the back thread and we try to have date the u Y at the same time. So, in order to force the u y to date, as we down with information from the Internet So there are two things that we're gonna do. We're gonna convert the temperature to Celsius degrees that we're gonna be able to read in our replication. And also, we're gonna allow to perform this request in the back threat. And then of Jacob, you eye on the main threat. So in order to convert from like you have, like here, Kelvin, you see this unit of measurement two Celsius, which is gonna give us, like, for example, the free type that was to 80. That's gonna give us the right value, but in degrees. So that's gonna be simple. The calculation we're gonna need to actually, um, we're gonna in structurally, so that's gonna be fairly simple as a calculation. So I looked this up before, so we're going to subtract whichever value and Kelvin, we're going to subscribe. That is actually pretty simple to get the value, actually, so basically, you can just simply substructure The value is to 73 15. So, of mate, I've looked it up before, so we're just gonna subtract this value from whichever value temperature that we get from the request. The request, in order to get that insult is and as we hear some just gonna get this symbol that I need to use. There's gonna be this little Well, maybe from here. Here, I'm gonna copy that. Gonna do inspect elements to get the content. And I want to use this, um, symbol. It's it looks like it can get this pretty small girl. Just no, copy it. So let's go back. So what I'm gonna do first is getting so Tim cells just we're gonna make a quick calculation first. So that's gonna be a temp minus. So we've got, um that is to 73 50 and then I'm going to replace this with here cells just And also, let's go back. So I'm just gonna allow this to be executed on the main three. So that's maybe with dispatch que main and then a sink, So that's gonna be for asynchronous so, and that means that we're gonna be able Children simultaneously. So multiple functions so one in the background to download the data from the Internet and then update the Y here ago and then that snippy inside this one that we give them do the completion. So let's try that this time. And here ago so that's not large enough. Still, I'm gonna update. So here, the with of this label. Let's go here. Because now we've got, um, this symbol and also these cells just digger symbol that we need to read. So we simply need your updates the with. So we've got 250. I'm gonna make 200 because we have room anywhere. Should be fine. That's run again, man. Here ago. But that's still, um, let's dry 300. Okay, so that's better. But I think like it's pretty too big. So I'm just gonna date this time the phone size because I got way too big. Let's try just below 100. I think that I may want to turn that into an integer anyway, so I'm gonna convert that into an integer. So let me just update that at this level, which is gonna be here, and so we're gonna have seven degrees then and here. So that's way better. So something I would do is for me. Makes so this, um, this part Celsius I didn't want to have just that. I'd like to have just like the symbol, So let me look up. I have a degree single, You know, I go. That's way better. So that's where the West has not gonna help. Uh, we're gonna get this. So only it looks like I can compete this one on Lee. And that would work. OK, Final. So what we're gonna Dix is to allow it to desert. So we're gonna be able to search for a different city and then display whether they de for another city. So we're gonna do that next, we're gonna have enough bar and also the options to click and have an inner dialog. We're gonna be able to perform a search. 9. Change City Alert Dialog: So now we're gonna allow the user to do search. So we're gonna have a navigation bar here with one control. So when the user click on it, the user will be able to There's gonna be just one, Phil, there's gonna be just one field so the user will be able to write and you see the name to perform a search. That's gonna be a new FBI request for the city that has been searched to displace when your information here, including the local current time, the current local time. So we're gonna do that's that's gonna be a different step. But for now, we're just gonna allow to do the search. So we're gonna add a new element here. So that's gonna be navigation bar right here. We're gonna add some constraints. So go to totally out. Let's say like this one, it's going to be zero on each side on for the height. We're just gonna make it slightly bigger, like 50 a year ago, and we're gonna need to then updates of date frames here ago. So here, I'm just gonna put I'm gonna call this one with up could have been like we could have used this. Actually, this area too, you know, display the time that it in time. So that could have bean Great as well. Justin Option. Just a thought. So what we're gonna do anyway with this navigation bar is adding Barberton item right here to add a control. So we're going to select this one and then change this one to add. That's gonna be plus here ago, and then we're gonna link and action to this control. So that's good. Toothy assistant editor. We're going to select the view controller and make sure that we have so the view controller . So I'm gonna do option. I'm gonna click option and then select few controller to have it. My bed. So, Assistant editor. So I'm just gonna make them equal for the display. I'm not going to get this right side, so I'm just closing it. So on the left side, that's gonna be the storyboard and writes I'm gonna keep my finger on options select view controller to display it on the right here ago. So then I said that I was gonna create here an auction, and that's gonna be for the dialogue. Okay, So looks like we have selected the right one. So this is your Barberton item. But just in case so, you know, confused between selecting So the never which could be the never you know than that power or the Barberton item. You can go to the documents outline and make sure that you select the right element from here. So you've got here. You're a navigation burn than the title than the right Barberton items That could be several that could be several and then the add button. So let's do it from here as well. So here I'm just gonna do that's gonna be open dialogue because we're gonna use this action to actually here. That's an action, something So that is an action. So make sure to check to change this from outlet to action than connect year ago. So we're going to use this faction to actually trigger up on a dialog box that we're gonna use to get information from the user. And from there we're gonna perform another request, another NPR request. So I'm gonna go there to create these function. Actually, I'm gonna drink right Butto, Let's go back to Standard Editor view controller so right below this action. I'm gonna write Change City. So right below the action, I'm gonna call this one alert dialogue, and here I'm gonna create. So the different parameters noted to create another dialogue, So that's gonna be an object that's gonna be alert type view. Why you I alert controller, so it's gonna take several permanent. So here it's gonna be this one with the burner for the title, that message and also the perfect style. So the title of this dialogue, So that's gonna be we're going to read Select City. There's not gonna be any message. I'm just gonna leave it. T blink. So for the type, that's gonna be an inert they're ago. And for these other, we're gonna have one single text field, and this one is gonna be Citi Field. I'm gonna call it. Have you? Have you have type you white text field? They were gonna have one control just to confirm once we have selected the city's. So once you have entered the seating in, we're gonna have one control, and that's gonna be an action to confirm the entry. So that's gonna be you. I alert action and we're gonna have also some parents for this class, and that's gonna be first title. So that's gonna be we're gonna read. Okay, so we're gonna click, we're gonna be able to have so this title and we're going to click on it to confirm. So the new entry, this dollar is gonna be default then after that. So that's gonna be so the action that we're gonna confirm with, um, first of all. So that's gonna be the city field. So that's gonna corresponds to the alert. First fixed filled, the text field. So we have several. So that's gonna be a collection, and that's gonna corresponds to the entry. Ah, the first entry so that the enter of the first fixed field of that collection and we're gonna have also another control and that's gonna be the cancel button, just in case that we change our minds and we want to go back to the main and that we want to go back to the main screen. That's gonna be the same. You I order action here. That's gonna be we're gonna read, cancel Same. It's gonna be default for the alert, for the style. Sorry. And for the for the action. So that's just gonna be blank, because that's just gonna be like it's gonna dismiss the controller. There's just gonna be blank. So that's gonna dismiss the controller anyway. But we're not going to perform any action as a result of clicking on this council control. So that's just gonna be dismissing the controller. We go back to the mainstream, So here, this is expecting an expression. So let me go back when I am missing the Prentice's here in my bag. It wasn't the action here in Prentice's, Okay? Finally. So what we have to do is to then add so the text field to this alert, so that's gonna be add fixed, filled. So that's gonna be the configuration handler. That's gonna be the CD field that we have, like here Citi Field and for this city field. So we can have also a placeholder. It's gonna be this one place holder, so we're just going to read something like CD three ducks. And finally we're gonna add also those actions. So the control. So that's gonna be first. Uh, okay. Action with action. Sorry. First at action, and then that's gonna be the Cokie Action. So we're gonna add those ones and also be cancel action election first and then cancel action. Finally, we're gonna allow to also present these Controller, that's gonna be with presents here. That's gonna be the controllers of here of type you. I heard controllers, and that's gonna be alert and he made it. So yes, that's gonna be true. And then the completion. So that's gonna be no. So we don't want anything to happen. So once this is presented so that's it. We've got our alert dialogue that we're gonna then open. So when we click on this, unless button basically so we're gonna try. That's just to see that everything is connected properly. So I'm gonna click like to make this one a little bit larger here ago. So now you you can read. So the title of this dialogue, which is select city, we're gonna be able to confirm by just looking OK or cancel to go back to the mainstream, and what we're gonna do next is we're gonna have another functions to actually change the CD. That's gonna be funk change CD, and it's gonna take one. Perretta here is gonna be string up types dream, and we're gonna simply for now test that this is actually printing. So I'm gonna put changing City and see if we can actually read the city that was entered by the user, you see, So that's gonna be passed from here. And actually we're gonna invoke. And actually, we're going to run this section, so on the okay, actions are right here. So that's gonna be self change. See, right here and we're gonna pass, actually, So which ever value corresponds to the text build that the user enter? We're gonna pass this right here, and that's gonna be seated filled. And we're gonna pass, of course, of the value that corresponds to the text because that is so the texts are value of the U I text field, Citi Field. So let's try that. So we're going to trigger the other to dialogue, then run this action on the okay action to change the city and read. So this information changing city and the city that was entered by the user, Then let's try that. Okay, so I'm gonna try London and I should be able to read London in my console here ago. Channing City, London We know that it works. And now what we're gonna do is allowed to perform another FBI request in order to get the weather data information for this city London. 10. Weather Icon: So in order to get the data information for this in your search, we're going to run the same function that we have here, which is get CD weather data. It's maybe get CD weather data and passed. City has an argument that Texas train and then for the completion. So then it's gonna run. It's gonna perform the search first for that city and then return information that our first, the temperature, the deck. So that is very similar to this. We're gonna have an icon as well that we're gonna display later. Then we're gonna have a lots and also longitude data. And basically what we're gonna do is just updates of the value for each labels by simply Compean basting because whatever is passed as information here and then return, it's gonna be then assigned and updated. So that's gonna date the u Y. These and face. Let's try that. Okay, so let's do one search. We're gonna try again in London, okay? And here ago, So now we see that this is nine degrees and looks like this is clear sky as well. For London the story Toronto because I know that this is rainy, right? now internal. And yes, this is 18 degrees. So that's not too bad for the temperature. Although this is light rain that's trying of the city. Like, um, you York. Okay, we've got an air here, and that's something that we're going to need to do later for any city with that includes two words. So that's something that we're going to need to control when it's two words. So how this is returned. So, actually, we're going to go back to the websites opened weather map. That's gonna be pretty simple to have dates syringe to fix. Or And I'm gonna do a search for this city, New York to see how this is returned. New York with a plus looked like, Okay, so when you have two words So what we're gonna do is check a for actually have a space. So we're going to replace and his space with a plus sign. So that's something that we're going to need to do at this level first. So that's clean. I'm gonna go back here. So what I'm gonna do is like here. I'm gonna do that's city. I'm gonna put filtered. I don't say another word. You name it and what I'm gonna do is it's gonna be String City, and we're going to replace um, we're going to do We're gonna use this one which is replacing occurrences. So we're going to search for in your currencies up space because obviously, we're gonna types in New York with the space in the middle. So we're gonna search for any space and then replaced with this with a plus. So meaning that if you do a search with New York with, um, a space, it's gonna be then replaced with a plus Logically, Eugene, New York like in two words with the space. And then and then here it's gonna take care of filtering to search for any space and then replace that space with a plus. And then we're gonna use that to do to run this. I'm gonna put a brick points because we're gonna inspect that before the break point is going to allow to stop the execution of the program. So exactly at the points where you have put your break points and we're gonna check in the console if we actually get in return this type of euro, which should be with a plus If we do New York, So okay, we have, like, OK, because we're already have a search for Perry. So that's why it's stopping there. Let me just continue. Continue. Continue until we get okay. So now I can do a new search. New York. So it's going to stop again at the same level. So now we're gonna make this one bigger just to inspect, and here you can see that you've got this time New York with a plus. So this time we're using So the same let me remove that space. So we're using So the which everybody was passed by the years or and we've replaced the space with a plus. So now we know that this is good. So let's continue going. Actually turn this one off like so and here ago, looks like this is allowing us because now we've got something a different type of description that allows me to see that actually, this label is not large enough, so I'm going to select it. So maybe we can Vickers slightly the phone size, and then we're gonna make the with large as well. So this is 1 25 now, I'm going to make it like 200. So we're gonna make So we're gonna make the same search for New York just to see so we can read. I think it's few clouds, maybe is trying to New York. Yeah, a few clouds. But that's good. At least we can read it. So the other thing that we want to do is to display this icon. So we're gonna have so this, you know, this information right here that we could return from the weather information right here. Okay, This icon. And that's gonna be another type of query, actually, because this isn't like, um and this is used in a strain from the image. Actually, to get the icon, we're gonna go. So we're gonna use actually the same starting point to the same segment to do the request and instead of having like a euro, so that's gonna be the image followed by W and then specify the code of the icon, which is Richard. So let's look at one example here. So although there's no i p i Q, so that's not gonna be valued. So I'm just gonna replace with whatever we have, and I would project you controller, and we're gonna use here this a p I key. Here you go. Let's run. OK, so now we've got these icon I D that we can use in order to return like an icon like to illustrate. So the description of the weather. So we're going to do that. So we're gonna need to do another call with one euro. So that's gonna be another http request. Let's go back. So, actually, um, here in the extension, we're gonna have OK, we've got this function. So right here, I'm gonna write funk download whether I come and we're gonna have here. So that's gonna be image I'm going to write. Or I should actually call this one icon I d cookies. How it is. So this is how you should understand it. So this is an icon I d that you're gonna get so in returns from this PICO that we're gonna use to then return a Ditto and we're going to use that to then create an image. But that's gonna be image data data. It's been a return void, and we're gonna proceed, just like for this here request We're gonna perform a test. But first we're gonna need to formato one euro, and that's gonna be using this year. All formats. We're just gonna need to replace these segments that corresponds to the icon. I d. Right here. I'm going to copy it, and then I'm gonna post this right here as a strain. I'm going to replace that with I can I d And then this is going to allow to then create a euro. And we're going to use that to then run a task, a request. But that's gonna be tusk. And then your real session shared did a task with your own. And then we're gonna get so that's about the euro as a permanent, we're gonna get to the end Edo a response and Aaron So that's gonna be exactly the same process here. We're gonna need to check if there's any air. Then I'm gonna check if the data that we get from this you're also checking if this is actually a good requests, because theory alone may be wrong, you know? So I'm gonna check if data okay, equal to data. So that's gonna be an optional chaining. If let's and then I'm gonna do a do catch And these And if there's any air, I'm gonna print a description of that air with localized description. Here you go. And I'm just gonna need to actually return this data. If this is good and that's gonna be data, OK? And because we're doing that on the back threatened, I'm going to remember also, just like we did right here to run bats on the main threat. And that's gonna be with dispatched Cube main. They sink, never the cubes, and then we're gonna run. That's do you think, execute? And then we're gonna run. That's on the main threat. And we're gonna run this action. So that's gonna be at the level when you actually know something that we must not forget. So let me just organize everything, So I'm gonna do come in a and their control, I just to see where we are, remove some space as well. That's too much. So we have to do here. It is that if here this is another. If finally we've got the task here and so we're gonna then resume the task in order to execute this one. Okay, so then we're gonna call this function at this level. So first here because we gots this icon information that we're gonna use that we're gonna pass here. So that's gonna be download with it. I come, I'm gonna press these Hasn't argument. Then I'm gonna get a Dedham in return so I don't have any outlets to display this icon, so I'm gonna create that right away. So that's something that we haven't added yet. So let's go back to the main story board. So I'd like to actually display on I cone close to here. Let's see if I should make. Actually, this label, like 170 will see. Okay, so we're gonna add one label. That's not gonna be a label. My bed. That's gonna be actually a little U y. Image. You. So the height of this oneness 40. Okay. And that's been before you buy 40 then we're gonna do it 40 by 40. So let's begin by adding or within heights 40 by 40 a year ago from my bed, I replied this to the labels. I want to say that the image you this time Okay, so that's gonna be 40 by 40 for these you image. You then we're gonna then select this one and then apply here original spacing and for the alignment, I'm gonna make it equal to the top level of this one. So that's gonna be here top a year ago. So that's gonna be a line to the top off the label. So that's confirmed. This of date frames that select again and then of date frames. Perego Looks like it's fine. So next I'm going to create an outlet so I can actually programmatically display an image for this image. You right below this one. Maybe so I'm gonna call this one. I come image you, and then let's go back to Standard Editor to update our function here. So, inside the closure, let's confirm this one. That's gonna be self because we're inside a closure here. So then what I'm gonna do is icon, image view image, and then we're gonna create an image using this data that's gonna be image with this murder data. And then we're gonna pose data to create an image from these data that we have downloaded and got from this MP I call here. I mean, it's not the a P I call, but that's more like an inch to to be requests using this string. Ural here. And then we passed the icon of the information because so let's from this. Okay, so it doesn't seem to work. So let's check why Going back to the top where we've got our function Serve. You did load, actually, right here. So this is actually this parts James city that I haven't dated. So this is only triggered when you actually have the user clicking on the button the plus button to open the dialogue than entered city and then click. OK, so let's do the same for you did load as well. So that's gonna be checked as well. So using the icon i d to display in order to get download the image of the icon in order to display it. So let's run bad again and here ago. So you see, like this little icon that comes next to the labeled with the description. Let's change to Toronto because I know that this is rainy right now in Toronto. So we should see, like little, um, did work well, Toronto Well, maybe of gods Internet connection problems. Okay, so right now this is 21. So this is the default. Texel. That's dry. Paris. Right now this is six degrees, Few clouds. Now I'm gonna try Toronto. I know it's raining Toronto, so that should be like with little moderate rain. Here you go. Pay 10 degrees. That's different. Let's try also, New York. I know that this was a few clouds Perego clear sky. But this is already night. So that's why we've got that's and there's no clouds. So that's why we've got this icon. So that's pretty cool. And we should also update this label right here because we see that this is not changing. So whenever we look up in your seedy so anywhere, what we're gonna do is we're gonna proceed to actually update with the current local time right here, we're gonna change the time based on the time zone off the place that we're looking up and we're gonna do that with another epi I, which is Google places FBI, which is another service provided by Google, and that's going to allow us to get the time zone, identify here by using the coordinates of latitude and longitude. So we're going to see that next 11. Google TimeZone API: because the rental I am on the page for the Google places a p I. So that is an applications programming to face that allows to do to perform also a P I calls in order to get a list of places nearby places based on the location. And you're going to see that if you actually look for the details here, the documentations for the service web. Now that's going to allow you to get so information as to the place the address, the coordinates, let alone so you can actually display the location on them up. You can then calculate the distance based on the user current location and then the distance and the coordinates Platon long off the place that you are targeting. And we are interested in another information here, which is gonna be times on something that I forget. Also, in order to be able to access any service FBI from Google, you're gonna need to have a Gmail accounts and to looking, so make sure that you can log in using your Gmail accounts first, and then you're gonna be able to then excess all the services and functionalities off the FBI services provided by Google and off course, getting a key that we're going to look at right now. And I want to get so the information that corresponds to this So that's gonna be Google maps, time zone, FBI. So we're going to look at this. So this is part of the Google maps actually services, but this one is going to allow it to return. So Daito, including so the time zone identify air off the place that we're looking up corresponding to the lats and long so the latitude and longitude coordinates. So here, we're gonna have So all the instructions as to how we can get this and my bad This isn't French. I'm just gonna go all the way to the back and select here of the language and switch to English. So here, we're going to get so you've got all the explanation as to how it works, how to perform a request times and requests. We're gonna look at that in a moment so we can actually copy this example, and we're gonna get back to it. Let me see. So let's try this one. Actually, we're gonna copy this one and paste it in our browser we're going to need to replace, because for now, we have no AP a key. So we're gonna need to just replace this segment with an A P I key, because otherwise so without the a p i key, so that's gonna be you're gonna get in access denied. Okay, So here ago, request denied because the a p I keys invented so we're gonna need to get one first, so we're gonna go here. So here you've got an example off a response, and we're gonna use actually this one. You see the times and I d. This one is American. It's undulate. So if this is, for example Europe, it's gonna be Europe Paris in order to get the current local time. So for now, we're gonna go get a key. That's no, you're pretty simple. In order to without the gates, get an A p I key. Get a key. We're gonna go ahead and create a project. So if you really have some projects with the Google FBI services, you're going to see all your projects and then you're gonna go all the way to the bottom to select create a new project, and I'm gonna call this one with it up, and I'm gonna call so local time. So I understand. So So I understand that, actually, I'm getting so this a p I key in order to get the local time for my with up. Then I'm gonna click, create an enable MPs so that is important because you need to enable the A p i specifically in order to get access to it. Otherwise you're not gonna get any response back. So you're gonna wait until you get so until it's confirmed and then here ago. So you're gonna get your A P i k. So you're ready to start developing with Google Maps times on a P I. So that's perfect. So we're gonna copy this one, So using this here ago and I'm gonna test it first. Let's go here and replace this segment with your epi. I kick. Here goes the for now, we've got this examples using this Latin long, but you see that this is actually returning this dictionary. So that's just like a collection off 123455 key value pairs. And we're gonna get the information of this one, which is time zone I d. And this is what we're gonna use in order to display the time, the current time, the current local time that corresponds to the city. Meaning that right now I am in America. Toronto. So I've got the time for me. Fraternal. But if you're in Los Angeles, so that's gonna be three through hours behind if you are in Europe, so there's gonna be five hours ahead, ex cetera. So let's try that. So we know that now we have access to that a p I with our e p I key. So I'm going to go back. So using the same extension you're below, so I'm going to write the function which is gonna be gets time zone I d. And I'm going to do that using that information. That's the devil and the learned information. Although I could also do string from here. But whichever way is fine. So double is fine because we're gonna be able to use the interpolation innards to extract the value, which is gonna be then Captain ated with the string of the euro that we're gonna get them and finally completion. We're going to return. So what we need is to return unidentified air. That's gonna be the times and identify here, which is maybe of type string care ago and so insight we're gonna get so as usual, we're gonna create a year will from its an object off euro type that's gonna be with this. It takes one string burner. So that's gonna be this that we took from the Internet, and we're gonna replace right here. So with let's and the long so which ever coordinate, we get whichever search would you from. So we're gonna be able to actually get the Latin long from the up and weather map FBI. So we're not gonna need to calculate those one. So that's gonna be provided by the first AP I call. So we're gonna get that first, and then we've got our A p I key. So I'm gonna put this one actually separate. Call this one key. I haven't created it yet, so I'm gonna create it here, So that's gonna be let key right here and brutal and next. So we're gonna do just like we did here. So that's gonna be actually I'm gonna take all of this. I'm just gonna replace with what I need, including the test. Presume because we're going to do We're going to perform a task request, and here it goes. So I'm just going to remove all of that because for the completion, that's just remove all of that. We're gonna keep the same thing on this, remove its, OK, we're gonna keep it because we know that this is something we're gonna need to do on the main thread here ago. So we're gonna So we're gonna get adjusts, um, and a dictionary as well. And basically, that's gonna be pretty simple. So we're gonna print. So when we get so when we are at this level So we're gonna get this values of the value for the skin, which is times an I d. So I'm gonna simply, um Actually, what we're gonna do is I'm not gonna do it from here. I'd rather just go ahead and gonna create one variable at the top right here, which is gonna be I don't you fire. She's gonna be a type stream. And then the identify was gonna be cool too. This just indicts. And then I want to get the value for the key times and I d which is gonna be a strain and then present this in the completion, which is expecting a string, and I'm gonna pass it on to fire. Okay, so let's run this, Um because from this one on, basically, So we're going to run this function, so when we want to change the city because I'm gonna display the local current times for like, which is by default when we display the up for the first time. But if you're in period, so you're gonna get the time for Paris. And if you are in New York, it's gonna be the time in your But if you want to change the city, then you're gonna need to also update the information for the city that you're looking up. So we're going to do that at this level here, change city, and right here I'm gonna do that so that one of yourself get times oven idee using So this information which is left and long so this is gonna be useful for that and for the completion, we're going to return them the i d. I don't to fire and just put time zone I d and then I'm gonna print. Okay, so I'm gonna put a city like somebody put time zone I d times are. Now, let's just put this time zone times an idea crimson for Port City because we get the CD here, whichever, like search we do. And then from this function, we're going to return. Then the times and I d using. So the Google places time zone, FBI, right here. So let's do that. Let's run. So I'm gonna do a search I'm going to search for maybe not Toronto because I am already internalised. That is actually the current time for me. Um, although no, my bad. It is actually no the time for um, yeah, they do. Let's to Toronto, because now this is around. So here, you see that this is 10 p.m. So for now, it's just static content that we're using. Same for the dates time. So we're gonna need to actually display the time, like using the current date, a date, formats we're gonna do that makes But for now, we just want to see if we can get so the right identify here. So I'm gonna use this right here, and we're gonna be able to re bet in the console That should corresponds to America. Toronto All the way to the bottom. Maybe here ago. America. Toronto. I'm going to try for Perry's. So you're gonna see what's corresponds to for Paris. So that's gonna be Europe, Perry. So we've got the right item to fire. So what we're gonna do next is actually display the rial current time because right now, this is 10 p.m. So that's completely wrong. So this is study content, you know? So the one that we put when we created the labels So now we're going to do We're gonna work with date and tongue starting in the next video. 12. Date & Time: So now we're going to display the date and time, and we're going to do that as well from one specific location. So let's go to the top before the extension right here, actually change city. Um, gonna do that right here. So that's gonna be date time from location. And we're gonna have one identity fire, actually, because we're going to do that form from one specific location, it's gonna feel type stream, and then we're gonna return TheStreet and my bad, actually, because we're using so two different labels for the date. So that's gonna be date from location, and we're gonna have another function, which is maybe time from location. It should be this sexually like so Okay, Okay, so let's start with the dates. So first we're gonna gets like, um, the string. We're going to do that to return, like the date current date, but informant strings. We're going to use a date for a matter as well, and then we're gonna create an object, which is gonna be a type. So I'm gonna put current dates. That's gonna be a type date, and then we're gonna create an object which is gonna be date for Mets. This is what we're gonna use your to format because when you have a date, it is gonna come like as a long string, including so the information about the dates time is not really irritable. So in order to make it more user friendly and more readable, we're gonna use formats and we're gonna do that right here. So that's gonna be date for months here. And I made a mistake here because I should have actually named this one for a matter, because otherwise it's confusing because we've got this. I hear this party which is used to actually specify the from it, support the format. It's gonna be pretty simple. So you've got actually a guide available online, and this is thes websites. So this is swiftly getting a human readable date with an estate for matters. So at the time it was so that is dated 2014. So that was honest date for matter at the time. Now the classes date for matter with the new sweeped three syntax. So let's go here to have, like, a description as to how you confirm it nicely. The date objects. So what we want is to display. So what we want is to display So we've got, um, the month and the dates. So basically, you just need to follow here the instruction. So what we want for the month is to have two digits, so we're gonna use em to em cups, kept letters, and for the day, it's gonna be here to have, like, two digit. It's gonna be DNT small caps, small letters. So we're going to follow the same format. Let's go back here. We're gonna spacey place with that. He's m m and then d d like so And we're gonna do You were going to see also that we're gonna do the same. Actually, four. The time we're gonna have instructions about the time as well for PM actually to display. That's gonna be so. You've got the military time. So in order to display from 0 to 23 But for from 1 to 12 it's going to this one, and to display to the jet is gonna be too small. H laters. And then to display AM or PM, it's gonna be with this one. OK, so we're going to get back to reads when it's gonna be time to work on the time. This way. For now, we're just gonna finish two formats. The dates and we're gonna also specify So the time zone so regret this property, and we're gonna be able to do that with this function time zone and passed here. So that is gonna be I don t fire. And then we're gonna best. Why don't you find, like, the one that we're gonna pass as an argument here and we're gonna get this tight anti fire after doing our epi? I call with the Google places. Time zone A p I finally So we're gonna sign here to date strain. So that's gonna be date for matter And we're gonna get so that's gonna be string. So we're gonna get it a string from a date. So that's gonna be string from a date object. That's gonna be current dates. So that is actually this object that we're going to convert into a string right here. But in between what produced to format? It's with this format in order to display the month than the date the day for this month. And then we're using also the time zone property with the item to fire in order to display the current time in order to display the current local time. And finally, we're going to return the object which is date string right here. So we're going to return this and what we're gonna do with this function is simply call it from so here, starting here. So when we change the city so that's gonna be with we have, like, a date label text, and I'm gonna call this function so from here, date from location and because we don't have any information yet, So we're gonna call this function and actually, I'm gonna need to do that at this level, because here I know that we get the time zone idee information from here. So in order to pass this here, this information here to get, like, the rights date information, we're gonna pass this right here and logically because right now this is actually it's date of 17th. Ah, this is 656 hours ahead of us for Paris. We're going to search for Perry sexually just to make the demo. I'm gonna do it Also here for view Did load when we start the up below, and we're gonna drink arbitrary meaning that I'm gonna pass. I can do it from here. We're gonna pass. Actually, one study consented. That's never Europe Paris, Because the label is equal to Paris when you start the up. So we're going to search for that in order to display the dates corresponding to the time zone for Perry's. So I need to return an object here because this is a function with the return type. So let me just return on empty strain for now. We'll take care of this later the time. You know, I'm just gonna seaso distribute with 18 logically. So October 17. Although I don't want you have it like like this. Okay, so, um, I'd rather have actually October, and I think we'll need to form any differently for yeah, energies have the full name. We're gonna need to add all of this. So that's drive that. So that's gonna be No, that's gonna be four m gap, Siri, to have the full name with a cap. Cool. So we're just gonna update this right here, and so that is not wide enough. So let me just update the width of this. Some label from here. Size, Inspector, the whiff we're gonna do. Like for the rests we had used 200 we're gonna use to 50. So we're taking care off the time. So in the next video with them 13. 13 displayTimeDisplaying Time: so that we want to do the same thing for the time. So that is something that I'm going to do for this function, and that's gonna be far time, String. It's good. Which is gonna be a type string. Then we're gonna have Let's current date as well, because that's gonna be from the date that we're gonna do that. And after that, we're gonna formats in order to return. So the time. So the hour ends the minutes. So we're gonna have actually, I'm gonna copied from here. Let's go. People of that they're ago. And here I'm going to replace with what I want to use in order to display the time, the correct, the correct time, and regrets all this detail so instructions as to how to display the times of the way that we want. So first we want to display so in this permit. So that's gonna be like using from 1 to 12 a.m. and P m. So to display with two digits. So that's gonna be to etch small letters. So if you're using actually this one cap later, So that's gonna be this ferment, which is 0 to 3, which is 0 to 23 which is the military time format. So we're gonna use this form it which is gonna be small etch leaders. And in order to display AM or PM, it's gonna be with this one. You see PM or AM Here you go. So and we're going to use that. So this time we're going to return an actual objects. So that's gonna be the time String. But before, of course, we're gonna need to assigned to time Scream, so date for matter. And that's gonna be a string from the dates which is gonna be current dates. Well, that's gonna be time from location as well, because that's gonna be the current local time that we want to display. And then we're gonna then also run this one right here, starting here. So right here. So that's gonna be self time legal text. And that's gonna be self time from location. We're gonna use also the information of the time zone. I d. Let's make sure that's just we use that I was an idea in order to display the time. So based on the time zone, identify rare. So if this is Europe, it's gonna be the time for Europe. And I'm gonna also be use some static information in order to call the same function from Judy load for yourself. Time complication. And then it's an appeal. So Europe parents, So to begin with, let me check. Actually, so it looks like I'm missing one, Actually, I'm sure that actually, that's for me. Like p kept later because yeah, we have 17th. Although this is six hours ahead of us that it should be 18 like logically. So let me try, because I think I was impressing the right identifier. So let's check this time. Here you go. So I got the right time, so that was my bad. So October 18th for parents because this is already the morning the next day. And this is right now for a M. So let's try now for because we have also put the same for Gerona because now we can see the current time. This is on my senior later, Toronto. So I should get here ago. 10. 25. So I'm missing the minutes. My bed I'm missing. That's in my for matter. Until we forget that. Let's at this Here, let me check for the minutes. That's gonna be two digit. So that's gonna be one. And it fits. Do what is it yet to end? Because if it's too, you're gonna need to also passed information. OK, so I missed that. So at least we're gonna need the minutes. So I'm gonna just search for Toronto just to check, just to show you that it matches. Actually, the rights current time, and this is left large enough. Okay, so let's go back to the story board to also increase the with of this label. So we're gonna make it be called 2 to 15 Now, that's way too much. 200 is enough, Virago. Let's run that again. Okay. For 26 for parents. Am I gonna check for Toronto? So you're going to see that? It's gonna match 10. 26 PM here ago. 10. 26. And this is still 17. Doctor with the Sanchez. Okay. Okay. So the last thing that I wanted you for this application is to make this navigation bar transparent. And also, I want to show you how you can actually keep things even lighter, you know? So you're doing an extension here in order to keep things separate. So what we have in that extension is anything to downloading data. So we've got the function, get city weather data and regret down it with the icon and finally get time zone I d. So what we're doing with that extension is basically downloading. So this is like a police Tudela data from the Internet in order to then dynamically render them back in our replication. So instead, we're gonna back that in a separate foul. So inside Iraq application. So I'm going to show you that next. And also, I'm going to show you how to make this navigation bar transparent, interviewed to add some style just to polish the design a little bit, too. In order to wrap up this tutorial. So see you in the 14. Updating Time: So before we wrap up the eternal legends want to show you, of course, something which is to allow to update the time. So in real time, meaning that if we pass to the next minute, So, for example, if this is far So, for example, if this is 5 41 PM so it would updates automatically in real time. So even if you haven't stopped the application or the date, it's now the story because the data is going to change every 24 hours. So it's not like you're gonna keep the up on the whole time. So it's gonna have date only when you restart the app. But for the time, I'd like to allow it to updates. So we're going to do that right here, actually, So right, where you so right where you actually display the date the time. I mean, right here, right here. It's better. So I'm going to call this function of date time, and actually, that's gonna be the exact same thing right here going to copy it. So instead, you're not gonna have any return types. So we're gonna need to do a few changes, because here, So I'm not gonna need that. So I'm gonna do it. I'm gonna Percy differently. So first of all, I'm gonna need to have a global variable for identify your just for the purpose off, updating the time. So I'm gonna be able to First of all, let me create a new variable right here. It's gonna be I'm gonna call this one local. I don t fire. That's gonna be a type string, and I'm gonna then get the identify here. So whenever I call this function, which is right here self identify air, local agents fire equal to item to play Sometimes when I d my dad, I was just thinking about the function against the times an idea. So that's gonna be equal two times and I d And then we're going to be able to get to assign this to this self local I don t fire. Okay. And next, we're gonna update to the time from here. So that's gonna be time label text, and basically, dysfunction will work, just like for if you just for a few differences of this function is gonna work just like the one at the top, except that it's gonna be actually repeated with intervals, so that's going to be every second. So we're going to do that. We're going to set up a timer, so let me create it and to create it. So basically, I'm just gonna run this from the beauty load, and it's gonna run so all the time. So regardless of having, um, search for a new city or not So we're gonna run that, like, Riveted looked here ago. So here we're gonna get displayed backgrounds, then the date and time and here gonna create the timer. And I'm using an underscore because I don't need to have variable. So I'm just actually running a function of methods from this glass timer that's gonna be a schedule timer. And that's gonna be actually this one that takes several premieres. The first that's gonna be the time interval that I'm going to specify. So I want to repeat dysfunction, so every second, then for the target, it's gonna be self for the selectors. So here I'm going to specify So the action that I want to run every second I'm gonna space device, so that's gonna be from the view controller, and then that's gonna be update to time a year ago. User info is gonna be Neil and true's. I'm gonna true for repeats because, yes, I want to repeat this one every second. So now we have set up a timer. I'm just gonna put a comment to prove that this is a date. Time here is gonna be set up. Date, date and time. Here, it's gonna be That's me. Remove that. We don't need that here. It's gonna be, um, Display's gonna put great in background. Finally, here. This is all the download data. So first get city weather data and then download with an icon. And because here we're using so study content. So we're not doing it specifically, but when we go to change cities, But when you go to change cities, you have gods get city. Whether data then download whether icon and also get times on idea. Because when it's time to change, so then you need to get it dynamically based on the location. So we're using that along and so forth. Okay, so let's just move on to update the time, so we're gonna be able to see that this is a dating in real time you know. So for now, this is I guess it looks like we've got an optional value. Unexpected. So it's not happy. So let's me go back, okay? Yeah. Okay. I think I know because actually, I'm getting this. I'm running this outside of That's my bad. Let me go back to duty. Load. So I know what happened here. It's because I'm actually calling this function. So before we actually gets where before we actually, uh, run be the coal for the cool places Times on a P. I so right here. So I'm actually doing that. Let's see here. You see self local light into fire times an idea, So that's not very helpful, because this is I get it on Lee from So what I should do probably is actually doing this. That's gonna be updated. So every time that you do a search, I'm gonna do that. Also in view did load because otherwise it's confused because this one is Neil. So at the time that you call this one and you didn't know this one is not even existing yet , So I'm going to do that right here, and then assign this actually what I'm gonna do I'm gonna have here. Let's I d that's called this one local lazy make it equal to Europe, Paris and then passage to all of them, including this one. So it doesn't crush. So whenever we started dating and of course, it's gonna be so this one is gonna be updated. So whenever you do, you search for a new city. So that's run that again. So this time it's not gonna crash, just gonna date in real time. Okay, so that's cool. We know that this is not gonna crush. You're gonna see that this is gonna change. So in real time in a year ago, 10. 45 something I figured as well. So I keep forgetting. So we're going to need to change the label as well. So it matches the city that's we actually search and displayed the data for, But we're going to do that as a final parts in order to rob it up this time. Soul changing this to clear background colors. And no caller for the navigation bar then updates the label here. And also I said that we would organize the project by having a separate file for this extension section right here 15. Wrap Up: So we're gonna update the display for this navigation burned. Make it transparent. So we're gonna create an outlet for this. First, we're going to start with that and right here, I'm gonna go control drag. And I'm gonna call this one that far off type your navigation bar connects. Let's go back to Standard Editor, the controller, and we're gonna go imputed load. In order to do that, it's gonna be right here. I'm gonna call this one navigation, the transference, and we do that. End of you did load. So So in order to said the transparency for the never. So we started by enough bar and then said, background image. So that's gonna be of type. You want invention and for the Matrix is gonna be default. You can also set shadow image, which is gonna be equal to you are image finally enough bar. He's translucent. I'm gonna make this equal to truth a year ago and let's go back also here because we're going to need to make this one. So the title and also this plus for the control. We're gonna make it twice. So that's gonna be title color whites for the item So here. I'm gonna make sure that I can select this one on hearing. So now you've got so the title than the plus. So that is whites on a clear background. So that is transparent. And here ago. So now what I'm gonna do next. Also, because now I was looking for Toronto. I'm gonna allow to also a date the label, because we've got an outlet, actually for this one. So let's go back to view controller. So this one is gonna be date Tim over. I'm not sure that Turek really have an outlet, so let's go create one storyboard. It's close this to have a larger view. Click rights. And no, actually, we don't have another plate, so I'm going to create one, So I'm gonna select it and then control drug, and this one is gonna be city label. Type your label. Okay, Let's go back to standard editors of first for view did load. We're gonna have this one displayed. So we know that this it's defaults to Paris. So this is static content, so we're not gonna take care off muted load. It's gonna be just when we change. It's a change CD right here. So we're gonna update this. So that's gonna be self CD level texts, and this one is gonna be equal to city. And we're gonna capitalize this one, because when you type it so this is without caps. So we're gonna capitalize this one year. Did you have a cap later? A year ago. So this time it's gonna have dates. So whenever So you've got the time for Perry's, or you can feel free to make it default to any location that you'd like. But first, we're gonna have various, and then we're going to change to Toronto is gonna Okay, so I'm just might put two small. Laters. Okay? And it's gonna be to terminal perfect last thing I want to reorganize. So here the project to include so all the extension information. So in one separate house. So let's go create one. Your class actually here could go touch glass, and that's maybe of type you I view controller a year ago, and we're gonna call this one data. You see that? It's gonna take all of the same, um, structure that you have. So when you create in your class, I'm just gonna actually remove all of that. Instead, we're going to read extension and so forth. Let's go back to hear. Remove that extension of you controller. Um, that's Yeah, Let's get this. What an extra space. So we're gonna cook all of this starting from the bottoms to extension. So this is actually the end off the view. Control a class right here. So we're gonna have everything related to changing of the date to displaying information. So, um, on the view, the interface, etcetera. But anything riches related to downloading the information. So the data from the web, it's gonna be actually here available in that all the foul, which is your controller data. And that is an extension off the view controller. You see that? Actually, this is just like an extension of this class. Do you control here? So what we do is naming it similarly and we add so in extra information. So this is similar to category if you have programmed with, um objective C. So here this is an extension, and that's going to run the exact same way. So what we've done here is just changing the organization of the project, and that's going to wrap up the material. So this is ready. October 18th in Paris for 57 a. M. Almost five. Then we're going to switch to Toronto. So you see the date for Toronto here. So same as into senior later. 10 57. And this is October 17 and right now this is 18 degrees with moderate rate.