Apps: Beginner's Guide For App Programming, App Development, App Design (2015)

Chapter 5. Sample iOS App Development

The number of Apple device users also posed a demand for newer and better iOS apps. Just like Android app development, iOS app development becomes easier with Swift programming language and Xcode, the brand's own integrated development environment (IDE).

One of the sample app development guide provided by Apple developers is a food-tracking app that allows multiple activities like adding or removing meals on the list. The entire app development begins with downloading all needed resources and tools.

Prepare the Environment

Xcode is the platform complete with all features needed for designing, creating and debugging developed apps. The platform also comes with iOS SDK tools ranging from compilers, frameworks and other tools that guarantee stable app development.

Run the Mac App Store installed with the operating system, usually found in the Dock. Type Xcode in the search field then hit the Return key. The platform should appear as the first search result. Click the result then install the platform by following its included instruction. The following page will ask you for Apple ID. Type your ID and password to complete the download. The downloaded file should be found in the /Applications directory.

Aside from Xcode, users will also benefit from downloading Swift playground. Playground is a type of file that allows codes to interact with the changes you made and be able to see the outcome immediately. Seeing the outcome straightaway speeds up the learning curve in understanding essential Swift concepts. Apple threw in a sample playground on its website for developers to use with Xcode for testing.

Being an introduction to app development, Swift essential codes won't be discussed in detail in this book. But to give you an idea, the following are some concepts encountered on the actual coding process.

· Constant. Constant refers to unchangeable value after declaration. Use the syntax let to declare a constant.

· Variable. Variable is a changeable value in a code and declared using var.

· String interpolation. This process is the easier way of including values needed in a string. It's coded using backslash before the parenthesis indicating the string.

· Optionals. An optional refers to a possibly missing value in a code. A value is marked as an option by placing a question mark after the syntax.

· Array. An array refers to the data type that tracks a collection of items according to their order. Arrays are marked using brackets.

· Conditional statements. A conditional statement is a type of control flow statement using syntaxes like if and switch. This statement checks the statement first to see if the declared condition is true before executing the code.

· Loops. A loop is another control flow statement that repeats code execution multiple times. Its syntaxes include while and for-in.

· If statement. An if statement will check and verify if a declared condition is true. If the condition is true, the statement will generate the outcome according to the code.

· Else. An else statement is a clause added to if statement that promotes more complex control flow. Else indicates what the code should do next if the conditional statement turns out to be false.

· Switch. A switch statement works with all data types and supports numerous comparison operations. It switches the value of a declared string.

· Function. A function refers to a small code that can be used multiple times in a program. It's coded using func syntax.

· Class. A class refers to a blueprint-like component for an object that provides additional information about their properties.

· Object. An object refers to a class instance declared in a code.

· Enumerations. Enumerations describe or declare a common type for clusters with related values. Coded as enum.

· Structures. A structure is a component that supports an array of classes, initializers and other vital code components. Coded as struct.

· Protocol. A protocol describes a blueprint or framework of properties, methods and functions supporting a specific functionality or feature. Represented by protocol syntax.

· Cocoa Touch. Cocoa Touch is a collection of Apple frameworks utilized with iOS app development.

Developing a Basic User Interface

Creating a simple user interface for the food-tracking app sample is easy with Xcode. Aside from learning codes the easy way, users will also see the outcome with the Simulator, another platform that gives users a preview of how the app will look like on actual devices.

Begin by creating the project. Launch Xcode from its download directory. The program will load the welcome screen. Choose Create a new Xcode project then choose Application where you can choose your template. As a beginner, select Single View Application. This view means the app will have a single-page interface, the simplest layout option in the platform. Hit Next after choosing the layout.

The next dialog box is similar to Android Studio where you'll fill out project details. Details asked are the following:

· Product Name. Fill out this field with your preferred app name.

· Organization Name. This refers to your company or organization name. You can leave this blank.

· Language. This means the type of language used for programming, which Swift.

· Bundle Identifier. This field's value will automatically generate after typing the app name, organization name, and organization identifier.

· Devices. This lets you configure the app's compatibility with different Apple devices. Choose Universal, which means the app will run on both iPad and iPhone.

· Organization Identifier. This is where the organization identifier will go for people with such data. If a user doesn't have an organization identifier, simply use com.example as a dummy identifier.

Additional configuration settings are also found on the same dialog box. They focus on testing user interfaces and other data. Settings should be the following:

· Include UI Tests. Don't tick this option.

· Include Unit Tests. Check to select.

· Use Core Data. Don't tick the check box.

Once every data is field, hit Next to be directed to the next window. This next page will ask you to choose a storage location for project files. Select preferred folder or location then click Create. Doing this will direct you to the workspace windows.

The workspace is divided into four parts or areas:

· Toolbar. The top most part is composed of toolbars to use for generating the user interface.

· Editor Area. This is the middle part of the platform that takes the most space. It's meant for configuring or editing app layouts and essential interface sections.

· Navigator Area. It's the panel found on the left side of the program that lists project folders, storyboard files, and other data compiled for the project.

· Utility Area. Located at the right part of the screen, this panel has data and utilities required for setting the project up.

Preview the App via Simulator

The advantage of using a layout and configuring the app's details is you already have the basic app ready. However, it looks bare by having a simple white background and plain text for the app name. You can view this bare app by running the simulator.

Look for the Scheme popup menu at the Toolbar area. Select preferred device like iPhone 6. It will let you choose to run a Simulator or device where you want to test the app. Choose iPhone 6 Simulator and not the actual iPhone 6 device. Look for the Run icon that looks like a play icon on music players at the top left corner of the toolbar.

If it's your first time to run an app on Xcode, it will ask if you prefer to enable the debugging features for the platform. Choose which option you prefer then follow the succeeding prompts.

Wait for the toolbar to complete the project. The platform is done building the app once it loaded the simulator and the preview of your app. It will show the splash screen with the app name then another blank page, which is probably for the succeeding pages to create.

Take note that the simulator's screen size will change depending on the device type. In choosing an iPhone device simulator, you will see the screen as the usual rectangular smartphone display. For iPads, you'll see a wider display with different orientation than those of smartphones.

Once you're done viewing the app, close the simulator by going to Simulator menu and selecting Quit Simulator. Pressing Command+Q will also close the simulator, but faster without navigating through Xcode.

Other procedures will be required to create a good app interface that will sell in stores. You will learn more about designing iOS apps in detail upon trying out guides for advanced users. In the meantime, download playgrounds and codes of sample app development then use them with Xcode for practice.