$30 off During Our Annual Pro Sale. View Details »

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

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

MasayaYoshino

June 24, 2023
Tweet

More Decks by MasayaYoshino

Other Decks in Programming

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. 23

    View Slide

  24. 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