Web Design Primer

Chapter 16 – Apps for iOS

Apps for the iPhone and iPad are written with Apple’s free Xcode program for macOS, which can be downloaded from the App Store. Programs need to be written on a Macintosh computer. At present they cannot be written on an iPhone, iPad, or Windows computer.

In 2017 Apple introduced its “Everyone Can Code” initiative, which includes educational material for colleges and universities, and a free iBook, Everyone Can Code: App Development with Swift.

Numerous app developers have also published videos of varying lengths on YouTube and Lynda.

Orientation to Xcode

The Xcode interface is complex and detailed. As many as eight windows and palettes can be displayed simultaneously, making a large-screen display almost essential for working efficiently with the program.

Screenshot of interface of Apple Xcode. The Storyboard with screen layout is shown at left and the ViewController with code at right.
Figure 16-1a. Interface of Apple Xcode, the macOS program for writing apps for the iPhone and iPad. The Storyboard with screen layout is shown at left and the ViewController with code at right. Screen shot(s) reprinted with permission from Apple Inc.

 

Figure 16-1b. Mockup of an app in Apple Xcode, the macOS program for writing apps for the iPhone and iPad. The Storyboard with screen layout is shown at left and the ViewController with code at right. Screen shot(s) reprinted with permission from Apple Inc.

 

An app consists of several files that contain the graphical interface and programming statements. The Storyboard (Figure 16-1) provides a simulation of an iOS screen, similar to the page on a page layout program. The Storyboard can contain various objects that allow for user interaction (Table 16-1). These are connected to programming statements in the ViewController, a separate file with lines of code that can be displayed next to the Storyboard. Elements in the Storyboard are connected to the ViewController by right-clicking and dragging a connection line. The connected elements are designated with a dot in a circle.

Xcode contains a built-in iOS simulator, called the Simulator (Figure 16-2), that can be set to look like any recent model of iPhone or iPad.

Table 16-1. Xcode Objects
Object Description
text field allows readers to enter text or numbers from the keyboard
label used for labeling parts of the screen, such as text fields and buttons, and for displaying information output by the program
button used to initiate actions that are programmed into ViewController functions
variables used in the ViewController to store data and numbers; include four types—string, integer, floating point, and double precision.
Xcode’s built-in Simulator can emulate any recent iPhone or iPad model on the Macintosh screen.
Figure 16-2. Xcode’s built-in Simulator can emulate any recent iPhone or iPad model on the Macintosh screen. Screen shot(s) reprinted with permission from Apple Inc.

Program Example

To provide an example of a program and the procedures used to create it, we will list the steps necessary to creating the “Fruit Salad” app shown in Figure 16-1, developed by Dr. Abhay Sharma for his Advanced Technology class at Ryerson University. This program accepts numerical input from readers, who type in the number of apples and oranges respectively into text fields. When readers touch the addition button, a function reads the numbers into variables, calculates the total number of fruits, and displays the total via a label.

Design the Interface

  1. First we recommend designing the app’s interface by sketching it on paper or using a free mockup site such as Balsamiq.
  2. After designing the interface, make a list of all the text fields, labels, and buttons that you will need. Each will require a unique name in the program. Thinking of names of more than a few object variables can be confusing, especially when they need to be paired with data variables.
  3. In the list of objects, include the variables that you plan to use to store numbers and text for calculation or output.

Place Objects on the Storyboard

  1. Place objects on the Storyboard, including labels for the app title, field labels, and output fields where numbers and text will be displayed; text fields for user input and buttons to initiate actions.
  2. Right-click and connect all labels by drawing a line from the Storyboard to the ViewController. Assign variable names to all labels and text fields, and function names to all buttons.
  3. In the ViewController, declare variables that will be used to hold data entered into text fields and calculations made by functions. Variables can be one of four types—string, integer, floating point, or double precision (Table 16-2). Each variable needs to have its type declared and be set to zero or blank.
Table 16-2. Variable Types in Xcode
Variable Type Abbreviation Description
String String text and numbers
Integer Int whole numbers (no decimal)
Floating Point Float numbers with decimal places, 32-bit accuracy
Double Precision Double numbers requiring high precision, 64-bit accuracy (usually not necessary for most apps)

Write Code

  1. Inside the function, write code to store the text field numbers entered by readers into variables of type “String.” Note that the text fields are converted to integer variables by adding the type Int to the front of the statement. Also both variables need to be “unwrapped” using an exclamation point.
     numberOfApples = Int(applesTextField.text!)!
    
     numberOfOranges = Int(orangesTextField.text!)!
  2. Write a statement to add the numbers of apples and oranges:
     numberOfFruits = numberOfApples + numberOfOranges
  3. Write a statement to output the number of fruits to the label field:
     answerLabel.text = String(numberOfFruits)

    Again the variable type must be converted from integer to string before being written to a label because labels can contain only string variables.

Debug and Test

  1. Xcode has a live debugger. If the program finds errors in the code, it shows a red stop sign icon with an explanation. All errors must be fixed before the program can run.
  2. Hit the Run button in the upper left corner of the screen to launch the Simulator and run the program. If the program has errors that have not been detected by the live debugger, the program could crash. A common source of crashes is multiple connections from one Storyboard object to the ViewController. In this case check the Connections Inspector (right-facing arrow at the top right of the screen) to make sure each object has only one connection.

Create an Icon

Icons for iOS apps can be created in Adobe Illustrator, Photoshop, and similar programs and saved in PNG format. The authors suggest preparing a document at 1024×1024px, the maximum resolution required.

An icon design should be very simple and not include a lot of text, which could be difficult to read on a small icon. Some icons consist only of a logo or one or a few letters.

An app requires several images of various resolutions for different Apple devices, screen sizes, and locations. Numerous “app icon maker” sites exist that will accept a 1024×1024-px PNG file and create the various resolutions required.

Install

  1. Programmers who sign up for the free version of the Apple Developer Program can install apps on an iPhone or iPad connected to the Macintosh computer via a USB cable. However the app will expire after 7 days.
  2. Users who sign up for the paid version of the developer program can install apps as above with no expiration date and also distribute them to beta testers.

Making a Web Portal App

Many apps are actually “web portals” that lead to a web site, where users can get information, search, buy things, and perform other tasks. A web portal is easy to make if you have an existing web site that is styled using responsive design and is easy to read on a smart phone. Requirements for a web portal app include:

  • The author should have access to a web site with responsive design.
  • The web site should accept secure login (https).
  • A web portal can be written with only two lines of code. (Readers are referred to Apple documentation or one of the many available videos for the most up-to-date code.)
  • In the info.plist file, the programmer should set the App Transport Security Settings > Allow Arbitrary Loads in Web Content (Boolean variable) to “YES.”

For Further Information

Readers are referred to the many resources available from the Apple Developer Program, Apple’s free iBook App Development with Swift, and developers who post videos on YouTube.

 

License

Icon for the Creative Commons Attribution 4.0 International License

Web Design Primer Copyright © 2018 by Richard Adams and Ahmed Sagarwala is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.