Інтеграція 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 цієї статті).

Проект Sencha Touch + Cordova Phonegap для Android

Увага! В цій статті описано створення проекту для фреймворків Sencha Touch 2.2 та Phonegap 2.7. Процес створення проекту для новіших версій (Sencha Touch 2.3, Phonegap 3.0) описано тут.

Щоб отримати доступ до "native" функцій пристрою з додатку Sencha Touch або jQuery Mobile, як правило, використовують фреймворк Phonegap. Для встановлення Phonegap потрібно просто скачати з офіційного сайту останню версію на розпакувати в папку, шлях до якої не містить пробілів. Для сумісної роботи фреймворків Sencha Touch і Cordova Phonegap необхідно створити обидва проекти та взаємно налаштувати їх (звичайно, Android SDK вже повинен бути встановленим, шляхи до директорій tоols та platform-tools повинні бути додані до змінних середовища).

Створюємо новий проект Sencha Touch 2

Переходимо в директорію touch-2.2.x, що має знаходитись в папці www вашого локального сервера (якщо ні - встановіть Sencha Touch 2 фреймворк):

cd /var/www/touch-2.2.0

та створюємо шаблон проекту Sencha Touch:

sencha generate app SenchaPhonegapProject ../SenchaPhonegapProject

Якщо все вийшло, за адресою localhost/SenchaPhonegapProject спостерігаємо базовий проект Sencha Touch

Виправлення багів Ubuntu 13.04 після оновлення

Після оновлення операційної системи Ubuntu з версії 12.10 до 13.04 (що відбулось без проблем), зіткнувся з деякими труднощами: не те що "багами", радше "особливостями".

Особливість 1

Виконувані файли з розширенням ".sh" не виконуються, а відкриваються у текстовому редакторі:

Рішення

Налаштувати поведінку виконуваних файлів. Для цього в головному меню файлового менеджера вибрати пункт "Файли -> Параметри" ("Files -> Preferences") 

Додати кнопку на панель інструментів Ubuntu 12.10 (Unity)

"Ярлики" встановлених програм в Ubuntu 12.10 зберігаються в файлах з розширенням *.desktop за адресою /usr/share/applications. Графічно вони виглядають як іконки програм, але не мають розширення:

Щоб додати програму на панель запуску достатньо перетягнути відповідну іконку на панель інструментів. Якщо ж потрібної іконки немає, потрібно:

Вирішення проблеми Origin is not allowed by Access-Control-Allow-Origin

Проблема

Налагодження програм для мобільних пристроїв, що написані за допомогою javascript фреймворків (jQuery, Sencha Touch), відбувається за допомогою веб браузера в режимі розробника (запуск режиму в Google Chrome: Ctrl+Shift+C). При цьому сама програма розміщується на локальному сервері (localhost). За змовчуванням і браузер, і localhost сервер не дозволять відправити AJAX запит на інший сервер, або навіть домен: Origin http://* is not allowed by Access-Control-Allow-Origin

Рішення складається з двох частин: 

1) Налаштування сервера localhost

2) Налаштування браузера

Налаштування сервера (на прикладі apache2)

Встановлюємо модуль headers (може бути вже встановленим)

sudo a2enmod headers

Можливо, знадобиться перезапуск сервера:

sudo /etc/init.d/apache2 reload

Підключаємо модуль headers (може бути вже підключеним)

sudo ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

Знаходимо файл налаштування доступних сторінок на сервері, у мене це /etc/apache2/sites-available/default та редагуємо його:

sudo gedit '/etc/apache2/sites-available/default'

Знаходимо в ньому розділ <Directory /.../www> з адресою папки www та додаємо в розділ дві дозволяючі строчки ("*" можна відредагувати на власний смак)

Header set Access-Control-Allow-Origin "*"

Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE, OPTIONS"

Перезапускаємо сервер:

sudo /etc/init.d/apache2 reload

Налаштування браузера (на прикладі Google Chrome)

Просто запустити з командної строки з параметром --disable-web-security, наприклад

/usr/bin/google-chrome --disable-web-security

Для зручності краще налаштувати кнопку на панелі інструментів, що запускатиме браузер зі всіма необхідними параметрами

Нехай щастить

P.S. Маю надію, що комусь буде корисно, бо сам витратив на це купу часу.