Статьи

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

В предыдущей статье этой серии я описал последнюю оставшуюся функцию утилиты, а также те, которые настраивали наше приложение. В этой заключительной части серии вы узнаете, как создать файл конфигурации, используемый для определения свойств проекта в Adobe PhoneGap Build . Я также поделюсь некоторыми мыслями о дополнительных функциях, которые могли бы улучшить «Где я припарковал свой автомобиль», а также о любом другом приложении на основе платформы Cordova (PhoneGap).

Конфигурация сборки

Каждый разработанный проект имеет несколько полей метаданных, которые может установить автор: версия, имя, автор, описание и т. Д. Если вы используете сервис Adobe PhoneGap Build , у вас есть две возможности указать эти свойства: с помощью веб-интерфейса службы или с помощью файла конфигурации с именем config.xml В этом разделе я покажу вам метод, который мне больше всего нравится — файл конфигурации. Детальное объяснение формата выходит за рамки данной серии, однако я дам вам обзор, чтобы вы могли понять источник файла. Если вам нужна дополнительная информация, взгляните на официальную страницу документации .

config.xmlспецификации виджета W3C и должен оставаться в корне приложения на том же уровне файла index.html Поскольку мы говорим о файле XML, первая строка config.xml Корнем всего документа является <widget> Наиболее важными из них являются idversion Внутри <widget>

  • имя (обязательно): укажите название приложения. Это не должно быть уникальным.
  • описание (обязательно): укажите описание вашей работы. Это будет показано в списке приложений на рынке.
  • автор (необязательно): автор приложения. Он может иметь два необязательных свойства: hrefemail К сожалению, вы можете указать только одного автора, поэтому у вас не может быть подробностей для нескольких авторов здесь.
  • значок (необязательно): значок, отображаемый на устройствах, на которых будет установлено приложение. Если вы не укажете его, будет использован логотип Cordova. Единственный обязательный атрибут — это src
  • функция (необязательно): укажите функции, которые вы хотите использовать. Например, Android перед установкой какого-либо приложения показывает пользователю необходимые разрешения, и если пользователь соглашается, он продолжается. В нашем приложении мы будем запрашивать разрешение на доступ к интернет-соединению и функциям геолокации.
  • предпочтение (необязательно): указывает набор предпочтений, которые вы хотите применить. Это закрытый тег, и вы можете иметь ноль или более тегов <preference> Он имеет два атрибута, оба являются обязательными: namevalue Есть много предпочтений, которые вы можете определить, но наиболее важным, на мой взгляд, является использование Cordova.

Помимо проиллюстрированных элементов, есть еще один последний тег, который я хочу объяснить: <gap:splash> Этот тег устанавливает заставку вашего приложения — изображение, которое будет отображаться во время загрузки. Это закрытый тег, и вы можете иметь один или несколько из этих элементов. Хотя единственным обязательным атрибутом является srcwidthheight Используя этот тег, вы можете указать разные изображения для каждой платформы и размера экрана, чтобы он отлично отображал заставку в разных ситуациях. Чтобы узнать больше об этом и других элементах, обратитесь к официальной странице документации .

Теперь, когда вы ознакомились с ключевыми моментами этого формата, вы можете понять источник файла конфигурации «Где я припарковал свою машину».

 <?xml version="1.0" encoding="UTF-8"?>
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.audero.free.utility.whereiparkedmycar"
        version   = "1.0.0">

   <name>Where I parked my car</name>

   <description>"Where I parked my car" is an application for mobile devices that lets you bookmark where you parked your car, and then find a route to return to it. This application is useful if you don't have a good memory or if you're in a foreign city. In addition, "Where I parked my car" will also save a log of your saved positions (up to 50), so that you can retrieve a location for future use. The list allows you to see the position on a map, and you can also to delete one or more old locations.</description>

   <author href="http://www.audero.it" email="[email protected]">Aurelio De Rosa</author>

   <icon src="icon.png" gap:role="default" />

   <feature name="http://api.phonegap.com/1.0/network"/>
   <feature name="http://api.phonegap.com/1.0/geolocation"/>

   <preference name="phonegap-version" value="2.0.0" />
   <preference name="target-device" value="universal" />

   <!-- Splash Screens -->
   <gap:splash src="splash.png" />
   <gap:splash src="images/splash-160x220.png" gap:platform="android" gap:density="ldpi" />
   <gap:splash src="images/splash-220x330.png" gap:platform="android" gap:density="mdpi" />
   <gap:splash src="images/splash-450x650.png" gap:platform="android" gap:density="hdpi" />
</widget>

Возможные улучшения

Если вы читаете этот раздел, вы прочитали все функции и код «Где я припарковал свою машину». Однако, как и в любом проекте, всегда есть место для улучшений и новых возможностей. Некоторые из следующих предложений могут быть реализованы прямо сейчас, в то время как другие нуждаются во внимании команды разработчиков Cordova, которая должна будет реализовать некоторые новые API, прежде чем вы сможете продолжить. Обратите внимание, что некоторые запросы могут быть уже удовлетворены некоторыми сторонними плагинами, но многие из них работают только для нескольких мобильных платформ — не всех, поддерживаемых Cordova. Было бы здорово иметь их в ядре платформы Cordova вместо внешних плагинов. С учетом сказанного, давайте посмотрим на эти функции.

Первая функция, которую вы можете добавить и работать прямо сейчас, это интернационализация (i18n) приложения. Поскольку проект не очень сложный, он должен быть довольно простым. Для достижения этой цели вы можете использовать API глобализации, API , добавленный в ядро, начиная с версии 2.2.0, и некоторые специальные библиотеки jQuery, такие как jquery-i18n-properties и jQuery-i18n .

Второе дополнение может включать в себя поиск более близкой парковки на основе текущей позиции пользователя и его истории позиций. Вы можете определить, припарковался ли пользователь поблизости в прошлом, и порекомендовать ему перейти на предыдущую парковку. Вы также можете включить поиск ближайших парковок на определенном расстоянии, например, с помощью виджета-слайдера jQuery Mobile .

Еще одна легко добавляемая функция — позволить пользователю добавлять заметки и даже почасовую ставку для каждой парковочной позиции.

Последнее предложение, которое я хочу предложить (и, возможно, самое крутое), — это способ автоматически добавить сигнал тревоги на устройство, если пользователь оставил свой автомобиль на платной парковке с учетом времени. Таким образом, благодаря сигналу, пользователь будет предупрежден, когда у него заканчивается время парковки. К сожалению, в настоящее время нет встроенного API Cordova для этого, но вы можете использовать плагин LocalNotification, доступный на Android и iOS.

Приведенные выше предложения являются лишь некоторыми из потенциальных усовершенствований приложения, но, конечно, используя свои собственные навыки и веб-технологии, вы могли бы сделать гораздо больше. Возможности практически безграничны.

Вывод

Вау, это была долгая поездка, но вы, наконец, завершили заявку. Как вы видели в этой серии статей, используя веб-технологии и популярные фреймворки, вы можете создавать полезные и мощные приложения. Теперь, для того, чтобы быть таким терпеливым и внимательным читателем, вот ваш приз: ссылка на хранилище приложений . Вы можете скачать полный и готовый к работе пакет « Где я припарковал свою машину » в моем хранилище. Обратите внимание, что «Где я припарковал свой автомобиль» выпускается под лицензией CC BY 3.0 («Creative Commons Attribution 3.0»).