İletişim: Telefon Görüşmesi Yapma

Azure İletişim Hizmetleri telefon arama özelliklerini özel bir İş Kolu (LOB) uygulamasıyla tümleştirmek, işletmelere ve kullanıcılarına çeşitli önemli avantajlar sağlar:

  • Doğrudan LOB uygulamasının içinden çalışanlar, müşteriler ve iş ortakları arasında sorunsuz ve gerçek zamanlı iletişim sağlayarak birden çok platform veya cihaz arasında geçiş yapma gereksinimini ortadan kaldırır.
  • Kullanıcı deneyimini geliştirir ve genel operasyonel verimliliği artırır.
  • Kullanıcılar ilgili destek ekiplerine veya konu uzmanlarına hızlı ve kolay bir şekilde bağlanabildiği için hızlı sorun çözmeyi kolaylaştırır.

Bu alıştırmada şunları yapacaksınız:

  • Uygulamadaki telefon arama özelliğini keşfedin.
  • Telefon görüşmesi özelliğinin nasıl oluşturulduğu hakkında bilgi edinmek için kodu gözden geçirin.

Telefon Arama Özelliğini Kullanma

  1. Önceki alıştırmada bir Azure İletişim Hizmetleri (ACS) kaynağı oluşturdunuz ve veritabanını, web sunucusunu ve API sunucusunu başlattınız. . env dosyasındaki aşağıdaki değerleri de güncelleştirmişsinizdir.

    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>

    Devam etmeden önce önceki alıştırmayı tamamladığınızdan emin olun.

  2. Tarayıcıya (http://localhost:4200 ) dönün, datagrid'i bulun ve Müşteriyle İletişim Kurun'u ve ardından ilk satırda Müşteriyi Ara'yı seçin.

    ACS telefon arama bileşeni - Müşteri çağırma

  3. Üst bilgi içine bir telefon araması bileşeni eklenir. Aramak istediğiniz telefon numaranızı girin (+ ile başladığından ve ülke kodunu içerdiğinden emin olun) ve Ara'yı seçin. Mikrofonunuza erişime izin vermeniz istenir.

    ACS telefon arama bileşeni - Telefon Çeviricisi

  4. Aramayı sonlandırmak için Kapat'ı seçin. Telefon araması bileşenini kapatmak için Kapat'ı seçin.

Telefon Arama Kodunu Keşfetme

İpucu

Visual Studio Code kullanıyorsanız, şunları seçerek dosyaları doğrudan açabilirsiniz:

  • Windows/Linux: Ctrl + P
  • Mac: Cmd + P

Ardından açmak istediğiniz dosyanın adını yazın.

  1. customers-list.component.ts dosyasını açın. Dosyanın tam yolu client/src/app/customers-list/customers-list.component.ts şeklindedir.

  2. openCallDialog() Olay veri yolu kullanarak bir CustomerCall ileti ve müşteri telefon numarası gönderdiğini unutmayın.

    openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}

    Uyarı

    Olay veri yolu kodunu daha fazla keşfetmek istiyorsanız eventbus.service.ts dosyasında bulabilirsiniz. Dosyanın tam yolu client/src/app/core/eventbus.service.ts şeklindedir.

  3. Üst bilgi bileşeninin ngOnInit() işlevi, olay veri yolu tarafından gönderilen olaya abone olur CustomerCall ve telefon araması bileşenini görüntüler. Bu kodu header.component.ts bulabilirsiniz.

    ngOnInit() {
    this.subscription.add(
        this.eventBus.on(Events.CustomerCall, (data: Phone) => {
            this.callVisible = true; // Show phone call component
            this.callData = data; // Set phone number to call
        })
    );
}

  4. phone-call.component.ts açın. Kodu açığa çıkarmak için biraz bekleyin. Dosyanın tam yolu client/src/app/phone-call/phone-call.component.ts şeklindedir. Aşağıdaki temel özelliklere dikkat edin:

    • içinde işlevini acsService.getAcsToken()çağırarak ngOnInit() bir Azure İletişim Hizmetleri erişim belirteci alır.
    • Sayfaya bir "telefon çeviricisi" ekler. Üst bilgideki telefon numarası girişlerine tıklayarak çeviriciyi görebilirsiniz.
    • Sırasıyla ve işlevlerini kullanarak startCall() bir çağrı başlatır ve endCall() biter.

  5. Telefon araması yapan koda bakmadan önce ACS erişim belirtecinin nasıl alındığını ve telefon arama nesnelerinin nasıl oluşturulduğunu inceleyelim. ngOnInit() phone-call.component.ts'de işlevini bulun.

    async ngOnInit() {
    if (ACS_CONNECTION_STRING) {
        this.subscription.add(
            this.acsService.getAcsToken().subscribe(async (user: AcsUser) => {
                const callClient = new CallClient();
                const tokenCredential = new AzureCommunicationTokenCredential(user.token);
                this.callAgent = await callClient.createCallAgent(tokenCredential);
            })
        );
    }
}

    Bu işlev aşağıdaki eylemleri gerçekleştirir:

    • İşlevi çağırarak bir ACS userId ve erişim belirteci acsService.getAcsToken() alır.
    • Erişim belirteci alındıktan sonra kod aşağıdaki eylemleri gerçekleştirir:
      • Erişim belirtecini CallClient kullanarak yeni bir ve AzureCommunicationTokenCredential örneği oluşturur.
      • ve CallAgent nesnelerini kullanmanın CallClient yeni bir örneğini AzureCommunicationTokenCredential oluşturur. Daha sonra bunun bir aramayı başlatmak ve sonlandırmak için kullanıldığını göreceksiniz CallAgent .

  6. acs.services.ts açın ve işlevi bulungetAcsToken(). Dosyanın tam yolu client/src/app/core/acs.service.ts şeklindedir. işlevi, API sunucusu tarafından kullanıma sunulan yola bir HTTP GET isteği /acstoken gönderir.

    getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}

  7. adlı createACSToken() bir API sunucusu işlevi userId ve erişim belirtecini alır ve istemciye döndürür. Sunucu/typescript/acs.ts dosyasında bulunabilir.

    import { CommunicationIdentityClient } from '@azure/communication-identity';

const connectionString = process.env.ACS_CONNECTION_STRING as string;

async function createACSToken() {
if (!connectionString) return { userId: '', token: '' };

const tokenClient = new CommunicationIdentityClient(connectionString);
const { user, token } = await tokenClient.createUserAndToken(["voip"]);
return { userId: user.communicationUserId, token };
}

    Bu işlev aşağıdaki eylemleri gerçekleştirir:

    • Bir ACS connectionString değerinin kullanılabilir olup olmadığını denetler. Aksi takdirde, ve boş userIdtokenolan bir nesne döndürür.
    • öğesinin CommunicationIdentityClient yeni bir örneğini oluşturur ve değerini ona geçirir connectionString .
    • "voip" kapsamıyla kullanarak tokenClient.createUserAndToken() yeni bir kullanıcı ve belirteç oluşturur.
    • ve userId değerlerini içeren token bir nesne döndürür.

  8. UserId ve belirtecin nasıl alındığını gördüğünüze göre işlevine phone-call.component.ts geri dönün ve işlevini bulun startCall() .

  9. Bu işlev, telefon araması bileşeninde Arama seçildiğinde çağrılır. Çağrı başlatmak için daha önce bahsedilen nesneyi kullanır CallAgent . işlevi, callAgent.startCall() aranacak numarayı ve aramayı yapmak için kullanılan ACS telefon numarasını temsil eden bir nesneyi kabul eder.

    startCall() {
    this.call = this.callAgent?.startCall(
        [{ phoneNumber: this.customerPhoneNumber }], {
        alternateCallerId: { phoneNumber: this.fromNumber }
    });
    console.log('Calling: ', this.customerPhoneNumber);
    console.log('Call id: ', this.call?.id);
    this.inCall = true;

    // Adding event handlers to monitor call state
    this.call?.on('stateChanged', () => {
        console.log('Call state changed: ', this.call?.state);
        if (this.call?.state === 'Disconnected') {
            console.log('Call ended. Reason: ', this.call.callEndReason);
            this.inCall = false;
        }
    });
}

  10. İşlev endCall() , telefon araması bileşeninde Kapat seçildiğinde çağrılır.

    endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}

    Devam eden bir çağrı varsa, çağrıyı call.hangUp() sonlandırmak için işlev çağrılır. Devam eden bir arama yoksa, hangup olay üst bilgi üst bileşenine iletilir ve telefon araması bileşeni gizlenir.

  11. Sonraki alıştırmaya geçmeden önce bu alıştırmada ele alınan temel kavramları gözden geçirelim:

    • ACS userId ve erişim belirteci API sunucusundan acsService.createUserAndToken() işlevi kullanılarak alınır.
    • Belirteç, bir CallClient ve CallAgent nesnesi oluşturmak için kullanılır.
    • CallAgent nesnesi sırasıyla ve callAgent.startCall() işlevlerini çağırarak bir çağrıyı başlatmak ve sonlandırmak callAgent.hangUp() için kullanılır.

  12. Artık telefon aramanın bir uygulamayla nasıl tümleştirilebileceğini öğrendiğinize göre, e-posta ve SMS mesajları göndermek için Azure İletişim Hizmetleri kullanmaya odaklanalım.

Sonraki Adım

İletişim: E-posta ve SMS İletileri Gönderme

  • Last updated on