Упростите поиск ресторанов в React-приложении с помощью foodie-react

Несколько лет назад, работая над одним из SaaS-продуктов нашей компании, один из моих коллег сказал: «Хорошо бы иметь приложение для заказа пиццы».

Это вдохновило меня на создание foodie — интерфейса командной строки, позволяющего инженеру-программисту, приостановив работу над созданием кода, открыть терминал — или использовать уже открытый — и запустить пакет, выполняющий поиск ближайших ресторанов на основе заданных критериев. Затем результаты поиска могут быть отсортированы и отфильтрованы по расстоянию и рейтингу.

Теперь инженеры не ограничиваются только CLI. Они могут заказывать еду из любого React-приложения! Особенно удобна эта услуга в собственном приложении заказа и доставки еды.

При создании такого приложения внедрение полезной функции поиска ресторанов может оказаться непростой задачей. Для ее упрощения и был разработан NPM-пакет de>foodie-react. Благодаря простой интеграции и поддержке Google Maps API, foodie-react  помогает разработчикам добавить динамичный и удобный поиск ресторанов в React-приложения.

Что такое foodie-react?

foodie-react — React-компонент, который позволяет встроить в приложение полнофункциональную панель поиска ресторанов. Он использует Google Maps API для получения данных о ресторанах в зависимости от местоположения пользователя и заданного радиуса поиска.

Независимо от того, создаете ли вы приложение для поиска ресторанов, совершенствуете уже разработанный проект для доставки еды или работаете над любым другим React-приложением, foodie-react предоставит вам инструменты для обеспечения эффективного поиска.

Почему стоит выбрать foodie-react?

• Простота интеграции. Установка foodie-react потребует считанных минут и минимальных настроек. Просто импортируйте компонент, передайте ему указанный набор свойств, и все готово!

• Поддержка Google Maps API. Автоматически интегрирует геокодирование и данные о местоположении, позволяя получать исчерпывающие данные о близлежащих ресторанах, включая рейтинги, расстояние и отзывы!

• Настраиваемый радиус поиска. Настройте радиус поиска в соответствии с глобальными параметрами приложения. Расширяйте или уточняйте его по своему усмотрению. Можете вообще ничего не указывать: по умолчанию радиус поиска составит 10 000 метров.

• Обработка CORS (Cross-Origin Resource Sharing — совместное использование ресурсов между разными источниками). Включает настройку прокси-сервера для беспрепятственной обработки API-запросов. Все, что вам нужно сделать, — указать необходимый devPort (по умолчанию — 8080) и предоставить файл локального сервера с API-структурой, совместимой с foodie-react.

Начало работы

Чтобы приступить к работе, надо установить foodie-react с помощью NPM или Yarn.

// NPM
npm install foodie-react
// Yarn
yarn add foodie-react

Базовое использование

Ниже приведен базовый способ включения foodie-react в React-приложение.

import React from 'react';
import FoodieReact from 'foodie-react';

function App() {
  return (
    <div className="App">
      <h1>Find Restaurants Near You (Using Your App)</h1>
      <FoodieReact
        GMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}
        devPort={process.env.REACT_APP_PORT}
        radius={5000} // Радиус поиска в метрах
      />
    </div>
  );
}

export default App;

Ключевые свойства

• GMapsApiKey (строка, обязательно): ваш ключ Google Maps API для доступа к API местоположения и геокодирования.

• devPort (число, необязательно): номер порта для локального прокси-сервера (по умолчанию: 8080).

• radius (число, необязательно): радиус поиска ближайших ресторанов (по умолчанию: 10 000 метров).

• search (строка, необязательно): чтобы использовать собственную встроенную панель поиска еды, предоставьте свойство search, которое является текстом для поиска. В противном случае foodie-react будет использовать свою панель поиска.

Продвинутый пример использования: настройка радиуса поиска и текстового поиска

Допустим, вы хотите, чтобы пользователи могли выбрать желаемый радиус поиска и даже собственный текстовый поиск. Можете интегрировать foodie-react с выпадающим меню или слайдером для радиуса поиска, а также предложить собственную панель поиска.

Смотрите ниже:

import React, { useState } from 'react';
import FoodieReact from 'foodie-react';

function App() {
  const [radius, setRadius] = useState(2000);
  const [search, setSearch] = useState("");
  return (
    <div className="App">
      <h1>Discover Great Restaurants</h1>
      Search: <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <label htmlFor="radius">Search Radius (meters):</label>
      <select id="radius" value={radius} onChange={(e) => setRadius(Number(e.target.value))}>
        <option value={1000}>1 km</option>
        <option value={2000}>2 km</option>
        <option value={5000}>5 km</option>
        <option value={10000}>10 km</option>
      </select>
      <FoodieReact
        GMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}
        radius={radius}
        search={search}
      />
    </div>
  );
}
export default App;

Foodie предлагает свою панель текстового поиска, но также предоставляет вам возможность управлять ею!

Решение проблем с CORS: настройка локального сервера

Приведенный выше код — все, что вам нужно для продакшена. Но вы можете столкнуться с проблемами CORS, если попробуете использовать его в разработке. Чтобы обойти это, можете просто предоставить собственный файл сервера для запуска вместе с React-приложением.

Если конкретные API-запросы совместимы с foodie-react, у вас получится эффективный прокси! Смотрите пример ниже:

require("dotenv").config();
const express = require("express");
const axios = require("axios");
const cors = require("cors");

const app = express();
const port = process.env.REACT_APP_PORT;

// Используйте промежуточное ПО CORS
app.use(cors());

app.get("/foodie/getAll", async (req, res) => {
  const { latitude, longitude, keyword, radius, key } = req.query;
  const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=${radius}&type=restaurant&keyword=${encodeURIComponent(
    keyword
  )}&key=${key}`;
  try {
    const response = await axios.get(url);
    res.json(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).send("Error fetching data from Google Maps API");
  }
});

app.get("/foodie/getRestaurant", async (req, res) => {
  const { place_id, key } = req.query;
  const url = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${place_id}&key=${key}`;
  try {
    const response = await axios.get(url);
    res.json(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).send("Error fetching data from Google Maps API");
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

После этого останется только запустить node YOUR_SERVER_FILE.js — и все будет готово к разработке!

Резюме

Мой последний NPM-пакет — foodie-react — обеспечивает гибкость и встроенную простоту, когда дело доходит до разработки приложения по поиску еды и ресторанов!

Благодаря интеграции с Google Maps API, эта библиотека предложит вам, пожалуй, самые надежные данные о еде на рынке. Она идеально впишется в приложения для поиска ресторанов, путешествий, планирования мероприятий или в любое другое React-приложение. У вас всегда будет приложение для заказа пиццы или любой другой еды, которую только пожелает ваша душа!

Читайте также:

• 15 продвинутых техник React, которые должен знать каждый старший разработчик
• Обзор курса “Полное введение в React” от Frontend Masters
• Мой опыт спустя год работы с React

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Code & Coins: Simplify Restaurant Search in Your React App With foodie-react!