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
660
AWS AppSync を利用したアプリ開発チーム視点の API 開発
2022/ 10/ 27【 Android祭り 】Android開発のここが好き!Androidへの「愛」を語る会の発表資料です。
yuki.sugi
November 04, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
110
2025.01.17_Sansan × DMM.swift
riofujimon
2
630
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
1
3k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
230
Rubyでつくるパケットキャプチャツール
ydah
0
390
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
140
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.7k
Amazon Nova Reelの可能性
hideg
0
240
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
980
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Faster Mobile Websites
deanohume
305
30k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Embracing the Ebb and Flow
colly
84
4.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
For a Future-Friendly Web
brad_frost
176
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Automating Front-end Workflow
addyosmani
1367
200k
Why Our Code Smells
bkeepers
PRO
335
57k
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