In Episode 2, we will make our first app that will alternately display “Hello World” and “Hello Pizza” at the press of a button. The goal is to get acquainted with all the parts of Xcode we will be using often, not necessarily what the program does.

The first episode about downloading Xcode can be found here

Edited Transcript Episode 2: Your first application — “Hello Pizza!”

For our first application, we will make an app that toggles messages at the press of a button. Open Xcode and you will find the Welcome to Xcode window. On the left side of the screen you will see three choices, one for the playground, which we will use in our next lesson, an Xcode project and an existing project. Click the Xcode project.

You will get a window asking you for a template.Click under iOS the  Application tab. Select Single view application. Click Next. You’ll get another screen asking you a set of questions.

For the product name type Kinderswft1HelloPIzza
The next two question sets up something for selling the app called a bundle identifier. Since we are not going to sell this, we can put in simple answers at this point, since  the bundle identifier is required to fill out. For the organization, put your name and for the organization identifier put either your website in backwards order like we it have it here or com dot and your name.

Now click the language button and make sure you are set to Swift.

At this point we are going to program for iPhone only. so click devices, and select iPhone.

Make sure Use Core Data remains unchecked.

Click Next.

Xcode will ask you where to save your files. It’s best to make a directory for yourself. I made one called Kinderswift.
select that directory and press Create.

Xcode will create your files and you will come up in the target screen. Don’t worry about what is here now, we’ll get to it later. What is important is the left sidebar called the project navigator. This is the list of files that make up our project sometimes called the project bundle. Clicking on a file will bring up that file in the center editor pane.

Click the Main.Storyboard file.

You will get a screen like this, called the storyboard. On the lower right corner you will find the object library. The object library contains things we can add to the storyboard. Scroll down through the object library until you find the button and the label. If you click on either one of them a popover shows that tells you more about the control.

Click and drag the label from the object library onto the box in the storyboard like this.  Line it up with the upper left grid lines that appear. Release the button. You’ll notice little handles around the label. Click the left center one and drag it to the other end of the box, which we’ll call a view controller. You’ll see the attributes inspector on the right, and there is a box for text and for font size. Change the font to 30 and the text from label to Hello,World

You will notice the label does not fit the box any more. Click the lower middle  handle and drag down till you can see the whole thing.

Now to the same for a button. Drag out a button, size it, and change the text to be Pizza!!!. Set the font to 30. Now go over to the attribute inspector, set the title color to white. Scroll down a little in the attributes inspector and set the background color to blue, or some color you like.

Now click the assistant editor. Here in Yosemite it looks like this, the older Mavericks version is a tuxedo. Another pane comes up. In the bar at the top click and make sure you are in automatic mode.
You’ll see some code on the side of the screen. Remove the stuff I have highlighted here, we’ll talk more about that in a later lesson.
Click on the label to highlight it. Hold down control and drag from the label to the code. When you are in the right spot you will see it light up. Release the mouse button, and you get a popover asking you for information. on the top it say outlet. type in the name myLabel. and click connect

Control drag from the button, but be careful this time. Control drag and release the button like before. This time, change the Outlet to a Action in the popover. and we’ll name it myButton.

If you mess up that step let me show you what to do to correct yourself. Right-click the button, and you’ll see a box with connections show up, hit the x in the connection. Only now can you delete the connected code. If you don’t do this in this order you may get an error you can never get rid of. Once done try again.

Okay , now lets add some code. I’m just going to paste this into the code. If you want to type it in , pause the video and type it in, I also included a copy in the notes for the video you can cut and paste. If you get any read circle showing up, then you types something wrong.  Check to make sure you got it exactly right. Capitalization counts here.

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!

    @IBAction func myButton(sender: UIButton) {
        if myLabel.text == "Hello, World"{
            myLabel.text = "Hello, RED!!!"
            myLabel.backgroundColor = UIColor.redColor()
        }else{
            myLabel.text = "Hello, World"
            myLabel.backgroundColor = UIColor.clearColor()
        }

    }
}

For those who want to add the Pizza emoji🍕. use the Keyboard shortcut Control-Command-Space to pull up the special characters popup.  Click the bell and scroll down to find the Pizza.

Build and run the application by hitting the play button at the upper left. Xcode will build the application.

Now tap the button and you got a working app. I hope that whetted you appetite for more app development. Next lesson we’ll start the process of learning the basics of programming using the Xcode playground.