Інтеграція Sencha Touch 2.3.0 з Phonegap 3.0.0

Нові версії фреймворків Sencha Touch та Phonegap

Зовсім недавно з'явилась версія Phonegap 3.0.0, що особисто мене відверто порадувала зручністю роботи у command-line інтерфейсі, а 1 жовтня 2013 року вийшла нова версія Sencha Touch 2.3.0 якій, за словами розробників, реалізовано повну підтримку  XMLHTTPRequest Level 2, додано кілька нових та удосконалено існуючі теми (особливо для Blackberry 10), а головне - реалізовано інтеграцію з Cordova Phonegap 3.0.0. Що ж, спробуємо створити проект Sencha Touch 2.3.0 та зібрати його для однієї з платформ (в моєму випадку - Android, адже зараз працюю я на Ubuntu). І так, поїхали.

Що необхідно встановити

1. Java Runtime Enviroment 1.7.0+.

Набираю в командному рядку java -version і спостерігаю наступні рядки

java version "1.7.0_21"

Java(TM) SE Runtime Environment (build 1.7.0_21-b11)

Якщо ж у Вас немає JRE 1.7, його можна завантажити з офіційного сайту, обравши версію для Вашої операційної системи (гайд для користувачів Ubuntu). 

Якщо ж у Вас встановлено JRE 1.6, і немає можливості його перевстановити (а також Ви полюбляєте додаткові труднощі), можете використати патч для Sencha командера (який ми встановлюємо в пункті 5 цієї статті).

2. Node.js та Python 2.7

Так, для роботи Node.js знадобиться Python 2.7, щоб перевірити, чи встановлено у Вас необхідну версію, введіть в командному рядку python, маєте отримати щось на зразок 

Python 2.7.4 (default, Sep 26 2013, 03:20:26)

[GCC 4.7.3] on linux2

Type "help", "copyright", "credits" or "license" for more information.

>>> 

(щоб вийти необхідно натиснути Ctrl+D). Якщо ж ні - знов качаємо і встановлюємо. Завантажуємо відповідну версію Node.js на офіційному сайті. З встановленням проблем бути не повинно, але ось на всяк випадок інструкції.

3. Compass та Ruby 1.9.3

Compass це компілятор SASS в CSS, що використовується в Sencha Touch. Ruby 1.9.3 (саме версія 1.9.3) необхідна для роботи цього компілятора. Перевірити встановлення можливо набравши в командному рядку

ruby -v

якщо не отримали щось на зразок наступного рядка - треба встановлювати:

ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux]

Простіше всього це зробити для OC Ubuntu:

sudo apt-get install ruby1.9.3 

В Mac OS Ruby встановлено за змовчуванням, проте, якщо його версія не 1.9.3 - необхідно скачати та встановити менеджер версій Ruby та виконати команду

rvm install 1.9.3 with-gcc=clang 

Для Windows - скачати та запустити встановлювач. Після встановлення необхідно додати шлях до виконуваних файлів Ruby в системну змінну PATH. 

Після Ruby встановлюємо Compass:

gem install compass

4. Cordova/Phonegap 3.0.0+

Так, настав час розібратись - в чому ж різниця між Cordova та Phonegap? Виходячи з статті, розробники ще недавно визнавали, що різниця тільки в назві (напевно вже є більш суттєві зміни). Хоча за задумом, Phonegap - це дистрибутив Cordova, і може включати додаткові пакети. Крім того, завжди повинні існувати версія Cordova яку можна купити, і безкоштовна версія Phonegap. Крапки над "і" остаточно поставила фраза з цієї ж статті, цитую: "If your goal is to build cross platform apps with HTML, JS and CSS then keep on using PhoneGap for everything you need". Тому будемо встановлювати Phonegap, для цього в командному рядку наберемо: 
Увага!!! Тут я припустився деяких неточностей. Перед вибором Cordova чи Phonegap перегляньте цю статтю.

npm install -g phonegap

5. Sencha Comander 4.0+

Качаємо та встановлюємо останній командер з офіційного сайту для своєї ОС. Після встановлення перевірити версію, набравши в командному рядку 

sencha

В першому рядку виводу повинні отримати версію командера

Sencha Cmd v4.0.0.203

Якщо ж очікування не справдились, можливо потрібно перезавантажити систему або додати в PATH шлях до виконуваних файлів командера вручну.

6. Sencha Touch 2.3.0+ 

Завантажуємо з офіційного сайту фреймворк та розпаковуємо архів до папки www вашого локального веб-сервера. Перевірити встановлення можливо набравши адресу http://localhost/touch-2.3.0 в веб-браузері - повинен відкритись гайд щодо встановлення

Якщо ж не маєте бажання встановлювати локальний сервер, розпакуйте в будь-яку папку, що не має обмежень запису, та надалі використовуйте вбудований веб-сервер командера:

sencha fs web -port 8000 start -map <dir_name>

 Наприклад, розпакуємо архів в папку /home/serj/touch та виконаємо команду

sencha fs web -port 8000 start -map /home/serj/touch

В такому випадку перевірити встановлення можливо набравши в браузері адресу http://localhost:8000/touch-2.3.0. Звичайно, замість 8000 можна використовувати будь-який вільний порт.

7. SDK платформ пристоїв, під які планується писати додаток

В моєму випадку, Android SDK. Найнадійніший спосіб установки - завантажити бундл-збірку http://developer.android.com/sdk/index.html#download. Вдаватись в деталі не буду, головне щоб після установки будь-якої з необхідних SDK відповідні шляхи були прописані в змінній середовища PATH.

Створюємо проект Sencha Touch

Для цього в командному рядку виконуємо команду за шаблоном

sencha -sdk /path/to/SenchaTouch generate app MyApp /path/to/MyApp

в моєму випадку

sencha -sdk /var/www/touch-2.3.0 generate app TestApp /var/www/TestApp

Результат цих нехитрих дій вже можемо спостерігати в браузері за адесою http://localhost/TestApp.

Додаємо інтеграцію з Phonegap

Переходимо в папку  щойно створеного Sencha Touch проекта

cd /var/www/TestApp

 та ініціалізуємо Phonegap

sencha phonegap init [AppID] [AppName]

в моєму випадку

sencha phonegap init com.example.testapp TestApp

Тепер пориємось в налаштуваннях, зокрема в файлах phonegap.local.properties та config.xml, що знаходяться в директорії нашого проекта. В першому встановимо платформи, під які будемо будувати та спосіб побудови (локально або за допомогою Phonegap Remote Build). Я обираю локальний варіант

phonegap.build.remote=false

і тільки під Андроїд

phonegap.platform=android 

В іншому файлі (config.xml) встановлюємо праметри платформ. Я б змінив деякі дефолтні значення:

<preference name="fullscreen" value="true" />

на "false", адже за допомогою Sencha Touch розроблюються в основному доатки, які в переважній більшості не закривають системний трей пристрою;

<preference name="android-minSdkVersion" value="7" />

на "10", адже апаратне прискорення webview доступне лише з 10 версії Android-SDK. Будемо відвертими, без цього прискорення навіть елементарні додатки Sencha Touch на пристроях Android помітно підторможують.

Побудуємо базовий проект для Android

Під'єдную свій андроїд за допомогою micro-USB кабелю до комп'ютера в режимі розробки (звичайно, можна використовувати й емулятор, але з особистого досвіду, на пристрої додаток запускається швидше). Надіюсь, Android-SDK вже давно встановлений а шляхи до tools та platform-tools додані в змінну середовища PATH :) Виконую команду з папки проекта

sencha app build -run native

Як не дивно, все запрацювало майже з першого разу (довелось довстановити відсутнє Android-SDK 4.2 (API 17), хоч в мене було встановлено 4.3 (API 18). Так і не зрозумів для чого - в AndroidManifest.xml згенерованого проекту встановлено targetSDK=18 - можливо, є якісь зав'язки на API 17, або це мій особистий глюк).

Використатовуємо функції пристрою через Phonegap

Спробуємо відобразити список контактів пистрою, для цього замінимо вміст файлу app/view/Main.js наступним вмістом:

Ext.define('TestApp.view.Main', {
    extend: 'Ext.dataview.List',
    // створюємо порожній список на весь екран
    config: {
        fullscreen: true,
        itemTpl: '{Name}',
        data: null
    },
    // при створенні
    initialize: function() {
        // щоб не загубити список у асинхронних функціях
        var me = this;
        // створюємо пошукові опції
        var options = new ContactFindOptions();
        // шукаємо всі контакти
        options.filter = "";
        options.multiple = true;
        // вибираємо лише поля, що містять відображаєму назву контакту
        var fields = ["displayName"];
        // власне викликаємо функцію Phonegap
        navigator.contacts.find(
                fields,
                // при успішному виконнанні функції Phonegap
                function(contacts) {
                    // формуємо масив даних для відображення
                    var data = new Array();
                    for (var i = 0; i < contacts.length; i++) {
                        data.push({Name: contacts[i].displayName});
                    }
                    // присвоюємо дані списку
                    me.setData(data);
                },
                // у разі помилки
                function(contactError) {
                    // відображаємо один елемент списку з текстом "Error"
                    me.setData([
                        {Name: 'Error'}
                    ]);
                },
                options
        );
    }
});

Проте лише цього не достатньо. потрібно підключити необхідний модуль (плагін) Phonegap, що відповідає за роботу з контактами. Починаючи з версії 3.0.0, Phonegap реалізовує роботу з на рівні API пристрою лише за допомогою плагінів. Щоб підключити потрібний плагін, потрібно перейти в папку phonegap проекту 

cd phonegap

та виконати команду

phonegap local plugin add <repo_location>

у нашому випадку

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

Повертаємось в головну директорію проекта

cd ..

та виконуємо команду

sencha app build -run native

Якщо все вийшло правильно, спостерігаємо результат:

Ще кілька корисних речей

Список доступних плагінів можна знайти за посиланням в розділі "Add Features".
Щоб подивитись список плагінів, що вже використовуються в проекті, потрібно з директорії phonegap виконати команду

phonegap local plugin list

Щоб видалити плагін, необхідно виконати команду 

phonegap local plugin remove <plugin_name>

де <plugin_name> - це ім'я плагіну у вигляді, яким його відображає phonegap local plugin list. 

Приклади використання плагінів описані тут в розділі "API Reference". Щоправда, підключення плагінів описано для Cordova, а не Phonegap  тому потрібно пам'ятати, що аналог cordova plugin add це phonegap local plugin add.