Today marks the start of the second project building of what I learned last week. This week goes over Building an application called Guess the Flag, a small game where the player would display the country’s name and select the respective flag. Additionally, it involves creating a scorecard and a reset button. However, the main focus is to learn how to manage assets. (hint: If you know how to manage assets in UIKit, you also know how it works in SwiftUI.)

So in SwiftUI, the interface is based on objects that you create. To group these items, you would use a stack. There are multiple types of a stack, HStack, VStack, and ZStack each respectively handle horizontal, vertical, and depth.

We will use multiple stacks through this project, and it will become standard in later projects. Another part of today was learning how you use colors in SwiftUI, and Colors are effortless!

 ZStack {
        Color.green
        Text("Your content")
    }

is all you need. by wrapping two items in the ZStack you can add color to the entire screen. SwiftUI has support for displaying gradients. The last major takeaway from today is how SwiftUI handles showing alert messages. You need to add a state just before the body like:

@State private var showingAlert = false

Then add an alert to the view, using code like this:

.alert(isPresented: $showingAlert) {
            Alert(title: Text("Hello World!"), message: Text("SwiftUI Is Rad!"), dismissButton: .default(Text("OK")))
        }

Today we started creating the layout for the game. Like I previously mentioned, SwiftUI requires items to be nested within a Stack. Today, we added the buttons and the two Text items to display. Additionally, we also added the alert to display the current score of the game.

The last thing we did in today’s lesson was to style the buttons, by adding an overlay() and added a shadow(). The resulting code looks like:

Image(self.countries[number])
    .renderingMode(.original)
    .clipShape(Capsule())
    .overlay(Capsule().stroke(Color.black, lineWidth: 1))
    .shadow(color: .black, radius: 2)

Today is a wrap on project two. There were some challenges assigned to finish out the project. Then finally a quiz to check my knowledge. The Challenges today are:

• Add an @State property to store the user’s score, modify it when they get an answer right or wrong, then display it in the alert.
• Show the player’s current score in a label directly below the flags.
• When someone chooses the wrong flag, tell them their mistake in your alert message – something like “Wrong! That’s the flag of France,” for example.

Results are 11/12 Closing out today, I took the 12 question review. This time I scored better than the last time at 91%, with 11/12 questions correct! It felt like I had studied for the test and didn’t feel nervous at all.

With a good cup of coffee in hand, I am ready to start today’s lesson. Today we begin covering some fundamental components of SwiftUI: Views and Modifiers.

SwiftUI uses some View a lot. This is a strong reason why SwiftUI is typically faster than using UIKit or AppKit. In UIKit, all views inherit from UIView that has proprieties donated from parent views and grandparent views. Another main point of SwiftUI is you create a functional design to create simple views. Later today, we will dive further into this topic.

After understanding why SwiftUI has great performance, we learned the importance of modifiers having an order.

Text("Hello World")     
.background(Color.red)
.frame(width: 200, height: 200)

This you would think this would add a background color to the frame, right? No, it applies the color to the text, not the .frame, to apply the color to the 200x200 area the code would look like this

Text("Hello World")
.frame(width: 200, height: 200)     
.background(Color.red)

In SwiftUI Every modifier generates an item, and that item can be modified. In the program content today Paul shows a code snippet of a button printing using type(of:) shwoing you the hierarchy of generics and modified content.

SwiftUI uses some View because of the dependency on Swift’s opaque return types. Opaque return types have strong benefits: 1. we will always be returning some view. 2.Even though we don’t know what view type is going back, the compiler does.

So last week, I had mentioned that SwiftUI has a limitation regarding static data. Today we learn why. Most stacks and view protocols create a hidden TupleView containing the desired amount of views. Good to know that there are versions of TupleView that track up to ten different kinds of content.

Consolidation Day Today is one of the first consolidation days of the program. Today’s goal is to review what I have learned and review items that I feel I could spend more time learning. So I continued to study the previous lessons before starting today’s challenge.

The challenge for today is to create and to play the classic game rock, paper, scissors. This elementary project uses @State to observe and change the UI elements. This project’s logic is very similar to the Flag game. However, there is the addition of the computer will randomly select one of the three outputs.

Today we embarked on our new project, Starting with learning how UI elements like Steppers and Date pickers work. Additionally, The complexity that is using Dates as a programmer. Luckily Apple provides a seamless way of handling date data within the Foundation framework, embedded in SwiftUI and Swift. Steppers are effortless ways of adding a more targeted incremental number improvement. To implement the Stepper, we need to add this before the body block:

@State private var sleepAmount = 7.0

Additionally, using this code to add the stepper into the view

Stepper(value: $sleepAmount) {
    Text("\(sleepAmount) hours")
}

iOS Date pickers have experienced a significant shift in design with iOS 14 and now look more like a button and display a view to select the desired date, time, or both. Fortunately, you can force SwiftUI to display the old style by adding this property to modify the date picker.

.datePickerStyle(WheelDatePickerStyle())

First we would create an @State property like this:

@State private var wakeUp = Date()

And we will add the date picker using this simple code:

DatePicker("Enter a date", selection: $wakeUp)

The last topic of today is getting started with CoreML and using the CreateML application. CreateML is an application that comes from Apple that makes it effortless to create a Machine learning module. This project provides the input data to be used to generate the model. We will go further into Machine Learning later this week on the next project.

We are at the end of the second week. Day by day and I don’t feel the strong need to look up every step. Now when the project directs me to do something, I am trying to solve it without looking up resources. With significant changes in my work schedule, it’s been more of a challenge, but I am finding small increments of time to fit in a 15-20 minute session to learn something new. I can’t wait to have more substantial proficiency in both Swift, And SwiftUI!