Some of you may wonder why I bothered to criticize 🍎 after all they contributed. Could I show the relationship between an App, Scene & View better? I don’t know. But I can try. Let’s begin:

I had a quick fumble after believing I saw something wild, such as:

import SwiftUI

@main
struct SceneStartApp: App {
    var body: some Scene {
        WindowGroup {
            Text("Hello World")
        }
    }
}

which if you yourself try this will learn that this does not work 😅

Let’s conclude there are no ‘bounds’ for this Text View to be in. Since we cannot define where on the device to show our Text view, the app will crash.

Let us add bounds in our SceneStartApp, and change our Text into a Circle().

import SwiftUI

@main
struct SceneStartApp: App {
    var body: some Scene {
        WindowGroup {
            HStack {
                Circle()
                Circle()
                Circle()
            }
        }
    }
}

Changing the HStack also gave me new alignments, below are VStack & ZStack respectively.

The code for my circles never changed. The ZStack aligns our three circles on top so the user always looks down on them- or the orientation would be deep “inside” the phone, like marbles in the pocket.

One thing we are missing when we do this, is the preview window. I had to run the app 3 times to view what was created, which is not ideal. Let us now remove the three Circle() lines, put ‘ContentView()’ back and add below that line:

        ContentView()
            .onAppear(perform: {
                Task {
                    let urlString = "https://www.apple.com"
                    guard let url = URL(string: urlString) else { return }
                    let urlRequest = URLRequest(url: url)
                    let (data, response) = try await URLSession.shared.data(for: urlRequest)
                    print(data)
                    print(response)
                }
            })

The line right after ‘ContentView()’ is called a modifier, the contents of which will be run when our ContentView() is ready to appear. Inside the modifier, we create a Task, and inside of this we are creating a url String. We are going to take the String and make it into a URL object. The URL object next becomes a URL Request object. The URLRequest object is then passed to URLSession so we can receive the contents of that request. Finally, our data which is returned can be printed, and the response can be printed further below. The results of the print statements show up when we run the project:

189053 bytes
<NSHTTPURLResponse: 0x600000235300> { URL: https://www.apple.com/ } { Status Code: 200, Headers {
    "Cache-Control" =     (
        "max-age=0"
    );
    "Content-Encoding" =     (
        gzip
    );
    "Content-Length" =     (
        40058
    );
    "Content-Type" =     (
        "text/html; charset=utf-8"
    );
    Date =     (
        "Fri, 08 Nov 2024 20:20:38 GMT"
    );
    Expires =     (
        "Fri, 08 Nov 2024 20:20:38 GMT"
    );
    Server =     (
        Apple
    );
    "Set-Cookie" =     (
        "geo=US; path=/; domain=.apple.com"
    );
    "Strict-Transport-Security" =     (
        "max-age=31536000; includeSubdomains; preload"
    );
    Vary =     (
        "Accept-Encoding"
    );
    "content-security-policy" =     (
        "default-src 'self' blob: data: *.akamaized.net *.apple.com *.apple-mapkit.com *.cdn-apple.com *.organicfruitapps.com; child-src blob: mailto: embed.music.apple.com embed.podcasts.apple.com https://recyclingprogram.apple.com swdlp.apple.com www.apple.com www.instagram.com platform.twitter.com www.youtube-nocookie.com; img-src 'unsafe-inline' blob: data: *.apple.com *.apple-mapkit.com *.cdn-apple.com *.mzstatic.com; script-src 'unsafe-inline' 'unsafe-eval' blob: *.apple.com *.apple-mapkit.com www.instagram.com platform.twitter.com; style-src 'unsafe-inline' *.apple.com"
    );
    "referrer-policy" =     (
        "no-referrer-when-downgrade"
    );
    "x-cache" =     (
        "TCP_MEM_HIT from a23-196-2-157.deploy.akamaitechnologies.com (AkamaiGHost/11.7.0.1-2fb65fbfa7ad4f98bbb706cf20e2b5f6) (-)"
    );
    "x-content-type-options" =     (
        nosniff
    );
    "x-frame-options" =     (
        SAMEORIGIN
    );
    "x-xss-protection" =     (
        "1; mode=block"
    );
} }

All this happens when we are loading our ContentView, the system will make our Task go and hit apple.com, and return some information.

It felt like I blinked & now the project is almost done!
In this lesson, we add a watchOS target to the app. I add mine to Spotz
I had some hiccups here.
Section 1 was fine, where we add the target
Section 2, where we link the files from iOS to watchOS, I had an error.
The Embedded Binary Certificate for the watch app was not in sync with the iOS app, as a result Xcode refused to build. Following the suggestion from the linked StackOverflow page helped me solve it.
The next issue was one of my own design 😅
‘Command CompileAssetCatalog failed with a nonzero exit code’
I had imported an image asset too large to be the icon (App icons should only be 1024×1024, this one was 1200×1200). In the past I don’t ever remember this being an issue, but lately Xcode is evolving and things that used to work before do not work today. Fixed the icon size, pressed CTRL-B & all went green.

Read up on how Label() & Text() differ. With Text, we just post that- text. A Label is a bit more robust as it will also post text, and also give an image. That’s pretty 😎

My challenge with the images from earlier came back to bite me again. The images did not render correctly, so I added a .scaleEffect modifier that took CGSize as a parameter. I set the CGSize to 0.7 width & height, that made the final product look better.

When I started updating beyond this screen, it looked worse 😅
I tried tinkering with .scaleEffect but the result made the image smaller, not the actual frame.
I dove down to CircleImage and reduced the frame from 250 to 200. It is not everything I want but it is better than earlier.

Moving forward, I had more challenges with sizing in this lesson, design is not my strength 😅
My solution is to shrink the frame, or wrap it in a ScrollView, and keep it moving 😤

The last part, they had us mock User Notification to go through the watch simulator. That was inspiring- in a way getting my feet wet in a framework that has been described to me as ‘challenging’. Well today I tinkered with it and received a good result.