آموزش توئیلیو - ساخت مرکز تماس کامل با ری‌اکت و نود - آخرین آپدیت

دانلود Twilio - Make a complete Call Centre in React and Node

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره:

ساخت مرکز تماس کامل با React، Node و Twilio: احراز هویت پیامکی، صف انتظار و پاسخگویی تماس

چگونه یک مرکز تماس از ابتدا تا انتها بسازیم

نحوه ارسال و دریافت پیامک با Twilio

نحوه برقراری و دریافت تماس صوتی با Twilio

نحوه مدیریت صف انتظار تماس با Twilio

نحوه استفاده از Twilio Verify برای احراز هویت شماره موبایل کاربر

نحوه ارسال پیامک به شماره تلفن

نحوه برقراری تماس با شماره تلفن

پیش‌نیازها:

دانش برنامه‌نویسی پایه
یک حساب رایگان Twilio
تمایل به یادگیری و خلق ایده‌های نو

Twilio پلتفرم پیشرو خدمات ارتباطی ابری (CPaaS) در جهان است که به شما امکان توسعه راه‌حل‌های پیامک، واتس‌اپ، صدا، ویدئو، ایمیل و حتی اینترنت اشیاء (IoT) را می‌دهد. Twilio ارتباطات بیش از 190,000 کسب‌وکار را قدرت می‌بخشد و سالانه نزدیک به 932 میلیارد تعامل انسانی را تسهیل می‌کند.

در این دوره آموزشی، ما از برخی از این قابلیت‌ها برای ایجاد یک مرکز تماس کاملاً کاربردی بهره خواهیم برد. کاربران با شماره موبایل خود از طریق پیامک وارد سیستم می‌شوند و تماس‌ها به صورت بلادرنگ در داشبوردی نمایش داده می‌شوند که وضعیت هر مرحله از تماس را نشان می‌دهد.

تماس‌ها با یک پیام خوش‌آمدگویی پاسخ داده می‌شوند و پس از افزودن به صف، کارکنان مرکز تماس می‌توانند وضعیت تماس را در داشبورد پیگیری کنند. تماس‌ها از مرحله زنگ خوردن، به صف انتظار، پاسخ داده شده و در صورت عدم پاسخگویی، تماس از دست رفته نمایش داده خواهند شد.

Twilio Verify: از Twilio Verify برای ارسال پیامک تأیید به کاربر در مرحله ورود استفاده خواهیم کرد. پس از تأیید کاربر توسط Twilio، یک توکن JWT ایجاد می‌کنیم که به کاربر اجازه ورود به داشبورد و اشتراک برای دریافت و برقراری تماس را می‌دهد.
Twilio Programmable Voice: از Programmable Voice برای برقراری، دریافت و نظارت بر تماس‌ها در سراسر جهان و مستقیماً از طریق مرورگر استفاده خواهیم کرد.
Twilio Programmable SMS: از Programmable SMS برای ارسال و دریافت پیامک با استفاده از Twilio استفاده خواهیم کرد.

سایر جزئیات مهم:

فرانت‌اند (Frontend):

ما فرانت‌اند را با استفاده از React و هوک‌هایی مانند useState، useEffect، useContext، useCallback و بسیاری از هوک‌های سفارشی دیگر ایجاد خواهیم کرد. برای زیبا سازی اپلیکیشن از Semantic UI و برای مدیریت وضعیت از Immer و برای ارتباط بلادرنگ از Socket.IO استفاده خواهیم کرد.

بک‌اند (Backend):

بک‌اند با استفاده از Node.js، Express برای REST API و Socket.IO برای ارتباط بلادرنگ با اپلیکیشن React ایجاد خواهد شد.

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

مقدمه توئیلیو Twilio Introduction

قبل از ثبت نام در توئیلیو Before we signup to Twilio
ساختن حساب کاربری توئیلیو Creating a Twilio Account
دریافت شماره تلفن و ساخت تمام توکن‌های لازم Getting a phone number and creating all the necessary tokens

تأیید توئیلیو Twilio Verify

ساخت سرویس تأیید توئیلیو Creating a Twilio Verify Service

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

راه‌اندازی سرور اکسپرس ما Starting our express server
ساختن نقطه پایانی برای دریافت شماره موبایل و کد تأیید Creating the endpoint to receive the mobile number and the verification code
ساختن کلاس توئیلیو Creating a Twilio Class
ارسال تأیید با توئیلیو Send Verification with Twilio
تأیید کد با توئیلیو Verifying the code with Twilio

ورود React با SMS React Login with SMS

ساخت اپلیکیشن ری‌اکت ما 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
درخواست کد تأیید از توئیلیو Request the verification code from Twilio
اضافه کردن ورودی برای کد تأیید Add an input for the verification code

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

ارسال کد به تأیید توئیلیو 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
درک سوکت‌ها و بازسازی کد Understanding sockets and refactoring

احراز هویت با استفاده از JWT (توکن وب JSON) 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
ساخت یک هوک سفارشی برای کمک به Local Storage Creating a custom hook to help with local Storage
ذخیره توکن JWT در Local Storage Storing the JWT token in Local Storage

مرکز تماس React 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

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

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

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

تنظیم توئیلیو و تغییر شماره تلفن Setup Twilio and changing phone number

وب‌هوک‌های توئیلیو Twilio Webhooks

مدیریت تماس‌های وب‌هوک توئیلیو Handling Twilio Webhook calls
داشتن توئیلیو برای گفتن "متشکرم" به جای شما زمانی که کسی تماس می‌گیرد 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
به‌روزرسانی وضعیت تماس به enqueued 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 با بک‌اند Validating the JWT token with the backend
ارسال توکن با اتصال SocketIo Passing the token using SocketIo connection
تنظیم سوکت با توکن به عنوان تغییر مقدار آن Setting the socket with the token as its value changes
اعتبارسنجی توکن ما در بک‌اند با استفاده از یک middleware سوکت Validating our token on the backend using a socket middleware

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

نصب و راه‌اندازی Twilio client Installing and setting up Twilio client
ما از use State استفاده می‌کنیم، باید use State را import کنیم We use use State we should import use State
راه‌اندازی توئیلیو برای برقراری تماس‌های خروجی Setting up Twilio to make outgoing calls

دسترسی به Voice Grant Voice Grant Access

ساخت توکن توئیلیو برای اعطای دسترسی به صدا Creating the Twilio token to grant access to voice
ارسال توکن توئیلیو به فرانت‌اند Passing the Twilio token to the frontend
ساخت اتصال سوکت ما با سرورهای توئیلیو 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

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

ضمیمه ۱ Appendix 1

نصب ماژول‌های VSCode Installing VSCode modules
نصب ماژول‌های VSCode Installing VSCode modules
Emmet و سرعت بخشیدن به کدنویسی Emmet and speed up coding
اضافه کردن ابزارهای افزونه برای کروم Add extension tools for chrome
نصب افزونه Docker Installing Docker Extension
اتصال به mongoDB در Docker با استفاده از Compass Connecting to mongoDB inside Docker using Compass

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

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

برای ارسال نظر ثبت نام کنید.

آموزش توئیلیو - ساخت مرکز تماس کامل با ری‌اکت و نود - آخرین آپدیت

دانلود Twilio - Make a complete Call Centre in React and Node

ساخت مرکز تماس کامل با React، Node و Twilio: احراز هویت پیامکی، صف انتظار و پاسخگویی تماس

چگونه یک مرکز تماس از ابتدا تا انتها بسازیم

نحوه ارسال و دریافت پیامک با Twilio

نحوه برقراری و دریافت تماس صوتی با Twilio

نحوه مدیریت صف انتظار تماس با Twilio

نحوه استفاده از Twilio Verify برای احراز هویت شماره موبایل کاربر

نحوه ارسال پیامک به شماره تلفن

نحوه برقراری تماس با شماره تلفن

مقدمه توئیلیو Twilio Introduction

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

ساختن حساب کاربری توئیلیو Creating a Twilio Account

دریافت شماره تلفن و ساخت تمام توکن‌های لازم Getting a phone number and creating all the necessary tokens

تأیید توئیلیو Twilio Verify

ساخت سرویس تأیید توئیلیو Creating a Twilio Verify Service

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

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

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

ساختن کلاس توئیلیو Creating a Twilio Class

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

تأیید کد با توئیلیو Verifying the code with Twilio

ورود React با SMS React Login with SMS

ساخت اپلیکیشن ری‌اکت ما 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

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

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

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

ارسال کد به تأیید توئیلیو 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

درک سوکت‌ها و بازسازی کد Understanding sockets and refactoring

احراز هویت با استفاده از JWT (توکن وب JSON) 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

ساخت یک هوک سفارشی برای کمک به Local Storage Creating a custom hook to help with local Storage

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

مرکز تماس React 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

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

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

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

تنظیم توئیلیو و تغییر شماره تلفن Setup Twilio and changing phone number

وب‌هوک‌های توئیلیو Twilio Webhooks

مدیریت تماس‌های وب‌هوک توئیلیو Handling Twilio Webhook calls

داشتن توئیلیو برای گفتن "متشکرم" به جای شما زمانی که کسی تماس می‌گیرد 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

به‌روزرسانی وضعیت تماس به enqueued 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 با بک‌اند Validating the JWT token with the backend

ارسال توکن با اتصال SocketIo Passing the token using SocketIo connection

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

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

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

نصب و راه‌اندازی Twilio client Installing and setting up Twilio client

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

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

دسترسی به Voice Grant Voice Grant Access

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

ارسال توکن توئیلیو به فرانت‌اند Passing the Twilio token to the frontend

ساخت اتصال سوکت ما با سرورهای توئیلیو 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