How to Code an iOS App in 34 Minutes - Xcode on OS X ✅ | Grant Klimaytys | Skillshare

How to Code an iOS App in 34 Minutes - Xcode on OS X ✅

Grant Klimaytys, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (34m)
    • 1. Introduction

      1:41
    • 2. Video produced by

      0:10
    • 3. Setting up our Mac with Xcode 7 and installing an iOS simulator

      1:34
    • 4. How to create an app project in Xcode 7 and Swift 2

      1:07
    • 5. How to add items to the main screen of an iOS app

      2:28
    • 6. Connecting items in an Xcode storyboard to our codebase

      2:07
    • 7. Writing the Swift 2 code of an iOS app

      6:41
    • 8. How to add pinch to zoom to a UIImageView

      5:26
    • 9. How to share an image on iOS with Facebook, Twitter etc

      5:46
    • 10. An introduction to good iOS coding - our first crash

      4:45
    • 11. Farewell lecture and a few tips

      2:22

About This Class

Create a full iOS app in less than half an hour. 

Learn how to develop on iOS and the basics of Xcode 7 and Swift 2. Perfect for people that just want to dip their toe in to see if native development is for them.

No programming experience needed!

fa151a27

ENROL now!

Transcripts

1. Introduction : Hello there. And welcome to this ultra quick tutorial on making a native iPhone app using X Code seven and Swift to as the language. Now, you see a rather bland looking up in front of us, and this is what we're gonna build. But don't go away yet because it gets better. If I come down here and I hit pick, I can pull up a list of the photos on my device, and when I click a photo, it comes back and it loads the photo for me in this image view. And if I hold down my option key on my simulator, I can zoom in and out just like a real device, or like your eye photos app. Now what if you want to share this with someone? Well, just come down here and hit share and on a real device, this will let you share to Facebook, Twitter, Google plus and loads of different others. And can you believe we do the basic part of this in 12 minutes? We do the slightly more complicated things in another 10 minutes. So, really, you cannot miss this tutorial. It is probably the shortest, fastest, most compact tutorial I have ever done. Now it is for you. If you are a beginner or novice, it's not really for you. If you are an expert and inside this tutorial, you're going to learn the basic anatomy of a nap and how to design one properly, how to put together the code correctly and how to link the design and the code. And by the end, of course, you will have this fantastic looking up. So I look forward to teaching you and on to the next lecture. 2. Video produced by: 3. Setting up our Mac with Xcode 7 and installing an iOS simulator: Alright, guys, let's set up X code on O Mac. Jump onto Google and simply Port X Code into the box. And we want the very first link developer dot apple dot com slash x Code on this page will tell you all some fancy features about it were no interested in that. We're just going to hit download, and it will tell us to view it in the Mac app store, and I have it open here. So this is in the Mac APP store. And to install this button on the top left hand corner will say install for you. If you don't have it, simply click it and then come back to the tutorial. Once you've installed it. Once installed, go ahead and run X code, and it just takes a few seconds for it to fire up. Just pull this on the screen here, okay? And then what we want to do is go into window devices and in here it will tell us what our simulators are. You might not have any so right to the bottom hit plus click add simulator, and we'll ask for a name, a device type so you can choose from any of the Apple devices and in IOS version to give it . If there are no IOS versions, click download more simulators and it will give you a list of the ones you can download. So once you've done that, click create and your device will be in the corner here and then we are ready to move on to creating our app. 4. How to create an app project in Xcode 7 and Swift 2: Let's create a brand new project and ex code with X code Open click. Create a new X Code project. It will ask you if you want any of these options, just use single view application. Click next and then give it a name. We will call this photos and you'll notice it asks you for an organization identifier. Just put com dot your name we want to use. Swift is our language, and we wanted to run on iPhone and iPad. Click next. It'll ask you where to save it. Anywhere is fine, and it will open your project. I'll just full screen this. Let's running around on the top left corner, click down, and if you've installed a simulator, click one of them. I'll click iPhone six and I'm way to press play and your Mac will start up your iPhone. Six. Let me just enlarge this for you, and that is our app, which is currently a blank screen. In the next lecture, we're going to add some things to that screen 5. How to add items to the main screen of an iOS app: let's add some items to the screen of our app. Over on the left hand side, we have the project browser, click main dot storyboard, and this shows you all of the graphical elements off our app. So this main box here is called a view controller, and it is the first screen that our users see when they fire up the app, and what we can do is drag some elements into their. So on the bottom right hand corner, drag this object browser up. If you can't see it, click this button called Show the Object Library Scroll down, and the first thing we want to add is an image you. So let's drag that into the frame. Now we can see what this looks like on an iPhone six. Right at the top, Click view controller and undersize click iPhone 4.7 inch. If you can't see this menu right just above it, you have a show that attributes Inspector Button. You'll need to click that, drag the image view over to the corners and then drag the corners to the sides off the screen. So I'm just going to scroll this down hit, then right at the bottom with the triangle, you have to add missing constraints because we have lots of devices off differing sizes. We need to have what's called constraints that allow us to position things on screen. So they show consistently from a small iPhone four to an iPhone six plus to an iPad and now an iPad pro. That's why we have constraints. One final thing we have to add to this screen is a buttons. Let's scroll up, grab button, drag it across and put it that. Then again, let's add missing constraints, and that will sort of pin it in place. Click button, come over to the top right, and you can change the title of this button. So I went to say, pick dot, dot, dot. It'll ask you for a text color shadow color in here, you can change many things about the button. We're going to leave it as standard. And that concludes, all of the graphical elements were going to put in our up in the next lesson. We're going to look at how we connect these graphical elements to our actual code 6. Connecting items in an Xcode storyboard to our codebase: let's plug this graphical elements into our code. We are currently in the storyboard section off our app. This story board called Image View, not imagery, rather view controller is attached to this file Over on the left called View controller dot Swift and X coat knows this. So if you come to the top right corner and these two rings that look kind of like Olympic rings, click them. That's the assistant inspector, the assistant editor, Rather. And then what we have to do is we have to drag all of these elements the image view and the button into the view controller. And the way we do that is we hold down the control button, not command, but control. We click on image view and we drag over to just under class. And when we drop it, it asked us what we want. We want an outlet so we can reference this image view, and we'll just call this image view. Click Connect, Then we have to do the same without button. So hold down control, select the button and drag it over here, and we will just call this button. There's one last thing that we have to do, and we have to fire something off when someone clicks the button and we can do that here as well. Hold down control, dragged the button, drag it to the bottom under where it says connection, click action. And this action is going to be called button Click, and the event we want is touch up inside. And that represents the classic way that someone touches a button on my US, and when you click connect, it creates a function that's going to fire every time someone presses this button. That is how we connect our graphical elements to the code. 7. Writing the Swift 2 code of an iOS app: so you may be wondering what our app is going to do or when we hit this pick button is going to give us a list of photos we have in our gallery, and when we select one is going to come back to this screen and put it inside our image view for us to view. To do that, let's go to view controller dot swift an inside here. We first have to come up to this class line, and we need to add a few elements to it. The 1st 1 is a you I image picker controller Delicate. The next one is a you I navigation controller delegate and this just allows us to add some fancy methods in here to make our life a little easier underneath our outlets. Let's have let image picker equal to you. I image picker controller. So let me just get that picker controller and then put your brackets in. Now this just creates an image picker for us in our override funk view did load. This is the method that fires up once the whole view has loaded and it shows just before or it fires just before our user sees the screen that pops up. And so in here we have nothing to do. There is no work to do here. Underneath that function, we need to have something for the image picker controller to do whenever we finished picking an image. And luckily, the image picker does this automatically for us. All we have to do is say funk image picker, controller, and then it gives us a bunch of things that we can implement automatically. We want the top one that says did finish picking image. So if you double click that, it loads it up, delayed that code line and then everything inside here it's going to do for us automatically. The first thing it has to do when he finished picking an image is it has to dismiss itself because obviously we want the image. Pick it to go away, and the way we do that is by saying self. Don't dismiss, view controller animated and we want to say true, because it wanted to be animated and once it has completed, just delete that and press enter on the blue lines, we won't void. We want nothing to happen once it has completed. We may have to put one or two more brackets in here. No, we seem to be OK. Okay, then underneath that, if you notice in the top line, it says we haven't image here. So when we finished picking an image, it gives us back that image. So we have to assign it to our image view that we sent inside our storyboard. And we already have a reference to that image view. It's up here in the outlet. So all we have to say is image for you. Dr. Image is equal to image. That is it. Then it will pass this image over to the image. You. I say that Now we have to fire up that image picker controller whenever we click our button . And if you recall, we haven't action function here called button click that we set up before. And the first thing we have to check is if our image picker controller has access to the saved photos on our device and to check it we say, if you I image picker controller don't is source avail is sourced type available and it asks us for a type. So we want you. I image picker controller source type Don't saved photos album So we're simply saying, If you have access to the safe photos on this device, then do the following. We're going to say image picker dot delegate equals self and then image picker don't source type is equal to you. I image picker controller and we want source type. There it is. Doctor saved photos album and then we say Image picker docked allows editing, and we're going to make this false so the user can edit them. And so once we have all of that set up in our image picker, we have to show it to the user. The way we show it is by saying self, Don't present view controller That's the one, the one at the bottom And it says You need to give me a view controller to present and we've just made that that's our image picker. Do we want it to be animated so true? And once we complete, let's just have Neil happened. That means I don't want to do anything. Once you've shown it, save that, go to the top corner and hit play and let's see what happens inside our iPhone six So here it is, right at the bottom. I'm gonna hit pick It asks me if I would like to access the photos. Click OK and allows me to scroll through my moments Something to pick this nice picture. And there we have it shown on our screen. I'm going to pick another picture, this nice waterfall and there we have it. So that concludes your first app wasn't that quick in the next section. If you want to carry on, we're going to correct a few things. For example, this doesn't allow us to move around the image. Our image is also squashed. So if you want to learn just a little bit more, then join me in the following section. 8. How to add pinch to zoom to a UIImageView: so we have our lovely image set up here, but we can't do any pinch to zoom, and I'm just doing this. One is simulated by holding down the option key and then clicking. Also, our photo is kind of out of proportion. It's come back to Ex Code. Stop that running inside our main dot storyboard. Let's fix the proportion problem. First, click our image view over on the right under view where it says Mode, we're going to have aspect. I don't know. Let's try Phil And so now it should feel the whole image view, but it won't lose the aspect off the image. So now if I click that there, we have it, so just plunks it right in the center. So if you imagine on the left and on the right, we still have some image that we can't see or we can't scroll to. Let's fix that in X code. Underneath are Objects section. We want to select a scroll view, click and drag that onto our view and then over on the left hand side, grab the image view and drop it on top off the scroll view so it becomes a child off the scroll view, Then click the scroll view, and we are going to just drag that the corners to set everything up nicely to lay out on our phone. Then click the image view. Drag that to the corners as well. Click on scroll view and we're going toe. Add missing constraints and you'll see all of those red lines have gone now, so I us is happy now. The scroll view needs a delegate at the moment, it has none, and there are a few ways to assign this. But the easiest way is to press control. Hold it down, click on scroll view and drag to view controller up there or view controller over in the storyboard. This yellow circle Andi hit delegate, and then you'll see over here on the right, in the Inspector. Now our app knows what to do When we do pinch to zoom, then let's connect our scroll view as an outlet. So open up the assistant editor. That's the top right on. I'm just going to make a little space here. If we come over to our scroll view and we control click and drag, we're going to pop it straight into here and we will call it scroll View. And we just want that as an outlet. Okay? And then away, too close the system editor and way to open that view controller. Now, do you remember we assigned a delegate from the scroll view to the View controller? So we have to add it to this list of the top Let's type comma you. I scroll view delegate. Now it's set up to handle that scroll view. And then, inside our view, did load method. Let's type itself dot scroll view. Don't minimum zoom scale is equal to 1.0. We can always change this later and self dot scroll view dot maximum zoom scale is equal to , let's say, six point, then what we need. Let's put it right at the bottom here. I'll just make some space. So you can see is we need a function for the view when zooming in our scroll view. And if we just typed funk view for zooming in scroll view and it comes up automatically because we added that delegate to the top, so just hit enter and then what we have to do is simply return self dot image view, and that is our image view. Let's run that. And hopefully we should have pinched resume working and it would give us a minimum and maximum zoom scale. So I'll just pick our image and I'll hit option. And there we go. We can actually zoom, and no matter how much I try to zoom down, it won't let me go any further. But if I zoom in, it'll only let me go to a scale off. Six. I can also click once, and I can move the image around, which is very useful. And so, of course, if you wanted to market this is a nap, you could put a ridiculous zoom scale on it. So I could say, Let's have a zoom scale off 60. I'm not sure that's actually going to work, but hey, let's try it out because we all have had that experience on your iPhone wave zoomed into something, and it doesn't quite go far enough. So let's pick out a little bit of detail and let's just keep going and we go so you could market this as super zoom photos up. If you really wanted to. Okay, And of course, we can pick many images like this one, for example. And again, we have the same behavior. All right, stop that. And that is how you add a pinch to zoom to your app. 9. How to share an image on iOS with Facebook, Twitter etc: all right. We've got a great looking app. We can pinch to zoom. That's brilliant. But what if I really like this photo and I'm trying to get with this girl that I know and I think it's gonna help my case If I can send her this photo at the moment, We can't do that. So let's put it in. Let's go on over to X code. Inside our main dot storyboard, the first thing we need is a share butter. So underneath objects, I'm just going to search for button. I'm going to drag it in. I'm going to put it near enough the side here. I'm just going to add my missing constraints. And I'm going to call this button something obvious under the attributes, Inspector, Like, share that. I need to connect this to my view controller. So open up my, uh, assistant editor Control, Click the share button and then I'm just going to drag it over here under view controller on. I will call this share button. I want to give this an action. So whenever someone clicks it, it will file this. It's close that and head on over to our view controller and, oh, I've just popped it in the wrong place there. So I'm going to do, Command said. To undo that, it's come back to the main story board, and I'm going to try that again. So I always make sure it goes in the class section underneath class here. There we go. And again it's given an action share button and we'll call it Click. It's open up the view controller dot swift and there we have it right at the top here. Normally you would put these kind of things at the bottom. But as this is quick, we can put it here. So we need some code in here that allows us to share this image. So let objects to share equal to. And this is going to be an array of stuff that we're going to share so to square brackets. And first we need a message inside quotes. Let's say wow, amazing image and then put a comma and we're just going to pass over the image that is currently assigned to image view. So image view dot image right. Once we have our objects to share, we need a way to share them so we have to create a view controller for that. Let's say let activity phy si is equal to you. I activity view controller and then it asks us for some items. So our activity items are the objects to share that we just created and the application activities. We will just have Neil for that, okay? And then we have to present it. So we say self, don't present view controller. It's that bottom one and it asks us for a view controller, which is the one we just created. Activity V. C. We will make it animated. And on completion, we will have Nothing happens. So just kneel. And here we have our first error. We have this little red thing here type of that type of expression is ambiguous without more context. So let's explicitly state it semi colon after objects to share. And this is going to be an array off any object and then under image. You don't image when you put an exclamation toe, unwrap it to actually get our image. So let's run that on your iPhone six, and hopefully we'll be able to share some stuff. Let's pick an image, drop it in and hit share. And oh no, we have a problem now. This is going to happen all the time in your development career, and it doesn't mean you're about developer. It just means you need to spend more time on fixing these bugs. Now, down here in the bottom window, it gives us a bunch of really complicated clues. But if you look right at the top, it tells us something about the share button is an unrecognised selector. Well, let's head on over to our main dot storyboard. Click the share button and over on the right at the top. Let's go to the connections Inspector, and we have touch up inside, and we have two instances of that now. If you remember, we created one and then deleted it because I made a mistake. But one of them doesn't exist anymore because we just simply deleted it. But we didn't remove the reference here, so I'm just going to click X on that button, and then I'm going to hit play again and hopefully we'll be able to share an image now. So let's pick one and hit share and there we have it. We can share it by mail more. We can save the image assigned, contact, etcetera, etcetera. On a real device, you will have Twitter, Facebook messaging and all of the various things that you can do. 10. An introduction to good iOS coding - our first crash: So what happens if we run on a ramp? We don't select an image, and then we hit share. Well, I know we get a crash. And if your user is using your rap and this happens whilst we know what's going on, all they will see is their app disappear from view and it's gone. In fact, if this happens during your review process on the APP store, Apple will reject your app. So we need to fix this line here. It says we have a bad instruction, and that is because this image view doesn't actually contain an image yet. And there are two ways we can solve that. I'll just hit Stop. The first way is toe always have an image inside it, so we could pre populate it with an image. But you never know. At some point they won't be an image in it. If your app goes on to doom or fancy clever things, you won't know if someone has removed an image from it and we get a crash again. So the best thing to do is to check first if the image exists, and how we do that in Swift is by saying, If let I am G is equal to image view. Don't image open curly braces and then we say, Do open curly braces and underneath there we say catch, underscore and close curly braces. Now what this block of code does, it says, If you can get an image out of this image view, then do whatever is in the do statement. If there's a big error, then run this catch statement. So we're going to take all of this code and we're going to dump it inside the do section. Let me just line everything up for us there. There we go, and that one. Now the last thing we have to do is change this. A ray variable image viewed our image to the actual image that we set up in the top line if let image. So let's run that and let's see if we still get a crash when we actually hit share without choosing an image and nothing happens. But when we're developing, we need to know what's happening behind the scenes, and there's a clever way we can do that in X code. Under this, if statement, if you type else open your curly braces. I'm just going to clear up this space here. It says. If this image is available and do this, But if it's not, then do this. And what we're going to do is say print and we're going to say era sharing image like so And now I'm going to run that on the phone. I'm gonna hit share without loading up an image. Nothing happens if we come back to Ex Code down here where our era console has popped up. We have a message from ourselves that says error sharing image. So this print line is a great way of telling ourselves exactly what's happening. So just stop that running clothes, that console section and a good way to see the order that things happen as well. So, for example, in our view did load. I'm going to say print. If you did load, and then I'm going to have another function below view. Did Load called Override Funk view will appear now. This is often confusing for people, they say. Does view did load first orders view will appear load first. Well, this is an easy way to find out, isn't it? We can just type view well appears. And then when we hit play, it's going to give us those things in the order that they're executed inside our app. So first we have the load, then we have the appear so that the print line is just a nice, simple way off sending ourselves messages as developers. So we know exactly what is happening inside our program, and I would advise you to put them most places because things will go wrong like you just saw in our app and we won't expect it. And if we have a message that we have coded, we will know a lot better what to do next. 11. Farewell lecture and a few tips: all right. Looking at the screen of code, it's hard to believe it's only taken us less than 15 minutes to actually write it, but it has, and I hope you can see how easy it is to make APs. But where do you go from here? Well, you could go look at the Apple guidelines, but it's kind of boring to read. You could go pick up some other instructors course, but I'll tell you a little secret, and that is in all of those courses they teach you how to make a nap. But they never show you how to get it on the APP store. How to make it look good and how to use the APP store listing as free marketing. And that's why I created my other course, which is creating beautiful IR saps from beginner to published, because I want you as the beginner learner toe understand the entire picture, including things like bugs. So as you saw in this app, we actually put in a little bit of bug handling, so we knew when something was going wrong. So if you join me other course, you'll make a brilliant RSS app, and I've just got it running up here on my simulator. And what this app does is it allows you to jump in on, find some RSS feeds. So I'm going to grab the deal, but one. And when I hit, save it goes back and it pulls down all of the RSS feeds that I have currently listed. And I can scroll up and down through them. I can scroll through the index at the side if I want to. And when I click an item, it opens up a nice Web view for me and takes me right to the story. And if you're interested in making money, you'll notice there's an advert at the bottom, a very unobtrusive advert. But there nonetheless. And every time someone has a little read of this story, I get paid from that advert. And in my IOS development course, I show you how to do all of this. So please do join me in that course, I'm a very hands on instructor so I can provide help in the discussion area as and when you need it. Once again. Thank you for joining me on this very short course, and I wish you the best of luck