جاوا اسکریپت را با ساختن یک برنامه وب تمام پشته اعمال کرد

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

معرفی و راه اندازی Introduction and Set Up

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

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

• Git Bash را نصب کنید (فقط در ویندوز لازم است) Install Git Bash (only necessary on Windows)

• Node.js را نصب کنید Install Node.js

برنامه خط فرمان Command Line Application

• راه اندازی پروژه و نوشتن اولین جاوا اسکریپت Setting up the project and writing our first JavaScript

• مقدمه ای بر متغیرها Introduction to variables

• اولین عملکرد ما Our first function

• تمرین عملکردی Function Exercise

• اشیاء Objects

• اضافه کردن بازیکنان با استفاده از آرایه .push() Add players using array .push()

• آرایه .pop() Array .pop()

• سوالات را به بازی ما اضافه کنید Add questions to our game

• شروع یک دور در بازی ما Starting a round in our game

• رشته های الگو Template strings

• افزودن به ویژگی های شی Append to object properties

• در صورت وجود شرایط و خطاها if conditions and errors

• تکمیل تابع makeGuess Completing makeGuess function

• JSON.stringify() JSON.stringify()

• واردات پیش فرض و صادرات پیش فرض Default imports and default exports

• به نام صادرات و با نام واردات Named export and named import

• تقسیم پروژه به چندین فایل Splitting the project into multiple files

• تمرین واردات/صادرات Import/export exercise

• محاسبه نتایج دور مرحله 1 Calculating round results step 1

• برای حلقه ها For loops

• افزودن پویا خصوصیات شی Dynamically adding object properties

• Math.abs() برای محاسبه اختلاف حدس Math.abs() to calculate guess differences

• نقاط مختلف را بسته به دقت تعیین کنید Assign different points depending on exactness

• افست پویا بسته به سوال Dynamic offsets depending on question

• راه اندازی دور 3 Setup of round 3

• آرایه .forEach() Array .forEach()

• Object.keys() و Object.values() Object.keys() and Object.values()

• محاسبه نتایج نهایی مرحله 1 Calculating final results step 1

• محاسبه نتایج نهایی مرحله 2 Calculating final results step 2

• نصب کتابخانه های شخص ثالث Installing third party libraries

• اولین استفاده از async/wait در یک تابع First use of async/await in a function

• هدف از همگام سازی/انتظار Purpose of async/await

• تعاملی کردن برنامه ما Making our app interactive

• اجازه حدس‌های تعاملی - اعلان تمرین Allow interactive guesses — Exercise Prompt

• اجازه حدس های تعاملی - راه حل تمرین Allow interactive guesses — Exercise Solution

• تمیز کردن Cleaning up

• پاسخ تماس ها را درک کنید Understand callbacks

• تماس ها را به وعده تبدیل کنید Turn callbacks into promises

• مقدمه ای بر JSON Introduction to JSON

• خواندن فایل ها Reading files

• خواندن فایل های با وعده Reading files with promises

• تجزیه JSON Parsing JSON

• بخش outro برای برنامه خط فرمان Section outro for the command line app

Backend Backend

• مقدمه بخش Backend Backend section intro

• درخواست شبکه چیست؟ What is a network request?

• نصب پستچی Installing Postman

• راه اندازی ماژول باطن جدید Set up of new backend module

• اولین سرور ما را ایجاد کنید Create our first server

• اسناد اکسپرس Express documentation

• نحو واردات مدرن Modern import syntax

• صادرات نامگذاری شده با نحو مدرن Named exports with modern syntax

• کنترل کننده ایالت State handler

• نقطه پایانی برای جذب بازیکنان Endpoint to get players

• نقطه پایانی برای افزودن بازیکنان مرحله 1 Endpoint to add players step 1

• وضعیت بازی را از افزودن نقطه پایانی بازیکن تغییر دهید Modify game state from add player endpoint

• عناصر خاص را با .find() پیدا کنید Find specific elements with .find()

• برگرداندن خطاهای HTTP Returning HTTP errors

• ثبت ترافیک شبکه Logging network traffic

• نقطه پایان برای شروع یک دور جدید Endpoint to start a new round

• شناسه های منحصر به فرد از طریق UUID Unique IDs via UUID

• نقطه پایان دور جدید برای ارسال یک سوال New round endpoint to forward a question

• عنصر تصادفی یک آرایه را انتخاب کنید Select random element of an array

• انتخاب یک سوال تصادفی Selecting a random question

• فیلتر کردن عناصر آرایه با .filter() Filtering array elements with .filter()

• استفاده از .filter() در نقطه پایانی ما Using .filter() in our endpoint

• وقتی سؤالات تمام شد، کد وضعیت Gone را ارسال کنید Send Gone status code when questions run out

• رسیدگی به ورودی درخواست Handling request input

• بررسی مقادیر نادرست Exploring falsy values

• دسترسی به آخرین مورد در یک آرایه Accessing last item in an array

• نقطه پایان دور فعلی را دریافت کنید Get current round endpoint

• شروع نقطه پایانی برای دریافت پاسخ های دور فعلی Start of endpoint to get current round answers

• حالت بازی سخت کدگذاری برای ساده کردن تست Hard-coding game state to simplify testing

• تطبیق سوال و دور با استفاده از .find() Matching question and round using .find()

• استفاده از عملگر OR برای تنظیم مقادیر پیش فرض Using the OR operator to set default values

• محاسبه اختلاف حدس با Math.abs() Calculating guess difference with Math.abs()

• آرایه .sort() Array .sort()

• محاسبه امتیاز در مرحله حدس 1 Calculating points per guess step 1

• محاسبه امتیاز در مرحله حدس 2 Calculating points per guess step 2

• به روز رسانی امتیاز برای هر بازیکن Update points for each player

• مرتب سازی امتیاز نهایی Sorting the final score

• نسخه ی نمایشی باطن تمام شده Demo of finished backend

Frontend Frontend

• مقدمه بخش Frontend Frontend section intro

• HTML چیست؟ What is HTML?

• راه اندازی برنامه وب Next.js ما Setting up our Next.js web app

• در حال ویرایش اولین مؤلفه ما Editing our first component

• استفاده از متغیرها در JSX Using variables in JSX

• استفاده از یک سبک CSS سفارشی Applying a custom CSS style

• ایجاد یک آرایه جدید از آرایه دیگر با استفاده از .map() Create a new array from another array using .map()

• ایجاد لیستی از عناصر JSX با .map() Generating a list of JSX elements with .map()

• وضعیت بازی با کد سخت برای آزمایش Hard-code game state for testing

• اضافه کردن CORS Adding CORS

• ایجاد درخواست های شبکه به باطن ما با axios Making network requests to our backend with axios

• متغیرهای واکنشی Reactive variables

• استفاده از افکت برای اجرای عملیات فقط یک بار useEffect to only run actions once

• لوازم کلیدی منحصر به فرد در موارد لیست Unique key props on list items

• راه اندازی یک صفحه و مسیر جدید Setting up a new page and route

• کنترل فشار دکمه Handling button presses

• یک بازیکن جدید را از جلویی به بک‌اند دیگر منتقل کنید Pass a new player from frontend to backend

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

• پیغام های موفقیت و خطا Success and error messages

• به صورت پویا عناصر JSX را پنهان کنید Dynamically hide JSX elements

• نظرسنجی پشتیبان با setInterval() Backend polling with setInterval()

• دکمه شروع بازی Start game button

• صفحه و مسیر بازی را تنظیم کنید Set up game page and route

• تغییرات Backend برای شروع همیشه یک دور جدید Backend modifications to always start a new round

• شروع یک دور جدید در هر رندر صفحه Starting a new round on every page render

• () useEffect را برای شروع فراخوانی در هر رندر اضافه کنید Add useEffect() to initiate a call on every render

• تنظیم صفحه مشتری و مسیر Setting up client page and route

• ورودی متن و ارسال دکمه حدس در صفحه مشتری Text input and submit guess button on client page

• ارسال حدس بازیکن به باطن Send player guess to backend

• تنظیم کوکی ها Setting cookies

• خواندن کوکی ها Reading cookies

• نظرسنجی برای بررسی شروع دور Polling to check for round start

• تغییر مسیر صفحه با استفاده از روتر Next.js Page redirects using Next.js router

• استفاده از توابع حذف اثر useEffect teardown functions

• شمارش معکوس صفحه بازی Game page countdown

• به صورت پویا متن را در شمارش معکوس حذف کنید Dynamically remove text on countdown

• حالت بازی سخت کد برای تست صفحه بازی Hard-coding game state to test game page

• بازیابی پاسخ در پایان دور Retrieve answers on round finish

• JSX را از توابع دیگر برگردانید Return JSX from other functions

• نمایش نتایج نهایی Exercise Prompt Display final results Exercise Prompt

• نمایش نتایج نهایی راه حل تمرین Display final results Exercise Solution

• نمایش پاسخ گرد Display round answer

• شروع به‌روزرسانی صفحه Triggering page refresh

• ایجاد بازی روی صفحه Create game over page

• پس از اتمام بازی به صفحه بازی روی صفحه تغییر مسیر دهید Redirect to game over page when game finishes

• افزودن تصاویر Adding images

• پاک کن Clean up

• مخفی کردن دینامیک ورودی ها در صفحه مشتری Dynamically hide inputs on client page

• هنگامی که بازی شروع می شود، بازخوانی صفحه را فعال کنید Trigger page refresh when game starts

• نسخه ی نمایشی بازی نهایی ما - آفرین! Demo of our final game — well done!

استقرار Deployment

• معرفی بخش استقرار Deployment Section Intro

• URL های پویا از طریق متغیرهای محیطی Dynamic URLs via environment variables

• برنامه Next.js را به HTML ایستا صادر کنید Export Next.js app to static HTML

• به صورت ایستا فایل های HTML را در باطن ارائه می دهند Statically serve HTML files in backend

• هندلر برای بازنشانی وضعیت بازی Handler to reset game state

• git را نصب کنید (فقط در مک لازم است) Install git (only necessary on Mac)

• مخزن GitHub را ایجاد کنید Create GitHub repository

• کلید SSH را تنظیم کنید Set up SSH key

• کد را در GitHub آپلود کنید Upload code to GitHub

• توکن GitHub را ایجاد کنید Generate GitHub token

• در AWS ثبت نام کنید Sign up to AWS

• یک کامپیوتر AWS اجاره ای را از طریق EC2 راه اندازی کنید Launch a rented AWS computer via EC2

• استقرار بازی ما در AWS Deploying our game to AWS

• پاکسازی AWS AWS clean up

Outro/خداحافظ Outro/Goodbye

• خداحافظ و ممنون! Goodbye and Thank You!