آموزش ساخت اپلیکیشن هوش مصنوعی با React Next.js TypeScript گوگل و Stripe - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• درباره دوره About the Course

• مرور کلی پروژه Project Overview

• دفترچه PDF و سورس کد PDF Booklet & Source Code

• راه اندازی پروژه NextJs NextJs Project Setup

هوش مصنوعی تولیدی گوگل جمنای Google Gemini Generative AI

• استفاده از هوش مصنوعی گوگل جمنای Using Google Gemini AI

• اقدامات سرور در NextJs Server Actions in NextJs

• ارسال درخواست (Prompt) Passing Prompts

Shadcn UI Shadcn UI

• استفاده از Shadcn UI Using Shadcn UI

• درخواست (Prompt) پویا Dynamic Prompt

• رندر کردن Markdown Render Markdown

احراز هویت Authentication

• احراز هویت Clerk Clerk Authentication

• ناوبری بالا Top Navigation

طرح بندی ها و ناوبری Layouts & Navigation

• طرح بندی داشبورد Dashboard Layout

• آیتم های نوار کناری SideNav Items

• آیتم فعال نوار کناری Active SideNav Item

• ناوبری موبایل واکنشگرا Responsive Mobile Nav

قالب خدمات Services Template

• داده های قالب Template Data

• استفاده از داده های قالب ایستا Using Static Template Data

• رندر قالب ها در داشبورد Render Templates in Dashboard

حالت روشن و تاریک Light & Dark Mode

• تغییر حالت تم روشن و تاریک Light and Dark Mode Theme Toggle

نمایش قالب Display Template

• صفحه قالب پویا Dynamic Template Page

• نمایش فیلدهای فرم قالب Display Template Form Fields

• جزئیات قالب Template Details

• ورودی فرم قالب و رویدادهای تغییر Template Form Input and Change Events

استقرار Deployment

• استقرار در Vercel Deploy to Vercel

ویرایشگر متن غنی Rich Text Editor

• دریافت محتوا از هوش مصنوعی Getting Content from AI

• ویرایشگر متن غنی برای محتوای تولید شده Rich Text Editor for Generated Content

کپی، جستجو و فیلتر کردن Copy, Searching & Filtering

• ویژگی کپی و اعلان های Toast Copy Feature and Toast Notifications

• نوار جستجو و به روز رسانی CSS ناوبری فعال Search Bar and Active Nav CSS Update

• جستجو یا فیلتر کردن قالب Template Searching or Filtering

Mongo DB Mongo DB

• اتصال به MongoDB MongoDB Connection

• طرح پرس و جو Query Schema

• ذخیره پرس و جو در DB Save Query to DB

تاریخچه استفاده Usage History

• صفحه تاریخچه History Page

• دریافت پرس و جوها از Server Action Get Queries Server Action

• بارگذاری تاریخچه Loading History

• بارگذاری پرس و جوهای بیشتر Load More Queries

• جدول تاریخچه History Table

• سازماندهی رابط ها Organize Interfaces

شمارش میزان استفاده از اعتبار Credit Usage Count

• شمارش میزان استفاده از پایگاه داده Usage Count from Database

• بافت استفاده Usage Context

• نوار پیشرفت میزان استفاده از اعتبار Credit Usage Progress Bar

• نوار کناری ثابت در هنگام پیمایش و نوار پیشرفت Fixed SideNav on Scroll and Progress Bar

ناوبری موبایل Mobile Navigation

• ناوبری موبایل Mobile Navigation

• تغییر ناوبری موبایل Mobile Nav Toggle

• مودال بازشو Popup Modal

طرح عضویت Membership Plan

• مودال پیوستن به عضویت Join Membership Modal

• صفحه عضویت Membership Page

• راه اندازی Stripe Stripe Setup

• کامپوننت کارت طرح Plan Card Component

• نمایش طرح در صفحه عضویت Display Plan on Membership Page

تسویه حساب و تراکنش Checkout & Transaction

• مدل تراکنش Transaction Model

• بررسی اشتراک های قبلی کاربران Check Users Previous Subscriptions

• ایجاد جلسه پرداخت Stripe Create Stripe Checkout Session

• رسیدگی به پرداخت Handle Checkout

Webhook Webhook

• Webhook استریپ Stripe Webhook

• نقطه پایانی API وب هوک Webhook API Endpoint

• استقرار و آزمایش وب هوک در تولید Deploy and Try Webhook in Production

اشتراک Subscription

• بارگیری در پرداخت Loading on Checkout

• وضعیت فعلی اشتراک Current Subscription Status

• جلوگیری از تولید محتوا بر اساس وضعیت اشتراک Prevent Content Generation based on Subscribed Status

• محتوای تبلیغاتی مشروط بر اساس وضعیت اشتراک Conditional Promo Content based on Subscribed Status

صورتحساب و تنظیمات Billing & Setting

• جلسه پورتال مشتری Customer Portal Session

• صفحه صورتحساب Billing Page

• صفحه تنظیمات Settings Page

• صفحه هوش مصنوعی تولیدی Generative AI Page

صفحه فرود Landing Page

• کد صفحه فرود Landing Page Code

• تصویر پس زمینه صفحه فرود Landing Page Background Image

• مودال بازشو ورود به سیستم Sign In Popup Modal

کارت های تبلیغاتی Promo Cards

• کد کامپوننت کارت تبلیغاتی Promo Card Component Code

• کامپوننت کارت تبلیغاتی Promo Card Component

• استفاده از کارت تبلیغاتی در صفحه فرود Using Promo Card in Landing Page

• پاورقی Footer

• استقرار نهایی Final Deployment