Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
730
AWS AppSync を利用したアプリ開発チーム視点の API 開発
2022/ 10/ 27【 Android祭り 】Android開発のここが好き!Androidへの「愛」を語る会の発表資料です。
yuki.sugi
November 04, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
shmokmt
5
2.3k
sbt 2
xuwei_k
0
300
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
10
1.2k
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
230
LLMで複雑な検索条件アセットから脱却する!! 生成的検索インタフェースの設計論
po3rin
3
740
俺流レスポンシブコーディング 2025
tak_dcxi
14
8.8k
チームをチームにするEM
hitode909
0
340
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
720
テストやOSS開発に役立つSetup PHP Action
matsuo_atsushi
0
160
Integrating WordPress and Symfony
alexandresalome
0
150
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
360
Github Copilotのチャット履歴ビューワーを作りました~WPF、dotnet10もあるよ~ #clrh111
katsuyuzu
0
110
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Documentation Writing (for coders)
carmenintech
76
5.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Facilitating Awesome Meetings
lara
57
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Code Reviewing Like a Champion
maltzj
527
40k
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