How to Develop the Cordova HTML5 application on the Ubuntu mobile platform, cordovahtml5

How to Develop the Cordova HTML5 application on the Ubuntu mobile platform, cordovahtml5

We know that Cordova HTML5 applications have the features of platforms and the ability to access some local resources. In this article, we will introduce how to create and run a Cordova HTML5 application to our Ubuntu mobile phone. The original English text of this article is "http://developer.ubuntu.com/en/#/html-5/guides/cordova-guide /".

1) install our armhf chroot
If the developer has read my previous article "Ubuntu SDK installation", you may have installed your armhf chroot. In addition to installing the chroot we need in the SDK, we can also use the following command to install the chroot we need. The following uses the 15.04 framework as an example:

$sudo click chroot -aarmhf -f ubuntu-sdk-15.04 create  

You can type the preceding command in the command line to create the armhf chroot of 15.04. After the installation is complete, we can proceed to the next step. If developers want to compile for the 14.10 target, they can also use the same method to install the 14.10 armhf chroot.

2) install Cordova
In this step, we will install the Cordova environment. If you have installed it before, we recommend that you use the following method to delete the previous installation (due to the previous installation bug ). Skip this step if you have never installed:

$rm -rf ~/.cordova$rm -rf ~/.cache

This is to completely delete the installation that has previously been installed on your computer.
Then, follow the steps below to install Cordova:

$ sudo apt-add-repository ppa:cordova-ubuntu/ppa; sudo apt-get update$ sudo apt-get install cordova-cli

In this step, we have basically created our Cordova environment.

3) create a simple Cordova routine
Currently, 14.10 of the architecture is the default development framework, although there will be changes in the future. In the following command, if no specific architecture is specified, the 14.10 architecture will be used.
Use the following command to create a simple Cordova application:

$cordova create myapp  myapp.mycompany "My App"$cd myapp$cordova platform add ubuntu$vi config.xml

Note:: Add the following sentence to your config. xml to ensure that your application has an icon:

  <icon src="www/img/logo.png" />

In addition, please add your own valid email address in config. xml:

 <author email="myid@ubuntu.com" />

In this way, the entire config. xml file is as follows:
Config. xml

<?xml version='1.0' encoding='utf-8'?><widget id="myapp.mycompany" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">    <name>My App</name>    <description>        A sample Apache Cordova application that responds to the deviceready event.    </description>    <author email="myname@mycompany.com" href="http://cordova.io">        Apache Cordova Team    </author>    <content src="index.html" />    <plugin name="cordova-plugin-whitelist" version="1" />    <access origin="*" />    <allow-intent href="http://*/*" />    <allow-intent href="https://*/*" />    <allow-intent href="tel:*" />    <allow-intent href="sms:*" />    <allow-intent href="mailto:*" />    <allow-intent href="geo:*" />    <platform name="android">        <allow-intent href="market:*" />    </platform>    <platform name="ios">        <allow-intent href="itms:*" />        <allow-intent href="itms-apps:*" />    </platform>    <icon src="www/img/logo.png" /></widget>

In this way, the entire Cordova template has been created. Next we will describe how to compile.

4) compile our template Cordova Application
We can use the following command to compile our mobile phone:

$ cordova build --device

As we mentioned above, it selects a default version of armhf chroot for compilation. Currently it refers to 14.10. During the first compilation, we may need to install some additional libraries for compilation. The following error message is displayed:

List of devices attached 750ABLLH4897deviceTarget Device: 750ABLLH4897Building Phone Application...Error: missing dependency inside armhf chrootrun:sudo click chroot -a armhf -f ubuntu-sdk-14.10 install cmake libicu-dev:armhf pkg-config qtbase5-dev:armhf qtchooser qtdeclarative5-dev:armhf qtfeedback5-dev:armhf qtlocation5-dev:armhf qtmultimedia5-dev:armhf qtpim5-dev:armhf libqt5sensors5-dev:armhf qtsystems5-dev:armhf

Just like the error message shown above, we must run the following command in the command line to install the required Library:

$sudo click chroot -a armhf -f ubuntu-sdk-14.10 install cmake libicu-dev:armhf pkg-config qtbase5-dev:armhf qtchooser qtdeclarative5-dev:armhf qtfeedback5-dev:armhf qtlocation5-dev:armhf qtmultimedia5-dev:armhf qtpim5-dev:armhf libqt5sensors5-dev:armhf qtsystems5-dev:armhf

Of course, we can also use the following method for installation:

$click chroot -aarmhf -fubuntu-sdk-14.10 maint

Then, run the following command:


After the installation is complete, run the exit command to exit.

Re-enter the root directory of our application and run the following command again:

$ cordova build --device

We can find the desired click package file in the project directory:

liuxg@liuxg:~/web/myapp$ find ./ -name *.click./platforms/ubuntu/ubuntu-sdk-14.10/armhf/prefix/myapp.mycompany_0.0.1_armhf.click

To run the command directly on a mobile phone, run the following command:

$ cordova run --device --debug

Running result on mobile phone:


For ubuntu-sdk-15.04-based chroot, we must use the following command to complete our build:

$ cordova build --device -- --framework ubuntu-sdk-15.04 --verbose

When running, we must also use the following command:

$ cordova run --device --debug -- --framework ubuntu-sdk-15.04

Source code for the entire project in: git clone https://gitcafe.com/ubuntu/cordovasample.git
For more information about how to use Cordova to implement the camera function on your mobile phone, see "Cordova camera app tutorial ".

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.