開発者として、アプリを開発するためにコードを一行ずつ手動で書くことは悪夢です. コードが動作するか、展開直前に重大なエラーに終わる可能性があり、何が起こるかは本当に誰も知らない。 そこに、事前に構築されたSDKが登場します。 このサンプルプロジェクトでは、SDKを使用してカスタマイズされたメッセージング、ビデオ通話、音声通話機能を持つ新しいReact Nativeアプリケーションを構築する方法を示します。 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: 販売チームに連絡 開発者アカウントを取得 ダッシュボードにログイン アプリケーション概要セクションからライセンスキーをコピーする あなたがすでに1つを持っている場合は、このステップを省略することができます。 Step 3: Install the Chat SDK ステップ3:Chat SDKをインストールする React Native プロジェクトで次のコマンドを実行します。 npm i mirrorfly-reactnative-sdk@2.4.1
 インストール後、通常は App.js または App.tsx で、最初にインストールしたい場所に SDK をインポートします。 import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies STEP 4: 必要な依存性をインストールする チャットおよび呼び出し機能は、いくつかのネイティブおよびJavaScript依存性に依存します. Add them explicitly so you can avoid version conflicts. {

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

}
 このオーディオが CallbackListeners で SDK 初期化中に追加されていることを確認してください。 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"]);
 呼び出しが成功した場合、呼び出しのステータス聴取器を通じて部屋IDと呼び出しの状態が表示されます。 Step 12: Make a Video Call ステップ12:ビデオ通話 ビデオ通話はほぼ同じように動作します。 await SDK.makeVideoCall(["USER_JID"]);
 ユーザーTrackListener でオーディオとビデオの両方のトラックを受け取ります。Echo を避けるために自分のオーディオトラックを再生しないでください。 Step 13: Receive and Handle Incoming Calls 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

このオーディオは、ストーリーの元の言語で制作されています。

How I Built a React Native App with In-App Chat and Calls(アプリ内チャットと通話でリアクティブなネイティブアプリを作成する方法)

About Author

コメント

ラベル

この記事は

Related Stories

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps