آموزش جامع و کامل Remix v2: ساخت اپلیکیشن‌های هوش مصنوعی فول استک - آخرین آپدیت

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

مقدمه Introduction

• طرح کلی دوره Course outline

• دمو - چیزی که خواهید ساخت Demo - what you will build

چرا Remix؟ رویکرد SSR، CSR و Hybrid Why Remix? SSR, CSR and Hybrid approach

• مقدمه ماژول Module intro

• نگاهی مختصر به میزبانی برنامه React Brief look at React app hosting

• معرفی رندرینگ سمت سرور (SSR) Introduction to server side rendering (SSR)

• رندرینگ سمت کلاینت (CSR) و رندرینگ سمت سرور (SSR) با هم Client sider rendering (CSR) and server side rendering (SSR) together

• معرفی فریم ورک Remix Introducing Remix framework

شروع به کار Getting started

• مقدمه ماژول Module intro

• ایجاد یک برنامه Remix Create a Remix app

• درک فایل ها و دایرکتوری های پروژه Understand project files and directories

مسیریابی در Remix Routing in Remix

• مقدمه ماژول Module intro

• معرفی مسیریابی Introduction to routing

• مسیر ریشه Root route

• مسیرهای تودرتو، اشتراک گذاری طرح، مسیرهای بدون مسیر Nested routes, layout sharing, pathless routes

• مسیرهای بخش پویا و اختیاری Dynamic and optional segment routes

• مسیرهای Splat Splat routes

• مسیرهای منبع Resource routes

ناوبری Navigation

• مقدمه ماژول Module intro

• ناوبری از طریق کامپوننت Link Navigation via Link component

• NavLinks NavLinks

• ناوبری برنامه ای Programatic navigation

متا و استایل دهی در Remix Meta and Styling in Remix

• مقدمه ماژول Module intro

• تگ های متا در Remix Meta tags in Remix

• استایل دهی با استفاده از استایل شیت محلی Style using local stylesheet

• اضافه کردن فونت های سفارشی Add custom fonts

• استایل دهی با استفاده از کتابخانه CSS بوت استرپ Style using CSS library Bootstrap

تغییر داده ها با Loader و Actions Data mutation with Loader and actions

• مقدمه ماژول Module intro

• معرفی Loaders Introduction to Loaders

• بارگیری داده ها در کامپوننت ها Load data into components

• تنظیم پروژه و افزودن Pico CSS Adjust project & add Pico CSS

• Loaders در مسیرهای تودرتو Loaders in nested routes

• به اشتراک گذاری داده های loader در مسیرها Share loader data in routes

• معرفی فرم ها در Remix Introduction to forms in Remix

• متد Master action و هوک useActionData Master action method and useActionData hook

• فرم (Remix) در مقابل فرم (html) Form (Remix) vs form (html)

• فرم ها در مسیرهای تودرتو Forms in nested routes

• اعتبارسنجی فرم با استفاده از هوک useActionData Form validation using useActionData hook

• Pending UI Pending UI

• اضافه کردن قابلیت نظر دادن به پست وبلاگ Add comment feature to blog post

• Optimistic UI Optimistic UI

• ارسال فرم برنامه ای - هوک useSubmit Programatic form submission - useSubmit hook

• Fetcher و مزایای آن نسبت به Forms Fetcher and advantages over Forms

• مدیریت ارسال چند فرم Handle Multiple form submission

• ارسال و مدیریت فرم همزمان Concurrent form submission and handling

• پارامترهای پرس و جو URL در loaders URL query parameters in loaders

مدیریت خطا Erro handling

• مقدمه ماژول Module intro

• مدیریت خطا در Remix Error handling in Remix

• مدیریت خطاهای پرتاب شده در مسیرها Handle error thrown in routes

• مدیریت خطا در مسیرهای تودرتو Error handling in nested routes

پایگاه داده Database

• مقدمه ماژول Module intro

• راه اندازی پایگاه داده Setup database

• خواندن پست ها از پایگاه داده Read posts from database

• ایجاد پست Create post

• خواندن و ایجاد نظرات Read and create comments

• ویرایش پست Edit post

• حذف پست Delete post

احراز هویت Authentication

• مقدمه ماژول Module intro

• ثبت نام کاربر Signup user

• معرفی Session Session introduction

• ورود و ایجاد Session Login and create session

• محافظت از مسیرها با Session Protect routes with session

• خروج Logout

• ذخیره Session در پایگاه داده Session storage in database

به روز رسانی برنامه وبلاگ Update blog app

• مقدمه ماژول Module intro

• به روز رسانی وبلاگ قسمت-1 Update blog Part-1

• به روز رسانی وبلاگ قسمت-2 Update blog Part-2

• به روز رسانی نوار ناوبری Update Navbar

• به روز رسانی استایل های وبلاگ Update blog styles

کار با فایل ها Working with Files

• مقدمه ماژول Module intro

• آپلود فایل در برنامه Remix File upload in remix app

• ذخیره داده های فایل آپلود شده در پایگاه داده Store Uploaded file data in database

پروژه - تولید کننده وبلاگ هوش مصنوعی Project - AI blog generator

• مقدمه ماژول Module intro

• طراحی نشانگرهای گام Design step indicators

• طراحی ویژگی های هر مرحله Design features of each step

• راه اندازی API اوپن ای آی OpenAI api setup

• تولید محتوا برای عنوان، مقدمه و طرح کلی از طریق هوش مصنوعی Generate content for title, intro and outline via AI

• ترکیب و تولید محتوای نهایی برای پست وبلاگ Combine and generate final content for the blog post

• ادغام ویرایشگر متن Quill برای ویرایش WYSIWYG Integrate Quill text editor to allow WYSIWYG editing

• انتشار و نمایش محتوا در وبلاگ Publish and show content in blog

استقرار Deployment

• مبانی استقرار و ارائه localhost از طریق پروکسی ngrok Basics of deployment and serve localhost via ngrok proxy

• استقرار برنامه در Fly.io و مدیریت برنامه پس از استقرار Deploy app to Fly.io and manage app after deployment