AWS Amplifyに入門して 個人開発への意欲をあげてみる 2023.03.18 あつまれ！個人開発を始めたい人！ Presented by ROM専

自己紹介します ROM専 です でフロントエンド をやっています さまざまなイベントや勉強会に出没しています 最近オフラインのイベントが増えてきて嬉しい

No content

WEB、iOS、Android、Flutter、ReactNativeアプリの構築やデプロイ、ホ スティングなどを提供する、フルスタック開発フレームワーク 各AWSサービスへのアクセスが容易で、高速かつスケーラブルなアプリ ケーションを比較的簡単に作成することが可能 AWS Amplify とは？

Amplify Libraries 認証、ストレージ、API、プッシュ通知、分析などのAWSサービスへ のアクセスを容易にするライブラリを提供 Amplify Console GitHub、GitLab、Bitbucket、またはAWS CodeCommitリポジトリに コードをプッシュするだけで、アプリケーションをビルドしてデプロ イでき、また、Amazon S3とAmazon CloudFrontを使用してアプリを グローバルに配信することもできる AWS Amplify とは？ and more...

入門する

入門の前に チュートリアルやハンズオンに必要なバージョンの Node.js、npmをインストールしておく （ハンズオンによってはOpenJDKも必要になるかも） https://amplify-sns.workshop.aws/ja/ もちろんAWSアカウントもお忘れなく！

入門！ $ npm install @aws-amplify/cli $ amplify -v https://docs.amplify.aws/start/q/integration/react/

入門！ $ amplify configure ブラウザが起動して、AWSにサインインを求められる ターミナルでリージョンを選択すると、自動的にブラウザに戻 ってAmplify用のユーザー作成画面が表示されているので、 あとはチュートリアルの指示通りに進めていく

入門！

入門！ $ npx create-app-react xxx まずは、アプリケーション基盤作成

入門！ $ amplify init Amplifyの設定：バックエンドサービスを作成 対話式で設定を進めていく

入門！

入門！ $ npm install aws-amplify src/index.js import { Amplify } from 'aws-amplify'; import awsExports from './aws-exports'; Amplify.configure(awsExports);

Amplifyの設定完了！ 体感10分くらいで フロントエンド とバックエンドの設定が済んだ アプリケーション基盤を構築できた…！

No content

× public-api でアイデア∞？ https://github.com/public-apis/public-apis 自分用 アニメデータベース クロスSNS 管理ツール ペットの 生活管理 ランチ検索

おまけ

Amplify UI Components がすごい https://ui.docs.amplify.aws/

AWS Amplifyのシンプルさと拡張性をUI開発に取り入れたオープンソース のUIライブラリ 認証や動的データなどの複雑なワークフローを簡素化する接続コンポー ネント、UIの構成要素を形成するプリミティブコンポーネント、そして Amplify UIをあらゆるブランドに適合させるテーマで構成されている Amplify UI Components とは？

https://ui.docs.amplify.aws/react/components UI Library > Conponents

https://ui.docs.amplify.aws/react/components UI Library > Conponents

交流タイムでみなさんと お話しできるのを 楽しみにしています…！ ご清聴ありがとうございました！