Create your first Cordova app This guide shows you how to create a JS/HTML Cordova application and deploy them to various native mobile platforms using the cordova command-line interface (CLI). For detailed reference on Cordova command-line, review the Installing the Cordova CLI The Cordova command-line tool is distributed as an npm package. To install the cordova command-line tool, follow these steps:. Download and install.
On installation you should be able to invoke node and npm on your command line. (Optional) Download and install a, if you don't already have one. Following installation, you should be able to invoke git on your command line. The CLI uses it to download assets when they are referenced using a url to a git repo.
Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility. on OS X and Linux. $ cordova platform ls Running commands to add or remove platforms affects the contents of the project's platforms directory, where each specified platform appears as a subdirectory.
Note: When using the CLI to build your application, you should not edit any files in the /platforms/ directory. The files in this directory are routinely overwritten when preparing applications for building, or when plugins are re-installed.
See Also. Install pre-requisites for building To build and run apps, you need to install SDKs for each platform you wish to target. Alternatively, if you are using browser for development you can use browser platform which does not require any platform SDKs.
Installing Cordova. Cordova command-line runs on Node.js and is available on NPM. Follow platform specific guides to install additional platform dependencies. Open a command prompt or Terminal, and type npm install -g cordova. Install cordova on mac os x el capitan! Best explanation at all of how to Cordova installation This Video to help install Cordova developing apps for platforms!
To check if you satisfy requirements for building the platform. $ cordova requirements Requirements check results for android: Java JDK: installed.
Android SDK: installed Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23 Gradle: installed Requirements check results for ios: Apple OS X: not installed Cordova tooling for iOS requires Apple OS X Error: Some of requirements check failed See Also. Build the App By default, cordova create script generates a skeletal web-based application whose start page is the project's www/index.html file. Any initialization should be specified as part of the event handler defined in www/js/index.js. Run the following command to build the project for all platforms.
$ cordova run android Before running this command, you need to set up the device for testing, following procedures that vary for each platform. See Also. Add Plugins You can modify the default generated app to take advantage of standard web technologies, but for the app to access device-level features, you need to add plugins. A plugin exposes a Javascript API for native SDK functionality.
Plugins are typically hosted on npm and you can search for them on the. Some key APIs are provided by the Apache Cordova open source project and these are referred to as. You can also use the CLI to launch the search page. $ cordova plugin add cordova-plugin-camera Fetching plugin '[email protected]' via npm Installing 'cordova-plugin-camera' for android Installing 'cordova-plugin-camera' for ios Plugins can also be added using a directory or a git repo. NOTE: The CLI adds plugin code as appropriate for each platform. If you want to develop with lower-level shell tools or platform SDKs as discussed in the, you need to run the Plugman utility to add plugins separately for each platform.
(For more information, see.) Use plugin ls (or plugin list, or plugin by itself) to view currently installed plugins. Each displays by its identifier. $ cordova plugin ls cordova-plugin-camera 2.1.0 'Camera' cordova-plugin-whitelist 1.2.1 'Whitelist' See Also.
Using merges to Customize Each Platform While Cordova allows you to easily deploy an app for many different platforms, sometimes you need to add customizations. In that case, you don't want to modify the source files in various www directories within the top-level platforms directory, because they're regularly replaced with the top-level www directory's cross-platform source. Instead, the top-level merges directory offers a place to specify assets to deploy on specific platforms.
Each platform-specific subdirectory within merges mirrors the directory structure of the www source tree, allowing you to override or add files as needed. For example, here is how you might use merges to boost the default font size for Android devices:. Edit the www/index.html file, adding a link to an additional CSS file, overrides.css in this case.
Is a popular framework for building hybrid mobile applications. This post provides a complete guide on how to install it on a Mac running OS X or macOS, so you can deploy a Cordova-based app to your iOS or Android device. Since Cordova is the technology that underpins other frameworks such as, this post also acts as an installation guide for these projects.
This guide was last updated on 29th May 2017. If any of the steps below are out of date, please let me know via the comments section below.
Prerequisites To follow through this guide you’ll need:. A Mac running OS X (Mavericks or above) or macOS. An iOS or Android device, plus a USB cable to connect it to your Mac. In addition to the above, the following software is recommended (but not essential):. a terminal replacement app. Running Windows? You can still install Cordova and deploy to an Android device, the instructions can be found.
Steps Briefly, these are steps you need to take:. Ensure you have a valid Apple ID. Install and configure Xcode. Install and configure the Android SDK. Install the Cordova CLI and create a sample app. Deploy to the emulators. Deploy to your device 1) Apple ID You need an Apple ID to deploy to iOS devices.
If you don’t have an Apple ID, you can. If you have one but you’ve forgotten the password, you can. Tip: Even if you already have an Apple ID, consider using a separate Apple ID for development purposes. It will help to separate work and personal life.
2) Xcode Xcode is the IDE used on a Mac to create and publish iOS apps. It also comes with a set of command-line tools which are essential for deploying Cordova apps. Install The easiest way to download Xcode is through the Mac App Store:. Open the Mac App Store. Search for Xcode.
Xcode is a hefty download, weighing in at over 4GB, so you might want to skip to the next section (installing the Android SDK) while it is downloading, and come back here later. Command Line Tools Once Xcode has installed itself, you should open a Terminal window. Type the following. Xcode-select -install If the command line tools are already installed, a message will be shown in the terminal: xcode-select: error: command line tools are already installed.
Otherwise, a pop-up window will appear asking if you want to install the command line tools, click Yes and wait for these to download and install. Configure Open Xcode. You should see the Welcome to Xcode screen. In the top menu, press Xcode - Preferences.
In the Accounts tab, press + - Add Apple ID. Sign in with your Apple ID.
When complete, your account will appear in the list. You can now close the Preferences pane. Next Step We’re done with iOS for the time being.
In the next section, we’ll set up the Android SDK. 3) Android SDK The Android SDK is used to build Android apps. There are a few steps involved to get the Android SDK:. Install Java.
Install the Android command line tools. Install the Android SDK We’ll cover these steps now. Installing Java. Go to the. After accepting the license agreement, choose the Mac OS X file under the Java SE Development Kit section to begin the download. Once the.dmg file has downloaded, open it. Double click on the package installer icon.
The Java installer should appear - click through to install Java. To check that Java was installed correctly, open a terminal window and type java -version. You should see the Java version printed to the terminal.
Installing the Android command line tools. Go to the. Click on the zip file for the Mac platform to download the tools to your Mac.
When it has finished downloading, open the zip file to extract the contents. Create a new folder in your home directory named android.
Move the tools folder from the zip into the new android folder. When you are done, you should have a new folder at /Users//android/tools. Installing the SDK We’ll now use the Command Line tools to install the SDK and other necessary tools. Open a terminal window. Type the following commands.
Cd /android/tools/bin./sdkmanager 'build-tools;25.0.3' 'emulator' 'platforms;android-25' 'platform-tools' 'system-images;android-25;googleapis;x86' -verbose./avdmanager -v create avd -n x86 -k 'system-images;android-25;googleapis;x86' -g 'googleapis' Make sure to accept the license agreement. Once these commands have completed, your android folder should contain a whole bunch of new directories, including:. build-tools - these are the tools used by Cordova to build your Android app. emulator - this is the Android emulator that will be used later to preview the app on your Mac. platforms - this is the Android SDK, separated by platform version. These correspond to the releases of Android: Nougat, Marshmallow, etc. The command above has downloaded the most recent platform version (25).
platform-tools - more tools that are used to administer Android devices on the command line. system-images - these are images used by the emulator. Installing Gradle Gradle is a tool that is required by the Android SDK to build Android apps.
It used to be included with the Android SDK, but now it must be downloaded and configured manually. Find the binary-only version of the latest release and select it to begin the download. When the download has finished, unzip the file. Rename the resulting folder to just gradle. Move this gradle folder to the android folder that was created above. Configuration In order to make this dizzying array of tools available to Cordova, and to us when using the terminal, we need to set some environment variables.
To do this:. In a terminal window, type nano /.bashprofile.
Add the following lines to the file: export ANDROIDHOME=$HOME/android export PATH=$PATH:$ANDROIDHOME/emulator:$ANDROIDHOME/gradle/bin:$ANDROIDHOME/platform-tools:$ANDROIDHOME/tools/bin. Type Ctrl-X and then y and Enter to save the file. Back in the terminal, type source /.bashprofile to setup the environment variables. Note: If you are using a different shell (such as zsh) you will need to add the environment variables above to the correct shell file. If you don’t know what shell you are using, ignore this (you’ll be using bash).
To test that all of this has worked, try typing the following into the terminal window: adb version gradle -v After running each command, you should see the respective tool print its version number. If any of these commands results in a command not found, the environment has not yet been setup correctly.
Please double check that the above steps have been carried out before continuing. Next Step If you have got this far, congratulations! We have now set up the iOS and Android SDKs. The next step is to install the Cordova CLI and create a sample app. 4) Install the Cordova CLI Install node.js The Cordova CLI requires node.js.
If you have already installed node, you can skip to the next section. Otherwise:. Go to the. Click on the ‘Macintosh Installer’ box to download the LTS version of node for Mac. When the file has downloaded, click on it to run the installer.
Set npm permissions If you have already used npm, you might have found that you can’t install packages without prefixing your command with sudo. To fix this, it’s recommended to. Install Cordova. In a terminal window, type npm install -g cordova. When this finished, you should be able to run the command cordova -v which should print the cordova version to the terminal. Install iOS deployment tools To deploy to the iOS simulator and devices from the terminal, we should also install two more packages: npm install -g ios-sim ios-deploy We’ll use these tools later.
Create a sample app We’ll now create a sample app which we can deploy to the simulator and device. Open a terminal and change to a folder where you are happy for code to live. The commands below will generate a new cordova project in a subdirectory of whichever folder you are currently in. For example, if you have code living in folders at /Users//Code, change to this directory before running the commands below. Once you are in the correct directory, run the following.
Cordova create cordova-hello-world cd cordova-hello-world cordova platform add ios android cordova build These commands will create a new cordova project, add the iOS and Android platforms, and build the respective files for deployment to iOS and Android. Before continuing, please ensure that the commands above all worked correctly, with no errors. If there were any errors, you’ll need to go back and check that the iOS and Android SDKs were both installed correctly, and that you’ve set the environment variables correctly.
Note: if you see the following error: xcode-select: error: tool 'xcodebuild' requires Xcode. Then run the following commands to try again. Cordova emulate android The emulator should launch and display the app: Note: If you see an error in the terminal such as Failed to sync vcpu reg when the emulator is starting, this means that the emulator cannot start its virtual machine.
To solve this problem, make sure you aren’t running any other virtual machines on your Mac. This includes Virtualbox (or Vagrant), VMWare and Docker. Close all of these applications before trying again.
6) Deploy the sample app to your device The final step in the process is to deploy the app to your device(s). Change Bundle ID Before the app is deployed, the Bundle ID of the app needs to be changed to something unique. A Bundle ID is used to uniquely identify an app. When building for an iOS device, Xcode will verify that the bundle ID has not been used by any other iOS app.
The convention for a Bundle ID is to use a reverse domain identifier, followed by the name of the app. For example, using a domain fiznool.com and an app name of Hello Cordova, the Bundle ID would be com.fiznool.hellocordova.
If you own a domain, you can use the above convention, otherwise use a random string of alphanumeric characters. Once you have chosen your Bundle ID, update it by editing the file config.xml in the project root directory. You are looking for the section that reads widget id='io.cordova.hellocordova' - change io.cordova.hellocordova to your new Bundle ID. When you change the Bundle ID, you need to regenerate the platform files. Do this by running the following commands from the project root directory in the terminal.
Cordova run ios Android If you have an Android phone or tablet running Android 4.4+, you can deploy the app to your device. You’ll need a USB cable to connect your device to your Mac. To begin, you need to configure your device to accept deployments from your Mac:.
Open the Settings app on your device. Scroll to the bottom of the list and tap About phone or About tablet. Scroll to the bottom of the list and find the Build number item. Tap on the Build number item seven times. This will enable a new menu item Developer Options in the main Settings app. Go back to the Settings app and tap on the new Developer Options item.
You should see a screen resembling the following:. If not enabled, tap the toggle switch to enable ‘Developer Mode’. Scroll down and find the item ‘USB Debugging’ and tap the toggle switch to enable USB Debugging. Your device can now accept app deployments from your Mac. To continue:. Ensure your device is unlocked. Connect your device to your Mac with the USB cable.
You should see a message to ‘Allow USB Debugging’. Check the ‘Always allow from this computer’ checkbox and tap ‘OK’. Open a terminal window and type adb devices. You should see your device listed as attached in the terminal. You can now deploy the app to your device:. In the terminal, type: cordova run android After a short while, the app will be deployed and automatically opened on your device. Next Steps You’ve now got Cordova installed, configured and running on your Mac, and you are able to deploy apps to the simulators and devices.
You’re in good shape! I’d recommend taking a look at the, which builds on Cordova by providing a set of platform-specific UI components and additional build tools to help you build an awesome hybrid mobile app.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |