Как сделать приложение для геолокации?

pусский

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

В этой статье мы расскажем вам все, что нужно знать о геолокационных приложениях. Мы расскажем об их ключевых особенностях, типах геолокационных приложений и объясним процесс создания геоприложения с точки зрения бизнеса. Кроме того, мы проведем вас через процесс разработки геолокационного приложения с помощью Back4app и React Native.

Contents

1 Что такое геолокационное приложение?
2 Ключевые особенности приложений, основанных на местоположении
3 Типы приложений, основанных на определении местоположения
4 Процесс создания геолокационного приложения
5 Как разработать геолокационное приложение?
6 Заключение

Что такое геолокационное приложение?

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

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

Глобальная система позиционирования (GPS)
Вспомогательная система глобального позиционирования (A-GPS)
Технологии геолокации внутри помещений
Вышки сотовой связи или WiFi

Каждая из перечисленных технологий имеет свои преимущества и недостатки. Одни быстрее, другие точнее и надежнее. Но не стоит слишком беспокоиться об этом. Местоположение обычно определяется самим устройством.

Ключевые особенности приложений, основанных на местоположении

Геолокационные приложения сильно различаются по возможностям, но большинство из них включают в себя эти функции геолокации:

Вид карты: Вид карты – основная функция геолокационных приложений. Она предоставляет пользователям визуальное представление их текущего местоположения и точек интереса. С ее помощью пользователи могут изучать местности, находить направления и выполнять геопространственные запросы.
Отслеживание местоположения: Геолокационные приложения часто предлагают отслеживание местоположения в режиме реального времени, позволяя пользователям делиться своим местоположением с другими людьми или отслеживать свои перемещения.
Персонализация: Геолокационные приложения могут предлагать функции персонализации, такие как сохранение избранных мест, установка предпочтений для типов маршрутов (например, пешком, на автомобиле), визуальные настройки и т. д.
Уведомления: Некоторые геолокационные приложения используют геозону для отправки уведомлений, когда пользователь входит или выходит из зоны. Кроме того, они могут отправлять уведомления, когда пользователь находится рядом с каким-либо событием и т. д.
Интеграция с другими сервисами: Многие геолокационные приложения интегрируются со сторонними сервисами или платформами для расширения функциональности. Например, Google интегрируется с Booking.com, чтобы предоставлять варианты отелей, а платформы для транзита – чтобы получать информацию об общественном транспорте.

Типы приложений, основанных на определении местоположения

Существует множество типов приложений, основанных на местоположении, но давайте рассмотрим некоторые из них.

Навигационные приложения

Навигационные приложения – самый очевидный пример геолокационных приложений. Они обычно сосредоточены вокруг вида карты и предоставляют такие функции, как отслеживание местоположения, поиск ближайших предприятий, выполнение геозапросов и предоставление направлений движения.

Примеры: Google Maps, Waze, Sygic GPS.

Приложения по требованию

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

Примеры: Uber, Uber Eats, Lyft.

Социальные сети и приложения для знакомств

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

Примеры: Facebook, Instagram, Tinder.

Туристические приложения

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

Примеры: Airbnb, Booking, Eventbrite.

Фитнес-приложения

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

Примеры: Strava, GoogleFit, RunKeeper.

Процесс создания геолокационного приложения

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

Шаг 1: Определите цель геолокационного приложения

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

Как только вы это узнали, пришло время изучить рынок. Найдите конкурентов и подумайте, чем ваше приложение лучше всех существующих.

Шаг 2: Выберите технологии

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

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

Кроме того, вам понадобится геолокационный API. При выборе геолокационного API рассмотрите такие варианты, как Google Maps, OpenStreetMap и MapBox. Обязательно выберите API геолокации, наиболее подходящий для вашего типа приложения.

Шаг 3: Разработка приложения

Этот шаг – самый важный с точки зрения пользователя. При разработке приложения убедитесь, что оно привлекательно, просто в использовании и обладает достаточным количеством функций. Следуйте хорошим практикам UI/UX и учитывайте, как конечный пользователь будет использовать ваше приложение для определения местоположения.

Шаг 4: Создание MVP

Прежде чем создавать полноценное приложение, стоит создать минимальный жизнеспособный продукт (MVP). MVP должен содержать достаточно функций, чтобы его могли использовать первые пользователи, которые затем предоставят свои отзывы. Обратная связь позволит вам подтвердить свою идею и улучшить продукт.

Шаг 5: Полная версия и выпуск

Последний шаг, который вам предстоит сделать, – это создание полной версии приложения. Проверьте бэклог вашего проекта и реализуйте все остальные жизненно важные функции. Исправьте все ошибки и выпустите свое приложение, основанное на геолокации.

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

Как разработать геолокационное приложение?

В этом разделе статьи мы рассмотрим, как создать приложение для геолокации с помощью Back4app и React Native с Expo.

Пререквизиты

Опыт работы с JavaScript, особенно с ES6.
Базовое понимание React Native (и Expo).
JavaScript IDE, установленная на вашем локальном компьютере.
Эмулятор Android или физическое устройство Android.

Что такое Back4app?

Back4app – это отличный инструмент для быстрого создания современных приложений, не требующий развитых навыков кодирования. Платформа оснащена множеством полезных функций, таких как управление пользователями, аутентификация, базы данных в реальном времени, функции Cloud Code, социальные интеграции, API и многое другое.

С Back4app вы можете сосредоточиться на важных частях вашего приложения, таких как основная функциональность и дизайн, не заботясь о бэкенде или сложной инфраструктуре.

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

Обзор проекта

Чтобы продемонстрировать возможности Back4app, мы создадим простое приложение для геолокации. Приложение позволит пользователям просматривать карту, места, хранящиеся в базе данных, и выполнять геопространственные запросы. Геозапросы будут включать сортировку мест по расстоянию, поиск мест в пределах расстояния и так далее. Бэкэнд нашего приложения будет работать на базе Back4app, а на фронтэнде мы будем использовать React Native и Google Maps.

Создать приложение Back4app

Следующие шаги потребуют от вас наличия учетной записи Back4app. Если у вас его еще нет, зарегистрируйтесь бесплатно!

Когда вы войдете в систему, вы будете перенаправлены в список приложений. Чтобы создать новое приложение, нажмите “Создать новое приложение”.

Back4app позволяет нам развернуть два типа приложений:

Backend as a Service (BaaS) – полноценное решение для бэкенда, или
Containers as a Service (CaaS) – платформа для развертывания контейнерного программного обеспечения.

Поскольку мы создаем приложение для геолокации, мы будем использовать “Backend as a Service”.

Далее дайте своему приложению красивое название, выберите “NoSQL” в качестве базы данных и нажмите “Создать”.

Back4app потребуется немного времени, чтобы подготовить все необходимое для вашего приложения. Как только приложение будет готово, вы будете перенаправлены в представление базы данных вашего приложения.

Создание классов базы данных

Двигаясь дальше, нам нужно позаботиться о базе данных.

Как уже говорилось во введении к проекту, мы хотим хранить места в базе данных и отображать их на карте. Нам придется создать новый класс базы данных для хранения этих мест.

Создайте новый класс, нажав на кнопку “Создать класс”. Назовите его Place, включите “Public Read and Write” и нажмите “Create class & add columns”.

Затем добавьте следующие три столбца:

+-------------+-------------+--------------------+----------+
| Data type   | Name        | Default value      | Required |
+-------------+-------------+--------------------+----------+
| String      | name        | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+
| String      | description | <leave blank>      | no       |
+-------------+-------------+--------------------+----------+
| GeoPoint    | location    | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+

Создав класс, добавьте в базу данных несколько примеров мест. Пример:

Кроме того, вы можете импортировать этот экспорт базы данных штатов США. Чтобы импортировать его, воспользуйтесь кнопкой с тремя точками в правом верхнем углу экрана, выберите “Импорт > Данные класса”, а затем выберите файл.

Отлично, мы успешно создали класс базы данных и заполнили его. Теперь бэкэнд-часть нашего проекта завершена. Это было легко!

Код Frontend

В этом разделе мы позаботимся о фронтенде нашего геолокационного приложения.

Проект “Инит

Следующие шаги потребуют, чтобы у вас был установлен Node. Если у вас его нет, скачайте его.

Начните с создания проекта Expo:

$ npx create-expo-app@latest back4app-geolocation-app --template blank@sdk-49

Мы использовали шаблон blank@sdk-49, потому что хотим использовать самую новую версию Expo SDK.

Экспозиция займет примерно минуту, чтобы подготовить все необходимое для вашего проекта. Когда проект будет готов, переместите в него текущую директорию. Затем запустите сервер разработки Expo:

$ cd back4app-geolocation-app
$ expo start

Нажмите A на клавиатуре, чтобы открыть приложение в эмуляторе или на подключенном Android-устройстве.

React Native Maps

Для отображения карты мы будем использовать react-native-maps. React Native Maps – это отличный пакет, который предоставляет компоненты карт для iOS и Android. Он поддерживает Google Maps и MapKit.

Начните с установки его через npm:

$ npx expo install react-native-maps

Затем замените содержимое App.js, чтобы включить в него примерно так:

// App.js

import React from "react";
import {StyleSheet, View} from "react-native";
import MapView from "react-native-maps";

const initialRegion = {
  latitude: 30.0000,
  longitude: -100.0000,
  latitudeDelta: 64,
  longitudeDelta: 64,
};

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    zIndex: 10,
    width: "100%",
    height: "100%",
  },
});

Если вы откроете приложение сейчас, то сможете увидеть карту.

Получение местоположения пользователя

Для получения данных о местоположении пользователей мы воспользуемся пакетом expo-location.

Начните с установки его через npm:

$ npx expo install expo-location

Прежде чем получить доступ к местоположению пользователя, мы должны запросить его разрешение. Для этого мы можем использовать встроенную функцию Expo под названием requestForegroundPermissionsAsync() в useEffect() следующим образом:

// App.js

import React, {useEffect, useState} from "react";
import {StyleSheet, View} from "react-native";
import MapView, {Marker} from "react-native-maps";
import * as Location from "expo-location";

// ...

export default function App() {

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let {status} = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.error("Permission to access location was denied.");
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        {location && (
          <Marker
            title="You are here"
            description={`
              ${location.coords.latitude.toFixed(4)},
              ${location.coords.longitude.toFixed(4)}
            `}
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            pinColor="blue"
          />
        )}
      </MapView>
    </View>
  );
}

// ...

Когда приложение запускается, мы запрашиваем у пользователя разрешение на доступ к его грубому местоположению. Если доступ разрешен, мы сохраняем местоположение в состоянии местоположения с помощью функции useState().
Мы обновили оператор возврата, чтобы отображать местоположение пользователя (если location не является null).

Запустите приложение заново, и вы увидите синий маркер, обозначающий ваше текущее местоположение.

Установить разбор

Как вы, наверное, знаете, Back4app основан на платформе Parse. Если мы хотим взаимодействовать с базой данных Back4app или Back4app в целом, мы должны установить Parse SDK.

Сначала установите Parse SDK:

$ npx expo install [email protected] @react-native-async-storage/async-storage

Я использовал Parse версии 3.5.1, потому что более новая версия не очень хорошо работает с Expo SDK 49.

Затем создайте экземпляр Parse в App.js прямо под импортом:

// App.js

// ...

import Parse from "parse/react-native.js";
import AsyncStorage from "@react-native-async-storage/async-storage";

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(
  process.env.EXPO_PUBLIC_PARSE_APPLICATION_ID,
  process.env.EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY,
);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

Мы будем использовать переменные окружения вместо жесткого кодирования идентификатора приложения Parse и ключа JavaScript. Начиная с SDK 49, Expo автоматически загружает переменные окружения из файла .env.local.

Создайте в корне проекта файл .env.local со следующим содержимым:

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

Обязательно замените и на ваши настоящие идентификатор и ключ. Чтобы получить свои учетные данные, перейдите в приложение Back4app и выберите “Настройки приложения > Безопасность и ключи” на боковой панели.

Получение мест из базы данных

Для получения мест из базы данных мы будем использовать экземпляр Parse, который мы создали в предыдущем шаге.

Сначала нам нужно создать новый Parse.Query в классе Place, а затем выполнить find() для выполнения запроса. После этого мы преобразуем результаты в наш формат маркера.

Измените файл App.js следующим образом:

// App.js

// ...

export default function App() {

  // ...

  const [places, setPlaces] = useState([]);

  useEffect(() => {
    // ...

    // fetch `Place` objects from the database
    const placesQuery = new Parse.Query("Place");
    placesQuery.find().then((places) => {
      places = places.map((place) => {
        return {
          title: place.get("name"),
          description: place.get("description"),
          coordinate: {
            latitude: place.get("location").latitude,
            longitude: place.get("location").longitude,
          },
        };
      });
      setPlaces(places);
    });
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        // ...
        {places.map((place, index) => (
          <Marker
            key={index}
            title={place.title}
            description={place.description}
            coordinate={place.coordinate}
          />
        ))}
      </MapView>
    </View>
  );
}

// ...

Мы использовали функцию useState(), чтобы создать еще одно состояние, в котором хранятся маркеры для мест.
Мы обновили хук useEffect(), чтобы получать места из базы данных при запуске приложения.
Мы изменили функцию рендеринга для отображения маркеров Place на карте.

Откройте приложение еще раз, и вы сможете увидеть все места.

Геозапросы

В этом последнем разделе мы рассмотрим, как выполнять геопространственные запросы с помощью Back4app.

В состав Parse входит класс GeoPoint. Класс GeoPoint представляет точку широты/долготы и позволяет вычислять расстояния между двумя точками GeoPoint, а также выполнять запросы на основе близости.

Мы будем использовать этот класс для реализации следующих двух функций:

Сортировка мест от местоположения пользователя по расстоянию.
Найдите места в радиусе X километров от местоположения пользователя.

Добавьте следующее в файл App.js:

// App.js

// ...

const maxDistance = 3000;

export default function App() {

  // ...

  const sortPlacesByProximity = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.near("location", locationGeoPoint);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  };

  const findPlacesWithinDistance = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.withinKilometers("location", locationGeoPoint, maxDistance);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  }

  const moveUserToRandomLocation = () => {
    setLocation({
      coords: {
        latitude: Math.random() * (-78.848974 - -103.520833) + 31.3845,
        longitude: Math.random() * (-78.848974 - -123.885444) + -123.885444,
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button
          title="Sort places by proximity"
          color="#239658"
          onPress={sortPlacesByProximity}
        />
        <Button
          title={`Find places within ${maxDistance} km`}
          color="#239658"
          onPress={findPlacesWithinDistance}
        />
        <Button
          title="Move user to random location"
          color="#061124"
          onPress={moveUserToRandomLocation}
        />
      </View>
      // ...
    </View>
  );
}

const styles = StyleSheet.create({
  // ...
  buttonContainer: {
    zIndex: 25,
    width: "100%",
    position: "absolute",
    bottom: 0,
    marginVertical: 4,
    display: "flex",
    gap: 4,
  },
});

sortPlacesByProximity() и findPlacesWithinDistance() сначала преобразуют местоположение пользователя в GeoPoint, создают Parse.Query, а затем выполняют определенную гео-функцию.
moveUserToRandomLocation() используется для перемещения пользователя в случайное местоположение на территории США. Этот метод используется в основном для тестирования двух предыдущих методов.
Мы также добавили три кнопки для запуска соответствующих функций.

Не забудьте про импорт в верхней части файла:

import {Button, StyleSheet, View} from "react-native";

Повторно запустите сервер, и вы увидите следующее:

Проверьте геозапросы, нажав кнопку “Сортировать места по близости”:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

Сделайте то же самое для функциональности в пределах расстояния:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

Наконец, переместите пользователя в случайное место и снова протестируйте геозапросы.

Заключение

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

Вот несколько идей, которые вы можете реализовать, чтобы проверить свое понимание:

Отслеживание местоположения пользователя в режиме реального времени (маркер пользователя должен перемещаться при движении устройства)
История местоположения пользователя (пользователи должны иметь возможность просматривать историю своего местоположения)
Навигация (отображение пути от местоположения пользователя до пользовательского местоположения)

Исходный код доступен в репозитории back4app-geolocation-app GitHub.