Introduction

Xcode is the development environment used to create apps for iOS and OS X. Download and install the latest version of the Xcode App from the Mac App store. Also included in the Xcode developer toolset is Xcode IDE, iOS Simulator, and all of the tools and frameworks required for developing an iOS app.

Lesson Objectives
By the end of this lesson, you will be able to:
  1. List the steps in creating a new project.
  2. Create a new project using a single-view template.
  3. Identify the areas of the Xcode window including navigator pane, utility pane, editor pane, and debug area.
  4. Utilize Xcode to create iOS application using a template.
  5. Demonstrate building an app and use of the simulator.
  6. Use Interface Builder to create the user interface.
  7. Use Code Editor to declare instance variables and methods in the .h file and implement in the .m file.
  8. Differentiate content that goes in the .h file, the .m file and the storyboard file.
  9. Explain the use of Standard editor view, Assistant editor view and Organizer window.
  10. Identify the different navigation views including Navigator view, project navigator, symbol navigator, search navigator, issues navigator, debug navigator and breakpoint navigator, and log navigator.
  11. Identify the different inspectors including attribute inspector, identity inspector and connections inspector.
  12. Differentiate between the folders and files seen in Xcode versus the project's folders and files on the drive.
  13. Explain the purpose of outlets (IBOutlet) and actions (IBAction).
  14. Create an app that uses outlets and actions.
 

Learning Sequence
Required Readings

Read the following:

  • Lesson 3: Introduction to iOS Development and Xcode
Resources
Assignments
Complete the following:
  1. Practice Exercise – Howdy World 2
  2. Practice Exercise – Show Me
  3. Quiz 3
 

Key Terms

As you read your lesson, pay close attention to the key terms and phrases listed throughout the lesson. These terms and concepts are important to your understanding of the information provided in the lesson.

 

Instruction

The Xcode App

To download the latest version of Xcode, open the Mac App Store on the Mac computer. Do a search for Xcode. The app is free. Install the app on the Mac computer. Be patient during the installation of the App since it is a large file and may require additional time.

Xcode does get upgraded periodically. Look at the Versions Compare Table on Wikipedia for more information.

Creating a New Project

The Welcome to Xcode screen will appear after installing the development tool. To start a new project, select Create a new Xcode project. The welcome screen provides the following information: the version of Xcode in use, the ability to connect to a repository previously created, a direct link to Apple's developers' portal, and a list of recently worked on programs. If the welcome screen does not appear when Xcode is opened, a new project can be started by selecting File > New > Project from the Xcode menu.

Selecting a Template

After a new project is created, the Select Template screen appears. When selecting a template there is an option to develop Xcode for iOS or for OS X, which is the Mac operating system. This course focuses on development of iOS apps, therefore, the selection of iOS will show the appropriate templates. The most common template that will be used in this course is the Single View Application template. This template provides a nice starting point for app development. It provides a view controller to manage the view, and a storyboard or nib file that contains the view. However, more complex templates are available for use, including Master-Detail Application or Tabbed Application. For a 3-dimensional gaming app, the openGL Game template is advised. There is also an option to start an application from scratch with the Empty Application option.

Choosing Options

After a template is chosen, the Choose Options screen will appear.

  1. Enter the name of the project next to Product Name.
  2. Enter the name of the organization next to Organization Name.
  3. The company identifier is a flip of the web address being used. So, for example, a company with the web address MyCompany.com would have com.MyCompany as the company identifier. Apple uses the company identifier and the name of the product as a bundle identifier. Note that Apple will change spaces in the product name to dashes.
  4. The option Class Prefix will add a personal identifier to a code. This is not a recommended option while learning Xcode.
  5. The default option for Devices is Universal, which allows creation of interfaces for both iPhones and iPads. While learning Xcode, it is recommended to change the devices option to iPhone to avoid the complications of building two interfaces for both the iPhone and iPad.
  6. Choose where the project will be saved.

Saving Projects

Upon saving a project, where the project has been saved will be the location of the project and the associated files. The Source Control option at the bottom of the screen can be checked to create a local git repository for the current project. This option is only for developers planning on creating different versions of an application in order to keep a history of the previous work that has been done.

The tutorial videos used in this lesson will explain how to use and create a project in Xcode. The videos will take the viewer through the development of a simple coin toss app which simulates the flipping of a coin. The first video, Xcode Tutorial – Introduction to Xcode and iOS Development (5:54) discusses the strategy involved with developing an app.

Parts of an Xcode Window

Each component of the Xcode window is described below:

Target and Basic App Information

To locate basic application information, click on the name of the project at the top of the navigation area. Six different tabs appear. The General tab provides information such as the Bundled Identifier, the Version and Build, the targeted device and its operating system version, the name of the main storyboard, and the device orientations that can be used for the project, the status bar being used, the app icons used to start the program, launch images, and linked frameworks and libraries.

The other tabs will be covered in other lessons of this course.

ViewController

The ViewController has three parts that make up the interface interactivity that will appear in the app.

  1. .storyboard file: The user interface ViewContoller will be found in the .storyboard file containing the interface elements (buttons, views, etc.). Click on the main storyboard to see the ViewController. The ViewController comes with a single view that has no color or content. Objects can be dragged and dropped within the ViewController to create a scene for the app. To add another ViewController, click to Show the Object library in the Utility area. Drag another View Controller into the Editor Area.
  2. ViewController.h file: The ViewController header file in Objective-C used to declare instance variables, actions, and methods. The header file is denoted as an .h file.
  3. ViewController.m file: The ViewController implementation file in Objective-C used to write out and implement the code. The implementation file is denoted as an .m file.

The main.storyboard file is discussed in Xcode Tutorial 2 – Intro to Storyboards (6:45). View Controllers are added to create basic navigation.

Editor Views

There are two different editing views: the Standard editor view and the Assistant editor view. The user can toggle between the two views by going to View from the menu bar or using the icons in the Toolbar. Standard editor view provides one large pane to edit code. The Assistant editor view allows the user to view and edit panes of codes side by side. For example, the interface and a second section of code can be edited at the same time. This view is also handy for referencing other code.

Organizer

The Organizer can be accessed by selecting Window from the menu bar. Organizer deals with the hardware that is set up and to deals with repositories, or versions of the apps history. The organizer will show the devices that are associated with the app being created such as an iPhone or iPad. Specific devices can be set up if the developer is a paid developer or a member of the university agreement. A device may be added to perform device testing of the app.

Navigation Views

From the menu bar, select View > Navigators and select one of the following:

  1. Show Project Navigator: shows the files associated with the application. These files can be moved around without changing the underlying file structure. If files are added or deleted from an application, a prompt will appear to show that changes are being made to the file structure.
  2. Show Symbol Navigator: gives a flat list of all the different classes or symbols in the project.
  3. Show Find Navigator: provides the location of a class throughout the project code that has been entered in the search field.
  4. Show Issue Navigator: shows all errors or warnings that appear within the code. The full error warning can be read in the issues navigator tab.
  5. Show Test Navigator: creates, manages, and runs tests. The status of a test can also be reviewed.
  6. Show Debug Navigator: allows tracking of a variable throughout the functions in an app code. Selecting an item in the debug navigator allows information about the item to be displayed.
  7. Show Breakpoint Navigator: allows additions of a breakpoint within the application code. Breakpoints are used when debugging code, allowing the programmer to look at memory locations (variables) at specific points in the application. The added breakpoint will stop the program at a certain location. To add a breakpoint, simply click the vertical white bar between the navigation views and the editor pane at the desired location of the breakpoint. To remove drag the blue breakpoint arrow left.
  8. Show Log Navigator: aids in the development process by generating a report. The log navigator creates a task log that lists the operations that were performed by Xcode. With the task log, the source of an issue can be directly opened and corrected.

Interface Builder

In the interface builder there will either be a .storyboard or a .xib file to open. The .xib file is the only option for versions prior to iOS 5. A .storyboard file is used by default for all current versions. The right hand side of the screen will include two panes: an Inspector pane on the top and a Library pane on the bottom.

The Library pane includes the following options:

  1. File Template Library: Make a file template selection and drag to the project navigator.
  2. Code Snippet Library: Contains a set of code snippets that can be inserted into the app code. Simply drag and drop the code snippet that is desired; this speeds up app development time.
  3. Object Library: contains objects such as views, controls and menus to construct the apps user interface.
  4. Media Library: displays a list of media, including images and sounds. Additionally, sound can be assigned to a UIButton, for example, by dragging and dropping media onto the object.

The Inspector pane is contextual to whatever is selected and includes the following options:

  1. File Inspector: views and manages the file's name, type, path, and location in the project.
  2. Quick Help: provides the detail about a symbol including a short description of the symbol, how and where the symbol was declared, and the scope of the symbol.
  3. Identity Inspector: views and manages an object including its class name, information on accessibility, runtime attributes, and label.
  4. Attributes Inspector: allows interface object configuration as well as displaying the attributes associated with that object.
  5. Size Inspector: deals with the size of the object and how it behaves on the layout.
  6. Connections Inspector: provides views of the outlets as well as interface object actions. This inspector also allows a user to make a new connection or break a connection.

View the following videos:

Xcode Tutorial #3 – Storyboard: Labels and Buttons (3:50). This video demonstrates how to edit labels and buttons on the storyboard.

Xcode Tutorial 4 – Adding a Navigation Controller to your Storyboard (4:28). This video talks about using the Navigation Controller and adding buttons to create the navigation structure of the app.

Xcode Tutorial #5 – Image Views (3:02). This video adds images to the Xcode project by creating an Image View.

Xcode Tutorial #6 – Use an Image as a Button (1:47). This video demonstrates how to use an image as button.

iOS Simulator

The simulator allows the developer to test the build of the app during the development process. The simulator provides an option for selecting the device on which the simulation will be completed on including the version of the iOS. During simulation, major errors in the application being developed can surface.

The controls for iOS Simulator are in the upper left corner of Xcode. Select the device to test the app on. Select the Play button to build and then run the current scheme. Xcode will build the project and launch the most recent version of the app in the iOS Simulator.

iOS Simulator can also be launched without running an App. A developer may choose this approach to test how the app launches from the Home screen of a device. To launch iOS Simulator:

  1. Launch Xcode.
  2. Select Xcode > Open Developer Tool > iOS Simulator from the menu bar.

iOS Simulator displays the Home screen of the simulated device that was last used. All of the apps that are installed on the Home screen are available.

Summary

This lesson introduced the student to Xcode and its function. The steps of creating a project were discussed in detail as well as different options available for the app. An introduction of the Xcode interface was presented including the parts of the Xcode window, navigation views, and interface builder. The student should be able to navigate throughout Xcode in order to start a project.

Assignments

  1. Practice Exercise – Howdy World 2
  2. Practice Exercise – Show Me
  3. Quiz 3

Media Attributions

Have You Met The Objectives For This Lesson?

Creative Commons License

This work is created by the National Information Security and Geospatial Technologies Consortium (NISGTC), and except where otherwise noted, is licensed under the Creative Commons Attribution 3.0 Unported License.

Authoring Organization: Collin College
Written by: Original Author, Elizabeth Pannell; Edited Version, Susan Sands
Copyright © National Information Security, Geospatial Technologies Consortium (NISGTC)

Development was funded by the Department of Labor (DOL) Trade Adjustment Assistance Community College and Career Training (TAACCCT) Grant No. TC-22525-11-60-A-48; The National Information Security, Geospatial Technologies Consortium (NISGTC) is an entity of Collin College of Texas, Bellevue College of Washington, Bunker Hill Community College of Massachusetts, Del Mar College of Texas, Moraine Valley Community College of Illinois, Rio Salado College of Arizona, and Salt Lake Community College of Utah.

This workforce solution was funded by a grant awarded by the U.S. Department of Labor's Employment and Training Administration. The solution was created by the grantee and does not necessarily reflect the official position of the U.S. Department of Labor. The Department of Labor makes no guarantees, warranties or assurances of any kind, express or implied, with respect to such information, including any information on linked sites, and including, but not limited to accuracy of the information or its completeness, timeliness, usefulness, adequacy, continued availability or ownership.