Como desenvolvedor, escrever código manualmente linha por linha para desenvolver um aplicativo é um pesadelo. Os códigos podem funcionar ou acabar em erros críticos logo antes da implantação, e ninguém realmente sabe o que acontece depois de dias e noites de esforço. É aqui que os SDKs pré-construídos entram em jogo. Neste projeto de amostra, mostrarei como construir um aplicativo React Native inteiramente novo com recursos de mensagens personalizadas, chamadas de vídeo e chamadas de voz usando SDKs. Let's get started! Step 1: Make Sure Your Environment Is Ready Passo 1: Certifique-se de que seu ambiente está pronto Antes de iniciar o projeto, verifique se o sistema atende a todos os requisitos necessários. Minimum Requirements React versão nativa entre 0.73.0 e 0.79.5 Node.js versão 18.20.4 ou superior NPM versão 10.7.0 Important Note About New Architecture Se a sua versão do React Native estiver acima de 0,76, você precisará desativar a Nova Arquitetura após a instalação. For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Eu recomendo fazê-lo cedo. por que? para que você não tenha que depurar problemas nativos mais tarde. Step 2: Get Your SDK License Key Passo 2: Obtenha sua chave de licença do SDK Você precisará de uma chave de licença para autenticar o SDK com o servidor. Here is how I got mine: Entre em contato com a equipe de vendas Tenho uma conta de desenvolvedor Conecte-se ao Dashboard Copie a chave de licença da seção de visão geral do aplicativo Se você já tem um, você pode pular este passo. Step 3: Install the Chat SDK Passo 3: Instale o Chat SDK Execute este comando no seu projeto React Native: npm i mirrorfly-reactnative-sdk@2.4.1
 Após a instalação, importar o SDK onde quiser inicializá-lo, geralmente em App.js ou App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Passo 4: Instale as dependências necessárias Os recursos de bate-papo e chamadas dependem de algumas dependências nativas e JavaScript. Adicione-os explicitamente para que você possa evitar conflitos de versão. {

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

}
 O react-native-webrtc deve estar na versão 124.0.4. aprendi isso de maneira difícil depois de tentar uma versão mais recente que quebrou a funcionalidade de chamada. Step 5: Initialize the Messaging SDK Passo 5: Iniciar o SDK de mensagens Antes de inicializar, eu geralmente configuro um ouvinte de conexão. Isso me ajuda a rastrear se meu aplicativo está conectado ao servidor ou não. function connectionListener(response) {

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

    console.log("Connection Established");

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

    console.log("Disconnected");

  }

}
 Criar o Objeto de Inicialização: const initializeObj = {

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

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Se tudo estiver configurado corretamente, você receberá uma resposta bem-sucedida com o código de status 200. Step 6: Register a User Passo 6: Registre um usuário Em seu aplicativo, um usuário precisa ser registrado antes de fazer uma chamada ou começar a conversar. const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 Se o usuário for registrado com sucesso, o SDK devolverá um nome de usuário e senha. Step 7: Connect to the Server Passo 7: Conecte-se ao servidor Uma vez registrado, conectar o usuário é simples. await SDK.connect("USERNAME", "PASSWORD");
 Se a conexão for bem-sucedida, o seu conexãoListener também será desencadeado.É assim que eu geralmente confirmo que tudo está funcionando como eu preciso. Step 8: Send Your First Message Passo 8: Envie sua primeira mensagem Para enviar uma mensagem, você precisa do JID do destinatário. const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 Se o código de status da resposta for 200, significa que sua mensagem foi enviada com sucesso. Step 9: Receive Messages Passo 9: Receba mensagens Seu aplicativo precisará de um ouvinte de mensagens para começar a receber mensagens.Toda vez que seu aplicativo tiver uma mensagem de entrada ou qualquer evento relacionado à mensagem ocorrer, esse ouvinte será desencadeado. function messageListener(response) {

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

}
 Certifique-se de que este ouvinte é adicionado durante a inicialização do SDK em CallbackListeners. Step 10: Enable Audio and Video Calls Passo 10: Ativar chamadas de áudio e vídeo Uma vez que o bate-papo está funcionando, adicionar chamadas parece um próximo passo natural. Initialize Call Listeners As chamadas exigem mais ouvintes porque há mais eventos envolvidos. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Adicione estes para a mesma inicializaçãoSDK chamada. Step 11: Make a Voice Call Passo 11: Faça uma chamada de voz To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Se a chamada for bem-sucedida, você receberá uma ID de quarto e status de chamada através do ouvinte de status de chamada. Step 12: Make a Video Call Passo 12: Faça uma chamada de vídeo As chamadas de vídeo funcionam da mesma forma. await SDK.makeVideoCall(["USER_JID"]);
 Você receberá faixas de áudio e vídeo no userTrackListener. Não reproduza sua própria faixa de áudio para evitar ecos. Step 13: Receive and Handle Incoming Calls Passo 13: Receber e lidar com chamadas de entrada Quando outro usuário chama você, o CallListener de entrada acende com todos os detalhes da chamada. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Isso foi realmente rápido. concluímos a construção de um novo aplicativo React Native com recursos de bate-papo e chamadas. Agora, como este artigo está ficando muito mais longo, eu recomendo que você visite o MirrorFly Docs para continuar adicionando recursos mais avançados. Documentação do MirrorFly API Documentação do MirrorFly API Obrigado por ler o artigo.Espero que você tenha aprendido algo novo.Se você tiver quaisquer perguntas / feedback, sinta-se livre para deixar um comentário. Este artigo é publicado sob o programa de Blogging de Negócios da HackerNoon. Este artigo é publicado sob o programa de Blogging de Negócios da 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 áudio é produzido no idioma original da história!

Como eu construí um aplicativo React Native com bate-papo e chamadas no aplicativo

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps