Creating your First APK with the Cordova CLI - Part I
Diego Lizarazo Rivera
Sr. Developer Evangelist
Apache Cordova is an excellent option for developers who already have a web application and want to port it to the different mobile platforms, or just want to have a consistent way to create cross-platform mobile web apps.
This blog is the first in a series to introduce you to Cordova, and how to create different types of mobile applications using standard web technologies. In this post, we will cover Cordova basics and the prerequisites for your development environment. The following post will get into details on how to create your first app, and then to publish the resulting APK in Samsung’s Galaxy Store.
In an upcoming blog I’ll talk about Photon Storm’s Phaser, that is one of the most trusted frameworks for developing professional-quality 2D games in JavaScript. With Phaser, it’s feasible to make performant games that run smoothly in all major mobile operating systems, while only having to maintain one codebase. Additionally, you can rely on the huge JavaScript community to keep creating libraries that you can easily integrate in your games.
What is a Mobile Web App
Let’s start checking what is a mobile web application: In the context of this post, we will refer to applications for mobile devices that require only a Web browser to be installed on mobile device. They commonly use HTML and Ajax, but are not written specifically for one mobile operating system.
Mobile web applications differ from mobile native applications, in that they use Web technologies and are not limited to the underlying platform for deployment. This will give you the advantage of creating cross-platform applications using technologies that you may be familiar with in your front-end projects, and the ability to access a wide array of libraries and popular frameworks.
What is Cordova
A typical challenge faced by mobile app developers is to achieve solid support of as many mobile clients as possible, and each one can have its own set of quirks and drawbacks. This, clearly, increases costs and development time. That is why cross-platform development tools like Cordova are so widely used and supported.
Cordova is a platform used for building mobile apps with standard web technologies, namely HTML, CSS and JavaScript. Think of Cordova as a container that connects your web apps with native mobile functionalities through a unified JavaScript API. Web applications don’t have access to native mobile functionalities by default, and that is the problem that Cordova was created to solve. Cordova connects the world of web app development and mobile devices, creating hybrid mobile apps that can use camera, geolocation, file system and other native mobile capabilities.
In this post we will focus on the use of the Cordova CLI (Command Line Interface), mainly because you will be able to use it for multiple platforms, and that fits perfectly with the needs of most developers interested in using Cordova, to start with.
Pros of Cordova
-
Easy to learn: If you are a front end developer, Cordova has an easy learning curve. You can easily apply your skills as a web developer, and knowledge of standard web technologies, to build an app with Cordova. All you really need is to learn a little bit about the command line tools and you will be running with Cordova in no time.
-
Access to Native Functionalities: With Cordova, you will have access to native device capabilities, such as the camera, push notifications, contacts, geolocation, accelerometer, SMS, and others.
-
Open Source: Anyone can contribute to Cordova’s source code to make it better. This also gives it a solid contributor base that is creating custom plugins and fixing bugs.
-
Cross-platform development: Cordova compiles your app into a package file, which is required by most app stores. This means that apps created with Cordova can easily be deployed to the mobile operating system your choosing. If you’re deploying to Android, Cordova creates an APK (Android Application Package) file. This is the file that we will create in this blog post.
Prerequisites:
Node.js
We’ll be dealing with purely JavaScript (and perhaps a little bit of HTML) through this post, so all you need to install manually is Node.js. This will give you the node and NPM executables on your system.
To install Node.js you can go to their official site and download the latest version available for your operating system.
On Mac you can download the installer from the official page:
Or you can download the package with bash:
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ \
| sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg"\
&& sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
On Windows is just easier to download the correct installer:
And then follow the instructions:
It may prompt you to install more necessary tools.
Installing Cordova
Once Node.js is installed, download the Apache Cordova command line by running this command in your terminal/command prompt. The Cordova module will automatically be downloaded by the NPM utility.
On Windows you should open your command shell and type:
npm install -g cordova
On Mac and Linux open your terminal and type:
sudo npm install -g cordova
You may be prompted to type your operating system password, and after that you should see the installation progress in your command or terminal window.
The -g flag in the command above is needed so NPM installs Cordova globally. If you don’t use this option, Cordova will be installed only for your the current working directory.
After the installation is completed, you can type cordova on the command line and it should display the main help for the Cordova CLI.
That's it for today. In the next post, we'll talk more about using this tool.
Talk with us
We love to chat with mobile game developers and help you as you develop, publish, and market your own games. Galaxy Store is a great place to publish your game and get discovered. If you are a mobile app developer and want to request a quick chat with us, just fill out this form.
