Quick Start Guide Adobe Digital Publishing Solution: 2015 July 8

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 51

Quick Start Guide

Adobe Digital Publishing Solution

Last Updated 2015 July 8


DPS 2015 Overview

Set up Build Create Manage Design App


Project App Articles Content Experience

Article 1
Collection contents are
displayed in a browse page.

Article 2 Collection 1 Article 3


The browse page appearance
is defined by the layout and
underlying cards.
Collection 2 Article 4 Collection 3

Tapping a card opens an article


or another browse page, which
Article 5 Article 6 Article 7 displays another collection’s
contents.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 2


What You Will Build

When you launch the app, the Tapping a card can display another Tapping a card can display the con-
browse page uses a 4-column layout. browse page, which is another collec- tents of an article.
Each card on this layout represents tion with a different layout applied.
an article or collection.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 3


Setting up DPS 2015

What you need


• A beta account for DPS 2015
• Tutorial bootstrap assets (recommended)
• HTML Article Packager (optional)
• InDesign plug-ins (optional)
• (iOS apps) Valid development certificate (and password) and
development mobileprovision file that includes your device ID
• (Android apps) Valid .p12 certificate

Obtain your beta trial account


To experiment with DPS 2015, you need to sign in to the Portal using an Ado-
be ID that has been verified to work in the beta environment.
1. Go to http://www.adobe.com/go/dps_beta.
2. Click “Sign Up” and follow the prompts to register.

Install InDesign plug-ins (optional)


Installing InDesign plug-ins is required in order to expose the UI for exporting article files.
When you install the plug-ins, you can still use all the same tools for working with the earli-
er version of DPS, plus you add the ability to export articles for DPS 2015.
1. Download the installer files from the Digital Publishing Solution Beta Resources page
(http://www.adobe.com/go/dps_beta_resources).
2. Close InDesign. Watch Video
3. Run the installer for the appropriate version of InDesign (CS6 or later). Getting Started video

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 4


Creating a Project
A PROJECT IDENTIFIES INFORMATION about the app such as metadata,
store settings, articles, and collections. When you build an app, the app
uses the project settings and displays the project’s content and layouts.
1. Use the Adobe ID you signed up for the beta to sign in to the Portal:
http://www.adobe.com/go/dps_beta
2. Click the Project Settings tab.
3. Click the Create New Project icon.
4. In the Basics tab, specify a Project Title and Link Reference.
For Link Reference, we recommend using a “reverse domain name”
(such as com.company.publication) to help ensure that you use
unique, predictable names.
5. Click the Content tab. Select “Publish all collections as free” so that
you will be able to download all content in your test app.

6. Click the Analytics tab. Specify a Report Suite name, which is a required field for analyt-
ics tracking. For this tutorial, make up a Report Suite name.

Watch Video

Project Setup video

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 5


7. Click the App Navigation tab. For this tutorial, choose the option to create one top-level
collection for both phones and tablets.

8. Click Create.
You can edit project settings at any time by selecting the project and clicking the pencil
icon. However, you cannot edit the top-level collection setting in the App Navigation
tab at this time.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 6


Building an App
Where do I get Apple iOS
APP BUILDING is a cloud service for all supported platforms. You can build iOS, Android, certificates?
and Windows apps. This Quick Start Guide walks through the steps for creating an iOS app.
These steps assume that you have already created your iOS certificate and mobilepro- Apple requires a valid development
vision file. For more information about iOS certificates, see “Appendix A: iOS Developer certificate and mobileprovision file
Program” on page 31. to view developer apps.
For more information about iOS
Create an iOS app
certificates, see “Appendix A: iOS
The app you create can display both published and unpublished content from the selected
Developer Program” on page 31.
project.
1. In the Portal, select your project (if you have more than one), and click Apps.

2. Click the Create New App icon.


3. Choose iOS as the platform, and click Next.
4. Specify the app name and Bundle ID. Watch Video
The Bundle ID is the ID you specify when you create the App ID in the iOS Developer
Build Your App video
Center. For example, com.adobe.inspire is the App ID for Adobe Inspire.
Important: Make sure that you use a valid Bundle ID. When you sign the app using a
mobileprovision file, the Bundle ID you specify must match the Bundle ID used in the mobile-
provision file.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 7


5. Specify the orientation for the tablet version of the app and the phone version of the
app. For this tutorial, we recommend portrait.
6. Select Enable Preview so that you can preview unpublished content.

7. Click the Assets tab, and specify the files to be used for the app icon and launch
images.
You can use the images provided in the “DPS2015 Bootstrap Resources > AppBuilding >
Asset_Generator-assets > iOS” folder.
8. Click Submit to build an unsigned app.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 8


Sign and install the iOS test app (Mac OS only)
You need to sign the app so that it can be installed and run on an iOS device.
To sign the test app, you need the .ipa file for the app, a developer mobileprovision file that
matches the Bundle ID you specified when you built the app, and a developer .p12 certificate.
1. In the Apps section of the Portal, click the “Unsigned App” link to download the .ipa file
of the app you created.
2. In the Apps section of the Portal, click “Download Signing Tool” in the upper right
corner.
3. Install and launch the App Signing Tool.
4. Select iOS, specify the required files and password, and sign the app.

5. Use your preferred method such as iTunes or Xcode to load the signed app to your iOS
device.
You don’t have any content yet in your app, so there’s no reason to launch it. Next, you’ll
start creating content.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 9


Creating Content
THERE ARE TWO MAIN WAYS to create articles for DPS 2015.
• Using HTML (responsive HTML)
• Using InDesign (fixed layout)
If you create responsive HTML articles, the content can flow to fill the screen regardless of
device or platform, with no letterboxing.
If you create articles using InDesign, the articles are fixed to a certain layout, such as
768x1024 pixels. When displayed on a tablet or phone, the content is scaled and letterboxed
as needed to fit within the area.

Create an article from responsive HTML


You can skip this step below by using the article files in the “DPS2015 Bootstrap Resources >
ContentResources” folder. These reflowable HTML articles are compressed into article files
so that you can upload them.
You can use the HTML Article Packager utility to create an article file for HTML content.
This utility creates a required manifest.xml file and compresses the files.
1. In Finder or Explorer, open the folder containing the HTML Article Packager utility.
2. In a separate Finder or Explorer window, open the “DPS2015 Bootstrap Resources >
HTML_Article > ” folder.
3. Drag and drop the “blueArticle01” folder onto the HTML Article Packager icon.

Watch Video

HTML Articles Video

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 10


The BlueArticle01.article file is created on the same level as the HTML folder.

You will be able to upload this article file later in this guide.

Create an article from an InDesign layout


You can skip this step below by using the article files located in the “DPS2015 Bootstrap
Resources” folder.
In InDesign, create the layout and use the Export dialog box to export an article file.
1. Make sure that you have installed the InDesign plug-ins that enable DPS 2015.
2. Launch the version of InDesign you’re using with DPS 2015.
3. Create or open an InDesign document. You can open the AvionicsArticle.indd In your
“DPS2015 Bootstrap Resources > InDesignFile” folder.
4. If desired, use the Overlays panel to add interactive overlay.
All overlays are supported in DPS 2015 except for panoramas.
5. Save the document, and choose File > Export.

Watch Video

Export InDesign Articles video

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 11


6. In the Export dialog box, choose “DPS Article.”

If you do not see a DPS Article option, make sure that you have the plug-ins installed.
7. Specify a name and location, such as “avionics.article” in the “InDesignFiles” folder.
Click Save.
8. In the Export dialog box, use the default settings and click OK.
You will be able to upload this article file later in this guide.
9. If you want to experiment, create or open other InDesign documents or layouts and
export additional article files.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 12


Managing Content
WITH DPS 2015, you use the Content & Layouts section to create articles and define proper-
ties. You can then upload article files created with InDesign or HTML. Watch Video

Manage Articles video]


Create an article and specify metadata
1. In the Portal (https://publish.adobe.com/), choose the project you created from the
“Select a Project” menu (if you have access to multiple projects).
2. Click Content & Layouts.
3. In the Content section, click the Add Content icon, and then click Add Article.

4. Specify the Article Name using a unique name that


can work well for linking between articles, and click
Done.
5. With the Article Metadata tab selected, specify the
Article Title that will appear in the viewer.
6. Fill in the “Article Title” and “Author” fields. This
metadata will come in handy when creating card
layouts later. Feel free to specify other metadata.
To make sure that the article can be downloaded in
this basic app, choose Free from the “Article Access”
menu.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 13


Now let’s add a thumbnail image. The thumbnail can appear as one of the cards on a collec-
tion browse page.
7. Click the Images tab, and then click Upload under “Article Image.”
8. Double-click the image file you want to use for article thumnail. For example, you can
use AvionicsCardImage.jpg in the “DPS2015 Bootstrap Resources > InDesignFile” folder.

9. Click Done to create the article.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 14


Upload the article file
The article is created, but it does not yet include the article file—the contents of the article.
1. In Content & Layouts, click the article you’re working on, and then click the icon for
uploading content.
You can also double-click the article to edit the properties, and then click the Content
Files tab.

2. Click Browse, and double-click the article file. For example, you can use an article file
you created earlier, or you can use any of the .article files in the “DPS2015 Bootstrap
Resources > ContentResources” folder.
3. Click Done.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 15


Create additional articles
1. Follow similar steps to create additional articles. (Before you can create articles, you
Selection Tips
must first deselect any selected article.) • Shift-click to select contiguous
articles.
• Command/Ctrl-click to select
non-contiguous articles.
• Click an article to select it and
deselect others.
• Click an article check box to
select or deselect it and leave
previous articles selected.

For each article, specify the Article Title and Author, upload an article image, and upload
an article file (either .article or .zip). There are a number of available assets in the “DPS2015
Bootstrap Resources > ContentResources” folder.

Publish articles
Publishing articles pushes them to the Distribution Service, where they can be downloaded Publish or Preview?
and viewed in your app.
The app you built has “Enable Pre-
1. In Content & Layouts, select the articles you want to publish. Shift-click to select multi-
ple articles. view” selected, which means it can
2. Click the Publish icon, and click Publish to confirm. display both published and unpub-
When the articles are published, their status changes to “Published.” If you edit the article, lished content. To view unpublished
the status changes to “Published, Out of Date.” content in your app, you can click
Before we can look at the published articles in your app, we need to add them to collec- the Preview button in Content &
tions. Layouts.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 16


Create a collection
A collection consists of content elements—articles, ads, banners, or other collections. For
example, a collection can be a monthly issue of a magazine, a set of articles by a certain
author, or a group of “best of ” articles from various collections.
Watch Video
In the app, a collection can be displayed as a browse page. The browse page appearance
is defined by card and grid layouts. Manage Collections video
1. In the Portal, click Content & Layouts.
2. Click Collections.
Depending on your project settings, you will see either a single “default” collection
or “default tablet” and “default phone” collections. This special collection determines
which items appear in your app menu. We’ll add items to this top-level collection later.
3. Click the Create New Collection icon to add a collection.

4. For Collection Name, type a unique name such as “yellowCollection.”


5. Specify a Collection Title (such as “Yellow Collection”) and a Short Collection Title
(such as “Yellow”).
The Collection Title is commonly displayed in card layouts. If you specify a Short Col-
lection Title, it appears in the app menu instead of the Collection Title.
6. For the “Collection Open Default” option, select Browse Page so that the collection
browse page is displayed instead of the first article in the collection.
7. For “Product IDs,” specify a Product ID for the collection. We recommend that you use
a reverse DNS format, such as com.company.projectname.collectionname.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 17


The Product ID you specify is added to the list of Product IDs in the Products & Sub-
scriptions area of the Portal. You can also add Product IDs to Products & Subscriptions
and choose them when editing the collection.

8. Add any other metadata you want to experiment with. Metadata is especially import-
ant when mapping content to cards. You can edit collection metadata at any time.
9. Click Upload Image, and then double-click the file you want to use for the thumbnail
image and then the optional background image. The “DPS2015 Bootstrap Resources >
Collection Resources” folder includes collection images that you can use.

10. Click Done.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 18


Add items to the collection
You can add articles and a collection to both the home collection and the default collection.
1. In Content & Layouts > Collections, select the collection you created.
2. Click the icon to add items to the collection.

3. Select the articles you want to add, and click Add. In our example, we added the yellow
articles to the yellow collection.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 19


4. Click the twirl-down arrow next to the check box to get a quick preview of the collec-
tion contents.

5. Double-click the collection title to edit its contents. For example, you can remove
items, or drag items to change their order.

6. Select the collection, and click the Publish icon to publish it.

Create additional collections


1. Follow the same process to create a few
more collections:
• Click the selected collection’s check
box to deselect it, and then click the
New icon.
• Specify a Collection Title, a
Product ID, and a Collection Image
for each collection.
• Add articles to each collection.
• Double-click a collection to edit its
contents.
2. Publish the collections.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 20


Set up a collection hierarchy
Now that you have a basic set of articles and collections in place, you’re ready to determine
how they will be displayed in the app. You have a number of different options. In this tutori-
al, you will add two more collections to create a nested structure.
1. Create a collection that will display additional, non-featured collections. In our exam-
ple, we call this the “Reference” collection.
2. Add collections to this “Reference” collection, and publish it. In our example, we added
all the color collections except for Purple, which we’ll be featuring.
3. Create a collection that will act as the initial view when your app launches. In our
example, we call this the “Launch” collection. We added the Purple collection, a few
articles, and the Reference collection.
4. Add collections and articles to this “Launch” collection, and publish it.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 21


Add items to the top-level “default” collection
Items you add to the default collection become top-level content. Top-level content ap-
pears in the app menu. The top-most item in the top-level collection is displayed when the
app launches.
1. In Content & Layouts, click the “default” collection, and then click the pencil icon to edit
properties.
2. Click the Images tab, click Browse under Collection Image, and specify any image.
The image you specify for the top-level collection does not appear in the app; howev-
er, at this time, it’s still required.
3. Click the icon to add items to the default collection.
4. Select the collections you want to add, and click Add. In our example, we added only
the “Launch” collection and the “Reference” collection.
5. Make sure that the top-most item in the default collection is the “Launch” collection. In
our example, we want “Launch” to be above “Reference.” (Double-click the collection
title to reorder items.)
6. Publish the “default” collection.
Items in the top-level nav
collection appear in the
app menu.

The browse page of


the top-most item
appears when the
app launches.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 22


View the app
1. Make sure that you have created, signed, and loaded the app onto your device, as
described previously.
2. Launch the app on your device.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 23


Designing the App Experience
CARDS AND LAYOUTS help determine the appearance of a collection browse page. Each
project includes a default card and a default layout. You can edit these defaults, and you can Watch Video
create additional cards and layouts.
Cards and Layouts video
Three factors determine the appearance of a collection browse page: card layouts, grid
layouts, and the collection content properties.

Edit the default layout


Let’s add margins and gutters to the default grid layout.
1. In Content & Layouts, click Layouts.
2. Select the Default Layout, and click the properties pencil
icon to edit it.
3. In the Layout Details tab, specify margin and gutter
spacing.
4. Click Done, and then publish the grid so that the changes
are reflected in your app. (It may take a few seconds for
the changes to appear in the app.)

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 24


Create new cards
When you create a card, you design the card, define the number of grid cells it spans, and
specify other properties.
In this tutorial, you’ll create two new cards: a 4x2 card that displays collections and a 2x1
card that displays featured articles. Feel free to design your cards however you want.
1. In Content & Layouts, click Cards, and click the icon to create a card.
2. Define the card properties.
For our first card, we created a card that spans 4 columns and 2 rows. We used one
metadata field for the Title, which we centered vertically. We increased the text size of
Title.

3. Click Done. Then publish the card.


4. Create another card for high-priority articles.
For our second card, we created a 2x1 card with two metadata fields: one for the Title
and one for Author. We used two different font sizes and used black text. We also add-
ed a top red border.
5. Click Done when you finish defining the card, and then publish it.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 25


Create a new layout
In this tutorial, you’ll create a new grid for collection browse pages that display articles..
1. In Content & Layouts, click Layouts, and click the icon to create a layout. (Click the
check box next to Default Layout to deselect it, if needed.)
2. Name the collection and specify layout properties.
In our example, we created a 4-column layout with margins and gutters. Feel free to
experiment with any design size—just make sure that you create a layout large enough
to display your cards. For example, a 4-column card cannot be displayed on a 3-col-
umn layout.
Now you’ll set up rules to map cards to content. Note that mapping rules do not deter-
mine the order of items on the browse page. Instead, mapping rules determine which
cards are assigned to which content. The first mapping rule that matches the content is
applied.
3. Click the “Card Mapping” tab. Click the icon to create a mapping rule. Leave the default
settings as is because this rule should map a card to any content.

4. Click Next, select “Default Card,” and click Done.


Now you’ll create a second mapping rule that applies high-priority articles to the larger
card.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 26


5. Click the icon to create a mapping rule. Choose “High” from the Importance pop-up
menu.

6. Click Next, select the new card you created, and click Done.

The more specific rule should be above the 1x1 rule; otherwise, the high-importance
articles will be assigned to 1x1 cards. Let’s add one more rule.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 27


7. Click the icon to create a mapping rule. Choose “Collection” from the Type pop-up
menu, and then click Next. Select the collection card, and click Done.

8. Click Done, select the layout, and click Publish.


9. In Content & Layouts, click Content, and edit article metadata to make sure that the
content will be applied properly to the cards.
For example, if your layout includes a mapping rule for articles set to a High impor-
tance, make sure that the first article in the collection is published with Article Impor-
tance set to High.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 28


10. In Content & Layouts, click Collections, and use the Layout tab in Collection Properties
to assign the new grid layout to at least one of your collections. Publish the collection.

11. View the modified collections in your app.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 29


Congratulations! You have completed this tutorial. Continue to experiment with different
designs and approaches. For additional information.
Read the User Guide (http://www.adobe.com/go/dps_beta_resources).
Visit the forum (http://forums.adobe.com/community/digitalpublishingsolution).

Our “Launch” collection displayed


in a browse page.
Tapping the “Reference Materials”
card displays this browse page.
Tapping an article card displays
one of the HTML articles.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 30


Appendix A: iOS Developer Program
IN ORDER TO BUILD APPS FOR IOS DEVICES, you must have a valid developer certificate
(and password), and you must have a mobileprovision file that includes your device ID.
If you have not already signed up for the iOS Developer Program, visit https://developer.
apple.com to get started. For purposes of creating DPS 2015 apps, you can enroll as either an
individual or a company. For more information about iOS membership and certificates, see.
Someone else in your company may already be enrolled in the iOS Developer Program.
You may be able to ask your IT department to create the required App ID, certificates, and
mobileprovision files. If so, this will make the process much easier for you. No knowledge of
Adobe DPS is required to create these items, so this is an easy task to delegate to someone
else.
If you are responsible for building the required certificates and submitting apps, we recom-
mend that you install Xcode on your computer. Xcode is available on the Apple iOS Develop-
er site.

Creating an iOS Development .p12 certificate


Creating the certificates involves a back-and-forth process between the Apple Developer
site and the Keychain Access utility on your computer.

Create a Development Certificate Signing Request


1. On the Apple iOS Developer site, go to “Certificates, Identifiers & Profiles.” Sign in with
your Apple ID.
2. Click Certificates on the left side of the window. 2

Watch Video
3. Click Development on the left side of the window under Certificates. 3

Selecting the options on the left side displays the certificates of each category. At this For instructions about setting up an
stage, you shouldn’t have any development certificates. You just need one develop- iOS developer account, watch this
ment certificate for testing all your iOS apps.
video:
http://adobe.ly/1mfX8b0

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 31


4. Click the Plus icon in the upper right corner of the window to start creating a certificate.
4

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 32


5. In the “What type of certificate do you need?” section, select iOS App Development.
Click Continue.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 33


As indicated on the Apple Developer site, you’ll now use the Keychain Access utility to
create a Certificate Signing Request (CSR).
6. Open the Keychain Access utility, found in the Utilities folder in your Applications
folder.
7. Click on the My Certificates category on the left. 7

8. Click on an empty space in the window on the right to ensure that no existing keys or
certificates are selected. 8

8
7

9. Choose Keychain Access > Certificate Assistant > Request a Certificate From a Certifi-
cate Authority.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 34


10. For User Email Address, specify a valid email address. 10

11. For Common Name, enter the name of your certificate you’re creating, such as “Plu-
ralist Development.” This name will appear in your list of certificates in the Keychain
Access utility. 11
12. Leave the CA Email Address field blank. 12

13. Select Saved to Disk. 13

10
11
12
13

14. Click the Continue button.


15. Specify the name of the certificate signing request and
where the file will be saved, and click Save. You will
use this file to create a development certificate in the
next section.
16. When the certificate request is created, click Done.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 35


Generate a Development Certificate
Now that you’ve created the certificate signing request file, you need to submit it to the
Apple Developer site to create the required development certificate.
1. In the Apple Developer site, click Continue to advance to the “Generate your certificate”
screen. Click Choose File, and double-click the certificate request file you just saved in
the previous steps. 1
2. Click Generate. 2

Your development certificate is generated.


3. Click Download, and then download the certificate to a known location.
This development certificate is called ios_development.cer. This file is required to cre-
ate your p12 certificate in the Keychain Access utility. You’ll do that next.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 36


Create a p12 Development Certificate
1. In the Finder, locate the ios_development.cer file you created, and double-click it. This
launches the Keychain Access utility and installs the certificate.
2. To see if the certificate was installed correctly, click on the Keys category on the left,
and then click the right-pointing arrow to open the private key. You should see the
certificate beneath the private key. If double-clicking the .cer file does not install the
certificate, launch Keychain Access and choose File > Import Items to specify the .cer
file. If that still doesn’t work, exit and re-start the Keychain Access utility and try again.

3. With Keys selected on the left, Control-click or right-click the private key associated
with your certificate, and choose Export “[name].”

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 37


Important: Control-click the private key (highlighted in red below), not the certificate.

4. Save your key in the Personal Information Exchange (.p12) file format. Specify a name
that distinguishes it from the p12 file you’ll create for the distribution certificate. For
example, we’re naming our development certificate Pluralist Design Development.p12.
Save the certificate into a known location where you won’t lose track of it. Do not use
any characters other than a–z, 0–9, hyphens, underscores, and spaces in the filename.

5. When prompted, specify a password for your p12 certificate, and click OK.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 38


Remember this password. Do not use a blank password. You will need this password
later when signing your app.

6. Specify the Administrator password for your computer, and click Allow.

You now have the p12 development certificate and password you need for signing the app.
You can now delete the certificate signing request file and the ios_development.cer file;
they are no longer needed, and you don’t want to accidentally select the wrong file later.
Keep your development p12 certificate in a safe place.

Create an App ID
Before you can build a mobileprovision file, you must create an App ID for your app. This
is a unique identifier required by Apple to identify an app. A different App ID is required for
each app that you create.
1. On the Apple iOS Developer site, go to “Certificates, Identifiers & Profiles.”
2. Click Identifiers, and make sure that App IDs is selected. 2

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 39


3. Click the Plus icon in the upper right corner of the window to create an App ID. 3

4. Type a description, such as the name of your app. 4

5. For App Services, leave Game Center and In-App Purchase selected (Apple enables
these by default), and do not select iCloud or Passbook. Select Push Notifications if you
want to enable push notifications. 5

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 40


6. For App ID Prefix (previously called “Bundle Seed ID”), leave the option set at Generate
New (if this is the first App ID you’ve generated) or Use Team ID (for additional App
IDs). In other words, don’t do anything here unless you really know what you’re doing.
6

7. Specify a Bundle ID. The Bundle ID (or Bundle Identifier) is usually specified in a form
called reverse domain name or com.domainname.applicationname. In other words,
if you work for Pluralist Design, your website is www.pluralistdesign.com, and your

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 41


application is called “Pluralist Lookbook,” your App ID would be com.pluralistdesign.
pluralistlookbook. 7

8. Click the Continue button.


9. If the settings look correct, click the Submit button, and then click Done.
The App ID will appear in the list. This same App ID will appear in various screens in later
steps in this process. For example, when you build the mobileprovision files for your app,
you’ll specify this App ID, and the App ID settings will be included in the mobileprovision
files.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 42


Register Your Device IDs (UDIDs) with Apple
When you build your app, you can preview the actual app on one or more iPads and
iPhones before submitting the app to the App Store. To preview the app, you will need to
provide Apple with a list of UDIDs (sort of like serial numbers) of each iOS device on which
you will want to preview your app.
Here is one way to discover the UDID of your iPad:
1. Attach your iPad or iPhone to your Macintosh with a USB cable.
2. Launch iTunes.
3. Select your device in iTunes.
4. In the Summary section, locate the serial number of your iPad.

5. Click the serial number, and it will change to the UDID. 5

6. Press Command+C to copy the UDID, and then paste the UDID into a text file or an
InDesign file for safekeeping. (You don’t select the UDID before copying—just press
Command+C and the UDID will be copied to the clipboard).
7. Repeat for each iPad, iPhone, or iPod that you will use to preview your app.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 43


8. Go to the Apple iOS Developer site at bit.ly/OVbhu5. You will need to sign in with your
Apple ID.
9. Click Devices on the left side of the window. 9

10. Click the Plus icon in the upper right corner of the window to add a device. 10

10

11. Enter a name and a UDID for one of the devices on which you will want to test your
app. This is the information you gathered in step 6, above. To enter the information for
another device, click the plus icon. When you have entered a UDID for each device that
you need, click the Continue button.
You should now have a list of each device on which you will want to test your app
displayed in the Devices section of the Provisioning Portal.

Create a Development Mobileprovision File


Mobileprovision files determine which iPads or iPhones can install and use your app. The
development mobileprovision file includes a list of iPad IDs called UDIDs. Unlike the p12
certificates, which can be reused for multiple apps, the mobileprovision files must be re­
created for each new app you design.
The mobileprovision file is tied to the App ID. If you edit the App ID—for example, if you
enable or disable push notifications—you must re-create the mobileprovision files to include
these changes.
1. In the Apple iOS Developer site (bit.ly/OVbhu5), click Provisioning Profiles on the left
side of the window. 1

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 44


2. Click the Development tab. 2

3. Click the Plus icon in the upper right corner of the window. 3

4. Select iOS App Development, and click Continue.


5. Specify the App ID, and click Continue.

6. Select your iOS development certificate.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 45


7. Specify the devices you want to provision. The development app you create will work
only on devices included in the development mobileprovision profile.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 46


8. Specify a name. Include “Development” in the name to distinguish it from the distribu-
tion file, but don’t include any special characters (such as asterisks) in the name. You
can rename these files after generating them. Then click the Generate button.

9. Click Download, and then download the development mobileprovision file to a known
location.
You have now created the development .p12 certificate and development mobileprovision
files that are required to build development apps. Store this file (and password information)
in a safe place.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 47


Appendix B: Android Certificates
Android systems require that all installed applications are digitally signed with a p12 cer-
tificate in which the private key is held by the application’s developer. Make sure that all
applications are signed. The system can’t install an application that is not signed. You can
use self-signed certificates to sign your applications. No certificate authority is needed.
It’s necessary that the certificate you create expires after October 22, 2033.
The following instructions tell you how to use Keytool to create a certificate.

(Mac OS) Create a certificate file using Keytool


1. Open Terminal, which is located in the Applications > Utilities folder.
2. Copy and paste the following line (replace “myname.key.p12” and “alias_name” with
your information, such as “johndoe.key.p12” and “johndoe”):
keytool -genkey -v -keystore myname.key.p12 -alias alias_
name -keyalg RSA -keysize 2048 -storetype pkcs12 -validity
10000
Specifying “10000” sets the expiration date after October 22 2033.

3. Enter and reenter a password. You specify this password when signing the app..

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 48


4. Follow the prompts to specify the certificate information.
When prompted to confirm choices, enter Yes, and then press Return to use the same
password.
A certificate is created in your prompt location, such as your user name folder. Copy this
certificate file to a known location. Write down the password as well.

(Windows) Create a certificate file using Keytool


1. Download and install Java SDK (JDK). Note the install location.
2. (Optional) Set a permanent path to run Java SDK commands. Setting a permanent path
lets you type JDK commands such as “keytool” from any path. That way, you don’t have
to navigate to the Java SDK directory. To set a permanent path, see step 4 of the JDK
site.
3. Open a command prompt. For example, enter “command” in the Run field or the
search field.
4. If you did not set a permanent path in step 2, navigate to the directory where JDK
commands are located. For example, type cd \ and then type cd program files\Java\
jdk1.6.0_24\bin (specify the correct version number).
5. Type (or paste) the following line (replace “myname.key.p12” and “alias_name” with
your information):
keytool -genkey -v -keystore myname.key.p12 -alias alias_
name -keyalg RSA -storetype pkcs12 -keysize 2048 -validity
10000

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 49


Specifying “10000” sets the expiration date after October 22, 2033.

Enter and reenter a password. You specify this password when signing the app.
6. Follow the prompts to specify the certificate information.
A certificate is created in your prompt location, such as your user name folder. Copy this
certificate file to a known location. Write down the password as well.
Note: If a certificate file is not created, replace “-keystore myname.keystore” with a target path
(such as -keystore c:\users\bob\bobcert.keystore) that you have access to.

Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 50


Adobe DPS (2015) version 2015.2.100 – 2015 July 8  Page 51

You might also like