Building with Cordova - PART 01 - Setting Up

1

Stats

6,138 visits, 9,603 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 2 Oct, 2015. Last updated 19 Feb, 2019

Hello, everyone.

Since there are some questions about Intel XDK alternatives, I will post a simplified method to compile your projects using Cordova with Crosswalk directly instead of having to use Intel XDK.

This is part 1 of the tutorial series and I'll try to simplify the setup process for Cordova.

Step 1: Install node.js

Go to the node.js website, download and install node.js.

We'll need it because of the npm environment and plugin database. You don't need to know what NPM is right now. Its use is very straightforward and Cordova uses it.

Just follow the installer steps. You don't need to change option there and you can install the latest version of node.js.

Step 2: Open a terminal window

Most of the things we'll do from now on we'll involve typing commands on a terminal or console window. Choose "cmd" using the default Windows "run"action.

Step 3: Install Cordova

Type "npm install -g cordova" and wait a few minutes while npm downloads the required files and install Cordova.

Step 4: Check if Cordova was successfully installed

Type "cordova --version" and it should show Cordova's version number.

Step 5: Create a Cordova project

In our tutorial, I will use the folder "MyCordovaProject" in my default disk ("C:[/b]"). I will follow this location so the tutorial is easy to understand on the next steps.

5.1 - First, make the current folder to be the C disk's root folder:

5.1.1 - Type "C:" and press enter in case you're not in the C disk

5.1.2 - Type "cd [/b]" and press enter again to go to the root folder

5.1.2 - Issue the following command:

"cordova create MyCordovaProject com.mycompany.myproject MyFirstProject"

Now to explain what all that means (see image below):

(1) - This is the folder Cordova will create for our project.

(2) - Your game's identifier. It's always good to identify your game with a unique name.

(3) - The project's title.

Cordova will create the "MyCordovaProject" folder. Here's your project's folder structure:

The config.xml file is important and we'll need to make certain changes so our application will behave the way we want in multiple platforms. It's a global configuration file for your project.

The "www" folder is where our Construct 2 game will be exported to.

Step 6: Export your project in Construct 2:

6.1 - Click on the "Export Project" button in Construct 2

6.2 - Choose the Cordova exporter in the Mobile section

6.3 - As destination folder, choose "C:\MyCordovaProject\www"

6.4 - Leave the "minify script" option unchecked. We only need that for browser games.

6.5 - Export and voilá!

Next tutorial will show how to configure and build for Android. Please stay tuned.As always, suggestions and opinions are always welcome! ;-)

Next tutorial:

Building with Cordova - PART 02 - Build an Android App

  • 0 Comments

Want to leave a comment? Login or Register an account!