Adobe
Products
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
Student and Teacher Editions
More products
Solutions
Creative tools for business
Digital marketing
Digital media
Education
Financial services
Government
Web Experience Management
More solutions
Learning Help Downloads Company
Buy
Home use for personal and home office
Education for students, educators, and staff
Business for small and medium businesses
Licensing programs for businesses, schools, and government
Special offers
Search
 
Info Sign in
Welcome,
My cart
My orders My Adobe
My Adobe
My orders
My information
My preferences
My products and services
Sign out
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Adobe
Products Sections Buy   Search  
Solutions Company
Help Learning
Sign in Sign out My orders My Adobe
Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change. Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.
Qty:
Purchase requires verification of academic eligibility
Subtotal
Review and Checkout
Adobe Developer Connection / Dreamweaver Developer Center /

Building a mobile app with PhoneGap and Dreamweaver: Creating a release build for iOS

by Steve Gill

Steve Gill
  • Adobe
  • twitter.com/#!/stevesgill

Content

  • Importing the project into Xcode
  • Creating a provisioning profile
  • Installing the application to your device
  • Creating the release build
  • Where to go from here

Created

14 December 2011

Page tools

Share on Facebook
Share on Twitter
Share on LinkedIn
Bookmark
Print

Requirements

Prerequisite knowledge

Before starting this tutorial:

  • * Read about the basics
  • * Get started with the articles listed in Creating your first app
  • * Discover some of the available tools and common techniques for debugging and testing your mobile app in Debugging your app

 

Additional requirements

  • Xcode

User level

Beginning

Required products

  • Dreamweaver (Download trial)

Sample files

  • PhoneGap_sample_ios.zip

Once you have an app that you've tested, you're ready to create a release build of your application, with your own private signing key. This tutorial describes the process for doing just that.

You can use the sample app included with the sample files for this article as an example, or you can follow the steps outlined here using your own app.

You should already have registered for a free Apple developer account and downloaded the iOS SDK. If you haven't done that yet, see Building a mobile app with PhoneGap: Creating your first app for more details.

Note: To complete this tutorial you will need to enroll in the iOS Developer Program. This program has a $99 yearly fee. The enrollment process can take a few hours or up to a few days.

You'll also need to download and install Xcode on a system running Mac OS X 10.6 or later.

Importing the project into Xcode

After installing Xcode, the first step is to import the project you built with Dreamweaver into Xcode.

  1. In Finder, open the directory in which Dreamweaver stored the build of your iOS project. In the sample files for this tutorial, this folder is named com.companyname.testapp_iOS.
  2. Double-click the Xcode project file in this directory to launch the project in Xcode. For example, double-click the testapp.xcodeproj sample file.
  3. In the top bar beside the Stop button, select an appropriate simulator and click the Run button to make sure the project was imported and that the app works. Your application should open in the iOS simulator.

Creating a provisioning profile

You'll need to create a provisioning profile to get your application onto your device. This section will guide you through setting up the necessary certificates and getting your iOS device and Mac provisioned properly.

  1. After your enrollment in the iOS Developer Program is confirmed by Apple, log into https://developer.apple.com/devcenter/ios/index.action.
  2. On the right side of the page, locate the iOS Developer Program panel and click iOS Provisioning Portal (see Figure 1).
Figure 1. The iOS Developer Program panel.
Figure 1. The iOS Developer Program panel.
  1. On the iOS Provisioning Portal welcome page, click the Launch Assistant button.
  2. In the next steps, you'll follow the on-screen instructions provided by the Development Provisioning Assistant (see Figure 2).
Figure 2. The Development Provisioning Assistant.
Figure 2. The Development Provisioning Assistant.
  1. Click Continue.
  2. Type an App ID description. Make it something descriptive about your app. The description you enter will be used throughout the provisioning process to identify your App ID. For my example, I typed dwtest. Click Continue.
  3. Next, you need to specify the Apple device that you are using for development and testing. If you've already set one up, simply select Use An Existing Apple Device and then select it. Otherwise, select Assign A New Apple Device and click Continue.
  4. Type a description of your device. For example, I typed Steves iPhone 4. (Special characters, including the apostrophe, are not permitted.)
  5. Type your Unique Device ID (UDID). To find it, connect your device to your Mac, choose Window > Organizer in Xcode, and select your device. Copy the 40-character string in the identifier field and paste it as the Device ID in the Development Provisioning Assistant.
  6. Click Continue.
  7. Next, you need to request a development certificate.

  8. In the Applications folder on your Mac, open the Utilities folder and double-click Keychain Access.
  9. After Keychain Access launches, choose Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.
  10. In the Certificate Information dialog box, type the email address you used to register with the iOS Developer Program. In the Common Name field, type your name or your organization's name. Select Saved To Disk (see Figure 3) and click Continue.
Figure 3. The Certificate Assistant in Keychain Access.
Figure 3. The Certificate Assistant in Keychain Access.
  1. Note where the certificate signing request (CSR) is saved.
  2. Return to the Development Provisioning Assistant in your browser.
  3. Upload your CSR in the Development Provisioning Assistant and click Continue.
  4. Type a description for your provisioning profile and click Generate. Click Continue once it completes.
  5. Follow the on-screen instructions to download and install your provisioning profile. Click Continue.
  6. Follow the on-screen instructions to download and install your development certificate. Click Continue.
  7. Finish the instructions but don't install your application on your device yet. You will do that in the following section.

Installing the application to your device

  1. Before you create a release build, it's a good idea to install your application on your device.
  2. Go to your project in Xcode and in the jump bar at the top, switch from the simulator you chose earlier to your device (see Figure 4).
Figure 4. Selecting your device in Xcode.
Figure 4. Selecting your device in Xcode.
  1. Select the summary tab for your project in Xcode and set the Identifier to include the App ID you set up in the previous section (see Figure 5). For example, if you typed dwtest as the App ID earlier, you might set the identifier to com.yourcompany.dwtest.
Figure 5. The Xcode summary tab.
Figure 5. The Xcode summary tab.
  1. Select the orientations you want your application to support and add images for the app icons and splash screen.
  2. Click the Run button to build the application and install it on your device.

Creating the release build

Switching from a debug version of your application to a release version is straightforward.

  1. Click in the top bar beside the Stop button and choose Edit Scheme (see Figure 6).
Figure 6. Selecting Edit Scheme.
Figure 6. Selecting Edit Scheme.
  1. In the Edit Scheme dialog box, make sure Run is selected in the left side panel and select the Info tab in the main panel.
  2. Change the Build Configuration setting from Debug to Release (see Figure 7).
  3. Click OK.
Figure 7. The Edit Scheme dialog box.
Figure 7. The Edit Scheme dialog box.
  1. Make sure your device is connected to your Mac and selected in the jump bar beside the Stop button.
  2. Click the Run button.

You have just created a release build of your application and installed it onto your device.

Where to go from here

In this tutorial, you learned how to create a provisioning profile and a certificate used to build and install a release build of your application on your device.

Now that you have created a release build on iOS, you may want to step through the following articles:

  • Submitting to the Apple App Store
  • Creating a release build for Android
  • Submitting to Android Market

For information on setting up your provisioning profile, see the iOS Provisioning Portal website.

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Tutorials and samples

Tutorials

  • Understanding HTML5 semantics: Changed and absent elements
  • Mobile app with PhoneGap: Submitting to the Apple App Store
  • PhoneGap and Dreamweaver: Releasing on iOS
  • Mobile app with PhoneGap: Submitting to Android Market

Samples

  • Responsive design with jQuery marquee
  • Customizable starter design for jQuery Mobile
  • Customizable starter design for HTML5 video
  • Customizable starter design for multiscreen development

Dreamweaver user forum

More
04/23/2012 Resolution/Compatibility/liquid layout
04/20/2012 using local/testing server with cs5 inserting images look fine in the split screen but do not show
04/18/2012 Ap Div help
04/23/2012 Updating

Dreamweaver Cookbook

More
11/07/2011 Simple social networking share buttons
09/20/2011 Registration form that will generate email for registrant to validate
08/21/2011 Spry Accordion - Vertical Text - Auto Start on Page Load - Mouse Over Pause
08/17/2011 Using cfdump anywhere you like

Products

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • Mobile Apps
  • Photoshop
  • Touch Apps
  • Student and Teacher Editions

Solutions

  • Digital marketing
  • Digital media
  • Web Experience Management

Industries

  • Education
  • Financial services
  • Government

Help

  • Product help centers
  • Orders and returns
  • Downloading and installing
  • My Adobe

Learning

  • Adobe Developer Connection
  • Adobe TV
  • Training and certification
  • Forums
  • Design Center

Ways to buy

  • For personal and home office
  • For students, educators, and staff
  • For small and medium businesses
  • For businesses, schools, and government
  • Special offers

Downloads

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Security
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Ad Choices

Reviewed by TRUSTe: site privacy statement