Mulai Cepat: Mulai menggunakan Pustaka UI

  • Artikel
  • 11 menit untuk membaca

Memulai Azure Communication Services menggunakan Pustaka UI untuk mengintegrasikan pengalaman komunikasi dengan cepat ke dalam aplikasi Anda. Dalam mulai cepat ini, Anda akan mempelajari cara mengintegrasikan komposit ke dalam aplikasi Anda.

Pustaka UI akan memberikan pengalaman komunikasi penuh secara langsung ke aplikasi Anda. Pustaka ini bertugas menyambungkan ke panggilan yang diinginkan serta mengaturnya. Sebagai pengembang, Anda hanya perlu memikirkan tempat pengalaman komunikasi ingin Anda luncurkan. Komposit memandu pengguna menyiapkan perangkat mereka, bergabung dengan panggilan sekaligus berpartisipasi di dalamnya, dan merender peserta lain.

Catatan

Untuk dokumentasi dan mulai cepat terperinci tentang Pustaka Antarmuka Pengguna Web, kunjungi Buku Cerita Pustaka UI Web.

Prasyarat

Anda dapat mengakses mulai cepat berikut

Pustaka sumber terbuka Azure Communication UI untuk Android dan kode aplikasi sampel dapat ditemukan di sini

Prasyarat

Persiapan

Membuat aplikasi Android dengan aktivitas kosong

Di Android Studio, buat proyek baru dan pilih Empty Activity.

Mulai proyek baru Android Studio

Klik tombol Next dan beri nama proyek UILibraryQuickStart, atur bahasa ke Java/Kotlin dan pilih SDK API 21: Android 5.0 (Lollipop) Minimum atau lebih tinggi.

Cuplikan layar yang menunjukkan tombol 'Selesaikan' yang dipilih di Android Studio.

Klik Finish.

Menginstal paket

Tambahkan Dependensi

Di tingkat aplikasi Anda (folder aplikasi) UILibraryQuickStart/app/build.gradle, tambahkan dependensi berikut.

dependencies {
    ...
    implementation 'com.azure.android:azure-communication-ui-calling:+'
    ...
}

Repositori Maven

Dua repositori maven diperlukan untuk mengintegrasikan pustaka. MavenCentral adalah yang pertama, yang kedua adalah repositori paket Azure.

Dalam skrip gradle proyek Anda, pastikan hal berikut repositories ditambahkan.

Untuk Android Studio (2020.*), repositories berada di settings.gradledependencyResolutionManagement(Gradle version 6.8 or greater).
Jika Anda menggunakan versi lama , Android Studio (4.*)maka repositories akan berada di tingkat build.gradleallprojects{}proyek .

// dependencyResolutionManagement
repositories {
    ...
    mavenCentral()
    maven {
        url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
    }
    ...
}

Sinkronkan proyek dengan file gradle. (Android Studio -> File -> Menyinkronkan proyek dengan file Gradle)

Tambahkan tombol ke activity_main

Buka file tata letak (app/src/main/res/layout/activity_main.xml). Di sini kami akan memberikan kode untuk membuat tombol untuk memulai komposit.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/startButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Launch"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Menginisialisasi komposit

Buka MainActivity. Di sini kami akan memberikan kode untuk menginisialisasi Komponen Komposit untuk Panggilan. Ganti "GROUP_CALL_ID" dengan ID grup untuk panggilan Anda, "DISPLAY_NAME" dengan nama Anda, dan "<USER_ACCESS_TOKEN>" dengan token Anda.

package com.example.uilibraryquickstart

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import com.azure.android.communication.common.CommunicationTokenCredential
import com.azure.android.communication.common.CommunicationTokenRefreshOptions
import com.azure.android.communication.ui.calling.CallComposite
import com.azure.android.communication.ui.calling.CallCompositeBuilder
import com.azure.android.communication.ui.calling.models.CallCompositeGroupCallLocator
import com.azure.android.communication.ui.calling.models.CallCompositeJoinLocator
import com.azure.android.communication.ui.calling.models.CallCompositeRemoteOptions
import java.util.UUID

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val startButton: Button = findViewById(R.id.startButton)
        startButton.setOnClickListener { l -> startCallComposite() }
    }

    private fun startCallComposite() {
        val communicationTokenRefreshOptions = CommunicationTokenRefreshOptions({ fetchToken() }, true)
        val communicationTokenCredential = CommunicationTokenCredential(communicationTokenRefreshOptions)

        val locator: CallCompositeJoinLocator = CallCompositeGroupCallLocator(UUID.fromString("GROUP_CALL_ID"))
        val remoteOptions = CallCompositeRemoteOptions(locator, communicationTokenCredential, "DISPLAY_NAME")

        val callComposite: CallComposite = CallCompositeBuilder().build()
        callComposite.launch(this, remoteOptions)
    }

    private fun fetchToken(): String? {
        return "USER_ACCESS_TOKEN"
    }
}

Jalankan kode

Bangun dan mulai aplikasi dari Android Studio.

  • Klik Launch.
  • Terima izin dan pilih pengaturan perangkat, mikrofon, dan video.
  • Klik Join Call.

Luncurkan

Model Objek

Kelas dan antarmuka berikut menangani beberapa fitur utama antarmuka pengguna Android Azure Communication Services:

Nama Deskripsi
CallComposite Komponen komposit yang merender pengalaman panggilan dengan galeri dan kontrol peserta.
CallCompositeBuilder Builder untuk membangun CallComposite dengan pilihan.
CallCompositeJoinMeetingLocator Diteruskan dalam peluncuran CallComposite untuk memulai panggilan grup.
CallCompositeTeamsMeetingLinkLocator Diteruskan ke peluncuran CallComposite untuk bergabung dalam rapat Teams.
CallCompositeLocalizationOptions Disuntikkan sebagai opsional di CallCompositeBuilder untuk mengatur bahasa komposit.

Fungsionalitas Pustaka Antarmuka Pengguna

Membuat Komposit Panggilan

Menginisialisasi instans CallCompositeBuilder dan instans CallComposite di dalam fungsi startCallComposite.

val callComposite: CallComposite = CallCompositeBuilder().build()

Autentikasi penyetelan

Menginisialisasi instans CommunicationTokenCredential di dalam fungsi startCallComposite. Ganti "<USER_ACCESS_TOKEN>" dengan token Anda.

val callComposite: CallComposite = CallCompositeBuilder().build()

val communicationTokenRefreshOptions = CommunicationTokenRefreshOptions(this::fetchToken, true)

val communicationTokenCredential = CommunicationTokenCredential(communicationTokenRefreshOptions)

Menyiapkan Opsi Panggilan Grup atau Rapat Teams

Bergantung pada jenis Panggilan/Rapat yang ingin Anda siapkan, gunakan objek opsi yang sesuai.

Panggilan Grup

Inisialisasi CallCompositeGroupCallLocator dan berikan ke CallCompositeRemoteOptions objek .

val locator = CallCompositeGroupCallLocator(UUID.fromString("GROUP_CALL_ID"))

val remoteOptions = CallCompositeRemoteOptions(
    locator,
    communicationTokenCredential,            
    "DISPLAY_NAME",
)

Rapat Teams

Inisialisasi CallCompositeTeamsMeetingLinkLocator dan berikan ke CallCompositeRemoteOptions objek .

val locator = CallCompositeTeamsMeetingLinkLocator("TEAMS_MEETING_LINK")

val remoteOptions = CallCompositeRemoteOptions(
    locator,
    communicationTokenCredential,            
    "DISPLAY_NAME",
)

Tautan rapat Microsoft Teams dapat diambil menggunakan API Graph. Proses ini dirinci dalam dokumentasi Graph.

SDK Panggilan Azure Communication Services menerima tautan rapat Microsoft Teams yang lengkap. Tautan ini dikembalikan sebagai bagian dari sumber daya onlineMeeting, yang dapat diakses di dalam propertijoinWebUrl Anda juga bisa mendapatkan informasi rapat yang diperlukan dari URL Gabung ke Rapat di undangan rapat Teams itu sendiri.

Luncurkan

Memanggil launch pada instans CallComposite di dalam fungsi startCallComposite

callComposite.launch(context, remoteOptions)

Berlangganan peristiwa kesalahan dari CallComposite

Untuk menerima peristiwa kesalahan, panggil setOnErrorHandler dengan CallComposite.

Nilai berikut errorCode dapat dikirim ke Penanganan Kesalahan

  • CallCompositeErrorCode.CALL_JOIN_FAILED
  • CallCompositeErrorCode.CALL_END_FAILED
  • CallCompositeErrorCode.TOKEN_EXPIRED
callComposite.addOnErrorEventHandler { callCompositeErrorEvent ->
    println(callCompositeErrorEvent.errorCode)
}

Menerapkan konfigurasi tema

Untuk mengubah warna utama komposit, buat gaya tema baru di src/main/res/values/themes.xml dan src/main/res/values-night/themes.xml dengan mempertimbangkan AzureCommunicationUICalling.Theme sebagai tema utama. Untuk menerapkan tema, injeksikan ID tema di CallCompositeBuilder.

<style name="MyCompany.CallComposite" parent="AzureCommunicationUICalling.Theme">
    <item name="azure_communication_ui_calling_primary_color">#27AC22</item>
    <item name="azure_communication_ui_calling_primary_color_tint10">#5EC65A</item>
    <item name="azure_communication_ui_calling_primary_color_tint20">#A7E3A5</item>
    <item name="azure_communication_ui_calling_primary_color_tint30">#CEF0CD</item>
</style>

val callComposite: CallComposite =
        CallCompositeBuilder()
            .theme(R.style.MyCompany_CallComposite)
            .build()

Menerapkan konfigurasi pelokalan

Untuk mengubah bahasa komposit, buat CallCompositeLocalizationOptions dengan Locale dari CallCompositeSupportedLocale. Untuk menerapkan bahasa, masukkan konfigurasi pelokalan di CallCompositeBuilder. Secara default, semua label teks menggunakan string bahasa Inggris (en). Jika diinginkan, CallCompositeLocalizationOptions dapat digunakan untuk mengatur yang berbeda language. Di luar kotak, pustaka UI menyertakan sekumpulan language yang dapat digunakan dengan komponen UI. CallCompositeSupportedLocale menyediakan Lokal yang didukung. Misalnya, untuk mengakses Bahasa Inggris Lokal, CallCompositeSupportedLocale.EN dapat digunakan. CallCompositeSupportedLocale.getSupportedLocales() menyediakan daftar objek Lokal bahasa yang didukung.

import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale

// CallCompositeSupportedLocale provides list of supported locale
val callComposite: CallComposite =
            CallCompositeBuilder().localization(
                CallCompositeLocalizationOptions(CallCompositeSupportedLocale.EN)
            ).build()

Fitur Lainnya

Daftar kasus penggunaan memiliki informasi terperinci tentang lebih banyak fitur.

Menambahkan pemberitahuan ke aplikasi seluler Anda

Pemberitahuan push memungkinkan Anda mengirim informasi dari aplikasi Anda ke perangkat seluler pengguna. Anda dapat menggunakan pemberitahuan push untuk menampilkan dialog, memutar suara, atau menampilkan antarmuka pengguna panggilan masuk. Azure Communication Services menyediakan integrasi dengan Azure Event Grid dan Azure Notification Hubs yang memungkinkan Anda menambahkan pemberitahuan push ke aplikasi Anda mengikuti tautan.

Pustaka sumber terbuka Azure Communication UI untuk Android dan kode aplikasi sampel dapat ditemukan di sini

Prasyarat

Persiapan

Membuat proyek Xcode

Di Xcode, buat proyek iOS baru dan pilih templat Aplikasi . Kita akan menggunakan papan cerita UIKit. Anda tidak akan membuat pengujian selama mulai cepat ini. Jangan ragu untuk menghapus centang Sertakan Pengujian.

Cuplikan layar memperlihatkan pilihan templat Proyek Baru dalam Xcode.

Beri nama proyek UILibraryQuickStart dan pilih Storyboard di bawah dropdown Interface.

Cuplikan layar memperlihatkan detail Proyek Baru dalam Xcode.

Memasang paket dan dependensi dengan CocoaPods

  1. (Opsional) Untuk MacBook dengan M1, instal dan aktifkan Rosetta di Xcode.
  2. Buat Podfile di direktori akar proyek Anda dengan menjalankan pod init.
    • Jika mengalami kesalahan, perbarui CocoaPods ke versi terbaru
  3. Tambahkan hal berikut ke Podfile Anda:
    • Ganti UILibraryQuickStart dengan nama proyek Anda
platform :ios, '14.0'

target 'UILibraryQuickStart' do
    use_frameworks!
    pod 'AzureCommunicationUICalling', '1.0.0'
end
  1. Jalankan pod install --repo-update.
  2. Buka .xcworkspace yang dihasilkan dengan Xcode.

Minta akses ke mikrofon, kamera, dll.

Untuk mengakses perangkat keras perangkat, perbarui Daftar Properti Informasi aplikasi Anda. Atur nilai terkait ke string yang akan disertakan dalam dialog yang digunakan sistem untuk meminta akses dari pengguna.

Klik kanan entri Info.plist pohon proyek dan pilih Buka Sebagai>Kode Sumber. Tambahkan baris berikut ke bagian <dict> tingkat atas, lalu simpan file.

<key>NSCameraUsageDescription</key>
<string></string>
<key>NSMicrophoneUsageDescription</key>
<string></string>

Cuplikan layar memperlihatkan kode sumber plist Info di Xcode.

Untuk memverifikasi bahwa permintaan izin ditambahkan dengan benar, tampilkan Info.plist sebagai Buka Sebagai>Daftar Properti dan bersiap untuk melihat aspek berikut:

Cuplikan layar yang memperlihatkan privasi Kamera dan Mikrofon di Xcode.

Nonaktifkan Bitcode

Atur opsi Enable Bitcode ke No dalam proyek Build Settings. Untuk menemukan pengaturan tersebut, Anda harus mengubah filter dari Basic ke All, Anda juga dapat menggunakan bilah pencarian di sebelah kanan.

Cuplikan layar memperlihatkan opsi BitCode di Xcode.

Menginisialisasi komposit

Buka 'ViewController'. Di sini kami akan meletakkan kode berikut untuk menginisialisasi Komponen Komposit untuk Panggilan. Ganti <GROUP_CALL_ID> dengan ID grup panggilan Anda atau UUID() untuk menghasilkannya. Juga ganti <DISPLAY_NAME> dengan nama Anda, dan <USER_ACCESS_TOKEN> dengan token Anda. Batas untuk panjang <DISPLAY_NAME> string adalah 256.

import UIKit
import AzureCommunicationCalling
import AzureCommunicationUICalling

class ViewController: UIViewController {

    private var callComposite: CallComposite?

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 50))
        button.contentEdgeInsets = UIEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
        button.layer.cornerRadius = 10
        button.backgroundColor = .systemBlue
        button.setTitle("Start Experience", for: .normal)
        button.addTarget(self, action: #selector(startCallComposite), for: .touchUpInside)

        button.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(button)
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }

    @objc private func startCallComposite() {
        let callCompositeOptions = CallCompositeOptions()

        callComposite = CallComposite(withOptions: callCompositeOptions)

        let communicationTokenCredential = try! CommunicationTokenCredential(token: "<USER_ACCESS_TOKEN>")

        let remoteOptions = RemoteOptions(for: .groupCall(groupId: UUID(uuidString: "<GROUP_CALL_ID>")!),
                                          credential: communicationTokenCredential,
                                          displayName: "<DISPLAY_NAME>")
        callComposite?.launch(remoteOptions: remoteOptions)
    }
}

Menjalankan kode

Anda dapat membuat dan menjalankan aplikasi di simulator iOS dengan memilihEksekusiProduk> atau dengan menggunakan pintasan keyboard (⌘-R).

  1. Ketuk Start Experience.
  2. Terima izin akses audio dan pilih pengaturan perangkat, mikrofon, dan video.
  3. Ketuk Start Call.

Tampilan dan nuansa akhir dari aplikasi mulai cepat

Model Objek

Kelas dan antarmuka berikut menangani beberapa fitur utama pustaka klien Antarmuka Pengguna Azure Communication Services:

Nama Deskripsi
CallComposite Komposit merender pengalaman panggilan dengan kontrol dan galeri peserta.
CallCompositeOptions Menyertakan opsi seperti opsi tema dan penanganan aktivitas.
RemoteOptions Opsi jarak jauh mengirim ke AzureCommunicationService untuk bergabung dalam panggilan grup atau rapat Tim.
ThemeOptions Memungkinkan Anda untuk mengustomisasi tema.
LocalizationOptions Memungkinkan Anda mengatur bahasa untuk komposit.

Fungsionalitas Pustaka Antarmuka Pengguna

Membuat komposit panggilan

Menginisialisasi instans CallCompositeOptions dan instans CallComposite di dalam fungsi startCallComposite.

@objc private func startCallComposite() {
    let callCompositeOptions = CallCompositeOptions()

    callComposite = CallComposite(withOptions: callCompositeOptions)
}

Autentikasi penyetelan

Menginisialisasi instans CommunicationTokenCredential di dalam fungsi startCallComposite. Ganti <USER_ACCESS_TOKEN> dengan token Anda.

let communicationTokenCredential = try! CommunicationTokenCredential(token: "<USER_ACCESS_TOKEN>")

Lihat dokumentasi token akses pengguna jika Anda belum memiliki token yang tersedia.

Menyiapkan opsi panggilan grup atau rapat Teams

Bergantung pada tipe Panggilan/Rapat apa yang ingin Anda siapkan, gunakan objek opsi yang sesuai.

Panggilan grup

Menginisialisasi RemoteOptions instans untuk .groupCall pencari lokasi di startCallComposite dalam fungsi. Ganti <GROUP_CALL_ID> dengan ID grup untuk panggilan Anda dan <DISPLAY_NAME> dengan nama Anda.

Pelajari selengkapnya tentang panggilan grup di sini.

// let uuid = UUID() to create a new call
let uuid = UUID(uuidString: "<GROUP_CALL_ID>")!
let remoteOptions = RemoteOptions(for: .groupCall(groupId: uuid),
                                  credential: communicationTokenCredential,
                                  displayName: "<DISPLAY_NAME>")

Rapat Teams

Menginisialisasi RemoteOptions instans untuk .teamsMeeting pencari lokasi di startCallComposite dalam fungsi. Ganti <TEAMS_MEETING_LINK> dengan tautan rapat Teams untuk panggilan Anda dan <DISPLAY_NAME> dengan nama Anda.

let remoteOptions = RemoteOptions(for: .teamsMeeting(teamsLink: "<TEAMS_MEETING_LINK>"),
                                  credential: communicationTokenCredential,
                                  displayName: "<DISPLAY_NAME>")

Tautan rapat Microsoft Teams dapat diambil menggunakan API Graph. Proses ini dirinci dalam dokumentasi Graph. SDK Panggilan Communication Services menerima tautan rapat Microsoft Teams lengkap. Tautan ini dikembalikan sebagai bagian dari sumber daya onlineMeeting, dapat diakses di properti joinWebUrl Anda juga bisa mendapatkan informasi rapat yang diperlukan dari URL Gabung Rapat di undangan rapat Teams itu sendiri.

Luncurkan

Memanggil launch pada instans CallComposite di dalam fungsi startCallComposite

callComposite?.launch(remoteOptions: remoteOptions)

Berlangganan kejadian

Anda dapat menerapkan penutupan untuk bertindak atas peristiwa tersebut. Kejadian ketika komposit berakhir dengan kesalahan adalah contohnya.

callComposite?.events.onError = { error in
    print("CallComposite failed with error:\(error)")
}

Terapkan opsi tema

Anda dapat menyesuaikan tema dengan membuat opsi tema kustom yang mengimplementasikan protokol ThemeOptions. Anda kemudian menyertakan instans kelas baru itu di CallCompositeOptions Anda.

class CustomThemeOptions: ThemeOptions {
   var primaryColor: UIColor {
       return UIColor.red
   }
}

let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())

Untuk informasi selengkapnya tentang cara kerja tema, lihat Panduan tema.

Menerapkan opsi pelokalan

Anda dapat mengubah bahasa dengan membuat opsi pelokalan kustom dan menyertakannya ke .CallCompositeOptions Secara default, semua label teks menggunakan string bahasa Inggris (SupportedLocale.en). Jika diinginkan, LocalizationOptions dapat digunakan untuk mengatur yang berbeda locale. Di luar kotak, pustaka UI menyertakan satu set locale yang dapat digunakan dengan komponen UI. SupportedLocale.values menyediakan daftar semua bahasa yang didukung.

Untuk contoh di bawah ini, komposit akan dilokalkan ke Bahasa Prancis (fr).

// Option1: Use intellisense to get supported locales by the UI Library
let localizationOptions = LocalizationOptions(locale: SupportedLocale.frFR)

// Option2: Swift Locale struct, if locale not supported by UI Library, will default to English
let localizationOptions = LocalizationOptions(locale: Locale(identifier: "fr-FR"))

let callCompositeOptions = CallCompositeOptions(localization: localizationOptions)

Untuk informasi selengkapnya tentang pelokalan dan daftar bahasa yang didukung, lihat Panduan pelokalan.

Menambahkan pemberitahuan ke aplikasi seluler Anda

Pemberitahuan push memungkinkan Anda mengirim informasi dari aplikasi ke perangkat seluler pengguna. Anda dapat menggunakan pemberitahuan push untuk menampilkan dialog, memutar suara, atau menampilkan antarmuka pengguna panggilan masuk. Azure Communication Services menyediakan integrasi dengan Azure Event Grid dan Azure Notification Hubs yang memungkinkan Anda menambahkan pemberitahuan push ke aplikasi Anda mengikuti tautan.

Membersihkan sumber daya

Jika ingin membersihkan dan menghapus langganan Azure Communication Services, Anda bisa menghapus sumber daya atau grup sumber daya.

Menghapus grup sumber daya juga menghapus sumber daya apa pun yang terkait dengannya. Pelajari lebih lanjut cara membersihkan sumber daya.