Amplifyを使ってユーザ認証機能付きのリアルタイムチャットアプリを30分で作ってみたいと思います。Amplify(以下Amplify)を初めて耳にする方、ご安心ください!Amplifyはスケールするモバイルアプリおよびウェブアプリを最速で構築するためのサービス/ツール群です。画像/文字認識などのAI機能の簡単な追加オフラインのデータ同期これらを利用するためのライブラリやUIコンポーネントなどを含んでおり、モバイルアプリやウェブアプリを開発して実際にサービスを提供するのに必要なフロントエンド/バックエンドを非常に簡単に用意することができます。実際にその様子をお見せしましょう!今回作るアプリ冒頭で述べたように、ユーザ認証機能付きのリアルタイムチャットアプリを作ってみたいと思います。このアプリは次のような機能を備えています。アプリから簡単にユーザ登録してログインできるログインしたらこれまでのチャット履歴が表示される好きな文章を入力して送信できる任意の人数がチャットに参加でき、参加者のコメントは能動的にリロードする必要なくリアルタイムに表示されるログアウトしてチャットを終了できるAmplifyで作ったリアルタイムチャットアプリAPIにGraphQLを使ってみるAmplifyでAPIを追加するとき、主に2つの選択肢があります。APIについては言わずもがな。Lambdaによって実現されますが、こちらは想像がつきやすいので今回は利用しません。今回はRESTにかわる規格として注目を集めているGraphQLを利用してみたいと思います。RESTとの比較、API・フロント双方の実装から学ぶが素晴らしい記事ですので別途ご覧ください。AppSyncというGraphQLのマネージドサービスが提供されています。マネージドサービスということは、自分たちでサーバを用意しなくても簡単にGraphQLを利用できるということです!AmplifyでGraphQLをAPIに選択すると裏ではこのAppSyncが使われますが、今回のアプリを作るにあたってはバックエンドで何が使われているかといった内容はほとんど意識することなく簡単に開発することができます。今回はAndroidアプリでGraphQLを使ってみたいと思います。Studioのウィザードから普通に作成して、アプリが起動するのを確認できればOKです。CLIというコマンドラインツールをインストールして、これで対話的に機能を追加したり編集するのがAmplifyを利用する基本的な流れとなります。CLIをインストールします。AWSにIAMユーザを作成し、そのユーザ権限でCLIを実行できるようになります。コマンドを実行し、AndroidプロジェクトにAmplifyをセットアップします。app/src/main/resあたりを選択/入力すれば、あとはデフォルトで問題ありません。基本ステップの「このとき何が起きているか」を参照してください。このプロジェクトのAmplifyの設定を見ることができます。|いまは何もしていないのでこれで問題ありません。「GraphQL」を選択します。resource次にGraphQLのスキーマを変更します。今回はチャットのメッセージとして一意なIDメッセージの送信者メッセージ本文を持ったMessageというモデルを作ることにします。continueモデルは次のようにします。String!}編集したらウィザードを進めます。するとローカルに「Auth機能」と「Api機能」が追加されています。することで、このバックエンド構成がそのままAWS上にプロビジョニングされます。ユーザを作成してログインを試みたり、GraphQLのコンソールからクエリを発行したりしたいところですが、今回は敢えてそのあたりに可能な限り触れません。その辺りを意識しなくても開発できるのがAmplifyの良さだと思うからです。アプリを書き始めます。Startedを参考に必要なライブラリや設定を追加します。どれも、Androidエンジニアにはお馴染みの設定なので特に詰まることもないでしょう。いうファイルが作成されているはずです。これはAndroidアプリからAmplifyを利用するための設定を中央集権的にするための設定ファイルです。設定がきちんとされているか確認してください。設定画面で見つけることができます。}}いよいよAndroidのコードに取り掛かります。指定するのを忘れないようにします。})次に、認証画面を表示する部分を作ります。先にインストールしたdependenciesのおかげで、認証用の画面は自分で作らなくても利用することができます。認証状態に合わせてコールバックしてもらえるリスナが用意されているので次のように登録します。メソッドを呼んでやるだけです。辺りで登録解除してやるとよいでしょう。super.onStop()}これでログイン機能は実装できました!サインイン画面にはユーザの新規作成、確認コードの送信なども最初から組み込まれており完全に動作します。ここで早速ユーザを作成してログインを試してみてください。サインイン画面ここからサインアップもできる確認コードも提供されるこれでログイン状態でGraphQLのAPIを自由にアクセスすることができるようになりました。ミューテーションを実装するGraphQLではデータの作成や変更、削除などをミューテーションと呼びます。先にウィザードでMessageモデルを作ったことで、Amplifyが自動的にそのモデルを使って行うミューテーションのためのデータ型などを自動生成してくれます。対してエンキューするだけでミューテーションを簡単に行うことができます。次のようなメソッドを作って、ボタンクリックなどをトリガとして実行することで簡単にデータをGraphQL越しに永続化することができます。DynamoDBをデータソースとして扱います。したがってミューテーション後はマネジメントコンソールからデータが格納された様子を確認することができます。クエリを実装する同様に、GraphQLではデータ取得操作をクエリと呼びます。クエリもまったく同じように型安全にリクエストやコールバックを作成し、AwsAppSyncClient#queryするだけでデータを取得することができます。渡して画面に反映するのが典型的な使い方でしょう。サブスクリプションを実装する最後に、リアルタイムにミューテーションを通知してもらうためのサブスクリプションを実装します。お気づきだと思いますが、これもまったく作法は同じです。持つリストに追加して表示を更新するなどといった使い方が一般的でしょう。最後にサインアウトを実装します。メソッドを呼ぶだけです。今回はオプションメニューに追加してみました。}}サインアウトサインアウトすると自動的に認証状態の変更を検知するリスナが発火されてサインイン画面が再び表示されるはずです。まとめちょうど30分ぐらいでしょうか!GraphQLがこれほど簡単に使えることに驚かれたのではないでしょうか。AmplifyはバックエンドはすべてAWSのサービスであり、設定や組み合わせは柔軟でスケールもします。この使い勝手の良さとカスタマイズ性のバランスがAmplifyの大きな魅力だと個人的には考えています。今日の例はごくごく初歩的な内容に留めましたが、今後いくつかのエントリでAmplifyを使ったネイティブアプリ開発の実践的な例をご紹介できたらなと考えています。月別アーカイブはてなブログをはじめよう!fushiroyamaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。