iOS 11 & Swift 4 - From Beginner to Paid Professional | Arash Ahadzadeh | Skillshare

iOS 11 & Swift 4 - From Beginner to Paid Professional

Arash Ahadzadeh, iOS Developer & UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
62 Lessons (4h 43m)
    • 1. What will you learn in this course?

      1:07
    • 2. Tools and Materials for iOS 12 App Development

      2:25
    • 3. Download and Install Xcode 10

      1:53
    • 4. How to create an Xcode project properly

      3:06
    • 5. Development Environment

      9:09
    • 6. The Skeleton of an iOS App

      8:50
    • 7. Variables and Constants

      3:19
    • 8. Strings

      4:58
    • 9. Functions

      4:10
    • 10. Conditional Logic & Boolean

      6:30
    • 11. Arrays

      7:23
    • 12. Dictionaries

      8:03
    • 13. Loops

      9:17
    • 14. Classes in Object Oriented Programming

      8:50
    • 15. Sets in Swift

      3:15
    • 16. Switch in Swift

      4:05
    • 17. Structures

      5:57
    • 18. Designing and building the first app

      5:50
    • 19. Connection between design and code

      3:12
    • 20. The environment of Sketch

      1:51
    • 21. Design a login page

      7:44
    • 22. Using Shapes

      7:03
    • 23. Masks in Sketch

      3:02
    • 24. How to use images in Sketch

      4:16
    • 25. Colors in UI designing

      3:16
    • 26. How to work with Sketch Plugins

      8:38
    • 27. Exporting

      3:42
    • 28. Design with real data

      9:17
    • 29. Sharing and previewing your design

      2:45
    • 30. Shortcuts & Tricks

      10:05
    • 31. Prototyping in Sketch

      3:51
    • 32. What are Cocoapods?

      1:32
    • 33. Installation And Setup Cocoapods

      3:07
    • 34. What is Firebase?

      1:59
    • 35. Create an account on Firebase

      0:39
    • 36. Setup Firebase

      4:31
    • 37. Create and connect registration and login form to Firebase

      15:08
    • 38. Saving Data in Backend

      2:07
    • 39. What is Auto Layout and why should we use it?

      1:25
    • 40. Using auto layout on your project

      8:23
    • 41. Finish up your project

      2:06
    • 42. Challenge #1 - Auto Layout

      1:02
    • 43. Let's complete the challenge

      5:53
    • 44. Basic of animation in Swift

      5:23
    • 45. Chain Animation

      2:43
    • 46. Making a rating feature for an app like UBER

      1:48
    • 47. Rating feature setup

      5:35
    • 48. UI Animation - Advance

      3:42
    • 49. How to toggle stars in rating feature & working with segues

      7:00
    • 50. What is Lottie?

      1:06
    • 51. How to use any animation in your apps?

      7:25
    • 52. What is a table view?

      1:17
    • 53. Design the user interface

      1:55
    • 54. What are protocols?

      5:39
    • 55. Making the Flag app with UITableViewController

      10:14
    • 56. How to make a To Do app?

      1:07
    • 57. Inserting a row (To Do app)

      7:21
    • 58. Swipe action and checkmark (To Do app)

      5:36
    • 59. Swipe action with icons (To Do app - Final Step)

      7:23
    • 60. Why Should We Use Persistent Local Data Storage?

      1:07
    • 61. App Delegate Methods

      3:30
    • 62. Persistent Local Data Storage Using UserDefaults

      3:27

About This Class

Welcome to the newest iOS 11 App Development Bootcamp. In this course, you will learn how to design your app interface with Sketch and then you will learn how to make modern iOS apps with Xcode 9 and Swift 4

I will take you step-by-step through comprehensive video tutorials and teach you everything you need to know in order to become a professional iOS developer.

At first, you will learn about the Xcode environment and Swift 4 language to become familiar with iOS development concept, and then you will make your first iOS app to understand fundamental principles about iOS development. Additionally, you will learn how to design your user interface with Sketch like a professional UI/UX designer, and then you will level up your skills with learning about using Firebase as your backend.

Furthermore, you will learn how to work with animations with Swift 4 in order to make an outstanding user experience for your app. You will also learn how to make a To Do app during this course with a lot of useful features.

Even if you have a little bit of experience in Swift 4, you can gain your knowledge to a great extent to become a senior iOS developer.

So what will you learn in this course?

  • Building modern iOS apps throughout the course (From Scratch)

  • Working with Xcode

  • Making iOS apps with Swift 4

  • Database & Backend

  • Saving Data in Backend

  • Registration And Login Form

  • Mastering Interface Builder

  • Firebase

  • Cocoapods

  • Designing your app with Sketch (Shapes - Masks - Colors in UI designing - Plugins - Designing With Real Data - Prototyping in Sketch - Shortcuts - Exporting, etc.)

  • iOS Auto Layout

  • Animation in iOS (Basics & Advanced)

  • Working with Table View

  • Core Data

  • Swift 4 Fundamental (Variables & Constants - Declaration & Initialization - Strings - Functions - Conditional Logic & Boolean - Arrays - Dictionaries - Classes in Object-Oriented Programming etc.)

Don't just take my word for it, see what my past students had to say about the course:

★★★★★ "Excellent course! It covered every concept of iOS development in a clear and simple way. Examples are applicable to the real-world applications. It's absolutely up to date and brand new."

★★★★★ "The first course on Udemy for me and I am so happy with this one. So easy to understand with his detailed explanation."

★★★★★ "All the concepts taught were taught very well and thoroughly. Everything that was taught was applicable to the real-world application."

What are you waiting for? Click the 'Enroll' button and I will see you in the course.

Transcripts

1. What will you learn in this course?: Hi. Have you ever wanted to make an R Us act? But you couldn't find a suitable course for yourself. If so, you're in the right place. I'm Ash, and these course I'm going to teach you the process of making an IRS app step by step through high quality video tutorials. At first we are going to learn some basic concepts about sweet language, and then we will work on Riel Ward applications to use our skills in a practical way. In addition, we are going to cover so many features, such as using you I table view animations, finer based cocoa pods or the layout, etcetera. You will also learn how to make it to do app in swift language. I would like to mention that I'm going to add more content each month for free, such as advantage reality machine learning, etcetera. We can also ask me any question you have any time, and I will try my best to answer your questions as soon as possible. Let's make so many awesome abs together. All right, see you next 2. Tools and Materials for iOS 12 App Development: Hi, everyone. In this lecture, I'm going to be covering some of the tools that you will need in all yours application development. First of all, you need a Mac of some sort. It's not necessary to have the latest or greatest, but it has to be able to run or s. 10. It's called Mac OS, and the reason that we need Mac OS is that we should install a software called X Coat that will allow us to develop IRS applications. So it means that you cannot count on your own iPad or even your own iPad pro for development. However, we can use an I Mac or a Mac mini or even a Mac book. If you already do not have a Mac and you don't want to buy one, you can use a website called Mackin Cloud that can. This website will allow you to have a mutual McElroy's, and you can use it for development. But it's not a great way, because if you use it, unfortunately, you cannot run your app on a physical life on you. Although you are able to run it on a simulator, it's highly recommended to have a Mac the suffer that you will be using is X coat, which is returned by Apple, and it allows you to design your app and write code. And also you can run your app on the simulator. I would like to mention that it's completely free, and in the next lecture, I will show you how to down with its and how to get it set up. In order to download X coat, I would recommend updating your Mac operating system to Mac OS Mojave, which is the latest version off Mac OS. Let me show you how easy you can check the version of your Mac OS that you're running. So if you just head over to the apple symbol over there and click on about this Mac, you can simply find a version of your Mac OS over there. If you have an iPhone or an iPad, you can simply wrong your APP on your own device. And, of course, you can show you to your friends or your family, etcetera. As I mentioned before, you can run your app on a simulator in X coat, and it's not necessary to get an iPhone immediately, so I hope you found this lecture useful. And in the next lecture I will show you how to download and install the Exco. So see you that 3. Download and Install Xcode 10: Hi, everyone. In this video, I'm gonna show you how to download and set up. Exco 10 which is developed by ample for writing code and building are liars. APS It's free to download, and you don't need to worry about paying for it. First and foremost, you need to check whether your Mac OS is updated or not. To do that, you can quickly head over to the apple symbol over there and click on about this Mac and check the version you're running. Second of all, you need to make sure that you have enough space on your heart, right. Although exclude is approximately 5.9 gigabytes, you need about 10 gigabytes for downloading and installation. So in order to check that, you can kick on story section here and check the capacity of your heart right, last but not least, do not try to download a beta version of Exco. It's not that easy to download the beta version accidentally, so as long as you follow what I'm doing in this video, I can assure you that you can be downloading the officially released version of X coat, and the reason for not using beta is that beta version is for testing and it may cause a lot of problems. Okay, let's go ahead and download Exco or downloading Exco 10. We need to just go to the app store and easily just look for ex court that skill if in the search for order and look for X code There we go. As you can see here we have X code but as you can see, there is no installation button here because I already installed the X code on my computer . So if you have not now know that the X good before for sure you can see the install or the gets button over there generally takes a few minutes to download. And after that you can use X code for writing your APS. All right. Thank you so much for watching this video. And I will see you in the next video 4. How to create an Xcode project properly: all right. Now that you have successfully downloaded and installed the Exco 10 on your computer, we're going to create an X cut project together. So let's get started. First of all, we need to open up the X code. There we go. And here we have our welcome screen. As you can see, we have some options over there. Get it started with a playground. Create a new X Good project clone an existing project. So in order to create a new export project, we need to choose the middle one. All right. As you can see here, we have a lot of templates to work with. So let's check them out. And I'm going to explain to you which one is the best option for our projects. As you can see over there, we have some sections. The 1st 1 is all us. The 2nd 1 is watch toys and TV Us Mac OS and cross platform. In these course, we're going to use all your section and also in the section. As you can see, there are application and framework and library in application section. We have some templates. The 1st 1 is single view app. The 2nd 1 is game and augmented reality document based app and so on. Each of them is useful for a specific type of applications butts Most of the time, most of professional developers prefer to use single view app because it's more customizable. And whenever you want, you can add any framework to your project and work it. So now we're going to choose single via app and then click on next. There we go here, we need to provide the X code with some information. The first field is the product name, which is the name of our project. So let's right, Hello world and the 2nd 1 is team. Actually, the team is related to your ample I d, and you don't need to worry about it that much. The next field is organization name. If you have a company, you can simply just write your company's name. But if you don't, you can write your own name. The next field is organization. Identify here, which is so important it should be unique. Identify here for each application, so if you have a website, you can just write the reverse. The main aim of your website, for example, come that your website of May. But if you don't, you can just write the name of your project. The Bondo identifier is automatically set over there. So as long as we're going to learn swift language, we're going to set it to Swift. And please make sure that you have on check these three check boxes over there because we're going to cover them in the future. So now let's click on next. And here you're asked to choose a location for saving your project. So for now, let's set it to desktop and click and create. All right, Everything is done. So we successfully created our first project in X coat. Thank you so much for watching this video. And in the next video, I will explain to you each part of X code. So see you then. 5. Development Environment: Hello, everyone. Welcome back to another video of dese tutorial. So this is the page you will see whenever you create a new project. And now I'm gonna show you how to work with each part of it. Right over there in the left side of screen, we can see a play button for running our app and stop button. So whenever you want to run your app, you need to use thes spotting over there. Or, alternatively, you can use command are. And here you can specify where you want your amp to run, for example, on a simulator which you can choose, or on a physical device you own. So for now, let's use iPhone excess. And then let's click on Ron button over there, and here we have the status bar. As you can see, it's written building, Hello world and now launching. Hello, world. There we go. This is our simulator, and you can easily just change the size off your simulator if it's too small or too large for your screen. And as you can see, we have a blank screen over there because we didn't write any code and we didn't add anything to our canvas. And now if you look at the status bar, you can easily see that it's straighten running Hello World on iPhone X s. And now let's press the stop button. And here we have finished running Keller World on iPhone excess and sometimes or let's say , most of the time, as programmers, we will get warnings or errors you're including, and you can see the error sign right over there. So let me write something to get an error, and I think it would be more easier to understand what I'm saying. So let's write hello here for sure. People gets an error. There we go. As you can see, we've got an error and we can see the sign of that in three different places. The 1st 1 is in the status bar. The 2nd 1 is over there, and the last one is right in front of our coat. And as you can see, we've got expected declaration, which is completely right. All right. So let me remove that line of code in order to get rid of our error. As you can see, there are three different bottoms over there, and the 1st 1 is selected by default, and it shows us the standard editor. And it means in the middle of X Code, you can only see a single screen. Or, if I just open up view Controller five, you can see only this screen. The 2nd 1 as you consider to intersected circles, it shows us the assistant editor, which is so useful there, including. So let me show you how we can work with that. Suppose that we're going to go to Maine. That's story bored, which is the place where we design a rap. And after that, for example, we want to connect some objects to our coat so we can just simply click on view controller over there and just open up the assistant editor. And there we go. We can simply just connect our objects to our coat, which is so helpful, and it makes our life more easier. And the last one is the version editor, which you can check two different versions of your coat. So let me go to the Standard editor and let's open up the main. That's story bored so right over there. As you can see, there is an icon, and if you just click on that and hold on for a second who can see two different options? Sure objects library and show media library. So let's select the 1st 1 And as you can see here, we can look for our objects. And if you're working with ex good nine or less, you will see these object library right over there at the bottom. Right? So here, let's look for a label, and you can simply just drag and drop it over there into our canvas. And that's right, Hello world and let me a line. It's right over there. As you can see, we've got a warning over there, but don't worry about it. Whenever you get a warning in your project, you can see there on your project. It's not a big deal, but whenever you get an error, you have to fix that. So let's see. What's this warning Photo layout localization, actually, totally after affairs to how we can align an object in our canvas and we will cover this whole topic in another section. So now I'm going to change these tax color, and also it's fun size. How can I do that? It's so simple you can go to the attributes inspector over there and here you have controls over all properties of this label. You can also change the text or there and here I'm going to change its color to red. And also, if I click on this icon, I can get access to the size and also the style of that fund. So let's me make it bald or right, and also, I'm going to change the background color of our canvas. So to do that, first of all, I'm gonna select that specific view. As you can see, we have a view over there. So now it's selected, and now I can get access to its collar property and I can click on Dad and let's change it to Gray. And I think it's better now to change the color of our text to White. Great. So I think it's a good idea to run our lab and see what's gonna happen. There we go. We successfully ran our first hello world app, and now I'm going to stop it. So right over dirt there are three icons which you can hide or show a specific pain. The 1st 1 shows us the navigator, which is thesis part and it is so important. And also over there we have some sections, but most of the time we use the 1st 1 And also sometimes we used this one which you will get our errors and warnings. And this one which is called the break points. And I'm going to show you how you can use break points in your project in a minute. And the second icon shows us the debug area which is right over there. Actually, you can use these parts whenever you're looking for bike or a problem in your coat. We programmers most of the time used the section in order to fix the problem of our code. So you will get used to that when you work in our projects. And the last one is our right pain. And it shows us the inspector area which there are some sections. The 1st 1 is identity and type. The 2nd 1 is quick help, which you can look for a specific documentation. And the 3rd 1 is Identity Inspector, which you can set a class to specific view controller or an object. And the next one is the attributes, Inspector. And also this one is the size inspector. And the last one is connections, Inspector. So if I just click on this'll able, you can see that it's not connected to any outlet. So now let me show you how you can use break points in your project. If you just head over to the view controller file here, suppose that you want to run your app and you want a compiler or the Exco to execute your coat till the line. For example, Fortin, how can you do that? Great. You're right. We can use break points in order to create a break point. You can just simply double click on that specific number. And if you want to get rid of that, you can drag and drop it over there. Perfect. All right. And now let's go over there and I'm gonna explain to you some of the most important parts of this section. As you can see here, we can change the name of our project bundle, identify your version field. And also here we have team which is related to your apple. I d. As you can see, if we've got here failed to create provisioning profile, which is not important. It's because of our bundle. Identify it. So if I just try to create more unique bundle, identify air, let's add, for example, sky at the end and try gain. There we go. Now it's fixed, and in these section you will get deployment target, which is also so important. So right now the deployment target is 12. So the version of all us we're going to run our app on should be at least two off. You can easily just change it to 11 or 11.4 or whatever you want. The devices is universal. You can just change it to iPhone or iPad if you want to make an app specifically for iPhone or iPad. And the main interface is Maine, which most of the time we don't need to change it. It's because of our main. That's story bored over there, and the device orientation is portrayed Landscape left, landscape, right or right? That's it for now. Thank you so much for watching this video. In the next video. I will show you the structure of an IRS app. So see you that 6. The Skeleton of an iOS App: all right. In today's video, I'm going to take about how to export your design. When you're designing, you need to know how to deliver your assets to the developer, so you need to be ever of the pixel density that you're designing it when you want to export your project. Or let's say your design assets. You need to export it for many devices because each screen and let's say each device has its specific size. So, for example, when you design your assets for iPhone seven or iPhone eight, you can use it for iPhone 56 or four. However, if you want to use it for iPhone eight plus or eggs, the quality of your design will be decreased. So it's better to design for iPhone eight plus or iPhone 10. And after that, then you explore your assets. You don't have any problem, so let's go ahead and show you how you can export your assets. So as you can see, I already designed thes four, and now I'm gonna export my designing. So how can I do that? There are several ways. The 1st 1 which is the primary way, is that you can click on these group. As you can see, it's name here, and then you can click on make exportable and probably have a plus button here nerd to make to excise or three excites. But now I can change the sitting too ill s and the sketch will automatically create the two x and three x sites one x two X and three x design with PNG format, And after that I can click on export name and choose a place and just click on export. And, as you can see, it is exported. The second way is that you can click on debts file, and then you can dragon drop it to your desk up or where you want. However, it just creates a one X asset, right? Sometimes probably you need to get the whole screen. And to do that you can just click on iPhone eight, which is the name of our campus. And then you can dragon drop it into your desk up. As you can see, it is exported. At this moment, I would like to mention some points, which is necessary for designing, and also it's essential for exporting number one. You don't need to explore texts because you can easily create them with code number two. You should not export search for or something like that because, as I mentioned before, you can easily create them with code. So now let's open up the X code and see how we need to import our assets to exclude properly to import your assets into X code, you can easily click on assets that XSI assets, and then you need to drag and drop all of your assets into acid section. And here we go. We have one x two X and three X bottom to learn how one x two x three X works and what's the size off them? I really suggest you to read the next lecture, and I've already provided some information about points, peak sales and about screen size. Thank you so much for watching this video. I will see you in the next video 7. Variables and Constants: all right. In this video, I'm going to take about variables and constants. Actually, variables are used to soar information to be referenced and manipulated in a computer program. So in a simple word, you can change variables whenever you want. However, constants are something that you cannot change its in future. Let me open up the X code and create a playground project in order to show you how you can work with variables in your project. And here we're gonna use blank and then click on next. And here you're asked to choose a place for saving your playground. I simply choose desk up and ah name. It's as test one and Inkley can create. Here we go. But let me give you an example of using variable in your project. Suppose that you want to use a name. That's right. You are name. For example, Alex, if you want to change a variable, you can simply just write the name of your variable and Dan an equal sign and just right the new value. As you can see on the right side, you can see the output. However, if you want to use an information that you don't want to change it in future. You need to use constant and you need to write Let the Earth Day. Let's do 24 and I want to show you why you cannot change it in the future. Just right. Birthday equals to 25 and let's see what happens. Ah, here we go. You can not assign to value birthday, Right? Birthday is a lead constant. So if you want to change its in future, you need to use war. And if I change, let to our Okay, There is no error anymore. So we can come to this conclusion. That's whenever we want to change a piece of data. In future, we need to use variable. And whenever we want to use a fix kind of information in our project and we don't want to change it in future, we need to use let's or constant. And now I'm going to explain to you the assignments operator. So what does it mean? It assigns a value from the right hand side into something on the left hand side. As you can see, the assigned Alex to name and thes sign is the assignment operator. Or here we assigned 24 to the birthday 8. Strings: Hello, everybody. In this video, I'm going to talk about strings. Actually, a string is a series of characters and you encompass the character in a double quotation. Like what you can see here. Lo playground. Let me give you some examples. First of all, we need to Right you are. First name is equal to Alex and Dan again. War last name is banging. And now we're going to combine these first name and last name together in order to get a fooling. So let's go ahead and right. You are fooled. Name is equal to first name plus last name. And if you look over there, we can see Alex baby. But there is a problem. We need a space between the first name and last name. How can we do that? You can simply at another er plus here and ad space here. This is not an empty string. This is a space. Okay? And there is another way that you can do this and let me show you that the right of our full lane to is equal to back slash parent Is is another back slash m parent this okay? And you can simply right first name and here last name. And as you can see, we've got the same results. So what if we want to add the age of that person to our string? We can simply write another war called age, which is equal to 23. And then we can write, Ease age. Here we go. This method is called string interpolation, and it means that you can pass variables right into your streams. You can also use depend function with dot syntax to pen something to the end of it. Let me show you first name. That's append. And, for example, we can write ease 56. Here we go. There are many functions that you can work with And let me show you something. For example, first name that count. Here we can see the number of characters off first. Me, But you may say Alex doesn't have 10 characters. What's the problem? Okay, let me mention that there is no problem if you pay attention to the upend. We already added some characters to this, and if you count it again one, 234 56789 10. It's completely correct. Lets me write a sentence and hems is equal to Where are you and suppose that you want to change you toe we So we need any if statements. In order to do that, let me write Eve sentence. That's contains you, Dan Centonze that's replacing. Karen says here, uh, you to we You can see the result over there Very because they have you in our sentence. Thesis statement changed our sentence toe. Where are we? And this is very, very cool. 9. Functions: always in this video. I'm going to talk about functions which is a very important core components off program. I want to explain it to you with some examples. Suppose that we want to calculate an area off a shape. So first of all, we need to create our shape. Okay, Who are length is equal to 10 and again. War with is equal to 12 and we want to get area. So probably you think about, we can simply just right who are area is equal to length times with which is correct. As you can see, the result is here 120 now I want to calculate the area off another shape shape too. You are length to is equal to 12 you are with two is equal to 15 a gain bar area two is equal to laying to times with to which is equal to 180. But can you imagine if we want to calculate the area of 1000 shapes How much time we should take to get that result? Probably we need to rights the 1000 lines of code in order to get that result, which doesn't make sense but there is a better way. We can easily write a function to do that for us. Okay, we need to write fine and we can name it. Calculator. Okay. And right now our function doesn't do anything. In order to make it works. We need to do two things. First of all, we need to write two inputs, the first funnies length, and the 2nd 1 is with. And now we need to write what we want to do here. Return linked times with and now our function is ready to work. So let's check our function now. Let me creates let year. Let's shape Juan is equal to, and now we need to call our function in order to use it calculator. And as you can see, there are two in boots that we can add two numbers, for example, four and then seven. Here we go. You can see 28 also another one. Let's shave to, which is equal to calculator and eight times nine, and you can see the result immediately. So as you realize, it is so useful to use functions in our project, and there is a principle in programming that says don't repeat yourself so we don't need to repeat ourselves in Earth gets the new result and there is no point to do that. 10. Conditional Logic & Boolean: all right. In this video, I'm going to talk about conditional logic and bullion which are very important in program. So let me give you some examples about this topic. Suppose that you want to compare two things and you want to do something If something else is true or false. For example, we have here war access which is equal to true. Okay, and true is a Boolean okay True and false. Always our bullion. This is about its type. Now I want to write any of statements. If access is true, Dan, let's preens. The door is open. Els Prem's the door is luck. So in this case you can simply realize what is happening. If access is true, then it prince. The door is open as you can see over there. But what happens if the change the true two vaults that c Here we go. The door is luck. So in many cases we can use billions, which means using follows or true, in order to realize the condition and situation. And now let's talk about the comparison operators here comparison operators the 1st 1 is equal to with two equal signs. The 2nd 1 is not equal to not equal to an exclamation mark loss an equal sign and the 3rd 1 is greater than and the 4th 1 greater than Greater Dan or equal to, and the next one is less than in the last one is list and or equal to. So now let's do some examples. Who are balance is equal to 200 and who are Book price is equal to 100. And right now we're going to compare these two wars in order to get a result with writing any if statement. So let's right you balance is, let's say, um greater than or equal to book price. Then cream something. Okay, that's right. Harshest book ills. Let's print. Ah, you need more money. And as you can see, we've got parishes Book here because our balance is greater than book price. So let's change book price and see what happens. There we go. You need more money because now book prices greater than balance and it's not satisfied with our statement. Let's try something else. For example, who are title Juan is equal to Ah, this is the first story, okay and again, War Title two, equal to um, diff e. Let's say I want to write the same sentence with some mistakes. The first story. Okay. And now I want to compare these two sentences and see if it is correct, then do something else. So let's right. If Title Juan is not equal to title to, then creamed correction is needed. All right? I hope you enjoy this video and see you in the next video. 11. Arrays: Hello, everybody In this video, I'm going to take about a ray. Let's get into it with doing some exercise. Is suppose that we want to store the information of some students that they want to get some loan have from their university or their schools. So let's right, you are student. One lone is equal to 2000 and again, Bar student to long is equal to, let's say, 4000 and the last one war student three phone is equal to, ah, 5600 and now I'm going to create an A Rainer to sword their information. So let's right, you are student or let's say, students Loan, which is of type End, which stands for integer. She's equal to two braces, and in this braces we need to write the amount of their loans 2000 4000 and 5600. And as you can see, it's yelling me because I just roads in, which is an integer. However, I used a double type number here, so in order to fix that, we can simply just change end to double and it should be fixed. Yes, so now I want to pre in some information off this array. Just right. Print students, loan duds count. Let's count first. As you conceive. We've got three here and we have three numbers here. What if we want to upend a number two Disarray? As you probably can guess, You can just simply right. Student students loan. That's append. And here I can write 7800. 789. Here we go. Okay, let's print students loan that count. Let's see the result. Here we go. We've got four. And what if we want to remove one of these students from our array? Could you guess how can we do that? If you could just pause the video and do it by yourself, So I hope you could do that. And now I want to show you how you can easily do something like that. Just right. Students long that's removed at. And here we need to write index number off our students, for example, if you want to just remove the 1st 1 we need to write zero because every array starts from zero. So just I want to write zero and again. Prince students loan. Don't count. Here we go we've got three. And do you want to see the array again? Just that's a print students long And here is the result. As you can see, we don't have 2000 anymore and we have three students loan amount. Let's try something else. For example, if we want to depend, string into our array. What happens in that situation? Just let's try it. Students long. That's the pens. And here I just want to use a string. Let's say hi, what happens? As you can see, it's yelling me again. You cannot convert value of type string to expected argument type double so we can come to this conclusion. That's if we use a specific type of array. We can not put anything into that. So in this case we can just depend a number with the type of double. So how can we do that? What if I want to store the name of the students into an array? So let's create another array who are Ah, let's call it students. Suit ends, which is equal to, and now I want to write the type of our array string because we want to store their names and now we need to initialize it. So I just initialized and declare our array. And now I want to upend the student's name students. That's append. And here I can write Alex and another student. That's append. It's, um, and another student. That's a pen that say, Tom and another students. Does it depend? That's a a rash, which is my name. And now let's prince our array. And there we go. You successfully added our students name into our array because we declared and initialized Honore V type string. All right, I hope you enjoy this video and I see you in the next video. 12. Dictionaries: Hello, everybody In this video, I'm going to talk about dictionaries in Sioux for So right now we're going to create our first dictionary unsaved. So let's create our dictionary. You are. Let's call it's abbreviations creations. And now we need to declare the type of our dictionary. Let's create to braces. And here I'm going to write string and again streamed. The 1st 1 is the key, and the second string is the value. So now let's at some key and some values to our dictionary. Let's create to braces. Okay, let's create some key value. The 1st 1 let's say Sisi, which stands for Cara Bone Copy, and we can separate them with Comma. The 2nd 1 Let's say CD as you know it stands for compact disc. The 3rd 1 let's call it I D, which stands for identification and the last one. Let's call it It's our which stands for human resources. Perfect. We successfully created our first dictionary, and we also added some key values did so Now let's use our dictionary with writing, Ah, abbreviations. That's first of all that's counted count. Okay, we've got four, and as you can see, we have four key values 12 three and four and probably you may think that's it's something like an array, but it's totally different because in an array we use an index number in order to call something. However, in a dictionary we just call the key in order to get the value. So let me give you an example. For instance, if you want to call CC okay, we can simply right abbreviations and open to braces and then just right cc and let's see what happens. Okay, we've got Karen copy because the CC is the key of caravan copy value. So when they use a dictionary, we don't need to use the index number, and we don't need to memorize the order of each value. So we just need to write the key of that specific value. Let's write abbreviations and again open to braces. And don't forget to use string because, as you can see here, we just declared and initialized our abbreviations dictionary with the type of string. The key is a string, and the value also is a string. For example, if I write to here, of course it's yelling me as you can see I've got an error because it's a value of type string with an index of type into Okay, so I need to change it to string. And in this time that's right, I d identification. So what if I want to remove a key value from our dictionary? We can simply right abbreviations that's removed. Remove value for kiss stream And here I need to write the key, for example. That's right CD. Okay, and let's check our dictionary one more time. Have revie ations that count. It should be three. Yes, and that's Prince. Our dictionary screams abbreviations. Here we go. I've got CC, Cameron Copy H R and I. D. So we just removed CD from our dictionary. And what if I want to change the value of a specific key? I can simply right abbreviations and again open two races, and here I can write the key, for example, CC, and it is equal to string. I can't write what they want. For example, High, which doesnt maces by debate. Let's prince our dictionary one more time and here we go. We successfully changed the value off the CC key. It's really awesome. So let's do something else. For example, let's use any statement if abbreviations dots he's empty. Dan creams. Steris. No abbreviations. Els creams ready to go. So in this case, we've got ready to go. But what if we want to remove all of our key values? So let's do that and see what's happening. So let's remove all of the key values. That's right. Every aviation's that's removed value for key string. The 1st 1 is Sisi and again abbreviations that's removed value for key string. The 2nd 1 is C. Ah, sorry, I d. You already remove city and the last one abbreviations that remove value for key. It's our and let's see what's happening now. A year ago, there is no abbreviation because now our dictionary is completely empty. All right. Thank you so much. I will see you in the next video. 13. Loops: Hello, everybody. In today's video, I'm going to talk about how to use plug ins in sketch. If you want to become a good designer or, let's say, a professional designer, you need to know how to use plug ings in your project because it makes our life more easier . And probably if you want to do something without using Plug ing's, it takes much time. So in this lesson, we're gonna learn how to use plug ins in sketch properly. So let's go ahead and start with inserting a shape that seals around it with dragon Drop great and let's click on plug ings on top and click on map generator and generate a map using Google maps. With this plugging, you can easily, easily insert or, let's say, generates a Google map in your project. For example, in this field, you can writes an address or location. That's right, New York Great. And let's click on OK, perfect. As you can see, it generated a Google map with that's seven location into our around. So it is absolutely useful for using in your user interface projects, and you don't have to worry about how to deal with taking screenshots from Google Maps and the exact location. So let's go ahead and use the next plugging the next plug and I want to mention is so interesting. And it's called Looper. So let's go ahead and inserts shape. Let's insert and normal. Okay, lets Dragon Drop and Dan. Let's double click on debts and choose thes two points and click on Straight Perfect and It's Unchecked Borders and I'm Gonna Change its Color. Let's use a Grady Int, which is blue. Yeah, that's fabulous. And now you need to go to plug ins and click on Looper in Click on Loop, Oren said. Just press command l. And in this window you have some settings and some options, and you can change it as you wish. For example, here we have number of copies, duplication counts, and it's 50 by default. So let's change it to 20. Did you see that? That's so cool. For example, let's right 80 and click on scale. Put increments by four and let's click on, move vertically, or let's change it to randomly. That's pretty cool. So check this great and now you can decrease its size with selecting this fuller and see the results. That's amazing. I'm so excited to see how you can use this plugging in your project in order to make many graves objects. So if you use that, please send me your file in order to check its and I will post its on my tutor and on my instagram as well. Energy. Appreciate your work and effort. So now let's use another lovely plugging, which is so useful, and that's called Runner. So let's go ahead and click on Runner and click on Run. Great. As you can see, you can use this plugging for many occasions and many situations. For example, you can go to insert section and let's search for navigation bar. Here we go. And if you double click on that, you can easily put this navigation bar into your campus. It's amazing, isn't it? Or let's do something else. For example, let's use a search for and double click on that, and here we go. We have a Sarah's far, and also you can use this plugging for something else. For example, you can say go to page one or go to somewhere else, or you can say in so another plug ins For example, we have your sketch measure, which is already installed, and I will talk about it later or something else. I'm pretty sure that you love this plugging. If you used the next liking that we're gonna learn is relabel bottom. So what does it do that's create a bottom? Here? It's round it. And also let's increase radius okay and changed a caller. This room it's pretty. And let's put a takes inside. For example, my bottom and let's aligned this to dissenter vertically and horizontally. Great. So now suppose that you want to change these texts in the future with using this plug, and you can easily change your tax, and this plug in will automatically change the size of your bottom. I mean the size of your Shea. So let's give it a try. First of all, we need to make a group. To do that. Just select both your takes and shape and use Command G in order to create a group and then click um, floggings in button relabel button. And here you have a field that you can fill it with whatever you want. For example, let's right high and click OK here we go, the plugging changed automatically the size of our shape. Or let's say, the size of our bottom. Using these plug ins in our projects will save us a lot of time, So feel free to use that, because all of them are free. So the next plugging I'm going to talk about is user flows. Do you remember this project that we already use in order to learn some basic codes? So now suppose that you want to have a diagram, or let's say you want to make a prototype for your project. And with this plugging, you can easily do this so you can easily select, for example, this bottom and also withholding shift. You can select these canvas as well, and then go to plug ins user flows and create link and that seats it successfully created your user flows, and it's really helpful if you want to prototype your project. All right, The next plugging is called anima, and it allows you to auto layout your project easily. Probably some of you do not know what orderly out means, so let me give you a short explanation. As you all know, there are many kind of iPhones, or iPads, in the market with different screen size. So when a developer wants to develop a universal application that can work and run on any IESS device properly, that developer needs to use or the layout in order to make it compatible with each screen size. And I will explain it completely later on. So suppose that you design your project for an iPhone, and after that you want to know that's how it would looks likes in an iPad. So we're using these plugging. It's easy to do something like that. You need to just select your canvas, and then you can change the canvas size. That's so cool. All rights. I already prepared an article for you with all of the plug ins download link that you can find it in the next lecture. Thank you so much for watching this video. I will see in the next three 14. Classes in Object Oriented Programming: all right. In today's video, I'm going to take about how to export your design. When you're designing, you need to know how to deliver your assets to the developer, so you need to be ever of the pixel density that you're designing it when you want to export your project. Or let's say your design assets. You need to export it for many devices because each screen and let's say each device has its specific size. So, for example, when you design your assets for iPhone seven or iPhone eight, you can use it for iPhone 56 or four. However, if you want to use it for iPhone eight plus or eggs, the quality of your design will be decreased. So it's better to design for iPhone eight plus or iPhone 10. And after that, then you explore your assets. You don't have any problem, so let's go ahead and show you how you can export your assets. So as you can see, I already designed thes four, and now I'm gonna export my designing. So how can I do that? There are several ways. The 1st 1 which is the primary way, is that you can click on these group. As you can see, it's name here, and then you can click on make exportable and probably have a plus button here nerd to make to excise or three excites. But now I can change the sitting too ill s and the sketch will automatically create the two x and three x sites one x two X and three x design with PNG format, And after that I can click on export name and choose a place and just click on export. And, as you can see, it is exported. The second way is that you can click on debts file, and then you can dragon drop it to your desk up or where you want. However, it just creates a one X asset, right? Sometimes probably you need to get the whole screen. And to do that you can just click on iPhone eight, which is the name of our campus. And then you can dragon drop it into your desk up. As you can see, it is exported. At this moment, I would like to mention some points, which is necessary for designing, and also it's essential for exporting number one. You don't need to explore texts because you can easily create them with code number two. You should not export search for or something like that because, as I mentioned before, you can easily create them with code. So now let's open up the X code and see how we need to import our assets to exclude properly to import your assets into X code, you can easily click on assets that XSI assets, and then you need to drag and drop all of your assets into acid section. And here we go. We have one x two X and three X bottom to learn how one x two x three X works and what's the size off them? I really suggest you to read the next lecture, and I've already provided some information about points, peak sales and about screen size. Thank you so much for watching this video. I will see you in the next video 15. Sets in Swift: Hi, everyone in these video, we're going to talk about sets in Swift. As you can see now, I'm working with Exco 10. So the reason that the interface we're working with has been changed is because of that. But don't worry about it. Nothing important has been changed. So without further ado, let's get started. First of all, I'm going to tell you what's the difference between a set and an array? Actually, they are almost the same, but there is one main difference between them, So when you're working with an array, you can store duplicated values. So, for example, you can store two identical words in an array. But in sets you cannot store duplicated values. So let's get started with an example. Let's write war Simon Languages. Colin off type set is equal to brackets, so let's store four different languages. The 1st 1 English, the 2nd 1 Spanish, the 3rd 1 That's right, Polish and the last one German. All right, so now we have successfully created are set, but how can we add value to that? Unfortunately, unlike a raise, you cannot use the plus equal operator here in order to a pen, something to a set. We need to use another syntax, which is called Insert. So now let's right. So now let's right, Simon Languages. That's insert and let's insert something here. Let's write French, and after that, I'm gonna print are set. So let's write print Simon languages and let's run our code. There we go. So over there we have English, German, Spanish, Polish and French. So, as you may realize, the sets is an on order collection. However, an array is an ordered collection, so I would like to mention that with Set, you can easily determine the values two sets have in common or Weisser PSA. For example, let's create another set That's right. War David languages of type set is equal to brackets are right. And now let's write English, German, Japanese and also Italian. So how can they get? The common language is that both Simon and David speak. We need to use the syntax, which is called Intersection, so let's right, Simon languages. That intersection. There we go. And here let's right, David languages and let's run it. There we go here, we've got English and German, and also you can get the differences between two sets. So let's right, Simon languages That symmetric difference. And here let's right, David languages and it's run it. There we go. Italian, Spanish, Polish, Japanese, French arrived. Thank you so much for watching this video. I hope you enjoyed it and I receive in the next video. 16. Switch in Swift: how your run. Welcome back to another video of this tutorial in this video. We're going to talk about such statement in Swift. Actually, such statements work like if statements, but it makes our life easier, and it saves us a lot of time. So without further ado, let's get started. So first of all, let's declare a variable That's right, War. And then let's call it allowed speed and set 50 to its value. And after that we're going to create our first switch statement. So we need to write Switch and we need to call our variable here and clearly brackets. So let's write case. And here we need to specify the range we're going to compare. Let's write 10 and Colin. And after that, let's write print. It's allowed. And then let's write case. And here we're going to use arrange. So let's write 30 dot, dot 30.0.50 Colin and then that's print snow. And after that, another case. But this time that's right. 50 dot dot less than 80 and then that spring and normal. And then at the end, we need to use default. Colin here, let's print. There is no information. Hopefully someone adds those information to our switch statements. So now let's shake our search statement, as you can see, if you've got slow here because our allowed speed is set to 50 over there, So let's change it to 10 and run it. As you can see, we've got it's allowed and let's change it to 78 which is between these range and run it all right, normal. And now that set it to five, which is not between these numbers that we have set. And now let's run it. There we go. There is no information. Instead of numbers, you can also use strings here. So let's create another search statement. First of all, let's declare a variable seasons he is equal to That's right spring. And then let's create another search statement. Switch for its value. Let's write seasons. And for case von I'm gonna write spring And here let's print what a nice weather and let's create another case case winter and let's print. All right, we've got an error here, so yeah, we need to use quotation marks because these are strings. So let's at those quotation marks and then we can go on and for winter lets right. I'm not a fan of winter because it's too cold, and that's it for now and for the default. Let's right, Prince. The rest is unclear, so let's check it out. Let's run it. As you can see, our seasons is set to spring, and we've got what a nice weather over there. So let's change it to wind her and run it again. There we go. I'm not a fan of winter. And what about if we set it to something else, so it shouldn't be necessarily a season's name? As long as it's a string, we can set it to anything else. So let's write high and we should get. The rest is unclear. And let's run it. There we go. The rest is unclear because we didn't have any case for high. All right, I hope you found this lecture useful, and I will see you in the next week. 17. Structures: Hi, everyone. Welcome back to another video of these tutorial in these video. We're going to talk about structures and swift according to the apple, like you meant ation classes and structures are general purpose, flexible constructs that become the building likes of your programs. Coat. You define properties and methods to add functionality to your classes and structures, but using exactly the same syntax as for constant variables and functions. So now let's see how struck syntax looks like striked. And here we need to use a name and curly brackets and inside that we need to add our properties. As you can see, we defined its with the strike, followed by your name and the care Lee brackets. Inside a curly brackets, we can add the properties. So now let's take a look at this example. Striked user, which is our structures name and inside. We're going to add some properties, so let's declare a variable and let's call it name, off type string and let's declare another variable and call it email off type string as well. All right now it's time to create an instance of it's so in order to do that, we need to declare a very about. So let's write war user Juan is equal to user. Francis is, and here we can use any information we want. So let's right, Emily for the email. That's right, something at the main dot com. And after that, we're able to print out our users name and also email. So let's check it out. Print and inside. Let's right to user one. That's for example name and let's run our code. There we go. We've got Emily over there. We can also print it's email as well. User one. That's email Ron something at the main that's got great. Actually, structures are value type. It's essential to know the difference between value and reference types. So let's create another instance of user in order to explain to you what I'm talking about exactly. So let's right of our user, too, is equal to user, Durante says. And here let's right, Andrew. And for the email address, let's write something two at the main dot com great. And after that I'm going to declare another variable, which is called user three. I'm gonna assign it the value of user, too. Actually, so far are user threes. value is equal to our user twos value. But what's gonna happen if I want to modify some off the properties? So let's check it out. That's right, user, too. That's name and I'm gonna change it to Brian. Let's make some space. And now let's print out both off them to see what I'm saying. So let's write print user to that name and also print User three that name. So right now, what do we expect? We expect to see that our user three name is equal to our user to name, although we have changed it right, but let's run it and check it out. There we go. The name of User to has been changed to Brian, right, But the name of User three is unchanged. As you can see, it's Andrew as we assigned it to it. So every time that we create an instance of something with structures, we make a copy of that. And after that, we changed or modify it. All right now, let's talk about functions inside structures, so let me create another structure to explain it to you in a simple way. That's right. Striked person Kerry brackets and inside that I'm going to declare a variable and call it first name, off type string and also another variable and call it last name, off type string as well. And after that I'm going to create a function. So let's write, find cream info as its name, Durante says, because our function doesn't have any property. And inside, let's try print quotation Mark and we need to use the backs. Nash and parenthesis is And here let's write itself dot first name and also another backslash parenthesis is self, not last name. So let's check our function out. So now we need to create an incense of it. So let's write var person easy call to person and Prentice says, and thes properties. So let's right, Brian and for last name Smith. So now it's time to call our function or are method because whenever we use a function inside a structure or a class, we call it a method. So let's call it So let's drive person dots, print info And now if Iran our code, we will see Brian Smith pretty cool arrived. Thank you so much for watching this video. I hope you enjoyed it. And I will see you in the next video. So see you that 18. Designing and building the first app: Hello, everybody In this section, we are going to get into our very first journey and make our first app. I would like to mention that I just wanted to keep it a simple as possible because I just wanted you to become familiar with some aspects and features of Exco. And at the end of these section, you will able to build your own first air with sweets. So let's go ahead and open up the X coat and creates a new export project. And as you can see, we want to you single view, app and Dan click on next and here. We need to provide our product. Name that skull. It's I, um photographer, an organization name. You need to write your name or your company's name and organisation. Identify your you can just write. Come. That's photographer or the reverse domain name. If you have a website and we're gonna use Swift and then just click on next and here you are asked to choose a place for saving your project. I just simply chose desktop and then click on create. Great. So now we're ready to build our first application together, and to do that I would like to inform you about some features off Exco. So let me explain to you what's happening here and what we have in this section. As you can see, we have some files. The 1st 1 is apt delegate, and the 2nd 1 is View Controller, which we will put our code. And the 3rd 1 is main, that storyboard that will design our app in this file, and the next one is assets. That's XSI assets, and the next one is launch screen. For example, you can put your logo or whatever you want. This is the launch screen page. Let's go ahead and click on Main. That's story. Bored. This is your canvas, and I'm going to run our app on iPhone eggs. And here, if you click undies can change your canvas toe. IPhone X as well. So now our storyboard is ready to design our first step. So, first of all, I want to add some assets to my project. Okay, our assets is ready. You can simply download the assets file in the next lecture, and you can easily drag and drop all the assets into the X Code. So let's go to Maine. That's story bored. And first of all, I would like to change the Bagram color. Let's go ahead. Just click on the canvas and then click on background color. And here we need to write our hex color code, which is Yvonne, Yvonne Yuan and Dan. Click enter. Great. So now I need to add a your image. You. So just click on the object library, okay? And then you can search you. I image. And then you can easily drag and drop a your image. You into your campus. Okay, let's increase its size. Perfect. And then you can click on image in the attributes, Inspector, and just search photographer May and police set the condom moon to aspect feet. It looks pretty, right? And then I want to add a label. I can search label here and again. Dragon drop. It's here. Okay. And let's increase the size of this label, okay? And I want to write Ah, um, a photographer. Great. Let's increase the size off our phones. Okay, That's 28 is great. And then this style change it with bold okay and lineman's let's set it to center. At this moments, I would like to add a button to our app and I can easily search Watan and a game drag and drop here. Let's make it larger and again in the attributes and spacer, you can look for image and search for button. Okay, let's remove the text and again content mood aspic feeds Great, I think here is good and let's run our app. All right. We successfully designed our APP interface. And in the next video, I will show you how to connect each object to your code in order to make the Spartan works . So seeing the next video 19. Connection between design and code: all right. In the previous video, we successfully designed our APP interface, and in this video I'm going to show you how you can connect each object your coat in order to make your bottom works. So let's go ahead and click on Show the assistant editor great. And if you hold control and drag this button into your code and drop it, something will pop up. And here we need to change the connection to action because our button wants to do something. So we need to change the connection from outlet to Action. Okay, and let's name it pressed Watson and click on Connect Great. And the next thing we want to connect to our code is our label. And there is another way that you can use it for connecting. Any object, your coat and it's here. You can simply find your file and again hold control and dragon drop it into your code. That's name needs text and then click on connect. Great. So at this moment, we want to do something cool. We want to write some colds that if the user clicks on this button, our label will change to something else. Okay, so here between these two care lee brackets, we can write our courts. We can simply write text, which is our label name dot picks. Okay is equal to string. And here we can write whatever we want. For example, ah, you and a great photographer. So here we just used dot syntax in order to change our label. Tex to a new string, as you can see here. So let's give it a try. That's Quicken. Take a photo. Great. It's works, but we still have one problem. And can you guess what it is? You're right. Our text is nuts in a great format, so let's go ahead and fix it together. First of all, let's make it bigger. And then I need to increase the lines number and let's try again. Okay, let's click on this button and here we go. Your A great photographer. All right. In this video, we learned how to connect our objects toe are coat, nor to make it works. So let's call this video. Don and I will see you in the next video 20. The environment of Sketch: Hello, everybody. Welcome to D Senatorial in this. Hello, everybody. Welcome to this tutorial In this section, we're going to learn how to use sketch as a program for designing our APP interface. This is an absolutely great app for user interface designing, and you can use it for making lovely APs. So let's go ahead and open off the sketch. All right. As you can see, there is a tool war on the top and also group and on group section, and also shape editing tools and Boolean functions forward and backward mirror cloud, and we will cover some of these features. Later on. There is a layer lease on the left. If you're familiar with photo shop, you can quickly recognize it. However, it usually is under right side and for the shop. But there is a lot of space here, and I really love sketch because it allows you to easily move between your layers and change whether you want on the right side, there is Inspector. You can change positions size of your object and also opacity as the less feels and borders or shadows. And in the middle you will see a large canvas that's created campus okay for next year ago . And this is the place that we will design our up interface. In fact, there is much more that we're going to cover all of them in this tutorial, and we will learn how they work and how we can use them to make our amazing app interfaces . So basically, it was all about the environment of sketch. And in the next video, we'll work on our first user interface designing project. So see you in the next video. 21. Design a login page: Hello, everybody In this video, we're going to Starr's our designing or let's say, our first user interface designing for an application, and we're going to design the first page or, let's say, the logging page for an application. So let's go ahead and click on insert and then click on our port. And on the right side, you can see some devices here iPhone, iPad, even Apple Watch or Apple TV or Mac. And here you can change to material design. If you want to design and let's say, for Android devices, however, we want to stick to Apple Devices. Let's go ahead with creating an iPhone eight canvas. Okay, here we go. So first of all, we need to create a bottom for our lagging page. Right? So let's go to the insert and go to the shape. As you can see, there are many options here, such as rounded oval rectangle, lion Arrow star polygon. Okay, but in this project, we need to use round it for our bottom. So let's go ahead and click and drag our button Great. And on the right, you can make some changes to make it looks beautiful. We can change the radius amount. Okay, Great. And let's change. Ah, feel color to you can use Global Colors or Grady INTs. Let's use this one. That's very beautiful. Okay? And let's uncheck the borders because we don't need death. And let's move it down. Okay? And at this moment, we want to have another button with the same size with the same color. So how can we do that? Do we need to create another one and do all change is not at all. We can easily copy and paste it. Withholding command. See? And command V. Here we go. So now what we need is a text. Let's go to the insert and click on text. Here we go. That's type sign. I mean, right, And let's change the way to regular. Great. Okay. And for the alignment, you can easily select both of your texts and your shape and click on the line horizontally and again align vertically. Great. It looks beautiful. And again, we need to copy our text. So there is another way to do that. And you can duplicate your takes with command D Okay. And again, alignments. Perfect. And let's change you too. Register and Let's decrease the size of our phone to, I think 24. Yeah, it's better. And also for this one 24 right? So what else do we need? We need to add to fields for our user name in our password. Okay, so let's go ahead and click on insert and shape and again round it. That's click and drag. Okay, and it's on Czech Borders game. We need text. Let's write user use their name and again Lyman's. You need to do some practices in order to become familiar with some features. Off sketch. At first, it seems difficult to do. But if you do some practices, I'm pretty sure that you can handle it and again that change the color to its use the scholar great and let's duplicate our fields. And now let's change it to pass for perfect. But I have an idea. What if you want to change, pass for two something cool, for example, these dots. In order to make it hidden or secret, it looks professional, so to do that, you can hold option and number eight to make those small dots. And let's change the position of our fields a little bit your center, and now we need a logo. So let's create one logo year with Star. Okay, I just hold shift and drag this star. That's change. Let's uncheck the borders and change the field color. Okay? And let's use a text. Let's write stars and just changed the way too bold and increase the size of little. It's to 26 or let's increased more, for example, 30. Okay, great. And let's use another shape such as lying can change the color and duplicated. Okay, great. What do you think about our first interface design, or I Thank you so much for watching this video. I will see you in the next video, and I will talk about how to do some changes and have to add something to our user interface in order to make it looks more beautiful. 22. Using Shapes: Hello and welcome to another video of these tutorial. So in this video, we're going to learn how to use all shapes and how to edit them in order to make them look beautiful. So let's go ahead and click on insert and shape. Let's get started with line. As you can see, you can use it with pressing L alternatively, and we dragging and drop. You can make a line, but what if we want to have a straight line so you can easily just hold shift? And as you can see, we have a straight night, and if we move our mouths, we can change the angle of our line to 45 degree and again to 90 degree, etcetera, etcetera. So let's move it here. Let's duplicate it with command E okay. And the next shape we are going to use is Arab. Okay, again, with dragon drop, you can have a narrow and also you can change the color. It feels, for example, to read, okay. And the next shape is a rectangle, and you can also use its with pressing our let's drag and drop it. Great. And as you know, you can change the color the borders color here and feels color here. Great. And also you can increase the radius nerd to have the care And let's go ahead and use another shape which is a novel, right? And draw a circle and again you can change the color to what else you need and the next shape is rounded. Okay, here we go. And we use it in lots in our design. And nowadays many designers prefer to use rounded shapes and the next one is star. Okay, that's created here. We already used star in the previous video and now we want to know how we can edit this, right? If you just double click and at there are some points, as you can see here, here, here there are some points. For example, if you click on this point at the top, you have some options on the right that you can choose. For example, if I click on mirrors, you can see what happens here. And also you can change it as you wish, right, or you can choose a symmetric. Okay, let's make our star more beautiful. If you just select thes points This one this one, this one this one and this one and increase the corners. You can see how beautifully teas and let's go ahead and create another shape, like polygon. Personally, I don't use it a lot. But if you double click and that you can do some changes, que Or that's like these two points this fun, something like these. So now you haven't idea that how you can change and edits any shape in order to make it looks beautiful. And now I'm going to show you how you can make a new shape for yourself and for your project. So let's click on insert and again, let's click and round it. Okay, here, something like this. And now again, insert shape. Although, okay, something like this. And now I'm going to marriage these two shapes in order to make a new shape with clicking on union. What does it look like? Yes, you're right. It's something like a cloud. If I change the color to blue Ah, yeah, Beautiful. So now you learn that how you can create your new shape in order to use it in your own project. So let's copy and paste it. In our previous project here we go, okay. And I want to move it down. Right? That's duplicate it and increase its size. Gang Cup in pace it. So let's change your capacity. Great. But do you think it is beautiful? If it is, let's go ahead and change our star Double click on that and choose these points and increase the corners. Perfect. All right. Thank you so much for watching this video. And I will see you in the next video. 23. Masks in Sketch: Hello, everybody. In this video, I'm going to talk about masks in sketch and how you can use it in your project. How you can use thes powerful feature in your designing and some other features. So let's go ahead and create a circle here and dragon Drop. So suppose that we want to create a profile image, so we need borders. Let's change the color to red and also increased the thickness. Great. We also need a photo. So let's drag and drop a photo into sketch. Here we go. Yeah, it's George Clooney, right? Perfect. And the most important question is, how can we put our image inside that circle? So the answer is with using mask. You can easily select both photo and your circle and click unmask their ago. But there is one more problem what happened to our borders? So let's check it out with clicking on mask. As you can see, it's unchecked. Let's check it. Great. So with this feature, you can mask anything you want, even texts or images shapes wattles unique. So let's do something else that's creates around it. Here we go, and also I don't. It puts the sorry inside of that with dragging and drop. Okay. And let's change the field color to dis Grady ins. Great. And I don't need borders. Beautiful. So what do we need to do exactly? You're right. We need to select both our star and rectangle and again click unmask. Their ago, we successfully used mask feature in order to put our shape inside of another shape. So now I would like to talk about another feature which is called Scale. So suppose that we want to decrease the size of our photo, right? Have you noticed about the amount of that thickness? So how can we decrease its size without increasing the thickness off that red line with the scale feature? We can simply resize it to 40%. And there we go. Have you noticed how useful it tastes? Thank you so much for watching this video. And I will see you in the next video. 24. How to use images in Sketch: all right. In today's video, we're gonna learn how to use images in our project. And do you want to create for the cars for our project? So let's go ahead and create around it. We're dragging and drop as you know, something like thes great. And now let's dragon drop my photo. So now we're going to put our image inside of our rand it rectangle so we can use the mask feature. We need to select both card and rectangle and Dan Click on Mask. There we go. At this moment, I want to add something interesting, and we want to make our own object or, let's say our own shape. So let's go ahead and click on insert and shape and click again on rounded okay with dragging and drop that zooming. Great. I don't need borders. Let's duplicate it and click and rotate and try to rotate it 90 degree and select both rectangle and click on union. So right now we have a plus sign, but what I am about to do is to rotate it one more 45 degree in order to get the cross sign or let's say, wrong sign, grave and Now I want to move it here. Let's zoom out and decrease its size. I think it's great that's put it here and now I'm going to change its color. That's Quicken feel. Go to the Grady ins and this one. Beautiful. So one more thing I need is some text that's click on insert and text. And here, let's say my first photo and let's increase its size to 36 and change its collar. Two white great here ago and let's duplicate it. And now changed awaits from medium to regular perfect and also decrease its size to Let's try training now. I think it's OK. Let's edit it. I find it something like thes. And now, right? That's Waas. The most amazing photo I had ever to beautiful. Here we go and let's click on Dad's on my first text in order to align them here. That's great. What do you think? If the change the background color, I think it's a good idea to change you to a light gray something like these, and also I want to add some shadows to my card year. Please put y zero and I think five or 66 is a good amount. So let's copy and paste the logo that we already designed for our stars up there we go. I just copy it and paste our logo that we already design in order to make this project looks more beautiful. So if you liked it, please perceive your practices in order to become more familiar with sketch. Thank you so much for watching this video. I will see you in the next video. 25. Colors in UI designing: all right. In today's video, I'm going to show you how toe work with colors. Generally speaking, learning colors is so hard, however, you can learn it lightly. If you know the following rules, the first thing I want to mention is using primary, secondary and tertiary colors. I would suggest you use a vibrance passel color that is primary or secondary. There's no wrong choice, so you can use any color you want with confidence and without any doubt. As you can see in this whale, they have three primary colors, three secondary colors and three tertiary colors. You can match these primary colors with each other easily. For example, you can use blue for your bottoms and red for your notices and also your errors. Second of all, I'm going to talk about all US color theme. As you probably know, these are colors used by apple in their native APS, for example, blue is used for bottoms, icons and actionable items. In addition, other colors can be used to set the brand like pink for apple music, yellow for notes and green for messages. And now I'm going to talk about analogous colors. This means peaking nearby colors to the main one. To use that you can pick a color next to it from the color wheel. For instance, red is next to orange, which is next to yellow. The next thing is complementary colors. The complementary color is the opposite. Off the primary color on the color wheel. It provides a great contrast, which is essential for engaging your user interface. Next one is contrast. It is so important to give the user the most comfortable and exciting user interface for having good contrast. Use opposite ends white against black high brightness against the low brightness. As you can see in this photo, the left card is completely well designed, but unfortunately the right one is not. Sometimes it will be confusing, and you don't know how to match colors with each other. In that case, you can use other features such as applications and websites, which are suitable. For example, seep is a great app that you can use for many things, such as palette. Furthermore, you can drop in dragon image to Adama Color cc and if you'll provide you demand colors, which is interesting if you want to use Grady ins in your projects you can use Web radiance dot com website It's a great website that you can find many interesting Grady ins in order to use them in your projects. Last but not least, I really suggest you read Google's material design because it gives you a good perspective . And also it shows you the path for designing, even for android devices. I hope you enjoy this video. I will see in the next video. 26. How to work with Sketch Plugins: Hello, everybody. In today's video, I'm going to talk about how to use plug ins in sketch. If you want to become a good designer or, let's say, a professional designer, you need to know how to use plug ings in your project because it makes our life more easier . And probably if you want to do something without using Plug ing's, it takes much time. So in this lesson, we're gonna learn how to use plug ins in sketch properly. So let's go ahead and start with inserting a shape that seals around it with dragon Drop great and let's click on plug ings on top and click on map generator and generate a map using Google maps. With this plugging, you can easily, easily insert or, let's say, generates a Google map in your project. For example, in this field, you can writes an address or location. That's right, New York Great. And let's click on OK, perfect. As you can see, it generated a Google map with that's seven location into our around. So it is absolutely useful for using in your user interface projects, and you don't have to worry about how to deal with taking screenshots from Google Maps and the exact location. So let's go ahead and use the next plugging the next plug and I want to mention is so interesting. And it's called Looper. So let's go ahead and inserts shape. Let's insert and normal. Okay, lets Dragon Drop and Dan. Let's double click on debts and choose thes two points and click on Straight Perfect and It's Unchecked Borders and I'm Gonna Change its Color. Let's use a Grady Int, which is blue. Yeah, that's fabulous. And now you need to go to plug ins and click on Looper in Click on Loop, Oren said. Just press command l. And in this window you have some settings and some options, and you can change it as you wish. For example, here we have number of copies, duplication counts, and it's 50 by default. So let's change it to 20. Did you see that? That's so cool. For example, let's right 80 and click on scale. Put increments by four and let's click on, move vertically, or let's change it to randomly. That's pretty cool. So check this great and now you can decrease its size with selecting this fuller and see the results. That's amazing. I'm so excited to see how you can use this plugging in your project in order to make many graves objects. So if you use that, please send me your file in order to check its and I will post its on my tutor and on my instagram as well. Energy. Appreciate your work and effort. So now let's use another lovely plugging, which is so useful, and that's called Runner. So let's go ahead and click on Runner and click on Run. Great. As you can see, you can use this plugging for many occasions and many situations. For example, you can go to insert section and let's search for navigation bar. Here we go. And if you double click on that, you can easily put this navigation bar into your campus. It's amazing, isn't it? Or let's do something else. For example, let's use a search for and double click on that, and here we go. We have a Sarah's far, and also you can use this plugging for something else. For example, you can say go to page one or go to somewhere else, or you can say in so another plug ins For example, we have your sketch measure, which is already installed, and I will talk about it later or something else. I'm pretty sure that you love this plugging. If you used the next liking that we're gonna learn is relabel bottom. So what does it do that's create a bottom? Here? It's round it. And also let's increase radius okay and changed a caller. This room it's pretty. And let's put a takes inside. For example, my bottom and let's aligned this to dissenter vertically and horizontally. Great. So now suppose that you want to change these texts in the future with using this plug, and you can easily change your tax, and this plug in will automatically change the size of your bottom. I mean the size of your Shea. So let's give it a try. First of all, we need to make a group. To do that. Just select both your takes and shape and use Command G in order to create a group and then click um, floggings in button relabel button. And here you have a field that you can fill it with whatever you want. For example, let's right high and click OK here we go, the plugging changed automatically the size of our shape. Or let's say, the size of our bottom. Using these plug ins in our projects will save us a lot of time, So feel free to use that, because all of them are free. So the next plugging I'm going to talk about is user flows. Do you remember this project that we already use in order to learn some basic codes? So now suppose that you want to have a diagram, or let's say you want to make a prototype for your project. And with this plugging, you can easily do this so you can easily select, for example, this bottom and also withholding shift. You can select these canvas as well, and then go to plug ins user flows and create link and that seats it successfully created your user flows, and it's really helpful if you want to prototype your project. All right, The next plugging is called anima, and it allows you to auto layout your project easily. Probably some of you do not know what orderly out means, so let me give you a short explanation. As you all know, there are many kind of iPhones, or iPads, in the market with different screen size. So when a developer wants to develop a universal application that can work and run on any IESS device properly, that developer needs to use or the layout in order to make it compatible with each screen size. And I will explain it completely later on. So suppose that you design your project for an iPhone, and after that you want to know that's how it would looks likes in an iPad. So we're using these plugging. It's easy to do something like that. You need to just select your canvas, and then you can change the canvas size. That's so cool. All rights. I already prepared an article for you with all of the plug ins download link that you can find it in the next lecture. Thank you so much for watching this video. I will see in the next three 27. Exporting: all right. In today's video, I'm going to take about how to export your design. When you're designing, you need to know how to deliver your assets to the developer, so you need to be ever of the pixel density that you're designing it when you want to export your project. Or let's say your design assets. You need to export it for many devices because each screen and let's say each device has its specific size. So, for example, when you design your assets for iPhone seven or iPhone eight, you can use it for iPhone 56 or four. However, if you want to use it for iPhone eight plus or eggs, the quality of your design will be decreased. So it's better to design for iPhone eight plus or iPhone 10. And after that, then you explore your assets. You don't have any problem, so let's go ahead and show you how you can export your assets. So as you can see, I already designed thes four, and now I'm gonna export my designing. So how can I do that? There are several ways. The 1st 1 which is the primary way, is that you can click on these group. As you can see, it's name here, and then you can click on make exportable and probably have a plus button here nerd to make to excise or three excites. But now I can change the sitting too ill s and the sketch will automatically create the two x and three x sites one x two X and three x design with PNG format, And after that I can click on export name and choose a place and just click on export. And, as you can see, it is exported. The second way is that you can click on debts file, and then you can dragon drop it to your desk up or where you want. However, it just creates a one X asset, right? Sometimes probably you need to get the whole screen. And to do that you can just click on iPhone eight, which is the name of our campus. And then you can dragon drop it into your desk up. As you can see, it is exported. At this moment, I would like to mention some points, which is necessary for designing, and also it's essential for exporting number one. You don't need to explore texts because you can easily create them with code number two. You should not export search for or something like that because, as I mentioned before, you can easily create them with code. So now let's open up the X code and see how we need to import our assets to exclude properly to import your assets into X code, you can easily click on assets that XSI assets, and then you need to drag and drop all of your assets into acid section. And here we go. We have one x two X and three X bottom to learn how one x two x three X works and what's the size off them? I really suggest you to read the next lecture, and I've already provided some information about points, peak sales and about screen size. Thank you so much for watching this video. I will see you in the next video 28. Design with real data: all right. In today's video, I'm going to take about how to work with riel data in your designing. When you're designing, it is necessary to make your design meaningful with riel contents. So in today's lesson, we're going to design two different pages for our application, and then we want to work with Riel later. So first of all, we need to download and install the plug in, which is called Craft. This is a plugging from InVision APP company. This is a very great website, and also it has some features that you can share your design with other designers. If you work in a company or with some freelancers, let's go ahead and show you how to download this plugging. If you go to envision app dot com slash craft, you'll find the download link order, and if you click on that, you can download and install this plugging in order to use it in the sketch. So now it's time to design our pages. First of all, I'm going to design the main page That's Griffen insert and use shape. That's use, although I'm gonna make a profile image as we already did. All right, so Now I need a real photo, probably your thing, that it is so difficult to look for a suitable image in order to use in our project. But with craft, it is so simple. So to do that, you can just click on your shape and then click on data here and let's click on photo. And here you have some options. You have folder, which you can choose images from your computer or drop bikes that if you already uploaded your photos on your drop bikes, you can use it. Otherwise, you can use on Splash, which is a website for free photos. So here you have some options that you can choose. Let's go ahead and see what we have here. For example, people OK, and then click place Photo's amazing. Did you see how easy teas So and now I'm gonna use the text. It's click over there. Here we go and I need a name. So let's go to data and go to type. And here you have an option, which is names and click on that. And here you have three options male, female or both. In this case, I'm gonna use mail right as you can see to automatically create it a random name for us, which is absolutely great. And I need another text that's duplicate that. Let's use countries. Okay, easy. Let's change its phones to 18. And also it's color. That's great. Here we go. So what else do we need? So we need also an article, right? Suppose that's it's a profile for a writer and we need an article. So let's just insert a text here and just click on article. And here we have some options advertising, technology, motivation, travel, cooking, beauty, philosophy, medicine, etcetera. So let's choose travel. Can you see that? And it's edited. That's so simple, Right? And what else doing it? Headline for our article. So let's just insert another text here and Cree Caan Headline and click on travel. OK, here we go. And that's change. It's way too bold. Fantastic. All right, so now I'm gonna design a contact for right. So what do the need for making a contact for? Of course, we need the address. The Google map, the email address, telephone number, etcetera. Let's use the runner plugging in order to insert navigation bar. Here we go. Double click on that, and I can easily put it here. And let's change the title. To do that, you need to double click on that and click, unlike from library, because this is a symbol belongs to attempt like library, click on debt and here again, double click on that and again, unlike from library and here we can change it to contact, right? It's changed a color gray that's changed this to profile Great, and then we need to click and return to instance. Okay, here we go. So now we have the navigation bar. We'd contact Tex, and we can easily add other contents who want. So let's click on insert and add around it with dragging and drop. And that's on Czech Borders, Okay, And do you remember that we already use the plugging for generating Google map? We're gonna use that plug in again. So let's go to plug ings and click on map generator and generate a map using Google maps. And we need to put an address or place. Let's ride Paris okay. And also we need to add the address so we need a tax. So let's click on data and click on addresses here ago. We've got our address. Just we need to add the address before that. And also I'm going to change its way to medium. Let's add Paris at the end of death. Perfect. So what else do we need? Yes, you're right. We need the email address. So let's duplicate our text. Okay? And go to email. Great. So I'm going to write e mail before it And one more thing, which is telephone number. So let's duplicate year and change it to phone. Unfortunately, we need to write it by ourselves. So let's right, plus 97. Love, love, love, love. So at this moment, I think we need to add some social media icons in order to engage our user interface. So I've already downloaded some icons and let's add it to our project. Okay, here we go. You can easily download these icons from Google and let's move them a little weeds. There we go, and now I'm going to create a bottom for call function. So let's click on insert and round it great and let's on Czech Borders and click and feel great. And I think this one is good, So let's increase its radius and I need a text click on insert text here, and that changed it to call and the size I think 24 is great and the color white and also I'm gonna change. It's way too bold, and I want to change the character spacing a little with So let's align it perfect and one more button for email functionality. So let's duplicate Key Spartan email, and it's align it perfect. And at this moment, I want to change the place of some off my contents in order to make it looks more beautiful . So let's click on these two buttons and put them over there. And also these three texts here. That's awesome. I hope you enjoy this video and thank you so much for watching this lesson and I will see you in the next video. 29. Sharing and previewing your design: all right. In today's video, I'm going to talk about sharing and previewing your designs and your assets on your own device. So if you remember this project that we have done recently, now we need to share its on our own phone. So you need to do something. First of all, you need to download and install the sketch mirror app from the APP pisser, and after that you need to be connected to the Internet connection. And also you need to connect your computer to the same WiFi. It is so important because the sketch mirror uses your I p address. So when you open off the sketch mirror on your phone and click on mirror here, you will see at least of connected devices. Here, here is my phone, and if I click on that, so now I can see all of the assets and all of the art pours on my phone, which is great. You need to remember that you, as a developer or as a designer, should have a good understanding about what you have done or what you're going to do. So it is a great opportunity to check your design before starting cording. And if you don't have a no U. S device or even an android device, you can easily copy and paste these I p address to your mobile phones browser, and it will show you all of your assets and our pores on your phone. So let's click on that here. Here we go. So now I'm using these I p. And also I can click on these art board and I can zoom in, zoom out next page. Great. Let me open up the sketch And here you can see that there are two connected devices. The 1st 1 is my iPhone, and the 2nd 1 is the safari. There is another way that you can share your art, pours on your assets with someone else, and that is using cloud. If you click and get started and you sign into the sketch, you can upload all of your assets and all of your art pores to the sketch server, and you can easily share it with your friends with your colleagues or anyone else. But to do that, you need to first create an accounts on sketch website, and after that you need to sign in with death particular accounts. All right. One more thing that I want to mention is that unfortunately, we cannot use the mirror app for Apple Watch. But if you want to see your assets, for example, if you're designing assets for Apple Watch, you can use InVision app that I already mentioned in some previous videos. All right, let's call this video down. And thank you so much for watching this video. I will see you in the next lecture. 30. Shortcuts & Tricks: Hello, everybody. This is a rash, and I'm here with another video. In today's lesson, we're gonna work with keyboard shortcuts because it plays a major part in sketch to increase your productive ity while designing. You can save a lot of time during your designing, so let's go ahead and get started with the fair short cut. All right. The first short cut is command K, which you can use it for scaling. For example, If I select this layer and I want to scale it, I can say command K. And as you can see, you can immediately get access to the scale layers, which is a great shortcut. Sometimes you need to know the distances between some objects. For example, in this case, if I want to know the distance between thes object, I can click on that and hold all spot on. As you can see, I can recognize all of the senses immediately. All right, let's talk about inserting shape. First of all, I want to create another arch wars, which you can click on a. And after that I can click on iPhone X. Here we go. So, in order to create a rectangle I can press are in order to create a normal I can press. Oh, and also, in order to create a rounded rectangle, I can simply press you. And if I want to create a line, I can press they'll what? What? Our techs Yes, you're right. We can use T in order to get access to Tex. And also, if you want to work with vectors, you can use V and sometimes you need to use pencil, but not very often, but in that case, you can use P. If you want to keep aspect ratio, you can hold shift bottom. For example, If I want to resize this rectangle, I can hold shift and then transform it. And as you can see, it keeps its aspect ratio. But if I don't hold Schiff and resize it, as you can see, it doesn't keep the aspect ratio. If you hold all can dry shape from center. For example, if I want to create around it and I think click on you and after that old old example here , as you can see, it creates around it from center. And now it's time to talk about editing shapes. If you want to change the opacity off an object, you can simply use numbers. Number one represents 10% of capacity, and number zero represents 100% capacity. For example, in this case, if I click on this rectangle and if I pressed one, we can see it automatically change to 10%. And if I press zero, it again automatically changed 100%. So during your designing, it is so important to know how to work with these shortcuts in order to speed of your progress. If you want to check or uncheck feel you can use if and if you want to rename a layer, you can double click on debts. Sometimes you need to select a layer, regardless off the group. To do that, you need to hold command and then click on that specific layer. For example, in this case, I can hold command and then click on 28. If you want to rotate something, you can hold command shift and are, for example, here. If we want to lock or unlock our layer, we can hold command shift and L. For example, in this case, if I want to like this group, I can hold command Chief than L. As you can see, it's liked. And if I hold it again, command shift L it's unliked. Sometimes you need to hide or show your layers. To do that, you need to hold command. Chief Edge, for example. If I want to hide this circle over there, I can hold command shift edge and I can hide it. So it's he than now. However, if I want to show that specific layer again, I can press one more time. Hold shift and etch Easy right To export an artwork, you can hold command shift and e. If you want to move around canvas, you can press space and drag and now I'm going to explain about multiple shapes. For example, if you want to combine these two shapes together, we need to use union right. But to do that there is a quicker way, and that is holding all this command and you. Sometimes you need to use a mask. To do that, you can press control command and am, for example, here I can select these two layers and hold control command and am easy right? If you want to group something, you need to use command and G, for example, In this case, if I select these two layers and I want to make a group, I can hold command and G And if I want to and group them, I can press, shift command and G. There are many ways to duplicate a layer, but I want to explain it to you in a more accurate way. For example, if I want to duplicate these circles, let me just delete them. Here we go. If I want to duplicate it, I can simply press command d and then move it to the right. Or I can use Command C and Command V, which is copying and pasting. But suppose that I want to copy these circles and also I want to keep the same descends between them. Imagine that I want to copy them 100 times. It's time consuming that duplicate them. And every time I need to check the descends between them. So, of course, there is an easier way. If I hold old and drag that specific shape, are your duplicated that shape and now if I cle command d, it would duplicate it with the same distance so it automatically keeps the same the sense if we want to expand our shapes by one pick. So we need to hold command and use arrows. For example, if I hold command and use arrows to the right, as you can see, it is expanded, and you can also contract by one pixel. But if you want to expand your shape by 10 pixels, you need to hold command chief and arrows. Now it's time to talk about Tex, so let's select these text and talk about it. If you want to make it bold, you need to hold command B. And if you want to make its Italy, you need to use command. I And if you need an underlying text, you need to use command. You. If you're looking for another phones and you want to change your phones, you need to use command T based on my experiences. Sometimes it is necessary to make our text to an outline. For example, if you want to use a Grady INTs for its collar, we need to make an outline. To do that, we need to hold command shift and oh, and now you can fit it with the Grady int some things you need to copy a style off some object or a text, and that's so useful. For example, I can copy the style of this text withholding old command and see. And if I select the stakes and press old Command and V, you can see that it's style has been changed to this taste. If you want to focus on all the elements in the screen, you need to hold command. One. However, if you want to focus on a specific elements in your project, you need to hold command and to, And if you want to come back to the actual size, you need to hold command. Zero. If you're a street designer or a developer, you need to use greets and rulers in order to design precisely so withholding control and G . You can toggle Greek withholding control and are You can tell your rulers and withholding control and L. You can show the layout and also withholding control and pee wee cantorial pixel, and we'd holding control and X. You can toggle pixels greed, but you need to remember that the pixel screed can only be seen at 2 1000% zoom. You can also use math and percentage in the inspector. For example, If I select thes shape and go to the Inspector and I want to multiply its size by two, I can simply right star and to press enter right. So I just multiplied its with by two. So now I can divide its height by three. For example Here we go. So these feature is so useful I already prepared for you to additional resource is that I highly recommend reading them. Thank you so much for watching this video I receive in the next video. 31. Prototyping in Sketch: Hello, everybody. In today's lecture, I'm going to teach you how to prototype with sketch prototyping in the sketch is the newest feature of this application, and it's so useful in order to create a very quick prototype for your app. And I would like to mention that in order to get access to this new feature, you need to update your sketch to version 49 or above. All right, So let's get started. If you remember this app that we already designed, you know that we designed this register form and this logging page as well. So in order to prototype that you can simply just click on this button and click on this link button at the top. And as you can see, you have an arrow that you can connect it to any art sport. So, for example, I want to connect this logging to log in page and over there in prototyping section, you have some options. The 1st 1 is target, which in this project is iPhone X copy. So let's rename into lugging Great and as you can see, our targets is now lugging, and here you can specify the type of animation that you need to use in your prototyping. So, for example, the first option is no artful animation, so it means that nothing will happen. So let's give it a try. And in order to see the result for, Let's say, execute your project or your prototyping, you can simply just click on preview button over there. Great. It's like simulator in X good. But it's just for sketch and just moving between pages. So let's click on lugging. And as you can see, it immediately shows us the log in page. But this is not something interesting, and this is not what exactly we want. So let's change the type of animation to animate our part from right and again, click on Preview and the spot and you can go to the previous. Our porches are welcome page and let's click lugging Great. Did you realize the difference between the first option and the second? It's absolutely clear, and also you have other options as well. For example, animate orphan from bottom and from left and from top to bottom, so let's give them a try. As you can see, it immediately pops up, and also from left great and from top. Fantastic. All right, so let's add some other links to our project. I'm going to link this register button to these page, this art board. So let's click on this button and just simply click Undies Art Board, and I'm going to set the animation from right to left and these register button. I'm going to link it to the main page and the animation from bottom and also this lug inform to the space as well and also from bottom. And these Don't you have an account button to register for from left, right? Awesome. So let's give it a try lugging Great, Don't you have an account and also register? It works perfectly. To be honest, this feature is so useful and amazing, because before using these feature, we needed to use other plug ins or some third party applications. Or even we need to prototype our APS in X. Good. But for designers, it's so important to present their designed in a good way. So I really recommend using this new feature. All right. Thank you so much. I hope you enjoy this video and see you in the next video. 32. What are Cocoapods?: Hello, everybody. This is a rash, and in today's video, I'm going to talk about Coco Parts. Coca Parts is a dependency manager for swift and objective See Coco projects. And, as you can see, it is over 43,000 libraries and is used in over three million apse, which is absolutely great. There is a lot of open source libraries that you can use in your projects, and it can save you lots of time. So if you go to the steps I cocoa pods, that's org. You can get more information about Coco parts and how it's build. However, in this video, I'm going to show you some examples. So if you look at these nice search for here and for example, let's look for something like card right, and that's click on these cards. Here we go. You can understand how these project works, or, for example, let's look for something else. For instance, on boarding and Alert on boarding. She's one of my favorite Coco's project, and I will show you how to work with this project and how to make a great and amazing and boarding in order to use that in your project. But for now, I just wanted you to know some information, Some general information about Coco pots. All right, Thank you so much for watching this video. And in the next video, I will show you how to install and set up cocoa pods on your system. 33. Installation And Setup Cocoapods: all right. In these video, I'm going to show you how to console and set up coca parts on your computer. So, first of all, we need to work with something which is called Terminal. And the simplest way to get access to it is to click on this magnifier sign over there and look for terminal. Here we go, and then he d enter. There we go. So if you want to change the appearance off these terminal, you can go to terminal over there and preferences. And here in profiles, you can change it to whatever you want. All right, let me explain to you how terminal works and what it does. Terminal allows us to get access to the information and let's say to install or delete or move some files from our computer deeply. So in order to install cocoa pods, we need to work with terminal because we need to get access to deep points off our computer . Okay. One of the most important thing that you need to know about terminal is thes dollar sign. When you're working re terminal, you need to be aware of dollar sign. If you see this dollar sign it means that it's ready to write new command. However, it you don't see it. You don't need to write anything more because it means that it's running something. Sometimes some commands takes five or even 10 minutes, so you need to be patient. In that case, all right, let's install coca parts on our system. First of all, you need to write pseudo, which stands for Super User Do and then Jim in Seoul cocoa pods and then hit the enter. And now you need to provide your systems password. When you're typing your password, it doesn't show anything. So please do not worry if you don't see your password. If I just write something running and hit the enter, it says, Sorry, try again. So let's right the correct password and then press the answer. It takes sometimes, so be patient. All right, now that we can see this dollar sign, it means that it's done. And as you can see, six gems has been insult. Probably this number is difference in your situation, because I've already installed cocoa pods on my system and I just reinstalled it. So now we need to do the next step. That's right pod set up and two dashes. And let's write rare bows. And he dancer. It takes sometimes. So you need to wait. All right, The set up is completed, and now you can see the dollar sign again. But let me give you some good news. You don't need to do it again and again. Once you have installed cocoa parts on your system, you don't need to do it again. Well, right. Thank you so much for watching this video. I will see you in the next video. 34. What is Firebase?: all right. In today's video, I am going to talk about firebase about how it works and why should we use fire base? As you probably know, if you want to build an application that wants to get data off from the cloud or, let's say, from a server, for example, messaging app or something like instagram or two eater, you need to have a backhand. And what does it mean? It means that you will configure your back end or your server in your project and these two components I'm in your back and then your project will be connected together. And if the users device is connected to the Internet, the application can download and upload information such as images or any kind of information. In a second, I would like to mention that firebreaks is a service of Google, and you don't need to pay for using that service If your APP has a very a small number of users. All right, let me explain to you some of the features off. Firebase Firebase has some features such as authentication, analytics and cloud storage and cloud messaging, etcetera, etcetera so we can do almost everything with fire base. And we do not need to worry about our Serra and backend because fire race will do it for us in this section. We're going to use the authentication feature of fire base. So in the following videos, we are going to create an accounts in fire race. And after that, we're gonna use cocoa pods inner to set up and implement parts in our project in order to use fire base. And then we can easily use it as our back end, and we can use its features pretty cool. So let's go ahead and creates a great and amazing app which can use this fire base as its back end. Thank you so much for watching this video. I will see you in the next video. 35. Create an account on Firebase: Hello, everybody. In these lesson, I'm going to show you how you can create an accounts in fire race in order to use its inner project. If you want to use the fiery services, you need to have a Gmail account. So if you already have a Gmail account, you need to sign into your Jimmy. And after that, if you open a firebase that google dot com, you can see these go to console button. And if you click on that, you will see this Welcome page. All right, that's it for this lesson. And in the next few lessons, we will talk about how to use firebase in your project. Thank you so much for watching this video. I will see you in the next video. 36. Setup Firebase: all right. Now that we have downloaded our skeleton project, we need to configure Firebase. So first of all, we need to create a new project on fire race. So if you head over to your fire base and now you need to click on add project and here you need to provide a name for your new project. Let's right. I am a photographer, right? And this is our project I d in your country or region. That's create project. Take some time and here we go. So let's click on continue their ago. And we need to add firebase to our IRS app. Okay. Are you respond, Ally D. If you head back over to your project, you will see that you have a bundle identifier. However, do not forget to change this name because it has to be unique. So after changing these bundle, identify where you need to cup it and paste it here and we don't need to write. Apne came because it's an optional field and also absolute rieti. We're gonna leave it empty and then click on register app. And now Google just generated this that police file in urge to put its in our project. So click on download and then dragon drop. It's below in foot up your list. Can India's page. We need to check something first of all the destination copy items if needed. Please check this check box because if we delete our that peerless file, it has a copy in order to have no problem at all. So and added Fuller's create groups and also add to target which should be I am a photographer and then click on Finish their ego. And after that we need to click on continue, and in this step we need to create a part file and then we need to add our part file. After that, we should install it. So again we need to use terminal. So please just open your terminal. All right now we need to change directories. So to do that, we need to ride CD, which stands for Change directory, and after that I'm going to drag in this project folder instead of writing those stuffs and press enter and now we need to write pod in it and press enter and after rating of oil, you can recognize that it created an empty part file. So now we need to edit this part file. To do that, you need to right click on that. And after that, go to open with. And I'm gonna use Adam because it's a great text editor and it's totally free. You can down with it. So let's click on that. Alright. In this window, we need to write our parts. So first of all, let's right. Pod fire race slash core and again, pod firebase slash database and again, pod firebase slash off. All right. And now we need to save our file and head back over our terminal. There we go. And now we need to write pod, install and press the enter. It takes some minutes and you can see that it's installing fire. Is libraries right? It's done. So from now on, we need to open thesis fire with the extension off XY workspace. If we double click on that. All right, our project is ready. And as you can see all parts or insult All right, let's go ahead and click on continue and finish. And now we need to configure fire. It's in a project, so let's click on APP delegate file. So First of all, we need to add the fire, its library. So we need to write imports, fire, race. And after that, we can come over there and inside dysfunction. We can come over there and right firebase app that configure and that seats we successfully configured fire. It's ab in our project. And from now on, we can use it for our next steps. All right. Thank you so much for watching this video. I will see in the next video. 37. Create and connect registration and login form to Firebase: all right. In this video, we're gonna let users to register to our app, which is pretty cool. So first of all, you need to go to your council, and after that you need to click on authentication or there and here we need to set up signing method. And as you can see, you have plenty of choices you can make, such as email and password, Full number Google, Facebook, Twitter, get hop Anonymous. But in this video, we're gonna use email and passport, So just click on that and click enable and save it. Great. Now I'm going to show you how to use documentation in order to learn new things because nobody can teach you everything. You need to learn new things by yourself. And you need to gain your knowledge in order to improve your abilities and become a professional developer. So let's go ahead and click and go to Doc's. And in these page, if you click together started for Rus, you will see these window and now we need to get some information about authentication, how it works. So we need to look for authentication, which is over there. And if I click on that we have something here and I want to use our us And also I want to know about email and password authentication. So I'm going to click on password authentication and a year ago, so I'm going to really step by step and do what we should do. So the first step is to installer parts which were already deed. And after that you need to enable email and pass for signing, which is done. And now you need to create a passer bass account, right? So lets me open up the project. Here we go. I've already designed this project nearer to have much time to practice coding. So, for example, for making these view controller, you need to go to libraries and you can dragon drop of you control it over there. And after that, I just changed its color by background color over there. And I just added a label here and two buttons and I just changed its image. And also in this page, I just added an image over there and also attacks and to text field that the 1st 1 is for email address and the 2nd 1 is for password and also another button for registration and the same things in thesis were controller. And this is the main you controller that we already designed. But as you noticed, thes view controllers are not connected together. For example, if I run the app and click undies bottoms, nothing happens. If I just click on these buttons, nothing happens because these are not connected to anything. So, first of all, we need to do some kind of prototyping. What do we need? We need to connect this logging button to the slug in your controller. So to do that, you need to hold control button and dragon, drop this pointer and click on show. As you can see sake, they has been created. And also I want to connect, register to destroy, edgy serve you controllers. So I need to click on that. And after that, hold control button and dragon drop here and click on show Segway. Great. So let's run our app one more time and see what happens now. So now if I click on log in button, the log in page will show up, and as you can see, I have another button here which says, Don't you have an account click here, so we need to connect it also to the register page. So click on that whole control and dragon drop show. Great. Okay. And two more things. When our user feels these fields and also click on register or lugging button, they need to go to our main page. So we need to connect these two you controllers to our main you controller. Because we need to check if the user is liking or not. We need to use a graze with coat. So, first of all, we need to connect these Segways to desea controlar. And to do that, you should click on this yellow circle and again hold control and dragon drop here and again show and also this one dragon drop and show. So what should we do now? We need to set an identify here for our Segways, so let me arrange them. All right. First off, our let's sets and identify here for the Segway. If you just click on that, you can set on identify your overdue er that's writes. Go to Maine and press enter and the same identify here for lugging. So I just want to co operatives and again click Andy's Segway and paste It Here and press enter. Great! All right now, how can we connect the's view controllers to code? Because if you check your controller that sift over there can realize that this is the view controller, which is connected to our main page. But we also need to other view controllers for this registration and lugging forms. So we need to create two files that school over there. They just right click new file and we need to select Coca Charge Class and just click on next and here. We need to write the class name. So let's write Registration View controller, and we need to set subclass to you. I view controller and language to Swift and Click on Next Create Great. And also one more file New file again. Coca Touch Class. That's right, Logging view controller. Next create perfect. And now we need to connect these three files toe our view controllers. How can you do that? It's so easy. You need to just click on register view controller as you can see and go to the Inspector. And here you have class, you need to write its name so for register. We have created registration view controller, so let's write registration and exclude immediately can recognize it and suggest you its name. So just click enter and it's done so again for lugging. You need to click and geese yellow circle and go over there and right lugging view controller and hit the enter. Right now we need to connect our buttons and also our fields to our core. So, first of all, let's click on these, registration your controller and then click on the assistant editor. Great. As you know, we need to click on these fields and also the Spartan in order to connect it to our coat. So, first of all, I want to select the first field and hold control button and dragon drop over there that's writes email field and click on Connect, and also this one hold control Dragon Drop and I want to write password field. Include can connect on one more thing, which is our button controlled dragon drop. We need to change connection to action and let's write it pressed, register Anglican, connect great, and also we need to do the same thing for our lugging Wii controller. So just pause the video and do it for yourself as an additional challenge. All right, I'm pretty sure that you could do that. And now we need to go on. So let's click on Lugging View Controller and I'm going to hold control and drag and drop That's right email field connect and also Dragon Drop Passwords, Field Connect and also lugging That's changed connection to action and let's write pressed logging connect. So if you look at these three circles, you can easily see that its field with another circle. So it means that our fields and our bottoms are completely connected. If, for example, I change this name, it will be disconnected, right? So you need to pay attention to these names. And if you want to change something, first of all, you need to go to connection, inspector, and you need to change the information here as well. All right, let's come back to a register controller. OK, so first of all, the new team pores are Fire raced library because we want to employments their functions to our project. So let's write import fire race. And now between these two care lee brackets, we need to write our coats. So first of all, you need to write off dot off dot create user with email and pass for and Indies field with email. We need to write our email field because our users will use this field for their email. So let's write email, field and password. Also, we need to write Password field and what is completion. So when the user hits the bottom, our application will try to send information to our server and check all the information. And then the fire rays will call back and tell our application. That's everything is fine and your user is registered. So to feel that you need to press the enter and now we have a closure. Closures are method without name, so they works like functions. We need to right here, user and for error. We need to write error, and here we need to check our error. So let's right. If error is not equal to Neil, then creams the error ills Prem's registration waas successful. And now, as you can see, we've got an error that see what cities cannot convert value of time. You I takes feel to expected argument type string, which is correct. We need to add the Texan text. Let's write the text because we need its text and also for password don't text. And now we need to unwrap our text filled with an exclamation mark. And now everything is correct. So let's run our app and give it a try. All right, let's click on register and here we need to write our email this right test at gmail dot com and also our password. Let's write 123456 I know it's not safe because at the moment we are not using any algorithm in order to check the security of our passers. But that's fine for now. Don't worry about that. That's click on register. And, as you can see, we've got Registration was successful in our council. But in order to make sure that everything is fine, let's go ahead and open up the fire base and check our database. So now we are enough Indication Section, and if I click and users over there, here we go. We've got test at gmail dot com, which is created at March 3 2018 in Signed in March 3 2018 and this is the user i d. You can also add users from here. And also you can delete that or disable that or said passwords. So now everything works fine. But we need to do the same thing for our lugging page. Right? So let's click on Logging View Controller and here, First of all, the Nitty Import Firebase Library, Poor's Firebase. And here we need to write off dot off. That's signing with email and password. Here we go. That's right. Email field. The text and the 2nd 1 minute ride pass were filled. The text and the completion again user an error, and here we need to check if we've got an error or not. If error is not equal to kneel, which is true, Dan screens the error. Els screamed. You are like in All right, let's runnerup one more time and check it out. Let's click on lugging email. Test at gmail dot com and password. 123456 and press the log in button here ago. You're like green, but it seems a strange because when our user are like Dean, they need to go to the main page. So we need to do one more step. So let's go over there and right perform. Segue. They would identify here and here. We need to write the name of our identifier, which we already set. So let's right, Go two main and the sender should be self. And also don't forget to add self before it because we're writing this code inside of a closure. So we need to add this self before our code and let's copied and go to registration view controller. And also, let's paste it here. So that's wrong. Are up one more time and check it out. Right. Let's click on logging and test at gmail dot com and password. 123456 and press lugging. Here we go your like Dane and we successfully redirected our user to the main page, which is absolutely awesome. All right. Thank you so much for watching this video. And I will see you in the next video 38. Saving Data in Backend: all right. Now that they have got some information about how to work with database and how to work with Fire Base, I want to show you how to save van you into our database, which is pretty awesome. So let's go ahead and click on view controller. Great on. Let's write our code in this function view did load. So let's right of our breath Collins database reference and Let's right, Raph is equal to database that database. Dutch reference. Great. And now I can set a value into our database, for example. That's right, ref, that set value. And here I can use a string and let's write low award. All right, And now, if our users lug into our application because we wrote these codes in view, did load. The application will immediately send these value into our database. So let's run our app and see what happens. All right, First of all, we need to go to database. All right. As you can see, we don't have anything here at the moments because it's no, and we didn't get any kind of information yet, so let's open up our app and log into our application. Your test at gmail dot com and password. 123456 and lugging. And here we go. We've got hello ward value, which is pretty awesome. And because we're using a riel time database to get the information immediately. Less than a second, which is absolutely awesome. Supposed that you want to create a message app or a chat app, and you want user to get the information immediately so you could use fire race database in order to get the information quickly. All right. Thank you so much for watching this video. I will see in the next video. 39. What is Auto Layout and why should we use it?: Hello, everyone in these lesson we're going to talk about or the layout in all us. What is it and how can we work with that? Let's explain it to you. In a simple world, it's a feature. Or let's say it's a tool that you can use it nearer to. Makes your app beautiful in every screen size. So suppose that you're designing your app and developing your application for iPhone 10 and also imagine that you're not using orderly out. So if your user downloads your application from the APP pisser on iPhone six or even iPhone AIDS, etcetera, your app doesn't look like perfect. So let me give you an example. We already designer app for iPhone 10 as you can see here. So what happens if I run this app on iPhone eight? As you can see, something is wrong here because we didn't use all the layout for our app. The way we arranged our label and our bottoms has been changed. And let's say it's not a perfect and user friendly app, so it's an important issue, and we want to deal with that also. If I try to rotate my air, you can clearly see, that's what's happening. Every objects place has been changed, and it's not good at all. So let's go ahead and try to learn or the layout together in order to use that in our next projects and also for your next challenge. All right. Thank you so much for watching this video. I will see in the next video. 40. Using auto layout on your project: all right. As I mentioned in the previous video in this video, we're going to work with other layout if you remember the example that I gave you in the previous video, which was, if we want to run this app on an iPhone six or iPhone eight, what happens? There is a way that, for example, if you want to run it on iPhone eight, you can simply come over there and click on iPhone eight canvas, and you can change all of the objects places and fix it. However, when you upload your app on appstore, probably your users have different kind of arias device. So we need to address that issue as well, so we can come to this conclusion that this way is not practical. And what should we do now? We need to use order layout. All right. When you want to use all the layout, you have some options. The 1st 1 is pinning. For example, if I want this label to stay here in each canvas, I can go over there and add new constraints. And as you can see, there is a place in earth at new constraints, and in this field you need to feel the decent is between the top edge of your label and the edge of your real. So, for example, I can pin it here and also here, here and here. So what does it mean? It means that I peed my object to the left to the right and also to the top and to the bottom with these amounts. So the D since between the bottom age of my object and the bottom edge off my view is 169 for example, I can add for constraints. Here we go. And now we've got another problem. As you can see, we've got a warning. Her resentful position is ambiguous for bottom. So what does it mean? It means that we mistakenly ping the bottom edge of our object to the top age of our bottom instead of pinning that into the bottom edge of our well. So how can we fix that? We need to go to constrains over there, and we can click on bottom the top and let's delete that And again, we need to click on our label and go to constraints. And at this time, we need to click on that and set the view car in the sense 320 add one constraint. There we go. We didn't get any warning, so let's give it a try to check that we can simply move between our Candice's, for example, lets me change it toe iPhone eight. But at this time, we have another problem because we already told the Exco that keep d senses between our object and are, well, the same. If we change our can this we will see that something is wrong. Can you see that it's in the correct position horizontally, but we can see our label correctly, So how can we fix that? Let's head back over to our campus iPhone 10. And now I want to delete all of constraints. How can I do that? I can simply head over to the Spartan and click on that. And as you can see, there are two clear constraints over there and over there. What's the difference? If I click the 1st 1 it just removes the constrain off death specific object. However, if I click unclear constraints in all view in view controller, it's removed all of the constraints in our view controller. So in this case, I want to clear constraints. There we go. And now I want to introduce another feature of other layout. What was our goal? We wanted to keep this label in the centre vertically and horizontally, so we can do that in a simple way. We need to use alignment, right? So if you click on this button, you can see that there are two options presente lian container and very clean container. So let's check those shake boxes and add to constraint. And now, if we go to another canvas, for example, iPhone eight, you can see that everything is fine and also iPhone, S E and also iPhone four s. So it's great. But there is another step. We also need to add constraints for our buttons. So what is the best way? Probably you can say that we can use constraints or painting. However, there is another feature which is absolutely awesome, and it's called Stack for you. If I simply select both bottoms withholding shift and click undies embedding a stack, you can realize that it's something like a group. As you can see year, however, we need space between our buttons. So if you go to attribute inspector, you have some options. For example, you can change it to her resentful. But in these cases we need vertical and also alignment feel leading center trailing, which we want center. And here we have spacing that we can add enough space between our bottoms. So let's add 10. It's great, and now we need to add constrains their bottom. So let's select both buttons and click on add constrains, and we need to add left constraint and right constraint. So set it to zero and click on Add for constraints. Now we need to add constraints toe our stack view so we can do it with alignments. But do you think that's Glicken stack view and click and alignment. So we want to align its present early the silicon horizontally in container and add one constraint, and also we need to add another constraint for our vertical position. So let's at constrained and click on. Add one constraint. There we go. As you can see, everything works mine. So let's check our layouts in another canvas, for example, least time that Streit's on an iPad. So let's zoom out and change it to annoy path. There we go. How beautifully teeth on. Right now, let's focus on our registration view controller. In these view controller, we have two fields and bomb button and also one circle, order and register. So now we need to use what we have learned by now and said everything correctly. So first of all, I'm going to use the stack view for my fields and also my bottom. So I'm going to select them and click on Embedding Stack. And here I'm gonna add some space between them. Let's say it. 10. I think it's great in alignment center and one more thing. What is distribution? As you can see, there are some options here. Feel. Feel equally feel proportionally equal spacing, equal centering. We need to use feel equally because we want our objects to feel the space equally, and now we need to add constraints. So let's select our fields and click on add constrains and that's right, zero from left and zero from right and at constraints and also my register button 00 at constraints. And now I'm going to select my stack view, and I want to align it to the center. So let's pause the video and do it by yourself. All right. I hope you could do that. I know it was so simple. So let's click on alignment Presente Ling container and very clean container at two constraints. And the next thing we're gonna add concerns is our label now or Sirica. Let's say order. So first of all, I'm gonna add constrains to my label. So that's at you. Constraints. I'm just gonna peanuts to the top and let's write it 40 and add Constraint. And one more thing. I'm gonna align it to the center that's clicking alignments and horizontal in container. Add one constraint and the last thing is our circle. So let's pin it minus 56 00 And also I want to check the aspect ratio because I want to keep the aspect ratio the same at three constraints. And there we go. So let's check it out. If I just moved to another canvas, you can see that everything works fine, which is pretty awesome. All right. Thank you so much for watching this video. And for the next video, I want you to be prepared and place set or the layout for the logging view controller. So I will see in the next video 41. Finish up your project: All right, welcome back to another lesson of this section. I hope you could successfully prepare this lugging view controller. As I did hear with Stack View, and in this video we're going to add constraints for our main view. So first of all, I'm going to add constraint to my label over there, and I'm gonna add one constraint and let's set it to 100 add one constraint. And now we need to provide another information to the Exco, which is the horizontal position. So let's use the alignment to click on that resentful in container and add one constraint, and the next one I'm going to align the image because I want to keep it in the center. So let's get it on the alignment to and checked the resembling container and vertically in container check box and add to constraints. Great. And the last thing to do is to sit constrained to our bottom. So let's elect that and at a new constraint, let's pin it to the bottom at constraint. And also I want to align into the center or is entirely in container, and Advil constrains great, that's all. So let's try our AB in some different devices. All right, everything is fine. And let's click on logging greats. Don't you have an account? Click here. So let's register an account. For example, Test one at Gmail that's come and password. 123456 and register or right. Hopefully everything works. Sign and let's run our app in another device or right, As you can see, even in another device, which is iPhone AIDS, everything works mine. And let's click on lugging and let's lug into our application with test one at gmail dot com. 123456 Liking Perfect. I'll drive. Thank you so much for watching this video. I will see you in the next video. 42. Challenge #1 - Auto Layout: all right. Now it's time to have a challenge. Thes time. You need to practice or the layout. So first of all, you need to download the skeleton project in order to get access to these images and also this project. At the end of this challenge, you should be able to make such a canvas with these two interesting instruments in order to make them beautiful. And also, if we change our canvas, for example, toe iPhone, aids, it's you look the same. And also, if I changed the orientation, you can see that everything works. Sign. So let me give you a hint that you can use in your challenge goat, which is using you, I view. And you need to use that. And also you need to use thes equal heights in order to get the same results as a gut. Right. So let's have some fun. And in the next video, I will show you how to do that. Please try it for yourself. And don't forget that practice makes perfect. Thank you so much for watching this video. I will see in the next video 43. Let's complete the challenge: Hello, everybody, and welcome back to another radio of the satirical. So in this lesson, I'm going to show you how you can do the previous challenge. So let's go ahead and create to your images okay that we put it here. And let's change its size to 205 200. Great. And also I want to duplicate it, withholding command D and lets me move it down over there and let me change the image. If I go there and type instruments great and let's change content moved to aspect fit and this one, let's change it to instrument to great, and it can change it to aspect fit. All right, so what do we need? We want our images to feel the page equally right? So in this video, we're going to use another feature, which is called View as a mentioned before you can find it over there and let's search for view right and drag and drop it here, as a matter of fact, view works like a container. So let me put it here and measure the size of our canvas. So the height is 812. We need to divide it by two, which is equal to 406. Right? So lets me change its size to 400 six. Great. And let me change its color to this one. Great. And I want to duplicate it that they put it here. And also I want to change its collar as well. Perfect. So now what should we do first? Awful. I'm going to change our views name in order to make name recognizable. So let's click on the 1st 1 and press enter. That's right. Top view, press enter. And also the 2nd 1 that's press enter and right bottom. That's right. Bottom view. Enter. Great. And now what should we do? We need to make our images as a child of our wheels. So first of all, I'm going to drag and drop it over there. And as you can see, you need to put it like that in order to be a child of our top view, right? And also for instrument too. Great. So by now, we just created two views for our images and put our images inside our veals for our next steps. So what is the next step? First of all, I'm gonna add some constraints to our views. So let's select the top view and click on constraints and at new constrains. And please make sure that you're adding a constraint to the bottom of you not to save area or view. It is so important, and at four constraints and also the bottom view. 0000 and make sure that you're adding it to top you and add for constraints. Great. And as you can see, we've got a warning. Let's see what it is. Huyton Vertical position are ambiguous. Height is and biggest for top view, right? So how can we solve that? I'm going to use another feature of constraints. So let's select both views and click and constraints. And now we're going to use equal heights and click on Add one constraint. Great. And as you can see, the warning is gone. So let's check it out with changing our canvas. Great. And let's change the orientation. And as you can see, our wheels are divided equally right, which is what we wanted to. So now it's time to add constraints for our images. Let's select the first image and at constraints and see what happens As you can see, something is wrong, so it is not a good idea to peen are images, so let's try something else. So I'm going to remove these constraints by clicking on deaths, bottom and click. Unclear constraints. Great, let at concerns and creek in with heights and at two constraints. And also I want to align it presente ling container and vertically in container and at two constraints. And also for this one. Let's add with and hide constraints and again alignments resenting container and vertically in container at two constraints. Great. So now let's check it out. Let me change the orientation. Great. As you can see, everything works line. So in this lesson, we use to new features off X coat. The 1st 1 is using views as containers, and the 2nd 1 was using equal heights, which is so useful as you signed this project. And now it's time to change our views. Background. So that's correct on that. And click concolor right white and this one as well. Great. All right. I hope you could do that by yourself, but if you couldn't, it's not a problem. What matters is that you were trying to do it for yourself. So this is the only thing that matters. So keep practicing. And thank you so much for watching this video. I was seeing the next video. 44. Basic of animation in Swift: Hello, everybody. In today's video, we're going to talk about animation in our US. As you probably know, animation is so important for user experience. So it is the same shield to know how it works in X code and how you can get an amazing animation, which swift At first it seems the leader with Triki and little difficult. But if you understand the logic of animation in Swift, you can easily make a lot of cool animations for your app. So without further ado, let's get started. As you can see, I just created simple app. And I just added one label over there one here and one takes will order. And in these section we're going to animate thes three components in order to achieve a great result. So, first of all, as you know, you need to connect these components or these objects to your coat. So I already connected them in order to save time. And you know that you can connect them, withholding control and dragon drop. All right. The first thing you need to know is that when we want to work with animation in swift, we need to use you. I view that animate, I recommend to memorize thes phrase. You're going to use it most of the time in your career and in the future. So first of all, we want to start our work with a simple animation in order to make you more familiar with you animation. So what should we do? Let's say we want that thes first label toe fading whenever we run the app. So to do that, first of all, we need to decrease its opacity or in X code, we call it all. For as you can see over there, you can get access to these amount and you can change it to zero. So now here, in view, did load function. I'm going to write you eye view dot animate. And as you can see, we have some options here. But we're going to start with the same plus one, which is this one animate with duration and animations. Returns void. Okay. And here we duration timing to roll. It means the duration of your animation. For example, let's set it to 1.5, and here we need to press enter and in these parts, we need to write our animations gold As you can see, it's a closure. So when a very ones write some code, first of all, you need to add self. That's etcetera. So don't forget that if you forgot, don't worry about it. The X Code will automatically warn you. So here I'm going to change the all far off my welcome label from 0 to 1. So let's right. Welcome Label dots all fall is equal to one, right, and as you can see, the X Code is yelling me. So let's see reference to property. Welcome Label enclosure requires explicit self. So let's fix it. And now everything is fine. So let's run a rap and see a result. Great. Did you see that? And let me show you some of the other options. For example, you can transform your object or your label in this project. Let's write self. That's welcome. Label. That's center. That's why plus equals two, for example. 30. And what does that mean? It means that you're increasing the amount of why in these animation, so let's run our app one more time and see the result. Did you see that? That was amazing. You can do this in another way, for example, with using transform. So let's remove it self. That welcome label that transform is equal to C G. A fine transform, and you have some options here, for example, you can rotate your object or your label here or scale. It's make it smaller or make it bigger based on X and y. Or you can just change the position off that as we did in the previous form, which is the last option. Translation X and why? So here we're going to keep the eggs the same. So let's write zero and why 30? We should get the same results. So let's check it out. Fantastic. As a matter of fact, you have so many options you can work with. And now let's scale it a little with. So let's write self. That's welcome. Label transform is equal to see Ji a fine transform and here scale X and Y, And that's right, 1.2 and for why 1.2 as well, and that's running for gain. There we go. So it's really, really useful nerd to make a fancy user interface. All right, let's call this video don and thank you so much for watching this video. In the next video, we will use chain animation in order to animate our objects one after each other, which is so useful, so sealing the next video. 45. Chain Animation: Hello, everybody. I hope you're doing well. So in this video we're going to continue our previous project in order to use chain animation in Swift. So without further ado, let's open up the X scope. And now we want to animate our another label here and our name field over there. What to do that we need to use something else because if you just animate them in the same way, all of them will start animating at the same time. But this is not what we want. In order to get a result, we need to use another form of animate. So let's just cut these blocks of quote and let's write you eye view that's animate. And this time we need to use with duration animation and this one with completion. This is what we want. So we duration. Let's write 1.5 an animation. Let's press enter And here that's paste are coat and thes completion, which is of type Boolean. Let's right true. And here we need to write some coat. So what exactly is this? This is where we need to put our code in order to animate the next object. So for example, let's change the off off thes LaBella's Well, 20 and also these takes field. And here we need to write you. I view that's animate. And again, we need to use this option with completion because after animating our name label, we need to animate our name Field again. That set the duration toe one, an animation over there and completion said it true. Okay, And here, let's write self, that's name label that's all fall. Is he called to one? And here again, let's write you. I view that animates, but the's time. We don't need completion anymore because this is the last object that we want to animate and time Interval. Let's write one animation. And here, let's write self that's name filled thoughts all far is equal to want, so let's check it out. Fantastic. This is what exactly we wanted. So now you have some knowledge about your animation and how it works in order to make so many cool animations for your app. But at fairs it seems a little bit tricky, as I mentioned before, but you need to do some practices in order to make yourself more comfortable when you're working with video animation. All right. Thank you so much for watching this video. I will see you in the next video. 46. Making a rating feature for an app like UBER: Hello, everybody. I hope you're doing well. Now that you have learned some of the most important concepts of your animation in Swift, we're going to boost our level of animation in ER to make some cool and useful animations for our app. As you can see now, we're going to work on this project, which is a rating feature for a restaurant app, and I already design. It's and you can download its design filing sketch. And I also prepared the starter app, which is order, and you can download it from the next lesson. I just used to images for this because in these section we're not going to focus on how to implement some images or some views like this. I just used to your images one for these parts and one for our map and one you I button for our rating, but so let me show you how this feature should work. If the user clicks on rate, you can see that these page will fading and these stars, one by one, pops up. And at the end, when the last store came up, this dismissed button will show up and also after implementation for our animation. We will focus on how to toggle these stars, for example, that Skillicorn, this one. And as you can see, our rating is four right now or the last one. Thesis lesson is so useful for your future because you can use it in real war. APs And nowadays it's so important to have a rating system for your app. So I hope you will find these lessons useful. All right. Thank you so much for watching this video. Please. First of all, download the A skeleton project in order to start our journey. So sealing the next video. 47. Rating feature setup: all right, so let's get started with connecting our bottom to the view controller. So to do that, please just hold option and click on view controller over there and now select our button and hold control and drag and drop. Actually, we don't need an outlet for this project, so let's just select action and rate. What's that? Connect? Great. And now we need to connect these two controllers. But before that, we need to create another file for these view controller. So just right. Click over there New file, Cocoa Touch class. Next and let's write Rating and the subclass off you. I view Controller and click on Next. Create awesome. And now we need to set this class toe every controller. So let's go to custom class and let's set it to rating right. Everything is fine. And now let's connect all of our stars and also this dismiss bottle. Over There are rating class, so let's hold option and click on rating Great and select the first store Hold control Dragon drop over there, but this time we don't need to add an outlets. We want to add an outlet collection because we have five stars and it's not a good way to connected separately. So this is a great feature that you can use in order to connect all of them into one single outlet. So let's right stars off. Taieb. You buy button, frankly, connect right. And also this dismiss button. Okay, dismiss outlets, right? And now, if you hover your mouse over there, you can realize that only the first star is connected to your stars collection, but we need to connect all of them. So let's click on the second star and hold control and dragon drop over there and the next one as well, the next one and the last. And now, if you hover your mouse over there, you can realize that all of your bottoms are connected to one single outlet collection, which is also this is exactly what we wanted. So now we want to animate our stars, as I already showed you in the previous video. So first of all, we need to set the all for each star to zero. So to do that, we have two options. The 1st 1 is just going to the storyboard and set it to 01 by one. But It's not a sufficient way. So let's do it programmatically in Viewed it load. Let's right for each star in Stars, Curly Records. Each star dots on for is equal to zero, and we just two lines of code. We could set off each star to zero, so let's give it a try. But before that, we need to change the place of these starting arrow over there, and that's run our app. And we should not see anything except our dismiss bottom. Great. All right, so now it's time to start animating our stars. First of all, you need to think about it, how we're going to present them. Actually, what we want is when we click on this bottom thesis view will fading. And after a few seconds, for example, after 0.2 seconds, these stars will fading. So to do that, first of all, we can do it in view did load as we did in the previous examples. But this time we're going to use another function which is view will appear. So let's right overwrite view wheel appear great, and in these method we are going to implement our code for our animation and It means every time thes page appears, our coats will execute. So let's write you eye view, dots animate. But this time we're going to use something else. We need to use DeLay in our project, so let's use the 1st 1 So let's set the duration to 0.5 and the delay to 0.5 as well and options. Just two brackets. An animation. Let's write self dot stars. And here we need to write the index number of our stars. The first star is zero. The second star is one and so on so self that stars zero. That's all, far is equal to one and also this completion that set it to Neil. And now I'm going to copy and paste it because we need to use that five times. All right, so now let's change the delay. So let's set it to 0.7 and the next 1 to 0.9 and this 1 to 1.1 and the last 11.3 great. And also we need to change the index number of stars. So that's right. One to three and four, and now it's time to check our project out. So let's run it. Great. This is awesome. Thank you so much for watching the video in the next video. We'll continue our implementation in order to make our cool animations. So see you then. 48. UI Animation - Advance: Hello, guys. I hope you're doing well in these video. We're going to continue our implementation for making some cool animations. All right, so now we want to move our stars, for example, from here to its own position. But first of all, we need to change its position to a little be downside over there. So to do that, as you know, we can use transform. So let's go ahead and creates a constant. That's right. Let move down is equal to C g. A fine transform. And we want to use translation x and Y and set the X 20 and the violets right, 30. Great. And because we need to move each of these stars, what we can do is that's just adding a new line of code toe our foreign loop. Let's right for each star that transform is equal to move down. So basically it means that when we were on our app, our stars are repositioned, and after that, we need to come to our you. I view that animate and here we need to change its position to the previous one. So to do that, we can use a property which is called that identity. So let's write stars. Zero that's transform is equal to dot identity, and it means that the first Star will go back to its previous position, which is what, exactly we wanted to. So let's copy and paste this line of cold because we want to execute it for each star separately and the last one, and they change its index toe. 123 and four. And that's all. So let's run our add one more time. That's awesome, right? But I think it would be more better if we changed the Y axis to 20 points and let's run it one more time. Yeah, that's fantastic. And one more thing that we need to address is animating these dismiss bottom. So what are we going to do? First of all, let's sets, it's all for 20 That's right. This myth that's all for is equal to zero, and we wanted to appear when the last star comes up. So we need to go over there and let's write self dot. This Miss dots all far is equal to one, so let's check it out. Awesome. But I have an idea. It would be more cool if you could just scale it a little bit. So, for example, let's just do it in this way. That's right. This means that transform. Is he going to C J Fine transform and let's scale. It's year 20.2. I suppose it would be fine. 0.2 as well. And here at the end, let's add one more line of court Self dot This means doctrines. Form is equal to dots identity and let's check it out. It's absolutely awesome. And now that you're familiar with you, I view that animates. You can realize that it's more understandable. All right, thank you so much for watching this video I receive in the next video. And we will try away that whenever the user clicks each star, it's scholar changes to orange. So see you in the next video 49. How to toggle stars in rating feature & working with segues: Hello, everybody. Welcome back to another lesson off these sections. So, as I mentioned in the previous video in this video, we're going to make these stars workable for rating. So without further ado, let's get started. First of all, please hold option and rating Great. And now we're going to connect. Each of these stars are code, but this time we're going to set the connection to action. So let's write. Rated check off type your button connect great. And as you know, we need to connect each of them to dysfunction. So let's connect it and this one as well and the last one great. And now we need to work with something new. Probably it's new for you or probably some of you already worked with that. In this project, we're going to use a new property, which is called Tank, and if you have downloaded the skeleton project and you're working on that, you can recognize that each of these buttons as its own tank, which starts from 0 to 4. But by default, all of them are set to zero. So if you're not working on the skeleton project, please do not forget to change the second stars tank tow one and saw. All right. Now let's think about our logic in order to check that if a bottom is toggle or not, we need to create variable. So let's right you are is checked is equal to false because we just need to know if it is true or false. And over there, let's write is checked is equal to is not checked. So it means it's checked is true right now. And after that, let's right. If is checked is true. All right. And again, that's right. If sender the attack is equal to zero, then here let's write stars the Index zero, which is our first store that set image. And here we need to write you. I image Parent is, is and named with string and let's write Orange Star, which is the name of our Orange Star in Assets Fire and for your control state. That's just leave it as that's normal. And now let's write else if sender dot tag is equal to one, then so basically this line off cold, we'll just change the image of our first star. But if we just copy and paste this one for the 2nd 1 and change it to one. It would be a problem whenever the user clicks on the second star. The only store that will be changed to orange is the 2nd 1 not the first and second, which is a problem. So we also need to add the 1st 1 So right now, whenever the user clicks the second star, the APP will automatically changed the image of the first star and the second, which is what we wanted to and let's write else. If sender the tank is equal to two, then okay, we need to copy and paste them over there. And also we need to add one more line of code que two and LCF sender. The tag is equal to three. Then let's copy and pace it and also one more line of code for the 4th 1 and again, else. If sender the tank is equal to four, which is our last star. Then let's copy them and paste it here and one more line of code and change its index to four. Great, So we're almost done, but we need to add something else we need to write else sender dot set image you image named two star and your Control state. That's normal. That's it. So basically, these line of code will set the image of our stars to it's default for. For example, whenever the user wants to change his or her ratings, it would be useful. All right, so let's check it out. Great on Let's click on the 3rd 1 Awesome! And has changed it to the last one. Perfect. So we successfully created our rating feature, but we need to do one more step, which is so simple. So let's go back and open up the main that story word. And let's change this arrow to the first view controller. And now we need to create a Segway in order to connect these two your controllers together . So let's click on this button and hold control and drag and drop it over there and choose presents mortally. So right now, we just created a second, but we need to set on identify your for it in order to use that in our class. So let's set it to go to rating Great and let's go to view controller as we created over there. This rate button we need to write, perform segregated, identify here and here. We need to write our our Segways, identify air and for sender. Let's write itself and also let's come back to rating class. So we need to add an action for our dismiss bottle. So let's connect it over there, dismiss and said the connection to action Great. And here that's right. This means animated, and that's try true and completion to meal, and it will dismiss the page. So let's run our APP for the last time and see a result, right? That's correct. Generate button Perfect and let's click on the fourth Star. Awesome and also dismiss perfect. And if you want to get the same result as the final project that I already showed you, we can come over there and click on the Segway and change the transition to cross dissolve . And if you run it for more time, you can see that that it fades in and fades out, and that's it for this project. I hope you found these lessons useful and do not forget to share your animations with me in order to share it on my social media or I thank you so much for watching this video. I will see you in the next video 50. What is Lottie?: Hello, everyone. Welcome to another radio of thes section. Today we're going to talk about Lottie, basically Lottie's on all Uris Android and React Native library. That can help you to integrate your animations in your APs, and it's super super easy to implement its functionality into your APs. So in the next video, we're going to work on a project which can play a very cool animation in your IRS at, So let me show you what we are going to do. All right, so here we have a simple application with the bottom that when the user clicks on this upload button, it shows us a cool animation. So let's click on that great and also over there we have another animation, so let's click on that, and it's done generally as a Neuer's developer, you need to know how to integrate some cool animations in order to engage your users experience. So in the next video, we will work on this amazing project together, and at the end you will get the same results in no time. So thank you so much for watching this video. I will see you in the next video 51. How to use any animation in your apps?: all right, so let's get a started. First of all, we need to add a part of our project. So I already created our Lati animation project. It's a single your app. So let's open up our terminal and let's write CD and that's Dragon. Drop our project file over there in order to get the location of our files. Impress, Enter Great. And now let's write pod in it. Fine. And now if you open up the folder of our project, you can find a part for him, as you know, and just write legal order and open. We'd, for example, atom. And here you need to add the Lottie or years part. So let's just right part with this quotation mark and let's write Lahti R us and please make sure that you wrote these parts name correctly. And now let's save our file and go back to our terminal. And this time let's write part, install invade for a second Great. And now let's open up the zloty animation dot C workspace and everything is ready nerve to start our implementation. So let's go to Maine. That's story bored. And here let's add a u I button and let's change its tax to upload. And also let's make it larger and put it over there. And I think it would be better if we change its text color to white in the background color to something like Red. Yeah, I think it's fine. And let's change the font style from Regular Too bold. Great. All right, So let's open up the view controller file, and we need to connect our bottom to our file. Let's make an outlet first of all, so let's right upload B T n Connect. And also let's make an action for its as well. So let's change the connection to action, and you're going to name its upload pressed connect Great. And now it's time to get our animation file from Lahti website. So if you just searched the Lottie Files that com, you can download a lot of free animations in order to use in your project. And also you can submit your father's to this website in order to show to others all over the world. So let's download this file. I think it's suitable for our project, or let's click on download button over there, and as you can see, we've got a J some fun, and we need to add this one to our project. All right, so let's drag and drop over there. Finish perfect. All right, so at first, let's make our bottom around it. So to do that, as you know already, you need to open a care bracket and let's write deed set. And over there, let's write upload button. That's layer. That's corner Radius is equal to 23 because its height is 46 so we need to divide it by two . And again, let's write upload button. That's layer. That mask to bounds is equal to true, all right, and now it's time to implement our animation. So what exactly we want is, whenever the user clicks on this upload button, the animation should be played. So let's go and write Arco in our Oppel pressed functions. So let's go over there and let me make it larger. Great. All right. So please make sure that you have imported the Lottie Library in order to work with death. Lottie Great. And now, first of all, we need to create a view, and after that we need to add our animation as a sop you to our main view. So to do that, let's just right. Let animation is equal to a lot animation view name, which is a string, and we need to rise our animation for his name over there. So let's look at it. So I'm going to change it to loading. Great! And over there I'm going to ride, loading as well, All right, And now we need to set a frame for our animation in order to play over there. So let's write animation. That's frame is equal to see Direct Parent is is. And now let's use double over there and we can write 0 200 And for we've that's right, self dot view, dots frame that size that with. And this basically means that we set the wif as the with off our main view and also for height. That's right, 250 now we need to write animation. That's content. Mold is equal to that scale aspect of feet, and after that we need to add our animation view to our main view. So to do that, we need to run itself that view that at sub view and here let's write animation. And then the final step is to write animation dots play and we're good to go. All right, so now let's give it a try and runner up. But before that, let's go to Maine. That's story. Bored and change our campus to iPhone 10. Great. And let's put our button over there and let's run it. All right, let's click on upload button. Fantastic. Did you see how beautiful it is? So with Lottie part, you can make a lot of cool animations for your app and also some more advanced animation. For example, you can make a hamburger bottom for your menu or anything else. And also please remember that you can even create your own animation in after effects, and you can just make it to Jason filed with the special plugging, which is for free. And then you can just add your animations were project easily, all right, so let's try some other animations as well. Let's open up the Lottie Files that can website. Let's go to popular. I think this one is so cool. Let's try with this animation, all right? I just added thes animation as well, which is called emoji wink. And now let's go to your controller that swift and change its name. Let's write emoji, underline, Wink. And also I'm going to make our bottom. He didn't whenever the user clicks on that. So to do that, let's go over there and just write upload button that is hidden is he called the Truth. And that's runnerup One more time. And let's click on upload Button. It's so amazing. And also you can make a loop animation with Lottie, so let's check it out as well. So after animation, that play that's right, animation, that loop animation is equal to true. And let's runner at once more perfect. As you can see, the animation plays over and over again, which is so useful. All right, thank you so much for watching this video. I hope you enjoy this video, and I really recommend you to check the documentation of lot er us on. Get up and that's it. See you in the next video 52. What is a table view?: Hi, everyone. Welcome to another section of the scores. Today I'm going to talk about what, exactly? A table view in annoy us. APP is generally a table. You is one of the most important to your elements in IRS APS. Nowadays, most of the apse are using a table view in one way or another, except gangs probably so lets me give you some examples in order to understand what's a table view ease. The first example is contact in your devices, which consists of label. In this example. It's the basic form of you I table view. The second example Ease Instagram, which is so popular nowadays, and it uses table you to show us others posts. But it's a complex table view, which consists of labels, images, bottoms, videos, etcetera and the last example is the Gmail app. As you can see, Gmail also uses table views to retrieve our emails and show us the content of our emails. So in these section I'm going to teach you how to use a table view from basics to advanced . All right. Thank you so much for watching the CDO in the next video. We'll work on our first table view app, so see you then 53. Design the user interface: Hi, everyone. I hope you're doing well. So in this video, we're going to design the user interface. First of all, let's drag a table view from the Object Library to our view. So let's look for that table great and drag and drop it over there. And now we need to change its size in order to make it feed to our view. Great. And now we need to change the prototype cells number in the attribute inspector. And let's change it from 0 to 1. Great. And as you can see now we have one prototype cell. So let's runner app on an iPhone aid and see the results. All right. As you can see, we have created the table view for our. However, it doesn't display any content, and also we need to check it out on another simulator, for example, in an iPhone tent. So let's run it on an iPhone 10 as well. All right? As you can see, it's not completely stretched to take the whole wheel, and I'm pretty sure that you know the reason of that. Yes, you're right. We need to use utterly out. So let's do that. As you know, we need to add some constraints. So let's click on that and add four constrains. And please make sure that you chose view over there and here also view not safe area. And let's keep constrained to margins unchecked and click on add for constraints. Great. And now let's check it out again. Great. As you can see now, our table view is completely fit to our whole week. But as I mentioned before, it doesn't display any contents. So in order to display anything in our table view, we need to use some protocols. If you don't know anything about protocols in Swift, don't worry about it. In the next video, we'll talk about protocols in Swift, and you will learn how to use it on your projects. So thank you so much for watching this video. I will see you in the next video 54. What are protocols?: all right. Now it's time to use protocols in our project. So first of all, let's open up the view controller, that suit file. And here, after you, I view controller. Let's adopt two things. First of all, we need to separate it with a comma. That's right. You I table you data source and again you, I table view tell yet over there. Actually, you I table your data source and you write a VW delegates are known as protocols. And as soon as you add these two protocols in your project, the X Code will give you an error. So let's click on that and read it out. Type you Comptroller does not conform to protocol. You I table view data source. So what does that mean? I know at first it seems a little bit confusing, but don't worry about it. We're going to dive into it to understand the concept of using protocols. Let me give you an example. Suppose that you work in a large company and you're responsible for asking an employee to do something on behalf of your manager. So in this case, your protocol that can connect the employees and the manager So now we need to implement two methods. Let's Silicon Fikse over there, and as you can see, the X God will automatically at these two methods to our project. So these two protocols help us to specify how many rows do we need to display in our table view and what should be displayed in each specific rope. For example, what should be displayed in Row three and now you're a delegate to provide. Exclude with these information. So we're required to use these two methods for your table view data source. And on the other hand, your table view delegate is responsible for the appearance off the table view. For example, we can customize the height of each row or configure section headings, etcetera. So in the first method, we need to specify the number of rows we need to have in our project. And as you can see, it returns an integer here. We need to return a number. Let's make it more useful and more dynamic. First of all, let's create an array, so let's right to our countries, which is equal to two square brackets. And here we need to write some countries name for example, Austria US U. K etcetera. You can add as many as you want, but for de Soto, really, I think it's enough. And now let's go to the first method and just write return countries dot count. So basically, it means the number of countries that we have in this array. So basically, whenever you add any country to disarray, it can count it automatically. And in the second method, let's create a constant and call it sell. Identify. Air is equal to cell, which is a string. And then let's right, Let's sell is equal to table you. That's Dicky reusable cell without identifier and for index path and for with identified, let's write cell, identify air and for index path just right index path. And after that that's right. Sell the text label a question mark. The text is equal to countries brackets, index path, dots row, and at the end, we need to return sell. Actually, this method will be called every time a row is displayed, and by using index path, we can get the current roll over there. What we did is to retrieve the indexed item from the country's array, and after that just assigning to the text label. As you can see over there and probably have a question about thes question mark, what exactly is this for? Actually takes label Here is an optional in order to get access to text labor property. First of all, we need to make sure that takes label has value. And to do that, we just had a question mark after that. Alternatively, you can use if let to do the same process. And here the de que reasonable Cell is a method in order to retrieve a reusable table cell from the cue with the specified cell, identify. And now let's open up the main that's story bored and click on ourselves and here we need to specify our identify here and let's write self. It should be the same as we used in our coat. So let's run our app one more time and see if something has changed or not. As you can see, nothing has changed. Do you know what's the reason off that if you don't let me explain it to you? Although the view controller class has adopted the you I table view delegates and also you , I table view data source protocols. Actually, the you I table you here in our storyboard doesn't know anything about this. So we need to inform our you. I table the object That's view controller is the delegates object for the data source. So to inform it, we need to just hold control, watan and drag and drop over there and click on data source and again become delegate. And now let's check it out. Perfect. As you can see now we can retrieve our data from our array, which is absolutely awesome. All right. Thank you so much for watching this video. I will see you in the next video. 55. Making the Flag app with UITableViewController: hi, everyone. Now that you have learned how to use your eye table viewing your project, I'm going to show you another way of using you. I table view in your project in order to make it more customizable and also more easier for you to work with. All right, So let's go ahead and get started with dragging a table view controller from the object library and let's drag it over there. And also we need to put this arrow over there in order to make thes stable view controller as our initial view controller. And we don't need this view controller anymore. So let's click on that and delayed it. And also we don't need to you controller. That's we fire anymore so we can remove it as well. Move to trash, and now we need to create a fine in order to associate it with our table view controller. So let's go ahead and right click over their new file Coca Touch Class Next, and let's call it countries table view controller and subclass off you a table view control and click on next, create awesome. As you can see, we already have some functions over there that I'm going to explain them to you in a second . But before that, let's open up the main that's story bored and change something over there. So let's set the class that we just created countries table view controller. Great. And now let's select our prototype cell over there and go to the attribute inspector. And if the style is said to Basic for you, which is like these, just change it to custom. And also let's set on identifying for it like the previous project. Let's set it to sell. And now let's drag and drop your image viewing to ourselves like that. Let's make it smaller. And also let's elect ourselves and change its high to something like 80. We need to check custom bikes over there and let's change it to 80 and put our imagery over there great. And also, let's add two labels in order to show the name of the country and also the capital's name off that specific country. So let's look for a label one over there, and that's duplicated by holding command E. Let me change its takes to country and the 2nd 1 to capital all right, and let's change the color of our labels over there. So let's change it to something like something like this. And also for capital Perfect. All right, and now it's time to use constraints. So let's first select these two labels and put them in a stack of you over there. And let's add some space between them. Great and again, Let's hold this stack V over there and select image you as well and a game. Put them in another stack view. As you can see, this one is resentful on Let's add some spacing as well. All right, so now let's add some constrains. First of all, just selectees Stack V over there. Anglican constraints Bottle over there and said to two top six to the left, 1.5 to the bottom and zero to the right. And please keep constrained to margins unchecked and add for constraints. Great. And now just select this image. You Anglican at constraints again. And now let's set high to 60 and also check with and add to constraints. Great. And as you can see, it warns us. So what's the problem? If you click on this stack view, we have an option over there, which is alignment. If we change it to center, it would be fine. And also we can change the distribution off. Our two labels stack view toe feel equally great. All right, so now it's time to create another fine for ourselves. So let's right. Click over there like a new file Cocoa Touch Class. Next, and let's call it table view So and the suppleness of your table of you sell as well. Click on Next, create. And now let's click on our cell over there and said It's class to table view cell and let's hold option and click on table. You sell file, and now we need to connect our objects to our coat. So let's click on imagery over there and hold Control Watan. Drag it over there. Let's call it flag Bottom off. Taieb, you image. You connect the 2nd 1 as well. Country Connect and the last one Capital connect. Great! All right, so now let's come back to our countries table view controller. Let's close it great, and we have some functions over there, so this one is number off sections, so let's change it to one. And here we have number of rows in section that we already talked about it in our previous project. So I'm going to copy and paste those stuffs in order to prevent ourselves from writing something that we already wrote. So let me pace it over there. I prepared thes three raise just to save your time. The 1st 1 is name of countries that we're going to represent. The 2nd 1 is the name of capitals and you need to pay attention to the order of that because, for example, the 1st 1 Austria is related to Vienna and the 2nd 1 Poland, is related to Warsaw and so on. And also the last Array is the name of flags image that you can find it in assets file over there. As you can see, I already prepared them for you. So for dysfunction. Number of rows in section. As you know already we can write countries that count. And you probably noticed that we didn't adopt those two protocols over there. And the reason of that is that we're using a U I table view controller class, so we don't need to adopt those two protocols anymore. And also we have another function here that we can uncommon tit just by removing these notations. And let's change the identify your name to sell. Or we could just create another Constance, for example. That's right. Let's sell, identify air is equal to so and we can just write cell, identify your here and now. In this project, we need to add something here. We need to write as an exclamation mark, and then we need to write table view. So So what does that mean? It's known as down casting. So it means that we're forcing a project to use our cell that we just created over there with these outlets to show in our table view. And now we can write cell that country. That text is equal to countries Index path, Dutch role and again sell dot Capital Doc text is equal to capitals in Next path, that role and the last one cell that flag button. But in this project, it's like just an image. For example, we can add more functionality in order to just make it touchable in the future. But you can just right, for example, flank image in your project. That image is equal to you I image named, and here we need to write flags. Index path. That's role, and that's it. So let's run our project and see the result. Great. As you can see, we have all of our flags and the name of country and also the name of the capital. But there is one more step to make our flags images around or make it like a circle. So let's open up the X coat and go to table yourself. And first of all, let me introduce another feature of X Code, which is so useful North to rename our outlets. For example, let's rename our flag bottom to flag image. But if you just select that and right flag image, it's not going to work because you're just changing. It's in this file and you will get a bunch of errors in your project. So in order to change it in a good way, we need to select that and just right click and go to re factor and select rename. And now simply we can just change it to flag image and click and rename over there Great. And now ex could just changed the name of our flag outlets to flag image in whole project, so you don't need to worry about other classes and other funds as well. Everything is done. For example, let's go to countries table view controller. And, as you can see here, it's changed to flag image as well. All right, so let's open up table view. So and here in flank image, let's use a Karol brackets over there and write it. Set again carefully. Brackets. That's right. Flag image. That layer, that corner radius is equal to flag image that bounds dot with divided by two and flag image dots. Clips to bounds is equal to truth. And now, if we were on our project one more time, we will see the result. Fantastic. As you can see, everything is done perfectly. And now you have a good understanding of how a U I table view works in all US projects. All right, thank you so much for watching this video in the next videos. We will talk about other features of you I table view in all us. So see you then 56. How to make a To Do app?: hi, everyone. In the next videos, we're going to build this simple to do application. With the help of you, I table view. And as you can see, this application is able to add some tasks. For example, if I write Android development and then click on these at Botton over there, it will immediately at thes task to the bottom of our you a table view. And if I need a check mark for each task, I can simply just click on each row, for example, or shopping. If it's done, we can click on that, and as you can see, a check mark will shop. And also, if you want to delete a specific task, you can simply just swipe it to the left. And as you can see, it will be removed immediately. And also you can swipe a little wheat and just click on delete button over there. In order to start building this project, I already prepared a skeleton project for you in order to save your time for some basic stuffs that we already talked about. So please, just now Oh, the skeleton project from the next lecture and I receive in the next video. Thank you so much for watching the video 57. Inserting a row (To Do app): Hi, everyone. Welcome to another video of these tutorial. So in this video, we're going to work on these to do a project. First of all, let me explain to you how I designed these user interface. That's first. I just added a table view from the object library over there. It's fun. And then I added a cell to eat table. You sell over there. As you can see, we have these prototypes cell, and then I just change the style of our table. You sell to basic over there, and after that, I added a u I takes field from the object library, as you can see over there, and also I added a bottom here and changed its size in order to make it square. As you can see, it's 40 by 40 and I just changed its background color to blue. And for its text. I used a plus, and if you're plus is not set exactly in the center, you can go to the size inspector over there and there is a section which is called Title Insects, and here you can increase the bottom size to to in order to put it exactly in the center, and lastly, I connected all of our objects to our code. As you can see over there, here we have table view this one and then text field, which is this one, and add button over there. And as you can see, I just made it round with these two lines of code that we already talked about it. And I added these two protocols for our table view. And also I just created, at least as an array that stores just three random titles. For example, we have here shopping, working on my Project Rus Development. You can also leave it empty, but for our project, I prefer to have something to start. And then I created an Ivy action for our button, which is completely empty, that in a second we will work on that and these two functions, which is related to our table view that we already covered that. So I'm not going to repeat them. But if you have any question, just feel free to ask me any time I will do my best to answer your question as soon as possible. All right, so let's run our project and see our project all right. As you can see, we have a simple you a table be over there, which represents our three titles and also one you. I takes Field over there and one beautiful ran button that it's not working right now because there is no functionality for its right now. But in a second, we're going to work on that and make our app better and better. So without further ado, let's get a Sergeant. So first of all, in this project, we need to add another protocol. In order to work with you, I takes field, so let's go ahead and just add you. I text field delegate great and now in dysfunction. We need to write all of our functionalities in order to insert a row with a specific tighter. We can write all of our courts here, but let me show you another way in order to just make your cold clear. So lets me create another function here. So let's write funk insert new title Great, and now we need to use dysfunction inside of our I B action function. So let's right, insert new title and in dysfunction. We need to write all of our functionalities for inserting a new role or a new task to Are you a table view? All right, so what do we need to do? First of all, we need to check if our text field is empty or not, because if our textile it's empty, it doesn't make sense that we add another roto our table. You like an empty row. So first of all, we need to check that. That's right. If Text Field that text question mark that is empty is not equal to true, then So basically it means if our text field is not empty because we have here an exclamation mark, which means is not, then we need to write our court here in order to insert in your Oh so first of all, we need to add the input off our text field toe our array. So to do that, we can use a pen syntax. So let's write. Least that's a pen new element. And here we can write text field dot text an exclamation mark, and this is for unwrapping. It means that our takes feel needs to have a text, and then we need to create a constant, which is stores our index path because we are going to add each title at the bottom of orders. So let's just right. Let index Path is equal to index. Path Parent is is we have role and section. We need this one for roll. That's right. Least that count minus one. It means that we're recognizing the position of our and thes minus one means that we're going to add our new role at the bottom of others the last row and for section because we have only one section. Let's leave it as zero great. And now I'm gonna use another syntax, which we didn't work with before. But it's so, so useful. It's called begin updates, and also we have another function, which is called end updates. These are some extensions of your table, so let's write table view that begin updates, and then we need to insert a row. So again, that's right table view that inserts row at index path with you I table bureau animation and for ads. Let's right index path that we already created. And for wheat That's right. You have some options. For example, automatic bottom faith left middle non right and top I'm going to use Automatic for now, and then we need to end off dates. So let's write table view, nods and updates. And what else do we need when the user clicks on add button and we insert the role we need to make the tax field empty. So let's write tax field. The text is equal to an empty string, and after that we're going to close the keyboard. So let's right view. That's and editing, and it's a bullion type, so let's right. True. All right, so let's check it out and see the result. All right, so now if we click on the add button, it should not add any room because we already wrote a condition for that. So let's check it out. As you can see, nothing happens. And let's write some tasks. Let's write learning all US development, which is so interesting, and then click on add button. There we go. As you can see, it immediately shows up, and now when we click on that, nothing happens, and also we cannot delete it. So the next step is to work on these two features. Are I? Thank you so much for watching this video in the next video. We'll work on the rest of this project, so see you then 58. Swipe action and checkmark (To Do app): Hi, everyone. I hope you're ready for continuing our to do a project, as you can see when our app Ron's. Although we have only three titles in our least, it shows us a lot of rose over there, which is not great. So let's fix that issue. So to do that, just we need to add something, in our view. Did load function. We need to write table view, not table footer view is equal to you. I view frame, see direct and let's right that zero. And it's a treat to just get our results. So let's run around once more and see what happens. Perfect. This is what exactly we wanted, and it's more professional. All right, so let's go on and work on our project. First, let's work on our check mark functionality. In order to get a check mark, we need to add another function over there. That's right table view, and we need dysfunction Dietz electro at. So let's use that. And here we need to write ive table view that cell for RO ad. And here let's right index path. A question mark. That's accessory type is equal to you. I table view cell accessory time dots. And here you have plenty of options. The 1st 1 is check Mark. The 2nd 1 is detailed button detailed disclosure button disclosure indicator, etcetera. But in these projects were going to use check mark and non so lets you check Mark. Then we need to uncheck that. So we need to copy and paste this line of code over there and set it to non and changed this equal sign. As you know, we used to equal signs over there because we're assigning some values in the conditional for and then else we need to again copy and paste it, and we need to leave it as check mark. So what's going on here? With this line of code, we can add a check mark to a specific role. And with these line of code, we can uncheck that, as you can see, it's that not so it just removes the check mark. And now you're using these two lines of code in a conditional form in order to know if something is checked already, we need to make it non. If it's not, we need to put a check mark. So let's run our app and see the result grave. So let's click on the 1st 1 Awesome. As you can see, a check mark immediately shows up, and if I click on that again, it needs to be removed. Perfect. So let's check other functionalities as well, like eating great. Everything works fine. And now it's time to work on our deletes. Swipe action. All right, So to have a swipe action, we need to add another function to our project. So let's added order. We need to have two other functions in our project. The 1st 1 is Table View can Edit Troll, at which returns a Boolean, so we need to just return. True, it means that we can edit that role and the other one is table view. Commit editing style. And here we need to write our functionalities. So let's right. If editing style is equal to that delete, then so basically we have three kind of styles here, So let me remove that in order to show you if you put a dot here you can see we have the leaf insert and known, So let's use the leads. If editing style is equal to the delete, then The first thing we need to do is to remove the title from our least or from our array . So we need to write least that's removed at. And then we need to write index path. That's role. And then we need to use again, begin updates, function and end update function as well. So let's write table view that's begin updates, and now we need to remove or deletes a row. So let's write table view. That's the leads rose at. And here we need to again use index path with this time, let's use another type of animation, for example. That's left and then table view. That's end updates. All right, we're good to go, so let's check it out. So let's add something to our project like meeting and add it. And thats shake our check Mark functionalities Great it for X find. And now if we swipe our road to the left, we have these delete button over there, and if we click on that, it immediately removes also, we can swipe it to the left. Completely perfect. As you can see, it's not that difficult to work with these functions. All right, Thank you. So much for watching this video in the next video. We'll try to add some icons over there, or we will try to add some other options here. And also we learn how we can change its color to something else and how we can swipe it to the right and how we can disable the full dislikable feature as we have here. All right. Thank you so much for watching these CDO. I will see you in the next video. 59. Swipe action with icons (To Do app - Final Step): Hello, everyone. Welcome to another video of desultory away in this video. We're going to add some icons into our soy pebble row. So first of all, please just add icons into your assets for and you can download all of these icons from the end of these section. All right, so let's go ahead and open up our view controller, as I mentioned before. Now we need to implement other functions in order to make it roll swipe herbal. So let's make this function as a comment great. And these time we need to use another function. Let's write table view trailing swipe actions configuration great and trailing is for swiping from right to the left. And also we need to add another function table view leading swipe action configuration. Great. Alright, So first of all, let's try to implement our codes for the trailing swipe action. At first, we need to create a constant Let's right, let delete is equal to you. I contextual action Great and open parent is us. And we have these option with style title and handler. So, for a style, if we put a dot, we have two styles. The 1st 1 is distractive, which most off the time is usable for relating removing, which is suitable for this case. So let's use distractive and normal is for, like, editing and something like that or accepting something. And for title, we need to write a string. Let's right the lead and handler That's press enter and here we need to specify something for the 1st 1 We need to right action. The 2nd 1 we need to write view and the last one. Let's right, Neil. And here is a place that we need to write our codes in order to specify the action off that specific bottom. So for now, let's just right print delete. Great. And now let's return you. I saw actions configuration, and here we need to add actions into an array. So let's right the lead, all right, And now let's add something for our leading CYP action, which is from left to the right. That's right. Let's share is equal to your icon. Take strong action, Parent is is style and let's write Dutch Normal and for title, Let's write share and Handler again, Action View and Neil and again for code. Let's just right print share and at the end, we need to return. So let me copy and paste it over there and just changed the name of action here to share. Great. So everything is fine. Let's check it out. All right, so let's check if our rose are so I people or not, As you can see, it works perfectly, and probably you have a question in your mind. That's how the delete button is automatically set to red color. So the reason of that is because of this style over there. We use distractive, and so you've already knew about these kind of song. But how can you change the color of that bottom? So, first of all, let's check if our bottom works. So let's click on that, and we need to get print here. As you can see, it works perfectly, But if you want to really delete the role, you need to copy and paste thes functionalities here, all right, but how can you change the background color of that bottle? You can simply write the lead. That's diagram. Color is equal to let's right color literal, and you can simply choose any color you want. So let's change it to something like orange and run it again, all right. As you can see, it's changed and it's fantastic. And also, let's try the leading CYP action. So let me swipe it to the right. As you can see, we have share here, which is awesome, and also the full swiping is available here, as you can see. And now I'm going to show you how you can add more actions into our swipe apple rope, for example, let's add something here. That's right, Let's edit is equal to and let's copy and paste it. And here, let's change it to edit and also here, Great and here in actions we need to add edit as well. So let's run its once more all right. As you can see it, it is added to our swipe herbal role perfect. But now it's time to add some icons into our bottom. So let's go ahead and create those instances. In order to add an icon to your bottoms, you need to add something here. That's right. Delete dots. Image is equal to let's right image literal, great and also for share share. That image is equal to share right and also for edit edit. That's image is equal to edit. Great, and you need to remember that it doesn't matter what's the color of your icons. The X Code will automatically change their color toe white. So now if we run our advance more, it won't show us any title for our icons. So let's run our abalones more and see the result. As you can see, we have on Lee the icon over there, and also I comes over there, which is awesome, but we need also the title at the bottom off them. So how can be achieved that we need to increase the height off our rose and how can we do that? So let's open up the X Code in order to increase the height of each row. We have a function for that. So let's write table view height for row at and here. That's right. Return like 100. It should be okay. And also let's change the color of edit action. So let's write, edit that's background caller and called her literal. And let's set it to green Awesome. And let's run it once more. All right, Awesome. As you can see now, we have the title and also the I come together, which is also great. So, as I mentioned before, the full citing feature is active right now, so let's check it out. So how can you disable that? That's open up the X cold, nor to disable the full swiping action we need to use a function. So let's right, Let configuration is equal to. And now let's just caught this line of code and paste over there and here. Let's return configuration and now simply we can just right configuration that perform fares action with full swipe. And it's a 1,000,000,000 type so we can just write false. And now it's deactivated. So let's run it once more. As you can see, it is not activated, which is what exactly? We want it. All right. Thank you so much for watching this video. And I will see you in the next video 60. Why Should We Use Persistent Local Data Storage?: Hello, everyone. I hope you're doing well. If you remember in the last section we made these to do up together. As you probably noticed, there is one more feature left which is so important. As you remember, we created a new rate and added these three titles programmatically and we could also add some more titles like Let's right! Hello. And as you can see, it shows up. But what happens if I close my app? All right. As you probably know, I didn't terminate my app completely. So right now, if I open up the app once more, as you can see, we could still see the last title that we just add. But let's see what happens if I completely terminated the app. All right. And now if I open up the app, you can see that the last title that we just added is gone. And basically, it's a buck. So we need to add a feature in order to retrieve our data locally. And we need to purse east local later storage. All right. Thank you so much for watching this video. And I will see you in the next video 61. App Delegate Methods: Hi, everyone. Welcome back to another video of desultory away. At first, let's open up our project. There we go. And in today's video, I'm going to explain some of the methods in APP delegate to you that I didn't stalked about that much. Right? As you can see, they have so many methods here. So let me explain to you how they work. The first method is did finished launching with options. Actually, this method executes whenever your app gets loaded up. So let's make a prince statement here, and let's just copy and paste this name. There we go. And if you run our ab once more, you can see that it prints did finish launching with options. All right, The next method is application will resign active. It means whenever your user is working with your app and, for instance, he or she receives a call or a message. Actually, the APP moves from active to inactive state and, for example, suppose that your user just field forming your app and he or she receives a call. And obviously he or she doesn't like to see that all of the fields that was filled by himself or herself is gone, so it's not a good user experience. So you could use this method in order to use the fields data in your app and the next method. Its application did enter background and it's an important method. So one of the re close our app, but not just terminating it. It goes to the Bagram. So let's just make a print statement here as well. Print. And here, let's copy and paste application did enter background. There we go and let's run our app once more. As you can see we've got did finish launching with options and if I just try to close this app, you will see that we will get application did enter background. So now the operating system knows that our application is still working and, for example, you can use thes method in a music app. Suppose that So you're working on a project like Spotify and you want to add a feature that whenever the user closes the app, he or she still could listen to the music without any interruption. So it's an important method in order to work with, and it's so useful. All right, let's go down a little bit. Actually, the last method is application wheel Termini. So how does it work? Let's add a print statement as well here. So let's right preened, and I'm going to copy and paste it over there. Great. As you can see, the definition is here called when the application is about to terminate. Save data, if appropriate. All right, so let's run our app and see what happens. All right? We've got our first print statement. And now, if we just try to terminate the APP, we will also get the to order print statements that's terminated. And there we go. Application did enter background application will terminate. Right? I hope you enjoy this video and learn some information about these methods. And in the next video, we will talk about an s user default in order to purse east local later storage. Thank you so much for watching this video. And I will see you in the next video. 62. Persistent Local Data Storage Using UserDefaults: all right. Before using any issues or default in our app, I'm going to talk about the security of each app specifically a little bit. So actually, the all US operating system has a unique feature for ensuring its security, and that's because of the existence off these sandboxes. Actually, each app stays in its specific sandbox, and it cannot be access to the information of others. So, for example, as you can see here, the Spotify app cannot get access to the information of uber because it's completely illegal and they have their own sandboxes. So when we used the N s user default, it means that the data will securely stay in the local storage of the phone. And that's awesome. All right, so let's open up the X Code and work on our project. All right, so let's go to view, control or fire. There we go. And now let's create a constant. So let's right. Let befalls is equal to use their defaults, and I'm going to use standard great. And now let's go down and look for the method that we're going to upend our title to our least over there. So it's here. Insert new title after the's line of code, we're going to save our title in order to persist that. So let's write defaults that set and you're going to use value for key and it could be any object. So for value, let's write least and for key, which is a string that's right to do. Ah, great, All right, so let's run our AB and see what happens. So let's right. Hello and added to our least great. And let's terminate our app and open it up again. And as you can see, it's gone. So what's going on here is our co drawing or something else? Actually, nothing is wrong here, but in fact, we didn't use are safe data in order to add them into our least. So how can we do that? So let's go to our really load method, all right? And here we can write if let items is equal to be false. That's array for key and let's copy and paste. It's key because it's so important to be the same and we need to cast it as a string. And here we can write least, is equal to items. Great. So let's run our abs once more and see what happens, As you can see, because we already saved our hello title in our app. We've got Hello, right here. So let's add another title as well reading and that's terminated and open it up. And there we go. So we've got our titles. And as you can see, we could easily persist the data into our least. All right. Thank you so much for watching this video. And I will see you in the next video.