Building an iOS Application

Contents

1. Introduction

MobiOne Studio's AppCenter Builder service enables you to build iOS applications (.ipa files) that you can install onto your iPhone or iPad devices or upload to the App Store. The app builder process is performed using the MobiOne iOS Build Application wizard. This wizard walks you through a series of forms that collects the required information to build a custom application. In this tutorial you learn how to:

• Use the iOS Build Application wizard to create and submit an application build request.
  
• Monitor the build process and review the results.
  
• Install the application .ipa file.
• Submit an app to the App Store.
  

Note: To create iOS applications, you are required to provide provision data files as input to the build process. If you are unfamiliar with the common iOS provisioning data files, Section 2 below directs you to a tutorial that describes how to acquire these files. You are also required to have an Apple iOS Developer Program membership. In most cases, Apple charges an annual fee to maintain an Apple Developer ID. Visit developer.apple.com/programs/ios to learn about the program benefits and cost.

To see the application build process in action, you can view a screencast of the instructions included in this document.

Back to Contents

2. Prerequisites: iOS Provisioning Data

The app build process requires you to provide several digital signing and provision files. The iOS Application Provisioning Requirements is a prerequisite tutorial that presents background discussion on the role and purpose of each of these files and describes the process for creating them. Please complete it before proceeding with this tutorial.

Back to Contents

3. Using the iOS Build Application Wizard

When you build an iOS application with MobiOne, optimized HTML5 mobile web source code is generated from your UI design files. The mobile web source files are then uploaded to the MobiOne AppCenter cloud service where they are compiled into an iOS application. The iOS Build Application wizard walks you through entering the information required to build your application.

1. With your project's startup UI design file open in Design Center, click the Build iOS Application icon .
2. Enter your email address, review the AppCenter Privacy and Usage Policies, and click Next.

Providing email address required for the AppCenter cloud service
3. Enter the name, installation filename and version for your application. These fields default to the name of your .mobi file. Click Next.

Naming the application
4. Chose the device on which you want your applications to run and the orientation. Click Next.

Selecting devices and orientation
5. The Files & Data page displays the files generated by MobiOne to run your application as a mobile website. These are the files used to build your iOS app. By default, all generated files are selected and will be part of the build. Click Next to accept all files.

Note: You can add additional files by clicking the Import icon .


Accepting all generated files to be included in the build
6. Click the More button to navigate to the digital certificate ( .cer) file you received from Apple and the private key file (private.key) downloaded from the Digital Signing Utility.

Notes:

• The certificate and private key files must be a matching pair; otherwise a validation error appears . The certificate file you select must be the one created by the .csr file that was generated at the same time as the private key file. See the iOS Application Provisioning Requirements tutorial for more information.
• If you have a . p12 identity file that was created on a Mac, you can use this file instead by selecting the Identity File and Password option.
  
  
7. Enter a Bundle ID for your app, and select your provision profile file. The provisioning profile file was created through the iOS Provisioning Portal on the Apple Developers website.

   Notes:

• The Bundle ID must match the profile's App ID, otherwise a validation error appears. If the profile's App ID ends with a wildcard * then your bundle Id must match the literal part of the App ID. For example if the provision profile's App ID is com.genuitec.apps.* then your bundle Id must begin with com.genuitec.apps., e.g., com.genuitec.apps.learningcenter
• A best practice is to use a reverse domain name for your App ID and Bundle ID.
• Do not include space characters in your Bundle ID.
• The provisioning profile should match the distribution method you plan to use. If you are distributing using the Ad Hoc method, you must select a profile for ad hoc distribution. If you are distributing via the App Store, select a profile for App Store distribution. It is helpful to name your profiles so they are easily identified by the distribution method, e.g. xxx-adhoc, xxx-appstore.

Providing digital signature information
8. Click Next to specify an application icon and a startup image. The size specifications appear on the wizard page. Select the ones for which you have images available, and click Next. As a convenience, if you leave all image fields empty, MobiOne AppCenter will provide default application icons, an iTunes image, and a startup image.

Warning! If you are using a provisioning profile for distribution via the App Store, you must be sure your icon images conform to the specified sizes shown on this screen. Otherwise, iTunes Connect will reject your app .ipa file.

iPhone/iPod Touch: .png format; 57x57 required, 114x114 optional

iPad: .png format; 57x57 required, 72x72 optional


Selecting application icons and startup images
9. Enable/disable desktop notifications. For email notification enter your email address in the Email Recipients field. You can send to multiple recipients by separating the addresses with a semicolon.
   
   When you include an email address that is accessed from your iOS device, you receive notification on your device when the build completes. The notification includes a link from which you can install the app onto your device, assuming the app was built using an Ad Hoc provisioning profile. See Section 5 for more information. If the app is built with an App Store provisioning profile, you cannot install the app except through the App Store.
   
   Entering notification information

With the Desktop Notification checkbox selected, you receive a popup notification on your computer screen when the build is complete. The notification displays the file location of the .ipa application file or an error log if the build failed. Clicking this link opens iTunes and adds the app to the iTunes app list.


Desktop build notification
10. Click Finish. The application source files and the build configuration information you provided are uploaded to the AppCenter, and the build process is initiated.
    

Back to Contents

4. Monitoring Your Application Build Process and Results

The Application File (.ipa) and its Location
The application build process creates your app in the form of an installation file with an .ipa extension. This is file is known as an iPhone archive file. The .ipa file is automatically downloaded from the MobiOne AppCenter and stored in a <.mobi filename>-ios folder in the same folder as your main project UI design file. For example, if your UI design file is named myApp.mobi, your application file is placed in a folder named myApp-ios.

For ad hoc distribution, a copy of the .ipa file is retained by AppCenter to support wireless (over-the-air) installation described in Section 5. For App Store distribution, skip Section 5, and follow the steps in Section 6 for preparing and uploading your app to the App Store.

If you build an application multiple times, the resulting .ipa files are not overwritten. Instead, a version number in parenthesis is added to the filename. The example above contains (1) in the filename, indicating it is the second build of MyCoHome.ipa.

Monitoring  the Build Process - Progress View
Depending on the size of your application and the load on MobiOne AppCenter Builder servers, your application build process can take from 30 seconds up to 10 minutes. While waiting for your build process to complete, use the Progress view to observe the stages as your build progresses. You can also cancel a build process by clicking the Stop icon .

Completed build jobs include a link to access the newly created iOS application or error.log information in cases where a build fails.

Desktop Notifications
Depending up on how you configured notifications in the iOS Build Application wizard, you can receive desktop notifications and email notifications when your build process completes. A desktop notification is a popup dialog that appears in the lower right corner of your computer display.

desktop notifications remain on your desktop for one hour unless you close them. To change the notification display time, select Window>Settings from the menu, and select AppCenter.

Email Notifications
If you configured the iOS Build Application wizard to send email notifications, you receive an email message when your build successfully completes. See Section 5 for an example email notification and how it is used in performing wireless installation of your app onto your ad hoc iOS devices.

Back to Contents

5. Wirelessly Installing the iOS App on Your Device

If you configured your build process to send email notifications, you will receive an email notification similar to the one shown below.

Build notification containing link to app installation

Note: The provision profile used when creating your iOS application determines how the app can be deployed. For example, if the provisioning profile is an Ad Hoc distribution profile, the application will only install on those devices specified in the profile. However, if you build using an App Store distribution profile, the application can only be installed on a device when it is downloaded from the App Store. You cannot install an application build with an App Store profile directly onto a device.

When you tap the link in the email, the following page appears.

App installation page

Tap Install Now, and your app begins downloading and installing onto your device. You will see the the application's installation progress on the device's homescreen. Remember, if the app was built using a provisioning profile for App Store distribution, the app cannot be installed onto the device except through the App Store.

App being installed on home screen

Notes:

• If you have an older iOS version on your device that does not allow installation using this method, you must connect your device to iTunes to install the app. Click the link in the desktop notification. This opens iTunes and adds the app to the iTunes app list from which you can sync the app to a connected iOS device. This applies only to builds using an ad hoc provisioning profile.
• Do not attempt to open the installer URL in the MobiOne Test Center. Test Center is not able to run binary iOS files.

Back to Contents

 

6. Preparing and Uploading Your App to the App Store

iTunes Connect is the tool by which you manage and submit your apps for distribution in the App Store. Before submitting your app to the App Store, there are some preparations that must be made. Follow the instructions found in the iTunes Connect Developer Guide. (To access the guide, you must login to iTunes connect. Apple IDs associated with an Apple Developer account typically have access to iTunes Connect.)

To upload your app to the App Store, you must have access to a Mac computer with the Application Loader utility installed. If you do not have a Mac or do not care to deal with additional HW/SW requirements, consider using an upload service. Genuitec/MobiOne is not able to offer a cost effective upload service at this time. However, we have negotiated a $5/upload rate with a small company, Appstore Uploader (www.appstoreuploader.com), that will perform uploads on your behalf.

Back to Contents

 

7. iOS App Build Checklist

Below are the high level steps for building an iOS app for ad hoc testing, and then building for submission to the App Store.

1. Be sure you have an Apple iOS Developer Program membership. Visit developer.apple.com/programs/ios to learn about the program benefits and cost.
2. Request and download digital signing and provision files. For initial testing on devices, create a provisioning profile for ad hoc distribution if have not already done so. Follow the steps in iOS Application Provisioning Requirements.
3. Use the iOS Build Application wizard to provide MobiOne with the information needed to build your application.
4. Install for testing on a device specified in the ad hoc provisioning profile.
5. If you do not have an App Store distribution profile, repeat step 2 but this time create a provisioning profile for App Store distribution.
6. Repeat step 3 to build the app using the App Store distribution profile.
   • You must include the required images in exactly the sizes and formats presented in Section 3, step 8.
7. Prepare and upload your app to the App Store.

Back to Contents

 

8. Where Do I Learn More about MobiOne Studio?

The MobiOne online Learning Center site provides guides, tips, tutorials and videos to help answer your questions. Remember to check the Learning Center site for new and updated material.

©Copyright 2012 Genuitec, LLC. All Rights Reserved.