Поиск по этому блогу

вторник, 3 июля 2012 г.

Пишем приложения с PhoneGap

С недавнего времени я начал писать приложение на платформе PhoneGap, эта платформа позволяет создавать кроссплатформенные приложения на js + html5. Так что писать можно не только под android, а так же еще под iOS, BlackBerry, Symbian OS, Windows Phone 7 и другие. Сегодня я хочу рассказать как начать с этим работать, а в дальнейшем я буду писать статьи про то как сделать тот или иной метод. Некоторые статьи будут чисто переводом с моими комментариями из PhoneGap API, но я думаю что то же будет полезно. И так начнем©(:



Для начала если у вас не установлен Eclipse стоит его скачать и установить, если же установлен то скачиваем плагин PhoneGap и приступаем к созданию проекта.

Настройка Eclipse и создание проекта


Запускаем Eclipse, жмем File > New > Android Project и в открывшемся окне настраиваем все как на рисунке:

В корневой директории проекта создаем две новые папки:

  • /libs
  • /assets/www
Из скачанного архива PhoneGap копируем phonegap.js в /assets/www, а phonegap.jar — в /libs. Копируем скачанную папку xml в /res. Далее нужно внести небольшие поправки в код нового проекта:

  • Меняем имя расширяемого класса с Activity на DroidGap
  • Заменяем строку setContentView() на super.loadUrl(«file:///android_asset/www/index.html»);
  • Добавляем import com.phonegap.*;
  • Убираем import android.app.Activity;
В этот момент может возникнуть ошибка, связанная с тем, что компилятор не может найти файл phonegap-1.0.0.jar. В этом случае кликаем правой кнопкой по директории /libs в левой панели и выбираем Build Paths > Configure Build Paths. Затем во вкладке Libraries добавляем phonegap-1.0.0.jar к проекту. Если ошибка не пропадет, нужно обновить (F5) проект.

Теперь нужно поправить файл AndroidManifest.xml, для этого кликаем правой кнопкой и выбираем Open With > Text Editor. После блока versionName вставляем:

<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" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />

Добавляем android:configChanges=»orientation|keyboardHidden» в тэг activity. И после него вставляем еще один тэг activity:

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter>
</activity>

Должно получиться как на картинке:

Теперь создаем и открываем файл index.html в директории /assets/www. Вставляем туда следующий код:

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Запуск в симуляторе

Правый клик по проекту Run As > Android Application. Eclipse предложить выбрать виртуальное устройство, если же таких нет, то нужно будет создать новое.

Запуск на реальном устройстве


Убедитесь, что в настройках телефона разрешена отладка по USB (Settings > Applications > Development). Правый клик по проекту Run As > Android Application, там выбираем свое устройство. Готово!

Это сложный вариант (: Есть намного проще, там достаточно скачать плагин для Eclipse и все что тут в описании нужно сделать руками делается одним кликом (:

Установка плагина PhoneGap на Eclipse


Для инсталяции плагина достаточно кликнуть в меню 
  • Help -> Install New Software
  • в окне вставляем ссылку на сам плагин: svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download
  • жмем OK и производим инсталяцию плагина.
  • Дальше Eclipse автоматически перегрузится и у вас будет установлен плагин в котором уже все что вы тут вручную прописывали есть, осталось кликнуть по иконке как на скриншоте ниже и проект готов.


Спасибо за внимание (: