How to develop Cordova HTML5 applications in Ubuntu mobile platform

We know that the Cordova HTML5 application has the feature of boast platform, also has the ability to visit some local resources at the same time. In this article of the day. We'll show you how to create and execute a Cordova HTML5 app on our Ubuntu phone. The English text of this article is "http://developer.ubuntu.com/en/apps/html-5/guides/cordova-guide/".

1) Install our ARMHF chroot
Assuming that the developer has read my previous article "Ubuntu SDK Installation", you may have installed your own ARMHF chroot. In addition to being able to help us install the chroot we need in the SDK, we can simply install the chroot we need by using commands such as the following.

The following is an example of the 15.04 framework:

$sudo Click Chroot-aarmhf-f ubuntu-sdk-15.04 Create  

We were able to create our 15.04 ARMHF chroot by typing the command on the command line.

After the installation, we will be able to proceed to the next step. The developer assumes that the 14.10 target is compiled, and that the same method can be used to install the 14.10 ARMHF chroot.

2) Install Cordova
In this step. Let's install the Cordova environment. Assuming you have already installed, it is recommended that you use the following method to remove the previous installation (because there was a bug in the installation). Assuming you've never installed it before. Please ignore this step :

$RM-RF ~/.CORDOVA$RM-RF ~/.cache

This is to completely remove the installation that was already in your PC.
And then. We install Cordova as follows, for example:

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

To this point in the moment. We have basically created our Cordova environment.

3) Create a simple Cordova routine
At the moment, the 14.10 architecture is the default development frame, although there will be changes in the future.

In a command such as the following, assuming that no detailed schema is specified, the 14.10 schema will be used.
Use commands such as the following to create a simple Cordova application:

$cordova create MyApp myapp.mycompany "My App" $CD Myapp$cordova platform Add ubuntu$vi Config

Note: Please add the following sentences to your CONFIG. To ensure that your app has an icon:

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

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

<author email= "[email protected]"/>

This is the case for the whole config file such as the following:
Config.

<?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= "[email protected]" 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:*"/> &L T;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.P Ng "/></widget>

So our entire Cordova template has been set up.

Let's take a detailed description of how to compile.

4) Compile our template Cordova application
We are able to compile our phone using commands such as the following:

$ Cordova Build--device

As we said above, it chooses the default version number of the ARMHF chroot to compile. Right now it's referring to 14.10.

At the first compile time, we may need to install some extra libraries to compile.

It will present a sample of the error message such as the following:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center "width=" "height=" >

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:a RMHF 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 have to break into the command line with commands such as the following to install the libraries we need:

$sudo Click chroot-a armhf-f ubuntu-sdk-14.10 install cmake libicu-dev:armhf pkg-config QTBASE5-DEV:ARMHF qtchooser qtde CLARATIVE5-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 methods for installation:

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

Then, enter commands such as the following:


When the installation is complete, we enter the Exit command. You can quit.

Once again, go to the root folder of our app and re-enter commands such as the following:

$ Cordova Build--device

We are able to find the click Package files we need under the project folder:

[Email protected]:~/web/myapp$ find./-name *.click./platforms/ubuntu/ubuntu-sdk-14.10/armhf/prefix/ Myapp.mycompany_0.0.1_armhf.click

In order to be able to execute directly on the phone. We can execute the command directly:

$ Cordova Run--device--debug

The results of the execution on the phone:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /center "width=" "height=" >

for the use of ubuntu-sdk-15.04 chroot, we have to complete our build using commands such as the following:

$ Cordova Build--device----Framework ubuntu-sdk-15.04--verbose

When we do, we must also use commands such as the following to complete:

$ Cordova Run--device--debug----Framework ubuntu-sdk-15.04

The source code for the entire project is: Https://github.com/liu-xiao-guo/cordovasample

5) How to debug your app on your phone
In order to be able to output some useful debugging information, we can add the following console.log statements in our Index.js file, for example:

var app = {//Application Constructor initialize:function () {this.bindevents (); },//Bind Event Listeners////bind any events is required on startup.    Common Events is://' load ', ' deviceready ', ' Offline ', and ' online '.    Bindevents:function () {document.addeventlistener (' Deviceready ', This.ondeviceready, false); },//Deviceready event Handler////The scope of ' this ' is the event.    In order to call the ' receivedevent '/function, we must explicitly call ' App.receivedevent (...); '    Ondeviceready:function () {app.receivedevent (' deviceready '); },//Update DOM on a Received Event receivedevent:function (id) {var parentelement = document.getelementbyi        D (ID);        var listeningelement = Parentelement.queryselector ('. listening ');        var receivedelement = Parentelement.queryselector ('. Received ');        Listeningelement.setattribute (' style ', ' display:none; '); Receivedelement.setattribute ('Style ', ' display:block; ');    Console.log (' Received Event: ' + ID); }};console.log ("This shows how to output something to debug"); App.initialize ();

When we perform our HTML5 application to the phone. We can see output such as the following:

$ Cordova Run--device--debug----Framework ubuntu-sdk-15.04

As shown in, we are able to open the Chromium browser in the computer and enter the above http://127.0.0.1:9222 address:




From the above we can see the debug information we have added:

This shows how to output something to debug

The same is true for debugging on desktop. We just need to do it in the following ways:

$ Cordova Run--debug

You can enter the address http://127.0.0.1:9222 in the Chromium browser.
Many others want to know how to use Cordova to implement the camera function on a mobile phone, please refer to the article "Cordova Camera app Tutorial". Developers can refer to the article "Creating a Cordova camera HTML5 app on the Ubuntu platform" to develop a Cordova camera HTML5 application.

How to develop Cordova HTML5 applications in Ubuntu mobile platform