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

by MasayaYoshino

Slide 1

Slide 1 text

2023.06.24 吉野雅耶（株式会社Fusic） 1 ChatGPTで簡単！余興に使えるAWSサーバーレスアプリ開発入門

Slide 2

Slide 2 text

01 軽く⾃⼰紹介

Slide 3

Slide 3 text

軽く⾃⼰紹介吉野雅耶 (Masaya Yoshino) @ayasamind ↑ スライド公開予定 Work at 株式会社 Fusic エンジニア / 技術開発第3部⾨部⾨⻑エンジニアカフェ Hacker Supporter TechTrain メンター Skill PHP・AWS 3

Slide 4

Slide 4 text

02 何の話するの︖

Slide 5

Slide 5 text

2023.06.24 吉野雅耶（株式会社Fusic） 5 ChatGPTで簡単！余興に使えるAWSサーバーレスアプリ開発入門

Slide 6

Slide 6 text

6 先⽇、結婚式をしました。

Slide 7

Slide 7 text

7 先⽇、結婚式をしました。新郎がエンジニアということで余興アプリを作ることに

Slide 8

Slide 8 text

8 先⽇、結婚式をしました。新郎がエンジニアということで余興アプリを作ることにコストを抑えるべく、サーバーレスアーキテクチャを採⽤

Slide 9

Slide 9 text

9 先⽇、結婚式をしました。新郎がエンジニアということで余興アプリを作ることにコストを抑えるべく、サーバーレスアーキテクチャを採⽤ ChatGPT(GPT-4)によって想像以上の速さで実装に辿り着いた話をします

Slide 10

Slide 10 text

10 先⽇、結婚式をしました。新郎がエンジニアということで余興アプリを作ることにコストを抑えるべく、サーバーレスアーキテクチャを採⽤ ChatGPT(GPT-4)によって想像以上の速さで実装に辿り着いた話をしますサーバーレスアプリの実装経験がない⼈でも簡単すぐできるかも︕︖

Slide 11

Slide 11 text

02 つくるものを決める

Slide 12

Slide 12 text

つくるものを決める 12 ・結婚式で参加者が楽しめる余興アプリをつくりたい・奥さんと話し合った結果「リアルタイム写真共有アプリ」に・参列者が撮った写真をLINEトークにアップロード → 会場のスクリーンに写真が映る・案出しもChatGPTに任せると・・・

Slide 13

Slide 13 text

つくるものを決める 13 Q. あなたはWEBエンジニアです。結婚式の余興で使えるアプリケーションの実装を頼まれました。参列者が参加でき、楽しむことができるようなアプリケーションにしたいです。どのようなアプリケーションを作るのがよいでしょうか︖

Slide 14

Slide 14 text

03 技術要件を決める

Slide 15

Slide 15 text

技術要件を決める 15 Q. あなたはWEBシステムエンジニアです。結婚式の余興で利⽤するアプリケーションを実装する必要があります。そのアプリケーションは、参列者が撮影した写真をアップロードすると、リアルタイムで会場のスクリーンにアップロードした写真が映し出され、参列者同⼠で写真を共有し合うことができるようなアプリケーションです。あなたはどのような技術とアーキテクチャを⽤いて、このアプリケーションの実装を⾏いますか︖できる限り⼯数と費⽤が発⽣しない⽅法を考えてください。

Slide 16

Slide 16 text

技術要件を決める 16 Q. あなたはWEBシステムエンジニアです。結婚式の余興で利⽤するアプリケーションを実装する必要があります。そのアプリケーションは、参列者が撮影した写真をアップロードすると、リアルタイムで会場のスクリーンにアップロードした写真が映し出され、参列者同⼠で写真を共有し合うことができるようなアプリケーションです。あなたはどのような技術とアーキテクチャを⽤いて、このアプリケーションの実装を⾏いますか︖できる限り⼯数と費⽤が発⽣しない⽅法を考えてください。 AWS（S3、Cognito） Socket.IO React,Vue をオススメしてくれた

Slide 17

Slide 17 text

技術要件を決める 17 S3 → 低コストだし画像保存には必要だよね Cognito → 参列者しか使わないから認証は不要 Socket.IO → リアルタイム同期が必要、リロードはしたくない、WebSocketは使おう React、Vue → React採⽤ React Native, Flutter → ネイティブアプリはコストかかりすぎる、、、却下

Slide 18

Slide 18 text

技術要件を決める 18 Amazon S3、React、WebSocketを利⽤するまでは決定ただ、実現するための構成図までは何度か質問したけど難しい。。。︖ EC2使わずに実現できるのでは︖ IAM、CloudWatch、Route53は確かに使うだろうけど。。。

Slide 19

Slide 19 text

技術要件を決める 19 出してもらった案を参考に、構成までは⾃分で考えることに（全く無知識の⼈がChatGPTだけを⽤いて構成図を作ることは難易度が⾼そう）壁打ちしてもらう、案を出してもらうことには利⽤できそう

Slide 20

Slide 20 text

04 開発

Slide 21

Slide 21 text

開発 21 ・AWS上のサーバーレスアプリとなるので、Serverless Frameworkを⽤いれば実装できるのでは︖ ・これならChatGPTにお任せできるかも︖

Slide 22

Slide 22 text

開発 22 Q. AWS Lambda、API Gateway、 DynamoDB、Amazon S3を⽤いて、S3に画像がPUTされたら WebSocket通信で画像のURLを送る仕組みをつくりたいです。 Lambdaの⾔語はNode.js17を利⽤します。 Serverless Frameworkを⽤いて実装する場合の、実装⽅法を教えてください。

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

25 Serverless Frameworkのymlファイルの記述内容、Lambdaのコードまで、 ChatGPTに⽣成をお任せ基本的にコピペで作りたいものが作れてしまった︕

Slide 26

Slide 26 text

26 ⼀部実装してみてエラーがでた箇所もあった質問しながら進めて、完成まで辿り着けた︕ 開発

Slide 27

Slide 27 text

05 できた

Slide 28

Slide 28 text

28 完成

Slide 29

Slide 29 text

06 ChatGPTを使った開発まとめ

Slide 30

Slide 30 text

ChatGPTを使って余興で使えるサーバーレスアプリを作るには 30 1. アプリケーション案はChatGPTにお任せ︕ 2. 技術要件・構成はChatGPTのアドバイスを受けつつも、有識者に⼀度は聞いた⽅がよさそう 3. 技術要件と構成さえ決まれば、実装はChatGPTに任せてみよう

Slide 31

Slide 31 text

ご清聴いただきありがとうございました Thank You We are Hiring ! https://recruit.fusic.co.jp/