共用方式為


通訊:建立 Azure 通訊服務資源

有效的通訊對於成功的自定義商務應用程序至關重要。 藉由使用 Azure 通訊服務 (ACS),您可以將電話、即時聊天、音訊/視訊通話和電子郵件和簡訊等功能新增至您的應用程式。 稍早,您已瞭解 Azure OpenAI 如何為電子郵件和簡訊產生完成。 現在,您將瞭解如何傳送訊息。 ACS 和 OpenAI 可以藉由簡化通訊、改善互動,以及提升商務生產力,來增強您的應用程式。

在本練習中,您將會:

  • 建立 Azure 通訊服務 (ACS) 資源。
  • 新增具有通話和簡訊功能的免付費電話號碼。
  • 線上電子郵件網域。
  • 使用 ACS 資源的值更新專案的 .env 檔案。

Microsoft雲端案例概觀

建立 Azure 通訊服務 資源

  1. 如果您尚未登入,請瀏覽瀏覽器中的 Azure 入口網站 並登入。

  2. 在頁面頂端的搜尋列中輸入通訊服務,然後從出現的選項中選取 [通訊服務]。

    Azure 入口網站中的 ACS

  3. 選取工具列中的 [建立 ]。

  4. 執行下列工作:

    • 選取您的 Azure 訂用帳戶。
    • 選取要使用的資源群組(如果資源群組不存在,請建立新的資源群組)。
    • 輸入 ACS 資源名稱。 它必須是唯一值。
    • 選取數據位置。
  5. 選取 [檢閱 + 建立 ],然後選取 [ 建立]。

  6. 您已成功建立新的 Azure 通訊服務 資源! 接下來,您將啟用通話和簡訊功能。 您也會將電子郵件網域連線到資源。

啟用通話和簡訊功能

  1. 新增電話號碼,並確定電話號碼已啟用通話功能。 您將使用此電話號碼從應用程式撥打電話。

    • 從 [資源] 功能選取 [ 電話語音] 和 [簡訊 ] -->[電話號碼 ]。

    • 在工具列中選取 [+ 取得 ],或選取 [ 取得數位 ] 按鈕,然後輸入下列資訊:

      • 國家或地區:United States
      • 數位類型Toll-free

      備註

      您的 Azure 訂用帳戶上需要信用卡才能建立免付費電話號碼。 如果您沒有檔案上的卡片,請隨意略過新增電話號碼,並跳到聯機電子郵件網域的練習下一節。 您仍然可以使用應用程式,但無法撥打電話號碼。

      • 號碼:針對列出的其中一個電話號碼,選取 [新增至購物車 ]。
  2. 選取 [下一步],檢閱電話號碼詳細數據,然後選取 [ 立即購買]。

    備註

    美國 和加拿大現在強制對免付費號碼進行簡訊驗證。 若要啟用 SMS 訊息,您必須在電話號碼購買之後提交驗證。 雖然本教學課程不會進行該程式,但您可以從 [資源] 功能選取 [ 電話語音和簡訊 ] -->[法規檔 ],然後新增必要的驗證檔。

  3. 建立電話號碼之後,請選取它以移至 [ 功能 ] 面板。 確定已設定下列值(預設應設定):

    • [通話] 區段中,選取 Make calls
    • SMS 區段中,選取 Send and receive SMS
    • 選取 [儲存]。
  4. 將電話號碼值複製到檔案,以供日後使用。 電話號碼應遵循此一般模式: +12345678900

線上電子郵件網域

  1. 執行下列工作,為您的 ACS 資源建立連線的電子郵件網域,以便傳送電子郵件。 這會用來從應用程式傳送電子郵件。

    • 從 [資源] 功能選取 [ 電子郵件 ] -->[網域 ]。
    • 從工具列選取 [連線網域 ]。
    • 選取您的 訂用帳戶 和資源 群組
    • 在 [ 電子郵件服務 ] 下拉式清單中,選取 Add an email service
    • 提供電子郵件服務的名稱,例如 acs-demo-email-service
    • 選取 [檢閱 + 建立 ],後面接著 [ 建立]。
    • 部署完成後,請選取 Go to resource,然後選取 1-click add 以新增免費的 Azure 子域。
    • 新增子域之後(部署需要一些時間),請選取它。
    • 一旦您在 AzureManagedDomain 畫面上,請從 [資源] 功能選取 [電子郵件服務 ] -->MailFrom 位址
    • MailFrom 值複製到檔案。 您稍後會在更新 .env 檔案時使用它。
    • 返回您的 Azure 通訊服務資源,然後從資源功能表中選取 [電子郵件->網域]。
    • 選取 Add domain 並輸入 MailFrom 上一個步驟中的值(請確定您選取正確的訂用帳戶、資源群組和電子郵件服務)。 選取 Connect 按鈕。

更新檔案.env

  1. 現在您的 ACS 電話號碼(已啟用通話和簡訊)和電子郵件網域已就緒,請在專案中的 .env 檔案中更新下列機碼/值:

    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 connection string:ACS 資源的 [金鑰] 區段的值。

    • ACS_PHONE_NUMBER:將免付費電話號碼指派給 ACS_PHONE_NUMBER 值。

    • ACS_EMAIL_ADDRESS:指派您的電子郵件 “MailTo” 位址值。

    • CUSTOMER_EMAIL_ADDRESS:指派您想要從應用程式傳送電子郵件的電子郵件地址(因為應用程式資料庫中的客戶數據只是範例數據)。 您可以使用個人電子郵件位址。

    • CUSTOMER_PHONE_NUMBER:您必須提供以美國為基礎的電話號碼(截至今天為止),因為其他國家/地區需要額外的驗證,才能傳送簡訊。 如果您沒有以美國為基礎的數位,您可以將它保留空白。

啟動/重新啟動應用程式和 API 伺服器

根據您完成的練習,執行下列 其中一 個步驟:

  • 如果您在先前的練習中啟動資料庫、API 伺服器和網頁伺服器,您必須停止 API 伺服器和 Web 伺服器,然後重新啟動它們以挑選 .env 檔案變更。 您可以讓資料庫保持執行狀態。

    找出執行 API 伺服器和網頁伺服器的終端機視窗,然後按 CTRL + C 以停止它們。 在每一個終端機視窗中輸入 npm start ,然後按 Enter 鍵,再次啟動它們。 繼續進行下一個練習。

  • 如果您尚未啟動資料庫、API 伺服器和網頁伺服器,請完成下列步驟:

    1. 在下列步驟中,您將在 Visual Studio Code 中建立三個終端機視窗。

      Visual Studio Code 中的三個終端機視窗

    2. 以滑鼠右鍵按兩下 Visual Studio Code 檔案清單中的 .env 檔案,然後選取 [ 在整合式終端機中開啟]。 在繼續之前,請確定您的終端機位於專案的根目錄 - openai-acs-msgraph

    3. 從下列 其中一個選項 中選擇,以啟動 PostgreSQL 資料庫:

      • 如果您已安裝並執行 Docker Desktop ,請在終端機視窗中執行 docker-compose up ,然後按 Enter

      • 如果您已安裝 Podman-compose 並執行 Podman, 請在終端機視窗中執行 podman-compose up ,然後按 Enter

      • 若要使用 Docker Desktop、Podman、nerdctl 或您已安裝的另一個容器運行時間直接執行 PostgreSQL 容器,請在終端機視窗中執行下列命令:

        • Mac、Linux 或 Windows 子系統 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
          
        • 使用 PowerShell 的 Windows:

          [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. 資料庫容器啟動時,請按 + Visual Studio Code 終端機工具列 中的圖示來建立第二個終端機視窗。

      終端機工具列中的 Visual Studio Code + 圖示。

    5. cd 進入 伺服器/typescript 資料夾,然後執行下列命令來安裝相依性並啟動 API 伺服器。

      • npm install
      • npm start
    6. 在 Visual Studio Code +中再次按圖示,以建立第三個終端機視窗。

    7. cd 進入 客戶端 資料夾,然後執行下列命令來安裝相依性並啟動網頁伺服器。

      • npm install
      • npm start
    8. 瀏覽器將會啟動,而且系統會帶您前往 http://localhost:4200

      已啟用 Azure OpenAI 的應用程式螢幕快照

後續步驟