Creating the first iOS App

Introduction

Have you thought of building your own app? Have you wondered how these apps are built? Then this article is for you.

This article is focused on step-by-step guidance to build your app. You will work with the software Xcode. Xcode is the software that can be installed on Macbook. It is used to create iOS apps. Let's dive into this article to learn more about Xcode working. Also, you will have step-by-step guidance on how to create your own iOS app.

Creating your first iOS app 

The creation of an iOS app can be done in six steps. They are explained in detail below.

Step 1: Install Xcode

Skip this step if Xcode software is already installed in your system.

Xcode is software used for building iOS apps. You need an SDK if you want to develop iOS apps. This SDK is provided by Xcode. Xcode runs only on Mac OS X. If you have windows, then you can follow a couple of options:- 

• Get a mac. It is expensive but the easiest way.
• Borrow Mac from your friend
• Give up on Mac. 

Now, when you get your Mac ready. Search Xcode in the Mac App Store. Click on it and download it. It is a lengthy download of around 4 Gb. 

Step 2: Open Xcode software and Set up the project

• Open the software Xcode.
• Go to the File -> New -> Project.
• Click Next after clicking on Single View Application.
• Name the file Hello World!
• Select which device you want to make (an iPad app, an iPhone app, or a universal) 

• Make sure that Use Automatic Reference Counting and use storyboards are checked.
• Click on the Next button.
• Select the location you want to save the file. Click Create.

Step 3: Write the code

We will be doing programming in the file ViewController.m. There is a file named MainStoryboard.Storyboard for UI. We will work on this file later on. The appDelegate (called startup) that we are leaving for this article. Let’s begin with programming.

• Open file ViewController.h
• Add the following code between @interface ViewController : UIViewController and @end

@property (strong, nonatomic)IBOutlet UILabel *label;

• This will show Hello World text. You have written the right code if an empty circle appears after the line of code.
•  Go to file ViewController.h
• Add @synthesize label; under @implementation ViewController. Add [self setLabel:nil]; in the function viewDidUnload.
• Add the code given below in the viewDidLoad:

self.label.text = @"Hello World!";

• This completes the program part.

Step 4: Connect the UI

Now we will work on the UI of our app.

• Open the file MainStoryboard.Storyboard
• Drag a label onto the view after finding it. See the picture below to understand more clearly.
• Resize the label according to your choice. Do it by clicking and dragging squares of the label corners.
• Goto Attribute inspector.
• Select the size and font you want. Before that, confirm that it is in the center.
• ViewController.h should be open when you click on the Assistant Editor. If it does not open, then you need to change it.
• Click on the circle (about which we have talked earlier). Drag it to the just-added label. The circle will be filled if you have done it correctly.

Step 5: Run the App

Click on the Run Button. Your app will open with Hello World! If everything is correct. That’s it. You have made your own app. 

Step 6: Have some fun by adding things programmatically

We will add some more programming to add a little more advancement:-

• Delete all the code and UI labels at this point.
• Open ViewController.h. Write the following code:

@property (strong, nonatomic)UILabel *label;

• It should be added between the @interface ViewController: UIViewController and @end. This time you did it correctly when the circle did not appear.
• Add @synthesize label; in the file ViewController.m. It should be present below @implementation ViewController. In the viewDidUnload function, add [self setLabel:nil];.
• Write the code below in the viewDidLoad function:

self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
self.label.text = @"Hello World";
self.label.textAlignment = UITextAlignmentCenter;
[self.view addSubview:self.label];

• Click the Run Button. You have built your first iOS app.