macOS Development for Beginners: Part 1

Debugging

Sometimes, we programmers make mistakes – hard to believe I know, but trust me, it happens. And when it does, we need to be able to debug our code. Xcode allows us to stop the code at any point and step through line by line, checking the values of the variables at each point so that we can find the error.

Go to sayButtonClicked in ViewController.swift and click on the line number beside the var name = line. A blue pointed rectangle will appear. This is an active breakpoint and when you click the button, the debugger will stop here. Click it again and it will turn pale blue. It is now an inactive breakpoint and will not stop the code and start the debugger. To remove the breakpoint completely, drag it out of the line numbers gutter.

Add the breakpoint again and run the app. Click the Say Hello button. Xcode will come to the front with the breakpoint line of code highlighted. In the bottom of the Editor panel, there will now be two new sections: Variables and Console. The Variables section shows the variables used in this function as well as self – the View Controller, and sender – the button.

Above the Variables display is a set of buttons for controlling the debugger. Mouse over each one and read the tooltip to see what it does. Click the Step Over button to move to the next line.

In the Variables display, you can check that name is an empty string, so click Step Over twice more. The debugger will move into and through the if statement and set the name variable to “World”.

Select the name variable in the Variables display and click the Quick Look button below to see the contents. Now click the Print Description button to see the information printed in the Console. If the “World” value had not been set correctly, you would have been able to see that here and work out how to fix your code.

When you have checked the contents of the name variable, click the Continue program execution button to stop debugging and let the program move on. Use the button in the top right to hide the Debug area.

Images

In addition to code and user interfaces, your app will also need some artwork. Due to the different screen types (Retina and non-Retina), you often need to provide multiple versions of each asset. To simplify this process, Xcode uses Asset Libraries to store and organize the assets that accompany the app.

In the Project Navigator, click on Assets.xcassets. AppIcon will contain the various images needed to display the app icon in all the required resolutions. Click on AppIcon – you can see that it wants many different images to cover all the possibilities, but if you supply any one of these, Xcode will use it as best it can. This is not good practice, as you should supply all the required icon sizes, but for this tutorial one icon will be sufficient.

Download the sample icon which is a 512 x 512 pixel image. Drag it into the Mac 512pt 1x box.

Build and run the app to see the icon in the Dock menu. If you still see the default app icon, quit the HelloWorld app, go back to Xcode and choose Clean Build Folder from the Product menu, then run the app again.

Getting Help

As well as being an editor, Xcode also contains all the documentation you will need for writing macOS apps.

Go to the Help menu and choose Developer Documentation. Search for NSButton. Make sure Swift is the selected language, then click the top search result so that you can read all the details about buttons and button properties.

There is also a way to get to relevant documentation directly from your code. Go back to ViewController.swift and find the first line in sayButtonClicked. Option-click on the word stringValue. A popup appears with a short description. At the bottom of the popup is a link to Property Reference. Click this link and the documentation will open to show more information.

Option-clicking is often a really good way to learn, and you can even add documentation to your own functions so that it shows up in the same way.

The Help menu also includes Xcode Help for specific information about the Xcode environment.

Where to Go From Here?

In the next part of this tutorial series, you will start to create a more complicated app. Hope to see you there!

If you have any questions or comments on this tutorial series, please join the discussion below!