API를 사용한 백엔드 개발

오늘은 API에서 데이터를 추출하고 Google Maps API에 매핑하는 방법에 대해 설명하겠습니다. 또한 wikipedia-query 태그에서 해당 데이터를 사용하여 그러한 콘텐츠에 대한 위키피디아 페이지를 표시하는 방법을 다룰 것입니다.

지리 IP

우리는 연결된here GeoIP라는 앱을 사용할 수 있습니다. 이 앱은 좌표와 같은 장치에 대한 지리 정보를 가져와 JSON 응답으로 사용자에게 다시 보낼 수 있습니다. GeoIP의 응답은 IP 주소를 기반으로 하므로 VPN을 사용하는 경우 실제 물리적 위치가 아니라 VPN이 연결된 위치의 지리 정보를 제공합니다. 형식이 지정된 JSON에서 API 응답은 다음과 같습니다.

{
"ip": "104.39.60.125",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16801",
"time_zone": "America/New_York",
"latitude": 40.7957,
"longitude": -77.8618,
"metro_code": 574
}

fetch 명령을 사용하여 JSON 응답 받기

먼저 this.locationEndpoint = 'https://freegeoip.app/json/'; 라고 말하여 클래스 생성자에서 인스턴스와 같이 GeoIP API를 설정하려고 합니다. 여기에서 fetch 명령을 사용하고 getGEOIPData라는 메서드에서 이것을 호출합니다locationEndpoint.

async getGEOIPData() {
    const IPClass = new UserIP();
    const userIPData = await IPClass.updateUserIP();
    return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.long = data.longitude;
        this.lat = data.latitude;
        this.city = data.city;
        this.state = data.region_name;
        return data;
      });
  }

간단히 명시된 fetch 명령은 해당 웹 페이지로 이동하여 검색하도록 지시하는 데이터 또는 웹 페이지가 제공해야 하는 데이터를 검색합니다. 이 경우 GeoIP 웹 페이지는 JSON 응답을 반환하므로 data 호출에서 볼 수 있는 .then() 인스턴스에 응답이 할당됩니다.

응답을 받은 후 해당 응답 데이터 속성을 클래스의 속성에 할당할 수 있습니다. 이것은 GeoIP API가 this.lat 및 this.long에 각각 할당한 위도 및 경도 좌표입니다.

가져오기 응답을 사용하여 위치 매핑

이 다음 부분에서는 Google Maps iframe API를 사용하여 Google Maps 대화형 이미지를 html 페이지에 포함할 수 있습니다. 우리는 우리 코드의 render() 함수에서 이것을 할 것입니다. 이전의 this.lat 및 this.long 좌표와 함께 사용할 Google 지도의 URL을 정의합니다. 그런 다음 이 URL을 웹페이지에 이 지도를 표시하는 html 태그로 보냅니다.

render() {
    // this function runs every time a properties() declared variable changes
    // this means you can make new variables and then bind them this way if you like
    const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`<iframe title="Where you are" src="${url}"></iframe> 
  }

Wikipedia 쿼리 태그에 데이터 연결

이제 fetch() 를 사용하여 API에서 데이터를 검색하는 기능을 설정했으므로 이 데이터를 사용하여 페이지에 wikipedia 기사를 포함할 수 있습니다. 이렇게 하려면 다음을 사용하여 wikipedia-query 종속성을 프로젝트로 가져와야 합니다.import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js'; . 여기에서 render() 함수 내부의 html 태그를 사용하여 웹페이지에 wikipedia 기사를 포함할 수 있습니다.

<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
<wikipedia-query search="${this.city}"></wikipedia-query>
<wikipedia-query search="${this.state}"></wikipedia-query>`;

위의 태그는 이 wikipedia 쿼리 검색에 대한 세 가지 가능한 항목을 나타냅니다. 셋은 시와 주 조합, 시만 또는 주만입니다. GeoIP API의 fetch 명령의 데이터를 사용하여 현재 있는 도시와 상태를 가져왔습니다. API 응답에서 state는 region_name 로 나열되므로 응답을 번역할 때 주의하십시오. 이제 페이지에 3개의 wikipedia 기사가 성공적으로 포함되었을 것입니다. 다음과 같이 보일 수 있습니다.


축하합니다. 두 개의 API를 웹페이지에 성공적으로 통합했습니다! 이 프로젝트에 사용된 소스 코드는 here 에서 찾을 수 있습니다.