ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Have 10 Minutes? Let's make an iPhone App!

Updated on July 22, 2015

Introduction

So you want to make an iPhone app? I'm assuming so since you clicked on this link! Or maybe you're just taking a look to see how hard it is. Well fortunately, it's not hard at all! The most important thing is to just make it through this tutorial and try not to get yourself overwhelmed.

If you have any previous programming experience, this will probably be a walk in the park. If not, it will still probably be a walk in the park. Just follow along with me.

So! Without further ado, let's get started!

What's needed:

Let's start with taking a look at what we need. Though not needed for all programs used for app development, a Mac of pretty much any kind is needed. I recommend using one with OS X Yosemite on it. If you don't know what that is, just take a look at the following two images:

If your dock looks something like this, you're not running Yosemite.
If your dock looks something like this, you're not running Yosemite.
Source

If you don't have a Mac. this probably isn't the tutorial for you since the software we will be using is only for Mac. However if you are on Windows and want to make games, I would recumbent checking out Unity which is available on both Mac and Windows. If you do have a Mac but you do not have Yosemite, that's alright just things might look slightly different.

Moving right along

So now that we have all of that icky stuff taken care of, we can finally move on to making our app! The program we will be using today is called Xcode.

Xcode is Apple's IDE (Integrated Development Environment) which is a fancy word for a program which is the house of your code combined with different tools to make your life easier. You can get Xcode for free of the Mac App Store. (Or you can just click here)

So once your downloaded that and you open it for the first time, you'll see a Welcome to Xcode screen. Click create new project and the next screen will pop up:

The app we're going to make will use the Single View template so click on that and hit next. One this screen we will configure our project. Not many of these setting matter particularly for now but I would like to take a second to explain what they are:

Product Name: The name of your app

Organization Name: Used mostly for the copyright notice that you'll see at the top of your code files and a couple other places. You don't need to set this at all for this project.

Organization Identifier: This is used when publishing your app to the App Store. Again you can leave this be.

Bundle Identifier: As you can see, a combination of organization id and app name. Again this is used when releasing your app.

Langauge: This is the programming language you want to use in the project. We'll go more into this in a second. For now, set this to Swift

Devices: Which devices are supported by this app. You can set it to iPhone or Universal for now.

Use Core Data: This is a form of saving data in more complicated ways. We will not be using it today.

So what are these languages

Apple has two programming languages, Objective-C and Swift. What's the difference? That's an entirely different hub. For now just know that Objective-C is the older and more established language and Swift is the newer and faster language. They both have their pros and cons.

Hello World, our first app!

So when you hit Next and set where you want to save your project, you will be presented with a new window which you can see below.

On the left, you have all of your navigation and some other tools and on the right, you have a combination of quick-help, document overviews, and your Object Library which is the most important part. In the center you have the current file. The one that is open when you start your project is an overview of settings and recourses used by your application.

For now we're happy with the settings we have so we're going to move onto making our interface! UI (User Interface) in case you don't know, is the layout of objects that are presented on a given screen of content. In iOS (Apple) development, these screens are contained into what are called Views and those views are contained in what are called View Controllers.

View Controllers are the main thing we will be working with today. View Controllers are what link up your objects to your code and give your app the functionality you want. So how do we edit this UI? Well on the lefthand side of your window you should see the navigation tab. If not, click the button in the top right corner of your window that has a bar on the left side as seen below.

Designing the Interface

Now, click on the Main.Storyboard file in the Navigator. A storyboard is the home for all of your user interface.

Our default storyboard
Our default storyboard

The square you see is a View Controller. If you click on bar on top of it, on the right side you will see some options as seen in the picture below. Since I said 10 minutes for this tutorial, I'm not going to go into making our interface adapt to different screen sizes. Today, we're just going to set the size to iPhone 4 Inch. An iPhone 4 Inch would equate to an iPhone 5, 5c, 5s or an iPod Touch 5. The 3.5 inch is iPhone/iPod 4s and below. The iPhone 4.7 inch is the iPhone 6 and the iPhone 5.5 inch is iPhone 6 Plus.

Today, we're going to make our app fit the iPhone 5 screen. So go ahead and select the iPhone 4 inch in the size.

So now with the size set (red), we're ready to start adding our interface objects. The two we will be using today are Labels and Buttons (cyan and magenta). So go ahain and drag those right into the View and drop them on there.

It doesn't really matter where you put them within the view as long as they are there. Double clicking on the button or label will allow you to easily change their text and adjust their size to fit.

Note: If you should select your label and increase its width (by dragging the boxes) by a fair amount because we will be changing the text later in the code and we want to make sure it can fit. After that, I changed my label's text to center alignment to make it look nice and encourage you to do the same.

Now that we have designed our interface, if we were to run the app, it wouldn't do anything because we have not added any logic to said interface objects. So let's do that now. My favorite way to do this is with the Assistant Editor (gray).

By clicking the button shown below, you can open the Assistant Editor and edit to files at once. So click the button circled with gray below and it will open it up. Now just select your button and control drag (or right click and drag) from it over to the code as shown below.

Drag above object the line that says

override func viewDidLoad() {

and release. A popup pops up (say that 5 times fast) and allows you to set a few things. Notice above that I set my connection (purple) to Action and my name (brown) to ButtonPressed. The name can be anything you want just don't include spaces or symbols other than _s. Numbers are also fine.

Once that's all set, hit connect and your button now has an action of its own! Now anything put between those brackets in your code will be done when the button is pressed. So let's make the button change the labels text.

To do that, we need to connect our label too. So control drag that over the same way, just above the ButtonPressed function. This time the settings will be slightly different though:

Just match your settings up with mine and we're done linking up our interface. Though you can make the name whatever you want like with the button. I made mine TextLabel.

Now the functionality we want to do can be easily done in just one line of code. And that line is:

TextLabel.text = "Hello World!"

That's it! You put that line between the two brackets of the ButtonPressed Function and we're done! So your code should look something like this:

Testing our app

So now it's time to try it out! We're going to test our app in the iOS Simulator. If you've ever done any Android app development and used the Android Emulator, it's nothing like that. iOS Simulator is awesome in that it is quick and easy to use. You don't have to set them up at all, they come with Xcode. So let's try it out.

First, we need to make sure we select the right one. So in the top left corner you should see something like the thing marked in yellow in the image below. If you click on the right side, you can select the simulator you want to use. Go ahead and select the iPhone 5 and hit the play button to the left of that (or hit command R). The iOS simulator will open up automatically and start running your app. When it does it should look smoothing like this:


Your very first iOS app!
Your very first iOS app!

And when you click the button:

What your very first iOS App does!
What your very first iOS App does!

Summery

Well congratulations! You have officially made an iPhone app! Sure it doesn't do very much, but it's a good starting point. In my new post we are going to take this project and make it do a lot more. We will add the ability to enter you name and have the app greet you, we will change the look of the app, and we'll learn auto layout and making your app fit on different screen sizes.

I hope you enjoyed the tutorial! I always love feedback (especially since this is my first time making a tutorial like this) so please let me know at nerdylimeapps@gmail.com or in the comments below! If you did enjoy it, please tell your friends about me so more people can learn all about app development! I try to post about once every week so make sure to come back and check out my next tutorial! Also if you have any questions about what we did today, please make sure to let me know and I'll help you.

And lastly, please go check out my apps and games on the App Store by simply searching 'Nerdy Lime'. Almost all of them are free so please go check those out! Thanks for reading and I will see you in the next tutorial!

Feedback:

Overall, how did you like the tutorial?

See results

What's the #1 thing can I do to make these tutorials better?

See results

What is your favorite blog of iOS tutorials?

See results

Comments

Submit a Comment

No comments yet.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)