The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Creating Your First Cordova Project

Next ►
►

In this section, we will guide you through the process of creating your first Apache Cordova project. By the end of this lesson, you will have a basic Cordova application running on your development machine.

Prerequisites

Before you start, ensure you have the following:

  • Node.js and npm installed on your machine.
  • Apache Cordova CLI installed globally via npm.
  • A code editor (e.g., Visual Studio Code, Sublime Text).
  • Basic understanding of command-line operations.

Step-by-Step Guide

  1. Install Apache Cordova CLI

First, you need to install the Cordova CLI if you haven't already. Open your terminal or command prompt and run the following command:

npm install -g cordova

This command installs Cordova globally on your system, making it accessible from any directory.

  1. Create a New Cordova Project

Navigate to the directory where you want to create your project. Use the following command to create a new Cordova project:

cordova create myApp com.example.myapp MyApp
  • myApp: The directory name for your project.
  • com.example.myapp: The reverse domain-style identifier for your app.
  • MyApp: The display name of your app.

  1. Navigate to Your Project Directory

Change your directory to the newly created project folder:

cd myApp

  1. Add Platforms

Cordova supports multiple platforms. For this example, we'll add the Android and iOS platforms. You can add other platforms as needed.

cordova platform add android
cordova platform add ios

  1. Build the Project

Now, let's build the project for the added platforms:

cordova build android
cordova build ios

This command compiles your project and prepares it for deployment on the specified platforms.

  1. Run the Project

To run your project on an emulator or a connected device, use the following commands:

cordova run android
cordova run ios

Understanding the Project Structure

After creating your project, you'll notice several files and directories. Here's a brief overview of the key components:

  • config.xml: The configuration file for your Cordova project. It contains metadata about your app, such as its name, version, and platform-specific settings.
  • www/: The directory where your web assets (HTML, CSS, JavaScript) are stored. This is the main directory for your app's code.
  • platforms/: Contains platform-specific code and assets. Each platform you add will have its own subdirectory here.
  • plugins/: Contains any Cordova plugins you add to your project.
  • hooks/: Scripts that can be triggered at various stages of the Cordova build process.

Practical Example

Let's create a simple "Hello World" application to see Cordova in action.

  1. Edit index.html: Open www/index.html in your code editor and replace its content with the following:

    <!DOCTYPE html>
<html>
<head>
    <title>My First Cordova App</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        document.addEventListener('deviceready', function() {
            document.getElementById('message').innerHTML = 'Hello, Cordova!';
        }, false);
    </script>
</head>
<body>
    <h1>Welcome to My First Cordova App</h1>
    <p id="message">Loading...</p>
</body>
</html>

  2. Build and Run: Save the file, then build and run your project again:

    cordova build android
cordova run android

    You should see a simple app displaying "Hello, Cordova!" on your device or emulator.

Common Mistakes and Tips

  • Ensure Dependencies are Installed: Make sure all required dependencies (Node.js, npm, Cordova CLI) are installed correctly.
  • Check Platform-Specific Requirements: Each platform (Android, iOS) has its own set of requirements (e.g., Android SDK, Xcode). Ensure these are installed and configured.
  • Use cordova prepare: If you make changes to your www/ directory, use cordova prepare to copy the changes to the platform-specific directories.

Conclusion

Congratulations! You've successfully created and run your first Apache Cordova project. In this lesson, you learned how to set up a new Cordova project, understand its structure, and run it on different platforms. This foundational knowledge will be crucial as you move forward in building more complex applications with Cordova.

Next, we will dive deeper into the core concepts and APIs that Cordova offers, starting with Cordova plugins.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved