Upstash Redis और Next.js के साथ एक सर्वेक्षण ऐप बनाना

आजकल, रेडिस डेटाबेस के बिना आईटी दुनिया की छवि बनाना कठिन है। 2021 में प्रकाशित स्टैकओवरफ्लो के डेवलपर सर्वेक्षण में, इन-मेमोरी डेटाबेस को बहुत लोकप्रियता मिली और इसे 70000 से अधिक डेवलपर्स द्वारा सबसे अधिक पसंद किए जाने वाले डेटाबेस के रूप में चुना गया। समय और न्यूनतम विलंबता। हालांकि, रेडिस के उपयोग के मामलों को अक्सर कैशिंग और संदेश-ब्रोकरिंग तक सीमित होने के रूप में गलत समझा जाता है। आज हम देखेंगे कि यह गलत क्यों है और प्राथमिक डेटाबेस की भूमिका में रेडिस का उपयोग करें।

विचार

हम एक छोटा ऐप बनाना चाहते हैं जो उपयोगकर्ताओं को ऑनलाइन सर्वेक्षण के रूप में प्रतिक्रिया देने की अनुमति देता है। इस विशिष्ट मामले में, आइए कल्पना करें कि हम किसी कंपनी के लिए प्रतिक्रिया एकत्र करना चाहते हैं। इसे सरल रखने के लिए, हम ऐप की कार्यक्षमता पर ध्यान केंद्रित करेंगे जो निम्नलिखित होनी चाहिए:

1. एक उपयोगकर्ता तीन सवालों के जवाब दे सकता है।
   • आप हमारे उत्पादों/सेवाओं के बारे में कैसा महसूस करते हैं? 1 - 10 अंक
   • क्या आप हमें अपने सहयोगियों को सलाह देंगे? हां/नहीं (सही/गलत)
   • कृपया अपने विचार साझा करें... मुफ़्त टेक्स्ट
2. एक उपयोगकर्ता फ़ॉर्म जमा कर सकता है।
3. प्रत्येक व्यक्तिगत सर्वेक्षण परिणाम डेटाबेस (हैश) में एक रिकॉर्ड के रूप में संग्रहीत किया जाता है।
4. एक उपयोगकर्ता सर्वेक्षण के परिणामों पर एक नज़र डाल सकता है।

यहां आप डेमो ऐप देख सकते हैं।

तकनीकी स्टैक

सर्वर रहित आर्किटेक्चर की पूरी क्षमता का लाभ उठाने के लिए हमारा छोटा सर्वेक्षण ऐप एक आदर्श उदाहरण है। सर्वर रहित लागत को न्यूनतम रखते हुए अधिकतम मापनीयता सुनिश्चित करता है और इसे निम्नलिखित तकनीकों के साथ प्राप्त किया जा सकता है:

अगला.js

Next.js एक ओपन-सोर्स डेवलपमेंट फ्रेमवर्क है जो सर्वर-साइड रेंडरिंग, स्टैटिक पेज जेनरेशन और सबसे महत्वपूर्ण API रूट्स जैसी सुविधाओं के साथ पारंपरिक रिएक्ट वेब एप्लिकेशन को बढ़ाता है। . हम अपने ऐप के फ्रंटएंड और एपीआई दोनों को बनाने के लिए नेक्स्ट.जेएस का उपयोग करने जा रहे हैं।

अपस्टैश Redis

Upstash पूर्ण-सर्वर रहित, लगातार Redis डेटाबेस प्रदान करता है जो उपयोग करने में आश्चर्यजनक रूप से आसान हैं और बहुत कम प्रति-अनुरोध मूल्य प्रदान करते हैं। पारंपरिक रेडिस के शीर्ष पर निर्मित, अपस्टैश रेडिस के अपराजेय प्रदर्शन को लेता है और इसे डिस्क स्टोरेज के स्थायित्व के साथ जोड़ता है जो इसे हमारे उपयोग के मामले के लिए एकदम उपयुक्त बनाता है।

प्रोजेक्ट सेटअप

1. एक Next.js ऐप बनाएं:npx create-next-app survey-app ।
2. अपस्टैश कंसोल में एक Upstash Redis डेटाबेस बनाएं और UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN दोनों को कॉपी करें।

यह परियोजना दो एपीआई एंडपॉइंट्स के साथ एक सिंगल पेज एप्लीकेशन होगी:

• 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. सर्वेक्षण प्रविष्टि को रेडिस में हैश के रूप में सम्मिलित करें
3. सर्वे प्रविष्टि की आईडी को एक सेट में जोड़ें

आप सोच रहे होंगे कि हम सर्वेक्षण प्रविष्टि के लिए हैश क्यों बना रहे हैं और फिर उसकी आईडी को एक सेट में डाल देते हैं। जैसे ही हम रेडिस से फिर से घटना को पुनः प्राप्त करना चाहते हैं, यह कदम महत्वपूर्ण होगा। Redis एक की-वैल्यू स्टोर के रूप में काम करता है जिसका अर्थ है कि SQL डेटाबेस के साथ हम जो उपयोग करते हैं, उसके विपरीत, Redis को डेटा खोजने के लिए नहीं बनाया जाता है जब तक कि हम एक सटीक कुंजी निर्दिष्ट नहीं करते हैं जिसके तहत इसे संग्रहीत किया जाता है। एक क्वेरी जैसे SELECT * FROM SurveyResults; एसक्यूएल में समर्थित होगा लेकिन रेडिस के साथ हमें एक और चाल का उपयोग करना होगा। इसके लिए हम एक सेट बनाते हैं और इसमें सर्वेक्षण परिणाम प्रविष्टियों की सभी रेडिस कुंजियाँ जोड़ते हैं। एक बार जब हम सभी सर्वेक्षण प्रविष्टियों को पुनः प्राप्त करना चाहते हैं, तो हम बस सेट में उनकी कुंजी देख सकते हैं। लेकिन आइए अब कोडिंग पर वापस जाएं और देखें कि यह व्यवहार में कैसा दिखता है।

एक नई फ़ाइल बनाएँ 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-सर्वेक्षण-ऐप पर उपलब्ध है।

निष्कर्ष

इस पोस्ट में हमने एक नेक्स्ट.जेएस फुलस्टैक वेब एप्लिकेशन विकसित किया है जो अपस्टैश सर्वरलेस रेडिस में फॉर्म एंट्रीज और भरे हुए फॉर्म को स्टोर करता है। हमने देखा कि रेडिस को प्राथमिक डेटाबेस के रूप में कैसे इस्तेमाल किया जा सकता है और अन्य डेटाबेस (जैसे एसक्यूएल) से रेडिस में स्विच करते समय आपको कौन से डिज़ाइन परिवर्तन करने होंगे।

अपने आसान-से-सेटअप सर्वर रहित रेडिस डेटाबेस के साथ अपस्टैश ने क्लाउड में फॉर्म डेटा को स्टोर करना अविश्वसनीय रूप से आसान बना दिया है।

मुझे उम्मीद है कि यह पोस्ट आपको Redis को समझने, Upstash Redis के बारे में जानने और डेटा स्टोर करने की नई संभावनाओं के साथ अपने एप्लिकेशन बनाना शुरू करने में मदद करेगी।