Weather API와 Node Js를 사용하여 날씨 앱 만들기: 1부

우리는 Nodejs, express 및 API, Here is the link to what we are going to build 을 사용하여 웹앱을 만들 것입니다. 경로, 비동기 기능 및 약속에 대한 기본적인 이해만 있으면 됩니다. 프런트 엔드는 쓰레기일 수 있지만 여기서 초점은 노드 Js 및 express입니다 😂. 그러니 손을 더럽히자.

그래서 웹사이트에서 가장 먼저 하는 일은 위치를 삽입하는 것입니다. 위치를 API로 쉽게 변환하는 다른 더 쉬운 API가 있다는 것을 알고 있지만 여기서는 연습용으로 두 가지 API를 사용할 것입니다. 우리가 사용할 첫 번째 API는 mapbox입니다. ,https://account.mapbox.com/auth/signup/으로 이동하여 계정을 만드십시오. 계정을 생성한 후 여기 https://account.mapbox.com/으로 이동하면 "기본 공개 토큰"을 복사해야 합니다. 👇👇👇👇



나
좋아하는 코드 편집기로 이동하여 vsCode를 사용하겠습니다.
mapbox에서 경도와 위도를 반환하도록 주소를 전달할 것입니다.

app.js이라는 파일을 만듭니다.
1. 파일에서 geoCode라는 이름의 비동기 함수를 생성합니다.

async function geoCode(){


}

지도 상자 문서에서 API에 요청해야 합니다. 여기에서 사용하는 api는 지오코딩 api https://docs.mapbox.com/api/search/geocoding/입니다.

우리는 이 API에 요청을 하고 있습니다.

https://api.mapbox.com/geocoding/v5/mapbox.places/**the address you want to get the longitudes**.json?access_token=**Your default public access token**

아래 예에서는 New York을 내 주소로 사용하려고 합니다만 죄송합니다. 내 액세스 토큰을 숨길 것이기 때문에 mapbox에서 복사한 것을 사용하세요.https://api.mapbox.com/geocoding/v5/mapbox.places/New York.json?access_token=place your access token here
요청이 작동하는지 테스트하기 위해 Chrome을 사용할 새 웹 브라우저 앱에 위의 링크를 게시하겠습니다.


귀하의 요청이 효과가 있다면 위와 유사한 것을 보게 될 것입니다.

반환된 데이터는 JSON이므로 JSON viewer chrome extension을 사용하여 응답 형식을 지정하겠습니다.



이제 데이터를 읽을 수 있으며 응답이 "뉴욕"이라는 이름을 가진 모든 장소의 결과임을 알 수 있지만 미국의 수도인 뉴욕을 원하므로 제한을 1로 설정할 수 있습니다. 여기에서 자세한 내용을 읽어보세요. https://docs.mapbox.com/api/search/geocoding/#geocoding-response-object .
제한을 추가하려면 URL 끝에 &limit=1을 입력합니다.

따라서 제한을 설정하면 코드는 다음과 같이 표시됩니다. https://api.mapbox.com/geocoding/v5/mapbox.places/New York.json?access_token=place your access token here&limit=1


이제 하나의 결과가 생겼습니다. 이제 코드 편집기로 돌아가서 데이터를 요청하는 URL과 동일한 상수 const url을 생성하겠습니다. 코드는 다음과 같습니다.

async function geoCode(){
 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";

}

계속하기 전에 오류 없이 컴퓨터에 이미 노드를 설치했다고 가정합니다.

이제 VS 코드 터미널을 열고 노드 패키지를 설치하겠습니다.
그래서 내 터미널과 루트 폴더에서 npm init -y 명령을 실행할 것입니다.



그러면 package.json이라는 새 폴더가 생성됩니다.
API에서 데이터를 가져오는 데 사용할 axios을 설치하겠습니다. AXIOS를 설치하려면 npm install axios을 사용합니다.

축을 사용하려면 const axios = require("axios" 이 필요합니다.

이것은 우리의 코드가 지금과 같은 모습입니다. 우리는 응답을 console.log할 것입니다.

const axios = require("axios")

async function geoCode(){

 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
console.log(response.data)
}

geocode()   //calling the function

app.js 파일을 실행하면 터미널에서 결과를 볼 수 있습니다. response.data.features[0].center 에 저장된 좌표를 얻기 위해 mapbox만 사용했다는 것을 기억하십시오. 그래서 우리는 우리의 코드에 그것을 구현하자

const axios = require("axios")

async function geoCode(){

 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
console.log(response.data.features[0].center)
}

geocode()   //calling the function

따라서 center 배열에는 경도와 위도가 포함되며 경도의 인덱스는 0 이고 위도의 인덱스는 1 입니다.

코드에서 객체를 포함하는 객체 console.log으로 이동합니다.const cordinates= {
longitude: response.data.features[0].center[1],
latitude: response.data.features[0].center[0]
} 그런 다음 나중에 좌표를 사용할 것이기 때문에 return cordinates입니다.

여기 우리의 코드가 있습니다.

const axios = require("axios")

async function geoCode(){

 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
const cordinates= {
   longitude: response.data.features[0].center[1],
   latitude: response.data.features[0].center[0]
}

return cordinates;
}
}

geocode()   //calling the function

주소를 동적으로 로드해야 하므로 상수 const address = Nairobi 을 생성하겠습니다.(나이로비는 케냐의 수도입니다.) 그래서 우리는 url의 주소를 연결했고, 우리의 url 변수는

const address = "Nairobi"
const url `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=place your access token here&limit=1`;

이제 파트 1이 완료되었습니다. 파트 2에서 날씨 앱을 계속 만들겠습니다. 최종 코드는 다음과 같습니다.

const axios = require("axios")

async function geoCode(){

const address = "Nairobi" 
 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
const cordinates= {
   longitude: response.data.features[0].center[1],
   latitude: response.data.features[0].center[0]
}

return cordinates;
}
}

geocode()   //calling the function