Freigeben über

Kommunikation: Erstellen einer Azure Communication Services-Ressource

Eine effektive Kommunikation ist für erfolgreiche benutzerdefinierte Geschäftsanwendungen unerlässlich. Mithilfe von Azure Communication Services (ACS) können Sie Ihren Anwendungen Features wie Telefonanrufe, Live-Chat, Audio-/Videoanrufe und E-Mail- und SMS-Nachrichten hinzufügen. Früher haben Sie erfahren, wie Azure OpenAI Abschlusse für E-Mail- und SMS-Nachrichten generieren kann. Jetzt erfahren Sie, wie Sie die Nachrichten senden. Gemeinsam können ACS und OpenAI Ihre Anwendungen verbessern, indem sie die Kommunikation vereinfachen, Interaktionen verbessern und die Geschäftliche Produktivität steigern.

In dieser Übung führen Sie die folgenden Schritte aus:

  • Erstellen Sie eine Azure Communication Services (ACS)-Ressource.
  • Fügen Sie eine gebührenfreie Telefonnummer mit Anruf- und SMS-Funktionen hinzu.
  • Verbinden einer E-Mail-Domäne
  • Aktualisieren Sie die env-Datei des Projekts mit Werten aus Ihrer ACS-Ressource.

Übersicht über das Microsoft Cloud-Szenario

Erstellen einer Azure Communication Services-Ressource

  1. Besuchen Sie das Azure-Portal in Ihrem Browser, und melden Sie sich an, wenn Sie es noch nicht getan haben.

  2. Geben Sie Kommunikationsdienste in die Suchleiste oben auf der Seite ein, und wählen Sie "Kommunikationsdienste " aus den angezeigten Optionen aus.

    ACS im Azure-Portal

  3. Wählen Sie auf der Symbolleiste "Erstellen" aus.

  4. Führen Sie die folgenden Aufgaben aus:

    • Wählen Sie Ihr Azure-Abonnement.
    • Wählen Sie die zu verwendende Ressourcengruppe aus (erstellen Sie eine neue Gruppe, wenn sie nicht vorhanden ist).
    • Geben Sie einen ACS-Ressourcennamen ein. Der Name muss ein eindeutiger Wert sein.
    • Wählen Sie einen Datenspeicherort aus.

  5. Wählen Sie "Überprüfen" und "Erstellen " gefolgt von "Erstellen" aus.

  6. Sie haben erfolgreich eine neue Azure Communication Services-Ressource erstellt! Als Nächstes aktivieren Sie die Telefonanruf- und SMS-Funktionen. Außerdem verbinden Sie eine E-Mail-Domäne mit der Ressource.

Aktivieren von Telefonanruf- und SMS-Funktionen

  1. Fügen Sie eine Telefonnummer hinzu, und stellen Sie sicher, dass die Telefonnummer Anruffunktionen aktiviert hat. Sie verwenden diese Telefonnummer, um von der App aus ein Telefon aufzurufen.

    • Wählen Sie "Telefonie" und "SMS-Telefonnummern>" im Menü "Ressource" aus.

    • Wählen Sie +Abrufen in der Symbolleiste aus (oder wählen Sie die Schaltfläche " Zahl abrufen") aus, und geben Sie die folgenden Informationen ein:

      • Land oder Region: United States
      • Zahlentyp: Toll-free

      Hinweis

      Eine Kreditkarte ist für Ihr Azure-Abonnement erforderlich, um die gebührenfreie Nummer zu erstellen. Wenn Sie keine Karte in der Datei haben, können Sie das Hinzufügen einer Telefonnummer überspringen und zum nächsten Abschnitt der Übung springen, der eine E-Mail-Domäne verbindet. Sie können die App weiterhin verwenden, können aber keine Telefonnummer anrufen.

      • Nummer: Wählen Sie "Zum Warenkorb hinzufügen" für eine der aufgeführten Telefonnummern aus.

  2. Wählen Sie "Weiter" aus, überprüfen Sie die Details der Telefonnummer, und wählen Sie "Jetzt kaufen" aus.

    Hinweis

    Sms-Überprüfung für gebührenfreie Nummern ist jetzt in den USA und Kanada obligatorisch. Um SMS-Nachrichten zu aktivieren, müssen Sie die Überprüfung nach dem Kauf der Telefonnummer übermitteln. Während dieses Lernprogramms diesen Vorgang nicht durchläuft, können Sie telefonie- und SMS -->Regulatorische Dokumente aus dem Ressourcenmenü auswählen und die erforderliche Validierungsdokumentation hinzufügen.

  3. Nachdem die Telefonnummer erstellt wurde, wählen Sie sie aus, um zum Bereich "Features " zu gelangen. Stellen Sie sicher, dass die folgenden Werte festgelegt sind (sie sollten standardmäßig festgelegt werden):

    • Wählen Sie im Abschnitt " Anrufe " die Option Make callsaus.
    • Wählen Sie im Abschnitt SMS die Option Send and receive SMSaus.
    • Wählen Sie Speichern aus.

  4. Kopieren Sie den Telefonnummernwert zur späteren Verwendung in eine Datei. Die Telefonnummer sollte diesem allgemeinen Muster entsprechen: +12345678900.

Verbinden einer E-Mail-Domäne

  1. Führen Sie die folgenden Aufgaben aus, um eine verbundene E-Mail-Domäne für Ihre ACS-Ressource zu erstellen, damit Sie E-Mails senden können. Dies wird verwendet, um E-Mails von der App zu senden.

    • Wählen Sie "E-Mail-Domänen>" im Menü "Ressource" aus.
    • Wählen Sie in der Symbolleiste " Domäne verbinden" aus.
    • Wählen Sie Ihre Abonnement - und Ressourcengruppe aus.
    • Wählen Sie unter der Dropdownliste " E-Mail-Dienst " die Option Add an email serviceaus.
    • Geben Sie dem E-Mail-Dienst einen Namen, z acs-demo-email-service. B. .
    • Wählen Sie "Überprüfen" und "Erstellen " gefolgt von "Erstellen" aus.
    • Wählen Sie Go to resourcenach Abschluss der Bereitstellung eine kostenlose Azure-Unterdomäne aus, und wählen Sie sie aus 1-click add , um eine kostenlose Azure-Unterdomäne hinzuzufügen.
    • Nachdem die Unterdomäne hinzugefügt wurde (es dauert ein paar Minuten, um bereitgestellt zu werden), wählen Sie sie aus.
    • Sobald Sie sich auf dem Bildschirm "AzureManagedDomain" befinden, wählen Sie "E-Mail-Dienste –->-Adressen aus dem Menü "Ressource" aus.
    • Kopieren Sie den MailFrom-Wert in eine Datei. Sie verwenden sie später, wenn Sie die env-Datei aktualisieren.
    • Wechseln Sie zurück zu Ihrer Azure Communication Services-Ressource, und wählen Sie "E-Mail-Domänen>" aus dem Ressourcenmenü aus.
    • Wählen Sie den Add domain Wert aus dem vorherigen Schritt ausMailFrom, und geben Sie ihn ein (stellen Sie sicher, dass Sie das richtige Abonnement, die Ressourcengruppe und den E-Mail-Dienst auswählen). Wählen Sie die Schaltfläche Connect aus.

Aktualisieren der .env Datei

  1. Nachdem Ihre ACS-Telefonnummer (mit Aktivierter Anrufe und SMS) und E-Mail-Domäne bereit ist, aktualisieren Sie die folgenden Schlüssel/Werte in der env-Datei in Ihrem Projekt:

    ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>

    • ACS_CONNECTION_STRING: Der connection string Wert aus dem Abschnitt "Schlüssel " Ihrer ACS-Ressource.

    • ACS_PHONE_NUMBER: Weisen Sie dem Wert Ihre gebührenfreie Nummer zu ACS_PHONE_NUMBER .

    • ACS_EMAIL_ADDRESS: Weisen Sie Ihren E-Mail-Adresswert "MailTo" zu.

    • CUSTOMER_EMAIL_ADDRESS: Weisen Sie eine E-Mail-Adresse zu, an die E-Mails von der App gesendet werden sollen (da die Kundendaten in der App-Datenbank nur Beispieldaten sind). Sie können eine persönliche E-Mail-Adresse verwenden.

    • CUSTOMER_PHONE_NUMBER: Sie müssen eine US-basierte Telefonnummer (ab heute) aufgrund einer zusätzlichen Überprüfung angeben, die in anderen Ländern/Regionen zum Senden von SMS-Nachrichten erforderlich ist. Wenn Sie keine US-basierte Nummer haben, können Sie sie leer lassen.

Starten/Neustarten der Anwendungs- und API-Server

Führen Sie einen der folgenden Schritte basierend auf den Übungen aus, die Sie bis zu diesem Punkt abgeschlossen haben:

  • Wenn Sie die Datenbank, den API-Server und den Webserver in einer früheren Übung gestartet haben, müssen Sie den API-Server und den Webserver beenden und neu starten, um die env-Dateiänderungen zu übernehmen. Sie können die Datenbank ausführen lassen.

    Suchen Sie die Terminalfenster, unter denen der API-Server und der Webserver ausgeführt werden, und drücken Sie STRG+C , um sie zu beenden. Starten Sie sie erneut, indem Sie in jedes Terminalfenster eingeben npm start und die EINGABETASTE drücken. Fahren Sie mit der nächsten Übung fort.

  • Wenn Sie die Datenbank, den API-Server und den Webserver noch nicht gestartet haben, führen Sie die folgenden Schritte aus:

    1. In den folgenden Schritten erstellen Sie drei Terminalfenster in Visual Studio Code.

      Drei Terminalfenster in Visual Studio Code

    2. Klicken Sie in der Visual Studio Code-Dateiliste mit der rechten Maustaste auf die env-Datei , und wählen Sie " Im integrierten Terminal öffnen" aus. Stellen Sie sicher, dass sich Ihr Terminal am Stamm des Projekts befindet - openai-acs-msgraph -, bevor Sie fortfahren.

    3. Wählen Sie eine der folgenden Optionen aus, um die PostgreSQL-Datenbank zu starten:

      • Wenn Docker Desktop installiert und ausgeführt wird, führen Sie sie im Terminalfenster aus docker-compose up , und drücken Sie die EINGABETASTE.

      • Wenn Podman mit installierter und ausgeführter Podman-Erstellung ausgeführt wird, führen podman-compose up Sie sie im Terminalfenster aus, und drücken Sie die EINGABETASTE.

      • Um den PostgreSQL-Container direkt mit Docker Desktop, Podman, nerdctl oder einer anderen installierten Containerlaufzeit auszuführen, führen Sie den folgenden Befehl im Terminalfenster aus:

        • Mac, Linux oder Windows-Subsystem für Linux (WSL):

          [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres

        • Windows mit PowerShell:

          [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres

    4. Nachdem der Datenbankcontainer gestartet wurde, drücken Sie das + Symbol in der Symbolleiste des Visual Studio Code Terminal , um ein zweites Terminalfenster zu erstellen.

      Visual Studio Code + symbol in der Terminalsymbolleiste.

    5. cd in den Server-/Typescript-Ordner ein, und führen Sie die folgenden Befehle aus, um die Abhängigkeiten zu installieren und den API-Server zu starten.

      • npm install
      • npm start

    6. Drücken Sie erneut das + Symbol in der Visual Studio Code Terminal-Symbolleiste , um ein drittes Terminalfenster zu erstellen.

    7. cd in den Clientordner ein, und führen Sie die folgenden Befehle aus, um die Abhängigkeiten zu installieren und den Webserver zu starten.

      • npm install
      • npm start

    8. Ein Browser wird gestartet, und Sie werden zu http://localhost:4200.

      Anwendungsfoto mit aktiviertem Azure OpenAI

Nächster Schritt

Kommunikation: Tätigen eines Telefonanrufs