ChatGPTで簡単！ 余興に使えるAWSサーバーレスアプリ開発入門

1. 2023.06.24 吉野雅耶（株式会社Fusic） 1 ChatGPTで簡単！ 余興に使えるAWSサーバーレスアプリ開発入門
2. 01 軽く⾃⼰紹介
3. 軽く⾃⼰紹介 吉野 雅耶 (Masaya Yoshino) @ayasamind ↑ スライド公開予定 Work at 株式会社 Fusic エンジニア / 技術開発第3部⾨ 部⾨⻑ エンジニアカフェ Hacker Supporter TechTrain メンター Skill PHP・AWS 3
4. 02 何の話するの︖
5. 2023.06.24 吉野雅耶（株式会社Fusic） 5 ChatGPTで簡単！ 余興に使えるAWSサーバーレスアプリ開発入門
6. 6 先⽇、結婚式をしました。
7. 7 先⽇、結婚式をしました。 新郎がエンジニアということで 余興アプリを作ることに
8. 8 先⽇、結婚式をしました。 新郎がエンジニアということで 余興アプリを作ることに コストを抑えるべく、 サーバーレスアーキテクチャを採⽤
9. 9 先⽇、結婚式をしました。 新郎がエンジニアということで 余興アプリを作ることに コストを抑えるべく、 サーバーレスアーキテクチャを採⽤ ChatGPT(GPT-4)によって想像以上 の速さで実装に辿り着いた話をします
10. 10 先⽇、結婚式をしました。 新郎がエンジニアということで 余興アプリを作ることに コストを抑えるべく、 サーバーレスアーキテクチャを採⽤ ChatGPT(GPT-4)によって想像以上 の速さで実装に辿り着いた話をします サーバーレスアプリの実装経験がない⼈ でも簡単すぐできるかも︕︖
11. 02 つくるものを決める
12. つくるものを決める 12 ・結婚式で参加者が楽しめる余興アプリをつくりたい ・奥さんと話し合った結果「リアルタイム写真共有アプリ」に ・参列者が撮った写真をLINEトークにアップロード → 会場のスクリーンに写真が映る ・案出しもChatGPTに任せると・・・
13. つくるものを決める 13 Q. あなたはWEBエンジニアです。 結婚式の余興で使えるアプリケーション の実装を頼まれました。 参列者が参加でき、楽しむことができる ようなアプリケーションにしたいです。 どのようなアプリケーションを作るのが よいでしょうか︖
14. 03 技術要件を決める
15. 技術要件を決める 15 Q. あなたはWEBシステムエンジニア です。結婚式の余興で利⽤するアプ リケーションを実装する必要があり ます。そのアプリケーションは、参 列者が撮影した写真をアップロード すると、リアルタイムで会場のスク リーンにアップロードした写真が映 し出され、参列者同⼠で写真を共有 し合うことができるようなアプリケ ーションです。あなたはどのような 技術とアーキテクチャを⽤いて、こ のアプリケーションの実装を⾏いま すか︖できる限り⼯数と費⽤が発⽣ しない⽅法を考えてください。
16. 技術要件を決める 16 Q. あなたはWEBシステムエンジニア です。結婚式の余興で利⽤するアプ リケーションを実装する必要があり ます。そのアプリケーションは、参 列者が撮影した写真をアップロード すると、リアルタイムで会場のスク リーンにアップロードした写真が映 し出され、参列者同⼠で写真を共有 し合うことができるようなアプリケ ーションです。あなたはどのような 技術とアーキテクチャを⽤いて、こ のアプリケーションの実装を⾏いま すか︖できる限り⼯数と費⽤が発⽣ しない⽅法を考えてください。 AWS（S3、Cognito） Socket.IO React,Vue をオススメしてくれた
17. 技術要件を決める 17 S3 → 低コストだし画像保存には必要だよね Cognito → 参列者しか使わないから認証は不要 Socket.IO → リアルタイム同期が必要、リロード はしたくない、WebSocketは使おう React、Vue → React採⽤ React Native, Flutter → ネイティブアプリはコ ストかかりすぎる、、、却下
18. 技術要件を決める 18 Amazon S3、React、WebSocketを利⽤ するまでは決定 ただ、実現するための構成図までは何度か質 問したけど難しい。。。︖ EC2使わずに実現できるのでは︖ IAM、CloudWatch、Route53は確かに使 うだろうけど。。。
19. 技術要件を決める 19 出してもらった案を参考に、構成までは⾃分で考えることに （全く無知識の⼈がChatGPTだけを⽤いて構成図を作ることは難易度が⾼そう） 壁打ちしてもらう、案を出してもらうことには利⽤できそう
20. 04 開発
21. 開発 21 ・AWS上のサーバーレスアプリとなるので、Serverless Frameworkを⽤いれば実装できるのでは︖ ・これならChatGPTにお任せできるかも︖
22. 開発 22 Q. AWS Lambda、API Gateway、 DynamoDB、Amazon S3を⽤い て、S3に画像がPUTされたら WebSocket通信で画像のURLを送 る仕組みをつくりたいです。 Lambdaの⾔語はNode.js17を利 ⽤します。 Serverless Frameworkを⽤いて 実装する場合の、実装⽅法を教えて ください。
25. 25 Serverless Frameworkのymlファイ ルの記述内容、Lambdaのコードまで、 ChatGPTに⽣成をお任せ 基本的にコピペで作りたいものが作れて しまった︕
26. 26 ⼀部実装してみてエラーがでた箇所もあった 質問しながら進めて、完成まで辿り着けた︕ 開発
27. 05 できた
28. 28 完成
29. 06 ChatGPTを使った開発まとめ
30. ChatGPTを使って余興で使えるサーバーレスアプリを作るには 30 1. アプリケーション案はChatGPTにお任せ︕ 2. 技術要件・構成はChatGPTのアドバイスを受けつつも、有識者に ⼀度は聞いた⽅がよさそう 3. 技術要件と構成さえ決まれば、実装はChatGPTに任せてみよう
31. ご清聴いただきありがとうございました Thank You We are Hiring ! https://recruit.fusic.co.jp/