Developing Apps with PhoneGap CLI
Adobe recommends using the SPA Editor for projects that require single page application framework-based client-side rendering (e.g. React). Learn more .
At any given time, as a developer you can run your app on a device or within a emulator, provided you've configured your development environment.
In order to run the following examples you will need a system that runs OSx (Mac) with Xcode, or a Mac/Win/Linux system with the Android SDK installed.
Bootstrap your development environment
For iOS: To develop for iPhones and iPads, you need Apple's Xcode IDE.
- Download it for free here .
For Android: To develop for iPhones and iPads, you need Google's Android Stuido IDE.
- Download it for free here .
Download the Source
Once you've successfully boostrapped your development environment, download the source from the AEM App Build Tile:
- Click on the PhoneGap Build tile dropdown chevron.
- Click Download Source.
- Select the desired source from the Download Source modal.
The development source contains the latest state of your app, while including un-staged changes. Use the Staging source for building release candidates for submitting to app store vendors.
If you never stage your app, selecting Staging will trigger the staging workflow (hint: this will show up as a staged app in the PhoneGap Enterprise Viewer App available in the AppStore and Google PlayStore).
- Click Download and save save the ZIP to your machine.
- Extract the downloaded zip file to your workspace.
Build and load the App (from source)
PhoneGap CLI can create a platform project, compile the source, and deploy the app in a single command.
You can do all these steps separately, see PhoneGap CLI docs .
- Make sure you've Installed PhoneGap CLI, see above.
- In a console (or terminal) window, navigate to the root directory of your extracted source.
- Enter the following command:
phonegap run android // -- or -- // phonegap run ios
If you have issues at this point, go back to basics to trouble-shoot -
- Create a new folder (mkdir test)
- Navigate into this new folder (cd test)
- Run 'phonegap create helloWorld'
- Navigate into helloWorld (cd helloWorld)
- Run 'phonegap run android (or replace android with ios as above).
This will verify that you're PhoneGap CLI development environment is up and running correctly.
Enable Safari Developer Tools
To enable the developer tools:
- Open Safari's preferences
- Click Safari in menu bar
- Click Preferences
- Click Advanced in Preference window
- Check "Show Develop menu in menu bar"
- Close the Preference window
Connect Safari to iOS
You can connect Safari to either an iOS device or emulator.
- In a console window, navigate to the root directory of your extracted source.
- Enter the following command to launch your app on your device or emulator.
phonegap run <platform> --device // -- or -- // phonegap run <platform> --emulator
- Open Safari
- Click Develop in the menu bar
- Select iOS Simulator sub menu
- Click on home.html
You can set breakpoints anywhere in your source. When you interact with your emulator or device, the execution of your app will stop at those breakpoints. You can step trough the execution and inspect the values in variables.
- Click Resources in the Web Inspector window
- Navigate the source tree and click on desired source file
- Click on the line number adjacent to add a breakpoint
- Interact with device or emulator
- Use the control buttons to continue execution, step over, step into and step out of methods:
To see the values of variables, in the current method, hover your mouse.
The Next Steps
Once you have learnt about Developing Apps with PhoneGap CLI, see Accessing Device Features .