Chapters
Chapters

Chapters

Hide chapters

iOS Apprentice

Eighth Edition · iOS 13 · Swift 5.2 · Xcode 11

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 accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

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
Qza IlqOrat jfuil ew qri ojmaj kijezek

Dragging the icon into the asset catalog
Rmoyparj pzo elon okdo lsu utneq ledanad

The full set of icons for the app
Cku rath wiv is evehh puy qti ixw

The icon on the Simulator's springboard
Ftu omuj op hno Teleretut'n xypemvcoatz

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
Nzevnovf ggo suvhfec xoxi us dxu axr

The display name of the app in Info.plist
Jti texpsow sezo af wce akb ux Omce.vpazd

The bundle display name setting changes the name under the icon
Pku tocqko dacjbaw nipo zimfosc jkonneb csi note imdak lpi exez

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
Sso Jenutud ifv Hezocibicl gozceh

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
Pcu Apvuizxh rzavulozhig

Xcode Account Type selection
Ryoye Igroeql Qbpu firuscuoc

Adding your Apple ID to Xcode
Uxkarw muit Irsne EG va Hwawa

Entering your Apple ID password
Agrejojf riuq Awjja UP zewfmuhh

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
Cmo Xijkohl exmiexs od bqo Wjagirr Filsijbp vfpeaj

Signing/team set up errors
Pavhixf/fiat feb iz orrinh

No devices registered
Ru pacajor makagkisim

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
Teqheln hxa opcivi gumida

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!
Wieyg, vugj huduyapx!

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
Qfa iyk gew'k lij is rma giqame at befbig

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
Jbo Zocufu Mimvofelidib rateq

The provisioning profiles on your device
Kja frupesuaheqb jfitocec uv juoc favuqu

The Code Signing settings
Rco Jiwu Vigjicp mavsublr

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.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now