Որպես արտադրողը, մանրաձայնորեն գրել կոդը գծի համար գծի համար արտադրելու համար app- ը սխալն է: Նրանք կարող են աշխատել կամ ավարտվել կարեւոր սխալների վրա ճշգրտության առաջ, եւ ոչ ոք չի գիտի, թե ինչ է կատարվում օրվա եւ գիշերվա փորձից հետո: Բայց թե ինչ է, եթե կա սխալ-պիտակ տարբերակը: Այսպիսին է, որտեղ առաջադեմ SDK-ները խաղում են. Այս մոդելային նախագծում, ես կգիտեմ, թե ինչպես է ստեղծել ամբողջ նոր React Native- ի ծրագրը, որը օգտագործում է հարմարեցված հաղորդագրության, տեսանյութի զանգահարման եւ զանգահարման առանձնահատկությունները, օգտագործելով SDKs: Այս համար, ես օգտագործեմ MirrorFly- ը, որը աջակցում է WebRTC- ը իրական ժամանակի հաղորդագրության համար: Let's get started! Step 1: Make Sure Your Environment Is Ready Ապրիշ 1: Տեղադրեք, որ ձեր տարածքը պատրաստ է Երբ սկսում ենք ծրագրը, խնդրում ենք ստուգել, թե համակարգը կատարում է բոլոր անհրաժեշտ պահանջները: Minimum Requirements React Native տարբերակը 0.73.0 եւ 0.79.5 միջեւ Node.js տարբերակը 18.20.4 կամ ավելի բարձր NPM տարբերակը 10.7.0 Important Note About New Architecture Եթե ձեր React Native տարբերակը է ավելի քան 0.76, դուք պետք է անջատեք New Architecture- ը տեղադրման հետո: For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Ես առաջարկում եմ, թե ինչու: Ինչու, այնպես որ դուք չեք պետք է վերահսկել անջատական խնդիրները հետո: Step 2: Get Your SDK License Key Խնդրում ենք ստանալ ձեր SDK License Key Ձեզ պետք է պետք է Licence Key- ը, որպեսզի SDK-ը ստուգեք սերվերի հետ: Here is how I got mine: Վաճառքի թիմի կապը Հեռնել My Developer Account-ը Գտնեք Dashboard- ում Սեղմեք Licence Key- ը ծրագրի վերլուծության բաժինից Եթե դուք ունեք մեկ, դուք կարող եք վերցնել այս քայլը. Step 3: Install the Chat SDK Արդյունք 3: Install the Chat SDK Փոխեք այս գործառույթը ձեր React Native Project- ում: npm i mirrorfly-reactnative-sdk@2.4.1
 Երբ տեղադրել եք SDK-ը, ներբեռնել այնտեղ, որտեղ ցանկանում եք տեղադրել այն, սովորաբար App.js կամ App.tsx- ում: import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Հաջորդ: Կարդացրեք, թե ինչպես պետք է տեղադրել պահանջվող dependances Սխալ եւ զանգահարման առանձնահատկությունները հիմնված են մի քանի նստակային եւ JavaScript- ի բաղադրիչների վրա: Ավելացնել նրանց բացառապես, որպեսզի դուք կարող եք փնտրել տարբերակների բաղադրիչները: {

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

}
 The react-native-webrtc պետք է լինի տարբերակը 124.0.4. Ես սովորել եմ այս հեշտությամբ, երբ փորձում եմ ավելի նոր տարբերակը, որը կախված է call գործառույթը. Step 5: Initialize the Messaging SDK Ապրիշ 5: Հիմնադրեք Messaging SDK-ը Հիմնականում, ես սովորաբար տեղադրում եմ connectivity listener- ը, որը կարող է օգնել ինձ հետազոտել, եթե իմ ծրագրը միացվում է սերվով, կամ ոչ. function connectionListener(response) {

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

    console.log("Connection Established");

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

    console.log("Disconnected");

  }

}
 Այժմ ստեղծեք Initialization Object: const initializeObj = {

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

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Եթե բոլորը ճշգրտված են, դուք ստանում եք հաջողության պատասխանը, որը ստանում եք Status Code 200- ի հետ: Step 6: Register a User Արդյունք 6: Գտնել օգտվողը Ձեր app- ում, օգտագործողը պետք է գրանցվել, նախքան նրանք զանգահարել են կամ սկսել են զանգահարել: Դա այն է, ինչ մենք պետք է անել այս քայլում: const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 Եթե օգտվողը հաջողությամբ գրանցվել է, SDK-ը կդառնա օգտվողի անունը եւ սեղմիչը: Step 7: Connect to the Server Արդյունք 7: Համատեղել Server- ի հետ Երբ գրանցվել է, օգտագործողի կապը հեշտ է: await SDK.connect("USERNAME", "PASSWORD");
 Եթե կապը հաջող է, ձեր connectionListener- ը նույնպես կախվածվի: Այսպիսով ես սովորաբար հավատում եմ, որ ամեն ինչ աշխատում է, քանի որ ես պետք է. Step 8: Send Your First Message Արդյունք 8: Թողնել ձեր առաջին հաղորդագրություն Եթե դուք ցանկանում եք ուղարկել մի հաղորդագրություն, դուք պետք է ստանալ ուղեւորի JID- ը: const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 Եթե սխալը 200-ն է, դա նշանակում է, որ ձեր հաղորդագրությունը ուղարկվել է հաջողությամբ: Step 9: Receive Messages Step 9: Ստացեք հաղորդագրություններ Ձեր ծրագրի համար պետք է մի հաղորդագրության լսիչ, որպեսզի սկսեք ստանալ հաղորդագրություններ: Ամեն անգամ, երբ ձեր ծրագրի հետ է տունավոր հաղորդագրություն, կամ ցանկացած հաղորդագրության հետ կապված գործառույթը, այս լսիչը կլուծվում է: function messageListener(response) {

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

}
 Տեղադրեք, որ այս լսողը ավելացվում է SDK- ի տեղադրման ժամանակ CallbackListeners- ում: Step 10: Enable Audio and Video Calls Ապրիշ 10: Օգտագործեք Audio եւ Video Calls Երբ զանգարանը աշխատում է, ավելացնել զանգարանները զգում է, ինչպես բնական հաջորդ քայլ. Initialize Call Listeners Calls պետք է ավելի լսողներ, քանի որ ավելի գործառույթներ ներառում են. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Ավելացնել այս հարցը միասին, միասին, միասին. Step 11: Make a Voice Call Սեղմեք 11-րդ սեղմումը To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Եթե սխալը հաջող է, դուք ստանում եք սենյակային ID-ը եւ սխալային Status- ի միջոցով սխալային Status- ի լսողը: Step 12: Make a Video Call Step 12: Խնդրում ենք ստեղծել տեսանյութը Video calls աշխատում են նույնպես: await SDK.makeVideoCall(["USER_JID"]);
 Դուք կարող եք ստանալ Audio եւ Video Tracks- ում UserTrackListener- ում: Խաղալ չեք ձեր սեփական Audio Track- ում, որպեսզի փնտրեք Echo- ում: Step 13: Receive and Handle Incoming Calls Step 13: Ստացեք եւ վերահսկել ստացվող զանգվածները Երբ այլ օգտվողը զանգահարում է ձեզ, ստանումըCallListener թռչվում է բոլոր զանգահարման տվյալների հետ. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Դա շատ արագ էր. Մենք ավարտել ենք ստեղծել ամբողջ նոր React Native app- ը chatting- ի եւ calling- ի առանձնահատկություններով. Այժմ, քանի որ այս հոդվածը ավելի երկար է, ես առաջարկում եմ Ձեզ տեսնել MirrorFly Docs- ը, որպեսզի ավելացնել ավելի առաջադեմ առանձնահատկությունները: MirrorFly API-ի գրառումը MirrorFly API-ի գրառումը Շնորհակալություն, որ կարդացել եք այս հոդվածը. Ես հավատում եմ, որ դուք սովորել եք մի բան նոր: Եթե դուք ունեք որեւէ հարցեր / պատասխաններ, խնդրում ենք մտնել մեկնաբանություն. Այս հոդվածը գրվել է HackerNoon- ի Business Blogging ծրագրում: Այս հոդվածը գրվել է HackerNoon- ի Business Blogging ծրագրում:

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

Այս աուդիոն պատրաստվել է պատմության բնօրինակ լեզվով:

Ինչպե՞ս եմ ստեղծել React Native App- ը In-App Chat- ի եւ Call- ի հետ

About Author

ՄԵԿՆԱԲԱՆՈՒԹՅՈՒՆՆԵՐ

ԿԱԽՎԵԼ ՏԵԳՍԵՐ

ԱՅՍ ՀՈԴՎԱԾԸ ՆԵՐԿԱՅԱՑՎԵԼ Է Մ

Related Stories

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

HyveDA Secures $50 Million in Pre-Deposits After Symbiotic Mainnet Launch

Hypernative Bolsters Bitcoin L2 Security as Stacks Ecosystem Gets Real-Time Protection

HyperCycle Announces Strategic Split into Two Distinct Operations

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

HyveDA Secures $50 Million in Pre-Deposits After Symbiotic Mainnet Launch

Hypernative Bolsters Bitcoin L2 Security as Stacks Ecosystem Gets Real-Time Protection

HyperCycle Announces Strategic Split into Two Distinct Operations

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps