- •Учебно-исследовательская работа
- •Оглавление
- •1.Введение Зачем нужны мобильные приложения и кто их делает
- •2.Основная часть
- •2.1 Описание проекта ненативного приложения для PhoneGap и Exlipse
- •2.2.1 Html5 и его отличия от ранних версий
- •2.2.2 Css3 и её отличия от более ранних версий
- •2.2.3 Краткий обзор языка js и библиотеки jQuery
- •2.2.4 Фреймворки и их отличия
- •2.2.5 Фреймворк jQueryMobile
- •2.3 Написание ненативного приложения
- •2.3.1 Определение минимального функционала
- •2.3.2 Первый прототип интерфейса
- •2.3.3 Отрисовка экранов и настройка интерактивности
- •2.3.4 Написание кода
- •2.3.4.1 Html5
- •2.3.5 Отладка приложения
- •2.3.6 Сборка приложения под мобильные устройства
- •2.4 Размещение приложения на специализированных сервисах
- •3.Заключение
- •4.Список литературы
2.3.5 Отладка приложения
Отладка приложения производится в браузере, т.к. до сборки приложение представляет из себя стандартное WEB-приложение. Для максимально точной отладки лучше просмотреть приложение во всех распространённых браузерах:
GoogleChrome
Mozilla
Opera
Safari
IE
Так же лучше просмотреть приложение в старых браузерах, оценить, насколько сильно искажается материал.
Если скорость отклика приложения вас не устраивает, то необходимо провести следующие операции по исключению из кода или минимизации:
Уменьшить количество псевдоселекторов в CSSкоде
Все обращения к элементам осуществлять только через id, использовать встроенные методы поиска .find, .childrenи др.
Использовать чистый javascript(безjQuery) там, где это возможно
Сократить количество стилей, применяемых фреймворком
Сократить количество картинок и других файлов, которые могут занимать довольно большой объём памяти
Оптимизировать события, если возможно, распространить одинаковые обработчики на максимальное количество элементов
Упростить HTML разметку
2.3.6 Сборка приложения под мобильные устройства
Сначала устанавливается nodejs.org, после ставиться самphonegap.
Команда: npm install -g phonegap.
Создаем приложение inAtom phonegap create MyApp.
Все html файлы кладутся в папку www, index.html стартовая страница.
Для сборки приложения есть два варианта:
Скачать AndroidSDKи при запускеphonegapbuildбудет использоваться локальная окружение. Главный плюс установкиSDK— можно будет исползовать эмуляторAndroid, но у него есть и минус, он достаточно тормозной.
.Использовать сервис build.phonegap.com— основная задача которого как раз состоит в том что бы разработчику не нужно было настраивать окружение для сборки под разные платформы. То есть, не устанавливаяsdkAndroid,WindowsPhoneвы можете собратьapk,xapи т.д. Вопрос только останется на чем их тестировать. Минус у этого варианта появляется если у вас больше одного приложения. Так как бесплатно доступна сборка только одного приватного проекта
Что бы собрать приложение с помощью build.phonegap.comзапускаем
phonegap remote build android
Плагины.
Если вам требуется что то непосредственно от телефона, например доступ к камере или файловой системе, то об этом нужно сообщить с помощью специальной команды. Например у меня звук проигрывается с помощью htmlaudio, но в андроиде с ним существуют проблемы, поэтому пришлось использоватьMediaплагин, так же для получения локали пользователя для выбора языка интерфейса нужен плагинGlobalization.
Устанавливаем cordova
npm install -g cordova
И соответственно запускаем команды в папке приложения
cordova plugin add org.apache.cordova.media
cordova plugin add org.apache.cordova.globalization
Список установленных плагинов можно получить командой
cordova plugin list
[ 'org.apache.cordova.globalization',
'org.apache.cordova.media' ]
Добавляем в html ссылку на cordova.js
<script src="cordova.js"></script>
Теперь например можно получить локаль. Доступ к APIнужно производить после событияdeviceready.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.globalization.getLocaleName(
function (locale) {
alert(locale.value);
},
function (error) {
alert(error);
});
}
Иконки и заставки
В папках «www\res\icon\android\» «www\res\screen\android\» расположены соответственно иконки и заставки. По умолчанию там лежать картинки с логотипамиPhoneGap, поэтому неплохо бы заменить их на собственные. Так же общая дефолтная иконка лежить вwww\ и называетсяicon.png
Файл конфигурации
Файл config.xmlлежить в папкеwww, в нем нужно указатьidприложения, версию приложения, название, описание и автора.
<widget id="com.phonegap.helloworld" version="1.0.0">
<name>inAtom</name>
<description>
InAtom sample application that responds to the deviceready event.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
</widget>
Релиз версия
Что бы собрать версию apk которую можно будет опубликовать в Google Play, нужно создать файл keystore с помощью утилиты keytool.exe из JDK и загрузить на build.phonegap.com. Запускаем rebuild и получаем TestApp-release.apk