React&Node.jsでアプリ作ってみた

概要

現在地から1km圏内の飲食店をランダムで選んでくれるアプリ

Node.jsでGoogleMapsAPIのPlacesにあるNearbySearchでレストラン探してフロントに投げる

背景

友人と遊んでいるときに飲食店選びで困ったので作ってみようと思って作ったアプリ

使ったもの

• React
• Node.js
• ChatGPT
• github copilot(educationで無料)
• GoogleMapsAPI

実装

現在地取得

フロント

export function getUserLocation() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      position => {
        resolve({
          lat: position.coords.latitude,
          lng: position.coords.longitude
        });
      },
      error => {
        reject(error);
      }
    );
  });
}

API叩く

バック
apikeyはconfig.jsに保存しmodule.exportsした
(.env使いたかったけど使えなかった...)

const axios = require('axios');
const config = require('./config.js');

module.exports.fetchRestraunt = async function(lat, lng) {
    const apiKey = config.apiKey;
    console.log(apiKey);  // デバッグ出力
    const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${lat},${lng}&radius=1000&type=restaurant&language=ja&key=${apiKey}`;
    try {
        const response = await axios.get(url);
        console.log(response);  // デバッグ出力
        const data = response.data;
        const nearbyRestaurants = data.results;
        return nearbyRestaurants;
    } catch (error) {
        console.error(error);  // エラーハンドリング
    }
}

lat=緯度
lng=経度
radius=距離(m)

使ったgooglemapのapi

• Maps JavaScript API
• Places API

飲食店をランダムで選ぶ

バック

function choiceRestraunt(nearbyRestaurants) {
   const randomIndex = Math.floor(Math.random() * nearbyRestaurants.length);
   const selectedRestraunt = nearbyRestaurants[randomIndex];
   return selectedRestraunt;
}

module.exports.choiceRestraunt = choiceRestraunt;

表示

フロント

export function printRestraunt(selectedRestraunt) {
    // Get the restaurant details
    const name = selectedRestraunt.name;
    const address = selectedRestraunt.vicinity;
    const rating = selectedRestraunt.rating;
    const place_id = selectedRestraunt.place_id;

    // Update the UI to display the details of the selected restaurant
    // ...
    return(
        <div>
            <h1>店名:{name}</h1>
            <h2>住所:{address}</h2>
            <h2>評価:{rating}</h2>
        </div>
    )
  }

#今後の事とか
chatGPTとcopilotすげーってなりました
じつはこれまだ完成してなくて

• dockerに移行したい
• reactnativeとかでモバイルアプリとして動かしたい
• UI完成してない
• 店のurlとか貼ってない(まだ名前、住所、評価しか表示してない)
  とかいろいろあります。
  qiitaで初めて記事書いたんですけどこんなんでいいんですかね