Share via

Mulai cepat: Menambahkan obrolan dengan Pustaka UI

  • Artikel

Mulai menggunakan Pustaka Antarmuka Pengguna Azure Communication Services untuk mengintegrasikan pengalaman komunikasi dengan cepat ke dalam aplikasi Anda. Dalam mulai cepat ini, pelajari cara mengintegrasikan komposit obrolan Pustaka UI ke dalam aplikasi dan menyiapkan pengalaman untuk pengguna aplikasi Anda.

Pustaka Antarmuka Pengguna Communication Services merender pengalaman obrolan lengkap tepat di aplikasi Anda. Ini mengurus menyambungkan ke layanan obrolan Azure Communication Services, dan memperbarui kehadiran peserta secara otomatis. Sebagai pengembang, Anda perlu khawatir tentang di mana dalam pengalaman pengguna aplikasi Anda, Anda ingin pengalaman obrolan diluncurkan dan hanya membuat sumber daya Azure Communication Services sesuai kebutuhan.

Catatan

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

Prasyarat

Anda dapat mengakses mulai cepat berikut

Penting

Fitur Azure Communication Services ini saat ini dalam pratinjau.

API pratinjau dan SDK disediakan tanpa perjanjian tingkat layanan. Kami menyarankan agar Anda tidak menggunakannya untuk beban kerja produksi. Beberapa fitur mungkin tidak didukung, atau mungkin memiliki kemampuan yang dibatasi.

Untuk informasi selengkapnya, tinjau Ketentuan Penggunaan Tambahan untuk Pratinjau Microsoft Azure.

Dapatkan contoh aplikasi Android untuk mulai cepat ini di pustaka antarmuka pengguna Azure Communication Services sumber terbuka untuk Android.

Prasyarat

Menyiapkan proyek

Selesaikan bagian berikut untuk menyiapkan proyek mulai cepat.

Membuat proyek Android baru

Di Android Studio, buat proyek baru:

  1. Di menu File, pilih> Proyek Baru.

  2. Di Proyek Baru, pilih templat proyek Aktivitas Kosong.

    Screenshot that shows the New Project dialog in Android Studio with Empty Activity selected.

  3. Pilih Selanjutnya.

  4. Di Aktivitas Kosong, beri nama proyek UILibraryQuickStart. Untuk bahasa, pilih Java/Kotlin. Untuk SDK minimum, pilih API 23: Android 6.0 (Marshmallow) atau yang lebih baru.

  5. Pilih Selesai.

    Screenshot that shows new project options and the Finish button selected.

Menginstal paket

Lengkapi bagian berikut untuk menginstal paket aplikasi yang diperlukan.

Menambahkan dependensi

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

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

Menambahkan repositori Maven

Repositori paket Azure diperlukan untuk mengintegrasikan pustaka:

Untuk menambahkan repositori:

  1. Dalam skrip Gradle proyek Anda, pastikan bahwa repositori berikut ditambahkan. Untuk Android Studio (2020.*), repositories berada di , di settings.gradlebawah dependencyResolutionManagement(Gradle version 6.8 or greater). Untuk versi Android Studio (4.*) yang lebih lama, repositories berada di tingkat build.gradleproyek , di bawah allprojects{}.

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

  2. Sinkronkan proyek Anda dengan file Gradle. Untuk menyinkronkan proyek, pada menu File , pilih Sinkronkan Proyek Dengan File Gradle.

Tambahkan tombol ke activity_main.xml

Dalam file tata letak app/src/main/res/layout/activity_main.xml, tambahkan kode berikut 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

Untuk menginisialisasi komposit:

  1. Buka MainActivity.

  2. Tambahkan kode berikut untuk menginisialisasi komponen komposit Anda untuk panggilan. Ganti nilai string untuk properti (kotlin) atau fungsi (java) untuk endpoint, , acsIdentitydisplayName, accessToken dan ThreadId. Ganti endpoint dengan URL untuk sumber daya Anda seperti yang disediakan oleh Azure Communication Services. Ganti acsIdentity dan accessToken dengan nilai yang disediakan oleh Azure Communication Services saat Anda membuat token akses dan menggunakan displayName yang relevan. Ganti ThreadId dengan nilai yang dikembalikan saat Anda membuat utas. Ingatlah untuk menambahkan pengguna ke utas melalui panggilan REST API, atau klien antarmuka baris perintah az sebelum Anda mencoba menjalankan sampel mulai cepat atau klien akan ditolak akses untuk bergabung dengan utas.

package com.example.uilibraryquickstart

import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import com.azure.android.communication.common.CommunicationTokenCredential
import com.azure.android.communication.common.CommunicationTokenRefreshOptions
import com.azure.android.communication.common.CommunicationUserIdentifier
import com.azure.android.communication.ui.chat.ChatAdapter
import com.azure.android.communication.ui.chat.ChatAdapterBuilder
import com.azure.android.communication.ui.chat.presentation.ChatThreadView

class MainActivity : AppCompatActivity() {
    private lateinit var chatAdapter: ChatAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val startButton = findViewById<Button>(R.id.startButton)
        startButton.setOnClickListener { l: View? ->
            val communicationTokenRefreshOptions =
                CommunicationTokenRefreshOptions(
                    { accessToken }, true
                )
            val communicationTokenCredential =
                CommunicationTokenCredential(communicationTokenRefreshOptions)
            chatAdapter = ChatAdapterBuilder()
                .endpoint(endpoint)
                .credential(communicationTokenCredential)
                .identity(CommunicationUserIdentifier(acsIdentity))
                .displayName(displayName)
                .threadId(threadId)
                .build()
            try {
                chatAdapter.connect(this@MainActivity).get()
                val chatView: View = ChatThreadView(this@MainActivity, chatAdapter)
                addContentView(
                    chatView,
                    ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                    )
                )
            } catch (e: Exception) {
                var messageCause: String? = "Unknown error"
                if (e.cause != null && e.cause!!.message != null) {
                    messageCause = e.cause!!.message
                }
                showAlert(messageCause)
            }
        }
    }

    /**
     *
     * @return String endpoint URL from Azure Communication Services Admin UI, "https://example.domain.com/"
     */
    private val endpoint: String?
        get() = "https://example.domain.com/"

    /**
     *
     * @return String identity of the user joining the chat
     * Looks like "8:acs:a6aada1f-0b1e-47ac-866a-91aae00a1c01_00000015-45ee-bad7-0ea8-923e0d008a89"
     */
    private val acsIdentity: String?
        get() = ""

    /**
     *
     * @return String display name of the user joining the chat
     */
    private val displayName: String?
        get() = ""

    /**
     *
     * @return String secure Azure Communication Services access token for the current user
     */
    private val accessToken: String?
        get() = ""

    /**
     *
     * @return String id of Azure Communication Services chat thread to join
     * Looks like "19:AVNnEll25N4KoNtKolnUAhAMu8ntI_Ra03saj0Za0r01@thread.v2"
     */
    private val threadId: String?
        get() = ""

    fun showAlert(message: String?) {
        runOnUiThread {
            AlertDialog.Builder(this@MainActivity)
                .setMessage(message)
                .setTitle("Alert")
                .setPositiveButton(
                    "OK"
                ) { _, i -> }
                .show()
        }
    }
}

Menjalankan kode

Di Android Studio, buat dan mulai aplikasi:

  1. Pilih Mulai Pengalaman.
  2. Klien obrolan akan bergabung dengan utas obrolan dan Anda dapat mulai mengetik dan mengirim pesan
  3. Jika klien tidak dapat bergabung dengan utas, dan Anda melihat kesalahan chatJoin gagal, verifikasi bahwa token akses pengguna Anda valid dan bahwa pengguna telah ditambahkan ke utas obrolan melalui panggilan REST API, atau dengan menggunakan az antarmuka baris perintah.

GIF animation that shows an example of how the project runs on an Android device.

Penting

Fitur Azure Communication Services ini saat ini dalam pratinjau.

API pratinjau dan SDK disediakan tanpa perjanjian tingkat layanan. Kami menyarankan agar Anda tidak menggunakannya untuk beban kerja produksi. Beberapa fitur mungkin tidak didukung, atau mungkin memiliki kemampuan yang dibatasi.

Untuk informasi selengkapnya, tinjau Ketentuan Penggunaan Tambahan untuk Pratinjau Microsoft Azure.

Dapatkan contoh aplikasi iOS untuk mulai cepat ini di pustaka antarmuka pengguna Azure Communication Services sumber terbuka untuk iOS.

Prasyarat

Menyiapkan proyek

Selesaikan bagian berikut untuk menyiapkan proyek mulai cepat.

Buat proyek Xcode baru

Di Xcode, buat proyek baru:

  1. Di menu File, pilih Proyek Baru>.

  2. Di Pilih templat untuk proyek baru Anda, pilih platform iOS dan pilih templat Aplikasi . Mulai cepat menggunakan papan cerita UIKit.

    Screenshot that shows the Xcode new project dialog, with iOS and the App template selected.

  3. Di Pilih opsi untuk proyek baru Anda, untuk nama produk, masukkan UILibraryQuickStart. Untuk antarmuka, pilih Storyboard. Mulai cepat tidak membuat pengujian, sehingga Anda dapat menghapus kotak centang Sertakan Pengujian .

    Screenshot that shows setting new project options in Xcode.

Menginstal paket dan dependensi

  1. (Opsional) Untuk MacBook dengan M1, instal dan aktifkan Rosetta di Xcode.

  2. Di direktori akar proyek Anda, jalankan pod init untuk membuat Podfile. Jika Anda mengalami kesalahan, perbarui CocoaPods ke versi saat ini.

  3. Tambahkan kode berikut ke Podfile Anda. Ganti UILibraryQuickStart dengan nama proyek Anda.

    platform :ios, '14.0'

target 'UILibraryQuickStart' do
    use_frameworks!
    pod 'AzureCommunicationUIChat', '1.0.0-beta.4'
end

  4. Jalankan pod install --repo-update.

  5. Di Xcode, buka file xcworkspace yang dihasilkan.

Menonaktifkan Bitcode

Dalam proyek Xcode, di bawah Build Pengaturan, atur opsi Aktifkan Bitcode ke Tidak. Untuk menemukan pengaturan, ubah filter dari Dasar ke Semua atau gunakan bilah pencarian.

Screenshot that shows the Build Settings option to turn off Bitcode.

Menginisialisasi komposit

Untuk menginisialisasi komposit:

  1. Buka ViewController.

  2. Tambahkan kode berikut untuk menginisialisasi komponen komposit Anda untuk obrolan. Ganti <USER_ID> dengan pengidentifikasi pengguna. Ganti <USER_ACCESS_TOKEN> dengan token akses Anda. Ganti <ENDPOINT_URL> dengan URL titik akhir Anda. Ganti <THREAD_ID> dengan ID utas obrolan Anda. Ganti <DISPLAY_NAME> dengan nama Anda. (Batas panjang string untuk <DISPLAY_NAME> adalah 256 karakter).

    import UIKit
import AzureCommunicationCommon
import AzureCommunicationUIChat

class ViewController: UIViewController {
    var chatAdapter: ChatAdapter?

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = UIButton()
        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(startChatComposite), for: .touchUpInside)

        button.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(button)
        button.widthAnchor.constraint(equalToConstant: 200).isActive = true
        button.heightAnchor.constraint(equalToConstant: 50).isActive = true
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }

    @objc private func startChatComposite() {
        let communicationIdentifier = CommunicationUserIdentifier("<USER_ID>")
        guard let communicationTokenCredential = try? CommunicationTokenCredential(
            token: "<USER_ACCESS_TOKEN>") else {
            return
        }

        self.chatAdapter = ChatAdapter(
            endpoint: "<ENDPOINT_URL>", identifier: communicationIdentifier,
            credential: communicationTokenCredential,
            threadId: "<THREAD_ID>",
            displayName: "<DISPLAY_NAME>")

        Task { @MainActor in
            guard let chatAdapter = self.chatAdapter else {
                return
            }
            try await chatAdapter.connect()
            let chatCompositeViewController = ChatCompositeViewController(
                with: chatAdapter)

            let closeItem = UIBarButtonItem(
                barButtonSystemItem: .close,
                target: nil,
                action: #selector(self.onBackBtnPressed))
            chatCompositeViewController.title = "Chat"
            chatCompositeViewController.navigationItem.leftBarButtonItem = closeItem

            let navController = UINavigationController(rootViewController: chatCompositeViewController)
            navController.modalPresentationStyle = .fullScreen

            self.present(navController, animated: true, completion: nil)
        }
    }

    @objc func onBackBtnPressed() {
        self.dismiss(animated: true, completion: nil)
        Task { @MainActor in
            self.chatAdapter?.disconnect(completionHandler: { [weak self] result in
                switch result {
                case .success:
                    self?.chatAdapter = nil
                case .failure(let error):
                    print("disconnect error \(error)")
                }
            })
        }
    }
}

  3. Jika Anda memilih untuk menempatkan tampilan obrolan dalam bingkai yang lebih kecil dari ukuran layar, lebar minimum yang disarankan adalah 250 dan tinggi minimum yang disarankan adalah 300.

Menjalankan kode

Untuk membuat dan menjalankan aplikasi Anda di simulator iOS, pilih Eksekusi Produk>atau gunakan pintasan keyboard (⌘-R). Kemudian, cobalah pengalaman obrolan di simulator:

  1. Pilih Mulai Pengalaman.
  2. Klien obrolan akan bergabung dengan utas obrolan dan Anda dapat mulai mengetik dan mengirim pesan.
  3. Jika klien tidak dapat bergabung dengan utas, dan Anda melihat chatJoin kesalahan yang gagal, verifikasi bahwa token akses pengguna Anda valid dan bahwa pengguna telah ditambahkan ke utas obrolan melalui panggilan REST API, atau dengan menggunakan antarmuka baris perintah az.

GIF animation that demonstrates the final look and feel of the quickstart iOS app.

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 selengkapnya tentang membersihkan sumber daya.