Разработка приложений для смартфонов на ОС Аndroid

Портирование приложений с использованием Intel XDK

Разбить на страницы
Показывать лекцию целиком

Задачи лабораторной работы:

  • Изучить основы работы в Intel XDK.
  • Исследовать переносимое приложение и переработать интерфейс.
  • Перенести интерфейс в среду Intel XDK с учетом особенностей мобильного устройства.
  • Организовать функционирование приложения, по возможности используя старый код.
    •

    Инструкции по выполнению лабораторной работы

    Основы работы в Intel XDK

    Если вы не изучали курс "Введение в разработку приложений для ОС Android", для выполнения этой работы вам необходимо установить и настроить среду Intel XDK. Особенности установки и настройки этой среды, а также инструкции по созданию и запуску приложений приведены здесь.

    Исследование переносимого приложения и переработка интерфейса

    Перед началом переноса существующего приложения на мобильную платформу Android необходимо очень хорошо продумать, как именно оно будет выглядеть в новых условиях. Следует учитывать особенности как самой платформы, так и устройств, которые на ней базируются. Необходимо обязательно обратить внимание на следующие факторы:

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

    Конечно, если вы портируете небольшое приложение наподобие классического калькулятора, то его вид на мобильном устройстве практически не будет отличаться от десктопных аналогов (см. рис 8.1):

    (рис 8.1) Приложение «Калькулятор» для разных операционных систем. Слева Калькулятор Windows 7, справа бесплатное приложение Shake Calc (скриншот из Google Play)

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

    Если главное окно оригинального приложения больше калькулятора, то при переносе его на мобильное устройство придется основательно переработать интерфейс. Проще всего разработать интерфейс мобильного приложения "с нуля" (здесь мы рекомендуем воспользоваться лабораторной работой №2 данного курса) и уже потом, сравнивая интерфейс исходного и нового приложений, добавить в последнее возможности для наиболее полного соответствия обеих версий.

    Перенос интерфейса в среду Intel XDK с учетом особенностей мобильного устройства

    Прежде всего необходимо создать новое приложение в Intel XDK. В первой части курса мы рассматривали создание приложений "с чистого листа" и из демонстрационных примеров. После очередного обновления среды (надеемся, что вы их регулярно скачиваете и устанавливаете) появилась новая возможность – создание примера из шаблона. Для этого необходимо при создании нового проекта выбрать пункт меню Start with a Template (см. рис 8.2).

    (рис 8.2) Создание проекта из шаблона

    С развитием среды список шаблонов должен увеличиться. В момент написания этой лабораторной работы были доступны следующие семь шаблонов:

  • Flip View App – предназначено для небольших приложений, содержащих только две экранные сущности (главную и окно настроек).
  • Grid View App подходит для разработки приложений, позволяющих просматривать фотографии и другие объекты.
  • List View App – для приложений, содержащих списки с возможностью просмотра подробностей для каждого конкретного элемента (например, почтовые приложения, ленты новостей и т.д.).
  • Login View App – для приложений, требующих обязательной предварительной регистрации.
  • Side Menu App позволяет разрабатывать приложения, содержащие несколько экранов, при этом переключение между ними осуществляется посредством меню, которое вызывается при помощи жеста вытягивания его из одной из сторон экрана.
  • Single View App – для простых одноэкранных приложений.
  • Tab View App – приложения, позволяющие переключаться между вкладками как с помощью нажатий на кнопки, так и посредством перелистывания.
    •

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

    Если же вам повезло и приложение, которое вы собираетесь перенести на мобильную платформу, уже является HTML5-приложением, мы можете сразу использовать инструмент Import an Existing App (см. рис 8.3).

    (рис 8.3) Создание проекта из существующего HTML5-приложения

    Организация функционирования приложения

    После разработки нового интерфейса необходимо исследовать код исходного приложения. Если оно было разработано с соблюдением принципов объектно-ориентированного программирования, то отделение интерфейсных элементов от логики его работы не должно вызвать особых проблем. Если же эти принципы не слишком соблюдались (такое, увы, бывает слишком часто), то могут возникнуть большие сложности с выделением логики работы приложения.

    Для использования имеющегося кода в Intel XDK необходимо перевести его на подходящий язык. Поскольку в HTML5-приложениях для описания интерфейса используются HTML5 и CSS, а для обеспечения логики работы скриптовый язык JavaScript, разделенный код необходимо переносить следующим образом. Все, что имеет отношение к интерфейсу, описывается на HTML5 с использованием CSS. Для ускорения процесса портирования можно использовать встроенный редактор дизайна, который имеется в Intel XDK. Для работы в этом режиме необходимо на вкладке Develop перейти из режима CODE в режим DESIGN. В этом режиме можно добавлять управляющие элементы и редактировать их свойства. В разделе PAGES здесь можно переключаться между экранными сущностями, если их несколько, и редактировать каждую из них (см. рис 8.4).

    (рис 8.4) Редактирование проекта в режиме дизайнера

    Для переноса логики работы приложения необходимо перевести существующий код на JavaScript. Основные конструкции JavaScript произошли из языка С, поэтому, если исходный код портируемого приложения был написан на языке из С-семейства, перевод его на JavaScript будет гораздо проще. Можно попробовать использовать готовые трансляторы, которые позволяют переводить код с одного языка программирования на другой. Конечно, после автоматической трансляции все равно придется править код, но, по крайней мере, количество трудоемкой рутинной работы значительно сокращается.

    В качестве транслятора с языка Java можно использовать проект GWT. Компилятор GWT переведёт код Java-приложения в соответствующий браузеру JavaScript, HTML и CSS. Для перевода кода с других языков можно использовать аналогичные решения.

    Задачи для самостоятельной работы

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

    Страницы:

    Задачи лабораторной работы:

  • Изучить основы работы в Intel XDK.
  • Исследовать переносимое приложение и переработать интерфейс.
  • Перенести интерфейс в среду Intel XDK с учетом особенностей мобильного устройства.
  • Организовать функционирование приложения, по возможности используя старый код.
    •

    Инструкции по выполнению лабораторной работы

    Основы работы в Intel XDK

    Если вы не изучали курс "Введение в разработку приложений для ОС Android", для выполнения этой работы вам необходимо установить и настроить среду Intel XDK. Особенности установки и настройки этой среды, а также инструкции по созданию и запуску приложений приведены здесь.

    Исследование переносимого приложения и переработка интерфейса

    Перед началом переноса существующего приложения на мобильную платформу Android необходимо очень хорошо продумать, как именно оно будет выглядеть в новых условиях. Следует учитывать особенности как самой платформы, так и устройств, которые на ней базируются. Необходимо обязательно обратить внимание на следующие факторы:

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

    Конечно, если вы портируете небольшое приложение наподобие классического калькулятора, то его вид на мобильном устройстве практически не будет отличаться от десктопных аналогов (см. рис 8.1):

    (рис 8.1) Приложение «Калькулятор» для разных операционных систем. Слева Калькулятор Windows 7, справа бесплатное приложение Shake Calc (скриншот из Google Play)

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

    Если главное окно оригинального приложения больше калькулятора, то при переносе его на мобильное устройство придется основательно переработать интерфейс. Проще всего разработать интерфейс мобильного приложения "с нуля" (здесь мы рекомендуем воспользоваться лабораторной работой №2 данного курса) и уже потом, сравнивая интерфейс исходного и нового приложений, добавить в последнее возможности для наиболее полного соответствия обеих версий.

    Перенос интерфейса в среду Intel XDK с учетом особенностей мобильного устройства

    Прежде всего необходимо создать новое приложение в Intel XDK. В первой части курса мы рассматривали создание приложений "с чистого листа" и из демонстрационных примеров. После очередного обновления среды (надеемся, что вы их регулярно скачиваете и устанавливаете) появилась новая возможность – создание примера из шаблона. Для этого необходимо при создании нового проекта выбрать пункт меню Start with a Template (см. рис 8.2).

    (рис 8.2) Создание проекта из шаблона

    С развитием среды список шаблонов должен увеличиться. В момент написания этой лабораторной работы были доступны следующие семь шаблонов:

  • Flip View App – предназначено для небольших приложений, содержащих только две экранные сущности (главную и окно настроек).
  • Grid View App подходит для разработки приложений, позволяющих просматривать фотографии и другие объекты.
  • List View App – для приложений, содержащих списки с возможностью просмотра подробностей для каждого конкретного элемента (например, почтовые приложения, ленты новостей и т.д.).
  • Login View App – для приложений, требующих обязательной предварительной регистрации.
  • Side Menu App позволяет разрабатывать приложения, содержащие несколько экранов, при этом переключение между ними осуществляется посредством меню, которое вызывается при помощи жеста вытягивания его из одной из сторон экрана.
  • Single View App – для простых одноэкранных приложений.
  • Tab View App – приложения, позволяющие переключаться между вкладками как с помощью нажатий на кнопки, так и посредством перелистывания.
    •

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

    Если же вам повезло и приложение, которое вы собираетесь перенести на мобильную платформу, уже является HTML5-приложением, мы можете сразу использовать инструмент Import an Existing App (см. рис 8.3).

    (рис 8.3) Создание проекта из существующего HTML5-приложения

    Организация функционирования приложения

    После разработки нового интерфейса необходимо исследовать код исходного приложения. Если оно было разработано с соблюдением принципов объектно-ориентированного программирования, то отделение интерфейсных элементов от логики его работы не должно вызвать особых проблем. Если же эти принципы не слишком соблюдались (такое, увы, бывает слишком часто), то могут возникнуть большие сложности с выделением логики работы приложения.

    Для использования имеющегося кода в Intel XDK необходимо перевести его на подходящий язык. Поскольку в HTML5-приложениях для описания интерфейса используются HTML5 и CSS, а для обеспечения логики работы скриптовый язык JavaScript, разделенный код необходимо переносить следующим образом. Все, что имеет отношение к интерфейсу, описывается на HTML5 с использованием CSS. Для ускорения процесса портирования можно использовать встроенный редактор дизайна, который имеется в Intel XDK. Для работы в этом режиме необходимо на вкладке Develop перейти из режима CODE в режим DESIGN. В этом режиме можно добавлять управляющие элементы и редактировать их свойства. В разделе PAGES здесь можно переключаться между экранными сущностями, если их несколько, и редактировать каждую из них (см. рис 8.4).

    (рис 8.4) Редактирование проекта в режиме дизайнера

    Для переноса логики работы приложения необходимо перевести существующий код на JavaScript. Основные конструкции JavaScript произошли из языка С, поэтому, если исходный код портируемого приложения был написан на языке из С-семейства, перевод его на JavaScript будет гораздо проще. Можно попробовать использовать готовые трансляторы, которые позволяют переводить код с одного языка программирования на другой. Конечно, после автоматической трансляции все равно придется править код, но, по крайней мере, количество трудоемкой рутинной работы значительно сокращается.

    В качестве транслятора с языка Java можно использовать проект GWT. Компилятор GWT переведёт код Java-приложения в соответствующий браузеру JavaScript, HTML и CSS. Для перевода кода с других языков можно использовать аналогичные решения.

    Задачи для самостоятельной работы

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

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^