Mulai cepat: Menambahkan obrolan dengan Pustaka UI
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
- Akun Azure dengan langganan aktif. Buat akun secara gratis.
- Sumber daya Communication Services yang disebarkan. Buat sumber daya Azure Communication Services.
- Token Azure Communication Services. Lihat contoh
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
- Akun Azure dan langganan Azure aktif. Buat akun secara gratis.
- OS yang menjalankan Android Studio.
- Sumber daya Azure Communication Services yang disebarkan, perhatikan URL titik akhir.
- Token akses Azure Communication Services dan pengidentifikasi pengguna.
- Utas obrolan Azure Communication Services dengan pengguna di atas ditambahkan ke dalamnya.
Menyiapkan proyek
Selesaikan bagian berikut untuk menyiapkan proyek mulai cepat.
Membuat proyek Android baru
Di Android Studio, buat proyek baru:
Di menu File, pilih> Proyek Baru.
Di Proyek Baru, pilih templat proyek Aktivitas Kosong.
Pilih Selanjutnya.
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.
Pilih Selesai.
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:
Dalam skrip Gradle proyek Anda, pastikan bahwa repositori berikut ditambahkan. Untuk Android Studio (2020.*),
repositories
berada di , disettings.gradle
bawahdependencyResolutionManagement(Gradle version 6.8 or greater)
. Untuk versi Android Studio (4.*) yang lebih lama,repositories
berada di tingkatbuild.gradle
proyek , di bawahallprojects{}
.// dependencyResolutionManagement repositories { ... maven { url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1" } ... }
Sinkronkan proyek Anda dengan file Gradle. Untuk menyinkronkan proyek, pada menu File , pilih Sinkronkan Proyek Dengan File Gradle.
Menambahkan 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:
Buka
MainActivity
.Tambahkan kode berikut untuk menginisialisasi komponen komposit Anda untuk panggilan. Ganti nilai string untuk properti (kotlin) atau fungsi (java) untuk
endpoint
, ,acsIdentity
displayName
,accessToken
danThreadId
. Gantiendpoint
dengan URL untuk sumber daya Anda seperti yang disediakan oleh Azure Communication Services. GantiacsIdentity
danaccessToken
dengan nilai yang disediakan oleh Azure Communication Services saat Anda membuat token akses dan menggunakan displayName yang relevan. GantiThreadId
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:
- Pilih Mulai Pengalaman.
- Klien obrolan akan bergabung dengan utas obrolan dan Anda dapat mulai mengetik dan mengirim pesan
- 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.
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
- Akun Azure dan langganan Azure aktif. Buat akun secara gratis.
- Mac yang menjalankan Xcode 13 atau yang lebih baru dan sertifikat pengembang yang valid diinstal di rantai kunci Anda. CocoaPods juga harus dipasang untuk mengambil dependensi.
- Sumber daya Azure Communication Services yang disebarkan, perhatikan URL titik akhir.
- Token akses Azure Communication Services dan pengidentifikasi pengguna.
- Utas obrolan Azure Communication Services dan sekarang tambahkan pengguna yang Anda buat di langkah terakhir ke utas obrolan ini.
Menyiapkan proyek
Selesaikan bagian berikut untuk menyiapkan proyek mulai cepat.
Buat proyek Xcode baru
Di Xcode, buat proyek baru:
Di menu File, pilih Proyek Baru>.
Di Pilih templat untuk proyek baru Anda, pilih platform iOS dan pilih templat Aplikasi . Mulai cepat menggunakan papan cerita UIKit.
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 .
Menginstal paket dan dependensi
(Opsional) Untuk MacBook dengan M1, instal dan aktifkan Rosetta di Xcode.
Di direktori akar proyek Anda, jalankan
pod init
untuk membuat Podfile. Jika Anda mengalami kesalahan, perbarui CocoaPods ke versi saat ini.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
Jalankan
pod install --repo-update
.Di Xcode, buka file xcworkspace yang dihasilkan.
Menonaktifkan Bitcode
Dalam proyek Xcode, di bawah Pengaturan Build, atur opsi Aktifkan Bitcode ke Tidak. Untuk menemukan pengaturan, ubah filter dari Dasar ke Semua atau gunakan bilah pencarian.
Menginisialisasi komposit
Untuk menginisialisasi komposit:
Buka
ViewController
.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)") } }) } } }
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:
- Pilih Mulai Pengalaman.
- Klien obrolan akan bergabung dengan utas obrolan dan Anda dapat mulai mengetik dan mengirim pesan.
- 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.
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.