Phonegap vs Cordova

Яка ж різниця між Phonegap та Cordova? 

З різних публікацій на цю тему особисто мені зрозуміло:
1) Обидва фреймворки відкриті та мають на меті надати розробнику можливість використовувати API пристроїв через JavaScript.
2) Cordova - відкритий проект Apache. Хоч він і бере свій початок з Phonegap, зараз він є "старшим братом" - на його основі Cordova будується дистрибутив Phonegap.
3) Phonegap - це відкритий проект Adobe і є дистрибутивом Cordova та може включати додаткові засоби, для інтеграціі з сервісами Adobe.

Висновки

Якщо плануєте використовувати для компіляції сервіси Adobe, потрібно використовувати Phonegap, інакше - Cordova.

Чому не варто використовувати Phonegap локально?

За допомогою Phonegap можливо теж побудувати проект локально.

phonegap local build

Особисто мене ця можливість одного разу і ввела мене в оману. Справа в тому, що при створенні проекту Phonegap додатково створюються іконки та заставки для всіх можливих ОС, і чомусь при локальній компіляції всі вони потрапляють в папку assets/www дистрибутиву.

Інтеграція 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. Маю надію, що комусь буде корисно, бо сам витратив на це купу часу.

Установка Sencha Touch на Windows-7, XP

Sencha Touch - це мобільний HTML5 фреймворк, що дозволяє створювати додатки для пристроїв на базі операційних систем Android та iOS, а бета-версія 2.2 (на момент написання) - і для Windows Phone 8. Фрейморк добре документований http://docs.sencha.com/touch/2-1/#, та легкий у плані написання коду, проте є суттєві труднощі, які криються в тонкощах процесу установки та налаштування. Звичайно, можна уникнути цих труднощів, встановивши готовий пакет для розробки http://www.sencha.com/products/touch-bundle/ вартістю ~$700. В іншому випаду - ласкаво просимо до командної строки та особливостей встановлення встановлення для Windows-7 (в принципі, і на Windows-XP нічим не відрізняється).

Які файли необхідно скачати?

1. Стандартний набір розробки Oracle JDK 

 http://www.oracle.com/technetwork/java/javase/downloads/index.html

2. Останню версію (не нижче 1.8) Ant http://ant.apache.org/bindownload.cgi, качаємо файл з розширенням *.zip

3. Локальний сервер http://www.wampserver.com/ru/

4. Ruby installer for windows http://rubyinstaller.org/ (качаємо версію 1.9 - з 2.0 Sencha поки-що має проблеми).

5. Sencha touch SDK http://www.sencha.com/products/touch/download/

6. Sencha Comander http://www.sencha.com/products/sencha-cmd/download

Тонкощі установки

1. Oracle-JDK, за можливості, встановити не по дефолту (за змовчуванням C:\Program Files\Java\), а в директорію, яка не містить в своєму імені будь-яких пробілів (наприклад, C:\Java). Після установки додати до змінної середовища PATH шлях до директорії \bin встановленої JDK. Важливо: якщо ж ви залишили пробіли, додавати шлях до директорії \bin потрібно в лапках, наприклад "C:\Program Files\Java\bin".

2. Цей крок не обов'язковий, адже до пакету JDK входить версія Ant. Проте, краще перестрахуватися (перевірено на власному досвіді - вилазять помилки при компіляції проекту під native платформи). Розпакувати архів Ant до папки, шлях до якої не містить пробілів (наприклад, C:\Ant). Додати до змінної середовища PATH шлях до директорії \bin встановленого Ant.

3. Якщо не встановлено локальний сервер, встановіть його та запустіть. Рекомендую wamp. Слідуйте інструкціям на офіційному сайті. Після встановлення, запустіть локальний сервер та наберіть в браузері адресу http://localhost . Ви повинні побачити стартову сторінку сервера. Можливі труднощі: конфлікт зі Skype. Щоб уникнути конфлікту, потрібно wamp server запускати перед запуском Skype (вийдіть зі Skype, перезапустіть wamp server, можете знову увімкнути Skype).

4. Ruby installer for windows необхідний для того, щоб встановити компілятор compass для sass - css: синтаксичну мову стилів в каскадні таблиці стилів. Цей компілятор використовує Sencha при побудові програми. Запускаємо інсталятор та встановлюємо за змовчуванням (головне, щоб шлях не містив пробілів). Після установки Ruby, запускаємо стандартну командну строку (cmd.exe)  в якій виконуємо команди (необхідне підключення до інтернет) та чекаємо на завершення установки:

gem install compass

5. Завантажений архів sencha sdk копіюємо до папки www локального веб-сервера (наприклад, C:\wamp\www) та розархівовуємо. Отримаємо папку з назвою версії sdk, наприклад touch-2.1.1. За допомогою браузера переходимо за відповідною адресою http://localhost/touch-2.1.1, де повинна відкритись сторінка прикладів додатків, розроблених за допомогою Sencha.

6. Встановлюємо Sencha Commander - запускаємо інсталятор, але важливо вказати шлях встановлення, що не містить пробілів, (наприклад, C:\Sencha).

Перевірка роботи - створення шаблону проекту Sencha Touch

Відкриваємо командну строку (cmd.exe). Переходимо до папки Sencha Touch:

cd C:\wamp\www

Виконуємо команду генерації шаблону програми, де TestApp - назва програми, ../TestApp - шлях до папки з програмою відносно каталогу touch-2.x.x:

sencha generate app TestApp ../TestApp

Чекаємо закінчення роботи програми та переходимо в браузері за адресою http://localhost/TestApp. Якщо все встановлено правильно, в браузері спостерігаємо шаблонний проект Sencha Touch.

Готово!

Встановлення Oracle-JDK на Ubuntu 12.10

В комплекті ОС Ubuntu 12.10 поставляється open-jdk. Список встановлених jdk та jvm можливо подивитись в /usr/lib/jvm/

Перевірити поточну версію можна виконавши в терміналі команду

java -version

Чому oracle-JDK?

Я надаю перевагу "офіційному" jdk (від oracle, jdk безкоштовний), тому що його вимагають програми, з якими я працюю - наприклад IDE Netbeans, Android SDK.

Установка (суть - потрібно скачати архів з JDK, та розпакувати його вміст до папки /usr/lib/jvm/jdk1.7.0)

1. Качаємо останню версію JDK з розширенням .tar.gz для своєї Ubuntu (64 чи 32-розрядної, відповідно x64 або i585)

http://www.oracle.com/technetwork/java/javase/downloads/index.html

2. Розпаковуємо до домашнього каталогу за допомогою менеджера архівів - отримуємо папку з назвою, наприклад jdk1.7.0_17

3. З терміналу (тому, що потрібні права адміністратора) заходимо до директорії, де встановлені jdk:

cd /usr/lib/jvm/

а якщо такої немає, створюємо її 

sudo mkdir /usr/lib/jvm

4. В цій директорії створюємо папку для нашої JDK (відкидуємо молодший номер версії, наприклад, для jdk1.7.0_17 папка буде називатись jdk1.7.0) та переміщуємо туди вміст папки jdk1.7.0_17

sudo mv ~/jdk1.7.0_17 /usr/lib/jvm/jdk1.7.0

5. На цьому можна закінчити, якщо Ви плануєте використовувати oracle-jdk тільки для деяких програм - тоді для них потрібно буде окремо вказувати шлях до встановленої oracle-jdk. А можна встановити oracle-jdk і jre як такі, що використовуються за змовчуванням, для цього в терміналі виконати наступні команди:

sudo ln -s -b /usr/lib/jvm/jdk1.7.0/jre/bin/java /etc/alternatives/java

sudo ln -s -b /usr/lib/jvm/jdk1.7.0/jre/bin/java /usr/bin/java

6. Перевіряємо

java -version

Готово!

Альтернативні шляхи: можливо додати до репозиторіїв центру програмного забезпечення сторонні репозиторії та встановити jdk через них, наприклад:
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update && sudo apt-get install oracle-java7-installer

Але пам'ятайте, що сторонні репозиторії ви використовуєте на свій страх і ризик!

Як додати в PATH шлях до програми (Ubuntu 12.10)

Щоб додати до змінної середовища PATH шлях до програми в Ubuntu 12.10 потрібно виконати в терміналі команду:
export PATH=/path/to/folder/with/your/program:$PATH
Ця змінна буде діяти до перезавантаження системи. Для того, щоб внесені зміни не втратились після перезавантаження системи, потрібно відредагувати файл .profile в домашньому каталозі користувача. Для цього необхідно виконати в терміналі наступні команди:

cd ~

sudo gedit .profile

Після введення паролю відкриється текстовий редактор, в кінці якого потрібно додати строчку та зберегти зміни:

export PATH=/path/to/folder/with/your/program:$PATH

Готово!

PS: Дізнатись які дані містить змінна PATH можливо виконавши команду
echo $PATH