怎樣在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。

在第一次編譯時，可能需要咱們去安裝一些額外的庫才幹夠進行編譯。

它會提演示樣例如如下所看到的的錯誤信息：

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

在手機上的執行結果：

對於使用基於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應用。