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のサービスを使って ローコードで webアプリを作りたい
Search
yuki
September 10, 2024
0
24
AWSのサービスを使って ローコードで webアプリを作りたい
yuki
September 10, 2024
Tweet
Share
More Decks by yuki
See All by yuki
JAWS初登壇から(約)1年が経ったので今までの活動を振り返ってみる
prinprinprrr
1
140
WAFのマネージドルールを導入してみた
prinprinprrr
0
16
IT初心者がAWS認定資格を 取得して感じたこと
prinprinprrr
1
18k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
204
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Gamification - CAS2011
davidbonilla
80
5k
Practical Orchestrator
shlominoach
186
10k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Producing Creativity
orderedlist
PRO
341
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Transcript
AWSのサービスを使って ローコードで webアプリを作りたい🥺 第33回 JAWS-UG札幌 クラウド女子会コラボ 勉強会 飯田夕葵(yuki) (と思ったのでAmplify Studioを触ってみた)
自己紹介 飯田夕葵(yuki) ⭐ 好きなAWSサービス AWS CDK Lambda ⭐ 札幌生まれ札幌育ち ゴールデンカムイのオタクです
😌 ⭐ 千葉県船橋市 在住 @prinprinprrr
⭐ 高校は英語科・大学は文学部で根っからの文系 ⭐ 新卒で入社した前職でAWSに出会う ⭐ 前職ではひたすらLINE botをサーバレスで開発 → サーバーのことわかんないけどサーバレス大好き🙌🥳 ⭐
昨年10月に現職に転職 → EC2,ECS、、、サーバーわかんない😵 経歴
登壇のきっかけ 転職してAWSつよつよの 会社に入ったし、 コミュニティ活動にも 参加してみよう JAWS-UG東京 ランチタイムLT会 #6 (2023/12/18)
登壇のきっかけ 登壇前 登壇後 緊張する 震える 震える 吐きそう 寒い オエッ 楽しかった!
Twitterで感想も らえて嬉しい 仕事で頑張ったこと、 勉強したことを 楽しく共有し合える って最高🙌
登壇のきっかけ 札幌が大好きだから 札幌のコミュニティに 参加したい 帰省するタイミングで 何かイベントないかな? あった😄
発表内容について AWSのサービスを使って ローコードで webアプリを作りたい🥺 バックエンドはわかるけど、 フロントがわからないから 一人でwebアプリを作れない ローコードでフロントの 実装ができたらいいな! (と思ったのでAmplify
Studioを触ってみた)
AWSのローコード・ノーコードツール 1. AWS Amplify Studio AWS Amplify Studio は、デベロッパーが完全なウェブアプリやモバ イルアプリを数時間で簡単に構築して配信できる視覚的なインター
フェイスです。 Amplify Studio を使用すると、アプリのバックエンドをすばやく構築 し、豊富なユーザーインターフェイス (UI) React コンポーネントを作 成し、数回クリックするだけで UI をバックエンドに接続できます。 https://aws.amazon.com/jp/amplify/studio/ なんか簡単に アプリ作れそう
AWSのノーコード・ローコードツール 2. Amazon Honeycode https://aws.amazon.com/jp/blogs/news/how-to-create-an-expe nse-tracking-app-without-coding-using-amazon-honeycode/ AWSはユーザーフレンドリーな "ノーコード" アプリ開発プラット フォームである
Amazon Honeycode を提供しています。 デスクトップ、iOS、Android のモバイルデバイスで動作するウェブ およびモバイルアプリケーションを構築できます。プログラミングを 必要としないので、誰でもアプリ開発者になれます。 ただし、2024年2月29日にサービス終了😭😭
とりあえず Amplify Studioやってみよう
AWS Amplify Studioとは? フロント側 バックエンド側 Figmaでデザインを作成 Reactコンポーネントを生成 ⭐ GUIでデータモデリングができる ⭐
テーブルの定義 ⭐ リレーション ⭐ データをコンポーネントに紐付ける ⭐ 作成したデータはDynamoDBに保存
今回やってみたこと AWSブログにあるAmplify Studioのハンズオン https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-ap p-with-minimal-programming/ 最近追加された住宅を表示する 「住宅リスト」アプリケーション を開発する 完成物はこんな感じ→
⭐ AWSが用意しているリポジトリをforkして接続 ⭐ Amplifyアプリケーションをデプロイする Amplifyアプリケーションをデプロイ 自動生成されたURLを叩くと こんな感じ!
Amplify Studio を起動 Amplify Studio を起動してみる😳
Amplify Studio を起動 少し待つと起動した!🙌
データモデリング すでに「Home」というモデルがある🙄
データモデリング ⭐「Data Manager」でデータの追加ができる ⭐自動でデータを作成できる! DynamoDBを確認すると、 テーブルが作成されデータが入っている → ⭐自動でデータを作成できる!
データモデリング 自動生成されたデータ データの形式を「住所」に指定できる 他にもいろいろな形式が指定できる
Figmaとの連携 FigmaのファイルURLを貼り付けると簡単に連携できる
コンポーネントの作成と設定 Figmaでコンポーネントを作成すると Amplify Studio側にも作成される
コンポーネントの作成と設定 コンポーネントの画像と homeテーブルのimage_urlが対応している
コンポーネントの作成と設定 コンポーネントを複数並べて コレクションを作成 ソートやフィルターも設定できる
作成したコンポーネントをソースコードに追加 ⭐ ローカル環境のセットアップ ⭐ AWSが用意しているリポジトリをclone ⭐ ソースコードに先ほど作成したコンポーネントを追加 コンポーネントのコードは`Amplify pull`コマンドで取得できる ここからが少し大変🥵
完成したもの 全然違う、、、 色々試行錯誤しましたが直せませんでした、、、 お手本
やってみた感想 フロント側 バックエンド側 ⭐ フロントをまるっとFigmaで 作るのではなく、パーツを作る イメージ ⭐ GUIで簡単にテーブル定義できる ⭐
複雑な処理はできないのであまり実用的 ではないかも ⭐ フロントの知識0では難し い。 ⭐ デザイナーがFigmaで作成 したコンポーネントをそのまま 取り込めるので、時短にはなる かも🤔 ハンズオンをやってみただけなので、 深掘りしたらもっと便利な機能があるかも 🤔
ご清聴ありがとうございました!