Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS AppSync を利用したアプリ開発チーム視点の API 開発
Search
yuki.sugi
November 04, 2022
Programming
0
720
AWS AppSync を利用したアプリ開発チーム視点の API 開発
2022/ 10/ 27【 Android祭り 】Android開発のここが好き!Androidへの「愛」を語る会の発表資料です。
yuki.sugi
November 04, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
310
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
CSC305 Lecture 06
javiergs
PRO
0
230
Serena MCPのすすめ
wadakatu
4
1k
Software Architecture
hschwentner
6
2.3k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
210
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
220
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Facilitating Awesome Meetings
lara
56
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Thoughts on Productivity
jonyablonski
70
4.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
KATA
mclloyd
32
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
マナビ、アップデート 株式会社レアジョブテクノロジーズ 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