آموزش بوت کمپ کامل نوکست 3: راهنمای فول استک - آخرین آپدیت

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

مقدمه ای بر این مسترکلاس Introduction to this Masterclass

• از این مسترکلاس Nuxt JS چه چیزی به دست خواهید آورد What you are going to get from this Nuxt JS Masterclass

• چگونه در این مسترکلاس موفق شویم How to succeed in this Masterclass

• سرفصل های دوره Course Outlines

• ابزارهایی که در این مسترکلاس به آنها نیاز خواهیم داشت (همه رایگان) The tools that we are going to need in this Masterclass (All free)

• چگونه فایل ها را از تب منابع Udemy دانلود کنیم How to download files from the Udemy Resources tab

• چگونه تمرین های برنامه نویسی را حل کنیم How to solve the Coding Exercises

• به انجمن Discord ما بپیوندید Join our Discord community

• کد منبع کل دوره The source code for the whole course

• یه چیز دیگه!!! One More Thing!!!

مقدمه ای بر NuxtJS Introduction to NuxtJS

• Nuxt JS از نظر مفهومی چیست؟ What is Nuxt JS Conceptually?

• NuxtJS از نظر فنی چیست؟ What is NuxtJS Technically?

• منظور ما از "رندر کردن یک صفحه وب" چیست؟ What do we mean by 'Rendering a web page'?

• رندرینگ سمت سرور در مقابل رندرینگ سمت کلاینت Server-Side Rendering VS Client-Side Rendering

• رندرینگ سمت کلاینت و رندرینگ سمت سرور چگونه کار می کنند؟ How Client-Side Rendering and Server-Side Rendering work?

• یک مثال کدنویسی در رندرینگ سمت سرور A Coding Example on Server-Side Rendering

• رندرینگ یونیورسال چیست؟ و چرا Nuxt از آن استفاده می کند؟ What is Universal Rendering? and why Nuxt uses it?

• منظور ما از "کنترل بیشتر" در رندرینگ سمت کلاینت چیست؟ What do we mean by 'MORE CONTROL' in Client-Side Rendering

• دانش خود را بسنجید: آزمون رندرینگ سمت سرور در مقابل رندرینگ سمت کلاینت Test Your Knowledge: Server-Side Rendering vs. Client-Side Rendering Quiz

• Nuxt در مقابل Vue Nuxt VS Vue

اصول NuxtJS [بخش 1] (نصب، نماها، مسیریابی، استایل دهی و موارد دیگر...) NuxtJS Fundamentals [Part 1] (Installation, Views, Routing, Styling and more...)

• در بخش های آتی [با برچسب اصول NuxtJS] چه کاری انجام خواهیم داد What are we going to do in the upcoming sections [Labeled NuxtJS Fundamentals]

• نصب: راه اندازی هر پروژه Nuxt Installation: Setting up any Nuxt Project

• نصب برخی افزونه های مفید VScode [اختیاری] Installing some useful VScode extensions [Optional]

• پیکربندی در Nuxt JS Configuration in Nuxt JS

• Nuxt Devtools Nuxt Devtools

• نماها: فایل app.vue Views: app.vue file

• تمرین برنامه نویسی (ایجاد یک برنامه "Hello World") {اعلان} Coding Exercise (Create a "Hello World" app) {Prompt}

• تمرین برنامه نویسی (ایجاد یک برنامه "Hello World") {راه حل} Coding Exercise (Create a "Hello World" app) {SOLUTION}

• نماها: کامپوننت های Vue Views: Vue Components

• تمرین برنامه نویسی (ایجاد یک کامپوننت NavBar) {اعلان} Coding Exercise (Creating a NavBar Component) {Prompt}

• تمرین برنامه نویسی (ایجاد یک کامپوننت NavBar) {راه حل} Coding Exercise (Creating a NavBar Component) {Solution}

• درک خود از کامپوننت های Vue را بررسی کنید Examine your understanding of Vue Components

• مسیریابی: صفحات Routing: Pages

• مسیریابی: گروه های مسیر Routing: Route groups

• تمرین برنامه نویسی (تعریف صفحات برای آیتم های NavBar) {اعلان} Coding Exercise (Defining Pages for NavBar Items) {Prompt}

• تمرین برنامه نویسی (تعریف صفحات برای آیتم های NavBar) {راه حل} Coding Exercise (Defining Pages for NavBar Items) {Solution}

• درک خود از صفحات Nuxt را بررسی کنید Examine your understanding of Nuxt Pages

• مسیریابی: ناوبری Routing: Navigation

• تمرین برنامه نویسی (اضافه کردن لینک های ناوبری به آیتم های NavBar) {اعلان} Coding Exercise (Adding Navigation Links to NavBar Items) {Prompt}

• تمرین برنامه نویسی (اضافه کردن لینک های ناوبری به آیتم های NavBar) {راه حل} Coding Exercise (Adding Navigation Links to NavBar Items) {Solution}

• مسیریابی: پارامترهای مسیر Routing: Route parameters

• مسیریابی: پارامترهای مسیر ($route) Routing: Route parameters ($route)

• مسیریابی: پارامترهای مسیر (گرفتن همه مسیرها) Routing: Route parameters (catch all routes)

• تمرین برنامه نویسی (ایجاد یک مسیر برای تبریک های شخصی) {اعلان} Coding Exercise (Create a Route for Personalized Greetings) {Prompt}

• تمرین برنامه نویسی (ایجاد یک مسیر برای تبریک های شخصی) {راه حل} Coding Exercise (Create a Route for Personalized Greetings) {Solution}

• پارامترهای مسیر Nuxt 3: یک بررسی سریع Nuxt 3 Route Parameters: A Quick Check

• مسیریابی: میان افزار مسیر (بخش 1) Routing: Route middleware (Part 1)

• مسیریابی: میان افزار مسیر (بخش 2) Routing: Route middleware (Part 2)

• مسیریابی: میان افزار مسیر (بخش 3) Routing: Route middleware (Part 3)

• مسیریابی: میان افزار مسیر (بخش 4) Routing: Route middleware (Part 4)

• آزمون اصول میان افزار Nuxt 3 Nuxt 3 Middleware Fundamentals Quiz

• مسیریابی: اعتبارسنجی مسیر Routing: Route validation

• نماها: طرح بندی ها Views: Layouts

• بارگذاری تنبل در Nuxt 3 (واردات پویا) Lazy Loading in Nuxt 3 (Dynamic Imports)

• دارایی ها Assets

• استایل دهی Styling

• سئو و فراداده SEO and Metadata

• انتقال ها Transitions

اصول NuxtJS [بخش 2] (واکشی داده) NuxtJS Fundamentals [Part 2] (Data Fetching)

• واکشی داده: واکشی داده چیست؟ Data Fetching: What is Data Fetching?

• API چیست (یک ویدیو از کانال YouTube ما) [سخنرانی اختیاری] What is an API ( A video from our YouTube Channel ) [Optional Lecture]

• واکشی داده: useFetch() composable (چگونه کار می کند؟) Data Fetching: useFetch() composable (How does it work?)

• واکشی داده: useFetch() composable (اضافه کردن URL های پویا) Data Fetching: useFetch() composable (Adding Dynamic URLS)

• واکشی داده: useFetch() composable (حذف درخواست های تکراری واکشی) Data Fetching: useFetch() composable (De-Duplicating Fetch Requests)

• واکشی داده: useFetch() composable (اضافه کردن یک URL پایه) Data Fetching: useFetch() composable (Adding a Base URL)

• واکشی داده: useFetch() composable (انجام یک درخواست POST) Data Fetching: useFetch() composable (Doing a POST Request)

• واکشی داده: useFetch() composable (انجام یک درخواست PUT) Data Fetching: useFetch() composable (Doing a PUT Request)

• واکشی داده: useFetch() composable (انجام یک درخواست PATCH) Data Fetching: useFetch() composable (Doing a PATCH Request)

• واکشی داده: useFetch() composable (اضافه کردن query یا params) Data Fetching: useFetch() composable (Adding query or params)

• واکشی داده: useFetch() composable (اجتناب از واکشی داده در سرور) Data Fetching: useFetch() composable(Avoid fetching data on the server)

• واکشی داده: useFetch() composable (گزینه lazy) Data Fetching: useFetch() composable (lazy option)

• واکشی داده: useFetch() composable (گزینه immediate) Data Fetching: useFetch() composable (immediate option)

• واکشی داده: useFetch() composable (گزینه default) Data Fetching: useFetch() composable (default option)

• واکشی داده: useFetch() composable (گزینه transform) Data Fetching: useFetch() composable (transform option)

• واکشی داده: useFetch() composable (گزینه pick) Data Fetching: useFetch() composable (pick option)

• واکشی داده: useFetch() composable (گزینه watch) Data Fetching: useFetch() composable (watch option)

• واکشی داده: useFetch() composable (گزینه getCachedData) Data Fetching: useFetch() composable (getCachedData option)

• واکشی داده: useFetch() composable (گزینه deep) Data Fetching: useFetch() composable (deep option)

• مشکل گزینه deep حل شد [خبر خوب] The deep option issue is fixed [Good News]

• واکشی داده: useFetch() composable (مقادیر بازگشتی) Data Fetching: useFetch() composable (Return Values)

• تمرین برنامه نویسی (ایجاد یک برنامه تبدیل ارز با استفاده از useFetch()) {اعلان} Coding Exercise (Create a currency converter App using useFetch() ) {Prompt}

• تمرین برنامه نویسی (ایجاد یک برنامه تبدیل ارز با استفاده از useFetch()) {راه حل} Coding Exercise (Create a currency converter App using useFetch() ) {Solution}

• آیا شما یک حرفه ای در useFetch Nuxt 3 هستید؟ Are You a Nuxt 3 useFetch Pro?

• واکشی داده: کتابخانه $fetch() Data Fetching: $fetch() Library

• واکشی داده: useAsyncData() composable Data Fetching: useAsyncData() composable

• مهارت های واکشی داده Nuxt 3 خود را امتحان کنید (انتخاب چند گزینه ای) Put Your Nuxt 3 Data Fetching Skills to the Test (Multiple Select)

اصول NuxtJS [بخش 3] (مدیریت وضعیت) NuxtJS Fundamentals [Part 3] (State Management)

• useState() Composable useState() Composable

• وضعیت اشتراکی Shared State

• ایجاد یک Composable وضعیت اشتراکی Creating a shared State Composable

• وضعیت shallowRef shallowRef State

• تمرین برنامه نویسی (ساخت یک برنامه Todo Web با استفاده از useState()) {اعلان} Coding Exercise (Build a Todo Web App using useState()) {Prompt}

• تمرین برنامه نویسی (ساخت یک برنامه Todo Web با استفاده از useState()) {راه حل} Coding Exercise (Build a Todo Web App using useState()) {Solution}

• آیا می توانید useState() Nuxt 3 را مدیریت کنید؟ در آزمون شرکت کنید! Can You Handle Nuxt 3 useState()? Take the Quiz!

اصول NuxtJS [بخش 4] (رسیدگی به خطا) NuxtJS Fundamentals [Part 4] (Error Handling)

• صفحات خطا Error Pages

• createError() createError()

• clearError() clearError()

• رسیدگی به خطای Nuxt 3: دانش خود را امتحان کنید! Nuxt 3 Error Handling: Test Your Knowledge!

اصول NuxtJS [بخش 5] (سرور Nitro) NuxtJS Fundamentals [Part 5] (Nitro Server)

• دایرکتوری server The server directory

• مسیرهای سرور Server Routes

• پارامترهای مسیر سرور Server Route Parameters

• گرفتن همه مسیرها در سمت سرور Catching all routes on the server-side

• رسیدگی به بدنه Body Handling

• پارامترهای Query Query Parameters

• تطبیق متد HTTP Matching HTTP Method

• میان افزار سرور Server Middleware

• پیکربندی Runtime و فایل env. Runtime Config and .env file

• نکته مهم در مورد پیکربندی runtime و فایل env. Important note on runtime config and .env file

• کوکی های درخواست Request Cookies

• ارسال تغییر مسیر Sending Redirect

اصول NuxtJS [بخش 6] (تست کردن در Nuxt JS) NuxtJS Fundamentals [Part 6] (Testing in Nuxt JS)

• چرا تست کردن بسیار مهم است؟ Why Testing is very important?

• اضافه کردن تمام ابزارها و کتابخانه های تست Adding all test utilities and libraries

• استفاده از Vitest Using Vitest

• استفاده از ابزارهای تست Vue Using Vue Test Utilities

• استفاده از ابزارهای تست Nuxt Using Nuxt Test Utilities

اصول NuxtJS [بخش 7] (احراز هویت کاربران در Nuxt 3 با استفاده از Supabase) NuxtJS Fundamentals [Part 7] ( Authentication of Users in Nuxt 3 using Supabase)

• احراز هویت در توسعه وب چیست؟ What is Authentication in Web Development?

• Supabase چیست؟ What is supabase?

• احراز هویت با Supabase از نظر مفهومی چگونه کار می کند How does Authentication with Supabase works Conceptually

• برقراری ارتباط بین برنامه Nuxt ما و Supabase Establishing the connection between our Nuxt app and Supabase

• به کاربران اجازه ثبت نام در برنامه Nuxt ما با استفاده از Supabase را می دهیم Allowing users to Register to our Nuxt App using Supabase

• به کاربران اجازه خروج از برنامه Nuxt ما با استفاده از Supabase را می دهیم Allowing users to Logout from our Nuxt App using Supabase

• به کاربران اجازه ورود به برنامه Nuxt ما با استفاده از Supabase را می دهیم Allowing users to Login to our Nuxt App using Supabase

• به کاربران اجازه ورود با حساب های Google یا GitHub خود را می دهیم Allowing users to Login with their Google or GitHub Accounts

اصول NuxtJS [بخش 8] (استقرار برنامه های Nuxt JS) NuxtJS Fundamentals [Part 8] ( Deployment of Nuxt JS Apps )

• اجرای بیلد production به صورت محلی بر روی کامپیوتر شما Running the production build locally on your computer

• استقرار هر برنامه Nuxt در اینترنت Deploying any Nuxt App to the Internet

ساخت و استقرار یک برنامه اطلاعات فیلم (Cinemate) با استفاده از Nuxt 3 و Tailwind CSS Build and Deploy a Movie Info App (Cinemate) using Nuxt 3 and Tailwind CSS

• در این پروژه چه چیزی خواهیم ساخت What are we going to build in this project

• راه اندازی پروژه Setting up the Project

• کاوش در وب سایت Movie DB و دریافت کلید API رایگان خود Exploring the Movie DB website and getting our free API key

• تعریف صفحات برنامه ما Defining the Pages of our app

• تعریف کامپوننت های برنامه ما Defining the components of our app

• تعریف طرح بندی های برنامه ما Defining the layouts of our app

• ایجاد کامپوننت MovieCard Creating the MovieCard component

• ایجاد کامپوننت SeriesCard Creating the SeriesCard component

• ایجاد طرح بندی پیش فرض پروژه Creating the default layout of the project

• واکشی داده های "کشف فیلم ها و سریال ها" در سمت سرور Fetching the 'Discover movies and series' data on the server-side

• ایجاد صفحه اصلی برنامه [صفحه کشف فیلم ها] Creating the home page of the App [Discover Movies Page]

• واکشی داده های "در حال پخش" در سمت سرور Fetching the 'Now Playing' data on the server-side

• ایجاد صفحه ای که داده های "در حال پخش" را در سمت کلاینت نمایش می دهد Creating the page that will display the 'Now Playing' data on the client-side

• واکشی داده های "محبوب" در سمت سرور Fetching the 'popular' data on the server-side

• ایجاد صفحه ای که داده های "محبوب" را در سمت کلاینت نمایش می دهد Creating the page that will display the 'popular' data on the client-side

• واکشی داده های "جستجو" در سمت سرور Fetching the 'search' data on the server-side

• ایجاد صفحه ای که نتایج جستجو را در سمت کلاینت نمایش می دهد Creating the page that will display the search results on the client-side

• واکشی داده های "برترین امتیاز" در سمت سرور Fetching the 'Top Rated' data on the server-side

• ایجاد صفحه ای که داده های "برترین امتیاز" را در سمت کلاینت نمایش می دهد Creating the page that will display the 'Top Rated' data on the client-side

• واکشی داده های "در حال آمدن" در سمت سرور Fetching the 'Upcoming' data on the server-side

• ایجاد صفحه ای که داده های "در حال آمدن" را در سمت کلاینت نمایش می دهد Creating the page that will display the 'Upcoming' data on the client-side

• ایجاد صفحه ای که یک آیتم واحد را نمایش می دهد Creating the page that will display a single item

• استقرار برنامه Cinemate در اینترنت در Netlify Deploying Cinemate App to the Internet on Netlify

• رفع یک باگ در برنامه Cinemate Fixing a Bug in Cinemate App

• کد منبع برنامه Cinemate (در Github) The source code for Cinemate App (on Github)

ساخت و استقرار یک سرویس API (Randoms) با مستندات با استفاده از Nuxt & Docus Build and Deploy an API Service (Randoms) with documentation using Nuxt & Docus

• در این پروژه چه چیزی خواهیم ساخت What are we going to build in this project

• راه اندازی پروژه Setting up the project

• راه اندازی endpoints API ما Setting up our API endpoints

• کاوش api ninjas و دریافت کلید API Exploring api ninjas and getting an API key

• celebrities API Endpoint celebrities API Endpoint

• posts API Endpoint (دریافت همه پست ها) posts API Endpoint (Get all posts)

• posts API Endpoint (اضافه کردن یک پست جدید) posts API Endpoint (adding a new post)

• posts API Endpoint (دریافت یک پست خاص) posts API Endpoint (getting a specific post)

• posts API Endpoint (ویرایش یک پست خاص) posts API Endpoint (editing a specific post)

• posts API Endpoint (ویرایش بخشی از یک پست خاص) posts API Endpoint (editing part of a specific post)

• posts API Endpoint (حذف یک پست) posts API Endpoint (deleting a post)

• products API Endpoints (دریافت همه محصولات) products API Endpoints (Get all products)

• products API Endpoint (اضافه کردن یک محصول جدید) products API Endpoint (adding a new product)

• products API Endpoint (دریافت یک محصول خاص) products API Endpoint (getting a specific product)

• products API Endpoint (ویرایش یک محصول خاص) products API Endpoint (Editing a specific product)

• products API Endpoint (دریافت همه دسته بندی ها) products API Endpoint (Getting all categories)

• products API Endpoint (دریافت یک نوع دسته بندی خاص) products API Endpoint (Getting a specific category type)

• نوشتن مستندات برای API های خود با استفاده از markdown Writing the documentation for our APIs using markdown

• استقرار برنامه Randoms در Netlify Deploying Randoms App to Netlify

• کد منبع برنامه Randoms (در Github) The source code for Randoms App (on Github)

ساخت و استقرار یک برنامه تجارت الکترونیک کاملاً کاربردی (Shopiverse) با استفاده از Nuxt 3 Build and Deploy a fully functioning E-commerce App (Shopiverse) using Nuxt 3

• در این پروژه چه چیزی خواهیم ساخت What are we going to build in this project

• راه اندازی پروژه (وابستگی ها و راه اندازی پایگاه داده) Setting up the Project (The dependencies and the Database setup)

• رفع برخی مشکلات Fixing some issues

• تعریف کامپوننت های UI برنامه Defining the UI components of the app

• ایجاد کامپوننت Header Creating the Header Component

• ایجاد کامپوننت PublicNav Creating the PublicNav Component

• ایجاد کامپوننت UserNav Creating the UserNav Component

• ایجاد کامپوننت ProductComp Creating the ProductComp Component

• ایجاد کامپوننت Loading Creating the Loading Component

• ایجاد طرح بندی پیش فرض برنامه (از جمله اعمال حالت تاریک) Creating the Default Layout of the App (Including applying the dark mode)

• ایجاد وضعیت اشتراکی برنامه (وضعیت سبد خرید) Creating the shared state of the App (The Shopping Cart state)

• ایجاد صفحه اصلی برنامه Creating the home page of the App

• ایجاد endpoint API برای واکشی داده های محصولات Creating the API endpoint to fetch products data

• ایجاد صفحه ثبت نام Creating the Register Page

• ایجاد صفحه تأیید Creating the Confirm page

• ایجاد صفحه خروج Creating the Logout Page

• ایجاد صفحه ورود Creating the login page

• ایجاد توابع ورود با Google و GitHub Creating login with Google and GitHub functions

• ایجاد صفحه جستجو Creating the Search Page

• واکشی نتایج جستجو در سمت سرور Fetching the search results on the server-side

• ایجاد صفحه درباره ما با استفاده از ChatGpt Creating the About Page using ChatGpt

• ایجاد صفحه ای برای نمایش یک آیتم واحد Creating the Page to display a single item

• ایجاد ویژگی "فروش در Shopiverse" (بخش 1) Creating the 'Sell on Shopiverse' Feature (Part 1)

• ایجاد ویژگی "فروش در Shopiverse" (بخش 2) Creating the 'Sell on Shopiverse' Feature (Part 2)

• ایجاد صفحه سبد خرید Creating the Cart Page

• [تمرین برنامه نویسی] (نمایش اطلاعات حساب کاربری برای یک کاربر وارد شده) [Coding Exercise] (Display the Account information for a logged-in user)

• یکپارچه سازی پرداخت Stripe Integrating Stripe Payment

• استقرار برنامه Shopiverse در اینترنت در Netlify Deploying Shopiverse App to the Internet on Netlify

• کد منبع برنامه Shopiverse (در Github) The source code for Shopiverse App (on Github)

پایان Outro

• مرحله بعدی برای شما چیست What's next for you

• متشکرم!! Thank You !!

• مستندات رسمی Nuxt 3 Nuxt 3 Official Documentaion

• سخنرانی جایزه Bonus Lecture