Step 1: Install PhoneGap
The PhoneGap Desktop application provides a drag and drop interface for creating PhoneGap applications. It’s an alternative to using the PhoneGap CLI built for those who prefer a visual user interface over a command line interface approach.
Select your operating system to continue:
Mac OS X Installation
Double-click the downloaded file to run the installer. You will initially be prompted with a license agreement to accept:
Drag and drop the application into the Applications folder on your Mac as prompted:
Next simply open the application and proceed to Step 2 where you will install the PhoneGap Developer App to your mobile device for previewing the apps you build.
Windows Installation
Double click the downloaded file to run the installer. You will be prompted with the PhoneGap Desktop Setup Wizard:
Accept the license agreement:
Select the desired destination for the application and click Next:
Select the desired location for the shortcut and click Next:
Click Install to begin the installation:
Click Finish to close the Setup Wizard:
Next simply open the application and proceed to next step below where you will install the PhoneGap Developer App to your mobile device for previewing the apps you build.
PhoneGap. Как собрать свое приложение? Часть 2
В данном уроке, мы создадим приложение для Андроида используя PhoneGap.Изначально создадим структуру проекта, запрограммируем дизайн, соберем и отправим на устройство.
Шаг 0. Введение
Данный урок предполагает что у вас уже есть настроенная среда для разработки. Детально, как настроить свою ОС описано в первой части урока PhoneGap. Установка и конфигурация. Часть 1. Нашей основной задачей будет разобраться как работать с данной технологией для создания приложения на примере. Напоминаю, что внутри у нас будет локальный сайт.
Шаг 1. Постановка цели
Пришло время решить что будем делать. Настраивать мы уже умеем и кое-что даже знаем. Пора бы сделать что-то полезное.
Посоветовавшись с Александром мы решили что покажем как создать приложение, которое будет показывать погоду. Погоду будем подгружать с удаленного сервера, естественно. В конце урока, мы получим достаточно интересное приложение.
На данном шаге, мы создадим наше приложение, его каркас, сделаем вывод погоды и навигацию. После чего построим приложение и отправим его на устройство.
Шаг 2. Проектирование приложения
Дизайнер с меня не очень, конечно, так как я любитель натыкать побольше функционала, что время от времени не есть очень хорошо, но в этот раз я попытался избежать этого и оставил самое необходимое, на мой взгляд.
Шаг 3. Создание View
В этом шаге, создадим скелет нашего приложения, а также попробуем осуществить придуманный мною дизайн.
И так, идем с консоль, переходим в корень директории в которой будем строить наше приложение и даем команды на построение структуры.
Дальше, открываем в этом месте проводник, там должна появиться директория WeatherChecker. Заходим в нее и открываем папку /www. Внутри именно и находиться наш сайт. Здесь мы и будем заниматься тем, чтобы построить вид и добавить нужный функционал.
Открываем index.html и начинаем создавать нашу главную страничку. Тут я уже не буду вдаваться в подробности. Здесь используется обычная HTML разметка, без использования дополнительных библиотек.
Дальше, модифицируем стили, которые были созданы по умолчанию, а также, добавляем необходимые для работы. Меняем цвет фона и отключаем градиент для странички. Убираем лишнее. Я оставил только стиль для body и описал только нужные стили:
background: url(../weather-icons/sunny.png) no-repeat center; – здесь мы подключаем нашу иконку, для погоды. Так что копируем внутрь нашего приложения, по указанному пути наши графические файлы.
Удаляем папку img. Она нам не понадобиться. У ней находиться лого для приложения по умолчанию.
Изначально, сделаем наше приложение только портретным. Так что идем по пути /platforms/android/ и открываем AndroidManifest.xml. В нем, в теге activity добавляем android:screenOrientation=”portrait”.
Подпишем наше приложение по своему. Заходим в папку www и открываем там файл config.xml. Будем менять только пару слов в начальных строчках. Название нашего приложения внутри тега: WeatherChecker
И как завершение в работе с графической частью, предлагаю поменять иконку на свою. Для этого идем по пути platforms/android/res/ и в директориях drawable меняем icon.png на свой. Внимательно смотрите за разрешением.
Шаг 4. Создание оффлайн функционала
У нас в приложении, по задумке, есть часы. Так что стоит написать маленький скрипт, который будет отображать часы. Наши скрипты, для приложения, будут находиться в файле core.js.
Шаг 5. Строим наше приложение
После того, как мы настроили первичный вид, остается построить наше приложение и отправить его на устройство для теста. Переходим в консоли в корень нашего проекта, подключаем телефон и набираем команду:
После данной команды, приложение будет скомпилировано, собрано, подписано специальным ключом дебагинга и отправлено на устройство или эмулятор. В результате этого урока, вот что получилось у меня. И если следовали всем моим инструкциям, то что-то подобное должно получиться и у вас.
В следующем уроке, мы подключим наше приложение к серверу и будем получать и выводить от туда погоду в нашем приложении. Спасибо за внимание. Жду Вас в следующей части.
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. В частности, он всегда установлен по умолчанию. Но если нету, то устанавливаем:
Теперь, также нужно установить node.js. Переходим на сайт: http://nodejs.org/ и скачиваем архив для Linux по кнопке “Install”:
Устанавливаем node.js:
После этого, можно переходить непосредственно к установке самого PhoneGap:
Устанавливаем в Windows:
Переходим на сайт: http://nodejs.org/ скачиваем(так же как и в описании к линукс) и устанавливаем. Здесь будет установочный пакет. Так что просто выбираем что куда и жмем “Далее”.
Далее открываем консоль и вводим команду:
Будет выполнена загрузка и установка приложения. Ждем пока консоль перестанет логировать свои действия и выведет результат работы.
Общий пункт для ОС:
Чтобы все работало, нужно скачать и распаковать себе Ant. После, добавить его в PATH. Идем на сайт Apache и скачиваем: http://ant.apache.org/bindownload.cgi. Настройкой PATH мы займемся в следующем шаге. Пока что распакуйте его себе в удобное для Вас место.
Шаг 3. Настройка
Проект будем создавать под Android, поэтому нам понадобиться Android SDK и настроенная JVM. Как это поставить, настроить написано в уроке: Android. С чего начать? Если уже установлено или только что установили и настроили, то скачиваем SDK для API19. Это понадобиться для создания приложения.
Важным этапом является существование у вас PATH необходимых путей. Добавляем пути к Ant,AndroidSDK.
Добавление в Linux:
Открываем консоль, и добавим в PATH глобально. Для этого выполняем команду:
Либо, можно использовать редактор nano:
Теперь идем в самый низ файла и добавляем туда данное содержимое:
И для того чтобы изменения пришли в силу выполняем:
Добавление в Windows:
Заходим в дополнительные настройки -> Переменные среды -> Системные переменные. Там создадим новые переменные:
Теперь находим переменную Path, идем в конец ставим и вставляем эти переменные через точку с запятой в таком формате:
Для проверки правильности и того, что переменные были обновлены, зайдите в консоль и наберите:
Вам должно вернуть строчку с набором всех путей. Последними должны быть пути которые были записаны в переменные. Если они отсутствуют, то попробуйте перезагрузить ПК.
Теперь выполним проверку того, настроено ли у нас все правильно. Перейдем в консоли в любое место и введем по очереди команды, заранее подключите к ПК телефон. Последняя команда загрузит приложение на телефон:
После выполнения ряда команд, будет создано приложение под конкретную платформу и будет загружено на устройство для тестирования. На этом настройка закончена. Жду вас в следующей части)
ПОХОЖИЕ ПУБЛИКАЦИИ
15 комментариев к статье «PhoneGap. Установка и конфигурация. Часть 1»
Полная команда запуска:
phonegap run android –device=Название устройства
Чтоб получить название устройства вводим в консоли:
adb devices
А для разработки на Windows Phone есть такая же инструкция. Я понимаю что отличается только третий шаг, но не уверен что нужно сделать
Нужно. Без переменных среды он не может знать где Ant и где SDK для того чтобы компилировать код.
Если установить ант через апт-гет то разве он не станет туда, что уже по дефолту в $path есть /usr/bin
Все сделал, все установил, спасибо! Но при попытке компиляции приложения phonegap run android выдает ошибку на build.xml на несколько строчек ругается! Под Виндой 7. Что не так подскажите? Очень надо
Lector, если проблему не решил – напиши текст ошибки. У меня что-то подобное, тоже есть ошибка и тоже с build.xml.
Решения нашел. Нужно коректно прописать патч к яве
Где ссылка на вторую часть?
В каком смысле патч к яве? путь всмысле? там где переменные среды мы пишем?
Я извиняюсь. Совсем новичок в этом деле. В инструкции написано “Добавление в Windows: Заходим в дополнительные настройки…”, а дополнительные настройки чего?)
Настройка переменной Path в Windows
Windows 8
Перетащите курсор мыши в правый нижний угол экрана
Щелкните на значке “Поиск” и введите: панель управления
Выберите Control Panel (Панель управления) -> System (Система)-> Advanced (Дополнительно)
Выберите Environment Variables (Переменные среды),в меню System Variables (Системные переменные), найдите переменную PATH и щелкните на ней.
В окнах редактирования измените PATH, добавив местоположение класса к значению для PATH. При отсутствии элемента PATH, можно добавить новую переменную и добавить PATH как имя и местоположение класса как значение.
Закройте окно.
Откройте заново окно командной строки и выполните код java.
В меню Start (Пуск) выберите пункт Computer (Компьютер)
В контекстном меню выберите пункт System Properties (Свойства системы)
Выберите Advanced system settings (Дополнительные параметры системы) > вкладку Advanced (Дополнительно)
Выберите Environment Variables (Переменные среды),в меню System Variables (Системные переменные), найдите переменную PATH и щелкните на ней.
В окнах редактирования измените PATH, добавив местоположение класса к значению для PATH. При отсутствии элемента PATH, можно добавить новую переменную и добавить PATH как имя и местоположение класса как значение.
Откройте заново окно командной строки и выполните код java.
Меню Start (Пуск) -> Control Panel (Панель управления) -> System (Система)-> Advanced (Дополнительно)
Выберите Environment Variables (Переменные среды),в меню System Variables (Системные переменные), найдите переменную PATH и щелкните на ней.
В окнах редактирования измените PATH, добавив местоположение класса к значению для PATH. При отсутствии элемента PATH, можно добавить новую переменную и добавить PATH как имя и местоположение класса как значение.
Закройте окно.
Откройте заново окно командной строки и выполните код java.
Щелкните значок My Computer (мой компьютер) правой кнопкой мыши
В контекстном меню выберите пункт Properties (Свойства)
Щелкните вкладку Advanced (Дополнительно) (в Vista – ссылка Advanced system settings (Расширенные параметры системы))
В окнах редактирования измените PATH, добавив местоположение класса к значению для PATH. При отсутствии элемента PATH, можно добавить новую переменную и добавить PATH как имя и местоположение класса как значение.
Откройте заново окно командной строки и выполните код java.
Установка переменной Path в операционных системах Solaris и Linux
Чтобы определить, находится ли исполняемый файл java в PATH, выполните:
% java -version
При этом будет выполнена версия выполняемого файла java, если он будет найден. При получении ошибки java: команда не найдена. Путь задан неправильно.
Чтобы определить исполняемый файл Java, первым обнаруженный в PATH, выполните команду:
% which java
Ниже приведены шаги по окончательному заданию PATH,
Примечание. Ниже приведены инструкции для двух наиболее популярных оболочек в Linux и Solaris.
При использовании других оболочек перейдите по ссылке ниже.
Учебное пособие по настройке пути
Отредактировать файл запуска(
/ .bashrc)
Измените переменную PATH:
PATH=”$PATH”:/usr/local/jdk1.6.0/bin
экспортировать переменную PATH
Сохранить изменения и закрыть окно
Открыть новое окно терминала
Проверить, правильно ли задана переменная PATH
% java -version
Для оболочки C Shell (csh):
Отредактировать файл запуска (
/ .cshrc)
Задайте путь
set path=”$PATH”:/usr/local/jdk1.6.0/bin
Сохранить изменения и закрыть окно
Открыть новое окно терминала
Проверить, правильно ли задана переменная PATH
% java -version