آموزش کار با React and Go (Golang)

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

معرفی Introduction

• خوش آمدی Welcome

• اطلاعیه برای دانشجویان موجود Notice for existing students

• کمی در مورد من A bit about me

• درخواست کمک Asking for help

• اشتباهات: همه ما مرتکبشان می شویم. Mistakes: we all make them.

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

• در حال نصب Node Installing Node

• در حال نصب Go Installing Go

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

• نصب Docker Installing Docker

شروع کار با React Getting Started with React

• چگونه React کار می کند How React works

• سلام دنیا با React با استفاده از کلاس ها Hello world with React using Classes

• Hello world با React با استفاده از کامپوننت های کاربردی Hello world with React using functional components

• اجزای یک ظاهر طراحی شده Styling Components

• استفاده از Bootstrap CSS Using Bootstrap CSS

• استفاده از props: انتقال داده به اجزا Using props: passing data to components

• واکنش نشان دهید و I را بیان کنید React and State I

• React and State II React and State II

• واکنش نشان دهید و حالت III React and State III

• واکنش نشان دهید و وضعیت IV React and State IV

• واکنش نشان دهید و حالت V React and State V

• رهگیری فرم های ارسالی با ()onSubmit Intercepting form submissions with onSubmit()

• handleSubmit() ادامه داد handleSubmit() continued

• Ref: استفاده از مراجع در React Ref: using references in React

• مراجع با مؤلفه ها: forwardRef() References with components: forwardRef()

• چرخه زندگی کلاس Class Lifecycle

شروع کار با پروژه اصلی ما: برو فیلم تماشا کن Getting started with our main project: Go Watch a Movie

• شروع کار با پروژه ما Getting started with our project

• تنظیم طرح برنامه Setting up the application layout

• شروع کار با React Router v6 Getting started with React Router v6

• پیکربندی روتر React Configuring React Router

• با استفاده از پیوند React Router Using React Router's Link

• کار بر روی مؤلفه Movies Working on the Movies component

• مسیریابی از مؤلفه فیلم ها به فیلم های جداگانه Routing from the Movies component to individual movies

• نمایش یک فیلم جداگانه Displaying an individual movie

راه اندازی ورود کاربر Setting up User Login

• کار بر روی دکمه ورود Working on the Login button

• ایجاد فرم ورود Creating the login form

• دادن دسترسی مؤلفه Login به setJWT Giving the Login component access to setJWT

• افزودن پیام های خطا و تغییر مسیر به مؤلفه ورود Adding error messages and redirects to the Login component

• خروج از سیستم Logging out

شروع به کار با Back End API ما Getting started with our Back End API

• شروع API عقب Starting the back end API

• اضافه کردن کنترلرها و مسیرها به API ما Adding handlers and routes to our API

• نصب بسته مسیریابی Installing a routing package

• اضافه کردن یک مسیر به گردانندگان ما Adding a route to our handlers

• برگرداندن JSON از API ما Returning JSON from our API

• بازگرداندن فهرستی از فیلم ها به صورت JSON Returning a list of movies as JSON

• اتصال قسمت جلویی به API عقب Connecting the front end to the back end API

• فعال کردن میان افزار CORS Enabling CORS middleware

• فعال کردن پراکسی React برای API پشتیبان Enabling React's proxy to the back end API

اتصال به Postgres Connecting to Postgres

• راه اندازی پایگاه داده ما با استفاده از Docker Setting up our database using Docker

• شروع به اتصال API ما به Postgres Getting started connecting our API to Postgres

• نصب درایور پایگاه داده و اتصال به Postgres Installing a database driver and connecting to Postgres

• راه اندازی یک مخزن پایگاه داده I Setting up a database repository I

• راه اندازی یک مخزن پایگاه داده II Setting up a database repository II

• بهبود کنترل کننده allMovies برای استفاده از پایگاه داده ما Improving the allMovies handler to use our database

کار با JSON Working with JSON

• راه اندازی utils.go و یک تابع helper writeJSON Setting up utils.go and a writeJSON helper function

• افزودن یک تابع کمکی readJSON Adding a readJSON helper function

• افزودن یک تابع کمکی errorJSON Adding an errorJSON helper function

• با استفاده از عملکرد کمکی errorJSON ما Using our errorJSON helper function

احراز هویت با JWT Authentication with JWT

• نصب پکیج JWT Installing a JWT package

• تولید توکن Generating tokens

• تنظیم مقادیر پیش فرض برای توکن های JWT Setting default values for JWT tokens

• ایجاد یک هندلر برای تولید JWT Creating a handler to generate a JWT

• در حال امتحان کردن کنترلر ما Trying out our handler

• کوکی توکن تازه سازی ایجاد کنید Generate refresh token cookie

• خواندن محموله JSON در کنترل کننده احراز هویت Reading a JSON payload in the authenticate handler

• جستجوی کاربر از طریق ایمیل Looking up a user by email

• اعتبار سنجی رمز عبور Validating a password

• به روز رسانی مولفه Login در قسمت جلویی Updating the Login component on the front end

• Refresh نشانه ها I Refresh tokens I

• Refresh tokens II Refresh tokens II

• Refresh tokens III Refresh tokens III

• Refresh tokens IV Refresh tokens IV

• Refresh tokens V Refresh tokens V

• محافظت از مسیرها با استفاده از توکن های JWT Protecting routes using JWT tokens

• میان افزار احراز هویت Authentication middleware

• افزودن میان افزار ما به مسیرها Adding our middleware to routes

• مسیرهای محافظت شده خود را امتحان می کنیم Trying our our protected routes

ایجاد/خواندن/به‌روزرسانی/حذف برای کاتالوگ فیلم ما Create/Read/Update/Delete for our Movie Catalogue

• شروع از مولفه افزودن/ویرایش فیلم Starting on the Add/Edit movie component

• ایجاد یک جزء انتخابی Creating a select component

• ایجاد یک جزء چک باکس Creating a checkbox component

• با استفاده از کنترل های ورودی ما برای ایجاد فرم ویرایش فیلم Using our input controls to create the edit movie form

• ادامه کار بر روی مؤلفه EditMovie Continuing to work on the EditMovie component

• دریافت فیلم و ژانرها از پایگاه داده Getting a movie and Genres from the database

• ایجاد کنترل‌کننده‌ها برای دریافت فیلم‌ها برای عموم و سرپرست Creating handlers to get movies for public and admin

• نمایش یک فیلم برای عموم در قسمت جلویی Displaying a movie to the public on the front end

• شروع با نمایش ژانرها در مولفه افزودن/ویرایش فیلم Getting started with showing genres on the Add/Edit movie component

• افزودن چک باکس برای ژانرها به فرم جلویی Adding checkboxes for genres to the front end form

• فعال کردن کلیک‌های چک باکس روی مؤلفه EditMovie Enabling checkbox clicks on the EditMovie component

• اعتبار سنجی I Validation I

• اعتبار سنجی II Validation II

• ایجاد یک روش پایگاه داده برای درج فیلم Creating a database method to insert a movie

• ایجاد یک کنترل کننده برای درج فیلم Creating a handler to insert a movie

• دریافت تصویر فیلم از یک API I از راه دور Getting a movie image from a remote API I

• گرفتن تصویر فیلم از راه دور API II Getting a movie image from a remote API II

• رسیدگی به ژانرها هنگام درج فیلم Handling genres when inserting a movie

• درج فیلم از قسمت جلو Inserting a movie from the front end

• در حال تلاش برای افزودن یک فیلم Trying out adding a movie

• ویرایش یک فیلم موجود I Editing an existing movie I

• ویرایش یک فیلم موجود II Editing an existing movie II

• ویرایش یک فیلم موجود III Editing an existing movie III

• نوشتن کنترل کننده برای به روز رسانی یک فیلم Writing the handler to update a movie

• در حال تلاش برای ویرایش یک فیلم از جلو Trying out editing a movie from the front end

• شروع کار با حذف یک فیلم Getting started with deleting a movie

• حذف یک فیلم II Deleting a movie II

• حذف یک فیلم III Deleting a movie III

• حذف یک فیلم IV Deleting a movie IV

نمایش فیلم بر اساس ژانر Displaying movies by Genre

• شروع با فهرست کردن فیلم ها بر اساس ژانر Getting started with listing movies by Genre

• ایجاد یک کنترل کننده برای فهرست کردن فیلم ها بر اساس ژانر Creating a handler to list movies by Genre

• تغییر قسمت جلویی برای فهرست کردن فیلم‌ها بر اساس ژانر Modifying the front end to list movies by Genre

• ایجاد مؤلفه OneGenre Creating the OneGenre component

GraphQL GraphQL

• شروع کار با GraphQL Getting started with GraphQL

• GraphQL II GraphQL II

• GraphQL III GraphQL III

• ایجاد یک هندلر برای GraphQL Creating a handler for GraphQL

• اتصال به نقطه پایانی GraphQL از قسمت جلویی Connecting to our GraphQL endpoint from the front end

• افزودن قابلیت جستجو Adding search functionality

در حال استقرار برنامه ما Deploying our application

• پیکربندی متغیرهای محیطی با .env Configuring environment variables with .env

• آماده سازی قسمت پشتی برای استقرار Preparing the back end for deployment

• ریختن پایگاه داده ما برای سرور زنده Dumping our database for the live server

• کپی فایل ها به سرور برای استقرار Copying files to the server for deployment

• پر کردن پایگاه داده در سرور زنده Populating the database on the live server

• شروع عقب ما با Supervisor Starting our back end with Supervisor

• پیکربندی Caddy Configuring Caddy

• در حال آزمایش برنامه زنده ما Trying out our live application

• رفع مولفه ژانر Fixing the Genres component

میراث: مقدمه LEGACY: Introduction

• معرفی Introduction

• کمی در مورد من A bit about me

• نحوه درخواست کمک How to ask for help

• منابع مفید Useful Resources

میراث: راه اندازی محیط توسعه ما LEGACY: Setting up our Development Environment

• نصب node.js و یک IDE Installing node.js and an IDE

• نصب Postgres Installing Postgres

• در حال نصب Go Installing Go

LEGACY: شروع به کار با React LEGACY: Getting started with React

• چگونه واکنش کار می کند How React Works

• نحوه استفاده از کد قابل دانلود How to use the downloadable code

• اولین برنامه React ما Our first React app

• برنامه اجباری "سلام، دنیا". The obligatory "Hello, world" app

• کار با قطعات Working with components

• اجزای یک ظاهر طراحی شده Styling components

• با استفاده از یک چارچوب CSS Using a CSS Framework

• اطلاعات بیشتر در مورد CSS Framework More about the CSS Framework

• قطعات و لوازم جانبی Components and props

• اطلاعات بیشتر در مورد وسایل More about props

• واکنش به رویدادها React Events

• رویدادهای بیشتر More events

• مراجع Refs

• ساده کردن کارها با حالت Simplifying things with state

• اطلاعات بیشتر درباره وضعیت: حالت بلند کردن برای به اشتراک گذاری داده ها بین اجزا More about state: lifting state to share data between components

• اجزای عملکردی Functional components

• تمیز کردن چیزها Cleaning things up

• دانش خود را بررسی کنید Check your knowledge

میراث: ساختن فرانت اند LEGACY: Building the Front End

• قرار است چه چیزی خلق کنیم؟ What are we going to create?

• نکته ای در مورد React Router 6 A note about React Router 6

• ایجاد اپلیکیشن front end و معرفی React Router Creating our front end application and introducting the React Router

• مسیریابی به یک جزء Routing to a component

• چالش: مسیر به اجزا Challenge: Route to components

• راه حل چالش Solution to Challenge

• اطلاعات بیشتر در مورد مسیریابی (و کمی در مورد چرخه عمر React) More about routing (and a bit about the React lifecycle)

• اطلاعات بیشتر در مورد مسیریابی قسمت دوم More about routing Part II

• بیشتر در مورد مسیریابی قسمت III More about routing Part III

• نمایش یک فیلم Displaying one movie

• دانش خود را بیازمایید Test your knowlege

LEGACY: راه اندازی Go Back End ما به عنوان REST API LEGACY: Setting up our Go Back end as a REST API

• نصب نرم افزارهای لازم Installing the necessary software

• راه اندازی پروژه Go Setting up the Go project

• نصب روتر و ایجاد هندلرهای بهتر Installing a router and creating better handlers

• مدل ها Models

• راه اندازی یک مسیر API ساده Setting up a simple API route

• بهبود مدیریت خطا Improved error handling

• ایجاد پایگاه داده Creating the database

• ایجاد استخر اتصال ما و اتصال به پایگاه داده Creating our connection pool and connecting to the database

• توابع پایگاه داده و یک چالش Database functions & a challenge

• راه حل چالش Solution to challenge

• یک نکته: تمیز کردن فید JSON ما An aside: cleaning up our JSON feed

• دریافت همه فیلم ها به صورت JSON Getting all movies as JSON

• مراحل بعدی Next Steps

LEGACY: اتصال به REST API ما LEGACY: Connecting to our REST API

• راه اندازی میان افزار CORS Setting up CORS middleware

• دریافت لیست فیلم ها Getting the list of movies

• بررسی خطاها Checking for errors

• نمایش یک فیلم Displaying one movie

• نمایش یک فیلم Displaying one movie

• شروع کار با فیلم بر اساس ژانر Getting started with Movies by Genre

• دریافت ژانرها از پس زمینه Getting Genres from back end

• نمایش لیست ژانرها Displaying the list of Genres

• دریافت فیلم بر اساس ژانر Getting movies by Genre

• نمایش فیلم بر اساس ژانر Displaying movies by Genre

• نمایش نام ژانر - جایگزینی برای حالت بلند کردن Showing Genre name - an alternative to lifting state

• پاک کردن کد Code clean up

LEGACY: کار با فرم ها، React و Go LEGACY: Working with forms, React, and Go

• ساخت فرم در React Building a form in React

• فرم خود را به یک جزء کنترل شده تبدیل می کنیم و آن را به حالت متصل می کنیم Making our form a controlled component, and binding it to state

• ساخت فرم ورودی اجزای قابل استفاده مجدد و یک چالش است Making form inputs reusable components and a Challenge

• راه حل چالش Solution to Challenge

• ایجاد یک جزء انتخابی قابل استفاده مجدد Creating a reusable select component

• پر کردن فرم با یک فیلم موجود Prepopulating the form with an existing movie

• ارسال داده ها به قسمت پشتی REST Sending data to the REST back end

• اعتبار سنجی فرم سمت مشتری Client side form validation

• دریافت داده در قسمت پشتی REST Receiving data on the REST back end

• ارائه بازخورد با هشدار قابل استفاده مجدد Providing feedback with a reusable alert

• ویرایش یک فیلم موجود Editing an existing movie

• حذف یک فیلم Deleting a movie

• افزودن مرحله تایید هنگام حذف فیلم ها Adding a confirmation step when deleting movies

• در حال پیاده سازی حذف در قسمت پشتی Implementing delete on the back end

• اتصال دکمه حذف ما به انتهای پشتی REST Connecting our delete button to the REST back end

• چالش: نمایش لیست فیلم های مورد ویرایش Challenge: displaying list of movies to edit

• راه حل چالش Solution to challenge

LEGACY: ایمن کردن مسیرها در REST API ما LEGACY: Securing Routes in our REST API

• ایجاد توکن های وب JSON در قسمت پشتی Generating JSON Web Tokens on the back end

• تغییر برنامه به یک جزء و تنظیم وضعیت Changing App to a component, and setting up state

• دریافت JSON Web Token از قسمت پشتی Getting the JSON Web Token from the back end

• مدیریت موفقیت آمیز ورود به سیستم Handling a successful login

• افزودن میان افزار برای بررسی توکن معتبر Adding middleware to check for a valid token

• حفاظت از مسیر در قسمت جلویی ما Protecting the route on our front end

• اضافه کردن تغییر مسیر برای اجزای محافظت شده Adding redirects for protected components

• چالش Challenge

• راه حل چالش Solution to Challenge

• راه حل چالش Solution to Challenge

• ذخیره توکن ما زمانی که کاربر سایت را ترک می کند Saving our token when the user leaves the site

• پاسخ‌های خطای بهتری را از سمت عقب ما می‌گیریم Making better error responses from our back end

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

LEGACY: اضافه کردن GraphQL به معادله LEGACY: Adding GraphQL into the equation

• GraphQL چیست؟ What is GraphQL?

• تنظیم طرح و نقطه پایانی REST برای GraphQL Setting up a schema and REST endpoint for GraphQL

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

• پیاده سازی درخواست های GraphQL برای همه فیلم ها Implementing GraphQL requests for all movies

• افزودن نقطه پایانی جستجو Adding a search endpoint

• پیاده سازی درخواست های GraphQL برای جستجو در فرانت اند Implementing GraphQL requests for search on front end

• نمایش یک فیلم با استفاده از GraphQL Displaying one movie using GraphQL

• به روز رسانی قسمت جلویی Updating the front end

• اصلاح قسمت پشتی برای مدیریت تصاویر پوستر Modifying the back end to handle poster images

• به روز رسانی قسمت جلویی برای نمایش تصویر پوستر Updating the front end to display the poster image

• تمیز کردن چیزها Cleaning things up

• تمیز کردن چیزها Cleaning things up

میراث: استقرار برنامه ما در یک سرور LEGACY: Deploying our app to a server

• آماده کردن برنامه React برای استقرار Getting the React application ready for deployment

• ساخت برنامه آماده تولید React Building the production ready React application

• آماده سازی پروژه Go برای استقرار Getting the Go project ready for deployment

• ساختن Go back end برای سرور راه دور ما Building the Go back end for our remote server

• کپی فایل ها در سرور Copying files to the server

• راه اندازی پایگاه داده تولید Setting up the production database

• راه اندازی وب سرور Setting up the web server

• اجرای Go back end با سرپرست Running the Go back end with supervisor

LEGACY: تبدیل پروژه ما به استفاده از توابع و React Hooks LEGACY: Converting our project to use functions and React Hoooks

• در مورد این بخش About this section

• تبدیل مؤلفه Movies.js به تابعی با هوک Converting the Movies.js component to a function with hooks

• پوشاندن مولفه Genres.js روی یک تابع با هوک Coverting the Genres.js component to a function with hooks

• تبدیل مؤلفه OneMovie.js به تابع Converting the OneMovie.js component to a function

• تبدیل مؤلفه OneGenre.js به تابع Converting the OneGenre.js component to a function

• تبدیل مولفه EditMovie.js به یک تابع Converting the EditMovie.js component to a function

• چالش: تبدیل Admin.js به یک تابع Challenge: convert Admin.js to a function

• راه حل چالش Solution to challenge

• راه حل چالش Solution to challenge

• Login.js را به یک تابع تبدیل کنید Convert Login.js to a function

• App.js را به یک تابع تبدیل کنید Convert App.js to a function

میراث: از اینجا به کجا برویم LEGACY: Where to go from here

• React و Redux React and Redux