Cara Membangun Aplikasi Obrolan Lokal Bereaksi untuk Android – Beragampengetahuan
8 mins read

Cara Membangun Aplikasi Obrolan Lokal Bereaksi untuk Android – Beragampengetahuan

Maximal0Tagged , , , , , , , ,

Dalam tutorial ini, kami akan memandu Anda melalui proses lengkap mengintegrasikan CHAT Mirrorfly SDK ke dalam aplikasi antibodi React Anda. Dengan ini react asli obrolan sdk, Anda dapat membuat aplikasi obrolan langsung secara internal 10 menit.

Ke depan, kami akan memperkenalkan langkah -langkah berikut:

  1. Instal SDK
  2. Inisialisasi SDK
  3. Pengguna terdaftar
  4. Terhubung ke server mirrorfly
  5. Kirim dan Terima Pesan

Sebelum Anda mulai, pastikan Anda memiliki prasyarat berikut:

  • node: 14.20.0
  • NPM: 6.14.10
  • Buku reaksi: 0.69.12

Sekarang, mari kita mulai berintegrasi.

awal

Buat akun mirrorfly Anda

  • Instal dependensi NPM. 
    {
"@react-native-async-storage/async-storage": "^1.17.7",//Any version
"react-native-get-random-values": "1.7.1",//must use version >=1.7.1
"react-native-document-picker" :"8.1.1",// must use version >=8.1.1
'realm': "^10.8.0",
'react-native-fs':  "^2.18.0",
'@react-native-community/netinfo': "^8.0.0",
'moment': "2.29.4",
'rn-fetch-blob': "^0.12.0",
'react-native-compressor': "1.6.1",
'react-native-convert-ph-asset': "^1.0.3",
'react-

Sekarang, integrasi dimulai.

Langkah 1: Instal dependensi

  • Perbarui yang pertama package.json dokumen.
  • Periksa ulang paket duplikat apa pun. Ini sangat penting jika Anda memiliki masalah dengan iOS.

Langkah 2: Salin file SDK

  • pergi Folder dist Mirrorfly Chats SDK dan salin semua file yang diekstraksi.
  • Buat direktori baru dalam proyek React Native Anda dan tempel semua file SDK yang disalin ke dalamnya.

Langkah 3: Buat SDK.JS

  • Dalam proyek Anda, buat file baru yang dipanggil SDK.JS.
  • Impor SDK ke SDK.JS dokumen:
import './index';
const SDK = window.SDK;
export default SDK;

Langkah 4: Inisialisasi obrolan SDK

Sekarang Anda telah berhasil mengintegrasikan SDK ke dalam proyek Anda, saatnya untuk menginisialisasi.

  • Untuk mencapai ini, Anda akan menggunakan metode inisialisasi.
  • Tempel Kunci Lisensi yang Anda peroleh di bagian Memulai Parameter klise.
const initializeObj = {
 apiBaseUrl: `API_URL`,
 licenseKey: `LICENSE_KEY`,
 isTrialLicenseKey: `TRIAL_MODE`,
 callbackListeners: {},
 };
 await SDK.initializeSDK(initializeObj);

Langkah 5: Pengguna terdaftar

Untuk menggunakan fungsi obrolan, Anda harus terlebih dahulu mendaftarkan pengguna. Gunakan metode register untuk ini:

await SDK.register(`USER_IDENTIFIER`);

Setelah pendaftaran yang berhasil, Anda akan menerima tanggapan dengan nama pengguna dan kata sandi, yang sangat penting untuk menghubungkan ke server.

Tanggapan Sampel:

{
 statusCode: 200,
 message: "Success",
 data: {
 username: "123456789",
 password: "987654321"
 }
 }

Langkah 6: Sambungkan ke server mirrorfly

Gunakan kredensial yang diperoleh selama proses pendaftaran untuk membuat koneksi ke server mirrorfly. Anda dapat menggunakan metode koneksi untuk mencapai ini:

 await SDK.connect(`USERNAME`, `PASSWORD`);

Tanggapan Sampel:

 { 
 message: "Login Success", 
 statusCode: 200 
 }

Langkah 7: Kirim pesan

Untuk mengirim pesan ke pengguna lain, gunakan sendTextMessage metode:

 await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,`MESSAGE_ID`,`REPLY_TO`);

Pastikan Anda memberikan JID penerima, badan pesan, ID pesan yang unik, dan referensi opsional untuk pesan yang akan dibalas.

Tanggapan Sampel:

 {
 "message": "",// String - Success/Error Message
 "statusCode": "" // Number - status code
 }

Langkah 8: Menerima pesan

Untuk menerima pesan dari pengguna lain, terapkan fungsi MessageListener. Fitur ini dipicu setiap kali pesan baru diterima. Anda dapat menambahkan metode panggilan balik ini selama proses inisialisasi.

function messageListener(response) {
 console.log("Message Listener", response);
}

Langkah 9: Dapatkan obrolan terbaru

Untuk mendapatkan daftar obrolan terbaru di aplikasi, Anda perlu menambahkan kode berikut:

 await SDK.getRecentChatsDB();

Tanggapan Sampel:

{ 
 "message": "",// String - Success/Error Message 
 "statusCode": "" // Number - status code 
 "data": [ 
 { 
 "chatType": "chat", 
 "createdAt": "2023-09-06 10:52:46", 
 "deleteStatus": 0, 
 "fromUserId": "", // String - fromUserId 
 "msgBody": { 
 "nickName": "", 
 "mid": "",// String - user mid 
 "message": "",// String - User Text Mesaage 
 "message_type": "",// String - User Text Mesaage Type 
 "replyTo": "", 
 "mentionedUsersIds": "" 
 }, 
 "msgId": "",// String - user msgId 
 "msgStatus": 1, 
 "msgType": "",// String - msgType 
 "muteStatus": 0, 
 "publisherId": "",// String - user Number 
 "timestamp":"",// number timestamp 
 "toUserId": "", 
 "unreadCount": 0, 
 "userId": "",// String - userId 
 "userJid": "",// String - userJid 
 "profileDetails": { 
 "nickName": "",// String - User Name 
 "image": "",// String - image 
 "status": "",//String - User status 
 "colorCode": "#7b0b88", 
 "userId": "",// String - userId 
 "userJid": "",// String - userJid 
 "email": "",//String - User Email-Id 
 "mobileNumber": "",//String - User mobile number 
 "isAdminBlocked": 0 
 } 
 }, 
 ] 
 }

Langkah 10: Tanda terima pesan

Untuk mendapatkan status pesan yang terlihat, Anda perlu menggunakan metode berikut:

 await SDK.sendSeenStatus(`TO_USER_JID`, `MESSAGE_ID`);

Langkah 11: Hapus pesan dari pengirim

Untuk menghapus pesan yang dikirim dari akhir pengirim, Anda perlu menggunakan kode berikut

await SDK.deleteMessagesForMe(`TO_JID`, `MESSAGE_IDS`);

Tanggapan Sampel:

 { 
     statusCode: "", // Number - status code
      message: "", // String - Success/Error Message
 }

Langkah 12: Hapus pesan dari pengirim dan penerima

Untuk menghapus pesan yang dikirim dari akhir pengirim dan penerima, Anda perlu menggunakan kode berikut:

await SDK.deleteMessagesForEveryone(`TO_JID`, `MESSAGE_IDS`);

Tanggapan Sampel:

{ 
 statusCode: "", // Number - status code 
 message: "", // String - Success/Error Message 
 }

Langkah 13: Pemberitahuan push

Untuk mengaktifkan pemberitahuan push, Anda perlu mengintegrasikan firebase ke dalam aplikasi Anda. Ikuti langkah -langkah ini untuk mencapai ini:

  • Buka Firebase Console dan buat proyek baru dengan nama paket aplikasi Anda. pendahulu: com.testapp.
  • Selanjutnya, unduh Google-service.json.
  • Buka/Android/Aplikasi/Folder di Aplikasi Anda dan Tambahkan Google-service.json dokumen.

Respons terhadap instalasi kotak pemadam kebakaran lokal

Instal Paket Firebase sebagai React Native menggunakan kode berikut:

Menggunakan NPM

npm install --save @react-native-firebase/app
@react-native-firebase/messaging

Menggunakan benang

yarn add @react-native-firebase/app 
 @react-native-firebase/messaging

Tambahkan Konfigurasi Firebase ke Android

Anda harus mengaktifkan plugin Google-Services untuk memungkinkan Firebase menggunakan kredensial di Android.

Untuk melakukan ini, Anda perlu memodifikasi dua file di direktori Android.

Anda perlu menambahkan plugin Google-Services sebagai ketergantungan internal /android/build.gradle dokumen.

 buildscript { 
   dependencies { 
   // ... other dependencies 
   classpath ("com.google.gms:google-services:4.3.15") 
   // Add me --- /\ 
  } 
 }

Selanjutnya, tambahkan yang berikut ke file /android/app/build.gradle untuk menjalankan file.

 apply plugin: 'com.android.application' 
 apply plugin: 'com.google.gms.google-services' // <- Add this line

Terakhir, tambahkan yang berikut ini ke file androidmanifest.xml Anda dan jalankan plugin.

 <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

Daftarkan pengguna dengan token FCM

import messaging from '@react-native-firebase/messaging'; 
 const fcmToken = await messaging().getToken(); 
 await SDK.register('USER_IDENTIFIER', 'FCM_TOKEN');

Tanggapan Sampel:

 { 
 statusCode: 200, 
 message: "Success", 
 data: { 
 username: "123456789", 
 password: "987654321" 
 } 
 }

Mengkonfigurasi Pemrosesan Pesan Latar Belakang

Tambahkan kode berikut ke file index.js.

import messaging from '@react-native-firebase/messaging'; 
 const fcmToken = await messaging().getToken(); 
 await SDK.register('USER_IDENTIFIER', 'FCM_TOKEN');

Tanggapan Sampel:

{ 
 msgType: "", // String - value "receiveMessage" 
 chatType: "", // String - Chat Type - "chat" - Single 
 publisherJid: "", // String - Jid - One Who Sends the Message 
 publisherId: "", // String - Id - One Who Sends the Message 
 fromUserJid: "", // String - From User Jid - 
 // Will Be Same as PublisherJid in Case of Single Chat 
 fromUserId: "", // String - From User Id 
 toUserJid: "", // String - Jid - One Who Receives the Message 
 toUserId: "", // String - To User Id - One Who Receives the Message 
 metaData: {}, //Object - Meta data for the message 
 msgBody: { 
 message: "", // String - Message Body 
 message_type: "", // String - Message Type text, image, video, audio & file 
 nickName: "", // String - User Nickname 
 mentionedUsersIds: [] // Array - Mentioned Ids In case of Group 
 media: { // For Media Message Only 
 androidHeight: 0, 
 androidWidth: 0, 
 audioType: "" // String - "file" or "recording" 
 caption: "", // String - Media Caption 
 duration: "", // String - Duration - For Audio/Videos 
 fileName: "", // String - File Name 
 file_key: "", // String - File Key 
 file_size: "", // Number - File Size 
 file_url: "", // String - File Url 
 is_downloaded: "", // Number - Downloaded Status 
 is_uploading: "", // Number - Uploading Status 
 local_path: "", // String - Local Path 
 msgId: "", // String - Message Id 
 originalHeight: 0, // Number 
 originalWidth: 0, // Number 
 thumb_image: "", // Base64 - Thumb Image 
 webHeight: 0, // Number 
 webWidth: 0, // Number 
 } 
 }, 
 msgId: "", // String - Message Id 
 topicId: "", //String - Topic Id for the message 
 msgStatus: "", // Number - Message Status 
 timestamp: 1681185232284, // Number - TimeStamp - Milliseconds 
 profileDetails:{ 
 { 
 email: "", // String 
 fromUser: "", // String 
 image: "", // String - File Url 
 mobileNumber: "", // String 
 nickName: "", // String 
 status: "", // String 
 thumbImage: "", // Base64 - Thumb Image 
 userId: "", // String 
 } 
 }

sebagai kesimpulan

Sekarang, kami telah menyelesaikan akhir tutorial ini. Untuk ulasan singkat, Anda menemukan langkah -langkah lengkap untuk menambahkan fungsionalitas obrolan ke aplikasi antibodi React Anda menggunakan Mirrorfly SDK. Selanjutnya, Anda telah mempelajari langkah -langkah untuk menambahkan fitur seperti mengirim/menerima pesan, tanda terima obrolan, dan pemberitahuan push (melalui Firebase Terpadu).

Jika Anda memiliki pertanyaan tentang langkah -langkah ini, Anda dapat menghubungi tim dukungan teknis secara langsung atau merujuk ke dokumen ini.

video

https://www.youtube.com/watch?v=tl

rencana pengembangan website



metode pengembangan website

jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website

#Cara #Membangun #Aplikasi #Obrolan #Lokal #Bereaksi #untuk #Android

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Website https://beragampengetahuan.com

Related Posts