Dalam era digital saat ini, kebutuhan untuk melakukan komunikasi melalui aplikasi semakin meningkat, termasuk dalam hal in-app chat.
Untuk itu, Flutter menyediakan banyak pilihan library untuk membangun aplikasi in-app chat yang handal dan mudah digunakan. Salah satu pilihan yang bisa digunakan adalah SDK Zegocloud, yang menyediakan fitur in-app chat yang lengkap dan mudah diintegrasikan dengan aplikasi Flutter.
Dalam artikel ini, kita akan membahas bagaimana cara mengintegrasikan fitur in-app chat dari Zegocloud ke dalam aplikasi Flutter dengan mudah dan efisien.
Membuat Fitur In-App Chat Flutter dengan ZegoCloud
Berikut ini adalah beberapa langkah yang dapat Anda terapkan untuk mengintegrasikan SDK Zegocloud dengan aplikasi Flutter dalam membuat aplikasi In-app Chat.
1. Daftar Akun
Langkah pertama, anda harus mendaftarkan akun terlebih dahulu di Zegocloud. Anda dapat mengunjungi website resmi Zegocloud disini.
Anda perlu mengisi informasi pribadi seperti nama depan, nama belakang, negara, dan alamat email. Setelah itu, Anda perlu memverifikasi email Anda dengan menekan tombol Get Code yang akan mengirimkan kode verifikasi ke email Anda.
Setelah kode verifikasi diterima, masukkan kode tersebut dan buat password untuk akun Anda. Sebelum mendaftar, pastikan untuk membaca dan menyetujui ketentuan dan kebijakan Zegocloud. Setelah semua proses selesai, Anda dapat memulai percobaan gratis dengan menekan tombol Start your free trial.
Silahkan mengisi informasi perusahaan atau pekerjaan saat ini untuk menikmati produk Zegocloud yang sesuai dengan kebutuhan. Isi nama perusahaan, website perusahaan (jika ada), pekerjaan, industri, dan nomor telepon pada formulir yang disediakan.
Setelah memasukkan data perusahaan atau pekerjaan saat ini, klik tombol Continue. Dengan demikian, Anda berhasil membuat akun Zegocloud dan dapat mulai menikmati 10.000 menit gratis untuk mencoba fitur-fitur yang tersedia.
2. Membuat Projek Baru di Zegocloud
Setelah berhasil mendaftar, anda akan diarahkan ke halaman Dashboard Zegocloud yang berisi berbagai fitur dan informasi tentang akun anda. Jika anda ingin membuat projek baru, cukup klik tombol “Create your project”.
Pilih jenis fitur yang ingin dibuat. Karena kita ingin membuat fitur In-app Chat, anda dapat memilih yang bagian In-app Chat.
Setelah itu, klik next pada bagian bawah dan masukkan nama projek aplikasi anda, pada contoh kali ini kita beri nama app_chat_flutter. Nama projek tidak boleh ada spasi, anda dapat menggunakan penulisan dalam format camel case maupun snake case. Jika sudah, klik Continue.
Setelah anda memilih Start with UI Kits, Zegocloud akan menyiapkan beberapa konfigurasi untuk memudahkan integrasi SDK dengan aplikasi anda. Setelah proses selesai, anda akan diminta untuk memilih platform yang akan digunakan untuk integrasi SDK Zegocloud. Jika anda menggunakan Flutter, silahkan pilih For Flutter.
Setelah proses konfigurasi berhasil, anda akan diarahkan ke halaman dashboard. Silahkan masuk ke projek In-App Chat yang barusan kita buat, selanjutkan anda akan mendapatkan appID dan appSign seperti pada gambar berikut.
Jangan lupa subscribe atau aktifkan layanan In-app Chat pada tab Service Management.
3. Buat Projek Baru Flutter
Anda dapat membuat projek baru Flutter dengan menjalankan perintah berikut pada terminal.
flutter create chat_app_flutter4. Install Package Zegocloud
Anda dapat menambahkan paket Zegocloud secara manual dengan menambahkannya pada file pubspec.yaml atau dapat menggunakan perintah berikut untuk melakukan instalasi.
flutter pub add zego_zimkitBerikut adalah contoh cara melakukan import package Zegocloud pada file projek Flutter setelah package tersebut berhasil terinstall.
import 'package:zego_zimkit/zego_zimkit.dart';5. Konfigurasi Projek Flutter
Jika anda menggunakan versi Flutter 2 keatas, maka anda harus mengubah nilai compileSDKVersion dan minSDKVersion pada file /android/app/build.gradle. Hal ini perlu dilakukan agar aplikasi dapat menggunakan package Zegocloud dengan baik.
android {
compileSdkVersion 33
// ...
}defaultConfig {
minSdkVersion 21
// ...
}Setelah itu, masukan permission berikut ini pada AndroidManifest didalam file /app/src/main/AndroidManifest.xml.
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />Anda perlu membuat file bernama proguard-rules.pro pada direktori /android/app untuk mencegah obfuscation pada class dalam package “zego”. Isi dari file tersebut harus memuat aturan agar nama class tersebut tidak diubah atau dihapus saat proses obfuscation ketika aplikasi di-release. Berikut adalah contoh isi dari file proguard-rules.pro:
-keep class **.zego.** { *; }Langkah selanjutnya adalah mendaftarkan file proguard-rules.pro ke aplikasi Flutter yang sedang dibuat. Caranya adalah dengan menambahkan kode berikut ke dalam blok “release” pada file /android/app/build.gradle.
buildTypes {
release {
// ...
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}Untuk IOS, tambahkan kode berikut ini didalam kode blok dict file /ios/Runner/Info.plist.
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
Untuk memungkinkan penggunaan notifikasi dan membangun aplikasi dengan benar, langkah selanjutnya adalah masuk ke tab Build Setting dan mengubah pengaturannya seperti berikut.
Di dalam Target Runner:
- Build Libraries for Distribution -> NO
- Only safe API extensions -> NO
- iOS Deployment Target -> 11 or greater
Di dalam Target lainnya:
- Build Libraries for Distribution -> NO
- Only safe API extensions -> YES
6. Modifikasi file main.dart Projek Flutter
Anda bisa mengubah kode program pada file /lib/main.dart pada project flutter setelah konfigurasi berhasil diterapkan.
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';
import 'dart:async';
void main() async {
await ZIMKit().init(
appID: your_app_id,
appSign: 'your_app_sign',
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter In App Chat',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String? _userId;
String? _userName;
@override
void initState() {
_userId = "Your User ID";
_userName = "Your User Name";
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
child: const Text('Login'),
onPressed: () async {
await ZIMKit()
.connectUser(id: _userId!, name: _userName!)
.then((value) {
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (context) => const ZIMKitDemoHomePage(),
),
);
});
},
),
));
}
}
class ZIMKitDemoHomePage extends StatelessWidget {
const ZIMKitDemoHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Scaffold(
appBar: AppBar(
title: const Text('In-app Chat'),
automaticallyImplyLeading: false,
actions: [
IconButton(
icon: const Icon(Icons.message),
onPressed: () => newChatDialog(context),
)
],
),
body: ZIMKitConversationListView(
onPressed: (context, conversation, defaultAction) {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return ZIMKitMessageListPage(
conversationID: conversation.id,
conversationType: conversation.type,
);
},
));
},
),
),
);
}
}
void newChatDialog(BuildContext context) {
final userIDController = TextEditingController();
Timer.run(() {
showDialog<bool>(
useRootNavigator: false,
context: context,
builder: (context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
title: const Text('New Chat'),
content: TextField(
controller: userIDController,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'User ID',
),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: const Text('OK'),
),
],
);
});
},
).then((ok) {
if (ok != true) return;
if (userIDController.text.isNotEmpty) {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return ZIMKitMessageListPage(
conversationID: userIDController.text,
);
}));
}
});
});
}
Inisialisasikan appId dan appSign anda pada fungsi main dengan memanggil fungsi ZIMKit().init.
Pada bagian MyHomePage terdapat tombol Login yang ketika ditekan akan melakukan koneksi ke ZIMKit dengan menggunakan fungsi ZIMKit().connectUser() dan membuka halaman ZIMKitDemoHomePage() setelah koneksi berhasil dilakukan.
Untuk ID pengguna dan nama pengguna bersifat fleksibel sesuaikan dengan data pada database user aplikasi anda.
Pada halaman ZIMKitDemoHomePage(), terdapat widget ZIMKitConversationListView() yang menampilkan daftar percakapan yang telah dilakukan oleh pengguna.
Ketika salah satu percakapan di tap, aplikasi akan membuka halaman ZIMKitMessageListPage() yang menampilkan seluruh pesan pada percakapan tersebut.
Terdapat juga tombol untuk membuka dialog untuk memulai percakapan baru dengan pengguna lain dengan memasukkan User ID pengguna yang ingin anda kirim pesan.
Jika semua proses sudah anda terapkan dengan benar, aplikasi akan berjalan dan anda sudah bisa menikmati fitur In-app Chat dari Zegocloud.
Dokumentasi lengkap tentang integrasi SDK Zegocloud dengan Flutter untuk fitur In-app Chat, anda dapat mengunjungi website resminya langsung disini.
Kesimpulan
Zegocloud menyediakan berbagai layanan untuk memudahkan pengembangan aplikasi dengan fitur in-app chat menggunakan Flutter.
Dengan adanya Zegocloud SDK, pengembang dapat dengan mudah mengintegrasikan fitur in-app chat ke dalam aplikasi dan juga menyesuaikan tampilannya sesuai dengan kebutuhan bisnis.
Selain itu, fitur-fitur tambahan seperti enkripsi end-to-end dan manajemen pesan dapat membantu meningkatkan keamanan dan kehandalan aplikasi. Zegocloud dapat menjadi solusi yang tepat untuk memenuhi kebutuhan in-app chat pada era digital saat ini.
