Работа с Worklight: Часть 1. Cоздание первого Worklight-приложения

Настройка приложения для iOS и Android

Выпустив IBM® Worklight® V5, ведущую платформу мобильных корпоративных приложений (Mobile Enterprise Application Platform - MEAP), IBM расширяет общие мобильные возможности своего портфеля продуктов. В данной серии статей представляется платформа Worklight и рассматривается создание мобильных приложений, использующих разнообразные продукты IBM. В первой части описывается процесс настройки среды разработки Worklight и создание простого приложения, которое будет основой для итеративной разработки в следующих статьях.

Джереми Норти, разработчик ПО, IBM

Джереми Норти (Jeremy Nortey) является разработчиком программного обеспечения для IBM Mobile Foundation в IBM Software Group. Он занимается разработкой ПО и обеспечением качества мобильных решений. Специализируется на iOS, а в свободное время занимается созданием встроенных приложений для iPhone. Его хобби: футбол и бег.



Карлос Андреу, разработчик ПО, IBM

Карлос Андреу (Carlos Andreu) является разработчиком программного обеспечения в IBM Software Group. В настоящее время работает над интегрированной средой для создания гибридных, Android- и iOS-приложений. Диапазон его интересов - от новейших тенденций и технических блогов до чтения, телевидения и музыки разных стилей. Узнать о нем подробнее можно на сайте http://dev.yapr.org/carlosandreu.



Радж Баласубраманьян, ИТ-архитектор, консультант, IBM

Радж Баласубраманьян (Raj Balasubramanian) является архитектором продукта для IBM Mobile Foundation в IBM Software Group. Руководит работой над взаимодействием клиент/сервисы для IBM Worklight и IBM Mobile Foundation. До этого занимался проектами доставки конечным пользователям приложений и инфраструктуры, использующих технологии SOA, BPM, Web 2.0 и Portal. Диапазон его интересов - от различных отраслей техники до истории, математики и физики. В настоящее время готовится получить степень доктора философии в Техасском университете, Остин. Узнать о нем подробнее можно в его блоге Gurukulam на сайте http://balasubramanians.com/blog.



08.2012 (Впервые опубликовано 22.11.2012)

Введение

В последние годы IBM много инвестировала в мобильные вычисления, обеспечивая поддержку своих ключевых программных продуктов на различных мобильных устройствах и предоставляя инструментальные средства и среды исполнения для создания мобильных приложений. Выпустив IBM Worklight, IBM еще больше расширяет общие мобильные возможности своего портфеля продуктов.

IBM Worklight предоставляет открытую, комплексную, современную платформу мобильных приложений, позволяющую эффективно разрабатывать, выполнять и поддерживать HTML5-приложения, гибридные и встроенные приложения, используя основанные на стандартах технологии и инструменты, оптимизированное под мобильные устройства программное обеспечение промежуточного уровня, различные механизмы обеспечения безопасности, возможности интегрированной поддержки и аналитики.

В качестве введения в Worklight в данной статье рассматривается последовательность работ по созданию базового мобильного приложения и демонстрируется процесс установки среды разработки Worklight-приложений. В статье описывается создание простого приложения "Hello World" (ссылка на демонстрационный видеоролик приведена в разделе Ресурсы). Во второй части серии будет рассмотрено использование этой среды для итеративной разработки действующего приложения (список задач), создающего список задач. В следующих статьях будет рассмотрена интеграция приложения с другими продуктами IBM с целью демонстрации функций и возможностей Worklight.

Основы Worklight

Получите Worklight

Загрузите IBM Worklight Developer Edition 5.0 бесплатно и используйте его без временных ограничений!

Worklight - это передовая платформа мобильных корпоративных приложений (Mobile Enterprise Application Platform - MEAP), являющаяся неотъемлемой частью IBM Mobile Foundation. Платформа Worklight состоит из четырех основных компонентов:

  • IBM Worklight Studio - основанная на Eclipse интегрированная среда разработки для создания Worklight-приложений.
  • Компоненты IBM Worklight Device Runtime Components, которые образуют набор SDK, использующий среду исполнения мобильных приложений на устройстве.
  • Сервер IBM Worklight Server - Java™-сервер, обеспечивающий безопасное подключение корпоративных и интернет-источников информации.
  • Консоль IBM Worklight Console - пользовательский Web-интерфейс для управления и мониторинга всей экосистемы мобильных приложений.

Эти компоненты изображены на рисунке 1.

Рисунок 1. Компоненты Worklight
Рисунок 1. Компоненты Worklight

Вообще говоря, последовательность работ по созданию мобильных приложений не отличается от таковой для обычных приложений. Упрощенно эту последовательность можно представить следующим образом (рисунок 2):

  1. Настроить Worklight и приступить к созданию приложения.
  2. Выполнить обычные действия по разработке и тестированию функциональности приложения, выполняя или эмулируя приложение.
  3. Если, по вашему мнению, все готово, опубликовать тестовое приложение для получения отзывов основных пользователей.
  4. Проанализировав отзывы, продолжить работу по улучшению приложения или открыть его для более широкой аудитории с целью тестирования.
  5. Если вы примете решение расширить использование тестового приложения, можно опубликовать его для ограниченной группы пользователей в локальном (закрытом) репозитории приложений или в корпоративном (открытом) репозитории (например, Apple App Store, Google Play и т.д.).
Рисунок 2. Разработка мобильного приложения
Рисунок 2. Разработка мобильного приложения

В оставшейся части статьи рассматривается установка Worklight и SDK соответствующего устройства, а также создание простого пустого приложения. Целью является проверка возможности просмотра приложения на устройстве и публикация его на локальном Worklight-сервере. Результат будет основой для дальнейшей разработки мобильного приложения.


Установка среды

В конечном итоге мы создадим очень простое приложение списка задач, позволяющее пользователям создавать список простых задач, отображаемый в виде таблицы. Пользователи смогут просматривать даты задач, удалять задачи и фильтровать их по ключевому слову. Интерфейсная часть приложения (написанная с использованием JQuery mobile) и другие детали создания приложения будут описаны во второй части.

Хотя конечной целью является создание приложения списка задач (см. боковую вкладку), непосредственной целью статьи является изучение последовательности основных действий по разработке, развертыванию и тестированию мобильного приложения в эмуляторе устройства. Чтобы приступить к работе со средой Worklight, нужно выполнить следующие простые действия:

  1. Загрузите и установите Eclipse Indigo (3.7) для Java EE Developers

    Если вам нужен Eclipse, его можно получить на сайте Eclipse Downloads; на момент написания данной статьи Eclipse Juno еще не поддерживался, поэтому следует установить редакцию Indigo for Java EE Developers. Мы предполагаем, что Eclipse у вас уже установлен. Дополнительная информация приведена в документации Начало работы с Worklight.

  2. Установите плагины Worklight Eclipse

    Если вы знакомы с процессом установки плагинов в Eclipse, эта процедура не вызовет затруднений. Вы можете бесплатно загрузить IBM Worklight Developer Edition 5.0 и использовать его без временных ограничений.

    Рисунок 3. Установка плагинов Eclipse
    Рисунок 3. Установка плагинов Eclipse

    Выполните действия, предлагаемые мастером, для загрузки и установки необходимой среды.

  3. Установите SDK для вашего устройства

    В данной серии демонстрируется работа Worklight-приложения на устройствах Android и iOS.

    1. Установите Android SDK (не обязательно)

      Выполните приведенные на сайте разработчиков Android-приложений инструкции по установке Android SDK и эмулятора в той же Eclipse-системе, в которой установлена Worklight Studio.

    2. Установите iOS SDK (не обязательно)

      Выполните приведенные на сайте разработчиков Apple-приложений инструкции по установке Xcode в Mac OS. Если у вас нет компьютера Mac, вы не сможете эмулировать разрабатываемое Worklight-приложение для устройства iOS. Альтернативные способы (использование параметров Worklight Build) будут приведены в следующей статье, а пока проигнорируйте инструкции для iOS.

  4. Создайте новый Worklight-проект

    Теперь можно создать новый Worklight-проект в Eclipse. Выберите File > New > Worklight Project, как показано на рисунке 4. (Если вариант Worklight Project в списке отсутствует, попробуйте File > New > Other > Worklight Project.) Назовите папку проекта Todo Project, а затем нажмите кнопку Next.

    Рисунок 4. Создание нового Worklight-проекта
    Рисунок 4. Создание нового Worklight-проекта
  5. Добавьте в проект новое приложение

    Выберите Hybrid Application и нажмите кнопку Next. Назовите приложение Todo и нажмите кнопку Finish (рисунок 5).

    Рисунок 5. Добавление приложения в проект
    Рисунок 5. Добавление приложения в проект

    Worklight автоматически сгенерирует структуру файлов, необходимую для разработки Worklight-приложения. В папку common будут помещаться все файлы, необходимые для создания приложения, включая HTML-, JavaScript™- и CSS-файлы. Назовите приложение ToDo и завершите данную часть создания приложения.

    Рисунок 6. Структура папки apps
    Рисунок 6. Структура папки apps

Запуск Worklight-сервера

Для тестирования созданного приложения нужно опубликовать его на локальном Worklight-сервере. IBM Worklight Studio V5 содержит локальный сервер, который можно использовать для тестирования приложения. Щелкните правой кнопкой мыши на app и выберите Build All and Deploy. При этом запустится локальный сервер на порту 8080, активизируется проект, и приложение развернется на сервере для тестирования в браузере.

Рисунок 7. Компоновка и развертывание приложения на локальном сервере
Рисунок 7. Компоновка и развертывание приложения на локальном сервере

Ход событий можно просмотреть в консоли (рисунок 8).

Рисунок 8. Консоль локального сервера
Рисунок 8. Консоль локального сервера

Теперь можно получить доступ к консоли локального сервера, перейдя в браузере по адресу http://localhost:8080/console. Должно отобразиться только что развернутое приложение Todo.

Рисунок 9. Консоль локального сервера
Рисунок 9. Консоль локального сервера

Разработка приложения

Это простейшее приложение продемонстрирует первую итерацию компоновки и эмуляции, чтобы вы могли освоиться с процессом, а во второй статье серии будет наполнено реальной логикой приложения и экрана списка задач для демонстрации модели разработки полнофункционального Worklight-приложения. Для компоновки этого начального приложения:

  1. Выберите JavaScript-библиотеку

    Для данного приложения выберите JavaScript-библиотеку JQuery mobile. Можно также использовать библиотеки Dojo mobile или Sencha Touch. В качестве альтернативы можно выполнить разработку на чистом JavaScript и создать приложение с нуля.

  2. Загрузите библиотеки

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

    Рисунок 10. Детали JQuery
    Рисунок 10. Детали JQuery
  3. Переместите файлы в Worklight

    Переместите следующие файлы в папку common/js:

    • jquery-1.7.1.min.js
    • jquery.mobile-1.1.0.min.js

    Переместите следующие файлы в папку common/css:

    • jquery.mobile-1.1.0.css
    • jquery.mobile.structure-1.1.0.min.css
    • jquery.mobile-1.1.0/images

    Добавьте необходимый код в файл Todo.html, чтобы он соответствовал приведенному на рисунке 11.

    Рисунок 11. Ссылка на библиотеку JQuery в приложении Todo
    Рисунок 11. Ссылка на библиотеку JQuery в приложении Todo
  4. Создайте среды, специфичные для устройств

    Поскольку мы намереваемся скомпоновать приложение Todo и для Android, и для iPhone, необходимо создать среду Worklight для обоих типов устройств. Найдите голубую кнопку Worklight на инструментальной панели, нажмите пиктограмму "стрелка вниз", расположенную справа от нее, и выберите Worklight Environment в ниспадающем списке (рисунок 12).

    Рисунок 12. Мастер выбора устройств
    Рисунок 12. Мастер выбора устройств

    Выберите в списке iPhone и Android phones and tablets и нажмите кнопку Finish (рисунок 13). Будут созданы дополнительный проект для Android и дополнительная структура папок в ToDo.

    Рисунок 13. Создание папок, специфичных для устройств
    Рисунок 13. Создание папок, специфичных для устройств

Компоновка развертываемого приложения на устройствах iOS и Android

Структура Worklight состоит из общих файлов исходных кодов (HTML, CSS и JavaScript) в папке common и платформенно-зависимых файлов в соответствующих каталогах: android для Android-файлов, iphone для iPhone-файлов и т.д. Например, поскольку при компоновке для iOS и Android будет использоваться JQuery, файл jquery.js размещается в common/jquery.js. Специфичный для iOS JavaScript-код содержится в файле ios-plugin.js, который размещается в папке iphone/js/iso-plugin.js, а не в commonjs/iso-plugin.js. Worklight гарантирует синхронизацию общих файлов для каждой среды, специфичной для устройств.

Перед тестированием среды для iPhone необходимо установить XCode. Инструкции по настройке среды разработки для iOS приведены в разделах "Модуль 2.1" и "Модуль 3.1" документации по Worklight. Установите также Android SDK, Eclipse-плагин ADT (Android Developer Tools) и создайте новое виртуальное Android-устройство AVD (Android Virtual Device; рекомендуется Android 2.2). Инструкции по настройке среды разработки для Android приведены в разделах "Модуль 2.2" и "Модуль 3.2" документации по Worklight.

После подготовки исходного кода к развертыванию просто щелкните правой кнопкой мыши на Android-приложении и выберите Run as... > Build All and Deploy (рисунок 14). В рабочей области должна появиться новая папка с именем приложения: имя приложенияAndroid.

Рисунок 14. Компоновка и развертывание
Рисунок 14. Компоновка и развертывание

Затем щелкните правой кнопкой мыши на проекте и выберите Run as... > Android Application (рисунок 15). Если имеется реальный подключенный по USB Android-телефон с разрешенным в настройках режимом отладки, приложение автоматически запустится в нем; в противном случае приложение запустится в существующем AVD. При этом запустится эмулятор и отобразится строка "Hello World", введенная выше (рисунки 16 и 17).

Рисунок 15. Выполнение Android-приложения
Рисунок 15. Выполнение Android-приложения
Рисунок 16. Тестирование Android-приложения
Рисунок 16. Тестирование Android-приложения

Действия по развертыванию приложения на iOS-устройстве аналогичны действиям для Android. Щелкните правой кнопкой мыши на iPhone-приложении и выберите Run as... > Build All and Deploy, а затем нажмите Run as XCode Project (рисунок 17). В Xcode просто выберите реальное устройство либо эмулятор iPhone или iPad, а затем нажмите кнопку Run (рисунок 18). На рисунке 19 показано приложение, выполняющееся в iPhone-среде.

Рисунок 17. Компоновка и развертывание iOS-приложения
Рисунок 17. Компоновка и развертывание iOS-приложения
Рисунок 18. Выберите устройство или эмулятор для тестирования
Рисунок 18. Выберите устройство или эмулятор для тестирования
Рисунок 19. Тестирование iPhone-приложения
Рисунок 19. Тестирование iPhone-приложения

Заключение

В этой вводной статье мы настроили среду разработки Worklight-приложений и скомпоновали простое приложение "Hello World" для iPhone и Android. Поскольку настроены также среда исполнения Worklight-сервера и все вспомогательное программное обеспечение, можно приступать к добавлению в приложение списка задач логики и содержимого. Рассмотренные выше действия знакомят с итеративным процессом разработки и тестирования приложения на реальном устройстве или в эмуляторе.

Ресурсы

Научиться

Получить продукты и технологии

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, WebSphere
ArticleID=846772
ArticleTitle=Работа с Worklight: Часть 1. Cоздание первого Worklight-приложения
publish-date=08222012