آموزش توسعه اپلیکیشن وب و موبایل فول استک | پروژه با MERN Stack - آخرین آپدیت

دانلود Full Stack Web & Mobile App Development | Mern Stack Project

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

توسعه Full Stack وب و اپلیکیشن موبایل با React JS، React Native، NodeJS، MongoDB | پروژه‌های MERN Stack

در این دوره جامع، به دنیای شگفت‌انگیز توسعه Full Stack وب و اپلیکیشن موبایل با استفاده از MERN Stack شیرجه بزنید. یادگیری React JS و React Native کلید ساخت اپلیکیشن‌های تک‌صفحه‌ای (SPA) مدرن و اپلیکیشن‌های موبایل نیتیو است.

آنچه خواهید آموخت:

  • نحوه ساخت اپلیکیشن‌های تک‌صفحه‌ای با Full Stack Web Development با React JS، NodeJS، MongoDB
  • اتصال به API خارجی با ReactJS
  • ایجاد کامپوننت‌های قابل استفاده مجدد React
  • راه‌اندازی محیط مجازی برای React و ReactNative
  • اجرای شبیه‌سازهای اندروید و iOS برای React و React Native
  • آشنایی با سینتکس JSX و عبارات در React JS
  • استفاده از سینتکس ES6 در React
  • نمایش محتوا در شبیه‌ساز با React
  • مدیریت ورودی‌های کاربر، فرم‌ها و رویدادها در React
  • استفاده از React Portals برای رندر کردن فرزندان خارج از سلسله مراتب DOM
  • کار با React JS Hooks و Context برای توسعه مدرن برنامه‌های وب با React Js
  • ایجاد ساختارهای Hooks و Context
  • پیاده‌سازی مسیریابی (Routing) با React Router
  • جابجایی بین صفحات مختلف در React
  • انتقال داده بین صفحات مختلف با React Navigation
  • تکنیک‌های کدنویسی برای توسعه کارآمد با React
  • ساخت وب اپلیکیشن‌های سریع و کاربرپسند با React
  • یادگیری Node.js: تکنولوژی سمت سرور با رشد سریع و درک نحوه کار آن
  • بهبود مهارت‌ها، یافتن شغل جدید و ساخت اپلیکیشن‌های وب قدرتمند و پایدار با NodeJS
  • یادگیری مفاهیم کلیدی NodeJS
  • ساخت سرور و درک نحوه کار آن
  • درک و استفاده از Event Emitter
  • کار با Buffers، Streams و Pipes
  • یادگیری مسیریابی با NodeJS
  • آشنایی با MongoDB: پایگاه داده NoSQL محبوب و اسناد-محور
  • نصب MongoDB
  • درک منطق ذخیره‌سازی داده در MongoDB
  • کار با Mongoose JS: محبوب‌ترین کتابخانه مدل‌سازی داده شیء‌گرا برای MongoDB
  • اجرای عملیات CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) با نوشتن کوئری‌ها
  • درک دستورات ترمینال برای مدیریت پایگاه داده
  • ویژگی‌های پیشرفته MongooseJS
  • آشنایی با Mocha: بهترین فریم‌ورک تست برای NodeJS
  • یادگیری آسان کار با MongoDB
  • توسعه Full Stack Web با استفاده از MERN
  • ساخت API بک‌اند با Node و Express
  • کار با React Hooks، Async/Await و شیوه‌های مدرن
  • ساخت وب‌سایت شبکه‌های اجتماعی قدرتمند و کاملاً کاربردی با MERN
  • مدیریت فرم‌ها در React، Node.js، Express JS
  • آشنایی با Redux (بهترین ابزار مدیریت وضعیت)
  • استایل‌دهی با Material-ui
  • پیاده‌سازی احراز هویت JWT
  • آشنایی با مفاهیم استقرار (Deployment)
  • پروژه‌های MERN Stack جامع با React JS، Node.js، Express JS، MongoDB
  • Mern Full Stack
  • توسعه وب با MERN Stack Project
  • React Native: ساخت اپلیکیشن‌های نیتیو iOS و اندروید با دانش React
  • پوش نوتیفیکیشن‌ها، Hooks، Redux در React Native

محتوای دوره:

این دوره برای همه سطوح مناسب است و شما را از مبتدی تا پیشرفته همراهی می‌کند. یادگیری React قدم به قدم با نمایش‌های عملی خواهد بود. شما با React، React Native، React Navigation، Hooks و Context، همچنین NodeJS و MongoDB به طور کامل آشنا می‌شوید.

با Expo app قادر خواهید بود اپلیکیشن‌های خود را روی دستگاه موبایل واقعی اجرا کنید. مفاهیمی مانند JSX، سیستم props و سیستم state برای شما کاملاً روشن خواهد شد.

ما در این دوره پروژه‌هایی مانند Instaverse MERN Stack Project را خواهیم ساخت که یک پروژه کامل اپلیکیشن شبکه‌های اجتماعی است.

چرا این دوره را انتخاب کنید؟

کیفیت تدریس بالا توسط توسعه‌دهندگان باتجربه OAK Academy.

بدون نیاز به دانش قبلی! دوره از مبانی شروع می‌شود و با تمرین‌های عملی همراه است.

ابزارهای رایگان و محبوب استفاده می‌شوند.

دسترسی مادام‌العمر به دوره و پشتیبانی سریع و دوستانه.

گواهی پایان دوره قابل دانلود.

سوالات متداول:

React چیست؟ کتابخانه جاوا اسکریپت برای ساخت کامپوننت‌های رابط کاربری وب.

React برای چه کاری استفاده می‌شود؟ ساخت رابط‌های کاربری پویا برای اپلیکیشن‌های تک‌صفحه‌ای (SPA).

React Native چیست؟ فریم‌ورکی برای ساخت اپلیکیشن‌های موبایل نیتیو برای اندروید و iOS با جاوا اسکریپت.

Node.js چیست؟ محیط زمان اجرای جاوا اسکریپت خارج از مرورگر برای ساخت اپلیکیشن‌های سمت سرور.

MongoDB چیست؟ پایگاه داده NoSQL مبتنی بر سند.

پیش‌نیازها:

  • کامپیوتر (ویندوز، مک یا لینوکس)
  • آشنایی با مبانی JavaScript، HTML، CSS
  • اشتیاق به یادگیری React، React Native، NodeJS، MongoDB و MERN Stack Projects

همین حالا به دوره Full Stack Web & Mobile App Development | MERN Stack Project بپیوندید و اولین قدم را در دنیای توسعه وب و موبایل بردارید!


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

ری اکت چیست و چرا باید از ری اکت استفاده کنیم؟ What Is React and Why Should We Use React?

  • چرا به یک کتابخانه یا فریمورک نیاز داریم Why a Library or Framework Is Needed

  • ری اکت چیست؟ What is React?

  • چرا باید از ری اکت استفاده کنیم Why Should we use React

  • فایل های پروژه پشته MERN MERN Stack Project Files

  • آزمون quiz

نگاهی اولیه به ری اکت First Look at React

  • ری اکت در مقابل جاوا اسکریپت معمولی React vs Vanilla JavaScript

  • راه اندازی محیط توسعه ما Setting up our Development environment.

  • نگاهی به مستندات رسمی ری اکت Look at React Official Documentation

  • ری اکت خالص Pure React

  • راه اندازی پروژه با create-react-app Setting up a project with create-react-app

  • آزمون quiz

کار با کامپوننت ها، props و JSX Working With Components Props and JSX

  • رندر کردن کامپوننت ریشه Rendering the root component

  • اشکال زدایی Debugging

  • ایجاد و استفاده مجدد از کامپوننت Creating and reusing a component

  • JSX چیست What is JSX

  • ایجاد کامپوننت های بیشتر Creating more component

  • منطق جاوا اسکریپت در کامپوننت JavaScript logic in component

  • جداسازی دغدغه ها Separation of concerns

  • استایل دهی به برنامه های ری اکت Styling React applications

  • Props Props

  • Props و جریان داده یک طرفه Props & one-way data flow

  • رندر کردن لیست Rendering list

  • رندرینگ شرطی ۱ Conditional Rendering 1

  • رندرینگ شرطی ۲ Conditional Rendering 2

  • استخراج JSX به یک کامپوننت جدید Extraction JSX into a new component

  • دستور props Destructuring props

  • قطعات ری اکت React fragments

  • کلاس های پویا Dynamic Classes

  • آزمون ری اکت جی اس، پشته مرن، توسعه وب فول استک Quiz React JS, Mern Stack, Full Stack Web Development

وضعیت، رویدادها و فرم ها State, Events, and Forms

  • مرور کلی بخش Section Overview

  • بیایید یک پروژه جدید بسازیم Let’s build a new project

  • مدیریت رویدادها Handling Events

  • وضعیت چیست؟ What is state?

  • ایجاد وضعیت با useState Creating a state with useState

  • تنظیم دستی وضعیت! Set state manually!

  • اضافه کردن دکمه باز و بسته Adding open-close button

  • ابزارهای توسعه دهنده ری اکت React Developer Tools

  • به روز رسانی وضعیت بر اساس وضعیت فعلی Updating state based on current state

  • آزمون quiz

لیست خرید و مبانی مدیریت وضعیت Shopping List and Fundamentals of State Management

  • معرفی برنامه Introduction of the Application

  • ایجاد طرح بندی Creating the layout

  • رندر کردن کامپوننت لیست Rendering a list component

  • رندر کردن کامپوننت فرم Rendering a form component

  • عناصر کنترل شده Controlled Elements

  • بیایید به وضعیت فکر کنیم Let’s think about state

  • بالا بردن وضعیت Lifting state up

  • حذف یک آیتم Deleting an item

  • به روز رسانی یک آیتم Updating an item

  • محاسبه مقادیر بسته Calculating package quantities

  • مرتب سازی آیتم ها Shorting items

نمونه برنامه – کارت زبان Sample Application – Language Card

  • معرفی برنامه Application Introduction

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

  • ساختار کامپوننت ها Components Structure

  • شروع به استفاده از داده ها Let’s start using data

  • شروع به ایجاد ساختار کارت Let’s start Creating the card structure

کامپوننت مبتنی بر کلاس و هوک های چرخه حیات Class-Based Component and LifeCycles Hooks

  • کامپوننت مبتنی بر کلاس Class-Based Component

  • مثال شمارنده با کامپوننت مبتنی بر کلاس Counter example with Class-Based component

  • کار با مدیریت کننده های رویداد Working with event handlers

  • کامپوننت مبتنی بر کلاس در مقابل کامپوننت تابعی Class-Based component vs Functional component

  • آزمون Quiz

هوک useEffect و دریافت داده useEffect Hook and Data Fetching

  • هوک useEffect useEffect Hook

  • مثال شمارنده با هوک useEffect Counter example with useEffect hook

  • آرایه وابستگی Dependency Array

  • تابع پاکسازی Clean-Up function

  • useState + useEffect + دریافت داده useState + useEffect + Data fetching

  • ساختار پروژه Project Structure

  • ساختار و استایل کامپوننت Component structure & styling

  • استفاده از تابع ناهمزمان و axios Using an async function & axios

  • آزمون quiz

هوک سفارشی و رفرنس ها Custom Hook and Refs

  • مرور کلی بخش Section Overview

  • رفرنس ها Refs

  • چرا از هوک useRef استفاده می کنیم Why we use useRef Hook

  • رفرنس برای انتخاب عناصر DOM Refs to select DOM elements

  • هوک سفارشی چیست What is this Custom Hook

  • مثال شمارنده هوک سفارشی Custom Hook counter example

  • آزمون quiz

ری اکت راوِتر React Router

  • مرور کلی بخش Section Overview

  • ری اکت راوِتر چیست What is React-Router

  • ایجاد یک برنامه معمولی Creating a regular application

  • اضافه کردن ری اکت راوِتر به پروژه Adding a React-Router to the project

  • لینک و نَولینک Link & NavLink

  • رندر سمت سرور و رندر سمت کلاینت Server side rendering & Client side rendering

  • ایجاد کامپوننت ها و طرح بندی برنامه Creation of components & Application layout

  • طرح بندی و استایل کامپوننت و صفحات Component & Pages Layout and Styling

  • طرح بندی و استایل کامپوننت ها و صفحات ۲ Components & Pages Layout and Styling 2

  • صفحه پرسنل Personnel Page

  • مسیریابی پویا Dynamic routing

  • useParams و useLocation useParams & useLocation

  • صفحه جزئیات پرسنل PersonnelDetail Page

  • useNavigate در مقابل Link useNavigate vs Link

  • صفحه یافت نشد و Navigate notFound page & Navigate

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

  • بارگذاری Loading

  • مسیرهای تودرتو Nested Routes

  • مسیر مطلق و مسیر نسبی Absolute Path & Relative Path

  • روتر خصوصی Private Router

  • آزمون quiz

پروژه برنامه دستور پخت RecipeApp Project

  • معرفی پروژه و منبع API Project Introduction & API source

  • ساختار فایل File structure

  • ایجاد مسیرها Creation of Routes

  • شروع به ایجاد صفحات Let’s start creating the pages

  • نوبار Navbar

  • صفحه اصلی Home Page

  • سرصفحه Header

  • کارت Card

  • صفحه جزئیات Detail Page

  • ورود و خروج Login & Logout

Context API Context API

  • مرور کلی بخش Section Overview

  • چرا به کتابخانه های مدیریت وضعیت نیاز داریم Why State Management Libraries Are Needed

  • Context API Context API

  • مراحل استفاده از Context API Stages of Using the Context API

  • شروع به استفاده از Context API Let’s Start Using the Context API

  • ارائه دهنده Context Context Provider

  • مدیریت داده ها Data Management

  • ایجاد چندین Context Creating Multiple Context

  • LocaleStorage LocaleStorage

  • استفاده از هوک های سفارشی Using Custom Hooks

  • آزمون Quiz

useReducer useReducer

  • مرور کلی بخش Section Overview

  • useReducer چیست What is useReducer

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

  • useReducer useReducer

  • شروع به استفاده از تابع کاهنده Let's Start Using the Reducer Function

  • کاهنده شمارنده Counter Reducer

  • آزمون Quiz

پروژه Context API Context API Project

  • مرور کلی بخش Section Overview

  • معرفی پروژه و منبع API Project Introduction and API Source

  • راه اندازی پروژه و ساختار فایل Project Setup and File Structure

  • ایجاد ساختار مسیر Creating the Route Structure

  • سرصفحه و نوبار Header and Navbar

  • صفحه جستجو Search Page

  • کارت اخبار News Card

  • صفحه اصلی Home Page

  • تم و Context Context and Theme

  • اسلایدر Slider

  • صفحه دسته بندی ها Categories Page

  • فیلتر بر اساس کشور Filtering by Country

  • استخراج داده با هوک سفارشی Data Extraction With Custom Hook

Redux Redux

  • مرور کلی بخش Section Overview

  • Redux Redux

  • پوشه Redux Redux Folder

  • کامپوننت شمارنده و createStore Counter Component and createStore

  • useDispatch و useSelector useDispatch and useSelector

  • چگونه از پوشه ها با Redux استفاده کنیم How to Use Folders With Redux

  • combineReducer combineReducer

  • کامپوننت Todo Todo Component

  • Todo Reducer Todo Reducer

  • پاک کردن اکشن Clear Action

  • آزمون Quiz

Redux Toolkit Redux Toolkit

  • مرور کلی بخش Section Overview

  • Redux Toolkit Redux Toolkit

  • شروع به استفاده از Redux Toolkit Let’s Start Using Redux Toolkit

  • استفاده از اکشن ها در Redux Toolkit Using Actions in Redux Toolkit

  • مثال Todo Todo Example

  • Todo Slice Todo Slice

  • addTodo و deleteTodo addTodo & deleteTodo

  • Redux Thunk چیست What is Redux Thunk

  • شروع به استفاده از Thunk در Redux Toolkit Let’s Start Using Thunk in Redux Toolkit

  • کامپوننت پست Post Component

  • آزمون Quiz

پروژه Redux Toolkit Redux Toolkit Project

  • معرفی پروژه Project Introduction

  • ایجاد ساختار فایل Creation of File Structure

  • ساختار مسیر و نوبار Route Structure and Navbar

  • صفحه ورود Login Page

  • authSlice authSlice

  • newsSlice newsSlice

  • صفحه اخبار و ساختار کارت News Page and Card Structure

  • آنچه در این برنامه انجام دادیم What we did in this Application

React Router v6.4+ React Router v6.4+

  • مرور کلی بخش Section Overview

  • راه اندازی ساختار فایل Setting up a file structure

  • React Router v6.4+ React Router v6.4+

  • ساخت طرح بندی برنامه و مسیرهای تودرتو Building the App Layout & Nested Routes

  • دریافت داده با لودرها Fetching data with loaders

  • useNavigation useNavigation

  • مدیریت خطا Error Handling

  • مسیر پویا Dynamic Path

  • آزمون Quiz

Redux Toolkit با React Router v6.4+ Redux Toolkit With React Router v6.4+

  • مرور کلی بخش Section Overview

  • معرفی پروژه و منبع API Project Introduction and API Resource

  • ایجاد پروژه با Vite Creation of the Project With Vite

  • ایجاد ساختار پوشه Creating the Folder Structure

  • ایجاد ساختار مسیر Creation of Route Structure

  • نوبار Navbar

  • صفحه ورود Login Page

  • مدیریت وضعیت کاربر با Redux Toolkit Manage User State With Redux Toolkit

  • مدیریت داده های فیلم با Redux Tollkit Manage Movies Data With Redux Tollkit

  • صفحه فیلم ها Movies Page

  • استفاده از لودر در صفحه جزئیات فیلم Using Loader in MovieDetail Page

راه اندازی برای ویندوز برای React Native Setup For Windows for React Native

  • ابزارهای رایگان برای ویندوز Free Tools For Windows

  • راه اندازی ویندوز برای React Native Windows Setup for React Native

  • نحوه راه اندازی امولاتور در Android Studio How To Start Emulator in Android Studio

راه اندازی برای OSX Setup For OSX

  • ابزارهای رایگان برای IOS Free Tools for IOS

  • راه اندازی OSX برای React Native OSX Setup for React Native

  • راه اندازی امولاتور برای پروژه React Native Start The Emulator for React Native project

React Native و JSX React Native and JSX

  • نحوه ایجاد برنامه با React Native How To Create an App with React Native

  • فایل های پروژه Project Files

  • مشاهده محتوا در امولاتور See Content On Emulator

  • چرا به React و React-Native نیاز داریم؟ Why Do We Need React and React-Native?

  • سینتکس Es6 (Let، Const، Var) Es6 Syntax ( Let, Const, Var)

  • اولین کامپوننت در React Native (توسعه برنامه موبایل) First Component in React Native (Mobile App Development)

  • نحوه نمایش کامپوننت در دستگاه How To Show Component On Device

  • نحوه ساخت اولین برنامه React Native ما How to Build Our First React Native App

  • نحوه اتصال یک کامپوننت به کامپوننت ریشه How to Connect a Component To The Root Component

  • وارد کردن یک کامپوننت به کامپوننت دیگر Import a Component to Another Component

  • آزمون quiz

استایل دهی برای React Native Styling For React Native

  • استایل دهی با JSX در React Native Styling with JSX in React Native

  • نمایش نماها در React Native Displaying Views in React Native

  • استایل دهی کامپوننت سرصفحه در React Native Header Component’s Styling in React Native

  • Props در ری اکت نیتیو React Props in React Native

  • نحوه استفاده مجدد از کد با سیستم Props How to Reuse Code With Props System

  • آزمون quiz

درخواست API با React Native API Request with React Native

  • نحوه نمایش لیستی به کاربر در React Native How To Show a List To The User in React Native

  • کامپوننت لیست در React Native The List Component in React Native

  • کامپوننت تابعی در مقابل کامپوننت مبتنی بر کلاس در React Native Func Component vs Class Based Component in React Native

متدهای چرخه حیات در React JS و React Native LifeCycle Methods in React JS and React Native

  • چه زمانی به متدهای چرخه حیات نیاز داریم؟ When Do We Need Lifecycle Methods?

  • متدهای چرخه حیات در React Native Lifecycle Methods in React Native

  • انجام درخواست با Axios در React Native Making Request With Axios in React Native

  • آزمون quiz

وضعیت در React Native State in React Native

  • وضعیت چیست و چگونه وضعیت اولیه را در React Native تنظیم کنیم What is State and How to Initial State in React Native

  • استفاده از وضعیت در React Native Using of State in React Native

  • چرخه حیات کامپوننت با وضعیت در React Native A Component’s Lifecycle With State in React Native

  • کامپوننت لیست در React Native List Component in React Native

  • کامپوننت آیتم لیست در React Native List Item Component in React Native

  • کامپوننت های قابل استفاده مجدد در React Native Reusable Components in React Native

  • کامپوننت استایل گذاری شده برای آیتم های لیست در React Native Styled Component for List Items in React Native

  • استفاده از Props.Children در React Native Usage of Props.Children in React Native

  • بخش آیتم در React Native Item Section in React Native

  • آزمون quiz

چیدمان با فلکس باکس Layout with Flexbox

  • مقدمه ای بر فلکس باکس در React Native Introduction to the Flexbox in React Native

  • کامپوننت سرصفحه بخش در React Native Section Header Component in React Native

  • نحوه نمایش تصویر در React Native How to Show An Image in React Native

  • محتوای قابل اسکرول در React Native Scrollable Content in React Native

  • تعامل کاربر با ReactNative User Interaction with ReactNative

  • مدیریت کننده های رویداد در React Native Event Handlers in React Native

  • نحوه باز کردن برنامه دیگر (مرورگر) How to Open Another App (Browser)

  • آزمون quiz

React Native و Expo React Native and Expo

  • React Native در دستگاه موبایل React Native on Mobile Device

  • پروژه Expo CLI Expo CLI Project

پروژه Router Expo CLI Router Expo CLI Project

  • پروژه Router Expo CLI Router Expo CLI Project

  • مشاهده محتوا در دستگاه یا امولاتور See The Content On A Device or Emulator

  • Router چیست و نصب آن What Is Router And Installation

  • راه اندازی Router در پروژه Setting Up a Router in Project

FlatList در React Native FlatList in React Native

  • FlatList در React Native FlatList in React Native

  • رندر کردن لیستی با FlatList در React Native Rendering A List With FlatList in React Native

  • FlatList چگونه کار می کند How Does FlatList Work

  • دادن prop کلید در React Native Giving the Key Prop in React Native

  • props های FlatList در React Native FlatList Props in React Native

  • آزمون quiz

مسیر دادن به صفحه های مختلف در React Native Route Different Screens in React Native

  • صفحه جزئیات کتاب در React Native Book Detail Screen in React Native

  • حرکت بین صفحه ها Navigate Between Screens

  • حرکت از یک کامپوننت فرزند Navigating from a Child Component

  • تابع ناوبری Navigation Function

  • انتقال داده بین صفحه ها Data Transfer Between Screens

Node JS Node JS

  • Node JS چیست What is Node JS

  • فایل های پروژه NodeJS NodeJS Project Files

  • نصب Node JS Installing Node JS

  • موتور V8 در NodeJS V8 Engine in NodeJS

  • گلوبال های Node JS Node JS Globals

  • توابع در Node JS Functions in Node JS

  • ماژول و Require در NodeJS Module and Require in NodeJS

  • الگوهای صادرات ماژول در Node JS Module exports patterns in Node JS

  • منتشر کننده رویداد در NodeJS Event Emitter in NodeJS

  • بیشتر در مورد منتشر کنندگان رویداد More about Event Emitters

  • خواندن و نوشتن فایل ها Reading and Writing Files

  • ایجاد و حذف دایرکتوری ها Creating and Removing Directories

  • آزمون توسعه وب فول استک، پشته مرن، فول استک مرن، مرن Quiz Full stack web development, mern stack, mern full stack, mern

سرور در React JS، NodeJS، Express JS Server in React JS, NodeJS, Express JS

  • کلاینت ها و سرورها در NodeJS Clients & Servers in NodeJS

  • ایجاد سرور در NodeJS Creating Server in NodeJS

جریان ها و بافرها برای توسعه وب فول استک و توسعه برنامه موبایل Streams and Buffers for Full Stack Web Development and Mobile App Development

  • جریان ها و بافرها در NodeJS Streams and Buffers in NodeJS

  • جریان قابل خواندن در NodeJS Readable Stream in NodeJS

  • جریان نوشتن در NodeJS Write Stream in NodeJS

  • پایپ در NodeJS Pipe in NodeJS

  • سرو کردن HTML Serving HTML

  • سرو کردن داده های JSON Serving JSON Data

  • مسیریابی در NodeJS Routing in NodeJS

  • آزمون - React، node، express Quiz - React, node, express

Express با Node JS Express with Node JS

  • Node Package Manager Node Package Manager

  • فایل Package Json Package Json File

  • نصب Nodemon در Express JS Installing Nodemon in Express JS

  • Express Express

  • پارامترهای مسیر در Express Route Params in Express

  • موتورهای قالب Template Engines

  • موتورهای قالب ۲ Template Engines 2

  • نماهای جزئی Partial Views

  • فایل های ایستا Static Files

  • رشته های پرس و جو Query Strings

  • درخواست Post در ExpressJS Post Request in ExpressJS

  • برنامه Todo (قسمت-۱) در Express Todo App (Part-1) in Express

  • برنامه Todo (قسمت-۲) در Express Todo App (Part-2) in Express

  • برنامه Todo (قسمت-۳) در Express Todo App (Part-3) in Express

  • برنامه Todo (قسمت-۴) در Express Todo App (Part-4) in Express

Mongo DB Mongo DB

  • MongoDB چیست What is MongoDB

  • فایل های پروژه MongoDB MongoDB Project Files

  • راه اندازی OSX در MongoDB OSX Setup in MongoDB

  • OSX – Robomongo OSX – Robomongo

  • راه اندازی ویندوز Windows Setup

  • ویندوز – Robomongo Windows – Robomongo

  • آزمون Quiz

تجربه تست محور در MongoDB Test Driven Experience in MongoDB

  • آخرین راه اندازی قبل از شروع پروژه Last Setup Before the Project Start

  • مقدمه ای بر پروژه MongoDB Introduction to MongoDB Project

  • شروع پروژه MongoDB Start to MongoDB Project

  • راهنمای اتصال Mongoose ۱ Mongoose Connection Helper 1

  • مدل های Mongoose Models of Mongoose

  • شروع به تست با Mocha Start to test with Mocha

  • ایجاد و ذخیره مدل ها Creating and Saving Models

  • چگونه می توانیم مجموعه ها را حذف کنیم؟ How we can drop collections?

  • ویژگی isNew در Mongoose isNew Property in Mongoose

  • جستجوی find() find() Query

  • ویژگی _id The _id Property

  • تست خودکار Testing Automatically

  • جستجوی findOne() findOne() Query

  • حذف سوابق Deleting Records

  • به روز رسانی سوابق (۱) Updating Records (1)

  • به روز رسانی سوابق (۲) Updating Records (2)

  • آزمون quiz

عملگرها در MongoDB Operators in MongoDB

  • عملگرهای به روز رسانی در MongoDB برای پشته مرن Updating Operators in MongoDB for Mern Stack

  • عملگر $mul به عنوان مثال $mul Operator as an example

  • اعتبارسنجی Mongoose (۱) Mongoose Validation (1)

  • اعتبارسنجی Mongoose (۲) Mongoose Validation (2)

  • اعتبارسنجی Mongoose (۳) Mongoose Validation (3)

  • مدیریت خطاها در MongoDB Handling Errors in MongoDB

  • آزمون quiz

مدیریت داده های رابطه ای در MongoDB Handling Relational Data in MongoDB

  • قرار دادن اسناد Embedding Documents

  • تست با زیر اسناد Test with Subdocuments

  • افزودن زیر سند جدید Adding New Subdocument

  • حذف زیر سند Removing Subdocument

  • انواع مجازی (۱) Virtual Types (1)

  • انواع مجازی (۲) Virtual Types (2)

  • آزمون Quiz

طراحی اسکیمادر MongoDB Schema Design in MongoDB

  • توسعه منابع تودرتو در MongoDB Developing Nested Resources in MongoDB

  • استفاده از ref برای انجمن ها Using ref for associations

  • تست انجمن Testing Association

  • Promise.all در MongoDB Promise.all in MongoDB

  • اصلاح کننده ها در MongoDB Modifiers in MongoDB

  • Populate تودرتو در MongoDB Nested Populate in MongoDB

  • آزمون quiz

مقدمه ای بر دوره پروژه های پشته کامل Mern Stack با React js، Nodejs، Express Intro to Full Stack Mern Stack Projects Course with React js, Nodejs, Express

  • MERN چیست و چگونه کمک بگیریم؟ What is MERN and How to Get Help?

  • فایل های پروژه – پروژه های پشته مرن Project Files - mern stack projects

  • آزمون: پروژه پشته مرن با React JS، React Native، Express JS، MongoDB Quiz: Mern Stack Project with React JS, React Native, Express JS, MongoDB

شروع پروژه پشته کامل Mern با React، Express js، Nodejs، Mongodb Let’s Start to Mern Full Stack Project with React, Express js, Nodejs, Mongodb

  • پیش نمایش برنامه – پروژه های پشته مرن App Preview - Mern Stack Projects

  • نصب Installation

راه اندازی های اولیه برای React، nodejs، express js، mongodb Initial Setups for React, nodejs, express js, mongodb

  • راه اندازی بک اند Backend Setup

  • راه اندازی فرانت اند Frontend Setup

  • راه اندازی عمومی (body parser & cors) در پروژه های پشته مرن General Setup (body parser & cors) in Mern Stack Projects

  • راه اندازی پایگاه داده (MongoDB) Database Setup (MongoDB)

  • نحوه اتصال به پایگاه داده How to Connect to Database

  • آزمون quiz

ایجاد مسیرها و کنترلرها در سرور در مرن Creating Routes and Controllers on Server in Mern

  • ایجاد مسیرها برای بک اند Creating Routes for Backend

  • راه اندازی ساختار پوشه سرور در پشته مرن Setup Server Folder Structure in Mern Stack

  • راه اندازی اسکیمادر Set up schema

  • افزودن کنترلرهای بیشتر در پشته مرن Adding More Controllers in Mern Stack

  • آزمون quiz

راه اندازی سمت کلاینت و Redux در React، Express js، Mongodb Setup Client Side and Redux in React, Express js, Mongodb

  • ایجاد ساختار فرانت اند در پشته کامل مرن Creating Front-end Structure in Mern Full Stack

  • پیاده سازی استایل ها Implementing Styles

  • کامپوننت استایل گذاری Styling Component

  • پیاده‌سازی درخواست‌های API Implementing API requests

  • راه‌اندازی Redux در React JS، Express JS، MongoDB Initializing Redux in React JS, Express JS, Mongodb

  • ساخت Reducer ها در React JS، Express JS، MongoDB Building Reducers in React JS, Express JS, Mongodb

  • ایجاد Action Creator ها Creating Action Creators

  • دریافت داده با Redux Thunk Fetching data with redux thunk

  • دریافت داده از Store سراسری (useSelector) Fetching the data from global store (useSelector)

  • آزمونک quiz

مدیریت فرم‌ها در React JS، Express، MongoDB، Nodejs Handling Forms in React js, Express, Mongodb, Nodejs

  • ساخت کامپوننت فرم Building Form Component

  • اضافه کردن موارد بیشتر به فرم Adding some more form items

  • ورودی فایل File Input

  • مدیریت ارسال فرم Handling Form Submit

  • آزمونک اپلیکیشن React، پشته MERN Quiz React Application, Mern Stack

ساخت کامپوننت‌های Posts و Post در پروژه‌های Full Stack MERN Building Posts and Post Components in Mern Full Stack Projects

  • ساخت کامپوننت لیست داستان Creating Story list component

  • ساخت کامپوننت داستان Creating Story Component

  • آزمونک quiz

مدیریت قابلیت‌ها (ویرایش، حذف، لایک) Handling Functionalities (Edit, Delete, Like)

  • ساخت مسیر به‌روزرسانی (سمت سرور) Creating Update Route(Backend)

  • ساخت قابلیت به‌روزرسانی (سمت کلاینت) Creating Update Functionality (Front end)

  • ساخت اکشن به‌روزرسانی Creating Update Action

  • به‌روزرسانی و ریست کردن فرم Updating and Reseting Form

  • اضافه کردن مسیر برای عملیات حذف Adding route for delete action

  • اکشن حذف داستان برای کلاینت Delete story action for frontend

  • پیاده‌سازی اکشن به‌روزرسانی در سمت سرور Implement update action in backend

  • اکشن لایک داستان (سمت سرور) Like Story Action(Backend)

  • ایجاد ثابت‌ها برای نوع اکشن (سمت کلاینت) Creating constants for action type (Front-end)

  • آزمونک quiz

برخی بهبودها در پروژه پشته MERN با React JS، Express JS Some Enhancements in Mern Stack Project with React js, express js

  • متغیرهای محیطی در پشته MERN Environmental Variables in Mern Stack

احراز هویت با JSON Web Token Authentication with JSON Web Token

  • پیش‌نمایش برنامه در پشته MERN App Preview in Mern Stack

  • نصب وابستگی‌ها Installing Dependencies

احراز هویت - سمت کلاینت در پروژه‌های پشته MERN Authentication - Frontend in Mern Stack Projects

  • ساخت کامپوننت AppBar Create AppBar component

  • استایل‌دهی AppBar Styling the AppBar

  • ساخت کامپوننت فرم Creating form Component

  • ساخت فرم احراز هویت Creating auth form

  • پیاده‌سازی ورود و ثبت نام Implement login and registration

  • ساخت اکشن برای ورود و ثبت نام Create actions for login and registrations

  • ساخت مسیرهای سمت سرور برای ورود Create backend routes for login

  • پیاده‌سازی منطق برای فرآیند احراز هویت Implement logic for auth process

  • آزمونک quiz

احراز هویت - سمت سرور در پروژه‌های پشته MERN Authentication - Backend in Mern Stack Projects

  • ساخت Middleware احراز هویت Creating auth middleware

  • مجاز کردن کاربر احراز هویت شده برای لایک داستان Allow auth user to like story

  • پیاده‌سازی احراز هویت در سمت کلاینت Implement authentication on frontend

  • اضافه کردن Middleware به درخواست‌های API Add middleware to api requests

  • بررسی منقضی شدن یا نشدن توکن Check if token is expired or not

  • آزمونک quiz

استقرار Deployment

  • نحوه استقرار سمت سرور How to Deploy Backend

  • نحوه استقرار سمت کلاینت How to Deploy frontend

اضافی Extra

  • توسعه اپلیکیشن وب و موبایل Full Stack | پروژه پشته MERN Full Stack Web & Mobile App Development | Mern Stack Project

نمایش نظرات

آموزش توسعه اپلیکیشن وب و موبایل فول استک | پروژه با MERN Stack
جزییات دوره
42.5 hours
366
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
3,123
4.4 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

OAK Academy OAK Academy

کارآفرین

OAK Academy Team OAK Academy Team

مربی