Offer

[00:00:00]
>> And now we're going to start working with our pression. Here we have that greeting structure and the greeting structure is actually in the same file. Can we put that in a separate file? Yes, we can. And typically we are gonna do that not in every situation, but on a lot of situations.

[00:00:16]
So now what we're gonna do is one, be like greeting that it's going to be called offer. Okay, let me see if I have it here. It's gonna represent from our app these screens. So this is an offer, this is another offer. Okay, so we're going to render that piece of content.

[00:00:42]
So to do that, I don't need this structure I can keep that comment. Otherwise give me an error because you need something in the body. It can be empty. There is a view called empty view that renders nothing, just for this purpose just for saying, okay, I don't have it not right now.

[00:01:02]
So if you don't want to see an error, you can use empty view saying it's like an empty div in HTML, okay? Something like that. So we don't have an error, why we are writing the rest of the code, that I if I resume I'm going to say nothing on the screen.

[00:01:18]
So how to create a new view. Right click in the project, new file or file new file that simple. Here we have two options, we can use swift file, a new swift file. But typically we want the Swift UI view. So there is a section for user interface and within there we have swift UI view.

[00:01:42]
That's just greater template. Okay, it's not a big deal. I mean if you don't have it you can do it manually. So I'm going to select a swift UI view. And I'm going to call this offer. You have these steps also in the companion website. So here you can see that we have an structure offer with a color war similar to what we had before and also we have an a structure for the preview.

[00:02:11]
So what's the deal here that by default is paused we can always resume this and see the hello world. So now each file has its own preview. So we can preview the whole app or shaft on a small piece of it. And the idea is because we are going to create reusable components, we can be surely test and preview each component individually.

[00:02:42]
And now we will get deeper with that. So the offer will have two properties, a title that is gonna be a string so we're gonna start with empty string and description. Remember that you can set the type explicitly are not up to you because I'm setting a default value in jazz works.

[00:03:05]
So and they will have two text, one showing the title and the other one with a description. Let's start with that. But as we know, we cannot create two text if we don't have a container. Okay, so we always need a container here. If we wanna render this, remember what we are trying to achieve.

[00:03:29]
One takes on the other text. So we can just create a B stack, a vertical stack. So I can add it manually. I can drag it from here, B stack. I'm sorry, I'm in modifiers here. They stack. Blasi are not neither need lazy. I can drag it there or there it's just the same or you can probably faster to write it but it's up to you.

[00:03:57]
Which version do you want. So I have a text with a title and a text with a description. And this is the part where we are going to start digging into the preview, this preview provider that we have here. So, I'm going to resume the preview. And one of the problems that I have is that I don't see anything.

[00:04:23]
Do you know why? Why it's empty? Because it's rings are empty. Yeah, so the idea is that I wanan modify the strings from the outside, the tittle and the description. Well actually the preview is code. It's actually this code. It's actually another view. We define the preview on how do we wanna preview this in this second structure that we have here.

[00:04:53]
And here we have an offer, the offer because it's under structure has an initializer so I can set its title and its description from here. So this is my offer and this is a description. So I can actually set my preview however I want directly in the other structure so we save the information from previous here.

[00:05:33]
Also talking about previews, let's discuss a minute about the properties that we have here. So for example if we start with the cycle well we know that this play button makes the preview interactive, okay? The second one it's actually connected with human error here to a real life and so I can actually preview this on my real iPhone which is actually pretty cool.

[00:06:06]
And you don't see the whole app, just the current view on your real iPhone. That's the second icon if you don't have the icon or if it's disabled is because you don't have an iPhone connected or an iPad. Then we have, we can see these in landscape. So we are changing the orientation apart look at this If I'm changing the orientation in the preview, what is changing is the code.

[00:06:33]
It's actually a modifier. Also we have now this little icon here that lets me pick a lot of options. For example, what if I see this in dark mode? I can see how my view looks like in dark mode. And what if I wanna see both dark mode and light mode.

[00:06:59]
But before doing that, we are seeing here a big iPhone, but our view will not be fullscreen. We have smaller like a piece of content, okay? So that's why if using the same icon, this one, I can set up the preview, the device that you wanna see or the layout.

[00:07:23]
So I can instead of using the device I can use fixed. So I can say here that they want these layouts to be 300 points, 300 by 200. Any number, okay? And this is actually changing the properties here. I mean decrease the font size a little bit. So you can play with this, yeah no, 300 no, 350, okay you got it.

[00:07:52]
So now my preview is on that size. And I think you gonna like this, because this is pretty useful for testing as well. We are kind of creating UI test case using the last icon that we have there. We can duplicate this and now we have two previews of the same view.

[00:08:18]
Now we have a group with two offers. And yeah this one can be a smaller or we can see okay, how it looks like in 400 or how it looked in light mode instead of dark mode. And I can have as many previous as I want to express different situations, so I can see how my view will look like in different situations, different screen sizes, or different container sizes.

[00:08:49]
And there are more properties that you can change. You can change language, for example if you have a localized application in different languages, you can actually see how it looks like in Portuguese, in Polish, in Russian. And you can see that directly in the premium, okay? And also you can duplicate the whole structure and have more previous even more people with different names and you could change the name.

[00:09:21]
And now I have like sections, every preview has a section title. And technically I don't even need to preview the same offer, I can preview any view. So you can actually pick the ones that you wanna preview in this file. Do you have any question?
>> How are the strux that we're defining in offer imported to content view

[00:09:55]
>> Let me see. They are not. In fact right now if I run the app in the real simulator, well let me first remove the second preview. I'm not going to see my offer because yeah, we can preview the offer. But yeah, you're right. I'm not seeing that here.

[00:10:20]
But if I change that, I can add an offer. And I can add a title and a description. Okay, let's say offer 1, description 1. So now if I received a preview of the whole app, I see the offer inside. And do I need to import offer? Nope.

[00:10:44]
No everything is public. So it's an another file in the same project, you can just use it which means you also need very careful with naming because you may have name collision. Okay so be careful with that. Any question?
>> I like the multiple previews.
>> You like multiple previews.

[00:11:08]
>> It is pretty awesome.
>> Yep, I think it is. If we go back to the content view that is like our main, I can also duplicate here the preview. I have interactive mode, I need to stop the interactive mode to actually duplicate this. So I have now two content views.

[00:11:26]
And I can select here that I wanna change the phone. So I wanna see for example how it looks like on iPhone SE that has a smaller screen and it doesn't contain a notch. So now it's the first time it takes some time when you change your device because it's opening a simulator on that device.

[00:11:45]
Okay so now it will run to simulators under the and now you see the same app in two different phones just by creating this group of content views with a modifier. So previews are also written in Swift structures, but important they are implementing a different protocol. They are not conforming to view but to preview provider.

[00:12:13]
And that means they are not going to ship with your code. So they're not going to be compiled with your code. It's only for the development version. Well, now we need to play a little bit with the offer, adding some modifiers. For example we can add a padding.

[00:12:34]
When you say dot padding you're applying padding a default padding that is defined by the OS but also as I mentioned before you can express your own padding in points. And also you can express only the top padding and what if you want top and bottom, well you can apply another padding, another modifier for bottom with a different value.

[00:12:58]
Remember you can apply the same modifier more than once with different values or even with with the same value, it doesn't make any sense. But if you want double, double default padding, you just apply double padding top and you have double default padding. It works, okay? By the way it's top bottom and not frightened left.

[00:13:26]
It's leading and trailing. You know why, not right on left leading and trailing. This is for better localization. In languages that are right to left, the Hebrew or Arabic. Then leaving is the opposite place. So you will use leading and trailing here, not right and left. Okay, so I'm going to apply just the default value.

[00:13:54]
I think it's fine on both text. So then font, changing the font size. We have a couple of fonts available if you just hit dot, body, title, caption, footnote. We have a couple of H1, H2, something like that. The font size that if you can use them, it's better.

[00:14:19]
Why? Because this will also honor what is defined by the user inaccessibility. There were some users are increasing the font size by default, so this will honor users decision. If you use a fixed number, it will be a fixed number. So you're not honoring this and by the way you can create another copy and this one you can also change dynamic type and you say that the user wants large font or large font.

[00:14:53]
So you will see that this one is a little bit larger. I'm not sure if you can actually see that. If not, we can actually make it even larger, extra, extra large. So you can see everything is bigger. But if you're just finding a font size, that's like a specific number, it's not gonna work.

[00:15:18]
You will see the same thing. Okay, so maybe I'm not going to focus right now on, we will see how to do that anyway. But I don't wanna start focusing right now on dark mode. So I'm going to delete the other two previews, that was just for you to understand what's going on.

[00:15:42]
And before moving on, I'm going to connect these to GitHub. So I'm going to here repositories and go into you don't need to do this. This is because I'm going to publish this to my GitHub account. I'm going to create a new remote. No, existing remote, no, I wanna create a new remote on my GitHub account that I have already set up under xCO.

[00:16:09]
And let me see the name that I use for the repository so you will get it. This one coffee masters dash iOS going to use that repository name public so you can get it. And now from source control I can commit. So this is our first commit. Like so when else I can push to remote at the same time.

[00:16:40]
It's a push and it's commit and push. So now that repository will have some content and I will be pushing data there. So let's see if it works. Yep, so you have my code there in case you need it.