بدء استخدام حزم JavaScript لمكتبة واجهة مستخدم Azure Communication Services التي تتصل بقائمة انتظار مكالمات Teams والردود التلقائية

هام

هذه الميزة من Azure Communication Services قيد المعاينة حاليا. الميزات في المعاينة متاحة للجمهور ويمكن استخدامها من قبل جميع عملاء Microsoft الجدد والموجودين.

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

لمزيد من المعلومات، راجع ⁧⁩شروط الاستخدام التكميلية لمعاينات Microsoft Azure⁧⁩.

لتسهيل اتصالات أفضل للأعمال للعملاء، توفر مكتبة واجهة مستخدم Azure Communication Services حزم JavaScript لتجربة حلول عبر الأنظمة الأساسية لاستخدام مكتبة واجهة المستخدم. هذا البرنامج التعليمي هو أسرع طريقة من الدخول في مكالمة باستخدام مكتبة واجهة المستخدم وTeams.

بعد هذا البرنامج التعليمي سوف:

السماح لك بوضع تجربة اتصال على أي صفحة ويب تربط عملائك بعملك
إنشاء تجربة اتصال في أنظمة أساسية أخرى غير React

المتطلبات الأساسية

يجب إكمال هذه الخطوات قبل أن تتمكن من إكمال التجربة بأكملها. تواصل مع مسؤول Teams إذا كانت لديك أسئلة حول إعداد تطبيقات Teams الصوتية أو اتحاد مستأجري Teams.

Visual Studio Code في واحدة من النظم الأساسية المدعومة.
يوصى بإصدارات Node.js وLTS النشطة وصيانة LTS Node 20 LTS. يمكنك استخدام أمر node --version للتحقق من الإصدار الخاص بك.
مورد Azure Communication Services. إنشاء مورد اتصالات.
إكمال إعداد مستأجر Teams للتشغيل التفاعلي مع مورد Azure Communication Services
العمل مع Teams Call Queues وAzure Communication Services.
العمل مع Teams Auto Attendants وAzure Communication Services.

التحقق من العقدة ورمز VS

يمكنك التحقق من تثبيت Node بشكل صحيح باستخدام هذا الأمر.

node -v

يخبرك الإخراج بالإصدار الذي قمت بتثبيته، ويفشل إذا لم يتم تثبيت Node وإضافته إلى .PATH تماما كما هو الحال مع Node يمكنك التحقق لمعرفة ما إذا كان Visual Studio Code مثبتا مع هذا الأمر.

code --version

مثل العقدة يفشل هذا الأمر إذا كانت هناك مشكلة في تثبيت VS Code على جهازك.

الشروع في العمل

نقوم بإنشاء هذا المشروع من خلال 4 خطوات سهلة.

إنشاء المشروع
الحصول على التعليمات البرمجية
إعداد Azure Communication Services وTeams
تشغيل التطبيق

1. إنشاء المشروع

للبدء، سنقوم بإنشاء مجلد جديد للمشروع لتشغيل الأمر التالي في المحطة الطرفية أو موجه الأوامر.

بالنسبة إلى Windows باستخدام موجه الأوامر، استخدم هذا الأمر:

mkdir ui-library-js-test-application; cd ui-library-js-test-application

بالنسبة لنظام التشغيل macOS باستخدام المحطة الطرفية، استخدم هذا الأمر:

mkdir ui-library-js-test-application && cd ui-library-js-test-application

تنشئ هذه البرامج النصية مجلدا جديدا وتنقلك إليه.

بعد ذلك نريد إنشاء ملف جديد يسمى index.html. هذه هي صفحة الويب التي نرفق تجربة الاتصال بها.

2. الحصول على التعليمات البرمجية

أولا، قم بتنزيل حزمة JavaScript من ملف JavaScript المركب للاتصال الصادر. ضع هذه الحزمة في نفس الدليل مثل index.html.

بعد ذلك، تريد فتح index.html في VS Code وإضافة القصاصة البرمجية التالية.

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <title>Embedded call composite basic example</title>
  <style>
    /* These styles are something we provide for the calling experience, please update for your needs */
    /* these apply to the calling experience you will need to style your button how your desire */
    #outbound-call-composite-container-ready {
      height: 22rem;
      width: 32rem;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      box-shadow: 0 0 0.5rem 0;
      border-radius: 1rem;
      padding: 0.5rem;
      z-index: 5;
    }
  </style>
</head>

<body>
  <div id="outbound-call-composite-container"></div>
  <button id="start-call-button">Your calling button</button>
  <!-- replace with https://github.com/Azure/communication-ui-library/releases/latest/download/outboundCallComposite.js for development and prototyping -->
  <script src="./outboundCallComposite.js"></script>
  <script type="module">
    const createCallingExperience = async () => {
      const userId = { communicationUserId: "<Add your ACS ID here>" };
      const token = "<Enter your ACS token>";
      const displayName = "Enter the DisplayName for your user";

      const callAdapter = await outboundCallComposite.loadCallComposite(
        {
          userId: userId,
          token: token,
          displayName: displayName,
          targetCallees: [
            { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" },
          ], // Provide the identifier you want to call, can be flat as a string.
        },
        document.getElementById("outbound-call-composite-container"),
        {
          options: {
            callControls: {
              cameraButton: true,
              screenShareButton: false,
              moreButton: true,
              peopleButton: false,
              raiseHandButton: false,
              displayType: "compact",
            },
            localVideoTile: { position: "floating" },
          },
        }
      );

      window.onbeforeunload = () => {
        callAdapter.dispose();
      };
      // Update the container id to trigger the styles we set above
      const container = document.getElementById("outbound-call-composite-container");
      container.setAttribute("id", "outbound-call-composite-container-ready");
    };
    const startCallButton = document.getElementById("start-call-button");
    startCallButton.onclick = createCallingExperience;
  </script>
</body>

هام

من المهم هنا ملاحظة أن هذا الملف index.html وحزمة outboundCallComposite.js JavaScript يجب أن يكونا في نفس المجلد إذا كنت ترغب في عدم تحرير أي من الاستيراد في هذا الملف.

3. إعداد Azure Communication Services وتطبيق Teams الصوتي

بعد ذلك نريد إنشاء هوية المستخدم المحلي حتى نتمكن من استخدام ذلك لمصادقة المستخدم المحلي وبدء المكالمة. بمجرد حصولك على id تلك القيم للمستخدم و token ، نريد إجراء بعض عمليات التحرير في الملف الذي index.html قمنا به سابقا.

const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";

نريد تحديث هذه المعلومات باستخدام userId و token التي حصلت عليها من مدخل Microsoft Azure أو Azure CLI. يجب عليك أيضا تعيين .displayName

بعد ذلك، نريد إجراء تحرير لتعيين معرف حساب المورد لتطبيق Teams الصوتي الذي تم إحضاره مسبقا عند توحيد مورد خدمات اتصالات Azure. اتصل بمسؤول Teams إذا لم يتم ذلك.

const callAdapter = await outboundCallComposite.loadCallComposite(
    {
        userId: userId,
        token: token,
        displayName: displayName,
        targetCallees: [
        { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, // <- update this teamsAppId value.
        ],
    },
    document.getElementById("outbound-call-composite-container")
);

4. تشغيل التطبيق

الآن بعد أن انتهينا من كل الإعداد، حان الوقت لتشغيل التطبيق.

افتح نافذة terminal أو موجه الأوامر في هذا الدليل وقم بتشغيل الأمر التالي.

npx http-server@latest -p 3000

يبدأ هذا البرنامج النصي باستخدام Node خادم HTTP ويستضيف الملف وحزمة index.html JavaScript. فتح في مستعرض http://localhost:3000. يجب أن تشاهد صفحة بيضاء مع زر، وعند النقر فوقها، يجب أن تشاهد الشاشة التالية.

هام

ملاحظة، إذا حاولت الانتقال إلى الصفحة دون استخدام المضيف المحلي، فلن تعمل تجربة الاتصال الخاصة بك لأسباب أمنية.

انقر فوق الزر الذي start call يظهر في مكتبة CallComposite واجهة المستخدم لبدء مكالمة إلى تطبيق Teams الصوتي.

الاستيلاء على الإنتاج

حاليا هذا البرنامج التعليمي وحزم JS في المعاينة العامة. إذا كنت متحمسا ل Click to Call وتريد معرفة كيف يمكنك استخدام CallComposite لإنشاء تجارب Click to Call لمنتجك اليوم، فلدينا منشور مناقشة في مستودع GitHub الذي سيوضح لك كيفية دمج مكتبة واجهة المستخدم على إطارات عمل العقدة الأخرى. تترجم خطوات البرنامج التعليمي الذي قمت به مباشرة إلى ما هو موضح في هذا العرض وتخبر عن تحميل المركبات مكتبة واجهة المستخدم في أطر عمل أخرى غير React.

الخطوات التالية

لمزيد من المعلومات حول تطبيقات Teams الصوتية، راجع وثائقنا حول الردود التلقائية ل Teams وقوائم انتظار المكالمات في Teams. أو راجع أيضا برنامجنا التعليمي لبناء تجربة أكثر اكتمالا باستخدام React.

التشغيل السريع: انضم إلى تطبيق المكالمات إلى قائمة انتظار مكالمات Teams

التشغيل السريع: انضم إلى تطبيق المكالمات إلى "الرد التلقائي ل Teams"

التشغيل السريع: بدء استخدام مكتبة واجهة مستخدم Azure Communication Services للاتصال بقائمة انتظار مكالمات Teams والردود التلقائية

الملاحظات

هل كانت هذه الصفحة مفيدة؟

Last updated on 2024-06-14