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

Transcript

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

   View Slide

2. 01
   軽く⾃⼰紹介
   

   View Slide

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

   View Slide

4. 02
   何の話するの︖
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 02
    つくるものを決める
    

    View Slide

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

    View Slide

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

    View Slide

14. 03
    技術要件を決める
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 04
    開発
    

    View Slide

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

    View Slide

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

    View Slide

23. View Slide

24. View Slide

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

    View Slide

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

    View Slide

27. 05
    できた
    

    View Slide

28. 28
    完成
    

    View Slide

29. 06
    ChatGPTを使った開発まとめ
    

    View Slide

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

    View Slide

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

    View Slide