понеділок, 18 березня 2013 р.

Установка 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 
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 поки-що має проблеми).
Тонкощі установки
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.
Готово!

2 коментарі: