Create "Hello World" MacOS App

Hey guys,
In this post I will show you how to create the famous “Hello World” MacOS App

Since I am coming from a C# .NET background, this task was a very interesting one.

So what are you going to learn here:

Get familiar with XCode (IDE for MacOS)
Learn basic SWIFT (general purpose programming language developed by Apple)
Create a MacOS App

Setup:

You will need a MacOS (a virtual machine with MacOS installed on it, is also acceptable)
You will need to install XCode on your MacOS

So let’s dive right into it…

Table of Contents

Create a new Mac project

First you need to launch your XCode.

Welcome Screen XCode — *Create a new project*

From the menu there, select Create a new Xcode project. This action will pop up a new window.

From the new window you need to select the option MacOS and then navigate to the Application panel. From there you can choose the App option. Click Next

The next window will allow you to choose options for your new project.

Here you can populate the fields however you want. Just make sure you set the language to Swift and I will be using Storyboard as user interface. For now let’s uncheck all other options. Click Next

The following step allows you to choose a location for your project

Project Location — *Choose location for your project*

Once you are done doing that, click Create

XCode will take some time in creating your project. But once it is done, it will look something like this:

XCode project Window — *XCode project window*

XCode Workspace Overview

One of the best ways to familiarize yourself with the XCode workspace is to read all about it in the documentation.

XCode: Toolbar

From the Toolbar section we will be using two buttons: Build and Stop button. So go ahead and click on the Build button. XCode will build our current application and run it. It should look like so:

After that just close the application Window and click the Stop button.

XCode: Navigation Area

For the purposes of this tutorial we are going to stay in the Project Navigator Area, working with the project files.

XCode Navigator — *Project Navigator Area*

XCode: Debug Area

The Debug Area is located at the bottom of the application window. By default is split into two parts.

The panel on the left will show us the variables used while debugging. On the other side is the application output. That is all you need to know for now.

XCode: Utilities Area

This is the area where we will spend the majority of the time. This area is quite complex. Therefore, we’ll explain it as we create the application.

XCode: Editor Area

This is the area where we will write our code. In other words, this is the place where we will spend most of our time. Programming in the Editor Area.

Design the application

Now let’s get over to the Main.storyboard.

XCode Main.storyboard — *Main.Storyboard*

Here you can see two controllers. One is the Window Controller and bellow it you can see the View Controller. Both of them server a different purpose. For example in order to change the window title property you need to:

Select the View Controller
Navigate to Attributes Inspector
Edit the Title Property

Like it is shown on the next image

The point is, general Window related properties are set this way. You can also move to the Size Inspector, located next to the 2. Attributes Inspector and change the size of the window. Well I think you get it. Try to explore. See what other so called Inspector options are going to change to the window.

Add UI Controls

Now, let’s see how we can add controls on the Mac Application UI.

Select the Window Controller
Click the Library Button
Search for Label in the Object Browser window
Drag and Drop the control on the Window Controller

XCode Add Objects — *Add Label Control to the View Controller*

Now repeat those steps and make the View Controller look like the following one:

Controls used:

Label
Text Field
Push Button

XCode Application Design — *The completed view controller*

The goal for this view is when the button is pressed to display alert (message box) saying “Hello {Your name}”

Adjust the control properties

In order to set the Label Property Title to “Name”, first you need to select the Label control and then navigate to the Attributes Inspector from the Utilities Area and find the Title field.

XCode Control Properties Edit — *Change the Title property of a Label Control*

Do the same process for the Button Control.

XCode Push Button title edit — *Change the Title property of a Button Control*

If you have done everything correctly up until now, your View Controller should look something like the following image.

“Hello World” MacOS App

In order to implement the desired functionality on our small MacOS App, we need to:

Navigate to the Navigator Area
Double click the ViewController.swift file

Your XCode editor should change and look like this:

Because we will need to interact with the controls we just added. We need to create and connect IBOutlet properties and IBAction methods to them.

The first code we added is the IBOutlet for the Text Field. We need this property to interact with the Text Field we droped on the View Controller before. As you can see from the code we indeed use the nameTextField.stringValue in our SayHi method.

Now the IBAction method we are going to connect to the button on our View Controller. But before we do that let’s see what is happening in the code.

First we create an instance of the NSAlert class. After that, we set the message text to “Hi {the name inside the Text Field control}”. The style of the alert box is set to Informational. In the end we just add one button with the text “OK”.

We are now ready to connect the IBAction method to the button. But before we do that we also need to connect the Text Field to the IBOutlet property we just created.

XCode: Connect Button to IBOutlet property

The first thing we need to do is double click the Main.storyboard option from the Navigator Area. Next from the View Controller click the following button

After this action, the Utilities Area will activate. From there choose the Connections Inspector and under Outlets locate the property: nameTextField. Click on the circle next to it then drag and drop the connector to the Text Field on the View Controller like so:

Text Field Connection — *Make connection to Text Field property*

Now let’s hook up the IBAction to the Push Button.

For this action you just need to scroll a bit down and find the Received Actions area. There you will notice the method SayHi: and do the same drag and drop but this time drop the connector on the button. Like so:

Button Connection — *Make connection to the Push Button*

And that is it… Now just build and run the application from the Toolbar Area.

Application Result: “Hello World” MacOS App

This is how our “Hello World” MacOS App should look like

Application Run — *Hello MacOS Application*

Take the time and look into my other posts:

44 thoughts on “Create “Hello World” MacOS App”

Jamesgrale

April 24, 2020 at 12:58 am

Wow cuz this is great job! Congrats and keep it up.

RobyRew

June 20, 2020 at 9:55 pm

Thanks for the help!

I hope to learn much more, this tutorial has helped me a lot, THANK YOU VERY MUCH

ปั้มไลค์

July 7, 2020 at 2:15 pm

Like!! Thank you for publishing this awesome article.

ubaTaeCJ

March 12, 2024 at 10:32 pm

March 14, 2024 at 3:32 pm

1%2527%2522

-1 OR 2+376-376-1=0+0+0+1

March 14, 2024 at 3:32 pm

0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z

March 14, 2024 at 3:33 pm

April 8, 2024 at 9:29 am

Hi, Neat post. There’s a problem with your site in internet explorer, would check this?IE still is the market leader and a big portion of people will miss your wonderful writing due to this problem.

Hairstyles

April 8, 2024 at 10:20 am

I think other website proprietors should take this web site as an model, very clean and excellent user genial style and design, as well as the content. You’re an expert in this topic!

Haircuts

April 8, 2024 at 12:07 pm

Someone essentially help to make seriously posts I would state. This is the very first time I frequented your web page and thus far? I amazed with the research you made to create this particular publish incredible. Wonderful job!

vpn special coupon code 2024

April 8, 2024 at 2:24 pm

I constantly spent my half an hour to read this webpage’s posts every day along with a cup of coffee.

Stop by my web-site: vpn special coupon code 2024

Hairstyles

April 9, 2024 at 8:41 pm

Thanks for your thoughts. One thing we’ve noticed is that banks in addition to financial institutions understand the spending habits of consumers as well as understand that a lot of people max out and about their own credit cards around the vacations. They properly take advantage of this real fact and commence flooding the inbox as well as snail-mail box having hundreds of 0 APR credit card offers soon after the holiday season ends. Knowing that for anyone who is like 98 of American community, you’ll soar at the chance to consolidate consumer credit card debt and shift balances towards 0 APR credit cards.

vpn special coupon

April 10, 2024 at 4:49 pm

This is really interesting, You’re a very skilled blogger.
I’ve joined your feed and look forward to seeking more
of your magnificent post. Also, I have shared your site in my social networks!

My blog post :: vpn special coupon

Hairstyles

April 14, 2024 at 9:03 pm

What i do not realize is in reality how you are no longer actually much more smartly-favored than you might be now. You are very intelligent. You recognize thus significantly in terms of this matter, produced me for my part imagine it from so many numerous angles. Its like men and women are not involved except it is one thing to do with Girl gaga! Your own stuffs excellent. At all times maintain it up!

Create a new Mac project

XCode Workspace Overview

XCode: Toolbar

XCode: Navigation Area

XCode: Debug Area

XCode: Utilities Area

XCode: Editor Area

Design the application

Add UI Controls

Adjust the control properties

“Hello World” MacOS App

XCode: Connect Button to IBOutlet property

Application Result: “Hello World” MacOS App

44 thoughts on “Create “Hello World” MacOS App”

RobyRew

Anonymous

Anonymous

Anonymous

Anonymous

Anonymous

Anonymous

Anonymous

Anonymous

Anonymous

Leave a Reply Cancel reply