Hello, welcome to the blog. This is the hello world project that will introduce you to the iOS app development world. The app we are making today is simple. When you press a button, it will change the content label to “Hello World”. It will involve very little coding and I will keep this in the simplest terms. Let’s get started.

screen-shot-2017-01-22-at-7-50-41-pm

First open Xcode and click create new Xcode project. Then select “Single View Application”

screen-shot-2017-01-22-at-7-48-00-pm

Give your awesome project a name, I named it Hello World.

screen-shot-2017-01-22-at-7-48-05-pm
Please remember to give yourself a organization identifier. This ID can be anything.

After that, your screen will look something like this.

screen-shot-2017-01-22-at-7-48-13-pm

Please single click on Main.storyboard. In the right bottom corner, type in “label in the search bar”. Simply drag label to the rectangular view in front of you. And then release.

Screen Shot 2017-01-22 at 7.48.26 PM.png

After a couple of tries, you will get the hang of it. You can certainly click and grab the label within the rectangular view.

This rectangular view is called a ViewController. This might be a fancy term for you. All you need to know is this is a representation of an iPhone screen. You can put items on this ViewController, edit them and they will appear on your screen.

screen-shot-2017-01-22-at-7-48-31-pm

With the same method, search for “button” in the bottom right corner. Click-drag the button to the ViewController as well. Now your view should have a label and a button.

screen-shot-2017-01-22-at-7-48-52-pm

Great job, you have completed everything with the interface. Now let’s start coding. Please click on the button shown below. You will see a new section appear on your window.

screen-shot-2017-01-22-at-8-00-49-pm

This might be tricky, but I will explain this in details. Select the button on the ViewController, left click. (double click) Then this menu will pop up.

screen-shot-2017-01-22-at-8-01-48-pm

After this, find “touch up inside” and hover your mouse on top of the little circle right next to it. Click and drag to the code on your left, place it right under @implementation, and then release.

screen-shot-2017-01-22-at-8-01-45-pm

Right after, it will ask you for a name, type anything you want, but I will type “pressButton”. Then click connect.

screen-shot-2017-01-22-at-8-02-01-pm

Your screen will be something like this, will two new lines of code. Congratulations, you have made significant progress.

screen-shot-2017-01-22-at-8-02-05-pm
Line 16 to 17 are the newly added code.

Please move your mouse to the top of the code, then select “ViewController.h”

screen-shot-2017-01-22-at-8-02-13-pm

A new file with code will show up.

screen-shot-2017-01-22-at-8-02-16-pm

Left click the label on the ViewController. Hover your mouse right next to “New Reference Outlet”

screen-shot-2017-01-22-at-8-02-31-pm

Click and drag it right above @end.

screen-shot-2017-01-22-at-8-02-35-pm

Then give it a name, such as “label”. You might realize that this is very similar to what we did with the button.

screen-shot-2017-01-22-at-8-02-42-pm

Then go back to ViewController.m, the same way you came.

screen-shot-2017-01-22-at-8-02-51-pm

Put your cursor in between line 16 and 18. In another word, hit enter a couple of time and create some space for yourself.

Finally, your first line of code:

self.(Name of the label you created).text = @"hello world";

Your screen will look something like this. On the top left corner, you will find a play button, click on that to compile and run your project!

screen-shot-2017-01-22-at-8-03-06-pm

On a side note, you can change the simulator that you are running on.

screen-shot-2017-01-22-at-8-18-34-pm

I would strongly recommend you to change the size of the label.

screen-shot-2017-01-22-at-8-19-48-pm

screen-shot-2017-01-22-at-8-22-42-pm

Your compile project will take a little to load. One the iPhone simulator is loaded, click on the button, the text of the label will change from “label” to “hello world”. You are welcomed to play with the project on your own. The completed version can be found here. I hope you enjoyed this tutorial. Please let me know if you have any question, comments or concerns. Thank you very much! https://drive.google.com/file/d/0BxTY9GVN6gvPSmROYjFNc2hrSXM/view?usp=sharing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s