public API

ユーザーの位置に基づいて、天気情報を持ってきて皆さんに見せたいと思います.ここで使用するAPIの概念と使用方法,およびユーザの位置を取得できるJSの方法について説明する.
APIは、アプリケーションソフトウェアの構築および統合のための定義およびプロトコルのセットであるアプリケーションプログラミングインターフェースです.

APIロール

APIの役割は大きく3つに分けられる.

APIはサーバとデータベースのエントリです.
データベースには貴重な情報が格納されています.誰もがこのデータベースにアクセスすることはできません.このような事態を防止するために、APIはユーザが所有するサーバとデータベースにエントリの役割を果たし、許可された人だけがデータベースにアクセスすることができる.

APIは、アプリケーションとデバイスがシームレスに通信できるようにします.
ここで、アプリケーションとは、私たちがよく知っているスマートフォンのアプリケーション、プログラム、ネットワークを指します.APIは、アプリケーションとデバイスのデータ交換を円滑に支援する橋渡しです.

APIはすべての接続を標準化します.
APIはすべての接続を標準化しているため、マシン/オペレーティングシステムを考慮することなく、誰でも同じアクセス権(アクセス権)を得ることができます.簡単に言えば、APIは汎用プラグインのようなものです.

APIタイプ

APIのタイプは3つに分けられます.

private API:private APIは内部APIであり、会社の開発者は内部で製品とサービスを改善するために発行しています.だから第三者には露出しない.簡単に言えば、一般的なアプローチは不可能です.

public API:public APIはオープンAPIであり、すべての人に公開されている.誰もがAPIを無制限に使用することができる.ここで使うAPIもそうです.

パートナAPI:パートナAPIは、企業がデータの共有に同意した特定のユーザにのみ使用できます.ビジネス関係では、通常、パートナー企業間でソフトウェアを統合するために使用されます.

使用方法

まずAPIをロードするURLが必要です.https://openweathermap.org/のAPIコールURLは以下の通りである.
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API_KEY}
ここではlat、lon、API ketの値を調整する必要があります.これは、ユーザが存在する緯度、経度、およびユーザのKEY値です.
緯度経度は最後にJSメソッドでロードでき、KEY値はopenweathermapホームページのプロファイル情報から知ることができます.
実際のコードに適用すると以下のようになります.

const API_KEY  = "9b9260a87f691a3520d48b73e6542aa8";

function onGeoOk(position) {
    const lat = position.coords.latitude; 
    const lon = position.coords.longitude;
  
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;

    fetch(url)
    .then(response => response.json())
    .then(data => {
        const weather = document.querySelector("#weather span:first-child");
        const city = document.querySelector("#weather span:last-child");

        city.innerText = data.name;
        weather.innerText =  `${data.weather[0].main} / ${data.main.temp}`;
    });
}

URLを呼び出します.ユーザーがリンクをクリックして直接URLに接続するのではなく、JavaScriptがURLをロードします.開発者ツールを使用してネットワークをチェックしてみましょう.
インターネットで何が起こったのか知ることができます.ページをリフレッシュすると、ユーザーの場所を参照するプロンプトがプロンプトウィンドウに表示され、requestが表示されます.これは、誰かがURLでリクエストしたことを意味します.それがJavaScriptです.上記のコードに示すようにfetch関数でリクエストが送信されます.
fetch
Fetch()関数は、1番目のパラメータURL、2番目のパラメータでオプションオブジェクトを受信し、Promiseタイプのオブジェクトを返します.返されたオブジェクトは、API呼び出しに成功したときに応答オブジェクトを解析し、失敗したときに例外オブジェクトを拒否します.fetch()関数は、ブラウザのwindowオブジェクトに属するため、厳密にはwindowです.fetch()としても使用できます.(前述したように、windowグローバルオブジェクト->windowは省略できます)

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

ユーザーの場所の読み込み

function onGeoError() {
    alert("Can't find you");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError)

ブラウザに位置座標を指定します.因子は2つ必要です.すべてが成功したときに実行される関数と何かにブロックされ、エラーが発生したときに実行される関数は、通常alertを発行します.