Building Mobile Applications
Adobe recommends using the SPA Editor for projects that require single page application framework-based client-side rendering (e.g. React). Learn more .
Build your application to install to a device or simulator for testing or for publishing to app stores. You can build applications locally using the PhoneGap Command Line Interface, or in the cloud using PhoneGap Build.
A complete step-by-step article on how to build a mobile application using code available from GitHub is available here .
Moving the Application to the Publish Instance
Move application files to the publish instance so that you can provide content updates to the installed instances of the mobile application, and to build the application using the published content. Applications consist of two node branches in the repository:
- /content/phonegap/apps/<application name> : The web pages that authors create and activate.
- /content/phonegap/content/<application name> : Application configuration files and Content Sync configurations.
If you do not move the application files to the publish instance, content authors cannot update the Content Sync cache.
You only need to move the files in the /content/phonegap/content/<application name> branch to the publish instance. The files in the /content/phonegap/apps/<application name> branch are moved when the author activates the pages.
AEM provides two methods for moving bulk content to the publish instance:
- Use the Activate Tree command on the replication console.
- Create a package that contains the content and replicate the package.
For example, a mobile application named phonegapapp is created. The following node must be moved to the publish instance: /content/phonegap/content/phonegapapp.
Tip: To move a package from the author instance to the publish instance, use the Replicate command on the package.
Building Using the PhoneGap Command Line Interface
Compile the PhoneGap application on your computer using the PhoneGap Command-line Interface (CLI). To include the AEM content into your application, AEM creates a ZIP file that contains the content of your mobile application, Content Sync configurations, and other required assets. Download the ZIP file and include it in your build.
Preparing Your Build Environment
To build using the PhoneGap CLI, you need to install Node.js and the PhoneGap client utility. You require an internet connection to perform the following procedure.
- Download and install Node.js .
- Open a terminal or command prompt and enter the following node command to install the PhoneGap utility:
npm install -g phonegapOn a Unix or Linux system, you may need to prefix the command with sudo .The terminal shows the results of a series of HTTP GET commands. When the installation is succesful, the terminal shows where the libraries are installed similar to the following example:
/usr/local/bin/phonegap -> /usr/local/lib/node_modules/phonegap/bin/phonegap.js firstname.lastname@example.org /usr/local/lib/node_modules/phonegap ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org (...) ├── email@example.com (...) ├── firstname.lastname@example.org (...) ├── email@example.com (...) └── firstname.lastname@example.org (...)
- (Optional) Obtain the SDK for the mobile platform that you are targeting:
Downloading the Content ZIP File
Move the content of your mobile application to your file system.
- On the Mobile Applications page, select your application.
- (Optional) To build the application for complete installations, on the toolbar, click or tap the Clear Cache icon.The cache holds content updates for installed applications. Clearing the cache voids all cached updates.
- On the toolbar, click or tap the Download CLI Assets icon.
- After you have saved the ZIP file, click Close on the Success dialog.
- Extract the contents of the ZIP file.
Using the PhoneGap CLI to Build
Use the PhoneGap CLI to compile and install the application. For information about how to use the PhoneGap CLI, see the PhoneGap Command-line Interface documentation.
- Open a terminal or command prompt and change the current directory to the downloaded application ZIP file. For example, the following changes the directory to the ng-app-cli.1392137825303.zip file:
- Enter the phonegap command for the platform that you are targeting. For example, the following command builds the app for Android:
phonegap build android
Building Using PhoneGap Build
Use the PhoneGap cloud service to build your app. To perform this procedure, you must first create a PhoneGap Build configuration.
Connecting to PhoneGap Build
Create a PhoneGap Build configuration so that you can use the PhoneGap Build services from within AEM. Provide the user name and password of the PhoneGap Build account that you will use to build your mobile applications.
- Open the Tools page. ( http://localhost:4502/tools.html ).
- In the CQ Operations area, click Cloud Services.
- Click the Configure Now link for PhoneGap Build.
- In the Create Configuration dialog, type a value for the Title property. By default, the value of the Name property is derived from the title, however you can enter a name. Click Create.
- In the PhoneGap Build Configuration dialog, type your PhoneGap Build user name and password, and then click OK.
Using PhoneGap Build
Send your application resources to PhoneGap Build for compiling for the various mobile platforms.
- On the Mobile Applications page, open your mobile application. ( http://localhost:4502/mobile.html/content/phonegap )
- (Optional) To build the application for complete installations, select the application and click the Clear Cache icon.The cache holds content updates for installed applications. Clearing the cache voids all cached updates.
- Select the splash page, and then click the Build Remote icon.Note: The Beta version of AEM Beta does not create an Inbox notification when the build successfuly completes.
- In the Success dialog box, click PhoneGap Build to open the Adobe PhoneGap Build page at https://build.phonegap.com/apps . If you are waiting for your app to appear, you can check the PhoneGap Build Status page.For information about installing the build, see the PhoneGap Build Documentation .Free PhoneGap Build accounts are allowed one private application. PhoneGap builds fail if you are building an additional private application.
The Next Steps
The next step after the building process is learning about the Structure of an app .