آموزش بوت کمپ توسعه وب Full Stack با React و Python [ویدئو]

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

معرفی Introduction

• معرفی Introduction

مقدمه ای بر توسعه وب Introduction to Web Development

• Frontend در مقابل Backend Frontend Versus Backend

• Frontend در مقابل Backend Frontend Versus Backend

مقدمه ای بر توسعه وب Introduction to Web Development

شروع پروژه - نمای کلی برنامه Frontend اولیه Project Start - Initial Frontend App Overview

• نصب کد ویژوال استودیو Installing Visual Studio Code

• نصب کد ویژوال استودیو Installing Visual Studio Code

• تنظیم کد ویژوال استودیو Visual Studio Code Setup

• تنظیم کد ویژوال استودیو Visual Studio Code Setup

• مروری بر نسخه اولیه برنامه Overview of the Initial Application Version

• مروری بر نسخه اولیه برنامه Overview of the Initial Application Version

• نحوه ایجاد یک React Application جدید How to Create a New React Application

• نحوه ایجاد یک React Application جدید How to Create a New React Application

• نصب Node به همراه NPM و NPX Installing Node Along with NPM and NPX

• نصب Node به همراه NPM و NPX Installing Node Along with NPM and NPX

شروع پروژه - نمای کلی برنامه Frontend اولیه Project Start - Initial Frontend App Overview

ایجاد React Application و نحوه عملکرد React Creating React Application and How React Works

• ایجاد برنامه React با استفاده از Create-React-App Creating React Application Using Create-React-App

• ایجاد برنامه React با استفاده از Create-React-App Creating React Application Using Create-React-App

• شروع React Application Starting React Application

• شروع React Application Starting React Application

• ساختار اپلیکیشن Frontend Structure of the Frontend App

• ساختار اپلیکیشن Frontend Structure of the Frontend App

• نصب مجدد NPM Dependencies Reinstalling NPM Dependencies

• نصب مجدد NPM Dependencies Reinstalling NPM Dependencies

• ایجاد و ارائه ساخت بهینه برنامه Frontend Creating and Serving Optimized Build of the Frontend App

• ایجاد و ارائه ساخت بهینه برنامه Frontend Creating and Serving Optimized Build of the Frontend App

• مراحل اولیه پیاده سازی برنامه Frontend Basic Frontend Application Implementation Steps

• مراحل اولیه پیاده سازی برنامه Frontend Basic Frontend Application Implementation Steps

• پاک کردن برنامه پیش‌فرض React Cleaning Up Default React Application

• پاک کردن برنامه پیش‌فرض React Cleaning Up Default React Application

• React چگونه کار می کند و JSX چیست How React Works and What is JSX

• React چگونه کار می کند و JSX چیست How React Works and What is JSX

• React Components Functional React Functional Components

• React Components Functional React Functional Components

ایجاد React Application و نحوه عملکرد React Creating React Application and How React Works

راه اندازی Git و ایجاد مخزن از راه دور GitHub Initializing Git and Creating Remote GitHub Repository

• نصب و پیکربندی Git Installing and Configuring Git

• نصب و پیکربندی Git Installing and Configuring Git

• ایجاد اولین کامیت Creating First Commit

• ایجاد اولین کامیت Creating First Commit

• افزودن فایل Eslintcache به Gitignore Adding the Eslintcache File to the Gitignore

• افزودن فایل Eslintcache به Gitignore Adding the Eslintcache File to the Gitignore

• انتشار مخزن در GitHub Publishing Repository to GitHub

• انتشار مخزن در GitHub Publishing Repository to GitHub

راه اندازی Git و ایجاد مخزن از راه دور GitHub Initializing Git and Creating Remote GitHub Repository

React Props و ایجاد هدر و اجزای جستجو React Props and Creation of the Header and Search Components

• تغییر فاویکون Changing Favicon

• تغییر فاویکون Changing Favicon

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

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

• React Props چیست؟ What are React Props

• React Props چیست؟ What are React Props

• برنامه ریزی برای ایجاد مولفه جستجو Plan for Creation of the Search Component

• برنامه ریزی برای ایجاد مولفه جستجو Plan for Creation of the Search Component

• ایجاد کامپوننت جستجو با فرم ورودی Creating Search Component with Input Form

• ایجاد کامپوننت جستجو با فرم ورودی Creating Search Component with Input Form

• مولفه جستجوی استایل Styling Search Component

• مولفه جستجوی استایل Styling Search Component

• ارسال فرم جستجو Submission of the Search Form

• ارسال فرم جستجو Submission of the Search Form

• مولفه جستجوی کنترل شده Controlled Search Component

• مولفه جستجوی کنترل شده Controlled Search Component

• خلاصه مولفه جستجو Search Component Summary

• خلاصه مولفه جستجو Search Component Summary

• غیرفعال کردن ویژگی GitLens Blame Annotations Disabling GitLens Blame Annotations Feature

• غیرفعال کردن ویژگی GitLens Blame Annotations Disabling GitLens Blame Annotations Feature

React Props و ایجاد هدر و اجزای جستجو React Props and Creation of the Header and Search Components

ایجاد درخواست های Unsplash API Making Unsplash API Requests

• ایجاد حساب کاربری در Unsplash و ثبت برنامه جدید Creating Account at Unsplash and Registering New App

• ایجاد حساب کاربری در Unsplash و ثبت برنامه جدید Creating Account at Unsplash and Registering New App

• افزودن فایل محلی با متغیرهای محیطی Adding Local File with Environment Variables

• افزودن فایل محلی با متغیرهای محیطی Adding Local File with Environment Variables

• نحوه ایجاد Unsplash API Request و URL چیست How to Make Unsplash API Request and What is URL

• نحوه ایجاد Unsplash API Request و URL چیست How to Make Unsplash API Request and What is URL

• ایجاد اولین درخواست API برای عکس تصادفی Making First API Request for Random Photo

• ایجاد اولین درخواست API برای عکس تصادفی Making First API Request for Random Photo

• تجزیه و تحلیل درخواست ها و پاسخ های API Analyzing API Requests and Responses

• تجزیه و تحلیل درخواست ها و پاسخ های API Analyzing API Requests and Responses

• چالش - ورودی جستجو را پاک کنید Challenge - Clear Search Input

• چالش - ورودی جستجو را پاک کنید Challenge - Clear Search Input

• راه حل چالش - ورودی جستجو را پاک کنید Challenge Solution - Clear Search Input

• راه حل چالش - ورودی جستجو را پاک کنید Challenge Solution - Clear Search Input

ایجاد درخواست های Unsplash API Making Unsplash API Requests

پیکربندی ESLint و Prettier در برنامه Frontend Configuring ESLint and Prettier in the Frontend App

• Code Formatter چیست؟ What is Code Formatter

• Code Formatter چیست؟ What is Code Formatter

• لینتر چیست؟ What is Linter

• لینتر چیست؟ What is Linter

• ESLint Validation را پیکربندی کنید Configure ESLint Validation

• ESLint Validation را پیکربندی کنید Configure ESLint Validation

• نصب و فعال کردن پلاگین Prettier ESLint Installing and Enabling Prettier ESLint Plugin

• نصب و فعال کردن پلاگین Prettier ESLint Installing and Enabling Prettier ESLint Plugin

• تنظیم پیکربندی زیباتر Adjusting Prettier Configuration

• تنظیم پیکربندی زیباتر Adjusting Prettier Configuration

• فعال کردن رفع خطاهای ESLint در ذخیره فایل Enabling ESLint Errors Fixing on File Save

• فعال کردن رفع خطاهای ESLint در ذخیره فایل Enabling ESLint Errors Fixing on File Save

• افزودن اسکریپت های NPM Linting Adding NPM Linting Scripts

• افزودن اسکریپت های NPM Linting Adding NPM Linting Scripts

• رفع تمام خطاهای پرده زدن Fixing All Linting Errors

• رفع تمام خطاهای پرده زدن Fixing All Linting Errors

• تغییر TabSize ویرایشگر در VS Code Changing Editor TabSize in VS Code

• تغییر TabSize ویرایشگر در VS Code Changing Editor TabSize in VS Code

• ESLint با خلاصه Setup Prettier ESLint with Prettier Setup Summary

• ESLint با خلاصه Setup Prettier ESLint with Prettier Setup Summary

پیکربندی ESLint و Prettier در برنامه Frontend Configuring ESLint and Prettier in the Frontend App

ذخیره تصاویر در حالت و حذف آنها در رابط کاربری Saving Images in the State and Deleting Them in the UI

• برنامه ریزی مراحل بعدی در ساخت اپلیکیشن Frontend Planning Next Steps in Building Frontend App

• برنامه ریزی مراحل بعدی در ساخت اپلیکیشن Frontend Planning Next Steps in Building Frontend App

• ذخیره تصاویر در ایالت Saving Images in the State

• ذخیره تصاویر در ایالت Saving Images in the State

• State در React به صورت ناهمزمان به روز می شود State in React is Updated Asynchronously

• State در React به صورت ناهمزمان به روز می شود State in React is Updated Asynchronously

• افزودن React Developer Tools افزونه کروم Adding React Developer Tools Chrome Extension

• افزودن React Developer Tools افزونه کروم Adding React Developer Tools Chrome Extension

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

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

• افزودن Props به مؤلفه ImageCard Adding Props to the ImageCard Component

• افزودن Props به مؤلفه ImageCard Adding Props to the ImageCard Component

• نمایش همه تصاویر در رابط کاربری با استفاده از روش نقشه Displaying All Images in the UI Using Map Method

• نمایش همه تصاویر در رابط کاربری با استفاده از روش نقشه Displaying All Images in the UI Using Map Method

• طرح بندی کارت های تصویر را تنظیم کنید Adjust Layout of the Image Cards

• طرح بندی کارت های تصویر را تنظیم کنید Adjust Layout of the Image Cards

• افزودن قابلیت حذف تصاویر Adding Delete Images Functionality

• افزودن قابلیت حذف تصاویر Adding Delete Images Functionality

ذخیره تصاویر در حالت و حذف آنها در رابط کاربری Saving Images in the State and Deleting Them in the UI

اضافه کردن لوگوی SVG و کامپوننت خوش آمدید Adding SVG Logo and Welcome Component

• ایجاد لوگوی SVG از متن Creating SVG Logo from Text

• ایجاد لوگوی SVG از متن Creating SVG Logo from Text

• ویرایش لوگوی SVG Editing SVG Logo

• ویرایش لوگوی SVG Editing SVG Logo

• افزودن مولفه خوش آمد گویی Adding Welcome Component

• افزودن مولفه خوش آمد گویی Adding Welcome Component

• خلاصه برنامه اولیه Frontend Basic Frontend App Summary

• خلاصه برنامه اولیه Frontend Basic Frontend App Summary

• بررسی Basic Codebase App Frontend Basic Frontend App Codebase Review

• بررسی Basic Codebase App Frontend Basic Frontend App Codebase Review

• به روز رسانی برنامه Create-React-App Updating Create-React-App Application

• به روز رسانی برنامه Create-React-App Updating Create-React-App Application

اضافه کردن لوگوی SVG و کامپوننت خوش آمدید Adding SVG Logo and Welcome Component

REST API و روش‌های HTTP REST API and HTTP Methods

• API کدام مشکلات را حل می کند Which Problems API Solves

• API کدام مشکلات را حل می کند Which Problems API Solves

• ارتباط مشتری و سرور Client-Server Communication

• ارتباط مشتری و سرور Client-Server Communication

• REST API REST API

• REST API REST API

• URL یک شناسه منبع منحصر به فرد است URL is Unique Resource Identifier

• URL یک شناسه منبع منحصر به فرد است URL is Unique Resource Identifier

• درخواست ها و پاسخ ها Requests and Responses

• درخواست ها و پاسخ ها Requests and Responses

• تجزیه و تحلیل درخواست ها و پاسخ ها در برنامه Frontend ما Analyzing Requests and Responses in our Frontend App

• تجزیه و تحلیل درخواست ها و پاسخ ها در برنامه Frontend ما Analyzing Requests and Responses in our Frontend App

• مروری بر روش های HTTP HTTP Methods Overview

• مروری بر روش های HTTP HTTP Methods Overview

• عملیات CRUD CRUD Operations

• عملیات CRUD CRUD Operations

• روش‌های HTTP بی‌توان Idempotent HTTP Methods

• روش‌های HTTP بی‌توان Idempotent HTTP Methods

• کدهای وضعیت پاسخ HTTP HTTP Response Status Codes

• کدهای وضعیت پاسخ HTTP HTTP Response Status Codes

• رایج ترین کدهای موفقیت و تغییر مسیر HTTP Most Common Success and Redirect HTTP Status Codes

• رایج ترین کدهای موفقیت و تغییر مسیر HTTP Most Common Success and Redirect HTTP Status Codes

• رایج ترین کدهای وضعیت خطای سرویس گیرنده و سرور Most Common Client and Server Error Status Codes

• رایج ترین کدهای وضعیت خطای سرویس گیرنده و سرور Most Common Client and Server Error Status Codes

• خلاصه روش‌های REST API و HTTP REST API and HTTP Methods Summary

• خلاصه روش‌های REST API و HTTP REST API and HTTP Methods Summary

REST API و روش‌های HTTP REST API and HTTP Methods

نمای کلی سرویس API و نصب پایتون API Service Overview and Python Installation

• نمای کلی خدمات Frontend و API Frontend and API Services Overview

• نمای کلی خدمات Frontend و API Frontend and API Services Overview

• نصب Python، Pip و Pipenv در MacOS Installing Python, Pip, and Pipenv on MacOS

• نصب Python، Pip و Pipenv در MacOS Installing Python, Pip, and Pipenv on MacOS

• نصب Python، Pip و Pipenv در ویندوز Installing Python, Pip, and Pipenv on Windows

• نصب Python، Pip و Pipenv در ویندوز Installing Python, Pip, and Pipenv on Windows

• مراحل پیاده سازی Python Flask API Python Flask API Implementation Steps

• مراحل پیاده سازی Python Flask API Python Flask API Implementation Steps

نمای کلی سرویس API و نصب پایتون API Service Overview and Python Installation

ایجاد محیط مجازی پایتون برای برنامه API با استفاده از Pipenv Creating Python Virtual Environment for API Application Using Pipenv

• ایجاد پوشه API و اجرای برنامه پایه پایتون Creating API Folder and Running Basic Python App

• ایجاد پوشه API و اجرای برنامه پایه پایتون Creating API Folder and Running Basic Python App

• ساخت Python Virtualenv و نصب Flask Creating Python Virtualenv and Installing Flask

• ساخت Python Virtualenv و نصب Flask Creating Python Virtualenv and Installing Flask

• کاوش Python Virtualenv و تغییر در مقابل کد Python Interpreter Exploring Python Virtualenv and Changing Versus Code Python Interpreter

• کاوش Python Virtualenv و تغییر در مقابل کد Python Interpreter Exploring Python Virtualenv and Changing Versus Code Python Interpreter

ایجاد محیط مجازی پایتون برای برنامه API با استفاده از Pipenv Creating Python Virtual Environment for API Application Using Pipenv

ایجاد و راه اندازی وب سرور Simple Flask Creating and Starting Simple Flask Web Server

• کاربرد فلاسک ساده Simple Flask Application

• کاربرد فلاسک ساده Simple Flask Application

• واردات در پایتون و __name__ Imports in Python and __name__

• واردات در پایتون و __name__ Imports in Python and __name__

• وارد کردن از یک ماژول دیگر پایتون و __name__ Import from Another Python Module and __name__

• وارد کردن از یک ماژول دیگر پایتون و __name__ Import from Another Python Module and __name__

• دکوراتورها در پایتون Decorators in Python

• دکوراتورها در پایتون Decorators in Python

• شروع برنامه Flask در داخل ماژول Starting Flask App Inside of the Module

• شروع برنامه Flask در داخل ماژول Starting Flask App Inside of the Module

• راه اندازی مداوم ماژول های پایتون در مک و ویندوز Consistent launch of Python Modules on Mac and Windows

• راه اندازی مداوم ماژول های پایتون در مک و ویندوز Consistent launch of Python Modules on Mac and Windows

ایجاد و راه اندازی وب سرور Simple Flask Creating and Starting Simple Flask Web Server

ایجاد نقطه پایانی New-Image Flask API و آزمایش آن با استفاده از Postman Creating New-Image Flask API Endpoint and Testing it Using Postman

• ایجاد نقطه پایانی API New-Image Creating New-Image API Endpoint

• ایجاد نقطه پایانی API New-Image Creating New-Image API Endpoint

• آزمایش New-Image API Endpoint با استفاده از Postman Testing New-Image API Endpoint Using Postman

• آزمایش New-Image API Endpoint با استفاده از Postman Testing New-Image API Endpoint Using Postman

• ایجاد درخواست API به Unsplash API Making API Request to the Unsplash API

• ایجاد درخواست API به Unsplash API Making API Request to the Unsplash API

• درخواست API را به Unsplash API نهایی و آزمایش کنید Finalize and Test API Request to the Unsplash API

• درخواست API را به Unsplash API نهایی و آزمایش کنید Finalize and Test API Request to the Unsplash API

ایجاد نقطه پایانی New-Image Flask API و آزمایش آن با استفاده از Postman Creating New-Image Flask API Endpoint and Testing it Using Postman

وارد کردن متغیرهای ENV از فایل در برنامه پایتون Importing ENV Variables from the File in the Python App

• استخراج UNSPLASH_KEY در فایل ENV Extracting UNSPLASH_KEY to the ENV File

• استخراج UNSPLASH_KEY در فایل ENV Extracting UNSPLASH_KEY to the ENV File

• بررسی استفاده از متغیرهای ENV از فایل Verifying Usage of the ENV Variables from the File

• بررسی استفاده از متغیرهای ENV از فایل Verifying Usage of the ENV Variables from the File

• فعال کردن حالت اشکال زدایی در برنامه Flask Enabling Debug Mode in the Flask App

• فعال کردن حالت اشکال زدایی در برنامه Flask Enabling Debug Mode in the Flask App

وارد کردن متغیرهای ENV از فایل در برنامه پایتون Importing ENV Variables from the File in the Python App

پیکربندی برنامه Frontend برای ایجاد درخواست های جدید تصویر API از طریق Flask API Configuring Frontend App to Make New Image API Requests Via Flask API

• تغییر API در برنامه Frontend React Changing API in the Frontend React App

• تغییر API در برنامه Frontend React Changing API in the Frontend React App

• تلاش برای آزمایش برنامه Frontend با Flask API Trying to test Frontend App with Flask API

• تلاش برای آزمایش برنامه Frontend با Flask API Trying to test Frontend App with Flask API

پیکربندی برنامه Frontend برای ایجاد درخواست های جدید تصویر API از طریق Flask API Configuring Frontend App to Make New Image API Requests Via Flask API

CORS و فعال کردن CORS در برنامه Flask CORS and Enabling CORS in the Flask App

• CORS چیست What is CORS

• CORS چیست What is CORS

• مقایسه پاسخ‌های Flask API و Unsplash API Comparing Responses from the Flask API and Unsplash API

• مقایسه پاسخ‌های Flask API و Unsplash API Comparing Responses from the Flask API and Unsplash API

• فعال کردن CORS در برنامه Flask Enabling CORS in the Flask App

• فعال کردن CORS در برنامه Flask Enabling CORS in the Flask App

• نصب و فعال سازی Pylint linter و Black Formatter Installing and Enabling Pylint linter and Black Formatter

• نصب و فعال سازی Pylint linter و Black Formatter Installing and Enabling Pylint linter and Black Formatter

• فعال کردن قالب بندی در ذخیره و رفع همه اشتباهات در برنامه پایتون Enabling Formatting on Save and Fixing all Mistakes in the Python App

• فعال کردن قالب بندی در ذخیره و رفع همه اشتباهات در برنامه پایتون Enabling Formatting on Save and Fixing all Mistakes in the Python App

• خلاصه پایه API Basic API Summary

• خلاصه پایه API Basic API Summary

CORS و فعال کردن CORS در برنامه Flask CORS and Enabling CORS in the Flask App

طرح یکپارچه سازی پایگاه داده Database Integration Plan

• زمان ذخیره داده های تصاویر در پایگاه داده است It is Time to Save Images Data to the Database

• زمان ذخیره داده های تصاویر در پایگاه داده است It is Time to Save Images Data to the Database

• ساختار برنامه با پایگاه داده Application Structure with Database

• ساختار برنامه با پایگاه داده Application Structure with Database

• مراحل پیاده سازی برای ذخیره داده های تصاویر در پایگاه داده Implementation Steps for Saving Images Data in the Database

• مراحل پیاده سازی برای ذخیره داده های تصاویر در پایگاه داده Implementation Steps for Saving Images Data in the Database

• تمام نقاط پایانی API در مرحله اجرای فعلی All API Endpoints in the Current Implementation Phase

• تمام نقاط پایانی API در مرحله اجرای فعلی All API Endpoints in the Current Implementation Phase

طرح یکپارچه سازی پایگاه داده Database Integration Plan

Dockerizing Backend Flask API Service Dockerizing Backend Flask API Service

• نصب Docker و Hello-World با استفاده از Docker Installing Docker and Hello-World Using Docker

• نصب Docker و Hello-World با استفاده از Docker Installing Docker and Hello-World Using Docker

• ایجاد Dockerfile برای سرویس Python API Creating Dockerfile for the Python API Service

• ایجاد Dockerfile برای سرویس Python API Creating Dockerfile for the Python API Service

• ساختن تصویر داکر برای سرویس API Building Docker Image for the API Service

• ساختن تصویر داکر برای سرویس API Building Docker Image for the API Service

• اجرای کانتینرهای API بر اساس تصویر Docker ساخته شده Running API Containers Based on the Built Docker Image

• اجرای کانتینرهای API بر اساس تصویر Docker ساخته شده Running API Containers Based on the Built Docker Image

• تجزیه و تحلیل API Docker Container از داخل Analyzing API Docker Container from Inside

• تجزیه و تحلیل API Docker Container از داخل Analyzing API Docker Container from Inside

• تصویر Docker برای خلاصه سرویس API Docker Image for the API Service Summary

• تصویر Docker برای خلاصه سرویس API Docker Image for the API Service Summary

Dockerizing Backend Flask API Service Dockerizing Backend Flask API Service

Dockerizing Frontend React Application Dockerizing Frontend React Application

• ایجاد Dockerfile برای برنامه Frontend Creating Dockerfile for the Frontend Application

• ایجاد Dockerfile برای برنامه Frontend Creating Dockerfile for the Frontend Application

• ساختن تصویر Docker برای برنامه Frontend Building Docker Image for the Frontend App

• ساختن تصویر Docker برای برنامه Frontend Building Docker Image for the Frontend App

• در حال اجرا Docker Container برای سرویس Frontend Running Docker Container for the Frontend Service

• در حال اجرا Docker Container برای سرویس Frontend Running Docker Container for the Frontend Service

• کاوش کانتینر Frontend از داخل Exploring Frontend Container from Inside

• کاوش کانتینر Frontend از داخل Exploring Frontend Container from Inside

• چرا باید پوشه Node_Modules و Python Venv را به صورت محلی داشته باشید Why You Need to have Node_Modules Folder and Python Venv Folder Locally

• چرا باید پوشه Node_Modules و Python Venv را به صورت محلی داشته باشید Why You Need to have Node_Modules Folder and Python Venv Folder Locally

• اجرای هر دو کانتینر Frontend و API در پس زمینه Running Both Frontend and API Containers in Background

• اجرای هر دو کانتینر Frontend و API در پس زمینه Running Both Frontend and API Containers in Background

Dockerizing Frontend React Application Dockerizing Frontend React Application

Docker Compose برای خدمات API و Frontend Docker Compose for the API and Frontend Services

• ایجاد فایل پایه Docker-Compose Creating Basic Docker-Compose File

• ایجاد فایل پایه Docker-Compose Creating Basic Docker-Compose File

• آوردن هر دو کانتینر با استفاده از Docker-Compose Bringing Up Both Containers Using Docker-Compose

• آوردن هر دو کانتینر با استفاده از Docker-Compose Bringing Up Both Containers Using Docker-Compose

• نحوه کار با کانتینرها با استفاده از Docker-Compose How to Operate Containers Using Docker-Compose

• نحوه کار با کانتینرها با استفاده از Docker-Compose How to Operate Containers Using Docker-Compose

• ایجاد نقشه برداری حجم برای سرویس Frontend Creating Volumes Mapping for the Frontend Service

• ایجاد نقشه برداری حجم برای سرویس Frontend Creating Volumes Mapping for the Frontend Service

• رفع همگام سازی حجم ها در ظرف React Fix Volumes Sync in the React Container

• رفع همگام سازی حجم ها در ظرف React Fix Volumes Sync in the React Container

• فعال کردن نگاشت حجم برای سرویس API Enabling Volumes Mapping for the API Service

• فعال کردن نگاشت حجم برای سرویس API Enabling Volumes Mapping for the API Service

• فعال کردن راه‌اندازی خودکار و خلاصه نوشتن Docker Enabling Auto-Restart and Docker-Compose Summary

• فعال کردن راه‌اندازی خودکار و خلاصه نوشتن Docker Enabling Auto-Restart and Docker-Compose Summary

Docker Compose برای خدمات API و Frontend Docker Compose for the API and Frontend Services

افزودن MongoDB به Docker Compose Adding MongoDB to the Docker Compose

• چرا به خدمات Mongo و Mongo-Express نیاز داریم؟ Why do we Need Mongo and Mongo-Express Services

• چرا به خدمات Mongo و Mongo-Express نیاز داریم؟ Why do we Need Mongo and Mongo-Express Services

• نمای کلی تصاویر Docker رسمی Mongo و Mongo-Express Mongo and Mongo-Express Official Docker Images Overview

• نمای کلی تصاویر Docker رسمی Mongo و Mongo-Express Mongo and Mongo-Express Official Docker Images Overview

• افزودن خدمات Mongo و Mongo-Express به فایل Docker-Compose Adding Mongo and Mongo-Express Services to the Docker-Compose File

• افزودن خدمات Mongo و Mongo-Express به فایل Docker-Compose Adding Mongo and Mongo-Express Services to the Docker-Compose File

• شروع همه خدمات از جمله Mongo و Mongo-Express با استفاده از Docker-Compose Starting All Services Including Mongo and Mongo-Express Using Docker-Compose

• شروع همه خدمات از جمله Mongo و Mongo-Express با استفاده از Docker-Compose Starting All Services Including Mongo and Mongo-Express Using Docker-Compose

• نمای کلی دسکتاپ Docker Docker Desktop Overview

• نمای کلی دسکتاپ Docker Docker Desktop Overview

• با استفاده از MongoDB Shell و Mongo-Express GUI Using MongoDB Shell and Mongo-Express GUI

• با استفاده از MongoDB Shell و Mongo-Express GUI Using MongoDB Shell and Mongo-Express GUI

افزودن MongoDB به Docker Compose Adding MongoDB to the Docker Compose

حجم پایدار برای MongoDB و شبکه Docker Persistent Volume for MongoDB and Docker Networking

• داده های MongoDB اکنون پس از راه اندازی مجدد Docker-Compose حذف می شوند MongoDB Data is Now Deleted After Docker-Compose Restart

• داده های MongoDB اکنون پس از راه اندازی مجدد Docker-Compose حذف می شوند MongoDB Data is Now Deleted After Docker-Compose Restart

• پیکربندی حجم داده پایدار برای کانتینر Mongo Configuring Persistent Data Volume for the Mongo Container

• پیکربندی حجم داده پایدار برای کانتینر Mongo Configuring Persistent Data Volume for the Mongo Container

• تأیید ذخیره سازی دائمی MongoDB با استفاده از Volume Verifying Persistent MongoDB Storage Using Volume

• تأیید ذخیره سازی دائمی MongoDB با استفاده از Volume Verifying Persistent MongoDB Storage Using Volume

• خلاصه راه اندازی Mongo و Mongo-Express Mongo and Mongo-Express Setup Summary

• خلاصه راه اندازی Mongo و Mongo-Express Mongo and Mongo-Express Setup Summary

• چگونه کانتینرهای Docker-Compose با یکدیگر ارتباط برقرار می کنند How Docker-Compose Containers Communicate with Each Other

• چگونه کانتینرهای Docker-Compose با یکدیگر ارتباط برقرار می کنند How Docker-Compose Containers Communicate with Each Other

• کاوش در شبکه بین کانتینرهای Docker Exploring Networking Between Docker Containers

• کاوش در شبکه بین کانتینرهای Docker Exploring Networking Between Docker Containers

حجم پایدار برای MongoDB و شبکه Docker Persistent Volume for MongoDB and Docker Networking

نقطه پایانی API برای خواندن و ایجاد تصاویر در پایگاه داده API endpoint for reading and creating images in the database

• برنامه ریزی برای ادغام MongoDB و سرویس API Flask Plan for the Integration of the MongoDB and Flask API Service

• برنامه ریزی برای ادغام MongoDB و سرویس API Flask Plan for the Integration of the MongoDB and Flask API Service

• شروع - نصب PyMongo BEGIN - Installing PyMongo

• شروع - نصب PyMongo BEGIN - Installing PyMongo

• ایجاد نمونه MongoClient Creating Instance of the MongoClient

• ایجاد نمونه MongoClient Creating Instance of the MongoClient

• افزودن درج سند به MongoDB توسط سرویس API Python Adding Insertion of the Document to the MongoDB by Python API Service

• افزودن درج سند به MongoDB توسط سرویس API پایتون Adding Insertion of the Document to the MongoDB by Python API Service

• بازسازی API Service Docker Image Rebuilding API Service Docker Image

• بازسازی API Service Docker Image Rebuilding API Service Docker Image

• پایان - خلاصه تست اتصال PyMongo و Mongo END - PyMongo and Mongo Connectivity Testing Summary

• پایان - خلاصه تست اتصال PyMongo و Mongo END - PyMongo and Mongo Connectivity Testing Summary

• BEGIN - نقطه پایانی API جدید برای خواندن و ایجاد تصاویر در پایگاه داده BEGIN - New API Endpoint for Reading and Creating Images in the Database

• BEGIN - نقطه پایانی API جدید برای خواندن و ایجاد تصاویر در پایگاه داده BEGIN - New API Endpoint for Reading and Creating Images in the Database

• افزودن نقطه پایانی تصاویر و رسیدگی به درخواست‌های GET Adding Images Endpoint and Handling GET Requests

• افزودن نقطه پایانی تصاویر و رسیدگی به درخواست‌های GET Adding Images Endpoint and Handling GET Requests

• رسیدگی به درخواست‌های POST به نقطه پایانی تصویر Handling POST Requests to the Image's Endpoint

• رسیدگی به درخواست‌های POST به نقطه پایانی تصویر Handling POST Requests to the Image's Endpoint

• آزمایش روش‌های GET و POST در Images API Testing GET and POST Methods in the Images API

• آزمایش روش‌های GET و POST در Images API Testing GET and POST Methods in the Images API

• رفع خطاها در Images API Fixing Errors in the Images API

• رفع خطاها در Images API Fixing Errors in the Images API

• پایان - با آزمایش API تصاویر پس از رفع خطاها نهایی شود END - Finalize with Testing of the Images API After Errors Fixing

• پایان - با آزمایش API تصاویر پس از رفع خطاها نهایی شود END - Finalize with Testing of the Images API After Errors Fixing

• Images API Endpoint خلاصه Images API Endpoint Summary

• Images API Endpoint خلاصه Images API Endpoint Summary

نقطه پایانی API برای خواندن و ایجاد تصاویر در پایگاه داده API endpoint for reading and creating images in the database

ذخیره و خواندن تصاویر از پایگاه داده در برنامه Frontend Saving and Reading Images from the Database in the Frontend App

• ذخیره و دریافت تصاویر در نمای کلی اجرای Frontend Save and Get Images in the Frontend Implementation Overview

• ذخیره و دریافت تصاویر در نمای کلی اجرای Frontend Save and Get Images in the Frontend Implementation Overview

• شروع - نصب Axios در برنامه Frontend و بازسازی تصویر Frontend BEGIN - Installing Axios in the Frontend App and Rebuilding Frontend Image

• شروع - نصب Axios در برنامه Frontend و بازسازی تصویر Frontend BEGIN - Installing Axios in the Frontend App and Rebuilding Frontend Image

• شروع جایگزینی Fetch با Axios Start of the Replacement of the Fetch with Axios

• شروع جایگزینی Fetch با Axios Start of the Replacement of the Fetch with Axios

• پایان - به جایگزینی Fetch با Axios ادامه دهید END - Continue Replacement of the Fetch with Axios

• پایان - به جایگزینی Fetch با Axios ادامه دهید END - Continue Replacement of the Fetch with Axios

• شروع - اضافه کردن برخی از تصاویر به پایگاه داده Mongo با استفاده از Postman BEGIN - Adding Some Images to the Mongo Database Using Postman

• شروع - اضافه کردن برخی از تصاویر به پایگاه داده Mongo با استفاده از Postman BEGIN - Adding Some Images to the Mongo Database Using Postman

• بازیابی تصاویر ذخیره شده هنگام بارگیری برنامه React Retrieving Saved Images when React App Loads

• بازیابی تصاویر ذخیره شده هنگام بارگیری برنامه React Retrieving Saved Images when React App Loads

• پایان - بررسی نحوه عملکرد useEffect END - Examining how useEffect Works

• پایان - بررسی نحوه عملکرد useEffect END - Examining how useEffect Works

• BEGIN and END - توضیح خطای ESLint و گسترش پیکربندی ESLint BEGIN and END - Explaining ESLint Error and Extending ESLint Config

• BEGIN and END - توضیح خطای ESLint و گسترش پیکربندی ESLint BEGIN and END - Explaining ESLint Error and Extending ESLint Config

• شروع - ذخیره تصاویر در پایگاه داده از برنامه Frontend BEGIN - Saving Images in the Database from the Frontend App

• شروع - ذخیره تصاویر در پایگاه داده از برنامه Frontend BEGIN - Saving Images in the Database from the Frontend App

• پایان - پنهان کردن دکمه ذخیره برای تصاویر از قبل ذخیره شده END - Hiding Save Button for Already Saved Images

• پایان - پنهان کردن دکمه ذخیره برای تصاویر از قبل ذخیره شده END - Hiding Save Button for Already Saved Images

• ذخیره تصاویر در خلاصه پایگاه داده Saving Images in the Database Summary

• ذخیره تصاویر در خلاصه پایگاه داده Saving Images in the Database Summary

ذخیره و خواندن تصاویر از پایگاه داده در برنامه Frontend Saving and Reading Images from the Database in the Frontend App

حذف تصاویر و بهبودهای Frontend Deleting Images and Frontend Improvements

• برنامه ریزی برای بخش بهبود Plan for the Improvements Section

• برنامه ریزی برای بخش بهبود Plan for the Improvements Section

• نحوه مدیریت حذف تصاویر How to Handle Deletion of the Images

• نحوه مدیریت حذف تصاویر How to Handle Deletion of the Images

• BEGIN - حذف Image API Endpoint Challenge BEGIN - Delete Image API Endpoint Challenge

• BEGIN - حذف Image API Endpoint Challenge BEGIN - Delete Image API Endpoint Challenge

• حذف Image API Endpoint Solution Delete Image API Endpoint Solution

• حذف Image API Endpoint Solution Delete Image API Endpoint Solution

• پایان - مدیریت خطا برای نقطه پایانی API حذف تصویر END - Error Handling for the Delete Image API Endpoint

• پایان - مدیریت خطا برای نقطه پایانی API حذف تصویر END - Error Handling for the Delete Image API Endpoint

• BEGIN - درخواست تصویر را در چالش Frontend حذف کنید BEGIN - Delete Image Request in the Frontend Challenge

• BEGIN - درخواست تصویر را در چالش Frontend حذف کنید BEGIN - Delete Image Request in the Frontend Challenge

• END - درخواست تصویر را در راه حل Frontend حذف کنید END - Delete Image Request in the Frontend Solution

• END - درخواست تصویر را در راه حل Frontend حذف کنید END - Delete Image Request in the Frontend Solution

• شروع - چالش اسپینر BEGIN - Spinner Challenge

• شروع - چالش اسپینر BEGIN - Spinner Challenge

• راه حل اسپینر Spinner Solution

• راه حل اسپینر Spinner Solution

• پایان - با راه حل Spinner نهایی کنید END - Finalize with Spinner Solution

• پایان - با راه حل Spinner نهایی کنید END - Finalize with Spinner Solution

• BEGIN - چالش اطلاعات نویسنده تصویر BEGIN - Image Author Information Challenge

• BEGIN - چالش اطلاعات نویسنده تصویر BEGIN - Image Author Information Challenge

• پایان - راه حل اطلاعات نویسنده تصویر END - Image Author Information Solution

• پایان - راه حل اطلاعات نویسنده تصویر END - Image Author Information Solution

• BEGIN - چالش اعلان‌های نان تست BEGIN - Toast Notifications Challenge

• BEGIN - چالش اعلان‌های نان تست BEGIN - Toast Notifications Challenge

• راه حل اعلان های نان تست Toast Notifications Solution

• راه حل اعلان های نان تست Toast Notifications Solution

• پایان - با راه حل اعلان های نان تست نهایی کنید END - Finalize with Toast Notifications Solution

• پایان - با راه حل اعلان های نان تست نهایی کنید END - Finalize with Toast Notifications Solution

• خلاصه بخش چالش های بهبودها Improvements Challenges Section Summary

• خلاصه بخش چالش های بهبودها Improvements Challenges Section Summary

حذف تصاویر و بهبودهای Frontend Deleting Images and Frontend Improvements

دوره های تصادف Crash Courses

• بررسی اجمالی بخش دوره های تصادف Crash Courses Section Overview

• بررسی اجمالی بخش دوره های تصادف Crash Courses Section Overview

• دوره سقوط شل و ترمینال Shell and Terminal Crash Course

• دوره سقوط شل و ترمینال Shell and Terminal Crash Course

• دوره آموزشی خرابی کد ویژوال استودیو Visual Studio Code Crash Course

• دوره آموزشی خرابی کد ویژوال استودیو Visual Studio Code Crash Course

• دوره Crash Git و GitHub Git and GitHub Crash Course

• دوره Crash Git و GitHub Git and GitHub Crash Course

• دوره خرابی جاوا اسکریپت JavaScript Crash Course

• دوره خرابی جاوا اسکریپت JavaScript Crash Course

• دوره تصادف NPM NPM Crash Course

• دوره تصادف NPM NPM Crash Course

• React Crash Course React Crash Course

• React Crash Course React Crash Course

• دوره سقوط پایتون Python Crash Course

• دوره سقوط پایتون Python Crash Course

دوره های تصادف Crash Courses