Как сделать приложение с геолокацией
В основе каждого приложения, основанного на местоположении, лежит позиционирование и геолокация. В этом руководстве вы познакомитесь с возможностями геолокации HTML5 и основными принципами, необходимыми для их использования в вашем следующем приложении HTML5!
Вступление
- Геолокация браузера и как она работает
- Как работают асинхронные вызовы функций
- Как использовать API getCurrentPosition
- Что в данных геолокации
- Как использовать геолокацию на основе IP-адресов, когда браузеры не предоставляют встроенную поддержку
- Как отобразить карту, используя данные геолокации
- Как использовать API WatchPosition и clearWatch
Геолокация браузера и как она работает
Чтобы обнаружить местоположение клиентского устройства в прошлом, обычно необходимо проверить IP-адрес клиента и сделать разумное предположение относительно того, где это устройство было расположено. Тем не менее, как часть усилий HTML5, W3C разработал набор API-интерфейсов, чтобы эффективно позволить клиентскому устройству (то есть вашим iPhone 3G +, телефонам Android 2.0+ или даже обычным браузерам настольных компьютеров) получать информацию о географическом положении с помощью JavaScript , Когда мы смотрим на ландшафт веб-браузеров, нативная поддержка геолокации начинает проникать в основные приложения медленными и устойчивыми темпами. Одно существенное приложение, которое использует геолокацию, является Google Maps. На момент написания этой статьи поддержка геолокации полностью доступна только в нескольких браузерах (см. Ниже), но похоже, что большинство современных браузеров используют эту полезную функциональность:
- Firefox 3.5+: да
- Chrome 5 бета: Да
- iPhone Safari: Да
- Opera 10.5 dev build: Да
- Сафари: нет
- Internet Explorer: нет
Асинхронные функции
Поскольку ответ на функцию do_something () предоставляется нам асинхронно, мы должны назначить функцию, которая получит ответ и будет использовать его. Поэтому мы должны определить другую функцию handle_response_to_do_something (), которая отображает результат в диалоговом окне.
Теперь вы можете спросить, зачем нам это знать? Ну, потому что, когда наше приложение пытается запросить свое местоположение, пользователь устройства должен согласиться поделиться информацией о своем местоположении с нашим приложением. Если бы это действие не было асинхронным, то все в браузере зависало бы до тех пор, пока пользователь не ответит, и это явно не так, как хотелось бы.
API getCurrentPosition
Давайте поговорим об API геолокации. Первый API, с которым нам интересно работать, это API getCurrentPosition (). При вызове он должен немедленно вернуться, а затем асинхронно получить новый объект Position. В случае успеха этот метод должен вызвать связанный с ним аргумент successCallback с объектом Position в качестве аргумента. Если попытка не удалась и метод был вызван с ненулевым аргументом errorCallback, этот метод должен вызвать errorCallback с объектом PositionError в качестве аргумента.
Итак, давайте начнем с создания нашей страницы HTML5, которая удобнее и проще, чем настройка страницы XHTML 1.0. Все, с чего нам нужно начать, это:
Сейчас геолокацию используют повсюду. Почти каждое приложение на телефоне запрашивает доступ к местонахождению пользователя и его устройства. Эта информация помогает доставлять еду и продукты, заказывать такси или находить самый быстрый маршрут. Кроме того, благодаря GPS технологиям, в соцсетях можно добавлять геотеги в посты и истории.
Время чтения: 8 минут
Мы много работаем с геолокацией и помогаем стартапам создавать безопасные сервисы, которые используют местонахождение устройства. На основе нашего опыта, мы составили подробное руководство, которое объясняет основные моменты и этапы разработки приложений . Рассказываем , как разработать мобильное приложение с геолокацией , какие API можно использовать, как выглядит процесс и сколько он стоит. Поехали!
Что такое приложение с геолокацией?
Приложение с геолокацией — это мобильное или веб-приложение, которое отслеживает, где находится устройство. В этом ему помогают GPS, данные мобильного оператора и Wi-Fi. Такая функция помогает крупным компаниям и стартапам создавать более удобные сервисы, с которыми пользователям приятно и легко взаимодействовать.
Например, службы доставки еды, вроде Яндекс.Еды или Delivery Club — это приложения с геолокацией . Когда пользователи хотят заказать еду, сервис автоматически определяет, куда ее доставить. В таком случае не нужно вводить адрес вручную — это экономит время при заказе. Кроме того, благодаря геолокации можно отслеживать, где находится курьер и сколько времени осталось.
Чтобы разработать мобильное приложение с геолокацией, обычно используют сторонние API. Эта аббревиатура расшифровывается как application programming interface — программный интерфейс приложения. Самыми распространенными из них являются Google Maps API и Apple Maps API.
Немного статистики о приложениях с геолокацией
, что рынок вырастет на 27% к 2027 году.
Исследования сводятся к одному: спрос на приложения с геолокацией будет расти, и в ближайшие годы все больше стартапов будут интегрировать эти функции в свои решения. Чтобы не остаться в стороне и не отставать от конкурентов, мы рекомендуем интегрировать местонахождение пользователя в ваше приложение.
Зачем использовать геолокацию в приложениях?
Прежде чем решать , как разработать приложение с геолокацией , давайте разберемся, какую пользу эта функция принесет вашему решению. Вот несколько идей, как местонахождение помогает стартапам:
- Определить конкретную область, в которой пользователю удобнее добраться до локации. Например, найти ближайший супермаркет или банкомат, который открыт ночью.
- Ускорить время выполнения заказа. Вместо того, чтобы вручную вводить адрес, пользователи могут поставить точку на карте и сразу перейти к следующему шагу. Это экономит время и делает взаимодействие с интерфейсами более комфортным.
- Отслеживать физическую активность пользователя. Например, считать количество шагов и длину вечерней пробежки.
- Составлять маршрут. Приложения с геолокацией могут помочь пользователям перемещаться из одного места в другое. Самый известный пример — навигаторы и карты.
- Определить часовой пояс и страну, в которой находятся пользователь . Допустим, вы разработали сервис для сникерхэдов, который присылает уведомление, когда кроссовки поступают в продажу. Чтобы убедиться, что пользователи из разных стран получают информацию вовремя, с учетом их часового пояса, вам потребуется их местонахождение.
Каким стартапам нужны приложения с геолокацией
Местонахождение устройства — это маст-хэв для некоторых сервисов. Без геолокации приложением будет неудобным и пользователи могут уйти к конкурентам.
В статье мы собрали примеры приложений, которым нужна геолокация и рассказали, как их можно использовать в приложении:
С помощью геолокации пользователи могут искать ближайшие рестораны и видеть скорость доставки. Со стороны пользователя эта функция обычно выглядит как сторонняя карта, например от Google Maps, на которой можно ввести адрес.
Примеры: Яндекс.Еда, Delivery Club, UberEats
Все социальные сети — это приложения с геолокацией . Функция помогает пользователям отслеживать, что происходит поблизости, искать интересные события, настраивать таргетированную рекламу и ставить геотеги, чтобы привлекать подписчиков из определенного города.
Некоторые соцсети, например TikTok, используют геофункции, чтобы рекомендовать контент. В зависимости от страны пользователя и языка интерфейса приложение решает, кому показать ролик. Допустим, блогер публикует видео в Испании, но хочет, чтобы его увидели в Америке. В TikTok ему сначала придется пробраться через испанских пользователей и, если контент станет популярным, то его увидят в других странах.
Примеры: TikTok, Facebook, Instagram, Snapchat, Yelp, Foursquare.
Чтобы найти пару, нужно определить, в каком городе находится пользователь. Обычно приложения для знакомств сначала просят поделиться своим местоположением, а затем позволяют выбрать радиус, в котором должны находится их потенциальные партнеры.
Примеры: Tinder, Bumble, Hinge, Pure.
Tinder, как и другие приложения, первым делом запрашивает разрешение, чтобы отслеживать локацию
Как разработать мобильное приложение с геолокацией и превратить его в популярный маркетплейс? Легко! Большинство пользователей хотят знать, сколько займет доставка посылки. Чтобы рассчитать примерную дату, торговые платформы используют API-интерфейсы, отслеживающие местоположение покупателя и продавца.
Примеры: Amazon, eBay.
Такси используют локацию пользователя, чтобы подобрать водителя поблизости. А когда машина приедет, на карте можно будет посмотреть, где она припарковалась
Примеры: Uber, Lyft.
Главная цель такого типа приложений с геолокацией — определить, где находится пользователь и построить маршрут к новому месту. Вид транспорта не важен — карты помогают пешеходам, водителям, велосипедистам и пассажирам общественного транспорта.
Примеры: Google Maps, Apple Maps, MapsMe, Waze.
Карты Google также являются одним из популярных API для приложений с геолокацией
Сложности в разработке приложений с геолокацией
несколько вопросов, которые касаются этики и конфиденциальности. Как и в случае с любыми персональными данными, геолокацию можно использовать и для хороших, и для плохих целей. Чтобы защитить пользователей от утечки данных и слежки, нужно внимательно отнестись к безопасности приложения.
Как разработать приложение с геолокацией, которое будет безопасным? Нужно учесть несколько моментов при разработке:
- Решите, какие именно данные вам нужны от пользователей и как долго вы будете их хранить. Если геолокация устройства нужна вашему сервису только один раз, не сохраняйте ее на сервере дольше. Тоже самое с остальной информацией: номером телефона, именем или способами оплаты.
- Подумайте о том, чтобы добавить логин и пароль в приложение. Эта функция поможет свести к минимуму риск того, что кто-то другой использует их учетную запись. Кроме того, если вы имеете дело с платежной информацией и храните данные карты, добавьте двухфакторную аутентификацию для дополнительной защиты данных.
- Не забывайте про шифрование данных . В момент, когда данные передаются с устройства пользователя на сервер, они особенно уязвимы. Поэтому шифрование имен, телефонных номеров, местоположения и другой контактной информации обязательно для приложений, работающих с персональными данными.
- Проверяйте безопасность после запуска. Регулярно! После выпуска приложения с геолокацией , работа над защитой данных не заканчивается. Каждый год появляются новые вирусы и вредоносные программы, поэтому не забудьте обновлять свой протокол шифрования и время от времени тестировать систему. В этом поможет команда разработчиков, которая изначально работала над решением.
Как разработать мобильное приложение: 6 шагов
После того, как вы изучили подводные камни о том, как разработать мобильное приложение с геолокацией , возникает следующий вопрос: “С чего начать?” С безопасности данных или, может быть, с выбора API? Мы расскажем!
Вот 6 важных моментов, с которых начинается работа над решением:
- Идея. Начните с бизнес-идеи, которая у вас есть. Проведите анализ конкурентов и составьте список плюсов и минусов вашего будущего решения. Чем лучше вы знаете свою идею, тем проще вам будет объяснить ее команде разработчиков.
Секрет мастерства состоит в том, чтобы суметь изложить свою идею стартапа в нескольких предложениях. Такая практика поможет определить основные преимущества приложения с геолокацией и представить их инвесторам.
- Надежный разработчик . Когда работа касается конфиденциальности данных, нужно работать с опытными профессионалами, которые знают, как защитить информацию пользователей.
Когда вы выбираете команду для разработки мобильного приложения, проверьте отзывы от предыдущих клиентов, посмотрите предыдущие кейсы компании и запланируйте короткую встречу, чтобы встретиться лично или онлайн. Сейчас у большинства команд есть собственные блоги , где они публикуют кейсы и делятся советами для стартаперов. Статьи тоже помогут составить впечатление о разработчиках и их ценностях 😉
- Основные функции . Чтобы определить , как разработать мобильное приложение с геолокацией и какие шаги предпринять, нужно выбрать маст-хэв функции для интерфейса. Нужна ли вам карта? Хотите ли вы отправлять уведомления, когда местоположение меняется? Собираетесь ли вы отслеживать локацию на протяжении нескольких минут или часов, как это делают фитнес-приложения или такси?
Эти вопросы лучше обсудить с разработчиком перед тем, как они приступят к работе над вашим приложением, и определиться с ключевыми функциями.
- MVP . Этот этап разработки приложения помогает протестировать идею, проверить, как обстоят дела на рынке, и получить обратную связь от целевой аудитории. MVP — это первая версия продукта. Важно отметить, что она не должна быть сырой или недоработанной — это признак плохого приложения, а не этапа MVP. Одна из главных характеристик MVP — минимализм. Он содержит только основные функции, которые помогают приложению с геолокацией работать. Ваша команда разработчиков поможет вам расставить приоритеты по этим элементам и составить краткий список того, что будет частью минимально жизнеспособного продукта.
- Обратная связь . Соберите отзывы на решение от настоящих пользователей и проанализируйте, что они говорят. На этом этапе разработки приложения важно быть открытым и воспринимать критику. Если долго работать над одной идеей, то глаз замыливается и легко пропустить важные детали и недочеты. Именно поэтому на этапе MVP пользователи помогут определить, что нужно изменить в приложении, а что оставить как есть.
- Финальная версия . После того, как вы учли отзывы пользователей и улучшили приложение, настало время для выпуска на рынок 🚀
Это еще не конец! Очень часто приложениям требуются техническая поддержка после запуска, чтобы периодически проверять новые требования от Apple и Google к программному обеспечению, обновлять решение и исправлять ошибки. Обсудите с разработчиком, который собирается разработать мобильное приложение , нужна ли вам такая услуга.
Стоимость и сроки
Несмотря на то, что любое решение требует много времени и усилий, мы знаем , как разработать мобильное приложение с геолокацией с ограниченным бюджетом. Конечно, невозможно привести в пример универсальную оценку приложения с использованием геолокации, так как разброс вариантов очень большой. Поэтому мы решили показать вам примерную оценку приложения того, как как разработать мобильное приложение с геолокацией, которое позволяет пользователю найти место, где можно купить кофе по дороге куда-либо.
Примечание: Оценка предоставлена нашей командой и может отличаться у других компаний. Ниже таблица, которая показывает сколько времени у нас уйдет на разработку мобильного приложения .
| Этап | Что мы делаем | Сколько рабочих часов занимает | Приблизительная стоимость |
| UI/UX дизайн | Планируем пользовательский путь, придумывает концепты и презентуем их заказчику | 111 часов | $4 995,00 |
| Разработка | Работаем над архитектурой и интерфейсом со стороны клиента и сервера | 823 часов | $37 035,00 |
| QA тестирование | Ищем и заранее устраняем любые потенциальные ошибки | 83 часов | $1 245,00 |
| Менеджмент проекта | Управляем разработкой мобильных приложений и решаем административные задачи | 14 часов | $1 800,00 |
В среднем приложение с локацией стоит $45 075,00 долларов и требует 1071 часов работы. Мы оказываем поддержку на всех этапах разработки приложений .
В оценке мы учли все моменты, которые могут потребоваться вашему решению: мы разрабатываем кроссплатформенные мобильные приложения с нуля, обеспечиваем шифрование и защиту данных, а также настраиваем соединение между сервером и пользователем. В работе мы уделяем внимание UI/UX дизайну, создавая надежный и простой в навигации интерфейс, который помогает пользователям взаимодействовать с решением.
Запомнить на будущее
В этой статье мы рассказываем , как разработать мобильное приложение с геолокацией , и что следует учесть. Сейчас у каждого на телефоне есть сразу несколько решений, которое отслеживают местоположение. Среди них — Яндекс, Uber, DoorDash, Instagram, TikTok, Amazon и многие другие. Геофункции помогают предоставлять клиентам персонализированные услуги только в зависимости от того, где они находятся.
Существует ряд стартапов, для которых функция геолокации — это необходимость. Мы собрали список из 6 типов компаний, которые, гарантировано выиграют от использования местонахождения:
- Приложения для доставки еды;
- Социальные сети;
- Приложения для знакомств;
- Маркетплейсы;
- Такси;
- Карты.
Разработка подобных решений — сложный и многоступенчатый процесс. Чтобы в деталях понять, как разработать мобильное приложение с геолокацией, мы собрали основные моменты нашей инструкции:
- Приложения с локацией используют специальные API, GPS и данные Wi-Fi, чтобы отслеживать местонахождение пользователя и предоставлять услуги, основываясь на этой информации.
- Рынок георешений — это быстро развивающаяся сфера, стоимость которой, по прогнозам, вырастет на 23 –– 27% к 2026 — 2027 годам.
- Чтобы выделиться среди конкурентов, геолокация просто необходима новым решениям.
- Разработка приложений , которые определяют местоположение пользователей, связана с вопросами безопасности и конфиденциальности. Чтобы защитить персональные данные и вашу репутацию, эта часть решения нуждается в особом внимании разработчиков.
- Несколько раз проверьте протокол шифрования, который вы используете, и добавьте дополнительную защиту для ваших серверов.
- Приложение с геолокацией будет стоить X долларов и займет X месяцев для разработки.
Purrweb уже несколько лет работает с разработкой приложений для с помощью фреймворка React Native. Наша команда будут рада помочь вам реализовать идею запуска, защитить данные и добавить функции геолокации там, где это необходимо.
Хотите узнать больше о том, как разработать мобильное приложение? Заполните форму сейчас и получите информацию от наших экспертов.
Как часто приложения у вас в телефоне хотят узнать ваше местоположение? У меня очень часто. Не только приложения с картами, но даже банковские клиенты и Instagram хотят знать, где я и куда направляюсь.
За всю нашу историю разработки проектов для мобильных устройств геолокационные приложения были и остаются самыми популярными. Расскажу немного о том, как устроены такие приложения.
Приложения Yandex Навигатор, Foursquare, Pokemon GO и им подобные ориентируются на знание позиции пользователя. Есть и другой тип приложений, в которых позиционирование представлено менее явно, например, камера в смартфоне. Она определяет позицию пользователя и добавляет соответствующую метку к фотографии для последующего определения места снимка или отображения его на карте.
Говоря более научным языком, мы можем разделить приложения по особенностям применения в них геолокационных сервисов (Location-based services, сокращенно LBS) на следующие типы:
Приложения, предоставляющие информацию о ближайших объектах и расстояние до них (точках интереса POI)
Это такие приложения, как 2GIS или Yillio - самая простая категория приложений, вызывающая меньше сложностей при разработке. Главное при работе с данным типом приложений - разработать алгоритм и рассчитать по формуле расстояние между двумя точками: текущим местоположением пользователя и координатами объекта из базы данных.
Приложения, отображающие местоположения других пользователей
Swarm или Patrolife, к примеру. Особенность данной категории в разработке алгоритмов обновления местоположения всех пользователей системы на сервере. Основная сложность связана с соблюдением баланса между актуальностью (частотой) передачи координат на сервер и энергопотреблением устройства. При высокой скорости обновления данных резко возрастает нагрузка на сервера системы и значительно уменьшается время работы смартфона от батареи. Одним из решений может быть использование различных алгоритмов фильтрации получаемых с GPS датчиков данных. В своих проектах мы применяем способы сглаживания с использованием фильтра Калмана. Он позволяет отбрасывать помехи и настраивать степень сглаживания, а мы снижаем ненужную нагрузку с наших серверов и увеличиваем время автономной работы.
Экскурсионные приложения и путеводители
Такие приложения, как Azbo или 1000 Гидов. Одна из их особенностей - это возможность работы с ними без подключений к Интернету. В большинстве случаев данные приложения используются в роуминге во время путешествия или в полном в отсутствии средств связи. В случае, если нам требуется работать Offline режиме, важно грамотно выбрать формат хранения карт в приложении. Выбор состоит между растровым (графическими файлами) и векторным типами карт. В большинстве случаев векторный формат предпочтительнее в силу его меньшего размера. Растровые карты предпочтительнее для небольшой территории (парка, музея) за счет возможности нарисовать на таких картах реалистичные объекты. Например, можно отображать на карте изображения объектов, какими они были в прошлые века.
Геолокация с дополненной реальностью
Это такие приложения, как известный Pokemon GO. Они являются одними из самых сложных для разработки. Помимо работы с GPS устройствами, необходимыми для получения информации о местоположении, здесь требуется распознавать графические объекты и обрабатывать информацию с гироскопа. Подобные приложения набирают популярность среди образовательных приложений. Так, пользователи перемещаются между экспонатами выставки или музея, наводят камеры смартфонов на интересующие объекты и видят подробности выделенного объекта. Чтобы подобное стало возможно, разработчикам нужно научить приложение распознать получаемое с камеры изображение. Для этого геолокация может использоваться как дополнительный механизм, повышающий точность процесса распознавания. Также для упрощения этого процесса может использоваться установка специальных маркеров по типу QR кодов.
Навигаторы
К данному типу приложений относятся Yandex Навигатор и Google Maps. Кроме отображения карт, они умеют строить маршруты. В отличие от упомянутых приложений, которые ведут пользователя по улицам города, также набирают популярность приложения для построения маршрутов в торговых центрах. Здесь пользователи прокладывают маршруты до интересующих их секций в торговом центре. Основная сложность в разработке данных систем заключается в определении местоположения пользователя в закрытом помещении торгового центра. Мы применяем систему "маяков", по которым приложение определяет, где в данным момент находится пользователь. Чем больше "маяков" вы используете в данном помещении, тем точнее определится местоположение пользователя.
Какое бы ни было геолокационное приложение, есть ряд моментов, требующих особого внимания:
Автономность работы приложения
Сложности проектирования интерфейса
Обеспечение качества
Несмотря на сложность разработки геолокационных приложений, они приносят большую пользу. Процесс создания геолокационных приложений требует более детальной проработки бизнес-логики и интерфейса, а также наличия проверенных алгоритмов решения.
NativeScript - это среда для создания кросс-платформенных родных мобильных приложений с использованием XML, CSS и JavaScript. В этой серии мы рассмотрим некоторые интересные вещи, которые вы можете сделать в приложении NativeScript: геолокация и интеграция с Google Maps, база данных SQLite, интеграция с Firebase и push-уведомления. По ходу дела мы построим фитнес-приложение с возможностями реального времени, которые будут использовать каждую из этих функций.
В этом уроке вы узнаете, как работать с геолокацией и Google Maps в приложениях NativeScript.
Я предполагаю, что вы уже знаете, как создавать приложения в NativeScript. Если вы новичок в NativeScript, я рекомендую сначала ознакомится с одним из более ранних руководств в NativeScript, прежде чем пытаться следовать этому руководству.
В этой статье я расскажу вам о NativeScript, платформе с открытым исходным кодом для создания мобильных приложений с использованием JavaScript.
Что вы будете создавать
Вы будете создавать трекер ходьбы с использованием геолокации и Google Maps. Оно покажет пользователю, какое расстояние он прошел, и количество шагов, которое понадобилось для покрытия этого расстояния. Будет также доступна карта, которая покажет текущее местоположение пользователя.
Чтобы дать вам представление, вот как будет выглядеть конечный результат:
Настройка проекта
Начните с создания нового приложения NativeScript:
Чтобы упростить настройку пользовательского интерфейса приложения, я создал репозиторий GitHub, который включает как стартовую, так и финальную версию проекта. Вы можете продолжить дальше и скопировать содержимое папки app в папку app вашего проекта. Мы будем работать только с двумя файлами: main-page.xml и main-page.js. Остальное - только шаблон из демонстрационного проекта NativeScript.
Запуск приложения
Мы будем использовать эмулятор Android от Android Studio для тестирования приложения. Это позволит нам использовать Android GPS Emulator для имитации смены местоположения. Мне не очень нравится бесцельно ходить вокруг, чтобы проверить геолокацию! Но если вас вдруг это устраивает, то я не стану вас останавливать.
Если вы выполните команду tns run android , она будет автоматически вызывать эмулятор Android, если он уже установлен. Если он еще не установлен, вы можете установить его, запустив Android Studio, щелкнув configure и выбрав SDK Manager. Это откроет платформу SDK по умолчанию. Перейдите на вкладку «Инструменты SDK» и убедитесь, что выбрали Android-эмулятор и нажмите «Применить», чтобы установить его.
Чтобы использовать эмулятор GPS, загрузите его из GitHub и запустите исполняемый файл war:
Работа с геолокацией
Геолокация в NativeScript похожа на API геолокации в JavaScript. Единственная разница в функциональности - это добавление функции distance() , которая используется для вычисления расстояния между двумя местоположениями.
Установка плагина геолокации
Чтобы работать с геолокацией, сначала необходимо установить плагин геолокации:
Как только это будет сделано, теперь вы можете включить его из своих файлов сценариев:
Получение текущего местоположения пользователя
Плагин геолокации NativeScript включает три функции, которые можно использовать для работы с текущим местоположением пользователя. Мы будем использовать каждый из них в этом приложении:
- getCurrentLocation
- watchLocation
- distance
Откройте файл main-view-model.js и добавьте следующий код внутри функции createViewModel() . Здесь мы инициализируем переменные, которые мы будем использовать позже, для хранения различных значений, необходимых для отслеживания местоположения пользователя.
Я добавил несколько комментариев в код, чтобы вы знали, что происходит. Есть также некоторые строки кода, которые закомментированы; Это для интеграции с Google Maps. Я уже закомментировал их для простоты. Как только мы перейдем к интеграции с Google Maps, вам нужно будет удалить эти комментарии.
Затем добавьте код для получения текущего местоположения пользователя. Этот код выполняется, когда пользователь нажимает кнопку для запуска и остановки отслеживания местоположения. Метод geolocation.getCurrentLocation() используется для получения текущего местоположения.
Здесь мы указали три варианта: wishAccuracy , updateDistance и timeout . WishAccuracy позволяет указать точность в метрах. Метод имеет два возможных значения: Accuracy.high , что составляет около 3 метров, и Accuracy.any , что составляет около 300 метров. updateDistance указывает, какая разница (в метрах) должна быть между предыдущим местоположением и текущим местоположением до его обновления. Наконец, timeout указывает, сколько миллисекунд следует ждать до изменения локации.
После получения местоположения мы устанавливаем его как start_location и добавляем его в массив locations . Позже это место будет использоваться вместе с первым местоположением, которое будет извлечено из просмотра текущего местоположения пользователя, чтобы определить пройденное расстояние.
Просмотр текущего местоположения пользователя
Чтобы получить текущее местоположение, мы используем функцию geolocation.watchLocation() . Эта функция аналогична функции setInterval() в JavaScript, поскольку она также повторно выполняет функцию обратного вызова, пока вы не остановите ее с помощью функции geolocation.clearWatch( ). Функция обратного вызова автоматически вызывается исходя из updateDistance и minimumUpdateTime .
В приведенном ниже коде местоположение будет обновляться, если оно не менее чем на 5 метров отличается от предыдущего местоположения, которое было выбрано. Но это обновление произойдет каждые 5 секунд. Это означает, что если пользователь не прошел 5 метров и более в течение 5 секунд, местоположение не будет обновляться.
Как только пользователь указывает, что они хотят остановить отслеживание, вам нужно вызвать функцию geolocation.clearWatch() . Вам также необходимо сбросить остальные значения, которые обновляются каждый раз при изменении местоположения.
Получение расстояния между двумя локациями
Теперь мы готовы пройти дистанцию. Это можно сделать, вызвав функцию geolocation.distance() . Эта функция принимает два объекта location в качестве своих аргументов, поэтому мы будем использовать последние два местоположения, которые были перенесены в массив locations , чтобы определить расстояние (в метрах), пройденное пользователем от ранее записанного местоположения до текущего. Оттуда мы можем использовать приблизительное преобразование от счетчиков к числу шагов - я говорю приблизительное, потому что не все люди будут перемещаться на одинаковое расстояние за один шаг.
После этого мы можем просто добавить результирующее distance и steps к total_distance и total_steps , чтобы мы могли отслеживать общее расстояние и шаги, которые они прошли с тех пор, как начали отслеживать свое местоположение.
На этом этапе вы можете начать тестирование приложения с помощью эмулятора GPS, о котором я упоминал ранее. Обратите внимание, что вам нужно нажать save в файле main-view-model.js, чтобы вызвать перезагрузку приложения.
Затем выберите место в эмуляторе GPS, чтобы приложение сразу же загрузило новое место. Если вы этого не сделаете, приложение по умолчанию будет находиться в Googleplex в Маунтин-Вью, Калифорния. Это означает, что в следующий раз, когда вы выберете место на эмуляторе, оно переместится из этого местоположения в выбранное вами место. Если это далеко, вы получите действительно большую дистанцию и большое количество шагов.
В качестве альтернативы вы можете протестировать на реальном устройстве с доступом в Интернет и GPS. На данный момент требуется только GPS, но как только мы добавим Карты Google, для приложения потребуется подключение к Интернету.
Работа с Google Maps
Теперь мы будем использовать Карты Google, чтобы добавить карту, отображающую текущее местоположение пользователя.
Установка плагина Google Maps
После установки вам нужно скопировать файлы ресурсов для Android:
Затем откройте файл app/App_Resources/Android/values/nativescript_google_maps_api.xml и добавьте свой собственный ключ API Google Карт (ключ сервера):
Перед тем, как попытаться использовать его, убедитесь, что вы включили Google Maps Android API в Google Console.
Добавление карт
Для карты откройте файл main-page.xml, и вы увидите следующее:
Здесь мы указали три опции ( longitude , latitude и zoom и функцию, выполняемую после того, как карта будет готова. longitude и latitude определяют местоположение, которое вы хотите отобразить на карте. zoom определяет масштаб изображения на карте. mapReady - это где мы указываем функцию для добавления маркера на карту. Этот маркер представляет текущее местоположение пользователя, поэтому оно будет отображаться в центре карты.
По умолчанию это не будет работать, поскольку вы еще не добавили определение схемы для карт. Поэтому в элементе Page добавьте определение для элемента maps :
Как только это будет сделано, экземпляр карты Google должен быть отображен прямо под кнопкой для отслеживания местоположения. У него пока нет карт, поскольку latitude и longitude еще не определены. Для этого вернитесь к файлу main-view-model.js и удалите комментарии со строк кода для работы с Google Maps:
Добавление маркера
Поскольку мы уже объявили координаты по умолчанию для маркера, мы можем на самом деле построить маркер после того, как карта будет готова:
Затем нам нужно обновить позицию маркера, как только пользователь начнет отслеживать свое местоположение. Вы можете сделать это в функции обратного вызова успеха для функции getCurrentLocation() :
Нам также нужно обновить его, когда местоположение пользователя изменится (внутри функции обратного вызова успеха для watchLocation ):
Как только это будет сделано, карта, которая отображает местоположение по умолчанию, должна отображаться в приложении.
Вывод
В этом учебном пособии вы создали приложение NativeScript, которое позволяет пользователю отслеживать, какое расстояние он прошел, и приблизительное количество шагов, которые были сделаны для покрытия этого расстояния. Вы также использовали Карты Google, чтобы пользователь мог просматривать свое текущее местоположение. Благодаря этому вы узнали, как использовать плагины геолокации и Google Maps для NativeScript.
Это только начало! В следующих статьях этой серии мы добавим свою локальную базу данных, push-уведомления и другие интересные возможности.
Тем временем ознакомьтесь с некоторыми другими нашими статьями о NativeScript и кросс-платформенной мобильной разработке.
Для полного ознакомления с NativeScript, ознакомьтесь с нашим видео курсом по мобильной разработке с помощью NativeScript. В этом курсе Keyvan Kasaei покажет вам шаг за шагом, как создать простое приложение. В этом курсе вы узнаете, как реализовать простой рабочий процесс приложения с сетевыми запросами, архитектурой MVVM и некоторыми из наиболее важных компонентов пользовательского интерфейса NativeScript. К концу курса вы поймете, почему вы должны рассмотреть NativeScript для своего следующего проекта мобильных приложений.
Читайте также: