কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> Redis

Upstash Redis এবং Next.js এর সাথে একটি সমীক্ষা অ্যাপ তৈরি করা

আজকাল, রেডিস ডাটাবেস ছাড়া আইটি বিশ্বকে চিত্রিত করা কঠিন। 2021 সালে প্রকাশিত স্ট্যাকওভারফ্লো-এর বিকাশকারী সমীক্ষায়, ইন-মেমরি ডেটাবেসটি দারুণ জনপ্রিয়তা পেয়েছে এবং 70000 টিরও বেশি ডেভেলপারদের দ্বারা সবচেয়ে প্রিয় ডাটাবেস হিসাবে বেছে নেওয়া হয়েছে৷ একটি ইন-মেমরি ডাটাবেস হিসাবে, Redis দৃঢ় কর্মক্ষমতা প্রদান করে, যা ছোট প্রতিক্রিয়ার প্রয়োজন হয় এমন পরিস্থিতিতে এটিকে আদর্শ করে তোলে৷ সময় এবং ন্যূনতম বিলম্ব। যাইহোক, রেডিসের ব্যবহারের ক্ষেত্রে প্রায়ই ক্যাশিং এবং বার্তা-দালালির মধ্যে সীমাবদ্ধ বলে ভুলভাবে বোঝা যায়। আজ আমরা দেখব কেন এটি ভুল এবং একটি প্রাথমিক ডাটাবেসের ভূমিকায় Redis ব্যবহার করব৷

৷

ধারণা

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

  1. একজন ব্যবহারকারী তিনটি প্রশ্নের উত্তর দিতে পারেন।
    • আপনি আমাদের পণ্য/পরিষেবা সম্পর্কে কেমন অনুভব করেন? 1 - 10 পয়েন্ট
    • আপনি কি আপনার সহকর্মীদের কাছে আমাদের সুপারিশ করবেন? হ্যাঁ/না (সত্য/মিথ্যা)
    • অনুগ্রহ করে আপনার চিন্তা শেয়ার করুন... ফ্রি টেক্সট
  2. একজন ব্যবহারকারী ফর্ম জমা দিতে পারেন৷
    3. ৷
  3. প্রতিটি পৃথক সমীক্ষার ফলাফল ডাটাবেসে (হ্যাশ) একক রেকর্ড হিসাবে সংরক্ষণ করা হয়।
  4. একজন ব্যবহারকারী সমীক্ষার ফলাফল দেখতে পারেন৷
    5. ৷

এখানে আপনি ডেমো অ্যাপটি পরীক্ষা করতে পারেন।

দ্যা টেক স্ট্যাক

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

Next.js

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

Upstash Redis

Upstash সম্পূর্ণ-সার্ভারহীন, অবিরাম রেডিস ডেটাবেস অফার করে যা ব্যবহার করা আশ্চর্যজনকভাবে সহজ এবং প্রতি-অনুরোধের মূল্য খুব কম অফার করে। ঐতিহ্যবাহী রেডিসের উপরে নির্মিত, Upstash Redis-এর অপরাজেয় কর্মক্ষমতা গ্রহণ করে এবং এটিকে ডিস্ক স্টোরেজের স্থায়িত্বের সাথে একত্রিত করে যা এটিকে আমাদের ব্যবহারের ক্ষেত্রে উপযুক্ত করে তোলে।

প্রকল্প সেটআপ

  1. একটি Next.js অ্যাপ তৈরি করুন:npx create-next-app survey-app .
  2. Upstash কনসোলে একটি Upstash Redis ডাটাবেস তৈরি করুন এবং 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;

  // Prepare data to be inserted into the DB
  const data = {
    rating: String(body.rating) || "0",
    recommendation: String(body.recommendation) || "false",
    comment: String(body.comment) || "",
  };

  // Generate a random id to store the survey entry under
  const id =
    Math.random().toString(36).substring(2, 15) +
    Math.random().toString(36).substring(2, 15);

  // Insert data into Upstash redis

  try {
    //Store the survey data
    await redis.hset(`entries:${id}`, data);

    //Store the id of the survey to retrieve it later
    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. একটি হ্যাশ হিসাবে Redis এ সার্ভে এন্ট্রি সন্নিবেশ করুন
  3. একটি সেটে সমীক্ষা এন্ট্রির আইডি যোগ করুন

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

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

// pages/api/results.js

import { Redis } from "@upstash/redis";

const resultsHandler = async (req, res) => {
  // Retrieve data from redis

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

  try {
    //Find all the entries in the set
    const entries = await redis.smembers("entries");

    //Get all survey entries by id/key

    //To run multiple queries at once, Upstash supports the use of the pipeline command. This way we can run multiple queries at once and get the results in a single call.
    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,
    };

    // send data to backend
    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.styles.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 ফুলস্ট্যাক ওয়েব অ্যাপ্লিকেশন তৈরি করেছি যা ফর্ম এন্ট্রি পরিচালনা করে এবং আপস্ট্যাশ সার্ভারহীন রেডিসে পূরণ করা ফর্মগুলি সঞ্চয় করে৷ আমরা দেখেছি কিভাবে Redis একটি প্রাথমিক ডাটাবেস হিসাবে ব্যবহার করা যেতে পারে এবং অন্যান্য ডাটাবেস (যেমন SQL) থেকে Redis-এ স্যুইচ করার সময় আপনাকে কি ডিজাইন পরিবর্তন করতে হবে।

তাদের সহজে সেটআপ সার্ভারহীন রেডিস ডাটাবেস Upstash ক্লাউডে ফর্ম ডেটা সংরক্ষণ করা অবিশ্বাস্যভাবে সহজ করে তুলেছে।

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


  1. সার্ভারলেস রেডিস এবং প্রতিক্রিয়া নেটিভ সহ অ্যাপ-মধ্যস্থ ঘোষণা

  2. Nuxt 3 এবং সার্ভারলেস রেডিস দিয়ে শুরু করা

  3. ফ্লটার, সার্ভারলেস ফ্রেমওয়ার্ক এবং আপস্ট্যাশ (REDIS) সহ ফুলস্ট্যাক সার্ভারলেস অ্যাপ - পার্ট 2

  4. ফ্লটার, সার্ভারলেস ফ্রেমওয়ার্ক এবং আপস্ট্যাশ (REDIS) সহ ফুলস্ট্যাক সার্ভারলেস অ্যাপ - পার্ট 1