Upstash Redis এবং Next.js দিয়ে হাই-পারফরম্যান্স সার্ভে অ্যাপ তৈরি করুন

আজকাল IT বিশ্বের কল্পনা করা কঠিন রেডিস ডেটাবেস ছাড়া। Stackoverflow-এর ২০২১ সালের ডেভেলপার সার্ভে-এ, ইন-মেমরি ডেটাবেসটি большую জনপ্রিয়তা উপভোগ করল এবং ৭০,০০০ এরও বেশি ডেভেলপার দ্বারা সবচেয়ে পছন্দের ডেটাবেস হিসেবে নির্বাচিত হয়েছিল। একটি ইন-মেমরি ডেটাবেস হিসেবে, রেডিস শক্তিশালী পারফরম্যান্স দেয়, যা কম রেসপন্স টাইম এবং মিনিমাল লেটেন্সি প্রয়োজন এমন দৃশ্যগুলোর জন্য আইডিয়াল। যlaved, রেডিসের ইউজ কেসগুলো প্রায়শই ভুলভাবে ক্যাশিং এবং মেসেজ-ব্রোকেরিং-এ সীমাবদ্ধ বোঝা হয়। আজ আমরা দেখব কেন এটি ভুল এবং রেডিসকে একটি প্রাইমারি ডেটাবেসের ভূমিকায় ব্যবহার করব।

আইডিয়া

আমরা একটি ছোট অ্যাপ বিল্ড করতে চাই যা ব্যবহারকারীদের অনলাইন সার্ভে হিসেবে ফিডব্যাক দিতে দেবে। এই নির্দিষ্ট কেসে, আসুন কল্পনা করি আমরা একটি কোম্পানির জন্য ফিডব্যাক সংগ্রহ করতে চাই। সহজ রাখতে, আমরা অ্যাপের ফাংশনালিটিতে ফোকাস করব যা নিচের মতো হওয়া উচিত:

1. একজন ব্যবহারকারী তিনটি প্রশ্নের উত্তর দিতে পারবে।
   • আমাদের প্রোডাক্ট/সার্ভিস সম্পর্কে আপনি কী অনুভব করেন? ১ - ১০ পয়েন্ট
   • আপনি কি আমাদের সহকর্মীদের রিকমেন্ড করবেন? হ্যা/না (true/false)
   • আপনার মতামত শেয়ার করুন... ফรี টেক্সট
2. একজন ব্যবহারকারী ফর্ম সাবমিট করতে পারবে।
3. প্রতিটি ব্যক্তিগত সার্ভে রেজাল্ট ডেটাবেসে একটি একক রেকর্ড হিসেবে স্টোর হবে (হ্যাশ)।
4. একজন ব্যবহারকারী সার্ভে রেজাল্ট দেখতে পারবে।

এখানে ডেমো অ্যাপ চেক করুন।

টেক স্ট্যাক

আমাদের ছোট সার্ভে অ্যাপ সার্ভারলেস আর্কিটেকচারের পুরো পটেনশিয়াল লেভারেজ করার একটি পারফেক্ট উদাহরণ। সার্ভারলেস ন্যূনতম খরচে সর্বোচ্চ স্কেলেবিলিটি নিশ্চিত করে যা নিচের টেকনোলজিগুলো দ্বারা অর্জন করা যায়:

Next.js

Next.js একটি ওপেন-সোর্স ডেভেলপমেন্ট ফ্রেমওয়ার্ক যা ট্রেডিশনাল React ওয়েব অ্যাপ্লিকেশনকে সার্ভার-সাইড রেন্ডারিং, স্ট্যাটিক পেজ জেনারেশন এবং সবচেয়ে গুরুত্বপূর্ণ API রাউটস гэর ফিচারসহ উন্নত করে। আমরা Next.js ব্যবহার করব আমাদের অ্যাপের ফ্রন্টএন্ড এবং API উভয় তৈরি করতে।

Upstash Redis

Upstash ফুল-সার্ভারলেস, পারসিস্টেন্ট রেডিস ডেটাবেস অফার করে যা অবিশ্বাস্যভাবে ব্যবহার করতে সহজ এবং খুব কম পের-রিকোয়েস্ট প্রাইসিং অফার করে। ট্রেডিশনাল রেডিসের উপরে বিল্ট, Upstash রেডিসের অপরাজিত পারফরম্যান্সকে ডিস্ক স্টোরেজের টেকসহ্যতার সাথে কাঙ্খিত করে যা এটি আমাদের ইউজ কেসের জন্য পারফেক্ট ফিট করে।

প্রোজেক্ট সেটআপ

1. Next.js অ্যাপ তৈরি করুন: npx create-next-app survey-app।
2. Upstash কনসোলে Upstash রেডিস ডেটাবেস তৈরি করুন এবং UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN উভয়ই কপি করুন।

প্রোজেক্টটি একটি সিঙ্গেল পেজ অ্যাপ্লিকেশন হবে দুটি API এন্ডপয়েন্টের সাথে:

• pages/api/submit.js একটি সার্ভে এন্ট্রি স্টোর করে
• pages/api/results.js সব সার্ভে এন্ট্রি রিট্রিভ করে

Upstash-এ সহজে কমিউনিকেশন করার জন্য, @upstash/redis npm প্যাকেজটি npm install @upstash/redis দিয়ে ইনস্টল করুন।

কোড

pages/api/submit.js নামে একটি নতুন ফাইল নিচের মতো তৈরি করুন:

// pages/api/submit.js
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "INSERT_YOUR_URL_HERE",
  token: "INSERT_YOUR_TOKEN_HERE",
});

const submitHandler = async (req, res) => {
  const body = req.body;
  
  // DB-এ ইনসার্ট করার জন্য ডেটা প্রস্তুত করুন
  const data = {
    rating: String(body.rating) || "0",
    recommendation: String(body.recommendation) || "false",
    comment: String(body.comment) || "",
  };
  
  // সার্ভে এন্ট্রি স্টোর করার জন্য র‍্যাঙ্কডম আইডি জেনারেট করুন
  const id = Math.random().toString(36).substring(2, 15)
    + Math.random().toString(36).substring(2, 15);
  
  // Upstash রেডিসে ডেটা ইনসার্ট করুন
  try {
    // সার্ভে ডেটা স্টোর করুন
    await redis.hset(`entries:${id}`, data);
    
    // সার্ভে আইডি স্টোর করুন পরে রিট্রিভ করার জন্য
    await redis.sadd("entries", `entries:${id}`);
  } catch (error) {
    console.error("Failed to insert data into redis", error);
    return res.status(500).json({
      success: false,
      message: "Failed to insert data into redis",
    });
  }
  
  return res.status(200).json({
    success: true,
    message: "Data inserted successfully",
  });
};

export default submitHandler;

এখানে আমরা তিনটি কাজ করছি:

1. রিকোয়েস্ট বডি থেকে সার্ভে ডেটা নেওয়া এবং রেডিসের জন্য প্রস্তুত করা
2. সার্ভে এন্ট্রি রেডিসে হ্যাশ হিসেবে ইনসার্ট করা
3. সার্ভে এন্ট্রির আইডি একটি সেট-এ অ্যাপেন্ড করা

আপনি চিন্তা করতে পারেন কেন আমরা সার্ভে এন্ট্রির জন্য একটি হ্যাশ তৈরি করছি এবং তারপর তার আইডিকে একটি সেটে রাখছি। এই ধাপটি গুরুত্বপূর্ণ হবে যতক্ষণ না আমরা রেডিস থেকে আবার ইভেন্ট রিট্রিভ করতে চাই। রেডিস একটি কি-ভ্যালু স্টোর হিসেবে কাজ করে যার মানে SQL ডেটাবেসের সাথে আমরা যা অভ্যস্ত, তার বিপরীতে, রেডিস ডেটা খুঁজে বের করার জন্য তৈরি নয় যদি না আমরা সঠিক কি নির্দিষ্ট করি যেখানে এটি স্টোর করা আছে। SELECT * FROM SurveyResults; এর মত একটি কোয়েরি SQL-এ সাপোর্টেড হতো কিন্তু রেডিসে আমাদের অন্য একটি ট্রিক ব্যবহার করতে হবে। এর জন্য আমরা একটি সেট তৈরি করি এবং সেটে সার্ভে রেজাল্ট এন্ট্রির সব রেডিস কি যোগ করি। একবার আমরা সব সার্ভে এন্ট্রি রিট্রিভ করতে চাইলে, আমরা সেটে তাদের কি লুকআপ করতে পারি। কিন্তু এখন কোডিং-এ ফিরে আসি এবং দেখি এটি প্র্যাকটিসে কীভাবে দেখাবে।

pages/api/results.js নামে একটি নতুন ফাইল নিচের মতো তৈরি করুন:

// pages/api/results.js
import { Redis } from "@upstash/redis";

const resultsHandler = async (req, res) => {
  // রেডিস থেকে ডেটা রিট্রিভ করুন
  const redis = new Redis({
    url: "INSERT_YOUR_URL_HERE",
    token: "INSERT_YOUR_TOKEN_HERE",
  });
  
  try {
    // সেটে সব এন্ট্রি খুঁজুন
    const entries = await redis.smembers("entries");
    
    // আইডি/কি দ্বারা সব সার্ভে এন্ট্রি পান
    // একসাথে একাধিক কোয়েরি চালানোর জন্য, Upstash পাইপলাইন কমান্ড সাপোর্ট করে। এইভাবে আমরা একসাথে একাধিক কোয়েরি চালাতে পারি এবং একক কল-এ রেজাল্ট পেতে পারি।
    const p = redis.pipeline();
    entries.forEach((id) => {
      p.hgetall(id);
    });
    
    const results = await p.exec();
    
    return res.status(200).json({
      success: true,
      message: "Data retrieved successfully",
      data: results,
    });
  } catch (error) {
    console.error("Failed to retrieve data from redis", error);
    return res.status(500).json({
      success: false,
      message: "Failed to retrieve data from redis",
    });
  }
};

export default resultsHandler;

আমাদের ব্যাকএন্ড এখন কাজ করছে এবং আমরা ফ্রন্টএন্ড দিয়ে অ্যাপটি ফিনিশ করতে পারি।

pages/index.js নামে একটি নতুন ফাইল নিচের মতো তৈরি করুন:

// pages/index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = {
      rating: form.rating.value,
      recommendation: form.recommendation.value,
      comment: form.comment.value,
    };
    
    // ডেটা ব্যাকএন্ডে পাঠান
    await fetch("/api/submit", {
      body: JSON.stringify(data),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    
    alert("Thank you for your feedback!");
  };
  
  const RatingOption = ({ value }) => (
    <div>
      <input type="radio" name="rating" value={value} required />{" "}
      <label>{value}</label>
    </div>
  );
  
  return (
    <div className={styles.container} onSubmit={handleSubmit}>
      <form>
        <div>
          <label>How do you feel about our products/services?</label>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
            <RatingOption key={value} value={value} />
          ))}
        </div>
        <div>
          <label>Would you recommend us to your colleagues?</label>
          <div>
            <input type="radio" name="recommendation" value="true" required />{" "}
            <label>Yes</label>
          </div>
          <div>
            <input type="radio" name="recommendation" value="false" required />{" "}
            <label>No</label>
          </div>
        </div>
        <div>
          <label>Please share your thoughts... (Optional)</label>
          <textarea
            name="comment"
            placeholder="This is what I liked most/this is what you can improve..."
          ></textarea>
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}

স্টাইল কাজ করানোর জন্য, styles/Home.module.css-এর কন্টেন্ট নিচের মতো রিপ্লেস করুন:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container form > div {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.container form > div > label {
  margin-bottom: 10px;
}

এখন আমরা সার্ভে এন্ট্রি রিসিভ করার জন্য প্রস্তুত! কিন্তু অপেক্ষা করুন, এখনো কিছু বাকি। আমাদের এখনো ফ্রন্টএন্ডে সার্ভে রেজাল্ট ইমপ্লিমেন্ট করতে বাকি।

pages/results.js নামে একটি নতুন ফাইল নিচের মতো তৈরি করুন:

import { useEffect, useState } from "react";
import styles from "../styles/Results.module.css";

export default function Results() {
  const [surveyData, setSurveyData] = useState([]);
  
  useEffect(() => {
    fetch("/api/results")
      .then((res) => res.json())
      .then((response) => setSurveyData(response.data));
  }, []);
  
  return (
    <div className={styles.container}>
      {" "}
      {surveyData.map((data) => (
        <div key={data.id}>
          <p>
            <strong> Rating: </strong> {data.rating}{" "}
          </p>{" "}
          <p>
            <strong> Recommendation: </strong> {data.recommendation}{" "}
          </p>{" "}
          <p>
            <strong> Comment: </strong> {data.comment}{" "}
          </p>{" "}
        </div>
      ))}{" "}
    </div>
  );
}

এবং অবশেষে styles/Results.module.css নামে একটি ফাইল নিচের কন্টেন্টের সাথে তৈরি করুন:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 100vh;
  margin: 50px 0;
}

.container > div {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.container p {
  margin: 0;
}

আপনি এখন localhost:3000/results-এ সব সার্ভে এন্ট্রির ওভারভিউ খুঁজে পাবেন।

অ্যাপ্লিকেশনের সম্পূর্ণ সোর্স কোড GitHub রিপোজিটরি upstash-survey-app-এ উপলব্ধ।

উপসংহার

এই পোস্টে আমরা একটি Next.js ফুল-স্ট্যাক ওয়েব অ্যাপ্লিকেশন ডেভেলপ করেছি যা ফর্ম এন্ট্রি হ্যান্ডেল করে এবং ভরা ফর্মগুলো Upstash সার্ভারলেস রেডিসে স্টোর করে। আমরা দেখেছি কীভাবে রেডিসকে একটি প্রাইমারি ডেটাবেস হিসেবে ব্যবহার করা যায় এবং SQL ডেটাবেস থেকে রেডিসে সুইচ করার সময় আপনাকে কী ডিজাইন পরিবর্তন করতে হয়।

Upstash তাদের সহজ-সেটআপ সার্ভারলেস রেডিস ডেটাবেসের মাধ্যমে ফর্ম ডেটা ক্লাউডে স্টোর করা অবিশ্বাস্যভাবে সহজ করে দিয়েছে।

আশা করি এই পোস্ট আপনাকে রেডিস বুঝতে, Upstash রেডিসের জন্য ফিল পেতে এবং নতুন সম্ভাবনায় ডেটা স্টোর করে আপনার অ্যাপ্লিকেশন বিল্ড শুরু করতে সাহায্য করবে।