As 'n ontwikkelaar is die handmatige skryf van kode lyn na lyn om 'n app te ontwikkel, 'n nagmerrie. Die kode kan werk of in kritieke foute eindig net voor die invoering, en niemand weet regtig wat gebeur na dae en nagte van poging nie. Dit is waar voorgebou SDK's in die spel kom. In hierdie voorbeeldprojek sal ek jou wys hoe om 'n hele nuwe React Native-toepassing te bou met aangepaste boodskap, video-oproep en stemoproep funksies met behulp van SDK's. Let's get started! Step 1: Make Sure Your Environment Is Ready Stap 1: Maak seker dat jou omgewing gereed is Voordat ons met die projek begin, laat ons kyk of die stelsel aan al die nodige vereistes voldoen. Minimum Requirements React Native weergawe tussen 0.73.0 en 0.79.5 Node.js weergawe 18.20.4 of hoër NPM weergawe 10.7.0 Important Note About New Architecture As jou React Native-versie bo 0.76 is, moet jy die Nuwe Arhitektuur na die instelling uitskakel. For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Ek beveel aan om dit vroeër te doen. Waarom? sodat jy nie later native probleme hoef te debug nie. Step 2: Get Your SDK License Key Stap 2: Kry jou SDK lisensie sleutel U sal 'n lisensie sleutel nodig hê om die SDK met die bediener te outentiek. Here is how I got mine: Kontak die verkoopspan Ek het my ontwikkelaarsrekening Gaan na die dashboard Kopieer die lisensie sleutel uit die toepassing oorsig afdeling As jy reeds een het, kan jy hierdie stap misloop. Step 3: Install the Chat SDK Stap 3: Installeer die Chat SDK Voer hierdie bevel uit in jou React Native-projek: npm i mirrorfly-reactnative-sdk@2.4.1
 Na die installasie, importeer die SDK waar jy wil om dit te initieel, gewoonlik in App.js of App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Stap 4: Installeer die nodige afhanklikhede Die chat en oproep funksies vertrou op 'n paar native en JavaScript afhanklikhede. Voeg hulle uitdruklik toe sodat jy weergaweskonflikte kan vermy. {

  "@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"

}
 Die react-native-webrtc moet in weergawe 124.0.4 wees. Step 5: Initialize the Messaging SDK Stap 5: Initialiseer die boodskap SDK Voordat ek begin, stel ek gewoonlik 'n verbinding luisteraar in. Dit help my om op te spoor of my app met die bediener verbind is of nie. function connectionListener(response) {

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

    console.log("Connection Established");

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

    console.log("Disconnected");

  }

}
 Maak nou die inisialisering voorwerp: const initializeObj = {

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

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 As alles korrek ingestel word, sal jy 'n suksesvolle reaksie met status kode 200 ontvang. Step 6: Register a User Stap 6: Registreer 'n gebruiker In jou app moet 'n gebruiker geregistreer word voordat hulle 'n oproep maak of begin gesels. const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 As die gebruiker suksesvol geregistreer word, sal die SDK 'n gebruikersnaam en wagwoord retourneer. Step 7: Connect to the Server Stap 7: Verbind met die bediener Sodra jy geregistreer is, is die verbinding met die gebruiker eenvoudig. await SDK.connect("USERNAME", "PASSWORD");
 As die verbinding suksesvol is, sal jou verbindingListener ook geaktiveer word.Dit is hoe ek gewoonlik bevestig dat alles werk soos ek dit nodig het. Step 8: Send Your First Message Stap 8: Stuur jou eerste boodskap Om 'n boodskap te stuur, benodig jy die ontvanger se JID. const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 As die reaksie status kode is 200, dit beteken dat jou boodskap suksesvol gestuur is. Step 9: Receive Messages Stap 9: Om boodskappe te ontvang Elke keer as u app 'n inkomende boodskap of enige gebeurtenis wat verband hou met boodskap, gebeur, sal hierdie luisteraar geaktiveer word. function messageListener(response) {

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

}
 Maak seker dat hierdie luisteraar bygevoeg word tydens SDK-initialisering onder callbackListeners. Step 10: Enable Audio and Video Calls Stap 10: Aktiveer audio- en video-oproepe Sodra die chat werk, voeg oproepe voel soos 'n natuurlike volgende stap. Initialize Call Listeners Bel vereis meer luisteraars omdat daar meer gebeure betrokke is. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Voeg dit by dieselfde initializeSDK oproep. Step 11: Make a Voice Call Stap 11: Maak 'n stemoproep To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 As die oproep suksesvol is, sal u 'n kamer-ID en oproepstatus ontvang via die oproepstatus luisteraar. Step 12: Make a Video Call Stap 12: Maak 'n video-oproep Video-oproepe werk byna dieselfde manier. await SDK.makeVideoCall(["USER_JID"]);
 Jy sal beide klank- en video-tracks in die userTrackListener ontvang. speel nie jou eie klank-track om oë te vermy nie. Step 13: Receive and Handle Incoming Calls Stap 13: ontvang en hanteer inkomende oproepe Wanneer 'n ander gebruiker jou bel, die inkomende CallListener vuur met al die oproep besonderhede. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Dit was regtig vinnig. Ons het voltooi om 'n hele nuwe React Native-program met chat- en belfunksie te bou. Nou, aangesien hierdie artikel te lank word, sal ek jou aanbeveel om MirrorFly Docs te besoek om voort te gaan met die byvoeging van meer gevorderde funksies. Ek het die skakel hieronder genoem: MirrorFly API Dokumentasie MirrorFly API Dokumentasie Dankie vir die lees van die artikel. ek hoop jy het iets nuuts geleer. As jy enige vrae / terugvoer het, voel vry om 'n kommentaar te laat. Hierdie artikel is gepubliseer onder HackerNoon se Business Blogging program. Hierdie artikel is gepubliseer onder HackerNoon's . Business Blogging Program

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

Hierdie oudio word in die oorspronklike taal van die storie vervaardig!

Hoe ek 'n React Native App met In-App Chat en oproepe gebou het

About Author

KOMMENTAAR

HANG TAGS

HIERDIE ARTIKEL IS AANGEBIED IN

Related Stories

Thinking for the 21st century

Startups of The Year: Meet the Business Industry

The Opt Out Writing Contest: Final Round Results Announcement 🎉

The #decentralize-ai Writing Contest by ICP and HackerNoon: Results Announcement 🎉

Thinking for the 21st century

Startups of The Year: Meet the Business Industry

The Opt Out Writing Contest: Final Round Results Announcement 🎉

The #decentralize-ai Writing Contest by ICP and HackerNoon: Results Announcement 🎉

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps