Easy programming: create your first app for iPhone. Part 1. | Irina Galkina | Skillshare

Easy programming: create your first app for iPhone. Part 1.

Irina Galkina, Easy programming.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (20m)
    • 1. Intro

      0:48
    • 2. Set up environment

      2:47
    • 3. Xcode project overview

      1:37
    • 4. Storyboard overview

      7:39
    • 5. Layouts and constrains

      3:59
    • 6. Adding images

      2:44

About This Class

We will create simple and useful application for iOS - Egg Timer.

a5ddb2d5

 

79c26688

We will start from setting up development environment and go to the completed application.

In this class you'll learn:

  • how to set up development environment(download Xcode and start your first project);
  • how to quick and simple add different controllers (buttons, labels, sliders etc.) to your app's screens;
  • basic structure of the iOS application;
  • what is the storyboard and how to use it;
  • the basics of construction of the source code;
  • how to connect controllers form the storyboard with source code;
  • how to add and use timers in your apps;

In the Part 1 we will do:

  • set up development environment;
  • create first project;
  • project structure overview;
  • add buttons to the screen;
  • set images for the buttons;

Transcripts

1. Intro: Hello. My name is Serena, and I'm hours developer. Use so many gaps in our everyday life and now extend to create your own up in this class. It'll create simple and useful application. Tyler, we will. You received as a problem in language. If you don't have any problem and experience, no matter, no special knowledge is needed. I will show you how to start from downloaded exclude from iTunes to the completed application. In the end of this class, you have cool up and on the base off, you can create your own timer, which you can use in your everyday life. Like a speck, a two timer or physical activity. Steiner momentarily want 2. Set up environment: So hello is this lesson. We're going to set a development environment and start our fields project. First of all, I want to say if he works about Steve as a programming language, it is a very young program, it in which it was created in 2014 but now the one of the most popular programme mingling between the world White because it's safe, it's easy to Doan. It's well supported but Apple and you can find a lot of tutorials in the Internet. That's what it's gaining more and more popularity. So first of all, obviously, you need to download. Ex cop Ex got its integrated development environment for Marcos to develop for iPhones and all our techniques that support I spent also Marcos and everything else so don't don't know . Toe escort. You just kowtow. Webster. Just type. Exclude and download is this file. It's already downloaded for me, but you can just download it and use it. It's a little build big, like about four gigabytes, but that's okay. You should don't know it else. You can download Official handbook from Apple for Swift this week. Programming language. You can download it from my bookstore. This'll one. And, uh, you can use it to check something if it's not clear for you to make your intelligence with more capacity. So it looks like this. Andi. It covers all basic top topics. Oxford language. So you will see this menu when you open your scored for the first time and just choose create new Xcor Project single the application. Just that product name. Like quick time there. Organization name whatever you want. Uh, and organizational defy whatever you want. Uh, for your show. It's like comb something. Maybe you're so named, like for me and blemish swift devices by phone. And but you can uncheck use Carlotta and everything else, uh, to directly when you can. You want to save your project. And this that So that's all you need to create a vast project. 3. Xcode project overview: and just a full year we'll see this meal meaningless settings for a project like version device around Asia and team and everything you need for your creative project and for create your up. But for the first time, don't change anything. Just said that default and it'll be okay for our applications. Also, what we have in our exclude project we have Minister about, we have a large screen storyboard, toaster birds and two files FIS, fifth exception abdicate and view controller since our gold. And what is it? First of all, I want to say about main starboard main. Starboard is the place where you can quick and easy draw your application screens like you have different types of controllers here, like activity indicator progress, your and everything you need. And after that you can connect your screens. It is the source court and you can connect your screens. It is this file, Abdullah Gate and Controller. Interrogate is a place where it starts going through your application and it controls all transitions off your application. I go background go foreground, never sink else, and we control our main filed with serves Scott. Uh, and there is here we will put out a lot source got connected to our application and how it will explain how you how we'll do it on the next list. 4. Storyboard overview: So let's start from main story, Bert. First of all, I want gold, uh, to Mr Boat and select my old of your controllers that they have here. Onda, uh, here. Something like buttons here. Salute illustration. How? Our application. We, uh we look like a present off this lesson. So yes. You see, I want to end through battles and three labels. Here I go and stop to look for bottoms. Yeah, this so I just It three buttons him, and now I need to arrange them on. There might be a controller on my screen, So not now. I have just rebuttals, and it doesn't look very nice. What can I do with them? Just a phone. I want to sit size. So I just click on the bottom like Middle Parton, for example, and maybe goes for this menu basis. Show the line, Inspector since Isis the Inspector. And first of all, I want to sit 86 for example, for 86 86 for weeks of heck, it became bigger and do it for each bottle. 86 86 and 86. Thank you. Six. So now I need toe arrange poses button on my screen white. You know that we have a different type of devices that drunks Iost like iPhones. I found 7765 And each of them have different size of screen. So if you want your elements your controls placed in the same way on different screen types , you should you should set some rules for the placing your elements. Also, I want to show you that here we have preview for different types off controller. So now is iPhone seven is choosing so I can set it toe iPhone f here, like an adult, is the same, like iPhone five screen iPhone five s by five screen and also ah, plus size. And also I phoned for s as you can see that even if on iPhone seven, I have buttons placed. Okay, but the father I phone as here and I found for S it notes It doesn't look so good. So let's just fix it. So let's just it the rules for arranging our buttons and also it cost constraints, broking in program and goals. Constraints was the following to say that you can add suggested constraints against the who if God by it it's got off course. So you just go here and said you're said to say, gets the constraints. But as a programmer, you better know your application. Maybe you designed it. Maybe you know how to better. It should be shown on different screen size. So I advise you to set constraints and rules for arranging your elements manually. How to set, how to do it on Just use your buttons. And first of all, just said size constraints. I always want to be this buttons like 48 by 48. So I just go to constraints in this menu. Is this crap square? And I will do this for everybody, it to constraints and to constraints. So just at two rules for each bottom What now? Now I need to get more constraints because the size is not defined Where exactly will be My Martin placed. So I just chose the middle bottom. Right click on it. But if you have ah, finger stop by right leg, just changing it settings because it's better to use for this purpose is it is better to use clicking right corner off your attachment. So just right click and put it so the view controller it was of you and sit, uh, sent a horizontally in container. So this, but always beat horizontally, always be in the center. Also, I want to set their space to the top. The same actions, right click. And so I said, Vertical spacing, Top layout. And now, as you can see it, not dread anymore. So it plays correctly for all devices and for another buttons. I want to set space between them and the middle button. So I just right click and go to the middle button and sip Horace ultimate spacing and the same forces button for a Children's basic. Also, I should said that Ah y position for these buttons. Like I said, the weaponization for the middle Martin and I can said this was the middle button, uh, like to put it on the one level and said, What I entered centre inside that as their center should be the same. So now is the center off this button and centre offices button. I mean, vertical center will be the same, and that's exactly what we know. So you can just click this button. It will refresh our view. According Toa, our constraints toe our who and see how our bottom, our place, the on different screen types. Ah, a little big for five, but I think it's OK. 5. Layouts and constrains: And first of all, I want to change space between buttons because I think it's too much for iPhone five eso and also off course I can change my constraints and I want to show you how to do this. So I go to the same menu, use a liner, and here I have no constraints that I make for my bottoms and I can see here to really expect to the middle bottom it equals 27 I won't change it about 22 and to the right by item. I want to do the same trying to talk. So now my buttons looks good on all devices. That's exactly what I want it, Elsom. Now I want to add labels off my application. I already typed label and here I wouldn't label control. So I just headed for first. I will add just one label, So I am. I want to set it formed, not system, because it's the warring. I want to set something. I just changed onto custom and family. Want to change to every new next and decides about 15 little bit. Okay, Alignment. What is the center and our center egg type? It will be in go. So I want it to be a little bit bigger, like 86. Like my battles and I want to committed in constraints. So I had one constraint to three wits. Yeah, Enter ever being used as a template for other buttons. I just do common. See, common tree could be based and common Seek a want to be again And I will just change the text in my labels Here, build me soft boiled And here we will be hard boiled As you can see they are wreck That means that not arrange properly So let's do this forces for this label I will arrange it according my middle button So just right click on it and connected with the bottle Verticals Basic So the space vertical spacing between my label and the bottom will be the same on the old screen Types also said to her some police So, uh, they will be Ah heh for the same central just about to go space and didn't, wasn't it? So now it's not right. That means it into place broke and the same for the others Vertical spacing and sent to horizontally and the same foetus. So right. You can Yes, you can use commands it as usual. So little and on different screen sizes, and it looks slice. 6. Adding images: So now I want just at imagers images to my button closes I go to the floods Aiken dot com up observing to the site in the class resources and I just typed bold ec And here is images I can use on, but I think for me is this one will be nice. I just been G and Resolution one Hungry 28 Also, I want to draw your attention about attribution off the ulcer so you can read about Ah, If you go to this link, here are small rules how to do this. And after that, you can don't load images for free. So now let just image our image door project. And for this, I goto the assets and just drug and drop image here. So here have new image Asset world. So now I go to the main story board True bottom, An image, just world. And also I just did it Ah, title because we don't use it. And for each Parton, I do the same off course. You can use different images for everybody, but as we don't load that our image from the Internet, we'll have the same. But if you have a designer, you can use different images. And now let just, uh, around on the simulator. Our project. Ah, here you can choose simulator. I will use iPhone, etc. And just breasts. Ron bottom. Also, you can see a window Lexus to turn on development more on your mark. So just Joan. And if you see such a window, so my obstructed I have three buttons. I can connect them and that's everything so they can do. But in the next part of this class, I will show you how connect your buttons is the source code and how to make your application work.