Cordova - First Application

Cordova - Your First Application

Now that you’ve set up your Cordova development environment, you’re ready to create and run your first hybrid application. This guide will walk you through the basic steps.

Step 1 - Creating the App

Open your terminal or command prompt and navigate to the directory where you want to create your project (e.g., your Desktop or a dedicated projects folder).

Use the cordova create command:

cordova create MyCordovaApp com.example.mycordovaapp "My First App"

Let’s break down this command:

• MyCordovaApp: This is the directory name where your project files will be created. It’s also used as a default for the app name if not specified otherwise.
• com.example.mycordovaapp: This is the reverse domain-style package identifier for your app (e.g., io.cordova.hellocordova was a common default). Replace com.example with your own reverse domain (e.g., com.yourcompanyname). This ID must be unique if you plan to publish to app stores.
• "My First App": This is the display title of your application, which users will see.

After the command completes, a new directory named MyCordovaApp (or whatever you chose) will be created with the basic project structure.

Step 2 - Adding Platforms

Navigate into your newly created project directory:

cd MyCordovaApp

Before you can build and run your app, you need to add one or more target platforms. To add a platform, you must have the respective platform’s SDK installed on your system (e.g., Android SDK for Android, Xcode for iOS).

Example: Adding the Android platform:

cordova platform add android

Example: Adding the iOS platform (requires macOS and Xcode):

cordova platform add ios

Other platforms you might add (availability depends on your development OS and installed SDKs):

cordova platform add browser
cordova platform add windows
# cordova platform add osx (for macOS desktop apps)

You can list installed and available platforms with:

cordova platform ls

To remove a platform:

cordova platform remove android

Step 3 - Building and Running the App

Once you’ve added a platform, you can build the application for that platform.

To build for Android:

cordova build android

To build for iOS:

cordova build ios

After a successful build, you can run your app on an emulator/simulator or a connected physical device.

Running on an Emulator/Simulator

Ensure you have an emulator/simulator configured (e.g., an Android AVD set up via Android Studio, or an iOS Simulator via Xcode).

cordova emulate android
# or for iOS
cordova emulate ios

Running on a Physical Device

Connect your device to your computer via USB. For Android, enable USB Debugging in Developer Options. For iOS, you might need to trust the developer profile on the device.

cordova run android
# or for iOS
cordova run ios

Note: For faster Android emulation, it’s recommended to use Android Virtual Devices (AVDs) managed through Android Studio, which often offer better performance and hardware acceleration than older default emulators. For iOS, the simulators provided with Xcode are generally performant.

If everything is set up correctly, your app should launch on the device/emulator, displaying the default Cordova welcome screen.

Project Structure Overview

Key directories and files in your Cordova project:

• www/: This is where your web application code (HTML, CSS, JavaScript) resides. This is the primary folder you’ll be working in for app content and logic.
• config.xml: The main configuration file for your app. It contains metadata like app ID, name, author, preferences, and plugin configurations.
• platforms/: Contains platform-specific project files generated by Cordova when you add a platform (e.g., platforms/android for an Android Studio project, platforms/ios for an Xcode project). You generally shouldn’t edit files here directly unless you know what you’re doing, as they can be overwritten by Cordova commands.
• plugins/: Stores the code for any plugins you’ve added to your project.
• hooks/: For custom scripts that can be triggered at different points in the Cordova build process.
• res/ (often inside www/ or project root, then configured in config.xml): For platform-specific resources like icons and splash screens.

You are now ready to start customizing your app by editing the files in the www directory and adding Cordova plugins for native device features!