Amplify#AWS大高大輔2021.06.01この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。インテグレーション部の大高です。先日、Amplifyの入門としてAngularアプリをホスティングして、実際にブラウザで表示するところを試してみました。今回、更にAPIを作成してアプリから利用するところを試してみたいと思います。前提この環境は以下の記事のとおりAmplifyを利用したAngularのアプリを作成し、AWS上にホスティングしています。今回やりたいことAngularアプリ上に簡単なAPI操作を組み込ませたいです。今回は「現在の天気の情報」を画面上に表示させ、ボタンをクリックすることで最新の情報に更新できるようにしたいと思います。具体的には以下を満たすアプリとしたいと思います。初期画面の表示時、および、更新ボタンをクリックすることで天気情報を取得する取得した天気情報をデータベースに登録する登録した天気情報はデータベースから取得して画面に即時反映させるなお、天気情報をわざわざデータベースに登録する意味はないのですが、APIを組み込みたいので処理として入れています。天気情報については、下記の「OpenWeatherMap」のAPIを利用して、現在の「東京都」の天気を対象として取得したいと思います。Amplifyまわりの実装については、下記のチュートリアルを参考にすすめていきます。取得用サービスの追加まずは、天気情報を取得するためのサービスを追加します。試しに以下のようにOpenWeatherMapのAPIを実行して、レスポンスを取得してみます。https://api.openweathermap.org/data/2.5/weather?q=Tokyo&units=metric&lang=ja&appid=XXXXX取得したレスポンスから、interfaceを定義します。今回は下記を利用して自動生成してみました。generateコマンドで作成した.tsファイルに転記しておきます。number;}次に、本命のサービスを作成します。weatherenvironmentファイルにOpenWeatherMapのAPI情報を記載しつつ、ざっくり以下のように作成してみました。}}environment.tsは以下のような感じです。クエリパラメータはとりあえず固定にしています。},};あとはapp.componentを以下のようにして、簡単に画面に天気情報を表示できるようにします。Fontsを利用してアイコン表示をしたり、app.module.tsにHttpClientModuleの追加もしています。</div>(snip...)これで大枠はできました。APIと絡めていきましょう。apiコマンドでAmplifyのAPIを追加します。コマンドを実行すると、設定情報を聞かれるのでそれぞれ回答していきます。cloudコマンドの実行時に、以下のように編集すべきスキーマファイルを「いま編集する」と回答するとファイルを開いてくれるので、該当ファイルを編集します。/xxxxx/hello-amplify-angular/amplify/backend/api/HelloAmplifyAngularApi/schema.graphqlデフォルトのTodoモデルを修正して以下のようにします。id以外にはcity、description、temperatureカラムをもつようにしてみました。String}API(バックエンド)をデプロイするでは、追加したAPIをデプロイします。pushコマンドで実施します。minutes...しばらく待つと、以下のように完了した旨が通知されます。xxxxxAPIを組み込むそれでは、追加したAPIをアプリに組み込んでいきます。API組み込みのための準備まず先に必要なAmplifyのライブラリを以下のとおり追加しておきます。GraphQL用のライブラリも追加します。graphqlまた、APIの組み込みの際にaws-exports.jsを読み込む必要があるのですが、デフォルトだとjsファイルの読み込みができません。そのため、対応としてtsconfig.jsonのcompilerOptionsにallowJs設定を追加して、jsファイルを読み込めるようにします。...snip...}この上で、main.tsでAmplifyの設定処理を追記しておきます。'./aws-exports';Amplify.configure(awsmobile)(snip...)また、polyfills.tsには下記の設定追加が必要です。};これで一通りの準備ができました。APIの組み込みAPIの利用のために、GraphQLのスキーマに合わせたtypeを定義します。ファイルは新規に手動で作成しました。string;};次に、作成済みのweather.service.tsを修正して処理を組み込んでいきます。registCurrentWeatherを追加し、データを登録処理を実装します。formatWeatherInfoはGraphQL用のオブジェクトから情報を取得するように変更します。}}サービスができたらapp.component.tsも修正します。subscribeWeatherInfoによって、GraphQLのレコードが登録されたら、画面上に反映されるようにします。APIで取得したデータをGraphQLのレコードとして登録しています。これにより、レコード登録後にすぐに登録されたデータが画面上に反映されるようになります。}}動かしてみる実装ができたら、ローカル環境で動かしてみましょう。start想定どおり動いていることが確認できるかと思います。DynamoDBも確認してみましたが、想定どおりレコードが登録されていました。動作に問題なければ、git上にpushしてフロントエンド側もデプロイ完了です。はまったこと今回ちょっとはまったのは、下記のエラーです。'graphql/error/GraphQLError';`@types/graphqlを追加せよということですが、実際には下記のとおりにgraphqlをインストールすることでエラーが解消しました。graphqlまとめ以上、AmplifyでホスティングしたAngularのアプリにAPIを追加してみました。OpenWeatherMapを利用することで、当初思っていたよりも試行錯誤が多くて少々実装に悩みましたが、最終的にやりたかったAmplifyによるAPI実装はとてもシンプルでわかりやすいと感じました。自動でAPI操作に必要なメソッドも構築されるのでとても便利ですね。今後は、機会があればAPIとフロントエンドにCognito認証をつけて試してみたいと思います。どなたかのお役に立てば幸いです。