구글 맵 API 설정

카탈로그

Google Maps API keys

Creating API keys

Choosing our APIs

API keys and .env

1. 구글맵 API 키

면책 성명

구글 개발자 계정을 만들기 위해서는 신용카드가 필요하다.걱정하지 마라. 구글은 친절하다. 매달 200달러의 무료 신용카드를 제공하는데, 이것은 우리의 현재 업무에 있어서 이미 충분하다.그러나 주의해야 할 것은 지도를 불러오고 각종 API를 호출할 때마다 이 포인트가 수취된다는 것이다. 이것은 응용 프로그램이 클수록 사용료를 지불해야 한다는 것을 의미한다.
지도 구성 요소를 만들기 전에 몇 가지 일을 해야 합니다.Google Maps는 다양한 옵션을 사용할 수 있는 기능이 풍부한 API이지만, 유일한 키가 있어야만 그들의 API를 호출할 수 있습니다.이것은 상당히 간단한 과정이니, 내가 너를 데리고 경험할 것이다.

2. API 키 만들기

우선, 유효한 구글 계정에 로그인했는지 확인하십시오. 우리가 필요로 하는 도구에 접근할 수 있도록 해야 합니다.이어서 Google Cloud Platform dashboard으로 가세요.

API 키는 고유합니다. 즉, 사용자가 만든 모든 새 응용 프로그램이나 프로젝트에 대해 플랫폼에서 새 프로젝트를 만들어야 합니다.탐색 모음에서 새 항목을 만들거나 기존 항목을 선택할 수 있습니다.

항목을 만든 후 왼쪽 탐색 모음의 자격 증명 탭으로 이동한 다음 페이지 맨 위에 있는 CREATE CREDENTIALS을 클릭합니다.

이 과정은 두 번 반복된다.첫 번째 키의 경우 제한 없이 CLOSE을 클릭하면 됩니다.두 번째 키에 대해 우리는 제한을 추가해야 한다. 왜냐하면 우리는 잠시 후에 브라우저에 표시되는 방식으로 그것을 사용할 것이다.

다음 페이지에서 HTTP referrers (web sites)을 응용 프로그램 제한으로 선택한 다음 ADD AN ITEM을 클릭하여 추가합니다.이 입력은 키에 접근할 수 있는 사이트를 선택할 수 있도록 합니다. 이 경우 로컬 개발 환경에 접근하기 위해 localhost:3000/*을 설정해야 합니다.이 항목을 실시간 저장소로 전송할 계획이라면, 여기에 위탁 관리 사이트에 링크를 추가하십시오.

이제 API를 아래쪽으로 제한하고 선택한 Google API 세트만 추가합니다.
API 키 설정의 마지막 단계는 서로 다른 용도(서버 및 브라우저)에 사용할 고유한 이름을 지정하는 것입니다.제한된 키는 브라우저에 사용되므로 다음과 같이 이름을 지정할 수 있습니다.

3. API 선택

구글 지도는 많은 API를 제공하여 제품 자체가 우리 프로젝트에서 제공하는 모든 기능을 제공할 수 있다.원하는 대로 추가할 수 있지만 Dell의 핵심 기능에는

맵 JavaScript API

Add a map to your website, providing imagery and local data from the same source as Google Maps. Style the map to suit your needs. Visualize your own data on the map, bring the world to life with Street View, and use services like geocoding and directions.

지리적 인코딩 API

Convert addresses into geographic coordinates (geocoding), which you can use to place markers or position the map. This API also allows you to convert geographic coordinates into an address (reverse geocoding).

측면 탐색 에서 Library 을 클릭합니다.이렇게 하면 API를 검색할 수 있는 새 페이지가 나타납니다.

검색 상자에 Maps JavaScript API 을 입력하고 맨 위 결과를 엽니다.API 페이지에서 ENABLE 을 클릭합니다.사용 중인 API를 표시하는 API 대시보드로 리디렉션됩니다.library 페이지로 돌아가서 지리적 인코딩 API에 대해 동일한 절차를 반복합니다.
지금 우리는 모두 열쇠를 우리의 프로젝트에 넣을 준비가 되어 있다.

4. API 키 및.컨디션

API 키는 중요한 데이터로 간주됩니다.내가 구글이 그들의 API를 호출할 때마다 비용을 내야 한다고 말한 것을 기억하십니까?누군가가 당신의 열쇠를 들고 자신의 목적에 사용한다면, 당신은 월말에 깨어날 수도 있고, 구글이 불쾌한 깜짝 계산서를 작성한 것을 발견할 수도 있다.
키나 프로젝트의 다른 민감한 데이터가 접근하지 말아야 할 곳에 접근하는 것을 방지하기 위해서 환경 변수라고 부르는 것이 필요합니다.이것은 프로젝트의 어느 곳에서든 이 데이터를 인용하는 방법이며, 점마다 이 데이터를 공개할 필요가 없다.그것은 안전하고 편리합니다!.env 파일을 계속 만들기 전에 개발 환경에서 읽을 수 있도록 설정을 해야 합니다.우리는 dotenv 보석을 사용할 것이다.우리는 로컬에서만 사용하고 싶기 때문에 Gemfile으로 돌아가서 개발과 테스트 그룹을 찾고 거기에gem를 추가합니다.다음으로 바꾸기

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'dotenv-rails'
end

그런 다음 실행 중인 서버(Ctrl+C)를 닫고 Rails gem install 명령을 실행합니다.

bundle install

설치된gem가 길게 늘어야 합니다. 오류가 없으면 읽을 필요가 없습니다.현재 우리의 로컬 환경은 이미 설정되어 있어 환경 변수를 읽을 수 있다.

환경 변수에 대한 방주

Rails에서는 과 같이 dotenv 등gem 및 기타 환경 변수를 관리하는 기술적 방법을 사용할 수 있습니다.간단하게 보기 위해서, 우리는 지금 우리 자신을 만들 것입니다. 그러나, 더 큰 프로젝트나 민감한 데이터를 처리하고 있다면, 당신의 용례에 맞는 옵션을 찾기 위해 다른 옵션을 찾아보십시오.

우리의 미래를 창조하다.환경 파일

이 부분은 상당히 간단하다.프로젝트 (/rails-react-google-maps) 의 루트 디렉터리에 .env이라는 새 파일을 만듭니다. (파일의 끝에 파일 확장자가 있을 수 없습니다.)
어떤 물건을 놓기 전에, 온라인 저장소 (예: GitHub) 로 보내면 공유되지 않도록 확보해야 합니다.루트 폴더에는 .gitignore이라는 파일이 있어야 합니다. 파일을 열고 아래쪽에 다음을 추가합니다.

.env

만약 조작이 정확하다면, 현재 코드 편집기의 파일 자원 관리자의 파일 이름은 회색으로 변해야 합니다.

키를 환경 변수로 저장

Google Maps API 키를 .env 파일에 추가하여 전체 애플리케이션에서 액세스할 수 있도록 합니다.환경 변수의 명명 규칙은 다음과 같습니다.

NAME_OF_VARIABLE=value

따라서 키를 설명 이름으로 추가하면 [your key here]가 자체 API 키로 대체됩니다.

GMAPS_API_SERVER_KEY=[your_key_here]
GMAPS_API_BROWSER_KEY=[your_key_here]

그런 다음 응용 프로그램에서 이러한 값에 액세스하려면 다음 방법을 사용하여 이러한 값을 호출할 수 있습니다.

ENV['GMAPS_API_BROWSER_KEY']

이와 같이 우리는 안전한 환경 변수와 브라우저 키에 대한 키 제한을 가지고 있어 민감한 API 키를 엿보지 않도록 해야 한다.
이것만 있으면 우리는 마지막 단계를 시작할 수 있다. 지도 구성 요소 구축!우리는 우리의 컨트롤러를 다시 탐색하고 다음 단계에서React 구성 요소와 도구에 다시 접근할 것입니다.