Як розробник, ручне написання коду за рядком для розробки додатка є кошмаром.Коди можуть працювати або закінчитися критичними помилками безпосередньо перед розгортанням, і ніхто насправді не знає, що відбувається після днів і ночей зусиль. Саме тут і вступають в дію попередньо побудовані 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 або вище NPM версія 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: Встановіть чат 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: Встановлення необхідних залежностей Функції чату та виклику залежать від декількох вроджених та 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: Ініціалізація файлу Messaging 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 => {};
 Додайте їх до того ж виклику initializeSDK. 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();
 ОК!! Це було дуже швидко. Ми завершили створення цілої нової програми React Native з функціями чату та дзвінків. Тепер, оскільки ця стаття стає занадто довгою, я рекомендую вам відвідати 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 з чатом та дзвінками в додатку

About Author

КОМЕНТАРІ

ПОВІСИТИ БИРКИ

ЦЯ СТАТТЯ БУЛА ПРЕДСТАВЛЕНА В

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps