Sebagai pengembang, menulis kode baris demi baris secara manual untuk mengembangkan sebuah aplikasi adalah mimpi buruk. kode mungkin bekerja atau berakhir dengan kesalahan kritis tepat sebelum implementasi, dan tidak ada yang benar-benar tahu apa yang terjadi setelah hari dan malam usaha. Di sinilah SDK pre-built memasuki permainan. Dalam proyek sampel ini, saya akan menunjukkan kepada Anda bagaimana membangun aplikasi React Native yang sepenuhnya baru dengan fitur pesan kustom, panggilan video dan panggilan suara menggunakan SDK. Let's get started! Step 1: Make Sure Your Environment Is Ready Langkah 1: Pastikan Lingkungan Anda Siap Sebelum memulai proyek, mari kita periksa apakah sistem memenuhi semua persyaratan yang diperlukan. Minimum Requirements React Native versi antara 0.73.0 dan 0.79.5 Node.js versi 18.20.4 atau lebih tinggi NPM versi 10.7.0 Important Note About New Architecture Jika versi React Native Anda di atas 0,76, Anda harus menonaktifkan Arsitektur Baru setelah pengaturan. For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Saya menyarankan untuk melakukan ini lebih awal. mengapa? sehingga Anda tidak perlu memecahkan masalah asli nanti. Step 2: Get Your SDK License Key Langkah 2: Dapatkan kunci lisensi SDK Anda Anda akan membutuhkan kunci lisensi untuk mengautentikasi SDK dengan server. Here is how I got mine: Hubungi tim penjualan Memiliki Akun Developer Masuk ke dashboard Salin kunci lisensi dari bagian tampilan aplikasinya Jika Anda sudah memiliki salah satu, Anda dapat melewatkan langkah ini. Step 3: Install the Chat SDK Langkah 3: Instal SDK Chat Jalankan perintah ini di proyek React Native Anda: npm i mirrorfly-reactnative-sdk@2.4.1
 Setelah instalasi, impor SDK di mana pun Anda ingin memulai, biasanya di App.js atau App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Langkah 4: Instalasi Dependensi yang diperlukan Fitur chat dan panggilan bergantung pada beberapa ketergantungan native dan JavaScript. tambahkan secara eksplisit sehingga Anda dapat menghindari konflik versi. {

  "@react-native-community/netinfo": "^11.4.1",

  "react-native-get-random-values": "1.11.0",

  "realm": "^20.1.0",

  "react-native-fs": "^2.20.0",

  "moment": "2.30.1",

  "react-native-webrtc": "124.0.4",

  "react-native-background-timer": "^2.4.1",

  "react-native-permissions": "^5.2.1"

}
 React-native-webrtc harus dalam versi 124.0.4. saya belajar ini dengan cara yang sulit setelah mencoba versi yang lebih baru yang melanggar fungsi panggilan. Step 5: Initialize the Messaging SDK Langkah 5: Memulai SDK Pesan Sebelum memulai, saya biasanya mengatur pendengar koneksi. ini membantu saya melacak apakah aplikasi saya terhubung ke server atau tidak. function connectionListener(response) {

  if (response.status === "CONNECTED") {

    console.log("Connection Established");

  } else if (response.status === "DISCONNECTED") {

    console.log("Disconnected");

  }

}
 Berikut ini adalah objek initialization: const initializeObj = {

  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Jika semuanya diatur dengan benar, Anda akan menerima jawaban sukses dengan kode status 200. Step 6: Register a User Langkah 6: Mendaftar sebagai Pengguna Dalam aplikasi Anda, pengguna harus terdaftar sebelum mereka melakukan panggilan atau mulai chatting. const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 Jika pengguna terdaftar dengan sukses, SDK akan mengembalikan nama pengguna dan kata sandi. Step 7: Connect to the Server Langkah 7: Menghubungkan ke server Setelah terdaftar, menghubungkan pengguna sangat mudah. await SDK.connect("USERNAME", "PASSWORD");
 Jika koneksi berhasil, koneksiListener Anda juga akan diaktifkan. Inilah cara saya biasanya mengkonfirmasi semuanya bekerja seperti yang saya butuhkan. Step 8: Send Your First Message Langkah 8: Kirim pesan pertama Anda Untuk mengirimkan pesan, Anda membutuhkan JID penerima. const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 Jika kode status jawaban adalah 200, itu berarti pesan Anda telah dikirim dengan sukses. Step 9: Receive Messages Langkah 9: Menerima Pesan Aplikasi Anda akan membutuhkan pendengar pesan untuk mulai menerima pesan.Setiap kali aplikasi Anda memiliki pesan masuk atau peristiwa terkait pesan terjadi, pendengar ini akan diaktifkan. function messageListener(response) {

  console.log("New message received", response);

}
 Pastikan pendengar ini ditambahkan selama inisialisasi SDK di CallbackListeners. Step 10: Enable Audio and Video Calls Langkah 10: Mengaktifkan panggilan audio dan video Setelah chatting bekerja, menambahkan panggilan terasa seperti langkah berikutnya yang alami. Initialize Call Listeners Panggilan membutuhkan lebih banyak pendengar karena ada lebih banyak acara yang terlibat. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Tambahkan ini ke panggilan initializeSDK yang sama. Step 11: Make a Voice Call Langkah 11: Buat panggilan suara To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Jika panggilan berhasil, Anda akan menerima ID kamar dan status panggilan melalui pendengar status panggilan. Step 12: Make a Video Call Langkah 12: Buat Panggilan Video Video call bekerja dengan cara yang hampir sama. await SDK.makeVideoCall(["USER_JID"]);
 Anda akan menerima kedua track audio dan video di userTrackListener. jangan memainkan track audio Anda sendiri untuk menghindari echo. Step 13: Receive and Handle Incoming Calls Langkah 13: Menerima dan menangani panggilan masuk Ketika pengguna lain menelepon Anda, CallListener yang masuk memadamkan semua rincian panggilan. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Itu benar-benar cepat. kami selesai membangun aplikasi React Native baru dengan fitur obrolan dan panggilan. Sekarang, karena artikel ini menjadi terlalu lama, saya akan merekomendasikan Anda untuk mengunjungi MirrorFly Docs untuk melanjutkan dengan menambahkan fitur yang lebih canggih. Dokumentasi MirrorFly API Dokumentasi MirrorFly API Terima kasih telah membaca artikel ini.Saya harap Anda telah belajar sesuatu yang baru.Jika Anda memiliki pertanyaan / umpan balik, jangan ragu untuk meninggalkan komentar. Artikel ini dipublikasikan di bawah program Blogging Bisnis HackerNoon. Artikel ini dipublikasikan di bawah program Blogging Bisnis HackerNoon.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hot off the press! This story contains factual information about a recent event.

Read My Stories

Audio ini diproduksi dalam bahasa asli cerita!

Bagaimana Saya Membangun Aplikasi React Native dengan Chat In-App dan Panggilan

About Author

KOMENTAR

HANG TAG

ARTIKEL INI DISAJIKAN PADA

Related Stories

Invest With Purpose: Interview with Arian Adeli, CEO at Rivo Trading

Return to Pleasure Island

The Crypto Trading Writing Contest: Submission Deadline Extended!

NIGHT (continued)

Invest With Purpose: Interview with Arian Adeli, CEO at Rivo Trading

Return to Pleasure Island

The Crypto Trading Writing Contest: Submission Deadline Extended!

NIGHT (continued)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps