Upgrade to Pro — share decks privately, control downloads, hide ads and more …

生成AI×ノーコード (スピーディーなアプリ開発の新時代)

KNR
November 12, 2023
Programming
3
5k

生成AI×ノーコード (スピーディーなアプリ開発の新時代)

11月12日に開催された「FlutterFlow Tokyo Summit」にて登壇した「生成AI×ノーコード (スピーディーなアプリ開発の新時代)」の登壇資料です

KNR

November 12, 2023
Tweet

More Decks by KNR

See All by KNR
GPTs活用事例集
knr109
6
5.1k
2023年はたくさんアウトプットしたよ
knr109
1
1.1k
要件定義入門 (失敗しないために必要なこと)
knr109
35
12k
ChatGPTとLLMを活用して1週間で個人開発をした話
knr109
2
3.4k
(新人)エンジニアが開発しやすいREADMEの書き方
knr109
17
9.6k
クリエイター広場を作りました
knr109
0
180

Other Decks in Programming

See All in Programming
20241217　競争力強化とビジネス価値創出への挑戦：モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
250
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
350
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
170
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
370
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
1.3k
ドメインイベント増えすぎ問題
h0r15h0
2
550
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.3k
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
910
rails newと同時に型を書く
aki19035vc
5
690
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
750
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
6
1.4k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
910

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
How STYLIGHT went responsive
nonsquared
96
5.3k
Code Review Best Practice
trishagee
65
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
It's Worth the Effort
3n
183
28k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k

Transcript

  1. 生成AI×ノーコード スピーディーなアプリ開発の新時代 KNR

  2. 1 2 3 4 自己紹介・今日のゴール 従来のアプリ開発 生成AIを使った上流工程 ノーコードでのアプリ開発 目次

  3. 1 2 3 4 自己紹介・今日のゴール 従来のアプリ開発 生成AIを使った上流工程 ノーコードでのアプリ開発 目次

  4. 自己紹介 名前: KNR (26) 会社: Web系のシステム開発 役職: 執行役員 実績: Qiita

    2022年 1位 趣味: DJ, サウナ, イベント運営

  5. 今日のゴール 生成AIを使った要件定義、設計 (上流工程)の進め方がわかる ノーコード・ローコードを使ったアプリ開発 (プロトタイプの作成)がわかる

  6. 1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次

  7. アプリ開発の流れ

  8. ノーコードの登場 ノーコード・ローコード

  9. 生成AIの登場 生成AI ノーコード・ローコード

  10. 生成AIの登場 生成AI ノーコード・ローコード 前半 後半

  11. 1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次

  12. 生成AI(ChatGPT)を使った上流工程 (要件定義、設計) 建築業界における資料のDX化を例に考える

  13. 要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか

    (How) - 設計

  14. 要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか

    (How) - 設計

  15. システム開発する目的 (Why) - お客さんからヒアリング 建築現場の資料のDX化により、資料作成、検索及び整理の迅速化 作成された資料を元に情報をナレッジ化し共有

  16. 要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか

    (How) - 設計
  17. None
  18. None
  19. None

  20. 要件定義の成果物 作成した仮説を元にヒアリングを行い要件を決めていく

  21. 生成AI(ChatGPT)を使った上流工程 (要件定義、設計) 要件定義 設計

  22. 設計の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか

    (How) - 設計

  23. 設計フェーズの成果物 機能設計 画面設計 (ワイヤー) データモデル

  24. 設計フェーズの成果物 機能設計 画面設計 (ワイヤー) データモデル

  25. 機能の仕様書 - プロンプト

  26. None

  27. 設計フェーズの成果物 機能の仕様書 画面設計 (ワイヤー) データモデル

  28. 画面設計 (ワイヤー) - プロンプト

  29. None
  30. None

  31. 設計フェーズの成果物 これを元に実際は、画面のワイヤーを作成していきます

  32. 設計フェーズの成果物 機能の仕様書 画面設計 (ワイヤー) データモデル

  33. データモデル - プロンプト

  34. データモデル - 回答

  35. データモデル - 回答

  36. 設計フェーズの成果物 機能仕様書 画面設計書 データ設計書

  37. 1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次

  38. ローコード・ノーコードでのアプリ開発 FlutterFlowの特徴 FlutterFlowでプロトタイプを作成する

  39. ローコード・ノーコードでのアプリ開発 FlutterFlowの特徴 FlutterFlowでプロトタイプを作成する

  40. FlutterFlowの特徴 GUIでサクッとアプリが開発できる ウィジェットやテンプレートが豊富 ソースコードをダウンロードできる FirebaseやSupabaseとの外部連携が容易

  41. ノーコードでのアプリ開発 FlutterFlowと他のノーコードツール比較 FlutterFlowでプロトタイプを作成する

  42. ノーコードでのアプリ開発 - 前提 今回作成するものは完成品ではなく、提案フェーズで見せるプロトタイプ

  43. FlutterFlowでプロトタイプを作成する

  44. FlutterFlowでプロトタイプを作成する - ダッシュボード

  45. FlutterFlowでプロトタイプを作成する - ダッシュボード

  46. None

  47. FlutterFlowでプロトタイプを作成する - 資料作成

  48. FlutterFlowでプロトタイプを作成する - 資料作成 画面作成自体もAIを使う

  49. FlutterFlow AI Gen

  50. None

  51. まとめ 生成AIとFlutterFlowを使うことで提案フェーズで動くものを見せられる 実際の開発工数も大幅に削減できる

  52. Twitter (X) ご清聴ありがとうございました