Phonegap что это
Перейти к содержимому

Phonegap что это

  • автор:

PhoneGap vs. Cordova

Многие ошибочно полагают, что PhoneGap это некая единая система. Однако, существует три различные платформы — Cordova (CLI), Phonegap (CLI) и PhoneGap Build. Каждая имеет свои особенности и мелкие вариации.

История

PhoneGap был создан примерно в 2009 году внутри канадского стартапа Nitobi, как среда с открытым исходным кодом, которая позволяла получить доступ к нативным функциям устройства из встроенного webview. Целью проекта было обеспечить возможность построения мобильных приложений исключительно на веб-технологиях (HTML5/CSS и JavaScript), но с возможностью вызова нативного кода.

В 2011 году Adobe приобрели Nitobi и все права на PhoneGap. Исходный код ядра был передан Apache Foundation.
Этот исходный код остался открытым, но ему понадобилось новое имя. После пары неудачных попыток, в конце концов было выбрано «Cordova» – по названию улицы, на которой был расположен офис Nitobi.

Возможности

По своей сути, Cordova предлагает простой, но мощный API для вызова машинного кода из JavaScript’а. Это означает, что вы можете передавать любые данные из WebView на само устройство.
Многие не совсем правильно понимают этот момент. Cordova дает доступ к низкоуровневому API, с помощью простых плагинов (например, для доступа к камере и компасу). Поэтому, когда кто-то говорит, что Cordova не может делать то, что могут нативные приложения, он ошибается. Единственным ограничением являются плагины, доступные в настоящее время, и ваше желание и способности в написании недостающих плагинов.

Для работы с Cordova нужно устанавливать SDK мобильных платформ. Эту проблему решает PhoneGap Build — облачный сервис, который компилирует ваш HTML5 в готовые приложения без головной боли поддержки нативных SDK.

Разница

Cordova — это фреймворк с открытым кодом, которым управляет Apache. PhoneGap — это Cordova + инфраструктура от Adobe. Можно рассматривать Cordova как движок, который питает PhoneGap, подобно тому, как WebKit — это движок, который питает Safari, или Blink — Chrome.

1. Cordova это OpenSource, а PhoneGap принадлежит Adobe.
2. Кроме разных имен пакетов, у PhoneGap и Cordova, разная документация.
3. При выходе новых версий ОС (например iOS 64-bit), Cordova обновляется быстрее, чем PhoneGap.
4. У Cordova нет облачного сборщика проектов.

Что выбрать?

Если вы не хотите заморачиваться с командной строкой, или вам нужна интеграция с облаком, выбирайте Phonegap Build. В остальных случаях, выбирайте Cordova CLI.
Главное, что бы вы ни выбрали, не смешивайте технологии в одном проекте. Это внесет большой беспорядок.

Разработка мобильных приложений на PhoneGap и jQuery Mobile

PhoneGap — это OpenSource платформа, позволяющая разрабатывать мобильные приложения на HTML, JavaScript и CSS под различные платформы (практически без изменения кода приложения) в их число входят: iOS, Android, Blackberry, WebOS, Symbian и Windows Mobile на подходе. Прелесть его в том, что он не требует навыков разработки под конкретную платформу. Вы пишете свое приложение на JavaScript, используете HTML и CSS для разметки. Вы пишете мобильное приложение как обычный сайт или веб-сервис.
Движок PhoneGap расширяет API браузера и добавляет следующие возможности: доступ к акселометру, доступ к камере (пока только фото), доступ к компасу, доступ к списку контактов, запись и прослушивание аудио файлов, предоставляет доступ к файловой системе, позволяет работать с разными HTML5 хранилищами localStorage, Web SQL и т.п а также позволяет безболезненно обращаться к любому кросс-доменному адресу.
Кроме платформы PhoneGap имеет, пока бесплатный, билдер приложений под все устройства в один клик.

jQuery Mobile

Думаю все знают, но напомню ещё раз. jQuery Mobile — это надстройка над jQuery, позволяющая безо всяких проблем разрабатывать мобильные веб сайты и мобильные веб приложения.

Если вы знаете HTML, JavaScript, CSS, jQuery и испытываете проблемы с Java, Objective-C и другими, но желаете попробовать свои силы в мобильной разработке, то эта статья для вас.

Мы будем создавать мобильное приложение под Android (iOS требует значительно больших усилий для тестового приложения: Mac Only, нужен сертификат разработчика) под названием Tumblr Reader (не хотел создавать ещё один хабраридер).

Установка пакета программ для разработки

Если у вас стоит Eclipse + ADT Plugin, то эту часть можно пропустить. Оригинальная статья.
Подробная статья.
1. Скачайте и установите Eclipse Classic
2. Скачайте и установите Java Platform (JDK)
3. Скачайте и установите Android SDK
Запустите SDK Manager, выберете все модули и установите их все (займет минут 20)
4. Установите ADT Plugin
5. Сконфигурируйте ADT Plugin — вам необходимо указать путь до Android SDK иначе ничего не получится
6. Скачайте последнюю версию PhoneGap (на момент написания она была 0.9.4)

Создание эмулятора Android

Откройте SDK Manager (он может открыть различные окна, закройте их) выберите Virtual devices, нажмите New…
Создайте эмулятор как показано на скришноте:

Важно: Необходим именно Android 2.2. Если вы под Windows и в имени пользователя есть не ANSI символы, то вам необходимо после создания виртуалки сделать следующее: переместите c:\Users\ВашИмя\.android\avd\Android-2_2.avd в какую-нибудь другую папку, например в c:\Android\Android-2_2.avd , откройте файл Android-2_2.ini и измените path= на соответствующий.

Создание проекта

1. Запустите Eclipse в меню File выберите New > Android Project

Скриншот с официального туториала

2. В корневой директории проекта создайте 2 папки /libs и /assets/www
Из архива phonegap-0.9.4 скопируйте phonegap.jar в /libs
Выполните Git чекаут в /assets/www из репозитория: git://github.com/azproduction/phonegap-tumblr-reader.git или скачайте архивом из github.com/azproduction/phonegap-tumblr-reader/archives/master и распакуйте в /assets/www В репозитории готовое приложение, чтобы вам не пришлось копипастить из статьи.

3. Добавьте phonegap.jar в Build Path для этого нажмите правой кнопкой на корень проекта, выберите Properties, в списке выберите Java Build Path, выберите вкладку Libraries, нажмите Add JARs… и укажите путь до phonegap.jar

4. Откройте файл TumblrReader.java , который лежит в папке src/
4.1. Замените Activity на DroidGap
4.2. Замените setContentView() на super.loadUrl(«file:///android_asset/www/index.html»);
4.3. Добавьте import com.phonegap.*;

6. Откройте AndroidManifest.xml, допишите следующий код (он дает доступ к определенным ресурсам) нам нужен только android.permission.INTERNET :

Если вы будете экспериментировать с АПИ, то добавьте все опции:

в activity тег добавьте android:configChanges=»orientation|keyboardHidden»

7. Запустите ваше приложение в эмуляторе: Run As > Android Application если вы сделали все правильно, то должен открыться эмулятор с вашим приложением.

Создание Tumblr Reader

Далее в статье описывается поэтапное создание приложения. Теперь Eclipse можно свернуть и открыть ваш любимый редактор. Eclipse понадобится для перезапуска приложения в эмуляторе.

Cкелет приложения index.html

Я не останавливаюсь на принципах создания jQuery Mobile страниц. Вы можете прочитать сами.
Создаем index.html в папке /assets/www

Подключаем необходимые скрипты

  Tumblr Reader        

В body добавляем jQuery Mobile страницу — «Список мелких картинок» aka Dashboard

   
Options

Dashboard

При клике на мелкую картинку будет открываться страница с большой, добавляем страницу «Большая картинка»

   
Back

Image

Full

По умолчанию картинки будут загружаться с design.tumblr.com (первое, что пришло в голову), добавим страницу настроек, чтобы имя можно было менять:

   

Options

Ok

Скелет готов, добавим немного css (файл css/main.css)

#dashboard-list div, #dialog p
Логика приложения js/main.js

Сперва изучим Tumblr API в разделе JSON output немного описан формат JSON: по ссылке

http://%user%.tumblr.com/api/read/json

нам придет JavaScript вот такого формата:

var tumblr_api_read = 

Жаль, что не чистый JSON(P), но у нас есть jQuery.getScript, которая все разрулит за нас. Больше ничего о формате неизвестно. По исходнику стало понятно, что tumblr_api_read.tumblelog.title это заголовок блога, а tumblr_api_read.posts это массив постов формата:

Мы будем использовать только эти поля, поэтому остальные не описываю.

Рендер для отрисовки списка картинок

Каждая картинка будет вида:

Код рендера:

/** * Отрисоывывает тумбнайлсы * * @param posts * * @returns */ var render = function (posts) < var view = '', // Используем правильный индекс т.к. // Берем не все посты index = 0; // Собираем posts.forEach(function(post)< // Нужны только фотографии if (post.type !== 'photo') < return; >view += '
' + // При клике автоматом откроется страница dialog '' + '' + '' + '
'; index++; >); return view; >;
Загрузчик данных с Tumblr API

Загрузчик дергает URL

http://%user%.tumblr.com/api/read/json

и получает соответствующие данные, используя данные мы отрисовываем список картинок.

/** * Загружает и отрисовывает контент * * @param [user='tumblr'] */ var load = function (user) < user = user || 'tumblr'; // Включаем крутилку $.mobile.pageLoading(); // Добавляем на всякий случай var timeoutId = window.setTimeout(function () < $.mobile.pageLoading(true); >, 3000); // Загружаем $.getScript('http://' + user + '.tumblr.com/api/read/json', function (data, status) < // Если все хорошо if (status === 'success')< // Меняем заголовок $dashboard.find('h1').text(tumblr_api_read.tumblelog.title); // Рендерим контент $('#dashboard-list').html(render(tumblr_api_read.posts)); >else < // Что-то не так alert('Error occurred while loading ' + user); >// Останавливаем крутилку $.mobile.pageLoading(true); // Убиваем таймер window.clearTimeout(timeoutId); >); >;
Инициализатор приложения

Он инициализирует имя пользователя из localStorage, выполняет предварительную загрузку и делает другие операции по мелочи.

var init = function () < // Если 1 раз инициализировался, не вызываем повторно if (init.called) < return; >init.called = true; // Инициализация блоков $dashboard = $('#dashboard'); $dashboardList = $('#dashboard-list'); $dialogImg = $('#dialog').find('img'); $fullImg = $('#full-image'); $options = $('#options'); $optionsName = $('#options-name'); // Клик на любой тумбнайл $dashboardList.delegate('a', 'click', function () < var $img = $(this).find('img'); // Меняем опции диалога $dialogImg.attr('src', $img.data('big-src')); $fullImg.attr('href', $img.data('full-src')); >); // Загружаем или берем значение по умолчанию currentUser = window.localStorage.getItem("tumblr-reader-user") || 'design'; // Закидываем в опции $optionsName.val(currentUser); // Нажатие кнопки ОК в опциях $options.find('a').click(function () < var newUser = $optionsName.val(); // Если пользователь поменялся if (currentUser !== newUser) < // Меняем текущего пользователя currentUser = newUser; // Сохраняем опции window.localStorage.setItem("tumblr-reader-user", currentUser); // Загружаем данные с тумблера load(currentUser); >// Переходим на главную $.mobile.changePage('#dashboard'); >); // Первичная загрузка load(currentUser); >; init.called = false; // Девайс готов, этого события нет в браузере document.addEventListener("deviceready", init, true); // Оставляем для отладки в обычном браузере $(init);

Теперь наше приложение полностью готово и его можно запустить в Эмуляторе Run As > Android Application , если вы сделали мелкую правку и не хотите пересобирать приложение просто откройте index.html в любом WebKit браузере.

Собираем приложение под все платформы в PhoneGap Build

1. Вам необходимо отправить заявку на странице build.phonegap.com (мне ответ пришел через 5 минут)
2. На ваш почтовый адрес придет письмо с beta code используйте его в build.phonegap.com/people/sign_up
3. Как только вы авторизовались зайдите на build.phonegap.com/apps
4. Выберите опцию upload an archive or index.html file
5. Упакуйте содержимое /assets/www в .zip и отправьте архив, вместо архива можно использовать мой git репозиторий
6. Жмем Create, ждем немного пока PhoneGap Build собирает приложение под все платформы
Теперь ваше приложение доступно для скачивания build.phonegap.com/apps/9296 (моя сборка)

Ссылки

1. Если вам лень собирать и что-либо качать вы можете посмотреть приложение онлайн
2. Скачать готовое приложение под Android, webOS, Symbian можно тут (нужна регистрация в PhoneGap Build) iOS требует сертификат, Blackberry требует особых имен файлов поэтому их нет.
3. Скачать без регистрации Android 1 (Сборка PhoneGap Build требует лишних прав), Android 2 (ручная сборка требует только android.permission.INTERNET ), webOS, Symbian
4. Репозиторий Tumblr Reader на GitHub

Документация

Я продемонстрировал простое приложение, которое может работать и как веб-страница, вы можете попробовать создать что-то более сложное, использующее API телефона. Предложения, пожелания, критика приветствуется!

PhoneGap

PhoneGap (называемый также Apache Callback [2] [3] , Apache Cordova [4] ) — бесплатный open-source фреймворк для создания мобильных приложений, созданный Nitobi Software. Позволяет создать приложения для мобильных устройств используя JavaScript, HTML5 и CSS3, без необходимости знания «родных» языков программирования (например, Objective-C), под все мобильные операционные системы (iOS, Android, Bada и т. д.). [5] Готовое приложение компилируется в виде установочных пакетов для каждой мобильной операционной системы.

Поддерживаемые платформы

Таблица поддерживаемых возможностей для каждой конкретной операционной системы. [6]

Feature iPhone /iPhone 3G iPhone 3GS and newer Android 1.0 — 4.0 Windows Phone 7 5.x-6.0+ 4.6-4.7 Bada Symbian webOS
Accelerometer Да Да Да Да Да Н/Д Да Да Да
Camera Да Да Да Да Да Н/Д Да Да Да
Compass Н/Д Да Да Да Н/Д Н/Д Да Н/Д Н/Д
Contacts Да Да Да Да Да Н/Д Да Да Н/Д
File Да Да Да Да Да Н/Д Н/Д Н/Д Н/Д
Geolocation Да Да Да Да Да Да Да Да Да
Media Да Да Да Да Н/Д Н/Д Н/Д Н/Д Н/Д
Network Да Да Да Да Да Да Да Да Да
Notification (Alert) Да Да Да Да Да Да Да Да Да
Notification (Sound) Да Да Да Да Да Да Да Да Да
Notification (Vibration) Да Да Да Да Да Да Да Да Да
Storage Да Да Да Да Да Н/Д Н/Д Да Да
Barcode Scanner Да Да Да Н/Д Да Н/Д Н/Д Н/Д Н/Д

Интегрированные среды разработки

Интегрированными средами разработки (IDE), позволяющими значительно ускорить написание приложения (ускорение тестирования, компиляция «одним-кликом» для всех операционных систем, графическая разработка интерфейса через «drag-and-drop» и т. д.), являются Adobe Dreamweaver (начиная с версии 5.5), Tiggzi [7] , ApplicationCraft [8]

Примеры приложений

  • Official Wikipedia Android App — более миллиона установок (с января 2012 по конец февраля 2012 года), рейтинг 4.5 звезды
  • Примеры приложений на официальном сайте

Примечания

  1. PhoneGap License
  2. Apache Callback Project Incubation Status
  3. Apache Callback Proposal
  4. Apache Cordova gets a new look — The H Open Source: News and Features
  5. PhoneGap Seeks to Bridge the Gap Between Mobile App Platforms, Salon.com, April 5, 2009
  6. Поддерживаемая PhoneGap функциональность
  7. Tiggzi Mobile App Builder
  8. ApplicationCraft — Cloud based development environment

См. также

  • Официальный сайт — документация по API
  • Официальный сайт — средства разработки, библиотеки
  • JQuery Mobile
  • Titanium Studio — среда разработки на HMTL5, CSS3, Javascript, Ruby, Rails, Python, PHP для iPhone

Ссылки

  • Официальный сайт
  • Русскоязычная группа по разработке на CoffeeScript (в частности для PhoneGap)

PhoneGap

Apache Cordova (старое название — PhoneGap) — мобильная среда разработки приложений, первоначально разработанная Nitobi. Компания Adobe Systems приобрела Nitobi в 2011 году и провела ребрендинг PhoneGap, после чего выпустила версию с открытым исходным кодом программного обеспечения под названием Apache Cordova.

Особенности PhoneGap

  • PhoneGap позволяет создавать мобильные приложения используя стандартные веб технологии (HTML5, JavaScript and CSS3).
  • С его помощью можно обойтись без разработки на таких языках программирования как :Java for Android, Objective-C for iOS и C#.
  • PhoneGap Build позволяет делать сборки для iOS, Android и Windows Phone одновременно, без необходимости устанавливать какие-либо SDK tools (конечно, в этом есть доля лукавства – при разработке всё равно лучше делать сборку локально, хотя бы на Android, перед отправкой на тестирование). Но что более важно, этот сервис позволяет делать сборки для iOS в облаке без наличия Mac.
  • PhoneGap имеет простое API, что позволит легко начать разработку, для тех кто сталкивался с HTML, CSS и JavaScript.
  • Есть возможность использования любых существующих JavaScript библиотек (JQuery, Prototype, Sencha Touch).
  • Поддержка всех мобильных платформ.
  • Для более комфортной кроссплатформенной разработки и тестирования можно использовать Adobe Dreamweaver (версии 5.5 и выше), MyEclipse 2013, Tiggzi, ApplicationCraft. Разработка на JavaScript не должна вызывать затруднений, особенно если раньше вы уже писали на нём.
  • Приложение PhoneGap, по сути, представляет собой набор HTML-страниц, обёрнутых в нативную оболочку. Страницы хранятся в локальном каталоге или в облаке, а во время запуска на смартфоне они получают доступ к функциям устройства через плагины. Это делает приложения PhoneGap довольно лёгкими, но они выглядят менее естественно, а качество пользовательского интерфейса будет в большей степени зависеть от веб-представления конкретной ОС.
  • PhoneGap отличается невысокой производительностью по сравнению с нативными инструментами — и в этом снова виноваты веб-технологии.

Разработка мобильных приложений

Аналоги и альтернативы для PhoneGap

PhoneGap — похожие продукты (инструменты, решения, сервисы)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *