マナビ、アップデート 株式会社レアジョブテクノロジーズ RareJob Technologies, Inc. 1

登壇者自己紹介 株式会社レアジョブテクノロジーズ Androidエンジニア　杉山 裕紀 (Yuki Sugiyama) 新卒1年目からネイティブアプリ開発を始め、約 8年間アプリ開発に携わ る。業務ツール、ソシャゲ、プリインストール、クレジットカード、漫画系など 様々な案件を担当し、ユーザーの役に立つアプリを作りたいという想いか ら2018年よりレアジョブにジョイン。 現在はネイティブアプリの開発・運用に関わる。 2 写真

レアジョブグループ ビジョン 3

レアジョブテクノロジーズ ミッション 4

サービス説明 5

AIスピーキングテスト「PROGOS」 6

実現したい世界のイメージ 7

AWS AppSync を利用したアプリ開発チーム視点の API 開発 8

本日の流れ 9 1. AppSync, DynamoDB とは 2. アプリに AppSync を組み込む方法 3. 弊社アプリで AppSync を使っているポイント 4. AppSync を利用することによるメリット・デメリット

AppSync, DynamoDB とは 10

AppSync とは 11 ● ウェブおよびモバイルアプリケーションの構築を簡素化するサーバーレス GraphQL API サービス
 
 ● AWS AppSync GraphQL API
 ○ API から安全にデータをクエリまたは更新するための単一エンドポイントを提供することで、アプリケーション開発を簡 素化
 
 ● 今回利用した理由
 ○ アプリチームで施策を生み出し、リリースまで行う際に、比較的容易に API 化できるサービスを探しており、求めてい た内容とマッチした為、選択しました。

DynamoDB とは 12 ● ハイパフォーマンスなアプリケーションをあらゆる規模で実行するために設計された、フルマネージド でサーバーレスの key-value NoSQL データベース
 
 ● 今回利用した理由
 ○ 過去に利用経験があり、AppSync と同じ AWS サービスの一つでもある為、連携面も重視して 選択しました。


アプリに AppSync を組み込む方法 13

今回やることのイメージ図 14

準備 15 ● 新規 Android Project ● AWS アカウント ● DynamoDB - テーブル ● AppSync - API

プラグインの追加と依存関係の宣言 16 ● build.Gradle（:app）にプラグインを追加する。 ○ apply plugin: 'com.amazonaws.appsync' ● 同ファイルに、依存関係にあるライブラリを宣言する。 ○ implementation 'com.amazonaws:aws-android-sdk-core:*.*.*' ○ implementation 'com.amazonaws:aws-android-sdk-appsync:*.*.*'

クラスパスとリポジトリ利用の設定 17 ● build.gradle（[プロジェクト名]）内の dependencies ブロックに以下のクラスパス を追記する。 ○ classpath 'com.amazonaws:aws-android-sdk-appsync-gradle-plugin:*.*.*' ● buildscript 内の repositories ブロックに以下の内容を追記する。 ○ maven { url "https://plugins.gradle.org/m2/" }

AppSync API の作成, DynamoDB のテーブル作成 18 ● AppSync サービスにて、API を作成する。 ○ API 作成の際に、カスタマイズパターン、サンプルプロジェクトパターンの選 択ができる為、任意のパターンを選択し API を作成 ● DynamoDB サービスにて、テーブルを作成する。 ○ 任意のテーブル名、パーティションキー、ソートキーを設定

データソースの設定 19 ● 統合する API のデータソース画面の「データソースを作成」をクリック ● データソース名入力、タイプ、リージョンを指定し、作成したテーブルを選択 ● 作成ボタンをクリックし、データソースの作成完了

スキーマの設定 20 ● 統合する API のスキーマ画面にて、クエリ、ミューテーションを記述 ● 記述したクエリ、ミューテーションをアタッチし、リゾルバー を作成 ● データソースの設定、リクエストマッピングテンプレート 、レスポンスマッピングテ ンプレートを記述して「リゾルバ を保存」ボタンをクリック ＊ スキーマで設定した内容の結果は、統合する API のクエリ画面で確認可能です。

アプリと統合する為、各種ファイルを配置 21 ● 設定ファイルを配置 ○ API トップ画面に存在する「設定をダウンロード」ボタンをクリック ○ アプリプロジェクトの res ディレクトリ内に raw ファイルを作成 ○ raw ファイルにダウンロードした設定ファイルを配置 ● スキーマファイルを配置 ○ 統合する API のスキーマ画面を表示し「スキーマをエクスポート」をクリック ○ schema.graphql を選択 ○ アプリプロジェクトのルートディレクトリに schema.graphql を配置

コマンドを実行 22 ● 以下のコマンドを実行し、アプリで使用できるコードファイルを生成 ○ amplify add codegen --apiId [ID]

コードを書いて連携しているかチェック① 23 ● 初期設定を行う ○ AWSAppSyncClient.builder() で AppSyncClient の情報を作成 credentials の設定を行いたい場合は、ここで CognitoCachingCredentialsProvider を設 定してみるのもありです。

コードを書いて連携しているかチェック② 24 ● Query を試してみる ○ 以下のサンプルコードのように書いてみる。 appSyncClient.query([指定するクエリ ]()) .responseFetcher(AppSyncResponseFetchers.CACHE_AND_NETWORK) .enqueue(testQueryCallback) private val testQueryCallback = object : GraphQLCall.Callback<[指定するクエリ ].Data>() { override fun onResponse(response: Response<[指定するクエリ ].Data>) { // 指定したクエリのレスポンスを確認できます。 } override fun onFailure(e: ApolloException) { Log.e("ERROR", e.toString()) } }

コードを書いて連携しているかチェック③ 25 ● Mutation を試してみる ○ 以下のサンプルコードのように書いてみる。 appSyncClient.mutate([指定するミューテーション ].build()) .enqueue(testMutationCallback) private val testMutationCallback = object : GraphQLCall.Callback<[指定するミューテーション ].Data>() { override fun onResponse(response: Response<[指定するミューテーション ].Data>) { // ミューテーションの結果を確認できます。 } override fun onFailure(e: ApolloException) { Log.e("ERROR", e.toString()) } }

Query, Mutation の動作結果を確認する 26 ● Query の動作結果確認方法 ○ リクエスト処理をした後に、指定したコールバックに値が返ってくる。 ○ 処理の流れ上、成功の場合: onResponse, 失敗の場合: onFailure に入ってくるので、こ こで結果が得られたら動作はしており成功となる。 ● Mutation の動作結果確認方法 ○ レスポンスの確認までは Query と同じ。 ○ ただし、本当にデータベースへ保存されているかアプリ上からは確認できない為、データ ソースに設定したテーブルを確認する必要がございます。 ○ 該当テーブル内に Mutation で送った登録したい値が保存されていれば動作成功

弊社アプリで AppSync を使っているポイント 27

弊社のアプリで利用しているポイント 28 ソロトレーニング機能 こちらの機能のカテゴリ情報、トピック情報、学習内容情 報などを DynamoDB のテーブルに入れており必要に 応じて情報を取り出しております。 また、学習トピックの理解度を API のミューテーションを 使い保存しております。

AppSync を利用することによるメリット・デメリット 29

メリット 30 ● プロジェクトのスケジュール管理を行いやすくなる ● 柔軟性が上がる ● ナレッジが溜まる

デメリット 31 ● コストがかかる

積極採用中〜EdTech No.1へ〜 UI/UXデザイナー MLエンジニア スマホアプリ インフラ サーバサイド フロントエンド オープン PdM システム ディレクター 32