Swiftui Tutorial for beginners - Getting Started

What is SwiftUI

Swiftui is a framework designed by apple to get more people coding. Before Swiftui was a thing, programmers worked with storyboards to create their applications with some coding in Xcode. With the development of Swiftui, designers worked with their code instead of storyboards to design their application.  This new way of designing apple applications allows the code to be much more readable and intuitive to work with. I want to make a series called Swiftui for beginners to help better understand working with Swiftui. This is the first part of that series.

Setting up a project

The first thing you should do is make sure you meet the requirements with out macOS and Xcode. At the time of this blog post the latest version available is Xcode 12. Found at https://developer.apple.com/xcode/. The  minimum macOS requirements to run Xcode 12 is Catalina, but if you want to run the Xcode 12.5 you need to be running Big Sur 11.

Once you have Xcode installed (it’s going to take a bit… it’s big), you are ready to create a new Swiftui project.

When you open up Xcode you are presented with the “Welcome to Xcode” screen. Select Create a new Xcode project from the list. The next screen will present you with a bunch of types of projects you can develop. For this quick tutorial select iOS at the top and App from the Application list.

Enter your projects name and select SwiftUI from the interface tap. That’s it your project is set up and ready to go.

What is MVVM

If you are new to programming, MVVM is a type of framework used by programmers. Think of a framework as a best practice when it comes to coding. It’s a system that allows programmers too easily organize a project and share with others. SwiftUI has adopted the MVVM framework which stands for Model, View, ViewModel. It’s already bundled into your project so you don’t have to do anything.

Model - Representation to your backend database or data logic of your application.

ViewModel - is the bridge between the view and your data layer. This represents the state of the view and acts as an abstraction of the view.

View - Is what the user interacts with on the screen.

This is just a quick overview…. I will write something else down the road giving more info about the MVVM framework.

Creating your first view

So something to think take note is that in SwiftUI anything can be a view. This is really helpful because like other programs you can make a view for a button, and then use that view other views.  Pretty sweet.

The first view you will work with is the Content View. This is by default the first view the application will call on. For some applications this might be the only view you need.In the ContentView you will see two structs. The first struct in ContentView is called body. In the body Struct is you will see some template boiler text that says Hello World. This text will be displayed on the screen when your application get built. In other words. Your main code goes here.

The second struct is called ContentView_Previews. This struct is for displaying the application in the preview canvas. The preview canvas is great because it will show your changes in real time so it really convenient when working on design.