初めに

BlazorServerからOpenWeatherのAPIを読んで天気の情報を取得するアプリを作成しました。
もしよければ最後まで読んでいってください。

↓完成イメージ

↓ソース(実際に動かす場合にはAPIキーの取得が必要です)

↓使用したAPI

ポイント

本アプリのポイントを何点かご紹介します。ソースコードのすべてを説明するわけではないので、もし興味を持っていただけたら実際のコードを確認してただければ幸いです。

APIと通信するためのHTTPクライアントを依存性の注入を用いてソースがら実行できるようにしました。Microsoftのチュートリアルあるあるだと思うのですがいろいろなパターンがのっているせいでどのパターンを使用すればいいかわからず、何気に時間がかかりました。

↓Program.cs

builder.Services.AddHttpClient();

↓WeatherPage.razor

@inject IHttpClientFactory HttpClientFactory

実際に通信する際には上記のファクトリーからクライアントを作成して通信を実施します。

APIを使用する際に必要なキーについて第３者に知られてしまうと悪用される可能性があるためソース上にハードコーディングやGitにコミットすることは厳禁です。

そのためシークレットファイルを用意してそちらに記載するのですがAsp.net Coreでは簡単に用意して通常のappsetting.jsonと同じ要領でアクセスすることができます。

設定方法については以下を参考にしました。

APIキーに設定する都市についてInputSelectタグを用いて変更するとテーブルの値も変更されるようにしました。

このBlazorで提供されるInput~系のタグについてEditFormタグの内部でのみ使用できるようです。私は下記記事にたどり着けなかったらアプリ作成をあきらめてたかもしれないです。

データが取得できなかった場合の例外処理や、ネットワーク遮断時のリトライ処理

Blazorから外部のAPIを使用してデータを取得するアプリを作成してみました。
APIを使用するソースを触るときは何かの間違いでAPIキーがほかの人に見られる状態になっていないかドキドキします💦