Веб-разработка PhoneGap, или нативное приложение для Android на HTML, CSS и Javascript

Не так давно я стал обладателем мобильного устройства на Android. Как разработчика программного обеспечения меня сразу же заинтересовала возможность написания мобильных приложений для подобного устройства. Как известно, нативные приложения для Android пишутся на Java с использованием Android SDK от Google. Но также существует возможность создавать мобильные версии веб-приложений на HTML, CSS и JavaScript, и такие веб-приложения будут доступны лишь через браузер и не будут иметь возможность доступа к таким возможностям мобильных устройств как геолокация, акселерометр, камера, доступ к файлам и другим. Но признайтесь, было бы неплохо, если бы нативное мобильное приложение можно было написать на JavaScript…

И это совсем не из-за того, что я специализируюсь на веб-верстке и JavaScript. А из-за следующих преимуществ, которые мы при этом получим:

  • при создании мобильного приложения можно использовать наработки в верстке, которые применялись на основном сайте;
  • приложение запустится на любом мобильном устройстве, на котором есть браузер;
  • на HTML, CSS и JavaScript проще писать и отлаживать приложение, чем на Java (или на Objective-C для iOS);
  • гораздо проще найти веб-программиста, чем программиста Java или Objective-C;
  • и совсем здорово будет, если с помощью JavaScript мы получим доступ к API устройства, получив возможность управлять камерой, контактами, файлами на устройстве и прочими аппаратными «плюшками».

К счастью, такая возможность есть, благодаря проекту PhoneGap. И сегодня я опишу процесс настройки необходимого программного обеспечения для разработки под Android с помощью PhoneGap на Ubuntu 11.10.

Итак, приступим. Для начала нам потребуется среда разработки программного обеспечения Eclipse. Если она еще не установлена, то устанавливаем ее, например, через консоль:

sudo aptitude install eclipse

На Ubuntu 11.10 из репозитория устанавливается Eclipse 3.7 Indigo. Далее следует установить Android Delevloper SDK. Однако вместо того, чтобы скачивать архив с SDK, установить его и связать с Eclipse, мы поступим следующим образом. Откроем в Eclipse пункт меню Help — Install New Software, в открывшемся окне найдем поле «Work with» и впишем в него URL «http://dl.google.com/eclipse/plugin/3.7». В появившемся списке доступных дополнений для Eclipse отметим «Google Plugin For Eclipse».

Внимание! Если при установке этого дополнения возникают ошибки типа «Cannot complete the install because one or more required items could not be found. Missing requirement», то следует установить специальные дополнения Eclipse для Linux. Для этого опять идем в Help — Install New Software, в открывшемся окне найдем поле «Work with» и вписываем в него URL «http://download.eclipse.org/releases/indigo/». Затем отмечаем пакеты внутри Linux Tools согласно скриншоту:

После установки дополнений следует перезапустить среду разработки. Если Google Plugin For Eclipse был успешно установлен, то при новой загрузке Eclipse мы увидим окошко Android SDK Manager.

Для совместимости с большинством Android-устройств рекомендуется выбрать версию платформы пониже, например, 2.1. Для знакомства с PhoneGap достаточно установить следующие компоненты из Android SDK:

  • Android SDK Tools;
  • Android SDK Platform-tools;
  • SDK Platform (например, версии 2.1).

Для Windows требуется еще установить Google USB Driver, но на Linux и MacOSX все будет работать и без этого драйвера.
Компоненты Android SDK будут установлены в каталог ~/android-sdks. После того, как будут скачаны и установлены компоненты Android SDK, останется только лишь установить ADT Plug-In для Eclipse. Для этого снова откроем в Eclipse пункт меню Help — Install New Software, в открывшемся окне найдем поле «Work with» и впишем в него URL «https://dl-ssl.google.com/android/eclipse/». После появления списка дополнений для Eclipse, отмечаем «Developer Tools» и переходим к установке. После успешной установки Eclipse еще раз перезапустится, и после этого мы будем готовы к созданию заготовки для нашего мобильного проекта на HTML, CSS и JavaScript.

Как я уже упоминал, нам нужно будет скачать PhoneGap с официального сайта. На странице http://phonegap.com/start#android есть подробная инструкция, как создать HelloWorld-проект для Android, поэтому не буду писать здесь то, что есть на официальной странице PhoneGap.

Тестовый проект отлично запускается как на эмуляторе, который входит в состав Android SDK, так и на реальном устройстве. Единственное, что нужно не забыть при этом — это перевести смартфон в режим отладки через меню «Настройки» > «Приложения» > «Разработка» (Settings > Applications > Development).

Также особенно стоит отметить, что PhoneGap поддерживает семь мобильных платформ. Кроме Android это iOS, Windows Phone, BlackBerry, WebOS, Symbian и Bada. Таким образом, мы получаем возможность, писать единый код для всех мобильных платформ и для веба.

На странице http://docs.phonegap.com/en/1.6.1/index.html представлена полная информация о том, как взаимодействовать с API мобильного устройства через JavaScript.

Конечно это не все тонкости, которые нужно знать для разработки js-приложений для мобильных платформ, потому что как минимум нужно выбрать библиотеки и инструменты, с помощью которых можно сделать интерфейс приложения. Здесь можно перечислить следующие js-библиотеки, которые так или иначе были созданы именно для мобильных приложений или обладают небольшим размером:

Но уже непосредственно о программировании нативных приложения для Android на JavaScript пойдет речь в одной из следующих статей.