怎样在Ubuntu手机平台中开发Cordova HTML5应用

我们知道Cordova HTML5应用具有夸平台的特性，同一时候也具有訪问本地一些资源的能力。在今天的这篇文章中。我们将介绍一下怎样创建并执行一个Cordova HTML5的应用到我们的Ubuntu手机中。本文的英文原文在“http://developer.ubuntu.com/en/apps/html-5/guides/cordova-guide/”。

1）安装好我们的armhf chroot

假设开发人员已经看过我曾经的文章“Ubuntu SDK 安装”的话，你可能已经安装好自己的armhf chroot了。除了在SDK中能够帮我们安装我们所须要的chroot外，我们也能够通过例如以下的命令来简单地安装我们自己所须要的chroot。

以下以15.04 framework为例：

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

我们能够在命令行键入如上的命令就能够创建我们的15.04的armhf chroot。

等安装完以后，我们就能够进行下一步的动作。开发人员假设想为14.10的目标进行编译，也能够使用相同的方法来安装14.10的armhf chroot。

2）安装Cordova

在这一步。我们来安装Cordova环境。假设你曾经已经安装过的，建议你使用例如以下的方法删除曾经的安装（因为曾经的安装有bug）。假设你从来没有安装过的话。请忽略这一步：

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

这是为了彻底删除曾经已经在你的电脑中的安装。

然后。我们依照例如以下的步骤来安装Cordova:

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

到眼下的这一步。我们基本上已经创建好我们的Cordova环境了。

3）创建一个简单的Cordova例程

眼下14.10的架构是默认的开发架虽然将来会有变化。

在例如以下的命令中，假设没有指定详细的架构，14.10架构将会被採用。

使用例如以下的命令来创建一个简单的Cordova应用：

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

注意：请在你的config.xml中增加例如以下的句子。以保证你的应用有一个icon图标：

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

另外，请你在config.xml中增加自己的有效的邮件地址：

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

这样整个config.xml的文件例如以下：

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>

这样我们整个的Cordova模版已经被建立好了。

以下我们来详细描写叙述怎么进行编译。

4）编译我们的模版Cordova应用

我们能够使用例如以下的命令为我们的手机进行编译：

$ cordova build --device

就如我们上面所说的一样，它选择默认的一个版本号的armhf chroot进行编译。眼下它指的是14.10。

在第一次编译时，可能须要我们去安装一些额外的库才干够进行编译。

它会提演示样例如以下所看到的的错误信息：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="500" height="350" alt="">

List of devices attached
750ABLLH4897	device

Target Device: 750ABLLH4897
Building Phone Application...

Error: missing dependency inside armhf chroot
run:
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

就像上面显示的错误信息一样，我们必须在命令行中打入例如以下的命令来安装我们所须要的库：

$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

当然我们也能够使用例如以下的方法来安装：

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

然后，再打入例如以下的命令：

等安装完后，我们打入exit命令。退出就可以。



又一次进入到我们的应用的根文件夹，再次打入例如以下的命令：

$ cordova build --device

我们能够在项目文件夹下找到我们所须要的click包文件:

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

为了可以在手机上直接执行。我们可以直接执行一下的命令：

$ cordova run --device --debug

在手机上的执行结果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">

对于使用基于ubuntu-sdk-15.04 chroot来说，我们必须使用例如以下的命令来完毕我们的build:

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

当我们执行时，我们也必须使用例如以下的命令来完毕：

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

整个项目的源代码在：https://github.com/liu-xiao-guo/cordovasample

５）怎样在手机中调试自己的应用

为了可以输出一些实用的调试信息，我们可以在我们的index.js文件里增加例如以下的console.log语句：

var app = {

    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // '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.getElementById(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();

当我们执行我们的HTML5应用到手机时。我们能够看到例如以下的输出：

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

就像上图中显示的那样，我们能够在电脑中打开chromium浏览器，并输入以上的http://127.0.0.1:9222地址：

从上面我们能够看出来我们加入的的调试信息：

This shows how to output something to debug

在Desktop上的调试也是一样的。我们仅仅须要用例如以下的方法进行执行：

$ cordova run --debug

在chromium浏览器中输入地址http://127.0.0.1:9222就可以。

很多其它想知道怎样在手机上利用Cordova实现camera功能，请參阅文章“Cordova camera app tutorial”。开发人员能够參考文章“在Ubuntu平台上创建Cordova
Camera HTML5应用”来开发一个Cordova Camera HTML5应用。