Là một nhà phát triển, viết mã theo dòng để phát triển một ứng dụng là một cơn ác mộng. các mã có thể hoạt động hoặc kết thúc trong các lỗi quan trọng ngay trước khi triển khai, và không ai thực sự biết những gì xảy ra sau nhiều ngày và đêm nỗ lực. Đây là nơi các SDK được xây dựng sẵn tham gia. Trong dự án mẫu này, tôi sẽ chỉ cho bạn cách xây dựng một ứng dụng React Native hoàn toàn mới với tính năng nhắn tin tùy chỉnh, cuộc gọi video và cuộc gọi thoại bằng cách sử dụng SDK. Let's get started! Step 1: Make Sure Your Environment Is Ready Bước 1: Đảm bảo môi trường của bạn đã sẵn sàng Trước khi bắt đầu với dự án, chúng ta hãy kiểm tra xem hệ thống có đáp ứng tất cả các yêu cầu cần thiết. Minimum Requirements React Native phiên bản giữa 0.73.0 và 0.79.5 Node.js phiên bản 18.20.4 hoặc cao hơn Phiên bản npm 10.7.0 Important Note About New Architecture Nếu phiên bản React Native của bạn cao hơn 0.76, bạn cần tắt New Architecture sau khi cài đặt. For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Tôi khuyên bạn nên làm điều này sớm. tại sao? vì vậy bạn không cần phải xử lý các vấn đề bản địa sau này. Step 2: Get Your SDK License Key Bước 2: Nhận khóa cấp phép SDK của bạn Bạn sẽ cần một khóa giấy phép để xác thực SDK với máy chủ. Here is how I got mine: Liên hệ đội bán hàng Có tài khoản nhà phát triển của tôi Đăng nhập vào dashboard Sao chép khóa giấy phép từ phần tổng quan ứng dụng Nếu bạn đã có một, bạn có thể bỏ qua bước này. Step 3: Install the Chat SDK Bước 3: Cài đặt Chat SDK Chạy lệnh này trong dự án React Native của bạn: npm i mirrorfly-reactnative-sdk@2.4.1
 Sau khi cài đặt, hãy nhập SDK bất cứ nơi nào bạn muốn khởi tạo nó, thường là trong App.js hoặc App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies Bước 4: Cài đặt các phụ thuộc cần thiết Các tính năng trò chuyện và cuộc gọi dựa vào một số phụ thuộc bản địa và JavaScript. Thêm chúng rõ ràng để bạn có thể tránh xung đột phiên bản. {

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

}
 Các react-native-webrtc phải là trong phiên bản 124.0.4. tôi đã học được điều này theo cách khó khăn sau khi thử một phiên bản mới hơn mà phá vỡ chức năng gọi. Step 5: Initialize the Messaging SDK Bước 5: Bắt đầu với Messaging SDK Trước khi khởi tạo, tôi thường thiết lập một thiết bị nghe kết nối. Điều này giúp tôi theo dõi nếu ứng dụng của tôi được kết nối với máy chủ hay không. function connectionListener(response) {

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

    console.log("Connection Established");

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

    console.log("Disconnected");

  }

}
 Bây giờ tạo đối tượng khởi tạo: const initializeObj = {

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

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Nếu mọi thứ được thiết lập đúng, bạn sẽ nhận được một phản hồi thành công với mã trạng thái 200. Step 6: Register a User Bước 6: Đăng ký người dùng Trong ứng dụng của bạn, người dùng cần phải đăng ký trước khi họ thực hiện cuộc gọi hoặc bắt đầu trò chuyện.Đó là những gì chúng tôi sẽ làm trong bước này: const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 Nếu người dùng đăng ký thành công, SDK sẽ trả về tên người dùng và mật khẩu. Step 7: Connect to the Server Bước 7: Kết nối với máy chủ Sau khi đăng ký, kết nối người dùng rất đơn giản. await SDK.connect("USERNAME", "PASSWORD");
 Nếu kết nối thành công, kết nốiListener của bạn cũng sẽ được kích hoạt.Đó là cách tôi thường xác nhận mọi thứ đang hoạt động như tôi cần nó. Step 8: Send Your First Message Bước 8: Gửi tin nhắn đầu tiên Để gửi tin nhắn, bạn cần có JID của người nhận. const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 Nếu mã trạng thái trả lời là 200, điều đó có nghĩa là tin nhắn của bạn đã được gửi thành công. Step 9: Receive Messages Bước 9: Nhận tin nhắn Ứng dụng của bạn sẽ cần một người nghe tin nhắn để bắt đầu nhận tin nhắn. Mỗi khi ứng dụng của bạn có một tin nhắn đến hoặc bất kỳ sự kiện nào liên quan đến tin nhắn xảy ra, người nghe này sẽ được kích hoạt. function messageListener(response) {

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

}
 Đảm bảo người nghe này được thêm vào trong quá trình khởi tạo SDK dưới CallbackListeners. Step 10: Enable Audio and Video Calls Bước 10: Kích hoạt cuộc gọi âm thanh và video Một khi trò chuyện đang hoạt động, thêm cuộc gọi cảm thấy như một bước tiếp theo tự nhiên. Initialize Call Listeners Cuộc gọi đòi hỏi nhiều người nghe hơn vì có nhiều sự kiện liên quan. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Thêm chúng vào cùng một cuộc gọi initializeSDK. Step 11: Make a Voice Call Bước 11: Thực hiện cuộc gọi thoại To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Nếu cuộc gọi thành công, bạn sẽ nhận được ID phòng và trạng thái cuộc gọi thông qua bộ lắng nghe trạng thái cuộc gọi. Step 12: Make a Video Call Bước 12: Thực hiện cuộc gọi video Các cuộc gọi video hoạt động gần như giống nhau. await SDK.makeVideoCall(["USER_JID"]);
 Bạn sẽ nhận được cả hai bài hát âm thanh và video trong userTrackListener. Đừng phát bài hát âm thanh của riêng bạn để tránh phản xạ. Step 13: Receive and Handle Incoming Calls Bước 13: Nhận và xử lý các cuộc gọi đến Khi một người dùng khác gọi cho bạn, CallListener đến bắn với tất cả các chi tiết cuộc gọi. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Đó là thực sự nhanh chóng.Chúng tôi đã hoàn thành xây dựng một ứng dụng React Native hoàn toàn mới với các tính năng trò chuyện và gọi điện.Bây giờ, vì bài viết này đang trở nên quá dài, tôi sẽ khuyên bạn nên truy cập MirrorFly Docs để tiếp tục thêm các tính năng nâng cao hơn.Tôi đã đề cập đến liên kết bên dưới: MirrorFly API Tài liệu MirrorFly API Tài liệu Cảm ơn bạn đã đọc bài viết.Tôi hy vọng bạn đã học được một cái gì đó mới.Nếu bạn có bất kỳ câu hỏi / phản hồi, hãy tự do để lại một bình luận. Bài viết này được xuất bản dưới chương trình Kinh doanh Blogging của HackerNoon. Bài viết này được xuất bản trong HackerNoon's . Chương trình Blog doanh nghiệp

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

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Làm thế nào tôi đã xây dựng một ứng dụng React Native với trò chuyện và cuộc gọi trong ứng dụng

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

287 Stories To Learn About Blockchain Development

223 Stories To Learn About Science

85 Stories To Learn About Travel

178 Stories To Learn About Essay

287 Stories To Learn About Blockchain Development

223 Stories To Learn About Science

85 Stories To Learn About Travel

178 Stories To Learn About Essay

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps