Полное руководство по React Native по созданию приложения с нуля с помощью Expo на Android

Это первая из серии публикаций об интеграции Google Maps и Places в реальное приложение React Native с использованием Expo.

Причина

Одной из функций, необходимых в моем последнем побочном проекте, была реализация Google Maps and Places в реальном приложении React Native с использованием Expo. Я нашел несколько руководств, но ни один из них не работал, по крайней мере, для меня. Реализовать его было нелегко.

Я потратил много времени, пытаясь внедрить Google Maps and Places, и получал много ошибок. Я также потратил огромное количество времени на поиски на Stack Overflow без каких-либо успешных результатов. После этой тяжелой борьбы я наконец добился своей цели. Затем я подумал, что мне следует написать серию сообщений, в которых я расскажу обо всех этапах реализации этой функции и многого другого. Итак, в этом посте мы создадим собственное приложение React, объединяющее Google Карты и Адреса.

Требование

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

Разбивка проблемы на куски, называемые пользовательскими историями

Наш MVP (минимально жизнеспособный продукт)

Давайте сначала спланируем, а потом код.

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

  • Как конечный пользователь, я хочу видеть панель управления с опциями меню, чтобы находить такие места, как банки, банкоматы, бары, кафе, отели, автобусные станции и спортивные залы.
  • Я хочу, чтобы внизу был навигатор вкладок с меню: главная, профиль и настройки.
  • Я хочу иметь возможность нажимать на банк, бары, кафе, отели, автовокзал или спортзалы и получать список результатов для текущего места, на которое я щелкнул.
  • Я хочу видеть рейтинг каждого места, местоположение, название, описание, звезды и окрестности.
  • Я хочу иметь панель поиска, чтобы искать место по ключевому слову, названию или городу.
  • Я хочу выбрать место и получить о нем подробную информацию.

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

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

Итак, приступим, пачкаем пальцы.

Настройка Expo

Чтобы иметь возможность работать с Expo, вам потребуются две вещи: инструмент локальной разработки (Expo CLI) и мобильный клиент (Expo client) для открытия вашего приложения.

Предварительные условия:

  • Node.js
  • Git

Установка Expo CLI

 npm install -g expo-cli

Установка клиентского инструмента Expo на ваше устройство Android

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

Вы можете скачать клиентское приложение Expo из Play Store. Однако, если вы предпочитаете запускать приложения Expo на локальном компьютере, вам необходимо установить симулятор или эмулятор.

Если вам нужна дополнительная информация о настройках Expo, настоятельно рекомендую зайти на официальный сайт.

Создать учетную запись Expo

Вам необходимо зарегистрироваться на Expo.io. Итак, перейдите на страницу Вход в Expo и создайте свою учетную запись. Он понадобится вам на следующем шаге.

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

Создание проекта

Я использую Windows Powershell. Если вы используете Gitbash, вам потребуются дополнительные аргументы в неинтерактивном режиме.

expo init rn-google-maps-places

После выполнения этой команды выберите шаблон - вы можете перемещаться вверх и вниз с помощью клавиш со стрелками. После этого добавьте приложение Expo name в nameproperty. Это будет окончательный результат:

Сразу после того, как вы нажмете ENTER, вы перейдете к следующему экрану. Введите Y, чтобы принять загрузку всех зависимостей проекта через Yarn. И просто подождите, пока все они не загрузятся!

Теперь откройте командную строку (я использую Powershell), чтобы войти в Expo. Вам будет предложено ввести имя пользователя, которое вы только что создали, а также пароль.

expo login

Запуск сервера разработки

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

npm start

После этого вы получите этот экран.

Настройка Google Cloud Platform

Мы должны настроить Google Cloud Platform. Войдите в Google, а затем создайте проект. Вы должны увидеть что-то вроде следующего экрана.

Теперь нам нужно включить оба API: Maps SDK for Android и Places API. Перейдите в меню library и найдите эти API, а затем включите их.

Убедившись, что оба они включены, пора создать учетные данные. Из этого нам понадобится ключ API, чтобы иметь возможность связать наше приложение с этими двумя сервисами. Так что сохраните его где-нибудь - он нам понадобится позже.

Пока что мы настроили приложение Expo и его инструменты, а также создали проект Google для получения ключа API. В следующем посте мы начнем «пачкать пальцы» в кодировании.

Карты Google и места в реальном приложении React Native (Часть 2)

Спасибо за прочтение!