Като разработчик, ръчното писане на код от ред на ред за разработване на приложение е кошмар. Кодовете могат да работят или да завършат с критични грешки непосредствено преди разполагането и никой не знае какво се случва след дни и нощи усилия. Това е мястото, където предварително изградените SDK влизат в игра. В този образец на проекта ще ви покажа как да изградите цяло ново приложение React Native с персонализирани функции за съобщения, видео разговори и гласови обаждания с помощта на SDK. 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 или по-висока НПМ версия 10.7.0 Important Note About New Architecture Ако вашата версия на React Native е над 0.76, трябва да деактивирате новата архитектура след инсталирането. 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 Стъпка 2: Вземете вашия SDK лицензионен ключ Ще ви е необходим лицензионен ключ за удостоверяване на SDK със сървъра. Here is how I got mine: Свържете се с екипа по продажбите Имам акаунт за разработчик Влезте в Dashboard Копиране на лицензионния ключ от раздела за преглед на приложението Ако вече имате такъв, можете да пропуснете тази стъпка. Step 3: Install the Chat SDK Стъпка 3: Инсталирайте Chat SDK Изпълнете тази команда във вашия проект React Native: npm i mirrorfly-reactnative-sdk@2.4.1
 След инсталирането импортирайте SDK където искате да го инициализирате, обикновено в App.js или App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Стъпка 4: Инсталиране на необходимите зависимости Функциите за чат и обаждане разчитат на няколко native и 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"

}
 React-native-webrtc трябва да е във версия 124.0.4. научих това по труден начин, след като опитах по-нова версия, която счупи функцията за обаждане. Step 5: Initialize the Messaging SDK Стъпка 5: Инициализиране на SDK за съобщения Преди да инициализирам, обикновено създавам слушател за връзка. Това ми помага да проследя дали приложението ми е свързано със сървъра или не. function connectionListener(response) {

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

    console.log("Connection Established");

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

    console.log("Disconnected");

  }

}
 Сега създайте обекта за инициализация: const initializeObj = {

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

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Ако всичко е зададено правилно, ще получите успешен отговор с код за състоянието 200. Step 6: Register a User Стъпка 6: Регистрирайте потребител В приложението ви потребителят трябва да бъде регистриран, преди да се обади или да започне чат. 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: Свържете се със сървъра След като се регистрирате, свързването на потребителя е лесно. await SDK.connect("USERNAME", "PASSWORD");
 Ако връзката е успешна, вашата връзкаListener също ще бъде задействана.Така обикновено потвърждавам, че всичко работи, както ми трябва. 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 Стъпка 9: Получаване на съобщения Приложението ви ще се нуждае от слушател за съобщения, за да започне да получава съобщения. Всеки път, когато приложението ви има входящо съобщение или се случва събитие, свързано със съобщенията, този слушател ще бъде задействан. function messageListener(response) {

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

}
 Уверете се, че този слушател е добавен по време на инициализацията на SDK под CallbackListeners. Step 10: Enable Audio and Video Calls Стъпка 10: Активиране на аудио и видео разговори След като чатът работи, добавянето на обаждания се чувства като естествена следваща стъпка. Initialize Call Listeners Обажданията изискват повече слушатели, тъй като има повече събития. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Добавете тези към същото инициализиранеSDK повикване. Step 11: Make a Voice Call Стъпка 11: Направете гласов разговор To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Ако повикването е успешно, ще получите идентификационен номер на стаята и състоянието на повикването чрез слушателя за състоянието на повикването. Step 12: Make a Video Call Стъпка 12: Направете видео обаждане Видео разговорите работят почти по същия начин. await SDK.makeVideoCall(["USER_JID"]);
 Ще получите аудио и видео песни в userTrackListener.Не възпроизвеждайте своя собствена аудио песен, за да избегнете ехо. Step 13: Receive and Handle Incoming Calls Стъпка 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 с функции за чат и обаждане. Сега, тъй като тази статия става твърде дълга, ще ви препоръчам да посетите MirrorFly Docs, за да продължите с добавянето на повече усъвършенствани функции. MirrorFly API документация MirrorFly API документация Благодаря за четенето на статията.Надявам се да сте научили нещо ново.Ако имате някакви въпроси / обратна връзка, не се колебайте да оставите коментар. Тази статия е публикувана в рамките на програмата за бизнес блогове на HackerNoon. Тази статия е публикувана в рамките на програмата за бизнес блогове на 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

Това аудио е създадено на оригиналния език на историята!

Как създадох приложение React Native с чат и обаждания в приложението

About Author

КОМЕНТАРИ

ЗАКАЧВАЙТЕ ЕТИКЕТИ

ТАЗИ СТАТИЯ Е ПРЕДСТАВЕНА В

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps