الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

توبيليو تلامس مركز الاتصال

يتمثل Essence of a Modern Contact Center في خدمة العملاء على قنوات متعددة (الصوت ، الدردشة على الويب ، الفيديو ، البريد الإلكتروني ، وسائل التواصل الاجتماعي ، وما إلى ذلك) ، السماح لهم بالتحرك بسلاسة عبر القنوات والأهم من ذلك سياق المحادثات.

عرض Twilio Contact Center هو العمارة المرجعية لبناء مركز اتصال حديث. يتمثل محور العرض التوضيحي في إظهار كيفية إنشاء مركز اتصال قائم على منصة Twilio ومكونات الواجهة الخلفية والواجهة المختلفة اللازمة.

مركز الاتصال Twilio

ملاحظة: لقد قمنا بالعمل الأساسي من منظور UX ويبقى الكثير من الفرص لتحسينه. لقد تم تصميمه لأغراض تجريبية ولم يتم فحص الأمن بشكل منفصل.

يتم توفير هذا التطبيق كما هو. Twilio لا يدعمها رسميا.

سمات

  • أرقام هواتف Twilio
  • صوت Twilio قابل للبرمجة (PSTN ، عميل Twilio Webrtc)
  • دردشة Twilio القابلة للبرمجة
  • Twilio SMS و Facebook Messenger
  • فيديو Twilio قابل للبرمجة
  • Twilio TaskRouter
  • Twilio Rest APIs

تتدفق رحلة العميل:

استدعاء صوت رد الاتصال (PSTN):

يملأ العميل طلب المكالمات عبر الإنترنت -> نموذج تم إرساله إلى الخادم -> المهمة على TaskRouter تم إنشاؤها -> العثور على وكيل متاح ومطابقة -> Agent يقبل الحجز ويقرم العميل (PSTN) -> توصيل العميل بالوكيل (WEBRTC)

رحلة العميل مرة أخرى عبر PSTN

الدعوة الصوتية الواردة (PSTN):

استدعاء العميل رقم هاتف Twilio -> طلبات twilio webhook -> الخادم ينشئ TWIML لـ IVR -> يختار المتصل خيار IVR -> Task on TaskRouter تم إنشاؤه -> العثور على وكيل متاح ومطابقة -> الوكيل يقبل الحجز -

رحلة العميل الواردة

دردشة الويب:

يملأ العميل نموذج طلب دردشة الويب عبر الإنترنت -> نموذج تم إرساله إلى الخادم -> المهمة على TaskRouter تم إنشاؤها -> العثور على وكيل متاح ومطابقة -> Agent يقبل الحجز -> ابدأ الدردشة بين العميل والوكيل

دردشة رحلة العميل

مكالمة الفيديو:

يملأ العميل نموذج طلب مكالمة الفيديو -> نموذج تم إرساله إلى الخادم -> المهمة على TaskRouter و Room Room تم إنشاؤها -> العثور على وكيل متاح ومطابقة -> Agent يقبل الحجز -

فيديو رحلة العميل

في الوقت الفعلي ، لوحة معلومات أحداث TaskRouter:

في الوقت الحقيقي عرض مقاييس مركز الاتصال التشغيلي (على سبيل المثال: متوسط وقت مقبض المكالمات ، وإنتاجية الوكيل ، ومقاييس المكالمات ، وإحصائيات TaskRouter ، والمزيد وما إلى ذلك). يرجى مراجعة الريبو التالي: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard

المتطلبات المسبقة:

  • المعرفة الأساسية لمنصة Twilio - TwilioQuest ، وهي لعبة تفاعلية وذات ذاتي حيث تتعلم كيفية Twilio.
  • Twilio TaskRouter
  • عميل Twilio
  • دردشة Twilio القابلة للبرمجة
  • فيديو Twilio قابل للبرمجة
  • معرفة العمل من Angular.js ، bootstrap و node.js

تثبيت

إذا لم تكن قد استخدمت Twilio من قبل ، مرحبًا بك! ستحتاج إلى الاشتراك في حساب Twilio.

نوصيك بإنشاء مشروع منفصل داخل Twilio وتثبيت هذا التطبيق باستخدام هذا المشروع.

ملاحظة: من المستحسن أن يكون لديك حساب Twilio تمت ترقيته لتجربة هذا العرض التوضيحي بالكامل.

متغيرات التكوين

قبل بدء التثبيت ، ستحتاج إلى جمع المتغيرات التالية من بوابة حساب Twilio.

  • TWILIO_ACCOUNT_SID
  • TWILIO_AUTH_TOKEN
  • TWILIO_WORKSPACE_SID

  • للحساب SID و AUTH ، يرجى النقر هنا: https://www.twilio.com/console

  • شراء رقم هاتف أو استخدم رقمًا موجودًا (سيقوم التطبيق بتكوين الرقم لك لاحقًا)

  • قم بإنشاء مساحة عمل Twilio TaskRouter الجديدة وحدد القالب المخصص.

  • لـ Twilio API Key Sid و Twilio API Key Secret ، انقر هنا: https://www.twilio.com/console/dev-tools/api- keys

  • TWILIO_API_KEY_SID
  • TWILIO_API_KEY_SECRET

لدردشة الويب ، تحتاج إلى تعيين متغيرات بيئة الدردشة القابلة للبرمجة:

  • TWILIO_CHAT_SERVICE_SID
  • لإنشاء خدمات دردشة جديدة أو إعادة استخدام نسخة موجودة ، انقر هنا: https://www.twilio.com/console/chat/services

لا يدعم واجهة المستخدم الوكيل التعامل مع المهام المتعددة في وقت واحد ، وبالتالي يتم توجيه جميع المهام على نفس قناة المهمة مع قدرة مهمة واحدة متزامنة. لمزيد من التفاصيل ، يرجى التحقق من تعدد المهام

  • للمكالمات الخارجية ، تمكين إعداد مؤتمر الوكيل ، انقر هنا: https://www.twilio.com/console/voice/conferences/settings

تثبيت terraform - هيروكو

يمكنك نشر هذا المشروع مع جميع depencendies على Heroku مع Terraform ، وهي بنية تحتية مفتوحة المصدر كأداة لبرنامج التعليمات البرمجية.

قم بإنشاء مفتاح API لـ Heroku ، تحقق من دليل API Heroku Platform للحصول على المساعدة.

أضف مفتاح Heroku API وعنوان بريدك الإلكتروني إلى terraform.tfvars .

تهيئة ملفات تكوين terraform وتشغيلها

terraform init

إذا لم تكن قد قمت بتثبيت terraform ، فاتبع terraform يبدأ.

أضف متغيرات twilio المدرجة في متغيرات تكوين القسم إلى ملف متغيرات terraform.tfvars .

اضبط اسم تطبيق Heroku الخاص بك في ملف وصف البنية التحتية terraform_heroku.tf

إنشاء خطة تنفيذ

terraform plan

تثبيت المشروع على Heroku من خلال التنفيذ

terraform apply

بعد الانتهاء من التثبيت ، يرجى فتح https://<your-application-name>.herokuapp.com/setup وتكوين التطبيق. يمكن الوصول إلى النظرة العامة التجريبية على https://<your-application-name>.herokuapp.com .

تثبيت نقرة واحدة - هيروكو

سيؤدي ذلك إلى تثبيت التطبيق وجميع التبعيات على Heroku (تسجيل الدخول المطلوب) لك. كجزء من التثبيت ، سوف يسيرك تطبيق Heroku من خلال تكوين متغيرات البيئة. يرجى النقر فوق الزر التالي لنشر التطبيق.

بعد الانتهاء من التثبيت ، يرجى فتح https://<your-application-name>.herokuapp.com/setup وتكوين التطبيق. يمكن الوصول إلى النظرة العامة التجريبية على https://<your-application-name>.herokuapp.com .

تثبيت محرك تطبيق Google

قم بتنزيل وتثبيت Google Cloud SDK.

إنشاء مشروع جديد

gcloud projects create <your-project-id> --set-as-default

تهيئة تطبيق محرك التطبيق الخاص بك مع مشروعك واختر منطقته:

gcloud app create --project=<your-project-id>

أضف متغيرات twilio المدرجة في متغيرات تكوين القسم إلى ملف متغيرات app.yaml .

نشر التطبيق على محرك التطبيق عن طريق تشغيل الأمر التالي.

gcloud app deploy

لعرض تشغيل التطبيق الخاص بك

gcloud app browse

بعد الانتهاء من التثبيت ، يرجى فتح https://<your-project-id>.appspot.com/setup وتكوين التطبيق. يمكن الوصول إلى النظرة العامة التجريبية على https://<your-project-id>.appspot.com .

التثبيت اليدوي - على الخادم الخاص بك

شوكة واستنساخ المستودع. ثم ، تثبيت التبعيات مع

npm install

إذا كنت ترغب في تحميل متغيرات البيئة من ملف ، فقم بتثبيت حزمة dotenv للتعامل مع متغيرات البيئة المحلية.

npm install dotenv

في دليل الجذر ، قم بإنشاء ملف يسمى ".env" ، ثم أضف ما يلي إلى أعلى app.js

require('dotenv').config()

من أجل تشغيل العرض التوضيحي ، ستحتاج إلى تعيين متغيرات البيئة في متغيرات التكوين] (#التكوين المتغيرات)

ابدأ التطبيق

npm start

قبل أن تتمكن من استخدام العرض التوضيحي ، يرجى فتح http://<your-application-name>/setup وتكوين التطبيق. يمكن الوصول إلى النظرة العامة التجريبية على http://<your-application-name> . يرجى ملاحظة ، إذا لم يتم تعيين Process.env.port ، يتم تشغيل التطبيقات على المنفذ 5000.

إذا كنت تقوم بتشغيل العرض التوضيحي محليًا ، فيرجى تذكر أن Twilio يحتاج إلى عنوان يمكن الوصول إليه علنًا لـ Webhooks ، وتسجل عملية الإعداد هذه مع Twilio. على هذا النحو ، ستحتاج إلى تشغيل شيء مثل Ngrok بدلاً من مجرد ضرب http: // localhost: 5000/. عندما تحصل على عناوين جديدة من NGROK ، ستحتاج أيضًا إلى إعادة تشغيل عملية الإعداد لتسجيل العنوان المحدث مع Twilio.

إعداد ngrok

  • نظام التثبيت على نطاق واسع

    • قم بتنزيل وتثبيت من Ngrok

    • تثبيت مع NPM npm install ngrok -g

    • تشغيل Ngrok (إذا تم تعريف المنفذ في تحديث .env الخاص بك وفقًا لذلك)

      ./ngrok http 5000

  • مشروع تثبيت فقط

    • تثبيت حزمة ngrok

      npm install ngrok --dev

    • أضف ما يلي إلى أعلى app.js 

       const ngrok = require('ngrok')

const ngrokUrl = async function () {
 	const url = await ngrok.connect((process.env.PORT || 5000))
 	console.log('ngrok url ->', url)
}

    • في app.js ، اتصل بـ ngrokurl في app.listen لتسجيل عنوان URL ngrok على الخادم تدور

      ngrokUrl()

ملاحظة: على Google Chrome ، يلزم اتصال HTTPS آمن لإجراء المكالمات الهاتفية عبر WEBRTC. استخدم نفقًا يدعم HTTPs مثل NGROK ، والذي يمكنه إعادة توجيه حركة المرور إلى خادم الويب الخاص بك.

مساهمات

المساهمات موضع ترحيب ومقبول بشكل عام. لعدم التعديلات التافهة ، من الجيد تقديم مشكلة تشرح التغييرات المقترحة قبل العلاقات العامة. هذا يتيح للمشرفين تقديم التوجيه وتجنب القيام بعمل مكرر.

يجب أن تلتزم التغييرات بأسلوب رمز المشروع الشائع. 

 # please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix

لجعل الحياة أسهل للمساهمين الآخرين والمراجع يرجى إعادة التزامك في نفس العلاقات العامة 

 git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f

لديك سؤال؟

يمكنك متابعتي على Twitter - mdamm_de

رخصة

معهد ماساتشوستس للتكنولوجيا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل