Chapters
Chapters

Chapters

Hide chapters

iOS Apprentice

Getting Started with SwiftUI

Section 1: 8 chapters
Show chapters Hide chapters

Checklists

Section 2: 6 chapters
Show chapters Hide chapters

Getting Started with UIKit

Section 3: 11 chapters
Show chapters Hide chapters

My Locations

Section 4: 11 chapters
Show chapters Hide chapters

Store Search

Section 5: 13 chapters
Show chapters Hide chapters

8. The Final App
Written by Joey deVilla

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal subscription.

Unlock now

You might be thinking, “Okay, Bullseye is now done and I can move on to the next app!” If you were, I’m afraid that you’re in for some disappointment — there’s just a teensy bit more to do in the game.

“But the task list is complete!” you might say, and you’d be right. It’s just that software has a way of finding more things for you to do. In this chapter, we’ll add a few more touches to Bullseye to make it truly polished. One of these touches is absolutely necessary for apps to be published in the App Store. And finally, there’s the matter of trying out Bullseye on a real device instead of the Simulator.

Don’t worry; you’re almost done!

Here are the specific items covered in this chapter:

  • Including animation: Add some animation to make the start of a new round or game a bit more dynamic.
  • Adding an icon: Giving the app its own distinctive icon, replacing the default blank one.
  • Display name: Set the display name — the one users see on the home screen — for the app.
  • Running the app on a device: How to configure everything to run your app on an actual device.

Adding a title to the navigation bar

The NavigationView object that Bullseye uses to take the user from the main screen to the “About” screen and back adds a translucent navigation bar that runs across the top of the screen. This bar gives the user a visual hint that the app has more than one screen and also provides a place for navigation controls, such as the Back button that automatically appears on the “About” screen:

The 'About' screen, with the navigation bar displaying a 'Back' button
The 'About' screen, with the navigation bar displaying a 'Back' button

The navigation bar seems a little less useful on the main screen. There, it’s an empty translucent strip that gives the user the impression that the developer — that’s you! — didn’t quite finish working on the user interface:

The main screen with a blank navigation bar
The main screen with a blank navigation bar

We can solve this problem and do a little app marketing at the same time by putting a title into the navigation bar when it’s on the main screen. We can do this with a method available to any view object called navigationBarTitle(), which accepts a Text object to set text that appears in the center of the navigation bar.

The navigationBarTitle() method can be called from any view inside the NavigationView. To make it easy to see that the NavigationView is getting a title, we’ll call navigationBarTitle() from the first Spacer in the main screen’s NavigationView.

➤ Change the start of ContentView’s body variable to the following:

var body: some View {
  NavigationView {
    VStack {
      Spacer().navigationBarTitle("🎯 Bullseye 🎯")

➤ Run the app. You should see a title in the formerly blank navigation bar:

The main screen with a navigation bar with a title
The main screen with a navigation bar with a title

When you navigate away from a page with navigation bar title, the “Back” button on the destination page displays the name of the page you just left:

The 'About' screen with a 'Bullseye' back button in the navigation bar
The 'About' screen with a 'Bullseye' back button in the navigation bar

We can also add a navigation bar title to the “About” page. Once again, it’s a matter of calling the navigationBarTitle() method from any of its views. We’ll cakk it from the first Text element on that screen.

➤ Change the start of AboutView’s body variable to the following:

var body: some View {
  Group {
    VStack {
      Text("🎯 Bullseye 🎯")
        .modifier(AboutHeadingStyle())
        .navigationBarTitle("About Bullseye")

➤ Run the app and press the Info button. The “About” page will now have a title:

The 'About' screen with a navigation bar title
The 'About' screen with a navigation bar title

Including animation

There’s one last improvement that you can add to the app: Animation. iOS contains a technology called Core Animation that makes it very easy to add animation effects to your app’s views. With Core Animation, you can get several different kinds of animation with very little code. SwiftUI gives you access to Core Animation’s power and, with it, you can add subtle animations (with an emphasis on subtle!) that can make your app a delight to use.

Slider(value: $sliderValue, in: 1...100)
  .accentColor(Color.green)
  .animation(.easeOut)

Adding an icon

You’re almost done with the app, but there are still a few loose ends to tie up. You may have noticed that the app has a really boring white icon. That won’t do!

The AppIcon group in the asset catalog
Vra EvhEnev ykouz ur sto ulfid rewagah

Dragging the icon into the asset catalog
Tjasvatp sdo eqoh ojti lxa almoc cizusux

The full set of icons for the app
Sni xonw cig ay ewodl net jle avm

The icon on the Simulator's springboard
Qdo oxef ez bfi Najobekog'n lcgerbgoitl

Display name

The text below the app’s icon on the Home screen is its display name. It can be different from the project name, and it often has to be — there’s a limited amount of space under any app’s icon, and display names can be only one line long.

Changing the display name of the app
Djaftayj nku xabrzap hodi uc jza ijc

The display name of the app in Info.plist
Vgu xevqnuh yohe is bko ajh ow Elfe.gmihp

The bundle display name setting changes the name under the icon
Hde zergfe jeyxpis bohe gegqimq ccubpeb zqo ruce odxib sde usim

Running the app on a device

So far, you’ve run the app on the Simulator. That’s nice, but you probably didn’t take up learning iOS development simply to make apps for pretend devices. You want to make apps that run on real iPhones and iPads and even distribute them in the App Store! There’s hardly anything more satisfying than seeing an app that you made running on your own device — except showing off the fruits of your labor to other people!

Configuring your device for development

➤ Connect your iPhone, iPod touch or iPad to your Mac using a USB cable.

The Devices and Simulators window
Nto Nuliseh omq Fuqokafudj fipvox

Adding your developer account to Xcode

The next step is setting up your Apple ID with Xcode. It’s okay to use the same Apple ID that you’re already using with iTunes and your iPhone for hobby projects. However, if you run a business you might want to create a new Apple ID strictly for that purpose. Of course, if you’ve already registered for a paid Developer Program account, you should use that Apple ID.

The Accounts preferences
Gca Orgooqxk mvobevagqix

Xcode Account Type selection
Wfisa Akgaasf Lrqe ripihgeam

Adding your Apple ID to Xcode
Ozborj viis Uwzmo OF nu Rwoso

Entering your Apple ID password
Udpogujn yaib Odsvu UY qenvpidl

Code signing

➤ Go to the Project Settings screen for your app target. In the General tab go to the Signing & Capabilities section.

The Signing options in the Project Settings screen
Fba Tomxebs uynierl im plu Mfabosp Woyritjd tlziuc

Signing/team set up errors
Wuzhaqd/ruin rop ic ocxuhx

No devices registered
Lo balijil redupqumak

Running the app on your device

If everything goes smoothly, go back to Xcode’s main window and click on the dropdown in the toolbar to change where you will run the app. The name of your device should be in that list somewhere. It should look something like this:

Setting the active device
Xifvutz cfe uslogu gimixe

When things go wrong…

There are a few things that can go wrong when you try to put the app on your device, especially if you’ve never done this before, so don’t panic if you run into problems.

The device is not connected

Make sure your iPhone, iPod touch or iPad is connected to your Mac. The device must be listed in Xcode’s Devices window and there should not be a yellow warning icon.

The device does not trust you

You might get this warning:

Quick, call security!
Riiwj, vogz bolumags!

The device is locked

If your phone locks itself with a passcode after a few minutes, you might get this warning:

The app won't run if the device is locked
Ybi okr ces'r huk iw zwe hasegu oc hubquj

Signing certificates

If you’re curious about these certificates, then open the Preferences window and go to the Accounts tab. Select your account and click the Manage Certificates… button in the bottom-right corner.

The Manage Certificates panel
Nlo Neyume Rirnomafokox diteg

The provisioning profiles on your device
Qcu zriqetiodimn prulomaj ur hiof boqizi

The Code Signing settings
Snu Mehi Wezboll taykiglg

The end… or the beginning?

It’s been a bit of a journey to get to this point — if you’re new to programming, you’ve had to get a lot of new concepts into your head. I hope your brain didn’t explode! At the very least, you should have gotten some insight into what it takes to develop an app.

7. The New Look
9. List Views
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2023 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock now

Access this book

To highlight or take notes, you'll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99