آموزش بوت کمپ توسعه وب Full Stack

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

معرفی Introduction

• معرفی Introduction

• بیا وصل بشیم به انجمن یادگیری بپیوندید Let's get connected! Join the Learning Community

• ☝️چگونه راهنمایی کنید☝️ ☝️Grab HOW-TO-GUIDE☝️

• بررسی اجمالی فایل های پروژه دوره Course Project Files Overview

• پروژه دوره GitHub Repository Course project GitHub Repository

• ساختار دوره COURSE STRUCTURE

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

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

شروع پروژه - نمای کلی برنامه مقدماتی اولیه PROJECT START - Initial frontend app Overview

• بخش های تکمیلی Supplementary sections

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

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

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

• نحوه ایجاد React Application جدید How to create new React Application

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

ایجاد اپلیکیشن React و نحوه عملکرد React Creating React application and how React works

• شروع - ایجاد React Application با استفاده از create-react-app BEGIN - Creating React Application using create-react-app

• شروع React Application Starting React Application

• ساختار برنامه Frontend Structure of the Frontend app

• نصب مجدد وابستگی های npm Reinstalling npm dependencies

• ایجاد و ارائه بهینه سازی شده برنامه Frontend Creating and serving optimized build of the Frontend app

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

• پاک کردن برنامه پیش‌فرض React Cleaning up default React application

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

• React Components Functional React Functional Components

راه اندازی Git و ایجاد مخزن از راه دور GitHub Initializing Git and creating remote GitHub repository

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

• پایان - ایجاد اولین commit END - Creating first commit

• BEGIN و END - افزودن فایل eslintcache به gitignore BEGIN and END - Adding eslintcache file to the gitignore

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

React props و ایجاد مولفه های Header و Search React props and creation of the Header and Search components

• BEGIN and END - تغییر فاویکون BEGIN and END - Changing Favicon

• BEGIN - ایجاد جزء سرصفحه BEGIN - Creating Header component

• پایان - React props چیست؟ END - What are React props

• BEGIN - برای ایجاد جزء جستجو برنامه ریزی کنید BEGIN - Plan for creation of the Search component

• ایجاد جزء جستجو با فرم ورودی Creating Search component with input form

• مولفه جستجوی سبک Styling Search component

• ارسال فرم جستجو Submission of the search form

• جزء جستجوی کنترل شده Controlled Search component

• پایان - خلاصه مولفه جستجو END - Search Component Summary

• غیرفعال کردن ویژگی حاشیه نویسی سرزنش GitLens Disabling GitLens blame annotations feature

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

• شروع - ایجاد حساب کاربری در Unsplash و ثبت برنامه جدید BEGIN - Creating account at Unsplash and registering new App

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

• نحوه ایجاد درخواست Unsplash API و URL چیست How to make Unsplash API request and what is URL

• پایان - ایجاد اولین درخواست API برای عکس تصادفی END - Making first API request for random photo

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

• BEGIN - CHALLENGE - ورودی جستجو را پاک کنید BEGIN - CHALLENGE - Clear search input

• پایان - راه حل چالش - ورودی جستجو را پاک کنید END - CHALLENGE SOLUTION - Clear search input

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

• BEGIN - فرمت کننده کد چیست؟ BEGIN - What is code formatter

• لینتر چیست What is linter

• اعتبارسنجی ESLint را پیکربندی کنید Configure ESLint validation

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

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

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

• پایان - اضافه کردن اسکریپت های NPM linting END - Adding NPM linting scripts

• BEGIN and END - رفع تمام خطاهای پرده زدن BEGIN and END - Fixing all linting errors

• BEGIN و END - تغییر اندازه تب ویرایشگر در VS Code BEGIN and END - Changing editor tabSize in VS Code

• خلاصه تنظیم ESLint با زیباتر ESLint with Prettier setup Summary

ذخیره تصاویر در حالت و حذف آنها در UI Saving images in the state and deleting them in the UI

• BEGIN - برنامه ریزی مراحل بعدی در ساخت اپلیکیشن frontend BEGIN - Planning next steps in building frontend app

• ذخیره تصاویر در ایالت Saving images in the state

• END - State در React به صورت ناهمزمان به روز می شود END - State in React is updated asynchronously

• BEGIN - افزودن پسوند کروم React Developer Tools BEGIN - Adding React Developer Tools Chrome extension

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

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

• نمایش تمام تصاویر در UI با استفاده از روش نقشه Displaying all images in the UI using map method

• طرح بندی کارت های تصویر را تنظیم کنید Adjust layout of the image cards

• پایان - اضافه کردن قابلیت حذف تصاویر END - Adding delete images functionality

اضافه کردن آرم SVG و مؤلفه خوش آمد گویی Adding SVG logo and Welcome component

• BEGIN - ایجاد آرم SVG از متن BEGIN - Creating SVG logo from text

• پایان - ویرایش لوگوی SVG END - Editing SVG logo

• BEGIN and END - افزودن مؤلفه خوش آمد گویی BEGIN and END - Adding Welcome component

• خلاصه برنامه مقدماتی Basic frontend app Summary

• بررسی پایه کدهای اپلیکیشن frontend Basic frontend app codebase review

• BEGIN و END - در حال به روز رسانی برنامه create-react-app BEGIN and END - Updating create-react-app application

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

• API کدام مشکلات را حل می کند Which problems API does solve

• ارتباط مشتری و سرور Client-server communication

• REST API REST API

• URL یک شناسه منبع منحصر به فرد است URL is unique resource identifier

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

• تجزیه و تحلیل درخواست ها و پاسخ ها در برنامه Frontend ما Analyzing requests and responses in our Frontend app

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

• عملیات CRUD CRUD Operations

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

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

• رایج ترین کدهای وضعیت موفقیت و تغییر مسیر HTTP Most common Success and Redirect HTTP status codes

• رایج ترین کدهای وضعیت خطای سرویس گیرنده و سرور Most common Client and Server Error status codes

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

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

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

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

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

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

ایجاد محیط مجازی پایتون برای برنامه api با استفاده از pipenv Creating Python Virtual Environment for api application using pipenv

• شروع - ایجاد پوشه api و اجرای برنامه پایه پایتون BEGIN - Creating api folder and running basic Python app

• ساخت Python virtualenv و نصب Flask Creating Python virtualenv and installing Flask

• پایان - کاوش Python virtualenv و تغییر مفسر VS Code Python END - Exploring Python virtualenv and changing VS Code Python interpreter

ایجاد و راه اندازی وب سرور ساده Flask Creating and starting simple Flask web server

• توجه برای کاربران ویندوز NOTE for Windows Users

• BEGIN - برنامه ساده Flask BEGIN - Simple Flask application

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

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

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

• پایان - شروع برنامه Flask در داخل ماژول END - Starting Flask app inside of the module

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

ایجاد نقطه پایانی Flask API با تصویر جدید و آزمایش آن با استفاده از Postman Creating new-image Flask API endpoint and testing it using Postman

• BEGIN - ایجاد نقطه پایانی API با تصویر جدید BEGIN - Creating new-image API endpoint

• آزمایش نقطه پایانی API تصویر جدید با استفاده از Postman Testing new-image API endpoint using Postman

• درخواست API به Unsplash API Making API request to the Unsplash API

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

وارد کردن متغیرهای env از فایل در برنامه پایتون Importing env variables from the file in the Python app

• استخراج UNSPLASH_KEY در فایل env Extracting UNSPLASH_KEY to the env file

• پایان - تأیید استفاده از متغیرهای env از فایل END - Verifying usage of the env variables from the file

• BEGIN و END - فعال کردن حالت Debug در برنامه Flask BEGIN and END - Enabling Debug mode in the Flask app

پیکربندی برنامه frontend برای ایجاد درخواست های جدید API تصویر از طریق Flask API Configuring frontend app to make new image API requests via Flask API

• BEGIN - تغییر API در برنامه React frontend BEGIN - Changing API in the frontend React app

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

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

• CORS چیست What is CORS

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

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

• BEGIN - نصب و فعال کردن Pylint linter و Black formatter BEGIN - Installing and enabling Pylint linter and Black formatter

• پایان - فعال کردن قالب بندی در ذخیره و رفع همه اشتباهات در برنامه پایتون END - Enabling formatting on save and fixing all mistakes in the Python app

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

طرح یکپارچه سازی پایگاه داده Database integration plan

• زمان ذخیره داده های تصاویر در پایگاه داده فرا رسیده است It is time to save images data to the database

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

• مراحل پیاده سازی برای ذخیره داده های تصاویر در پایگاه داده Implementation steps for saving images data in the database

• تمام نقاط پایانی API در مرحله اجرای فعلی All API endpoints in the current implementation phase

Dockerizing Backend Flask API Service Dockerizing Backend Flask API Service

• نصب Docker و hello-world با استفاده از Docker Installing Docker and hello-world using Docker

• BEGIN - ایجاد Dockerfile برای سرویس Python API BEGIN - Creating Dockerfile for the Python API service

• نحوه درست تولید فایل requirements.txt How to properly generate requirements.txt file

• ساختن تصویر Docker برای سرویس API Building Docker image for the API service

• اجرای کانتینرهای API بر اساس تصویر ساخته شده Docker Running API containers based on the built Docker image

• تجزیه و تحلیل کانتینر API Docker از داخل Analyzing API Docker container from inside

• پایان - تصویر داکر برای خلاصه سرویس API END - Docker image for the API service Summary

Dockerizing Frontend React Application Dockerizing Frontend React Application

• BEGIN - ایجاد Dockerfile برای برنامه frontend BEGIN - Creating Dockerfile for the frontend application

• ساختن تصویر Docker برای برنامه frontend Building Docker image for the frontend app

• END - در حال اجرا کانتینر Docker برای سرویس frontend END - Running Docker container for the frontend service

• کاوش کانتینر جلویی از داخل Exploring frontend container from inside

• چرا باید پوشه node_modules و پوشه پایتون venv را به صورت محلی داشته باشید Why you need to have node_modules folder and python venv folder locally

• اجرای هر دو کانتینر frontend و api در پس زمینه Running both frontend and api containers in background

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

• BEGIN - ایجاد فایل پایه docker-compose BEGIN - Creating basic docker-compose file

• آوردن هر دو ظرف با استفاده از docker-compose Bringing up both containers using docker-compose

• پایان - نحوه کار با کانتینرها با استفاده از docker-compose END - How to operate containers using docker-compose

• BEGIN - ایجاد نقشه برداری حجم برای سرویس frontend BEGIN - Creating volumes mapping for the frontend service

• رفع همگام سازی حجم ها در ظرف React Fix volumes sync in the React container

• فعال کردن نگاشت حجم برای سرویس api Enabling volumes mapping for the api service

• پایان - فعال کردن راه‌اندازی مجدد خودکار و خلاصه نوشتن docker END - Enabling auto-restart and docker-compose Summary

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

• چرا به خدمات mongo و mongo-express نیاز داریم؟ Why do we need mongo and mongo-express services

• نمای کلی تصاویر رسمی Docker Mongo و mongo-express Mongo and mongo-express official Docker images Overview

• BEGIN - افزودن خدمات mongo و mongo-express به فایل docker-compose BEGIN - 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

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

• با استفاده از پوسته MongoDB و رابط کاربری گرافیکی mongo-express Using MongoDB shell and mongo-express GUI

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

• داده های MongoDB اکنون پس از راه اندازی مجدد docker-compose حذف می شوند MongoDB data is now deleted after docker-compose restart

• پیکربندی حجم داده دائمی برای کانتینر مونگو Configuring persistent data volume for the mongo container

• تأیید ذخیره سازی دائمی MongoDB با استفاده از حجم Verifying persistent MongoDB storage using volume

• پایان - خلاصه تنظیم Mongo و mongo-express END - Mongo and mongo-express setup Summary

• چگونه کانتینرهای docker-compose با یکدیگر ارتباط برقرار می کنند How docker-compose containers communicate with each other

• کاوش در شبکه بین کانتینرهای Docker Exploring networking between Docker containers

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

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

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

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

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

• بازسازی تصویر Docker سرویس api Rebuilding api service Docker image

• پایان - خلاصه آزمایش اتصال Pymongo و mongo END - Pymongo and mongo connectivity testing Summary

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

• افزودن نقطه پایانی تصاویر و رسیدگی به درخواست‌های GET Adding images endpoint and handling GET requests

• رسیدگی به درخواست‌های POST به نقطه پایانی تصاویر Handling POST requests to the images endpoint

• آزمایش روش های GET و POST در تصاویر API Testing GET and POST methods in the images API

• رفع خطاهای موجود در تصاویر API Fixing errors in the images API

• پایان - با آزمایش API تصاویر پس از رفع خطاها نهایی شود END - Finalize with testing of the images API after errors fixing

• خلاصه نقطه پایانی Images API Images API endpoint Summary

ذخیره و خواندن تصاویر از پایگاه داده در برنامه frontend Saving and reading images from the database in the frontend app

• ذخیره و دریافت تصاویر در نمای کلی اجرای 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 Start of the replacement of the fetch with Axios

• پایان - به جایگزینی واکشی با Axios ادامه دهید END - Continue replacement of the fetch with Axios

• شروع - اضافه کردن برخی از تصاویر به پایگاه داده Mongo با استفاده از Postman BEGIN - Adding some images to the Mongo database using Postman

• بازیابی تصاویر ذخیره شده هنگام بارگیری برنامه React Retrieving saved images when React app loads

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

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

• شروع - ذخیره تصاویر در پایگاه داده از برنامه frontend BEGIN - Saving images in the database from the frontend app

• پایان - پنهان کردن دکمه ذخیره برای تصاویر ذخیره شده قبلی END - Hiding Save button for already saved images

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

حذف تصاویر و بهبودهای ظاهری Deleting images and frontend improvements

• برای بخش بهبود برنامه ریزی کنید Plan for the improvements section

• نحوه مدیریت حذف تصاویر How to handle deletion of the images

• BEGIN - حذف API تصویر چالش نقطه پایانی BEGIN - Delete image API endpoint CHALLENGE

• حذف نقطه پایانی API تصویر SOLUTION Delete image API endpoint SOLUTION

• پایان - رسیدگی به خطا برای نقطه پایانی API حذف تصویر END - Error handling for the delete image API endpoint

• BEGIN - درخواست تصویر را در چالش frontend حذف کنید BEGIN - Delete image request in the frontend CHALLENGE

• END - حذف درخواست تصویر در SOLUTION ظاهری END - Delete image request in the frontend SOLUTION

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

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

• END - با Spinner SOLUTION نهایی کنید END - Finalize with Spinner SOLUTION

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

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

• BEGIN - چالش اعلان های نان تست BEGIN - Toast notifications CHALLENGE

• اعلان های نان تست راه حل Toast notifications SOLUTION

• پایان - با اعلان‌های نان تست نهایی راه‌حل END - Finalize with toast notifications SOLUTION

• خلاصه بخش پیشرفت ها چالش ها Improvements Challenges section Summary

ضمیمه ها مقدمه APPENDIXES INTRO

• به دوره های تصادف خوش آمدید Welcome to the Crash Courses

ضمیمه 1 - پوسته و پایانه APPENDIX 1 - Shell and Terminal

• شل در مقابل ترمینال Shell vs Terminal

• رابط خط فرمان Command Line Interface

• دایرکتوری های کاربر و ریشه User and root directories

• دایرکتوری های فعلی و والد Current and parent directories

• پیمایش بین دایرکتوری ها Navigation between directories

• لیست کردن فایل ها Listing files

• ایجاد و حذف فایل ها و دایرکتوری ها Creating and removing files and directories

• فایل های اجرایی Executable files

• چندین برگه Multiple tabs

ضمیمه 2 - کد ویژوال استودیو APPENDIX 2 - Visual Studio Code

• نصب VS Code Installing VS Code

• آشنایی با رابط کاربری VS Code Getting familiar with VS Code User Interface

• باز کردن پروژه موجود در VS Code Opening existing project in the VS Code

• ویرایش فایل ها و پیمایش بین فایل ها Editing files and navigating between files

• ایجاد و حذف فایل ها و پوشه های جدید Creating and deleting new files and folders

• راه اندازی سریع و تم Quick Setup and Themes

• تغییر تم آیکون Changing Icon Theme

• پشتیبانی از زبان های برنامه نویسی Programming Languages Support

• اجرای دستورات در VS Code Executing commands in VS Code

• ترمینال یکپارچه Integrated Terminal

• برنامه های افزودنی Extensions

• تغییر تنظیمات کاربر Modifying User Settings

• تغییر تنظیمات فضای کاری Modifying Workspace Settings

• زمین بازی تعاملی Interactive Playground

• قطعه کد Code Snippets

• امت Emmet

• میانبرها در VS Code Shortcuts in the VS Code

• خلاصه کد VS VS Code Summary

ضمیمه 3 - Git و GitHub APPENDIX 3 - Git and GitHub

• نمای کلی Git و GitHub Git and GitHub Overview

• نصب Git Installing Git

• راه اندازی مخزن جدید Git Initializing new Git Repository

• انواع شی Git Git Object Types

• هش های Git Objects Hashes of the Git Objects

• افزودن تغییرات به ناحیه مرحله بندی Adding changes to the Staging Area

• پیکربندی نام و ایمیل نویسنده Git Configuring Git author name and email

• انجام تغییرات Committing changes

• کاوش تاریخ را متعهد می کند Exploring commits history

• دستورات اولیه Git Basic Git Commands

• بررسی تعهدات و شاخه ها Checking out commits and branches

• وضعیت ردیابی فایل در Git File tracking statuses in Git

• مرحله بندی و انجام تغییرات با استفاده از یک دستور Staging and Committing changes using one command

• شاخه ها و ادغام شاخه ها Branches and merging of the branches

• ادغام شاخه ها در عمل Branches merging in action

• کاوش درخت commits با استفاده از گزینه گراف Exploring commits tree using graph option

• نمای کلی سرویس های میزبانی گیت هاب و مخزن GitHub and repository hosting services Overview

• ایجاد مخزن از راه دور در GitHub Creating remote repository at GitHub

• فشار دادن از مخزن محلی به راه دور Pushing from the local repository to remote

• متعهد شدن در GitHub و کشیدن به مخزن محلی Committing at GitHub and pulling to the local repository

• کاوش و خواندن Git Objects Exploring and reading Git Objects

• خواندن محتویات فایل HEAD Reading contents of the HEAD file

• خلاصه دوره Git Crash Git Crash Course Summary

ضمیمه 4 - جاوا اسکریپت APPENDIX 4 - JavaScript

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

• ایجاد پروژه دوره و راه اندازی Live Server Creating course project and starting Live Server

• اعلان متغیرها با استفاده از let و const Variables declaration using let and const

• قراردادهای نامگذاری در جاوا اسکریپت Naming conventions in JavaScript

• افزودن نظرات Adding Comments

• انواع اولیه و نوع عملگر Primitive Types and typeof operator

• اپراتور پلاس و انواع زور Plus operator and types coersion

• اپراتورها در جاوا اسکریپت چیست؟ What are Operators in JavaScript

• عبارات جاوا اسکریپت JavaScript Expressions

• اپراتورهای مقایسه Comparison Operators

• عملگرهای منطقی Logical Operators

• ارزش های نادرست Falsy values

• با عملگرهای منطقی ادامه دهید Continue with logical operators

• ارزیابی اتصال کوتاه در عملگرهای AND و OR Short-circuit evaluation in AND and OR operators

• اپراتور سه تایی Ternary Operator

• ایجاد و اصلاح اشیاء Objects creation and modification

• آبجکت در جاوا اسکریپت نوع مرجع است Object is Reference type in JavaScript

• علامت گذاری براکت ها، کلیدها و مقادیر شی Square brackets notation, keys and values of the object

• آرایه ها و اثبات شی بودن آرایه ها Arrays and proving that arrays are objects

• افزودن عناصر به آرایه ها Adding elements to the arrays

• روش های نمونه اولیه و حذف عناصر از آرایه Prototype methods and removing elements from the array

• کارکرد Functions

• محدوده تابع و متغیرها Function scope and variables

• پارامترهای تابع Function parameters

• مقادیر پیش‌فرض برای پارامترها و عملیات داخل تابع Default values for the parameters and operations inside of the function

• عبارات تابع پیکان Arrow function expressions

• گزینه های نحو در توابع فلش Syntax options in the arrow functions

• توابع پاسخ به تماس Callback functions

• ترتیب عملیات در جاوا اسکریپت Order of operations in JavaScript

• روش ها در اشیاء Methods in the objects

• تغییرات نحوی روشها Methods syntax variations

• ویژگی ها در مقابل روش ها در اشیا Properties vs Methods in the objects

• تخریب آرایه ها Arrays Destructuring

• تخریب اشیاء Objects Destructuring

• تخریب شیء پارامترهای تابع Object destructuring of the function parameters

• پارامترهای تابع تخریب ساختار و مقادیر پیش فرض Function parameters destructuring and default values

• الفبای رشته الگو Template String Literals

• اظهارات If و if else If and if else statements

ضمیمه 5 - NPM APPENDIX 5 - NPM

• نمای کلی دوره Crash NPM و نصب NPM NPM Crash Course Overview and NPM Installation

• راه اندازی NPM در پروژه جدید Initializing NPM in the new project

• به روز رسانی NPM Updating NPM

• نمای کلی فایل بسته Overview of the package file

• اجرای اسکریپت های NPM Running NPM Scripts

• نصب اولین وابستگی NPM Installing first NPM dependency

• نمای کلی پوشه node_modules Overview of the node_modules folder

• NPM وابستگی های دیگر را نیز نصب می کند NPM installs also other dependencies

• نسخه سازی بسته های NPM NPM packages versioning

• Semver - نسخه های ماژور، مینور و پچ Semver - Major, Minor and Patch versions

• ایجاد و اجرای برنامه اصلی Node.js Creating and running basic Node.js application

• ایجاد اسکریپت های سفارشی NPM Creating custom NPM scripts

• خلاصه پروژه Node.js Node.js project Summary

• به روز رسانی بسته ها را با استفاده از علائم tilda و caret محدود کنید Limit updates of the packages by using tilda and caret signs

• چگونه semver بر فرآیند نصب بسته های NPM تأثیر می گذارد How semver impacts NPM packages installation process

• Bootstraping برنامه React با استفاده از create-react-app Bootstraping React application using create-react-app

• بررسی اجمالی برنامه React React app Overview

• اجرای اسکریپت های مختلف NPM در برنامه React Running different NPM scripts in the React application

• ایجاد پروژه VUE.js در جعبه کد Creating VUE.js project at the codesandbox

• وابستگی های توسعه Development Dependencies

• خلاصه ویژگی های کلیدی NPM NPM key features Summary

• خلاصه دوره NPM Crash NPM Crash Course Summary

ضمیمه 6 - واکنش نشان دهید APPENDIX 6 - React

• بررسی اجمالی دوره React Crash React Crash Course Overview

• آشنایی با اپلیکیشن React و JSX Getting familiar with React application and JSX

• درج عناصر HTML در JSX Inserting HTML elements into the JSX

• سبک دادن به عناصر JSX Styling JSX elements

• کامپوننت های کاربردی در React Functional Components in React

• درج کد جاوا اسکریپت در JSX Inserting JavaScript code into the JSX

• ایجاد React Component جدید Creating new React Component

• استفاده از React Components در سایر کامپوننت ها Using React Components in the other Components

• اجزای سازنده در React Component props in the React

• تخریب اجزاء Destructuring Component props

• استفاده از Component props در JSX Using Component props in the JSX

• استفاده مجدد از همان React Component Reusing same React Component

• استفاده از Template String Literal به عنوان مقدار Component prop Using Template String Literal as value of the Component prop

• تلاش برای استفاده از متغیر منظم برای تغییرات حالت Trying to use regular variable for the state changes

• React State باید به جای متغیرهای معمولی استفاده شود React state must be used instead of the regular variables

• معرفی قلاب useState React برای مدیریت ایالت Introducing useState React hook for the state management

• تغییر حالت جزء از طریق قلاب Changing Component State via hook

• اجزای والد و فرزند پس از هر تغییر حالت، دوباره ارائه می شوند Parent and child components are re-rendered upon each state change

• React state و props خلاصه React state and props Summary

• خلاصه و چالش دوره Crash React React Crash Course Summary and Challenge

ضمیمه 7 - پایتون APPENDIX 7 - Python

• بررسی اجمالی دوره سقوط پایتون Python Crash Course Overview

• سلام از پایتون Hello from Python

• انواع پایه Base Types

• تبدیل بین انواع Conversion between types

• ارزش های نادرست Falsy values

• قراردادهای نامگذاری برای متغیرها و ثابت ها Naming conventions for variables and constants

• متغیرها و تایپ پویا Variables and Dynamic Typing

• انواع پایه بر اساس مقدار کپی می شوند Base types are copied by value

• متغیرهای افزایشی و کاهشی Incrementing and Decrementing variables

• لیست ها Lists

• تاپل ها Tuples

• لغت نامه ها Dictionaries

• کپی با مرجع Copy by Reference

• مجموعه ها Sets

• خلاصه انواع کانتینر Container Types Summary

• نصب و پیکربندی Code Runner در VS Code Installing and configuring Code Runner in the VS Code

• کارکرد Functions

• کارکرد Functions

• استدلال های موضعی Positional arguments

• آرگومان های کلیدواژه (نامگذاری شده). Keyword (Named) arguments

• جمع آوری تمام آرگومان های تاپل Gathering all arguments to the tuple

• تکرار بر روی مقادیر نوع ظرف با استفاده از for در حلقه Iteration over container type values using for in loop

• تابع کوارگ Function kwargs

• شرح عملکرد Function Description

• اپراتورهای مقایسه Comparison Operators

• اپراتورهای مقایسه Comparison Operators

• عملگر منطقی AND Logical operator AND

• ارزیابی اتصال کوتاه Short-circuit evaluation

• عملگر منطقی OR Logical operator OR

• عملگر منطقی NOT Logical operator NOT

• عملگرهای زنجیره ای و تقدم Chaining operators and precedence

• اگر عبارات مشروط If conditional statements

• قالب بندی رشته ها Strings formatting

• کنترل استثناها با استفاده از try به جز Exceptions handling using try except

• ماژول های پایتون Python Modules

ضمیمه 8 - داکر APPENDIX 8 - Docker

• نمای کلی داکر Docker Overview

• نصب Docker Desktop یا Docker Engine Installing Docker Desktop or Docker Engine

• ماشین‌های مجازی در مقابل کانتینرهای داکر Virtual Machines vs Docker Containers

• معماری ماشین های مجازی Virtual Machines Architecture

• نحوه استفاده از ماشین های مجازی How I use Virtual Machines

• Docker Containers Architecture Docker Containers Architecture

• نحوه اجرای Docker در سیستم عامل های مختلف How Docker is running on different Operating Systems

• فرآیندها و منابع کانتینری Container processes and resources

• بررسی اجمالی اجزای Docker Docker Components Overview

• مشتری داکر Docker Client

• سرور داکر Docker Server

• میزبان داکر Docker Host

• تصویر داکر Docker Image

• کانتینر داکر Docker Container

• مخزن داکر Docker Repository

• رجیستری داکر Docker Registry

• خلاصه اجزای Docker Docker Components Summary

• دستورات داکر در مقابل دستورات مدیریت Docker Commands vs Management Commands

• دستورات جایگزین Alternative Commands

• دستورات Basic Container و Images Basic Container and Images commands

• در حال تمیز کردن تنظیمات Docker من Cleaning up my Docker setup

• کشیدن تصاویر از داکر هاب Pulling images from the Docker Hub

• Docker Image چیست؟ What is Docker Image

• ایجاد کانتینر جدید از تصویر Creating new Container from the Image

• CMD در Docker Image چیست؟ What is CMD in the Docker Image

• Docker Container چیست؟ What is Docker Container

• نقشه برداری پورت ها چیست؟ What is ports mapping

• فعال کردن نگاشت پورت ها برای کانتینر NGINX Enabling ports mapping for the NGINX container

• متغیرهای محیطی برای ظروف Environment variables for containers

• نقشه برداری حجم و حجم Volumes and volumes mapping

• فعال کردن نقشه برداری حجم برای ظرف NGINX Enabling volumes mapping for the NGINX container

• اجرای برنامه ها در داخل ظروف Running applications inside of the containers

• Dockerfile چیست؟ What is Dockerfile

• ایجاد Dockerfile Creating Dockerfile

• راه اندازی کانتینر بر اساس تصویر سفارشی Launching container based on the custom image

• تلاش برای اتصال کانتینرهای پایتون و مونگو Trying to connect Python and Mongo containers

• اتصال کانتینرها به شبکه پل سفارشی Attaching containers to the custom bridge network

• Docker Compose و YAML Docker Compose and YAML

• راه اندازی خدمات با استفاده از Docker Compose Launching services using Docker Compose

• نوشتن اسناد در پایگاه داده Writing documents to the database

• فعال کردن نگاشت پورت ها در Docker Compose Enabling Ports Mapping in the Docker Compose

• استفاده از Volume در Docker Compose Using Volumes in the Docker Compose

• خلاصه دوره Docker Crash Docker Crash Course Summary

• انتشار فایل های پروژه دوره در GitHub Publishing course project files to the GitHub

بسته شدن Wrap up

• سخنرانی پاداش Bonus Lecture