Como desarrollador, escribir manualmente código línea por línea para desarrollar una aplicación es una pesadilla.Los códigos pueden funcionar o terminar en errores críticos justo antes de la implementación, y nadie sabe realmente lo que sucede después de días y noches de esfuerzo. Aquí es donde los SDK preconstruidos entran en juego. En este proyecto de muestra, te mostraré cómo construir una nueva aplicación React Native con mensajería personalizada, llamadas de vídeo y llamadas de voz utilizando SDKs. Let's get started! Step 1: Make Sure Your Environment Is Ready Paso 1: Asegúrese de que su entorno esté listo Antes de comenzar con el proyecto, comprobemos si el sistema cumple con todos los requisitos necesarios. Minimum Requirements React versión nativa entre 0.73.0 y 0.79.5 Node.js versión 18.20.4 o superior Versión npm 10.7.0 Important Note About New Architecture Si su versión React Native está por encima de 0.76, debe desactivar la nueva arquitectura después de la configuración. For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Recomiendo hacer esto temprano. ¿Por qué? para que no tengas que debutar problemas nativos más tarde. Step 2: Get Your SDK License Key Paso 2: Obtenga su clave de licencia SDK Necesitará una clave de licencia para autenticar el SDK con el servidor. Here is how I got mine: Contacta con el equipo de ventas Tengo mi cuenta de desarrollador Entrar en el Dashboard Copia la clave de licencia de la sección de visión general de la aplicación Si ya tienes uno, puedes saltar este paso. Step 3: Install the Chat SDK Paso 3: Instalar el SDK de Chat Execute este comando en su proyecto React Native: npm i mirrorfly-reactnative-sdk@2.4.1
 Después de la instalación, importa el SDK donde quieras inicializarlo, generalmente en App.js o App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Paso 4: Instalar las dependencias necesarias Las funciones de chat y llamadas se basan en algunas dependencias nativas y JavaScript. agregarlas explícitamente para evitar conflictos de versiones. {

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

}
 El react-native-webrtc debe estar en la versión 124.0.4. Aprendí esto de la manera difícil después de probar una versión más reciente que rompió la funcionalidad de llamada. Step 5: Initialize the Messaging SDK Paso 5: Inicializar el SDK de mensajería Antes de inicializar, generalmente configuro un escuchador de conexión. Esto me ayuda a rastrear si mi aplicación está conectada al servidor o no. function connectionListener(response) {

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

    console.log("Connection Established");

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

    console.log("Disconnected");

  }

}
 Crear el objeto de inicialización: const initializeObj = {

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

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Si todo está configurado correctamente, recibirá una respuesta exitosa con el código de estado 200. Step 6: Register a User Paso 6: Registrar a un usuario En tu aplicación, un usuario necesita estar registrado antes de hacer una llamada o comenzar a chatear. const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 Si el usuario se registra con éxito, el SDK devolverá un nombre de usuario y contraseña. Step 7: Connect to the Server Paso 7: Conectarse al servidor Una vez registrado, conectar al usuario es sencillo. await SDK.connect("USERNAME", "PASSWORD");
 Si la conexión es exitosa, su conexiónListener también se activará.Así es como normalmente confirmo que todo está funcionando como lo necesito. Step 8: Send Your First Message Paso 8: Envía tu primer mensaje Para enviar un mensaje, necesita el JID del destinatario. const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 Si el código de estado de la respuesta es 200, significa que su mensaje ha sido enviado con éxito. Step 9: Receive Messages Paso 9: Recibir mensajes Su aplicación necesitará un escuchador de mensajes para comenzar a recibir mensajes.Cada vez que su aplicación tiene un mensaje de entrada o cualquier evento relacionado con el mensaje ocurre, este escuchador se activará. function messageListener(response) {

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

}
 Asegúrese de que este escuchador se añade durante la inicialización del SDK en CallbackListeners. Step 10: Enable Audio and Video Calls Paso 10: Activar llamadas de audio y vídeo Una vez que el chat está funcionando, agregar llamadas se siente como un siguiente paso natural. Initialize Call Listeners Las llamadas requieren más oyentes ya que hay más eventos involucrados. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Añade estos a la misma inicializaciónSDK llamada. Step 11: Make a Voice Call Paso 11: Haz una llamada de voz To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Si la llamada es exitosa, recibirá una ID de habitación y el estado de la llamada a través del escuchador de estado de la llamada. Step 12: Make a Video Call Paso 12: Hacer una llamada de vídeo Las llamadas de vídeo funcionan casi de la misma manera. await SDK.makeVideoCall(["USER_JID"]);
 Recibirá tanto pistas de audio como de vídeo en el userTrackListener. No reproduza su propia pista de audio para evitar echo. Step 13: Receive and Handle Incoming Calls Paso 13: Recibir y gestionar llamadas entrantes Cuando otro usuario te llama, el CallListener de entrada se apaga con todos los detalles de la llamada. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Eso fue realmente rápido. Hemos completado la construcción de una nueva aplicación React Native con funciones de chat y llamadas. Ahora, como este artículo se está volviendo demasiado largo, te recomiendo visitar MirrorFly Docs para continuar añadiendo características más avanzadas. Documentación de MirrorFly API Documentación de MirrorFly API Gracias por leer el artículo.Espero que hayas aprendido algo nuevo.Si tienes alguna pregunta/feedback, no dudes en dejar un comentario. Este artículo se publica bajo el programa de blogs de negocios de HackerNoon. Este artículo se publica bajo el programa de blogs de negocios de 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

Este audio es producido en el idioma original de la historia!

Cómo he construido una aplicación React Native con chat y llamadas en la aplicación

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

El modelo Bitcoin UTXO, impulsando un ecosistema único

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

El modelo Bitcoin UTXO, impulsando un ecosistema único

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps