একটি ডেভেলপার হিসাবে, একটি অ্যাপ্লিকেশন বিকাশ করার জন্য কোড লাইন দ্বারা লাইন দ্বারা ম্যানুয়ালভাবে লিখা একটি দুঃস্বপ্ন। কোডগুলি কাজ করতে পারে অথবা বিস্তৃত হওয়ার ঠিক আগে গুরুত্বপূর্ণ ত্রুটিতে শেষ হতে পারে, এবং কেউ সত্যিই জানে না দিন এবং রাতে প্রচেষ্টার পরে কী ঘটে। এখানেই ইতিমধ্যে তৈরি করা SDKs খেলা আসে। এই নমুনা প্রকল্পে, আমি আপনাকে SDKs ব্যবহার করে কাস্টম মেসেজিং, ভিডিও কল এবং ভয়েস কল বৈশিষ্ট্য সহ একটি সম্পূর্ণ নতুন 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: বিক্রয় টিমের সাথে যোগাযোগ আমার ডেভেলপার অ্যাকাউন্ট পেয়েছি ড্যাশবোর্ডে প্রবেশ করুন অ্যাপ্লিকেশন পর্যালোচনা বিভাগ থেকে লাইসেন্স কী কপি করুন যদি আপনার ইতিমধ্যে একটি থাকে তবে আপনি এই পদক্ষেপটি বাদ দিতে পারেন। Step 3: Install the Chat SDK ধাপ 3: Chat 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: প্রয়োজনীয় নির্ভরতা ইনস্টল চ্যাট এবং কল বৈশিষ্ট্যগুলি কয়েকটি ন্যাশনাল এবং জাভাস্ক্রিপ্ট নির্ভরশীলতা উপর নির্ভর করে। {

  "@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: আপনার প্রথম বার্তা পাঠান একটি বার্তা পাঠানোর জন্য, আপনাকে পেমেন্টের জিআইডি প্রয়োজন। 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 এ এই অতিথি যোগ করা হয় তা নিশ্চিত করুন। 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 ডকুমেন্টগুলি পরিদর্শন করার পরামর্শ দিচ্ছি. আমি নিচের লিঙ্কটি উল্লেখ করেছি: 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

গল্পের মূল ভাষায় এই অডিও তৈরি!

কিভাবে আমি অ্যাপ্লিকেশন মধ্যে চ্যাট এবং কল দিয়ে একটি React Native অ্যাপ্লিকেশন তৈরি করেছি

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

ব্যবহারকারী-কেন্দ্রিক ক্রিপ্টো পণ্য তৈরি করা: গ্রাহক প্রতিক্রিয়ার গুরুত্ব

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

এই 18টি ডেভেলপার টুল 🚀🔥 দিয়ে আপনার উৎপাদনশীলতা বাড়ান

ব্যবহারকারী-কেন্দ্রিক ক্রিপ্টো পণ্য তৈরি করা: গ্রাহক প্রতিক্রিয়ার গুরুত্ব

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

এই 18টি ডেভেলপার টুল 🚀🔥 দিয়ে আপনার উৎপাদনশীলতা বাড়ান

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps