Developing Apps with PhoneGap CLI developing-apps-with-phonegap-cli
- The Universal Editor for visually editing headless content.
- The Content Fragment Editor for form-based editing of headless content.
At any given time, as a developer you can run your app on a device or within an emulator, provided you鈥檝e configured your development environment.
To run the following examples, you need a system that runs macOS X with Xcode, or a Mac/Win/Linux system with the Android鈩 SDK installed.
Bootstrap your development environment bootstrap-your-development-environment
Setup PhoneGap CLI (https://docs.phonegap.com/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface)
For iOS: To develop for iPhones and iPads, you need Apple鈥檚 Xcode IDE.
- Download it for free .
- PhoneGap iOS platform guide (
https://docs.phonegap.com/en/4.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide)
For Android鈩: To develop for iPhones and iPads, you need Google鈥檚 Android鈩 Stuido IDE.
- Download it for free .
- PhoneGap Android鈩 platform guide (
https://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide)
Download the Source download-the-source
When you have successfully bootstrapped your development environment, download the source from the AEM App Build Tile:
- Click the PhoneGap Build tile dropdown chevron.
- Click Download Source.
- Select the desired source from the Download Source modal.
- Click Download and save the ZIP to your computer.
- Extract the downloaded zip file to your workspace.
Build and load the App (from source) 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.
https://phonegap.com/blog/2014/11/13/phonegap-cli-3-6-3/).- Make sure you鈥檝e 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
- Create a 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). - Emulator opens running your newly created PhoneGap App, saying 鈥楧evice Ready鈥 if the JavaScript Bridge to native is operational.
Debug JavaScript with Safari and IOS debug debug-javascripts-with-safari-and-ios-debug
You can debug your app鈥檚 JavaScript using Safari鈥檚 developer tools, the same way you would with a web application.
Enable Safari Developer Tools enable-safari-developer-tools
To enable the developer tools:
-
Open Safari鈥檚 preferences
- Click Safari in menu bar
- Click Preferences
-
Click Advanced in Preference window
- Check 鈥淪how Develop menu in menu bar鈥
- Close the Preference window
Connect Safari to iOS 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 so you can 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 submenu
- Click home.html
Debug JavaScript with Safari鈥檚 Web Inspector debug-javascript-with-safari-s-web-inspector
You can set breakpoints anywhere in your source. When you interact with your emulator or device, the running of your app stops at those breakpoints. You can step through the running and inspect the values in variables.
- Click Resources in the Web Inspector window
- Navigate the source tree and click the desired source file
- Click the line number next 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:
The Next Steps the-next-steps
After you have learned about Developing Apps with PhoneGap CLI, see Accessing Device Features.