Swift Playgrounds 4 changes the game if you want to get into programming on the iOS and iPadOS platforms. Today we start a series that takes you from knowing nothing about programming to writing apps, one step at a time. We’ll use the Swift programming language and the SwiftUI Framework for user interfaces. Along the way we’ll introduce plenty of programming concepts you can transfer to learning other programming languages.

What you’ll Need

All you need is Swift Playgrounds 4. You don’t need any experience programming. However, Swift playgrounds 4 as of this writing has a few requirements of its own. The app only runs on iPads with iOS 15, but I’d suggest 15.4 or later for best results.

You can get the app in the App Store for free.

Swift playgrounds can use the on-screen keyboard, but if you have one, I do suggest using a external keyboard for faster workflow. Usually I’ll be working on a iPad Pro with Magic Keyboard. which will give you more clarity in seeing the code.

As we go through the series, I’ll show you how to use the on-screen keyboard in case you don’t have an external keyboard including some cool tricks for editing. In this first lesson we’ll be using that on-screen keyboard.

First Steps

With Playgrounds installed on your iPad, now. Let’s get your first app running.

Open the playgrounds app. On the bottom you’ll see More Playgrounds.

The first two choices there are App and playground.  We’ll be using the app for our purposes. Tap app. 

At the top of the screen, you’ll get an icon with the name My App. Tap on My App, and you are in the app’s code. At the upper left is a button that says app settings. If you don’t, tap the sidebar button to show it.

Tap that. That sets the appearance of your app in the browser.  Tap name and change it to Hello Pizza. Under placeholder choose, the binoculars, and a blue color accent. 

Tap done and you see in the corner you new icon.

Now to add some code.  Tap the ContentView tab at the top. For many of these lessons we’ll do our work here.  Tap the sidebar button to hide it. 

We’ll discuss all of this code as we go through the series, but for now I want to point you to line 9. Text is a function, a command that tells the iPad to do something. In this case, Text tells the iPad to display the phrase Hello World!. Text will display anything found within those quote marks. Quote marks and the characters it contains are called a string. You can change the string by typing in the quotes. Tap after the d to get a cursor. Change to

Text(“Hello, guitars!”)

You’ll notice the preview on the right change to our new message.

Try typing in another phrase. I’ll put this on the top. Tap after the curly brace for VStack{ press return for a new line and add Tex with the onscreen keyboard. You get two changes:

First, you get the red X with a message. This is a syntax error. It means Swift does not understand what you are trying to say. As you type , you’ll often see this. It should go away after you finish, but if it does not, it means you made a mistake.

The second part is the autocomplete. Playgrounds guesses what you want to type, and give you suggestions. You tap on the correct one and Autocomplete will type for you. On top, autocomplete highlights the best guess Text. There is also on the left a return symbol. Pressing return adds that to your code. press return. Text gets added to your code.

Then add the rest of this

Text(“Hello, Pizza!”)

You’ll find the pizza phrase on top of the globe. 

Now let’s change the globe. We have an Image function here. Some functions have different ways of working, and when they do there will be parameters inside the parentheses. This one has a systemName parameter. systemName wants a string of a system image, what Apple calls an SF Symbol. If you tap the + and the Star at top, you’ll find a list of SF symbols.

Tap outside the list to dismiss it. I want guitars so change the system name to guitars

Image(systemName: "guitars")

The symbol changes to guitars

While it may not be the next video game sensation, you’ve modified the application to be your first program. Basically that’s all there is to programming, putting down statements containing functions like Image and Text to tell a user what to do. Of course there’s a lot of other statements and you will need to store data, make decisions and do the same same thing multiple times. In this series we’ll learn that and a lot more about user interaction.

Stay tuned to more fun next week as we learn about constants, some math, and adding strings together.