“Hello, World” SwiftUI

Let’s get started

Image for post
Image for post
Photo by Yu Kato on Unsplash

SwiftUI has been around for over a year. Now we have had longer than a Year to start working with SwiftUI. Isn’t it time we got started?

Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 11.5, and Swift 5.2.4

Prerequisites:

  • Be able to produce a “Hello, World!” Swift application
  • Be able to download a repo from GitHub (If you choose you want to!)

Terminology

Swift: An open source programming language for macOS, iOS, watchOS and tvOS and others

SwiftUI: A simple way to build user interfaces Across Apple platforms

Why Hello World!?

Simple tutorials usually begin with a “Hello world” tutorial. Those outside the programming community can feel that this is an unusual thing to choose, as it seems to have been picked simply because it is a simple word String (or just String) to print to the screen.

But why would anyone choose that particular String?

We can start at the beginning. There is a book about C programming which used a “Hello, World!” example — although this was actually lifted from a Programming in C: A Tutorial (1974) book. The actual “Hello, World!” application that tutorials ask you to produce vary in sophistication and implementation, but the basic idea is that you print “Hello, World!” in some form. We are going to display “Hello,World!” on a label displayed on the phone screen.

The step-by-step

Creating a new Project in Xcode

You need to have Xcode installed on your Mac. This can be downloaded from HERE. If you don’t already have this installed, do so now. Once you have done that, you can click on the Xcode icon

Image for post
Image for post

This opens up the IDE, and the first thing we are going to do is create a new project.

Image for post
Image for post

Select Single View App

Image for post
Image for post

then name your project appropriately, making sure the language is set as Swift and the user interface SwiftUI

Image for post
Image for post

You’ll be asked where to place your project, and I’ll leave you to choose somewhere in your Documents folder or similar.

Viewing the preview

You can see the current preview in Xcode by telling it to update the Canvas.

So to see the canvas press Option-Command-Enter on your keyboard. If Automatic preview updating is paused, click on the resume button towards the top of the screen to kick it into action.

Image for post
Image for post

You should now be able to see the preview!

Image for post
Image for post

Running on the simulator

To run the code on the simulator there is a keyboard command to help you out. ⌘ and R at the same time will kick the simulator into gear, making it appear and load your App.

Image for post
Image for post

Changing the text

Look, you’ve got me. The App automatically displays “Hello, World”. But we are going to add some more text to make this a little more…interesting.

We are going to add an object, so towards the top-right hand corner of the screen we will press +. Yes, that one.

Image for post
Image for post

This brings up an attractive menu for us to choose, and here I’ve typed in “Text” to make it easy to find the text. Easy it is!

Image for post
Image for post

Then you need to drag the text block to just under the Hello, World one — this is tricky to show without an animated gif movie. Luckily that is what I’ve prepared:

Image for post
Image for post

We can then change the text on the left hand side on the ContentView.swift file. That is, instead of "Placeholder" make the text say "I'm great!".

The result will look something like this:

Image for post
Image for post

If you want the finished code you can download it from https://github.com/stevencurtis/SwiftCoding/tree/master/SwiftUI/HelloWorld

Conclusion

Writing Hello, World! like this on a label is a big step as a first real iOS program. If you’ve followed through this tutorial from scratch you’ve done a great job!

If you’ve any questions, comments or suggestions please hit me up on Twitter

Why not sign up to my newsletter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store