PouchDB এবং React Native Integration

React Native অ্যাপ্লিকেশন ডেভেলপমেন্টে ডেটা স্টোরেজের জন্য PouchDB একটি জনপ্রিয় নির্বাচন। PouchDB একটি JavaScript লাইব্রেরি যা আপনার অ্যাপ্লিকেশনের মধ্যে লোকাল ডেটাবেস হিসেবে কাজ করতে সক্ষম। এটি CouchDB-কে অনুকরণ করে, যা রিমোট ডেটাবেসের সাথে সিঙ্ক করতে পারে এবং কনফ্লিক্ট রেজলিউশন প্রদান করতে পারে।

React Native অ্যাপ্লিকেশন এ PouchDB ইন্টিগ্রেট করা অনেক সহজ। এখানে একটি স্টেপ-বাই-স্টেপ গাইড দেয়া হলো, যা আপনাকে PouchDB এবং React Native ইন্টিগ্রেট করতে সাহায্য করবে।

১. PouchDB ইনস্টল করা

React Native প্রজেক্টে PouchDB ব্যবহার করতে প্রথমেই আপনাকে প্যাকেজটি ইনস্টল করতে হবে। আপনার প্রজেক্ট ডিরেক্টরিতে গিয়ে নিচের কমান্ডটি রান করুন:

npm install pouchdb-react-native

এটি pouchdb-react-native প্যাকেজটি ইনস্টল করবে, যা React Native এর জন্য পাউচডিবি অ্যাডাপ্টার প্রদান করে।

২. PouchDB সেটআপ এবং ডেটাবেস তৈরি করা

PouchDB ব্যবহার করতে প্রথমে একটি ডেটাবেস তৈরি করতে হবে। নিচে একটি উদাহরণ দেয়া হলো যেখানে আমরা একটি ডেটাবেস তৈরি করছি এবং কিছু ডেটা ইনসার্ট করছি:

import PouchDB from 'pouchdb-react-native';

// Create a new PouchDB database
const db = new PouchDB('my_database');

// Create a document to insert
const doc = {
  _id: '12345',
  name: 'John Doe',
  age: 30,
};

// Insert the document into the database
db.put(doc)
  .then(response => {
    console.log('Document inserted successfully', response);
  })
  .catch(error => {
    console.error('Error inserting document', error);
  });

এখানে, my_database নামে একটি ডেটাবেস তৈরি করা হচ্ছে এবং একটি ডকুমেন্ট (doc) ইনসার্ট করা হচ্ছে।

৩. ডেটা রিট্রিভ করা

PouchDB ডেটাবেস থেকে ডেটা রিট্রিভ (উদ্ধার) করা খুবই সহজ। নিচে একটি উদাহরণ দেখানো হলো:

// Retrieve a document by its ID
db.get('12345')
  .then(doc => {
    console.log('Document retrieved:', doc);
  })
  .catch(error => {
    console.error('Error retrieving document', error);
  });

এই কোডে db.get() ফাংশন ব্যবহার করে আমরা একটি ডকুমেন্টের ID দিয়ে ডেটা উদ্ধার করছি।

৪. ডেটা আপডেট এবং ডিলিট করা

PouchDB ব্যবহার করে ডেটা আপডেট এবং ডিলিট করাও সম্ভব:

ডেটা আপডেট:

// Fetch the document first
db.get('12345')
  .then(doc => {
    // Modify the document
    doc.age = 31;

    // Update the document
    return db.put(doc);
  })
  .then(response => {
    console.log('Document updated successfully', response);
  })
  .catch(error => {
    console.error('Error updating document', error);
  });

ডেটা ডিলিট:

// Fetch the document first
db.get('12345')
  .then(doc => {
    // Delete the document
    return db.remove(doc);
  })
  .then(response => {
    console.log('Document deleted successfully', response);
  })
  .catch(error => {
    console.error('Error deleting document', error);
  });

৫. Syncing Data with CouchDB or Remote Databases

PouchDB একটি দুর্দান্ত বৈশিষ্ট্য হলো এটি CouchDB বা অন্য রিমোট ডাটাবেসের সাথে সিঙ্ক করা সম্ভব। নিচে একটি উদাহরণ দেয়া হলো:

const remoteDB = new PouchDB('https://my-couchdb-server.com/my_database');

// Sync data between local and remote databases
db.sync(remoteDB, {
  live: true,
  retry: true,
})
  .on('change', function (change) {
    console.log('Sync change detected:', change);
  })
  .on('error', function (err) {
    console.error('Sync error:', err);
  });

এখানে, db.sync() ফাংশন ব্যবহার করে আমাদের লোকাল ডেটাবেস এবং রিমোট ডেটাবেসের মধ্যে সিঙ্ক্রোনাইজেশন তৈরি করা হচ্ছে।

৬. Conflict Detection and Resolution

PouchDB কনফ্লিক্ট ডিটেকশন এবং রেজলিউশন সমর্থন করে, যা রিমোট ডেটাবেসের সাথে সিঙ্ক করার সময় সংঘটিত হতে পারে। কনফ্লিক্ট রেজলিউশনের জন্য PouchDB নিজে থেকে কনফ্লিক্ট ডিটেক্ট করবে এবং আপনাকে কাস্টম লজিক প্রয়োগ করতে দেয়।

db.put(doc)
  .catch(err => {
    if (err.name === 'conflict') {
      // Handle conflict
      console.log('Conflict detected:', err);
      // You can merge or resolve the conflict here
    }
  });

৭. React Native with PouchDB UI Integration

React Native এ PouchDB এর সাথে UI ইন্টিগ্রেশন করার জন্য, আপনি useEffect এবং useState হুক ব্যবহার করে ডেটাবেসের পরিবর্তনসমূহ অ্যাপের UI তে রিফ্লেক্ট করতে পারেন:

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import PouchDB from 'pouchdb-react-native';

const db = new PouchDB('my_database');

export default function App() {
  const [doc, setDoc] = useState(null);

  useEffect(() => {
    db.get('12345')
      .then(doc => {
        setDoc(doc);
      })
      .catch(err => console.log(err));

    // Listen for database changes
    db.changes({ since: 'now', live: true })
      .on('change', change => {
        console.log('Database changed:', change);
        // Update UI with changes
      });

  }, []);

  return (
    <View>
      {doc ? (
        <Text>{doc.name}</Text>
      ) : (
        <Text>Loading...</Text>
      )}
      <Button
        title="Update Age"
        onPress={() => {
          doc.age = 32;
          db.put(doc);
        }}
      />
    </View>
  );
}

এই কোডে, আমরা useEffect হুক ব্যবহার করে ডেটাবেস থেকে ডেটা ফেচ করছি এবং সেটি UI তে প্রদর্শন করছি। এছাড়াও, changes ফাংশন ব্যবহার করে ডেটাবেসের আপডেটগুলো রিয়েল-টাইমে UI তে আপডেট করছি।

উপসংহার

PouchDB এবং React Native এর ইন্টিগ্রেশন খুবই সহজ এবং কার্যকরী। এটি লোকাল ডেটাবেস হিসেবে কাজ করতে পারে এবং রিমোট ডেটাবেসের সাথে সিঙ্ক হতে পারে। PouchDB এর সাহায্যে আপনি সিম্পল ডেটাবেস অপারেশন যেমন ইনসার্ট, রিট্রিভ, আপডেট এবং ডিলিট করতে পারেন। এছাড়াও, এটি কনফ্লিক্ট রেজলিউশন এবং সিঙ্কিং এর মতো গুরুত্বপূর্ণ ফিচার সমর্থন করে, যা React Native অ্যাপ্লিকেশনের জন্য অত্যন্ত উপকারী।