Создание мобильного приложения на основе местоположения с использованием HTML5 и Javascript: часть 1

Вам не нужны отдельные технологии для конкретных платформ для разработки мощных и полезных приложений. Вы будете удивлены тем, что вы можете построить с помощью HTML5 и популярных библиотек JavaScript. Эта статья является первой из серии, в которой я буду разрабатывать мобильное приложение исключительно на основе HTML5 и JavaScript. Приложение будет называться «Где я припарковал свой автомобиль», и мы создадим его с помощью jQuery Mobile и Cordova (также известной как PhoneGap ). В этой первой статье я расскажу о функциях приложения и о том, какие языки и платформы вам необходимо знать, чтобы следовать руководству. Для создания этого приложения я также буду использовать новый HTML5 API, в частности локальное хранилище и геолокацию (фактически не являющуюся частью спецификации HTML5), а также API Карт Google.

Гибридное приложение создается с использованием веб-технологий, а затем помещается в оболочку для конкретной платформы, которая позволяет устанавливать его точно так же, как и нативное приложение. Если вам нужен обзор различий между нативными, гибридными и веб-приложениями, я посоветую вам прочитать нативные, гибридные или веб-приложения? ,

Раскрытие особенностей

Цель «Где я припарковал свой автомобиль» — дать вам возможность отметить, где вы припарковали свой автомобиль на карте, с помощью функции GPS вашего смартфона, а затем — после того, как вы закончили свою прогулку — найти маршрут, чтобы вернуться к нему. Это приложение полезно, если у вас плохая память или вы находитесь в чужом городе. Кроме того, «Где я припарковал свой автомобиль» также сохранит журнал ваших сохраненных позиций (до 50), чтобы вы могли найти местоположение для будущего использования. Поскольку прокрутка списка из 50 элементов может быть действительно раздражающей, приложение будет иметь поисковый фильтр, чтобы вы могли легко выполнить задачу. Список позволяет увидеть положение на карте, а также удалить одно или несколько старых мест. Наконец, я также создам небольшую страницу кредитов в приложении.

Ингредиенты

Чтобы полностью понять, что будет развиваться, вы должны иметь хотя бы базовые знания следующих языков и структур:

• HTML : он будет использоваться для создания разметки страниц. Где уместно, я буду использовать несколько новых тегов HTML5.
• CSS : так как большинство улучшений CSS будет сделано jQuery Mobile, в действительности это не требуется. Однако я буду использовать несколько правил для исправления или корректировки некоторых стилей, как вы увидите позже.
• JavaScript : бизнес-логика полностью написана на JavaScript, поэтому, если вы не знаете некоторых ключевых понятий, таких как обратный вызов или замыкание, вам необходимо изучить его, прежде чем продолжить.
• jQuery : я буду использовать jQuery в основном для выбора элементов и прикрепления обработчиков событий, поэтому здесь нет ничего особенного.
• jQuery Mobile : он будет использоваться для автоматического улучшения интерфейса приложения. Я буду использовать виджет загрузки страницы, представление списка для журнала позиций и помещу несколько кнопок в верхний и нижний колонтитулы страниц для создания панели инструментов.
• Cordova (PhoneGap) : Как уже было сказано, Cordova будет использоваться для упаковки файлов, чтобы вы могли скомпилировать их, как если бы вы создали собственное приложение. Конечно, я воспользуюсь некоторыми API-интерфейсами, предлагаемыми платформой, такими как уведомления, геолокация и подключение.

Используемая версия jQuery Mobile будет 1.2.0, поэтому, если вам нужно обновить информацию о том, что нового в этой версии, вы можете прочитать Что нового в jQuery Mobile 1.2.0? и создавать списки и всплывающие окна в считанные минуты, используя jQuery Mobile . Используемая версия Cordova будет 2.0.0. Я выбираю это, а не более новые версии, потому что в моих тестах он показал лучшую производительность в сочетании с jQuery Mobile.

Помимо приведенного выше списка, я буду использовать также следующие API:

• API геолокации : предоставляет информацию о местоположении устройства в виде широты и долготы. Поскольку многие операционные системы уже поддерживают его, Cordova будет использовать собственный интерфейс, а не собственную реализацию. Однако для платформ, у которых нет этого API, Cordova использует его реализацию, соответствующую спецификации W3C. Если вам нужно введение в этот API, вы можете прочитать Использование API геолокации HTML5 .
• API Карт Google : API Карт Google позволяет интегрировать службу Карт Google с вашим веб-сайтом. Сервис полностью бесплатный, но вы должны подписаться на веб-сайт консоли API, чтобы получить собственный ключ API, и использовать его при отправке запроса в сервис. Поскольку этот API все еще будет работать без ключа, я буду использовать его без уникального ключа API.
• API веб-хранилища : предоставляет доступ к параметрам хранилища устройств. Если вам нужна отправная точка, вы можете взглянуть на Обзор API веб-хранилища .

Помните, что Cordova использует разные файлы JavaScript для каждой операционной системы, поэтому, если вы хотите скомпилировать приложение самостоятельно, вам нужно использовать определенный пакет IDE-SDK, такой как Eclipse и Android SDK, Visual Studio и Windows Phone. SDK и т. Д. Для каждой платформы. Это может быть настоящей болью, поэтому «Где я припарковал свой автомобиль» будет разрабатываться с предположением, что компиляция будет выполняться с использованием облачного сервиса Adobe , называемого Adobe PhoneGap Build . Это будет сам сервис, который включает правильную библиотеку Cordova для каждой платформы во время компиляции. Таким образом, чтобы следовать этому руководству, вы можете использовать простой текстовый редактор или IDE, которые вы предпочитаете использовать, например NetBeans, без установки какого-либо другого SDK. Я опубликую окончательный код в моем репозитории bitbucket , где я удалю библиотеку, как указано в документе Adobe PhoneGap Build .

Структура проекта

Структура проекта будет довольно простой. Фактически, я создам HTML-файлы, файл конфигурации Adobe PhoneGap Build , стандартный экран-заставку и значок приложения в корневом каталоге проекта. Затем я разделю другие файлы на три категории (фактически папки): CSS, изображения и JS. Для разработки «Где я припарковал свой автомобиль» в дополнение к файлам jQuery, jQuery Mobile и Cordova я создам следующие документы:

• index.html : это точка входа, которая будет включать все файлы библиотек, используемые в приложении. Он также будет иметь кнопки для установки и получения текущей позиции и просмотра журнала позиций.
• map.html : здесь вы увидите карту, которая покажет вам ваше местоположение, положение вашего автомобиля и маршрут к нему.
• Position.html : эта страница будет отображать журнал позиций в виде списка.
• aurelio.html : это страница кредитов. Здесь нет ничего интересного.
• style.css : Как я уже говорил, я напишу несколько изменений стиля, которые отличаются от стандартного стиля jQuery Mobile.
• jquery.mobile.config.js : он будет содержать конфигурацию для jQuery Mobile
• functions.js : этот файл будет содержать функцию для инициализации приложения и некоторые другие служебные функции.
• maps.js : этот файл будет иметь функции, которые используют API Карт Google для рисования карты и маршрута к автомобилю.
• position.js : этот файл сохранит и загрузит предыдущие позиции с помощью Local Storage API.
• config.xml : этот XML-файл будет содержать метаданные приложений и будет использоваться облачной службой Adobe для хранения настроек, таких как номер версии приложения и содержимое пакета.

На этом этапе вы можете утверждать, что, поскольку мы создаем небольшое приложение, я мог бы использовать один файл, в котором объединены все страницы. Вы абсолютно правы, но я предпочитаю разделять вещи для организации.

Настройка проекта

Прежде всего, создайте папку проекта, например «where-i-parked-my-car», и создайте три папки, упомянутые выше: CSS, изображения и JS. Теперь вам нужно загрузить файлы jQuery, jQuery Mobile и Codova. Поместите все файлы JavaScript этих платформ в папку «JS», поместите связанные изображения jQuery Mobile в папку «images» и, наконец, поместите файл jQuery Mobile CSS в папку «CSS». Если вы все сделали правильно, проект должен иметь следующую структуру:

  --- CSS
 |  --- jquery.mobile-1.2.0.min.css
 |  --- style.css
 ---картинки
 |  --- Ajax-loader.gif
 |  --- иконки-18-black.png
 |  --- иконки-18-white.png
 |  --- иконки-36-black.png
 |  --- иконки-36-white.png
 --- JS
 |  --- Cordova-2.0.0.js
 |  --- JQuery-1.8.3.min.js
 |  --- jquery.mobile-1.2.0.min.js 

Как было сказано ранее, ссылка на API Карт Google обязательна. Включение файла, который вам нужен, очень прост и состоит из простого добавления следующей строки в ваш HTML.

  <script src = "http://maps.google.com/maps/api/js?sensor=true"> </ script> 

Обратите внимание, что эта строка содержит параметр sensor Он должен быть включен в URL и иметь значение truefalse Поскольку мы используем API Карт для создания мобильного приложения, мы установим для него значение true

Вывод

В этой первой и вводной статье я показал особенности «Где я припарковал свой автомобиль» и рассказал о технологиях, которые будут использоваться для его реализации. Я структурировал файлы, составляющие приложение, чтобы мы могли двигаться прямо к разработке. Наконец, я объяснил, как настроить проект. В следующей статье я углублюсь в код и покажу, как создавать HTML-страницы.