PhoneGap. Установка и конфигурация. Часть 1

В этом уроке, мы используем PhoneGap, для построения веб — приложения на устройства. Особенностью является то, что данная технология способна создавать приложения не только для Андроида. В ее пакете находиться поддержка 7 ОС.

Шаг 0. Знакомимся

Сегодня я хотел бы продолжить знакомство с возможностью разработки под Андроид приложений построенных на веб технологиях. Очень интересный инструмент и большие возможности нам предоставляет такой инструмент как PhoneGap. С помощью него, можно построить приложения для множества ОС вовсе не вникая в язык программирования каждого из них. Достаточно знать HTML,JS,CSS и можно создавать свои приложения. Остальную часть, PhoneGap сделает за Вас.

Детально, можно прочитать на офф. сайте: http://phonegap.com/

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

Шаг 1. План урока

Наш урок будет состоять с основных 3 частей. Это будет 3 больших шага для создания приложения. Каждый раз попытаемся что-то улучшить, добавить или же отрезать лишнее))

В первой части мы займемся настройкой нашей среды в которой будем работать. Установим необходимый софт, и сделаем его настройку под ОС Windows и Linux.

Во второй части спроектируем наше приложение. Поставим цель, создадим шаблон, а дальше займемся реализацией. Здесь не будет ничего особенно трудного или нового. Новым будет то, как мы используем структуру PhoneGap для создания приложения и что нам понадобиться чтобы собрать его. Лично я удивился простоте данного метода. Думаю, многим он может понравиться. Особенно тем, кто не так давно пришел к нам с веб-разработки.

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

После слов напутствия, приступим к настройке :-)

 

Шаг 2. Установка нужных пакетов

PhoneGap — можно установить на Linux, Windows, MacOS. Мы установим его и настроим на первых двух) Третье устройство у нас просто отсутствует)) Но шаги будут не сильно отличаться.

Устанавливаем на Linux:

У вас должен быть предустановлен Python. В частности, он всегда установлен по умолчанию. Но если нету, то устанавливаем:

1
2
3
sudo add-apt-repository ppa:fkrull/deadsnakes
sudo apt-get update
sudo apt-get install python2.

Теперь, также нужно установить node.js. Переходим на сайт: http://nodejs.org/ и скачиваем архив для Linux по кнопке «Install»:

 

Распаковываем архив:

1
tar xfz node-v0.10.25.tar.gz

Устанавливаем node.js:

1
2
3
4
cd node-v0.10.25/
./configure
make
make install

После этого, можно переходить непосредственно к установке самого PhoneGap:

1
sudo npm install -g phonegap

Устанавливаем в Windows:

Переходим на сайт: http://nodejs.org/ скачиваем(так же как и в описании к линукс) и устанавливаем. Здесь будет установочный пакет. Так что просто выбираем что куда и жмем «Далее».

Далее открываем консоль и вводим команду:

1
npm install -g phonegap

Будет выполнена загрузка и установка приложения. Ждем пока консоль перестанет логировать свои действия и выведет результат работы.

Общий пункт для ОС:

Чтобы все работало, нужно скачать и распаковать себе Ant. После, добавить его в PATH. Идем на сайт Apache и скачиваем: http://ant.apache.org/bindownload.cgi. Настройкой PATH мы займемся в следующем шаге. Пока что распакуйте его себе в удобное для Вас место.

 

Шаг 3. Настройка

Проект будем создавать под Android, поэтому нам понадобиться Android SDK и настроенная JVM. Как это поставить, настроить написано в уроке:  Android. С чего начать? Если уже установлено или только что установили и настроили, то скачиваем SDK для API19. Это понадобиться для создания приложения.

Важным этапом является существование у вас PATH необходимых путей. Добавляем пути к Ant,AndroidSDK.

Добавление в Linux:

Открываем консоль, и добавим в PATH глобально. Для этого выполняем команду:

1
vim ~/.bashrc

Либо, можно использовать редактор nano:

1
nano ~/.bashrc

Теперь идем в самый низ файла и добавляем туда данное содержимое:

1
2
3
4
5
6
7
8
9
10
ANDROID_HOME=/path/to/your/adt-bundle-linux-x86_64-20130917/sdk
ANDROID_TOOLS=${ANDROID_HOME}/tools
ANDROID_PLATFORM_TOOLS=${ANDROID_HOME}/platform-tools
ANT_BIN=/path/to/your/apache-ant-1.9.3/bin
 
export PATH=$JAVA_HOME:$PATH
export PATH=$M2_BIN:$PATH
export PATH=$ANDROID_TOOLS:$PATH
export PATH=$ANDROID_PLATFORM_TOOLS:$PATH
export PATH=$ANT_BIN:$PATH

И для того чтобы изменения пришли в силу выполняем:

1
source ~/.bashrc

Добавление в Windows:

Заходим в дополнительные настройки -> Переменные среды -> Системные переменные. Там создадим  новые переменные:

1
2
3
4
5
ANT = path\to\apache-ant-1.9.3
ANT_BIN = %ANT%\bin
ANDROID_HOME = path\to\sdk
ANDROID_PLATFORM_TOOLS = %ANDROID_HOME%\platform-tools
ANDROID_TOOLS = %ANDROID_HOME%\tools

Теперь находим переменную Path, идем в конец ставим и вставляем эти переменные через точку с запятой в таком формате:

1
%ANT_BIN%

Для проверки правильности и того, что переменные были обновлены, зайдите в консоль и наберите:

1
echo %path%

Вам должно вернуть строчку с набором всех путей. Последними должны быть пути которые были записаны в переменные. Если они отсутствуют, то попробуйте перезагрузить ПК.

Теперь выполним проверку того, настроено ли у нас все правильно. Перейдем в консоли в любое место и введем по очереди команды, заранее подключите к ПК телефон. Последняя команда загрузит приложение на телефон:

1
2
3
phonegap create my-app
cd my-app
phonegap run android

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

http://devcolibri.com/3950