Rakuten Rapid API를 사용하여 날씨 정보 얻기

7133 단어 CSSHTMLJavaScriptjQueryAPItech

Rakuten Rapid API 소개


Rakuten RapidAPI는 개발자가 API를 검색하고 연결해 사용 상황을 관리할 수 있는 API 시장 플랫폼이다.대시보드는 프로젝트에 필요한 API를 검색하고 응용 프로그램에 포함하여 API 사용을 일관되게 관리할 수 있습니다.
공식 문서 참조
https://api.rakuten.co.jp/docs/ja/docs/what-is-rapidapi/

Rakuten Rapid API에 새로 등록


Rakuten Rapid API를 사용하려면 먼저 아래 URL부터 등록하십시오.
https://api.rakuten.net/

사용할 API 선택


새 로그인이 완료되면 사용할 API를 선택합니다.
검색하거나 분류에서 API를 찾을 수 있습니다.
일본어로 사용하고자 하는 API를 찾지 못하면 영어로 검색하세요.
https://api.rakuten.net/marketplace

이번에 Weather에서 검색한 Open Weather Map을 사용하려고 합니다.
날씨 관련 API입니다.

선택한 API에서 사용할 끝점 확인


사용하려는 API에서 원하는 정보를 얻을 수 있는 최종 지점이 있는지 확인합니다.
확인 방법은 단점의 이름과 설명에 의해 판단된다.
이번에는 5day/3hour를 사용하고 싶어요.
※ 엔드포인트는 API를 사용해 데이터를 얻는 통신 대상이라고 생각합니다.

어떤 종점인지 모르는 상황.


단점 이름과 설명에서 어떤 단점인지 모르면 API를 제공하는 원본 사이트를 확인하십시오.
이번에'Open Weather Map'으로 검색해보니 대원의 API를 찾았다.
영어 사정이 많을 것 같으니 번역을 하면서 착실하게 읽어보자.

코드스니 애완동물에 사용하고 싶은 언어를 선택하여 통신 테스트를 진행합니다.


이번에는 jQuery를 사용하고 싶어요.
Rakuten Rapid API에서는 웹 사이트에서 API의 통신을 확인할 수 있습니다.
또한 복사 붙여넣기를 통해 API와의 통신을 통해 다양한 언어에 대응할 수 있다.
jQuery를 선택한 후 통신 테스트를 진행합니다.
통신 테스트는 로그인 테스트라고 적힌 버튼을 눌러 테스트합니다.

등록을 사용하지 않은 사람은 API를 사용하기 위해 비용 방안을 선택해야 한다.
이번에는 시도인 만큼 무료로 이용할 수 있는'베이직 플랜'을 선택했다.

프로젝트를 선택한 후 '단점' 옵션을 누르면 원래 화면으로 돌아갑니다.

복구 후 [테스트] 버튼을 다시 클릭합니다.
테스트 결과는 오른쪽 구역에 표시됩니다.

코드를 복사하여 자신의 코드에 붙이다


API의 통신 테스트 결과, 원하는 정보를 알게 되면 jQuery 코드를 복사하여 자신의 코드에 붙여넣습니다.

이번에는 jQuery 인코딩을 복사했기 때문에 jQuery CDN을 읽고 붙여넣습니다.
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    // jQueryのCDN
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    // Rakuten Rapid APIでコピーしたコード
    <script>
      const settings = {
        async: true,
        crossDomain: true,
        url:
          "https://community-open-weather-map.p.rapidapi.com/forecast?q=Tokyo,jp",
        method: "GET",
        headers: {
          "x-rapidapi-key":
            "自分のRakuten Rapid APIのKeyが設定されています。",
          "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
        },
      };

      $.ajax(settings).done(function (response) {
        console.log(response);
      });
    </script>
  </body>
</html>

브라우저에서 콘솔 로그 보기 열기


코드를 복사하여 붙여넣은 후 동작을 확인합니다.
기본적으로 복제된 코드에는 console.log가 기재되어 있으며, 브라우저가 시작된 후 콘솔을 확인하고 API에서 데이터를 얻었는지 확인한다.

화면에 데이터 표시


콘솔에서 데이터를 확보했는지 확인하면 화면에 표시됩니다.
이번에는 JavaScript로 화면에 표시됩니다.
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <h1>Rakuten Rapid API</h1>
    <h2>Open Weather Map</h2>
    <div id="whather"></div>

    // jQueryのCDN
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    // Rakuten Rapid APIでコピーしたコードをカスタマイズしたコード
    <script>
      const whather = document.querySelector("#whather");
      const settings = {
        async: true,
        crossDomain: true,
        url:
          "https://community-open-weather-map.p.rapidapi.com/forecast?q=Tokyo,jp",
        method: "GET",
        headers: {
          "x-rapidapi-key":
            "自分のRakuten Rapid APIのKeyが設定されています。",
          "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
        },
      };

      $.ajax(settings).done(function (response) {
        console.log(response);
        let data = "";
	// レスポンスの天気の一覧をループさせて、表示するデータを作成
        response.list.forEach((item) => {
          const weatherImg =
            "<div><img src=http://openweathermap.org/img/wn/" +
            item.weather[0].icon +
            "@2x.png></div>";
          const weatherDate = "<p>" + item.dt_txt + "</p>";
          const whatherName = "<p>" + item.weather[0].main + "</p>";
          data += weatherDate + whatherName + weatherImg + "<hr>";
        });
        whather.innerHTML = data;
      });
    </script>
  </body>
</html>

HTML과 CSS가 추가되어 좀 그래 보입니다.
이렇게 하면 Rakuten Rapid API는 간단하게 API를 테스트할 수 있고 실현도 비교적 간단하다.
꼭 해보세요.
Uva-10816-Travel in Desert
코드스테이츠 6주차 / Tree UI

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage