Хотите узнать, как использовать PhoneGap, но не знаете, с чего начать? Присоединяйтесь к нам, когда мы собираем вместе «Sculder», не только дань отличного научно-фантастического сериала, но и полноценное мобильное приложение для верующих в вас!
В этой серии мы создадим мобильное приложение, используя некоторые функции PhoneGap. Мы перейдем от установки SDK к развертыванию в магазинах приложений двух основных платформ: iOS и Android. Концепции, рассматриваемые в этой серии, будут включать доступ к камере устройства, локальному хранилищу и геолокации.
В этой первой части мы кратко рассмотрим, что на самом деле представляет собой PhoneGap и для чего вы можете его использовать, а затем рассмотрим установку инфраструктуры PhoneGap и SDK, которые нам необходимы для тестирования в OS X, Windows и Linux. сред. Затем мы создадим и запустим очень простое приложение PhoneGap «Hello World», чтобы убедиться, что у нас все работает правильно.
Что такое PhoneGap?
К настоящему времени у вас, вероятно, есть хорошее представление о том, что такое PhoneGap, и вы, вероятно, даже использовали его, но если нет, то вот краткий обзор.
PhoneGap родился от iPhoneDevCamp в 2008 году, где он был создан просто потому, что было мало разработчиков Objective-C по сравнению с веб-разработчиками. Задача состояла в том, чтобы собрать структуру, которая позволила бы веб-разработчикам использовать HTML, CSS и JavaScript для кодирования приложений, которые могли бы использовать преимущества встроенных функций мобильного устройства, таких как функции камеры, хранилища и геолокации. Изначально созданный для работы с iPhone, в течение года PhoneGap рос и начал поддерживать Android тоже. Сейчас, почти 4 года, PhoneGap является одним из самых обсуждаемых наборов инструментов для разработки мобильных приложений и поддерживает гораздо более широкий спектр мобильных устройств, включая iOS, Android, Blackberry, Symbian, webOS, WP7 и Bada.
На момент публикации (например, январь 2012 г.) платформа в настоящее время поддерживает API-интерфейсы акселерометра, камеры, компаса, контактов, файлов, геолокации, мультимедиа, сети, уведомлений (оповещения, звука и вибрации) и устройств хранения. Все новые функции полностью поддерживаются в новых устройствах iOS (3GS +) и Android. Более подробную информацию о поддержке устройств Blackberry, WP7, Sybian, webOS и Bada смотрите в официальной таблице совместимости .
Несмотря на противоречивое мнение, PhoneGap — это не однократная запись, а развертывание везде (хотя оно близко подходит). Это, безусловно, кроссплатформенная инфраструктура, способная работать на многих поддерживаемых устройствах, но для успешного развертывания вам, вероятно, потребуется протестировать и настроить свой код на каждом из целевых устройств.
Установите & Hello World для iOS
Если вы хотите разрабатывать для iOS, вам понадобится компьютер на базе Intel с операционной системой MAC OS X версии 10.6 или более поздней. Вам также понадобится последняя версия Xcode (версия 4 на момент написания) и iOS SDK для тестирования. Чтобы скачать Xcode, вам нужно зарегистрироваться в качестве участника программы Apple для разработчиков .
Зайдите на www.phonegap.com и в верхнем левом углу вы увидите кнопку для загрузки последней версии PhoneGap. Нажав на это, вы получите приглашение для загрузки ZIP-файла, содержащего все необходимое для начала работы.
Распаковка файла даст вам множество папок, каждая из которых помечена целевой ОС. Как мы устанавливаем для iOS, откройте папку iOS и смонтируйте файл dmg . dmg содержит файл pkg . Нажмите на это и пройдите процесс установки. После завершения установки вы можете запустить Xcode, а когда вы создадите новый проект, вы сможете выбрать PhoneGap в качестве шаблона.
Теперь мы можем установить параметры для нашего проекта и расположение наших файлов. Как только мы это сделаем, наш проект будет построен в указанном каталоге, и XCode предоставит нам нашу сводную страницу. Здесь мы можем легко добавить значки приложений и изменить пару настроек, когда наше приложение будет готово к упаковке и отправке в магазин приложений — сейчас мы просто нажмем RUN в верхнем левом углу. Это скомпилирует приложение и запустит симулятор iOS.
Если вы попробуете это сейчас, после заставки вы получите сообщение об ошибке, что файл index.html не может быть найден. Не нужно беспокоиться, это действительно то, что должно произойти. Нам нужно перейти в рабочий каталог проекта (щелкните правой кнопкой мыши по проекту в Xcode и нажмите «Показать в поиске»), и там мы увидим каталог www в корневом каталоге проекта.
Теперь нам нужно перетащить этот каталог в Xcode и добавить его в проект.
В опциях для этих файлов нам нужно убедиться, что мы выбрали «Создать ссылку на папку для всех добавленных папок», а затем нажмите «Готово». Наш каталог www теперь добавлен в проект. Теперь мы можем нажать снова запустить, и вы получите базовый «Hello World» для PhoneGap.
Каталог www теперь будет нашим корневым каталогом для приложения. Здесь мы будем хранить любой HTML, CSS или JavaScript, который будет использоваться нашим приложением, как вы ожидаете от любого другого веб-приложения. Файл phonegap.js — это файл JavaScript, который будет действовать как наш API, предоставляя нам доступ к собственным API, которые мы, возможно, захотим использовать в нашем приложении позже.
Установите & Hello World для Android
В отличие от разработки для iOS, вы можете разрабатывать для Android на любой платформе. Хотя рекомендуется использовать Eclipse IDE с парой плагинов, существует альтернативный способ использования PhoneGap (через командную строку), но было бы хорошо, если вы начнете с более длинного пути сначала с IDE, а затем попробуете путь командной строки и посмотреть, какой из них вы предпочитаете. В этом уроке мы будем использовать метод IDE.
Во-первых, вам нужно перейти на веб-сайт Eclipse и загрузить IDE для выбранной вами платформы. Классическая версия отлично подходит для того, что нам нужно. После загрузки запустите Eclipse, и нам нужно установить плагин ADT. Вам нужно перейти в Help => Install New Software и нажать кнопку add в правом углу.
Затем вы можете ввести ADT Plugin для имени плагина и ввести следующее для URL хранилища.
|
1
|
https://dl-ssl.google.com/android/eclipse/
|
Плагин загрузит и установит, и Eclipse предложит вам перезапустить. После перезапуска вы можете создать новый проект Android.
Затем вы пройдете через мастер проектов, где дадите имя своему приложению и настроите его рабочую область. Вы также выберете свой целевой SDK для сборки — вы можете выбрать самый последний на данный момент (4.0.3 на момент написания). Просмотрите оставшуюся часть мастера и настройте оставшуюся информацию для приложения.
Вам будет задан вопрос, хотите ли вы загрузить и установить необходимые Android SDK на этом этапе. Если они уже есть на вашем компьютере, перейдите к папке. Если нет, вы можете позволить Eclipse загрузить их для вас.
В корневом каталоге приложения нам нужно создать каталог с именем lids а в каталоге активов создать еще один каталог с именем www . Теперь вернемся к исходному файлу PhoneGap, который был загружен, и в папке Android вам нужно скопировать файл phonegap.jar в созданный нами каталог libs а затем скопировать phonegap.js в каталог www .
Ваша структура должна выглядеть следующим образом:
В нашем каталоге www создайте файл index.html и вставьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE HTML>
<html>
<head>
<title>mobiletuts phonegap</title>
<script src=»phonegap-1.2.0.js»></script>
<script>
function onLoad(){
document.addEventListener(«deviceready», onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert(«PhoneGap is working!!»);
}
</script>
</head>
<body onload=»onLoad();»>
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
|
Теперь нам нужно внести некоторые изменения в основной файл Java, который находится в папке src . Во-первых, нам нужно изменить extend класса с Activity на DroidGap. , Затем нам нужно заменить setContentView(R.layout.main); with super.loadUrl("file:///android_asset/www/index.html"); и затем добавьте import com.phonegap.*; после первых двух импортных. Ваш Java-файл после завершения должен выглядеть примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
package com.shaundunneTest;
import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;
public class TestActivity extends DroidGap {
/** Called when the activity is first created.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl(«file:///android_asset/www/index.html»);
}
}
|
Eclipse, вероятно, будет теперь выдавать некоторые ошибки, просто щелкните правой кнопкой мыши на папке libs и перейдите в Build Path => Configure Build Path а затем на вкладке библиотеки нажмите add JAR и продолжайте, включив файл phonegap.jar . Это должно устранить ошибки. Теперь нам нужно добавить некоторые разрешения в файл манифеста, чтобы обеспечить правильную работу PhoneGap.
Откройте файл AndroidManifest.xml и добавьте следующее перед записью application :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<supports-screens
android:largeScreens=»true»
android:normalScreens=»true»
android:smallScreens=»true»
android:resizeable=»true»
android:anyDensity=»true»
/>
<uses-permission android:name=»android.permission.CAMERA» />
<uses-permission android:name=»android.permission.VIBRATE» />
<uses-permission android:name=»android.permission.ACCESS_COARSE_LOCATION» />
<uses-permission android:name=»android.permission.ACCESS_FINE_LOCATION» />
<uses-permission android:name=»android.permission.ACCESS_LOCATION_EXTRA_COMMANDS» />
<uses-permission android:name=»android.permission.READ_PHONE_STATE» />
<uses-permission android:name=»android.permission.INTERNET» />
<uses-permission android:name=»android.permission.RECEIVE_SMS» />
<uses-permission android:name=»android.permission.RECORD_AUDIO» />
<uses-permission android:name=»android.permission.MODIFY_AUDIO_SETTINGS» />
<uses-permission android:name=»android.permission.READ_CONTACTS» />
<uses-permission android:name=»android.permission.WRITE_CONTACTS» />
<uses-permission android:name=»android.permission.WRITE_EXTERNAL_STORAGE» />
<uses-permission android:name=»android.permission.ACCESS_NETWORK_STATE» />
|
В тег активности добавьте следующий атрибут:
андроид: configChanges = "ориентация | keyboardHidden"
Это гарантирует, что приложение не перезагружает index.html каждый раз, когда происходят эти события.
Последнее, что нужно сделать, это скопировать папку xml из загрузки PhoneGap в каталог res проекта. Теперь вы готовы запустить это в эмуляторе.
Вы можете щелкнуть правой кнопкой мыши свой проект сейчас и run as приложение Android. Если вы еще не настроили устройство, вам будет предложено сделать это, если вам нужна помощь, ознакомьтесь с документацией здесь.
И это все, что вам нужно, чтобы начать работать на Android!
А как насчет всех других платформ?
Пока что мы рассмотрели только две мобильные платформы для нашего приложения, но вполне вероятно, что мы захотим распространить их на все платформы, которые поддерживает PhoneGap, верно? Что ж, вместо того, чтобы устанавливать еще несколько SDK, другую IDE с несколькими дополнительными модулями и настраивать виртуальную машину для тестирования, в этой серии будет использоваться служба PhoneGap: Build, когда придет время распространять приложение.
PhoneGap: Build, как утверждается на веб-сайте, представляет собой облачный сервис, который принимает сжатое HTML / CSS / JS-приложение и отправляет вам обратно приложение, скомпилированное и готовое к распространению (одно предупреждение: для Android, iOS и BB вам понадобятся необходимые сертификаты для распространения). PhoneGap: сборка находится в бета-версии на данный момент, и, хотя есть платные опции (которые стоит использовать, если вы собираетесь использовать его регулярно), есть бесплатная опция, которая позволит одно частное приложение. Это все, что нам нужно для нашего проекта на данный момент, так что идите вперед и зарегистрируйтесь сейчас, так как мы будем использовать сервис Build в конце серии.
Заключительные замечания
Теперь у нас есть готовая среда разработки для PhoneGap. В следующей части этой серии мы начнем рассматривать API, к которым PhoneGap позволяет нам обращаться, и способы их использования в нашем приложении.