آموزش React، NodeJS، Express و MongoDB - راهنمای Fullstack MERN

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

معرفی Introduction

• معرفی Introduction

• "پشته MERN" چیست؟ What is the "MERN Stack"?

• MERN - اولین بررسی اجمالی MERN - A First Overview

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

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

• چگونه از دوره بیشترین بهره را ببریم How To Get The Most Out Of The Course

• استفاده از منابع دوره Using the Course Resources

پشته MERN - نظریه The MERN Stack - Theory

• معرفی ماژول Module Introduction

• درک تصویر بزرگ Understanding the Big Picture

• شیرجه رفتن به جلو Diving Into the Frontend

• درک Backend Understanding the Backend

• REST در مقابل GraphQL REST vs GraphQL

• اتصال Node & React Connecting Node & React

• MERN - ملزومات MERN - Essentials

• ایجاد محیط توسعه ما و سرورهای توسعه Creating our Development Environment & the Development Servers

• غواصی عمیق تر در کد Diving Deeper Into the Code

• منابع و لینک های مفید Useful Resources & Links

برنامه ریزی اپلیکیشن Planning the App

• معرفی ماژول Module Introduction

• درک ایده عمومی اپلیکیشن Understanding the General App Idea

• ترسیم نمای فرانت‌اند Sketching out the Frontend

• داده ها و نقاط پایانی API مورد استفاده در برنامه ما Data & API Endpoints used in our App

• صفحات SPA مورد نیاز برای Frontend Required SPA Pages for the Frontend

React.js - یک تجدید کننده React.js - A Refresher

• معرفی ماژول Module Introduction

• React چیست؟ What is React?

• نکته ای در مورد نسخه NodeJS A Note About The NodeJS Version

• واکنش 18 React 18

• راه اندازی یک پروژه شروع Setting Up a Starting Project

• درک JSX Understanding JSX

• درک مولفه ها Understanding Components

• کار با چندین کامپوننت Working with Multiple Components

• استفاده از Props برای انتقال داده بین کامپوننت ها Using Props to pass Data between Components

• ارائه لیست داده ها Rendering Lists of Data

• رسیدگی به رویدادها Handling Events

• کودک کارآمد<=>ارتباطات والدین Efficient Child<=>Parent Communication

• کار با "دولت" Working with "State"

• بیشتر در مورد ایالت More on State

• واکشی ورودی کاربر (صحافی دو طرفه) Fetching User Input (Two-way Binding)

• اصول React.js React.js Basics

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

React.js - ساخت Frontend React.js - Building the Frontend

• معرفی ماژول Module Introduction

• شروع راه اندازی، صفحات و مسیرها Starting Setup, Pages & Routes

• افزودن صفحه/کامپوننت UsersList Adding a UsersList Page / Component

• افزودن یک جزء UserItem Adding a UserItem Component

• طراحی برنامه و اجزای بیشتر Styling our App & More Components

• مولفه های نمایشی در مقابل مولفه های حالتی Presentational vs Stateful Components

• اضافه کردن سربرگ اصلی Adding a Main Header

• افزودن Navlinks Adding Navlinks

• پیاده سازی یک ناوبری دسکتاپ و موبایل پایه Implementing a Basic Desktop & Mobile Navigation

• درک پورتال ها Understanding Portals

• رسیدگی به وضعیت کشو Handling the Drawer State

• متحرک سازی Sidedrawer Animating the Sidedrawer

• رندر کردن مکان‌های کاربر و استفاده از بخش‌های مسیر پویا Rendering User Places & Using Dynamic Route Segments

• دریافت پارامترهای مسیر Getting Route Params

• اضافه کردن دکمه های سفارشی Adding Custom Buttons

• اضافه کردن یک مدال Adding a Modal

• رندر کردن نقشه با گوگل مپ Rendering a Map with Google Maps

• ادامه بدون کارت اعتباری Continuing without a Credit Card

• اختیاری: بیشتر در مورد ()useEffect Hook Optional: More on the useEffect() Hook

• افزودن یک مؤلفه ورودی فرم سفارشی Adding a Custom Form Input Component

• مدیریت وضعیت در مؤلفه ورودی Managing State in the Input Component

• افزودن اعتبار سنجی ورودی Adding Input Validation

• به اشتراک گذاری مقادیر ورودی و افزودن چندین ورودی Sharing Input Values & Adding Multiple Inputs

• مدیریت فرم در سطح کشور Managing Form-wide State

• تکمیل فرم "افزودن مکان". Finishing the "Add Place" Form

• شروع کار در صفحه "به روز رسانی مکان". Starting Work on the "Update Place" Page

• تنظیم مولفه ورودی Adjusting the Input Component

• ایجاد یک هوک فرم سفارشی (useForm) Creating a Custom Form Hook (useForm)

• اختیاری: اطلاعات بیشتر در مورد React Hooks (سفارشی). Optional: More on (Custom) React Hooks

• تنظیم قلاب فرم Adjusting the Form Hook

• رفع مشکلات جزئی Fixing Minor Issues

• نمایش اخطار حذف Showing a Deletion Warning

• افزودن یک صفحه "Auth" و فرم ورود Adding an "Auth" Page & Login Form

• اضافه کردن دکمه ثبت نام + "Switch Mode". Adding Signup + "Switch Mode" Button

• افزودن زمینه تأیید اعتبار برای مدیریت ایالت در سطح برنامه Adding Auth Context for App-wide State Management

• گوش دادن به تغییرات زمینه Listening to Context Changes

• افزودن مسیرهای احراز هویت و احراز هویت نشده Adding Authenticated & Unauthenticated Routes

• استفاده بیشتر از زمینه تأیید اعتبار More Auth Context Usage

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

Node.js & Express.js - یک تجدید کننده Node.js & Express.js - A Refresher

• معرفی ماژول Module Introduction

• Node.js چیست؟ What is Node.js?

• نوشتن اولین کد Node.js Writing our First Node.js Code

• ارسال درخواست و پاسخ Sending Requests & Responses

• Express.js چیست؟ What is Express.js?

• افزودن Express.js Adding Express.js

• آشنایی با مزایای Express.js Understanding the Advantages of Express.js

• اجرای کد چگونه کار می کند How Code Execution Works

• مبانی Node & Express Node & Express Basics

• منابع و لینک های مفید Useful Resources & Links

Node.js & Express.js - ساخت REST API ما Node.js & Express.js - Building our REST API

• معرفی ماژول Module Introduction

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

• پیاده سازی مسیریابی پایه Implementing Basic Routing

• افزودن مسیرهای مکان خاص Adding Place-Specific Routes

• دریافت مکان توسط شناسه کاربری Getting a Place By User ID

• رسیدگی به خطاها Handling Errors

• اضافه کردن مدل خطای خودمان Adding our own Error Model

• اضافه کردن کنترلرها Adding Controllers

• افزودن مسیر POST و استفاده از پستچی Adding a POST Route & Using Postman

• رسیدگی به خطاها برای مسیرهای پشتیبانی نشده Handling Errors for Unsupported Routes

• افزودن مسیرهای پچ برای به‌روزرسانی مکان‌ها Adding Patch Routes to Update Places

• حذف مکان ها Deleting Places

• نهایی کردن منبع "دریافت مکان ها توسط شناسه کاربری". Finalizing the "Get Places by User ID" Resource

• راه اندازی مسیرهای کاربری (ثبت نام، ورود، دریافت کاربران) Setting Up the User Routes (Signup, Login, Get Users)

• اعتبارسنجی ورودی API (بدن های درخواستی) Validating API Input (Request Bodies)

• اعتبارسنجی درخواست‌های وصله و مسیرهای کاربر Validating Patch Requests & User Routes

• استفاده از API Geocoding گوگل برای تبدیل یک آدرس به مختصات Using Google's Geocoding API to Convert an Address Into Coordinates

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کار با MongoDB & Mongoose - Refresher Working with MongoDB & Mongoose - A Refresher

• معرفی ماژول Module Introduction

• MongoDB چیست؟ What is MongoDB?

• SQL در مقابل NoSQL SQL vs NoSQL

• React را به پایگاه داده متصل می کنید؟ Connecting React to a Database?

• راه اندازی MongoDB Setting Up MongoDB

• ایجاد یک Backend ساده و اتصال آن به پایگاه داده Creating a Simple Backend & Connecting it to the Database

• ایجاد یک سند با MongoDB Creating a Document with MongoDB

• دریافت داده از پایگاه داده Getting Data from the Database

• نصب Mongoose Installing Mongoose

• درک مدل ها و طرحواره ها Understanding Models & Schemas

• ایجاد یک محصول Creating a Product

• اتصال به پایگاه داده و ذخیره محصول Connecting to the Database & Saving the Product

• دریافت محصولات Getting Products

• درک ObjectID Understanding the ObjectID

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

اتصال Backend به پایگاه داده - MongoDB & Mongoose Connecting the Backend to the Database - MongoDB & Mongoose

• معرفی ماژول Module Introduction

• نصب Mongoose و اتصال Backend ما به MongoDB Installing Mongoose & Connecting our Backend to MongoDB

• ایجاد طرح و مدل مکان Creating the Place Schema & Model

• ایجاد و ذخیره اسناد در پایگاه داده Creating & Storing Documents in the Database

• دریافت مکان ها توسط شناسه مکان Getting Places by the PlaceID

• دریافت مکان ها توسط شناسه کاربری Getting Places by the UserID

• به روز رسانی مکان ها Updating Places

• حذف مکان ها Deleting Places

• نحوه ارتباط کاربران و مکان ها How Users & Places are Related

• ایجاد مدل کاربر Creating the User Model

• استفاده از مدل کاربر برای ثبت نام Using the User Model for Signup

• افزودن ورود کاربر Adding the User Login

• دریافت کاربران Getting Users

• افزودن رابطه بین مکان ها و کاربران Adding the Relation between Places & Users

• ایجاد مکان ها و افزودن آن به یک کاربر Creating Places & Adding it to a User

• حذف مکان ها و حذف آن از کاربر Deleting Places & Removing it From the User

• گرفتن مکان - یک جایگزین Getting Places - An Alternative

• پاک کردن کد ما Cleaning Up our Code

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

اتصال React.js Frontend به Backend Connecting the React.js Frontend to the Backend

• معرفی ماژول Module Introduction

• راه اندازی اولیه Initial Setup

• ارسال یک درخواست POST به Backend Sending a POST Request to the Backend

• اختیاری: fetch() API Optional: The fetch() API

• رسیدگی به خطاهای CORS Handling CORS Errors

• شروع با مدیریت خطا Getting Started with Error Handling

• مدیریت صحیح خطا در Frontend Proper Error Handling in the Frontend

• ارسال درخواست ورود Sending a Login Request

• دریافت کاربران با درخواست GET Getting Users with a GET Request

• ایجاد یک هوک Http سفارشی Creating a Custom Http Hook

• بهبود هوک Http سفارشی Improving the Custom Http Hook

• استفاده از Http Hook برای دریافت کاربران Using the Http Hook to GET Users

• افزودن مکان ها (POST) Adding Places (POST)

• بارگیری مکان ها بر اساس شناسه کاربری Loading Places by User Id

• به روز رسانی مکان ها Updating Places

• حذف مکان ها Deleting Places

• تعمیر NavLinks و "My Places" Fixing NavLinks & "My Places"

• تنظیمات نهایی Final Adjustments

• منابع و لینک های مفید Useful Resources & Links

اضافه کردن آپلود فایل Adding File Upload

• معرفی ماژول Module Introduction

• ساخت کامپوننت ImageUpload Building an ImageUpload Component

• تکمیل و استفاده از مؤلفه آپلود تصویر (در یک فرم) Finishing & Using the ImageUpload Component (in a Form)

• در باطن: استفاده از مولتر برای ذخیره فایل ها On the Backend: Using Multer to Save Files

• فیلتر کردن فایل‌ها در بک‌اند (فقط تصاویر!) Filtering Files on the Backend (Images Only!)

• سیم کشی Frontend و Backend Up Wiring Frontend and Backend Up

• اتصال کاربران به تصاویر Connecting Users to Images

• ارائه تصاویر به صورت ایستا Serving Images Statically

• آپلود تصاویر برای مکان های جدید Uploading Images for New Places

• حذف تصاویر هنگام حذف مکان ها Deleting Images When Places Get Deleted

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

افزودن احراز هویت Adding Authentication

• معرفی ماژول Module Introduction

• احراز هویت چگونه کار می کند (در برنامه MERN) How Authentication Works (in a MERN App)

• هش کردن رمز عبور کاربر Hashing the User Password

• ورود کاربران (با رمزهای عبور هش شده) Logging Users In (with Hashed Passwords)

• تولید توکن (JWT) در Backend Generating Tokens (JWT) on the Backend

• اختیاری: بیشتر در مورد JSON Web Tokens Optional: More on JSON Web Tokens

• محافظت از مسیر باطن با Auth Middleware Backend Route Protection with Auth Middleware

• استفاده و اتصال JWT (Tokens) در React Using & Attaching JWT (Tokens) in React

• استفاده از توکن ها برای به روز رسانی و حذف مکان ها Using Tokens to Update and Delete Places

• اضافه کردن مجوز Adding Authorization

• مجوز در مورد "حذف مکان ها" Authorization on "Delete Places"

• ذخیره توکن در حافظه مرورگر Storing the Token in the Browser Storage

• افزودن ورود خودکار (نسخه اصلی) Adding Auto-Login (Basic Version)

• مدیریت تاریخ انقضای توکن Managing the Token Expiration Date

• ورود خودکار و خروج خودکار به پایان رسید Finished Auto-Login & Auto-Logout

• ایجاد یک هوک احراز هویت سفارشی Creating a Custom Authentication Hook

• احراز هویت - خلاصه Authentication - Summary

• بهبودهای عمومی برنامه General App Improvements

• احراز هویت و مجوز Authentication & Authorization

• منابع و لینک های مفید Useful Resources & Links

استقرار برنامه Application Deployment

• معرفی ماژول Module Introduction

• نمای کلی مراحل استقرار Deployment Steps Overview

• استفاده از متغیرهای محیطی (Node.js) Using Environment Variables (Node.js)

• متغیرهای محیطی در React Apps Environment Variables in React Apps

• آماده سازی کلیدهای API و اعتبارنامه ها Preparing API Keys & Credentials

• ساخت اپلیکیشن React Building the React App

• اضافه کردن کد Splitting به React Adding Code Splitting to React

• درک جایگزین های احتمالی استقرار Understanding Possible Deployment Alternatives

• استقرار API REST مستقل (مثال: Heroku) Deploying a Standalone REST API (Example: Heroku)

• استقرار یک React SPA مستقل (مثال: میزبانی Firebase) Deploying a Standalone React SPA (Example: Firebase Hosting)

• رفع مشکلات سبک Fixing Style Issues

• استقرار یک برنامه ترکیبی Deploying a Combined App

• ذخیره سازی فایل ها/آپلودها Storing Files/ Uploads

• بسته شدن Wrap Up

جمع بندی و مراحل بعدی Roundup & Next Steps

• خلاصه دوره Course Roundup

• محتوای جایزه Bonus Content