|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjsdifyapi/
课程评论:没有评论
本课程讲解如何利用 Next.js 和 Dify API 构建带有认证和订阅功能的生成式 AI 应用。 **课程亮点:** * **Dify 与 Next.js 整合:** 学习如何连接 Dify 的工作流 API 和聊天流 API。 * **认证和用户管理:** 实现用户注册和认证功能。 * **生成式 AI 应用开发:** 构建一个基于 Dify 聊天流 API 的生成式 AI 应用。 * **订阅和支付系统:** 集成 Stripe 实现用户使用情况追踪和订阅付费功能。 * **实战演练:** 通过动手实践,掌握端到端的应用开发流程。 **课程目标:** * 理解 Dify 的核心功能及其 API。 * 掌握 Next.js 的 App Router、组件、Server Actions 等关键技术。 * 学会集成第三方库(如 Prisma, shadcn/ui, Zod, `auth.js`, Stripe)来增强应用功能。 * 能够独立开发具有认证和支付功能的生成式 AI 应用。 **课程受众:** * 对生成式 AI 应用开发感兴趣的前端开发者。 * 希望将 Dify 功能集成到自己项目中的开发者。 * 希望学习如何为 AI 应用添加用户管理和付费机制的开发者。 **技术栈:** * **前端:** Next.js (App Router, RSC/RCC, Server Actions), React * **后端/AI:** Dify (Workflow API, Chat Flow API) * **数据库/ORM:** Prisma * **UI 组件:** shadcn/ui * **表单验证:** Zod * **认证:** `auth.js` (formerly NextAuth.js), bcryptjs * **状态管理:** Zustand * **支付:** Stripe **请注意:** 课程内容主要集中在 Next.js 部分,Dify 的详细工作流和聊天流构建方法不在本课程范围内。
この講座は、Next.jsとDifyAPIを活用して生成AIアプリを構築する方法を、ハンズオンで解説しています。講座の前半・・Next.jsとDifyAPIの連携 DifyワークフローAPIとの接続講座の中盤・・認証・ユーザー登録・DifyチャットフローAPIを扱った生成AIアプリの開発講座の後半・・ユーザー毎の使用状況や継続課金システムの導入(stripe)講座を作ったモチベーション2024年9月頃に『Dify』を扱った講座をリリースしました。『Dify』は、GPTやClaude、画像生成などの生成AIはもちろんのこと、SlackやGoogle, Youtubeなどのツールも組み合わせて扱うことができる複合AIとも呼ばれる生成AIアプリサービスです。ブラウザ上でブロックを繋げることで様々な処理を構築することができ、非エンジニアの方でも、自由に処理を作り上げることができます。最近はAIエージェントブロックなども追加され、ますます機能拡充しており、書店にも少しずつ関連本が並ぶようになってきて、今最も注目を浴びている生成AIサービスの1つです。『Dify』の講座リリースから数ヶ月経ち、様々な声をいただくようになりました。チャットボットは作れたけれど内部処理は見せたくない・・・チャットボットの画面を自由に変更したい・・・Difyの本は増えてきたけれど、画面を変更する方法はほとんど情報がない・・・認証や課金システムも搭載して生成AIアプリとしてリリースしたい・・・などなど。そんなご意見ご要望を受けて本講座では、生成AIを活用した処理を『Dify』に任せつつ、フロント側、認証、決済などの機能を『Next.js』で実装し、基本的な生成AIアプリとして開発する方法をハンズオンで解説しています。ユーザー認証・Stripeを使った継続課金の設定方法、『Dify API』へのアクセスと表示方法など、生成AIアプリを構築するために必要な知識を盛り込んでいます。土台としての知識を身につけた後に、さらなる発展としてコード生成AIなどを活用いただくことで、様々な生成AIアプリをかなりのスピードで開発できる実力を身につけることができます。「急がば回れ」の精神でできるだけ細かく解説しておりますので、生成AIサービス開発に興味のある方はぜひ本講座をご活用いただければ幸いです。※ 注意事項講座の内容としては9割方 Next.jsの話になります。Difyのブロックの解説や細かいワークフロー、チャットフローの組み方などは解説しておりませんので、Difyの深掘りをしたい方は別の講座をご活用いただけますと幸いです。講座で扱っている技術Next.jsAppRouter(page/layout/loading)/RouteHandler(api/route)/middlewareコンポーネント(RSC/RCC)/ServerActions/redirect/Linkライブラリprisma/shadcnui/zod/auth.js(旧NextAuth.js)/bcryptjs/zustand/stripeReactの機能useActionState, useState, useEffect, useRef, SuspenseDifyの機能ワークフローAPI (blocking, streaming)、チャットフローAPI (chat-messages, conversations, messages)