Intro to Making SwiftUI Apps with Swift Playgrounds
The Swift Playgrounds app lets you create SwiftUI apps if you are using Swift Playgrounds 4 on an iPad running iOS 15 and above or a Mac running macOS 12.4 and above. In this article you’ll learn the basics of Swift Playgrounds. After reading this article you’ll be able to follow SwiftUI tutorials using Swift Playgrounds.
The screenshots in this article are from the Mac version of Swift Playgrounds. But the iOS and Mac versions have a similar look.
Create an App Playground
When you launch Swift Playgrounds, a window opens for you to either create a playground or open an existing playground.
Tap or click App from the More Playgrounds section to create an app playground. The app gives a generic name for the playground. Tap or click on the name to change the app name.
The Playground Window
When you open the playground, the playground window opens.
The playground window has the following sections:
- Sidebar
- Editor
- Console
- Preview
The sidebar shows a list of files in the playground and a control to change the app settings.
The editor is where you write code.
The console shows output and error messages. If your code uses print statements, the text in the print statements appears in the console. The console is hidden initially. Tap or click the small button at the bottom of the window to toggle showing and hiding the console.
The preview shows how the interface is going to look when you run the app.
Changing App Settings
Tap or click the App Settings item in the sidebar to change the app settings.
Use the Name text field to change the name of the app.
Choose a color for the app icon from the Accent Color color picker. Use the view below the color picker to choose an image for the app icon.
Use the Capabilities control to add app capabilities like giving the app access to things like the device’s camera, the user’s contacts, and the user’s media library.
The Mac version has a button to install the app in the Applications folder.
Editing Source Code
Select a Swift file from the sidebar to open it in the editor and start coding. When you create an app playground Swift Playgrounds creates two files: a file for the app and a file for the content view. The app file creates a window whose main view is the content view. The content view file has the code for the views and controls inside the content view. The preview shows what the content view looks like.
Clicking the Add button at the top of the window opens a popover that shows a list of SwiftUI controls and items you can add to your code.
SwiftUI has many items you can add so they’re broken up into four groups that have buttons below the search field. Selecting an item from the popover inserts code for that item in the editor.
Adding Files to the Playground
Virtually every app requires more files than the two source code files provided when you create an app playground. Swift Playgrounds lets you add the following items to a playground:
- New Swift files
- Existing files
- Folders to group files in the sidebar
- Swift packages that contain code libraries
Compared to Xcode, Swift Playgrounds has limited options for adding files. If you’re following a SwiftUI tutorial that uses Xcode, you’ll run into problems if the tutorial adds new files that aren’t Swift files.
The iOS version has an Add Document icon at the top of the sidebar. Tap the icon and choose what you want to add from the menu that opens.
Use the File menu in the Mac version to add files to the playground. Choose File > New Source File to create a new Swift file. Choose File > Add File to add an existing file to the playground. Choose File > New Folder to add a folder to the sidebar. Choose File > Add Package to add a Swift package to the playground.
Running the App
Tap or click the Run (Play) button at the top of the window to build and run the app. A newly created app playground should build with no errors.
If there are errors in your code, the app won’t build and run. There will be a small button with a red X for any error in the code. Tap or click the button to see the error message.
Reading Developer Documentation
The iOS version has a button with a circle and three dots inside it. Tap that button and choose Documentation to read Apple’s developer documentation.
Choose Help > Show Developer Documentation in the Mac version to read Apple’s developer documentation.
Where to go from here?
Check out the following WWDC video: