{"id":2894,"date":"2020-08-06T15:03:45","date_gmt":"2020-08-06T15:03:45","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2894"},"modified":"2026-04-23T21:20:49","modified_gmt":"2026-04-23T21:20:49","slug":"lesson-one","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/lesson-one\/","title":{"rendered":"Lesson One"},"content":{"rendered":"

Many exercises in this course are sourced from various other resources, but this one is homemade with love to get us started with a simple activity that showcases how easy it can be to get an app (albeit a basic one) up and running. In this exercise you will create this basic app which will contain a series of links that lead to screens of different colors. We won’t really get into detailed explanations of what is actually going on in this lesson (that will come with time young Jedi). Rather, its core purpose is to get you loosely aquatinted with Xcode and the general dev process. But don’t worry. The other lessons that come after this one will cover all of these topics and much, much more. So get hype, your journey to becoming an App Dev wizard begins here.?<\/p>

Set Up Your Project<\/h2>
  1. Open Xcode (Finder > Applications). If you’re working on your own computer, make sure that you have the most up-to-date version<\/a>. If you have an earlier version, please update. If you are having a bad day, you may also need to upgrade your operating system before you can use the latest version of Xcode. Note:<\/strong> You’re not required to have any Beta version of Xcode at this point.<\/li>
  2. Now create a new project by clicking on “Create New File” in the popup or by navigating to File > New > Project.

    \"Xcode

    \"Xcode<\/figure><\/li>
  3. Make sure iOS <\/strong>is selected, select App, and click the Next button.

    \"Xcode

    <\/li>
  4. As shown below, name your project (Lesson One suffices). Then provide the following:
    1. An Organization Identifier. If you have a website, you can base the identifier on your domain name. If not, choose anything you wish (like your name). However, you do need to follow a certain naming convention. I know it feels odd, but your Identifier should start with the suffix first, as in com.google (rather than google.com).<\/li>
    2. To create a team, you will login to your Apple account and select the Team with your name. Note:<\/strong> You don’t have to assign a Team unless you’re putting the app on an iPhone. So, the Team is optional at this point. <\/li>
    3. Make sure the Interface is SwiftUI and the language is Swift. You can leave storage as None.<\/li><\/ol><\/li>
    4. Click Next and save it in the desired location. File created!

      \"New

      <\/li><\/ol>

      Get Familiar with Xcode<\/h2>
      1. At this point you should be looking at the ContentView file on the left and a preview pane on the right.\u00a0 If for some reason you are not seeing the Project Navigator (side panel containing your project files including ContentView), you can reveal it by clicking View > Navigators > Project as shown in the screenshot below.

        \"Xcode

        When everything is set up properly, your Xcode display should look similar to the one below.

        \"Xcode

        <\/p><\/figure><\/li>

      2. The preview of your place filler app should appear on the right second after a few seconds. If you don’t see anything in the preview on the right, click the Resume button at the top of the content pane. The words “Hello World” should display in a background that looks like a phone.<\/li><\/ol>

        Create Your Color Views<\/h2>
        1. Now, it’s time to create some new views that we can link to from the first view. Select File, New, File from Template (or use the keyboard shortcut Command + N), make sure that SwiftUI View<\/strong> is highlighted and click Next.

          \"Xcode

          <\/li>
        2. Name the file “one”, save it, and create three more named two, three, and four. Fun fact: If you look at the file inside your project folder, it will be titled one.swift, two.swift, etc, as it appends “.swift” on the file automatically.<\/li>
        3. Open one.swift (click “one” in the project nav if it’s not already selected) and add a ZStack around the Hello World text with its background color set to purple. Later on, you will learn a LOT about ZStacks; for now, just put one to work by modifying the code to look like the following:

          \"SwiftUI<\/figure>
          <\/li>
        4. Change the text from Hello World to Purple.

          \"Text<\/figure>

          <\/p><\/li>

        5. Repeat the process for views two, three, and four, using a different color for each one.<\/li><\/ol>

          Add Navigation Links<\/h2>
          1. Return to ContentView.swift and, using the screen capture as a guide, create a link to one.swift (the one with the purple background). To do this, replace everything in the VStack brackets (Image + Text) with the NavigationLink as seen below. Notice that the destination is set to one.swift (without “.swift” written out) and the link text is “Purple,” as that is the page we are linking to.

            \"SwiftUI
            <\/li>
          2. One more thing. Before your link will actually work, you have to wrap a Navigation View around it. Like this:

            \"SwiftUI

            <\/p><\/li><\/ol>

            Test and Polish<\/h2>
            1. If you don’t see the live preview already, click the live preview \"Blue button at bottom left of your preview pane. As soon as you are able to (live preview takes a few moments to crank up), test your link. Hopefully the purple screen appears! Make sure your simulator is set for an iOS device via the dropdown below the preview (see pic below).

              \"Xcode

              <\/li>
            2. Did it work? Great! Now, it’s time to add a new link. Before we add anything new, however, we have to add another ‘container’ or in SwiftUI terms, ‘stack.’
              There are three types of stacks: Vertical Stacks (VStack), Horizontal Stacks (HStack), and the ZStack that you recently used. In this case we are going with the VStack. You could ‘hand code’ the VStack, but we are going to create it the easy way. \"Xcode
              Control + click<\/strong> (or right click if available) on the word NavigationLink and select Embed in VStack.<\/li>
            3. That’s it! Your new VStack should contain the NavigationLink as shown below.
              \"SwiftUI

              <\/li>
            4. Add a new NavigationLink to two.swift below the first one. I suggest that you copy, paste and modify the first one. When you are done, your code should look like this (although you may have a color other than yellow).
              \"SwiftUI
              <\/li>
            5. Once that works, add the additional links to th\"Colorree and four.

              Congrats! At this point you should have a functional, and funky, app that connects all five views and is easily navigable. But wouldn’t it be cool if your links were larger and matched the color of the view they link to like the image at right?\u00a0 Fortunately that goal is easily attainable! Simply click on the word Text, as in Text(“Purple”) and use the Attribute Inspector (Don’t see it? View > Inspectors > Attributes) to set the size to Large Title (see screenshot below). Then set the font color to whatever you choose. Repeat the process three more times and you are done!

              <\/p>\"Xcode
              <\/li>

            6. But wait! Wouldn’t it be nice if those links were aligned to the left? Easy. Simply click on VStack and use the attribute inspector at right to re-align everything that is inside of the VStack.

              \"Xcode
              <\/li>
            7. Still confused? Your final NavigationView code should look like this:

              VStack {\n    NavigationView{\n        VStack(alignment: .leading) {\n            NavigationLink(destination: one()){\n                Text(\"Purple\")\n                    .font(.largeTitle)\n                    .foregroundColor(Color.purple)\n            }\n            NavigationLink(destination: two()){\n                Text(\"Yellow\")\n                    .font(.largeTitle)\n                    .foregroundStyle(.yellow)\n            }\n            NavigationLink(destination: three()){\n                Text(\"Red\")\n                    .font(.largeTitle)\n                    .foregroundStyle(.red)\n            }\n            NavigationLink(destination: four()){\n                Text(\"Green\")\n                    .font(.largeTitle)\n                    .foregroundStyle(.green)\n            }\n        }\n    }\n}<\/code><\/pre>
              <\/p><\/li><\/ol>
              Going Further (Optional)<\/h2>
              1. Have a little extra time? Let’s insert your face in this app! Find an image of you.
                1. make sure it is jpg format<\/li>
                2. size it to approximately 800px width and name it me.jpg<\/li>
                3. via Project Navigator, click on Assets, then drag and drop your photo into Xcode.
                  \"Xcode
                  <\/p><\/li>
                4. Create yet one more SwiftUI file named five and add the image to it like this: Image(“me”)<\/strong><\/strong>

                  struct five: View {\n    var body: some View {\n        Image(\"me\")\n    }\n}<\/code><\/pre><\/li>
                5. Link that one up as well.<\/li><\/ol><\/li>
                6. Still have time? Let’s connect your phone to your computer via lightning or USBC cable (depending on iPhone model).<\/li>
                7. Follow these instructions to put the app on your iPhone<\/a>. If you don’t have an iPhone, just use a simulator.<\/li><\/ol>","protected":false},"excerpt":{"rendered":"
                  Many exercises in this course are sourced from various other resources, but this one is homemade with love to get us started with a simple activity that showcases how easy it can be to get an app (albeit a basic one) up and running. In this exercise you will create this basic app which will … Continue reading Lesson One<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=2894"}],"version-history":[{"count":47,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2894\/revisions"}],"predecessor-version":[{"id":4272,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2894\/revisions\/4272"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}