Dalam era teknologi yang semakin maju ini, kebutuhan akan berkomunikasi semakin meningkat. Salah satu bentuk komunikasi yang populer adalah voice call, yang memungkinkan orang untuk berbicara langsung tanpa terkendala oleh jarak atau lokasi.
Berbicara tentang aplikasi voice call, saat ini semakin banyak aplikasi yang menggunakan teknologi modern untuk memenuhi kebutuhan komunikasi jarak jauh. Salah satu teknologi modern yang bisa digunakan untuk membuat aplikasi voice call adalah Flutter. Dengan menggunakan Flutter, Anda bisa membangun aplikasi voice call dengan mudah dan cepat, serta menambahkan fitur-fitur keren lainnya seperti real-time audio dan video chat.
Selain itu, Anda juga bisa menggunakan SDK dan API dari Zegocloud, perusahaan yang menyediakan teknologi audio dan video chat berkualitas tinggi, untuk mempermudah pembuatan aplikasi voice call yang stabil dan lancar di seluruh dunia.
Dalam artikel ini, kita akan membahas secara rinci bagaimana membuat aplikasi voice call menggunakan Flutter dengan SDK dari Zegocloud.
Membuat Fitur Voice Call Flutter dengan ZegoCloud
Berikut ini adalah beberapa langkah yang dapat Anda terapkan untuk mengintegrasikan SDK Zegocloud dengan aplikasi Flutter dalam membuat aplikasi voice call.
1. Daftar Akun
Langkah awal, anda harus mendaftarkan akun terlebih dahulu di Zegocloud. Anda dapat mengunjungi website resmi Zegocloud disini.
Anda hanya perlu memasukkan nama depan, nama belakang, negara, dan email pada formulir pendaftaran yang disediakan. Setelah itu, tekan tombol Get Code untuk mengirimkan kode verifikasi ke email yang telah anda daftarkan. Anda dapat memasukkan kode tersebut pada form yang telah disediakan.
Selanjutnya, masukkan password dan cek list ketentuan dan kebijakan Zegocloud. Jika sudah selesai, tekan tombol Start your free trial untuk memulai penggunaan layanan secara gratis.
Silahkan isikan data perusahaan atau pekerjaan saat ini pada formulir yang tersedia. Tujuannya adalah agar produk Zegocloud dapat disesuaikan dengan kebutuhan Anda. Isikan nama perusahaan, website perusahaan (jika ada), posisi pekerjaan, jenis industri, dan nomor telepon yang dapat dihubungi.
Setelah mengisi data perusahaan atau pekerjaan saat ini, tekan tombol Continue untuk membuat akun Zegocloud Anda. Dengan berhasil membuat akun, Anda akan dapat menikmati fitur-fitur Zegocloud dengan 10.000 menit gratis.
2. Membuat Projek Baru di Zegocloud
Setelah proses pendaftaran selesai, Anda akan diarahkan ke halaman utama Dashboard Zegocloud. Di sini, Anda dapat membuat projek baru dengan mengklik tombol “Create your project”.
Pilih jenis fitur yang ingin dibuat. Karena kita ingin membuat fitur Voice Call, anda dapat memilih yang bagian Voice & Video Call.
Setelah itu, klik next pada bagian bawah dan masukkan nama projek aplikasi anda, pada contoh kali ini kita beri nama voice_call_flutter. Nama projek tidak boleh ada spasi, anda dapat menggunakan penulisan dalam format camel case maupun snake case.
Jika Anda ingin mengimplementasikan SDK Zegocloud dengan lebih efisien dan cepat, tanpa harus memulai dari awal untuk membuat UI, maka Anda dapat memilih opsi Start with UI Kits.
Setelah itu, Zegocloud akan menyiapkan konfigurasi dan UI Kits untuk projek Anda. Setelah proses selesai, Anda akan diminta untuk memilih platform yang ingin Anda terapkan untuk SDK Zegocloud. Jika Anda ingin menggunakan Flutter, maka pilihlah “For Flutter”.
Anda akan melihat tampilan contoh saat berhasil menerapkan SDK Zegocloud. Selain itu, Anda bisa memilih dan mengatur konfigurasi untuk menggunakan fitur panggilan satu lawan satu atau panggilan grup. Setelah itu, klik tombol Save & start to integrate.
Anda akan diberikan AppID dan AppSign sebagai konfigurasi utama. Anda bisa menggunakan konfigurasi ini untuk menggunakan fitur-fitur Zegocloud pada aplikasi Flutter yang sedang Anda kembangkan. Selanjutnya, kita akan melangkah ke tahap implementasi pada kode program Flutter.
3. Buat Projek Baru Flutter
Untuk memulai pembuatan projek Flutter baru, Anda dapat menggunakan perintah di bawah ini.
flutter create video_call_flutter4. Install Package Zegocloud
Anda dapat memasang package Zegocloud secara manual dengan menambahkannya pada file pubspec.yaml atau menggunakan perintah berikut pada terminal.
flutter pub add zego_uikit_prebuilt_callSetelah berhasil terinstall, Anda bisa langsung mengimport package Zegocloud pada file Flutter project.
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';5. Konfigurasi Projek Flutter
Jika Anda menggunakan versi Flutter 2 ke atas, perlu dilakukan perubahan pada compileSDKVersion dan minSDKVersion pada file /android/app/build.gradle. Anda dapat mengubah nilai compileSDKVersion menjadi 33 dan nilai minSDKVersion menjadi 21 untuk memenuhi persyaratan.
android {
compileSdkVersion 33
// ...
}defaultConfig {
minSdkVersion 21
// ...
}Kemudian, tambahkan 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 wajib membuat file bernama proguard-rules.pro pada direktori /android/app untuk melindungi class pada package atau direktori “zego” dari proses obfuscation saat aplikasi di-release. Isi dari file tersebut dapat diisi dengan aturan berikut.
-keep class **.zego.** { *; }Untuk mendaftarkan file proguard-rules.pro pada aplikasi, anda dapat menambahkan kode berikut ke dalam blok release pada file /android/app/build.gradle.
buildTypes {
release {
// ...
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}Anda perlu menambahkan kode berikut untuk IOS 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>Setelahnya, untuk memastikan notifikasi dan aplikasi dapat dibuild dengan benar, silahkan masuk ke tab Build Settings dan ubah pengaturannya sesuai dengan 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
Setelah konfigurasi selesai diterapkan, Anda dapat membuka file /lib/main.dart pada projek Flutter dan mengubah kode programnya menjadi seperti contoh berikut.
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'dart:math';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Voice Call',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final String _callId = 'your_call_id';
String? _userId;
String? _userName;
@override
void initState() {
_userId = Random().nextInt(999999).toString().padLeft(6, '0');
_userName = "User $_userId";
super.initState();
}
@override
Widget build(BuildContext context) {
return ZegoUIKitPrebuiltCall(
appID: your_app_id,
appSign: 'your_app_sign',
userID: _userId!,
userName: _userName!,
callID: _callId,
config: ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall()
..onOnlySelfInRoom = (_) => Navigator.of(context).pop(),
);
}
}
Seperti yang bisa Anda lihat pada contoh kode program diatas, Class MyHomePage mempunyai variabel bertipe string _roomId yang menyimpan ID ruangan untuk voice call yang akan digunakan. ID ini digunakan untuk menghubungkan antara pengguna dalam satu ruangan. Selain itu, nilai dari _roomId dapat disesuaikan sesuai kebutuhan data aplikasi Anda.
Properti lainnya pada kelas MyHomePage adalah _userName dan _userId yang merepresentasikan data pengguna yang akan melakukan voice call. Anda dapat mengisi properti tersebut dengan data pengguna dari database aplikasi yang digunakan. Pada contoh di atas, ID dan nama pengguna dihasilkan secara acak melalui fungsi Random().
Jangan lupa untuk memasukkan appId dan appSign dari akun Zegocloud Anda. Jika semua konfigurasi sudah diterapkan dengan benar, aplikasi dapat dijalankan dan Anda dapat menikmati fitur voice call dari Zegocloud.
Penerapan voice call dan video call sebenarnya hampir sama, perbedaannya hanya terletak pada bagian properti konfigurasi didalam class ZegoUIKitPrebuiltCall() , dimana pada voice call menggunakan static method ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall().
Untuk dokumentasi lengkap tentang integrasi SDK Zegocloud dengan Flutter untuk fitur voice call, kunjungi website resminya di sini.
Kesimpulan
Voice call merupakan salah satu fitur unggulan dari Zegocloud yang memungkinkan pengguna untuk melakukan panggilan suara secara real-time dalam aplikasi. Dengan dukungan teknologi WebRTC dan SDK yang powerful, Zegocloud membuat integrasi voice call menjadi lebih mudah dan efisien bagi pengembang aplikasi.
Pengguna dapat menyesuaikan fitur panggilan suara sesuai dengan kebutuhan bisnis mereka, seperti menambahkan efek suara, merekam panggilan, atau mengatur kualitas suara. Selain itu, Zegocloud juga menawarkan harga yang kompetitif dan dukungan teknis yang responsif, sehingga pengguna dapat fokus pada pengembangan aplikasi mereka tanpa khawatir tentang infrastruktur teknologi voice call.
