آموزش Twilio - یک مرکز تماس کامل در React و Node ایجاد کنید

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

معرفی Twilio Twilio Introduction

• قبل از ثبت نام در Twilio Before we signup to Twilio

• ایجاد یک حساب کاربری Twilio Creating a Twilio Account

• گرفتن شماره تلفن و ایجاد تمام نشانه های لازم Getting a phone number and creating all the necessary tokens

Twilio Verify Twilio Verify

• ایجاد یک سرویس تأیید Twilio Creating a Twilio Verify Service

سرور نود با Express Node server with Express

• راه اندازی سرور اکسپرس ما Starting our express server

• ایجاد نقطه پایانی برای دریافت شماره موبایل و کد تایید Creating the endpoint to receive the mobile number and the verification code

• ایجاد کلاس Twilio Creating a Twilio Class

• ارسال تأیید با Twilio Send Verification with Twilio

• تأیید کد با Twilio Verifying the code with Twilio

واکنش به ورود با پیامک React Login with SMS

• ایجاد React App ما Creating our react App

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

• حالت را با استفاده از Immet و use-immet حفظ کنید Keep state using Immet and use-immet

• آماده سازی axios برای ارسال درخواست ما Preparing axios to send our request

• کد تأیید را از Twilio درخواست کنید Request the verification code from Twilio

• یک ورودی برای کد تأیید اضافه کنید Add an input for the verification code

تایید، احراز هویت با استفاده از Twilio Verification, Authentication using Twilio

• ارسال کد به Twilio verify Sending the code to Twilio verify

به روز رسانی بیدرنگ UI با استفاده از SocketIo Realtime UI updates using SocketIo

• راه اندازی سوکت ها در باطن Initializing sockets on the backend

• راه اندازی یک اتصال سوکت با قسمت جلویی Initializing a socket connection with the frontend

• آشنایی با سوکت ها و refactoring Understanding sockets and refactoring

مجوز با استفاده از JWT (JSON Web Token) Authorization using JWT (JSON Web Token)

• ایجاد و تأیید یک توکن JWT Creating and verifying a JWT token

• ایجاد توکن JWT Creating the JWT token

• دریافت JWT در قسمت جلو Receiving the JWT on the frontend

• ایجاد یک قلاب سفارشی برای کمک به فضای ذخیره‌سازی محلی Creating a custom hook to help with local Storage

• ذخیره توکن JWT در Local Storage Storing the JWT token in Local Storage

React Call Center React Call Centre

• هنگامی که یک توکن معتبر داریم، نمایش صفحه ورود را متوقف کنید Stop displaying the login page when we have a valid token

• ایجاد صفحه مرکز تماس ما که با نوار ناوبری شروع می شود Creating our Call Center screen starting with the navbar

• ایجاد نوار پیشرفت تماس Creating the call progress bar

تونل محلی، میزبان محلی من در سطح جهانی قابل دسترسی است Local tunnel, my localhost globally accessible

• درک تونل محلی و اینکه چگونه به ما کمک می کند Understanding local tunnel and how it will help us

شماره تلفن Twilio را تغییر دهید Change Twilio phone number

• راه اندازی Twilio و تغییر شماره تلفن Setup Twilio and changing phone number

Twilio Webhooks Twilio Webhooks

• رسیدگی به تماس های Twilio Webhook Handling Twilio Webhook calls

• داشتن Twilio برای گفتن "متشکرم" برای شما وقتی کسی تماس می گیرد Having Twilio to say "Thank you" for you when someone calls

• هنگام دریافت تماس جدید، یک رویداد Socket IO به قسمت جلویی ارسال می شود Emitting a Socket IO event to the frontend when receive a new call

• نمایش تماس جدید در مرورگر به محض ورود Display new call on the browser as it comes in

• نمایش پیشرفت تماس با اطلاعات تماس گیرنده Displaying the progress call with the caller information

تغییر مسیر تماس ها به یک صف Redirecting calls to a queue

• تغییر مسیر تماس و اضافه کردن آن به یک صف Redirecting the call and add it to a queue

• به روز رسانی وضعیت تماس به نوبت Updating the call status to enqueued

• حذف اطلاعات شخصی از تماس Removing personal information from the call

• به روز رسانی نوار وضعیت تماس Updating the call status bar

ایمن تر کردن برنامه ما Making our application more secure

• یافتن خطرات امنیتی در برنامه ما Finding security risks on our application

• ایجاد نقطه پایانی برای تأیید اعتبار نشانه Creating a endpoint to validate the token

• اعتبار سنجی توکن JWT با backend Validating the JWT token with the backend

• عبور رمز با استفاده از اتصال SocketIo Passing the token using SocketIo connection

• تنظیم سوکت با توکن با تغییر مقدار آن Setting the socket with the token as its value changes

• اعتبار سنجی توکن ما در باطن با استفاده از میان افزار سوکت Validating our token on the backend using a socket middleware

دریافت تماس در مرورگر با استفاده از Twilio Client Receiving calls on the browser using Twilio Client

• نصب و راه اندازی کلاینت Twilio Installing and setting up Twilio client

• ما از حالت استفاده استفاده می‌کنیم، باید از دولت استفاده کنیم We use use State we should import use State

• راه اندازی Twilio برای برقراری تماس های خروجی Setting up Twilio to make outgoing calls

دسترسی اعطای صدا Voice Grant Access

• ایجاد توکن Twilio برای اعطای دسترسی به صدا Creating the Twilio token to grant access to voice

• ارسال توکن Twilio به جلو Passing the Twilio token to the frontend

• ایجاد اتصال سوکت ما با سرورهای Twilio Creating our socket connection with Twilio servers

پاسخگویی به تماس در مرورگر Answering a Call on the Browser

• ارسال تماس انتخاب شده برای پاسخ به پشتیبان Sending the selected call to be answered to the backend

• هدایت تماس به یک URL دیگر Redirecting the call to a different URL

• اتصال تماس به مرورگر Connecting the call to the Browser

• رفع تماس های تکراری روی صفحه Fixing the duplicate calls on the screen

و هنوز بیشتر در راه است And still more to come

• وای الان اینجایی؟ Wow, are you already here?

اضافی Extra

• تأیید شماره تلفن جدید با Twilio Verifying a new phone number with Twilio

پیوست 1 Appendix 1

• نصب ماژول های VSCode Installing VSCode modules

• نصب ماژول های VSCode Installing VSCode modules

• Emmet و سرعت دادن به کدنویسی Emmet and speed up coding

• ابزارهای افزونه را برای کروم اضافه کنید Add extension tools for chrome

• نصب Docker Extension Installing Docker Extension

• اتصال به mongoDB داخل داکر با استفاده از قطب نما Connecting to mongoDB inside Docker using Compass

بخش پاداش - از جمله معاملات جمعه سیاه Bonus Section - Including Black Friday Deals

• پاداش - زیرا یادگیری هرگز نمی تواند متوقف شود Bonus - Because the learning can never stop