Flex/AIR on Devices: From Flash Builder to iOS

This post is a part of my series “One Developer Platform, Many Devices“.

In this post, we will cover the workflow for delivering a solution from development in Flash Builder through publishing in Apple’s App Store.

You can start developing apps for iOS without an Apple developer account by using the debugging simulator built into Flash Builder. However, a critical step in your development process is that you must test and evaluate your applications on a physical device (preferably before you try to ship it). ūüôā

To get from Flash Builder onto an iOS device, the first thing that you will need to do is create a developer account with Apple and setup your signing certificates and mobile provisioning profiles. To register for a developer account, visit developer.apple.com and walk through the registration process. Note: You can register for free, but you can’t access any of the iOS deployment tools without the paid enrollment into the iOS developer program.

After you have an active iOS developer account, you will need to create a signing certificate and distribution profiles. From the iOS developer center’s home page, click on the “iOS Provisioning Portal” link as shown below.

iOS Developer Home

Next, click on the “Certificates” link on the left side of the screen, as shown in the next screen capture. This will direct you to the certificate management area.

iOS Provisioning Portal

If you are only concerned about developing and not about distribution (or if you are not the iOS account team agent and can’t access distribution profiles), then you simply follow the steps for creating a development certificate.

If you will be distributing your application in the app store, via the enterprise distribution model (if you qualify for the enterprise program), or if you will be using ad-hoc distribution, then you will have a “Distribution” tab, as shown in the screen below. Distribution certificates are required for distribution profiles. Go ahead and click on the “Distribution” tab and follow the instructions for setting up a certificate. You will need to create a certificate signing request through Keychain Access, and then you will need to submit it through the Apple developer portal.

iOS Provisioning Certificates

Once you have successfully created a certificate, it will display under your “Current Distribution Certificate” heading within the “Distribution Certificates” tab, as shown below.

iOS Provisioning Certificates - With Certificate

Download the certificate and either drag or import the “distribution_identity.cer” file into the Keychain Access application. Once you have imported it, you should see the profile listed. ¬†In the next screenshot, you can see that I have selected my “iPhone Distribution” certificate. ¬†You will need to export the certificate to a .p12 file so that it can be used by Flash Builder. ¬† Just select the certificate at the root level (be sure to not just select the key). ¬†Next, go to the file menu and click “Export Items” and save the certificate to a file.

iOS Provisioning Certificates - With Certificate

Obviously, I’m showing these steps on a mac. ¬†To create a certificate on Windows, follow the instructions available here.

Once you have created your signing certificate, you’ll next need to obtain your provisioning profile from Apple, in order to be able to actually deploy on any iOS devices. ¬† If you are only using your registered iOS devices for local development and do not plan to distribute your application yet, then you can go to the Provisioning section of the iOS developer portal and download the development “Team Provisioning Profile”. ¬†Click on the download link and save you .mobileprovision file locally, and then proceed on to setting up your debugging environment.

Download Development Profile

If you will be distributing your application, then you will need to first create an application ID. ¬† All distribution provisioning requires an application ID. ¬†Within the iOS Provisioning Portal, click on the “App IDs” navigation on the left sidebar, and then click on the “New App ID” button on the right side of the screen.

Create Application ID

From here, you need to create the actually application ID. ¬†You need to enter a description (what you commonly refer to the app as), and enter a bundle identifier. ¬† For the description on my application, I entered “URL Monitor” for my description , and the bundle identifier is “com.tricedesigns.URLMonitor”. ¬†The bundle identifier is the unique reference to your application.

Create Application ID

Once you’ve create an App ID, next you will need to create a distribution provisioning profile. ¬† Click on the “Provisioning” navigation item on the left sidebar, and then click on the “Distribution” tab across the top. ¬† To create a new distribution profile, click on the “New Profile” button on the right side of the screen.

New Distribution Profile

Next, select your distribution type. ¬†For most of us, this will only contain “App Store” and “Ad Hoc”. ¬†For developers who have access to the enterprise developer program, there will be a third “Enterprise” option. ¬†Note: ¬†“Ad Hoc” distribution means that you can only distribute to a limited number of devices; all of which need to be registered within your developer account. ¬† Give your distribution profile a name (I called mine “URL Monitor App Store”), and select the application ID that you just created. ¬† Once you click submit, the distribution profile will be created.

Create New Distribution Profile
Create New Distribution Profile

Once created, download and save the .mobileprovision file for future use.

Download Distribution Profile

Debugging:
First things first, let’s cover debugging. I mean, c’mon… you can’t distribute an app if you haven’t debugged it first… right? ¬†To debug, go the the debug menu and select the “Debug Configurations…” option to create a new device configuration.

New Debug Configuration

Select the target platform “Apple iOS”, and then select the “on device” launch method.

Debug Configuration

From that same screen, cick on the “Configure packaging settings” link to show iOS signing options. ¬†In the screen shown below, select the .p12 certificate file that you created earlier, and select the debug .mobileprovision provisioning file that you also just downloaded.

Apple Debug Settings

Click “Apply” to save these settings, then click “OK” to close this dialog. ¬†You will be returned to the “Debug Configurations” dialog, and you can now click “Debug” to actually debug your application on your iOS device. ¬† Flash Builder will not automatically deploy to your device. ¬†It will create an IPA file, which you will need to drag into iTunes, and then synch your device to deploy it. ¬† However, you can still actively debug your application over the local network, directly within Flash Builder.

Deployment Packaging:

First things first, setup your application’s metadata within your app.xml file. ¬† In particular, you will need to specify an application name, version number, and ID. ¬†The ID MUST match the bundle identifier that you specified when creating the App ID through the iOS Provisioning Portal, and the version number must be a valid number.

Flex Project App.xml

Next, right click on your project and select the “Export” menu option, as shown below:

Export

Select the “Release Build” option, and continue the wizard steps:

Export Release Build

Next, you will need to specify the export location (“export to folder”) and enter a filename. ¬†Also, be sure to have the “Signed packages for each target platform” option selected.

iOS Export

Next, you will need to configure your distribution options. ¬†Specify your certificate (.p12) file location, your provisioning file (.mobileprovision) location, and select the correct package type. ¬† If you use an App Store or Enterprise provisioning profile, select the “Final release package for Apple App Store” option. ¬† If you use an Ad-Hoc provisioning profile, select the “Ad hoc package for limited distribution” option. ¬† Keep in mind that you must provision specific devices in the Apple App Store before¬†creating the build. ¬†Next, click “Finish”, and out will come an IPA file ready for distribution. ¬†Note: If you are using a developer certificate, you will not be able to distribute an IPa file.

iOS Export IPA

Distribution:

If you are using Ad Hoc¬†distribution, you can now simply send the IPA file to your users, and they will be able to deploy the application to any provisioned devices. ¬† If you are using the enterprise provisioning option, you can just send the IPA without worrying about specific device IDs. ¬† However, keep in mind that you can only distribute those files according to Apple’s rules surrounding the Enterprise deployment model.

If you’ve be “chomping at the bit” to upload your application to Apple’s app store, then this next section is for you. ¬† First things first, you must go to iTunes Connect to setup your application with the App Store. ¬† Simply navigate to itunesconnect.apple.com¬†and l0g in using the same credentials that you used for the iOS Portal. ¬† iTunes connect allows you to manage and monitor your applications, including sales trends, #downloads, etc…

To get started,click on the “Manage Your Applications” link shown in the screenshot below:

iTunes Connect - Home

You will be brought to the “manage” screen; from which you can edit metadata for all of your applications. ¬†To create a new application, click on the blue “Add New App” button in the top left corner.

iTunes Connect - Manage Apps

iTunes connect will now walk you through a series of questions that will provide appropriate metadata for your application.  First, select your language, and enter your company name.  If you are submitting as an individual (not a company), just put your name.

iTunes Connect - New Application

Next, you need to create the primary metadata about you application: The application name, the sku number (stock keeping unit), and select the bundle identifier. ¬†Make sure you select the bundle ID that matches your App Store provisioning profile. ¬†DOUBLE-CHECK THIS SCREEN TO MAKE SURE IT IS CORRECT! ¬†Once submitted, the bundle ID information cannot be changed. ¬†When you’re absoultely sure it is correct, click on “Continue” to proceed.

iTunes Connect - App Information

Next, enter the availability date and pricing for your application. ¬† Keep in mind that the availability date only applies after the application has been approved by Apple. ¬†If you back-date this, it will not speed up your time into the app store. ¬†When ready, click “Continue” to proceed.

iTunes Connect - Availability and Pricing

Now, enter the primary metadata that describes your application.  This includes the version number (try to keep this in synch with your app.xml in your Flex project for organization purposes Рalthough not required to match), description, primary and secondary categories, keywords, contact information, and review notes (for the team at Apple that will review your application).

iTunes Connect - Primary Metadata

Next, rate the content within your application. ¬† Apple will verify your app against these ratings, and if they do not match, your app will not make it into the app store. ¬†Mine was actually rejected for this… No, I do not have crude content in this case. ¬†For example, if you provide unrestricted access to the internet, such as allowing a user to type in any URL, and you show that content via a stageWebView, then you are rated 17+. ¬†No “ifs”, “ands”, or “buts”. ¬†My only options were to remove the unrestricted access (remove stageWebView), or to have the app rated 17+. ¬†I chose 17+. ¬† Don’t be confused by this though; ¬†If you use StageWebView, that doesn’t mean your app will always be rejected – this is only b/c I had unrestricted access to the StageWebView control. ¬†In my app, you can enter any URL, and click on the “view” button to view the content of that URL.

iTunes Connect - Content Ratings

Next, upload your application images. ¬† The large icon is 512×512, and the phone screenshots should match actual device resolutions. ¬†Note: Your main “large icon” must match the one embedded in your application – I also got rejected b/c it didn’t match initially, as shown in the screenshot below.

Image requirements from Apple:

iPhone and iPod touch Screenshots must be .jpeg, .jpg, .tif, .tiff, or .png file that is 960×640, 960×600, 640×960, 640×920, 480×320, 480×300, 320×480 or 320×460 pixels, at least 72 DPI, and in the RGB color space.

iTunes Connect - Images

Hit “Continue” to save all of your changes, and now you are ready to start uploading your application binary. ¬† Click on one of the “Ready To Upload Binary” buttons on either the top of bottom of the screen to move the process along…

iOS Distribution - Ready to Upload

Once you click on the “Ready to Upload” button, you will walk through several questions around export compliance and encryption. ¬†Answer these questions, then hit “Save” to proceed.

iOS Distribution - Export Compliance

Once you have completed all of the questions, your application will now be ready to upload.   After this point, we will be leaving iTunes Connect, and jumping to the OSX desktop to actually upload the application.

iOS Distribution - Application Ready to Upload

Now, we are ready to upload the application. ¬† In OSX, launch the “Application Uploader” program, which is a part of the XCode developer tools. ¬† When the application loads, you will need to sign in using your iOS developer credentials.

iOS Provisioning Certificates - With Certificate

Upon login, the Application Loader tool will allow you to chose which application you want to upload a new build for. ¬† Choose the desired application, and then click on the “Next” button.

iOS Provisioning Certificates - With Certificate

The Application Loader tool will display metadata about the application that you have selected, and you will need to choose an IPA file from your local filesystem for distribution.   Be sure to select your release-compiled, App Store provisioned IPA, or else the upload process will fail.

iOS Provisioning Certificates - With Certificate

Once you’ve selected the IPA file, click “Send” to being the upload process.

iOS Provisioning Certificates - With Certificate

After the upload process is complete, there will be a verification step, and then you will receive a message “Uploaded package to iTunes Store”.

iOS Provisioning Certificates - With Certificate

Click “Next”, and you will be presented with a “Thank You” message, and the upload process is done.

iOS Provisioning Certificates - With Certificate

Now, comes the Apple approval process. ¬†Generally, this takes about a week for new applications, and only a few days for application updates. ¬†However, there are not guaranteed timelines. ¬† Once the application is approved, it can be ready for immediate consumption within Apple’s App Store.

You can check it out live in Apple’s App store at:

http://itunes.apple.com/us/app/mobile-url-monitor/id456005674?mt=8

Mobile URL Monitor in Apple's Store

29 replies on “Flex/AIR on Devices: From Flash Builder to iOS”