Blitz.js और Upstash Redis के साथ स्केलेबल टू-डू ऐप बनाएं

Blitz.js एक React फ्रेमवर्क है जिसे मूल रूप से Next.js से फोर्क किया गया था। आज हम एक Blitz.js टू-डू एप्लिकेशन बनाएंगे जो टास्क को Upstash में स्टोर करता है। बिना देर किए, शुरू करते हैं!

सेटअप

शुरू करने के लिए आपको अपने कंप्यूटर पर Blitz.js इंस्टॉल करना होगा।

NPM:

npm install -g blitz --legacy-peer-deps 

Yarn:

yarn global add blitz 

नया Blitz.js ऐप बनाने के लिए, blitz new का उपयोग करें और डायरेक्टरी में जाएं।

blitz new blitzjs-todo && cd blitzjs-todo 

अब अपनी वेबसाइट को स्टाइल करने के लिए TailwindCSS इंस्टॉल करें।

blitz install tailwind 

अंत में, Upstash JS SDK इंस्टॉल करें ताकि Upstash API को कॉल करना आसान हो।

NPM:

npm i @upstash/redis 

Yarn:

yarn i @upstash/redis 

इस बिंदु पर, आपको यह सुनिश्चित करने के लिए blitz dev चलाना चाहिए कि सब कुछ सही ढंग से काम कर रहा है। अकाउंट बनाने और साइन इन करने का प्रयास करें। यदि आपने अब तक सब कुछ सही किया है तो यह ऐसा दिखना चाहिए।

इसके अलावा, आपकी फ़ाइल संरचना इस तरह दिखनी चाहिए:

Upstash कंसोल से UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN कॉपी करें और .env फ़ाइल में डालें। यह इस तरह दिखना चाहिए:

# This env file should be checked into source control # This is the place for default values for all environments # Values in `.env.local` and `.env.production` will override these values UPSTASH_REDIS_REST_URL=YOUR_URL_HERE UPSTASH_REDIS_REST_TOKEN=YOUR_TOKEN_HERE 

हमने अपना Blitz.js एप्लिकेशन पूरी तरह से सेट कर लिया है! अब अपनी टू-डू लिस्ट को लागू करना शुरू करते हैं।

कार्यान्वयन

Blitz.js में यूज़र ऑथेंटिकेशन बिल्ट-इन आता है! आइए इसका लाभ उठाकर प्रत्येक यूज़र के लिए प्राइवेट टू-डू लिस्ट बनाएं।

सबसे पहले, /lib/redis.ts में Upstash JS SDK को इनिशियलाइज़ करें:

import { Redis } from "@upstash/redis"; const redis = Redis.fromEnv(); export default redis; 

हमें अपनी टू-डू लिस्ट तक पहुंचने के लिए 3 अलग-अलग API रूट्स बनाने की आवश्यकता होगी।

app/api पर जाएं और getall.ts नामक फ़ाइल बनाएं। एक बार करने के बाद, निम्नलिखित कोड पेस्ट करें:

import { BlitzApiRequest, BlitzApiResponse, getSession } from "blitz"; import redis from "../../lib/redis"; export const handler = async (req: BlitzApiRequest, res: BlitzApiResponse) => { const session = await getSession(req, res); if (!session.userId) { res.status(401).json({ error: `Do not tamper with this route!` }); } else { await redis .lrange(String(session.userId), 0, 100) .then((data) => res.status(200).json({ data: data, success: true })) .catch((error) => res.status(500).json({ error: error })); } }; export default handler; 

आइए देखें कि यह API रूट चरण-दर-चरण कैसे काम करता है। पहले, हम रूट पर एक रिक्वेस्ट करते हैं। रूट पर ही, हम मान्य करते हैं कि यूज़र लॉग इन है। यदि कोई यूज़र नहीं है, तो हम "नॉट ऑथराइज़्ड" रिस्पॉन्स लौटाते हैं। यदि यूज़र है, तो हम अपने Upstash Redis डेटाबेस को क्वेरी करते हैं ताकि लिस्ट में वर्तमान में मौजूद सभी टू-डू ढूंढे जा सकें। यह लगभग सौ टू-डू लाएगा।

प्रश्न: रुकिए, हम टू-डू को पहले स्थान पर कैसे जोड़ने वाले हैं? उत्तर: अच्छा सवाल! आइए अगले चरण में करते हैं!

एक बार फिर, app/api में add.ts नामक नई फ़ाइल में निम्नलिखित कोड पेस्ट करें।

import { BlitzApiRequest, BlitzApiResponse, getSession } from "blitz"; import redis from "../../lib/redis"; const handler = async (req: BlitzApiRequest, res: BlitzApiResponse) => { const session = await getSession(req, res); if (req.method !== "POST" || !req.body.data || !session.userId) { res.status(401).json({ error: `Do not tamper with this route!` }); } else { let todo = encodeURI(req.body.data); await redis .lpush(String(session.userId), todo) .then(() => res.status(200).json({ success: true })) .catch(() => res.status(500).json({ error: "Error adding data." })); } }; export default handler; 

यह API रूट पिछले वाले के समान है, लेकिन ध्यान दें कि हमने पांचवीं लाइन में अधिक चेक जोड़े हैं। ऐसा इसलिए है क्योंकि यह रिक्वेस्ट GET रिक्वेस्ट नहीं है, बल्कि POST रिक्वेस्ट है। ध्यान दें कि हम तीन चीजों की जांच करते हैं। पहला, हम सुनिश्चित करते हैं कि रिक्वेस्ट वास्तव में POST रिक्वेस्ट है। अगला, हम सुनिश्चित करते हैं कि req.body.data में JSON या टेक्स्ट है। अंत में, हम सुनिश्चित करते हैं कि यूज़र लॉग इन है। यदि ये सभी छोटे चेक पास हो जाते हैं, तो हम अपना टू-डू Upstash पर अपनी Redis लिस्ट में पुश कर सकते हैं। यदि फ़ेचिंग के दौरान किसी भी प्रकार की त्रुटि होती है, तो हम .catch का उपयोग करके 500 लौटा सकते हैं।

आखिरी रूट जिसकी हमें आवश्यकता है वह है हमारे टू-डू को हटाने के लिए। एक बार जब आप कुछ पूरा कर लेते हैं, तो आपको उसे क्रॉस आउट करना होगा! आइए app/api/remove.ts में अपना अंतिम API रूट जोड़ें। निम्नलिखित कोड फ़ाइल में कॉपी करें:

import { BlitzApiRequest, BlitzApiResponse, getSession } from "blitz"; import redis from "../../lib/redis"; const handler = async (req: BlitzApiRequest, res: BlitzApiResponse) => { const session = await getSession(req, res); if (req.method !== "POST" || !req.body.data || !session.userId) { res.status(401).json({ error: `Do not tamper with this route!` }); } else { let todo = encodeURI(req.body.data); await redis .lrem(String(session.userId), 1, todo) .then(() => res.status(200).json({ success: true })) .catch(() => res.status(500).json({ error: "Error removing data." })); } }; export default handler; 

कुछ समान नज़र आया? ऐसा इसलिए है क्योंकि यह रूट add API रूट के लगभग समान है। यहां मुख्य अंतर यह है कि हम Redis से आइटम हटाने के लिए LPUSH के बजाय LREM का उपयोग कर रहे हैं।

फ्रंटएंड बनाना

शुरू करने के लिए, app/pages/index.js में सब कुछ डिलीट करें और चरण-दर-चरण अपनी टू-डू लिस्ट लिखें।

फ़ाइल के शीर्ष पर, ये इम्पोर्ट्स पेस्ट करें।

import { Link, BlitzPage, useMutation, Routes, getAntiCSRFToken } from "blitz"; import { useRef, useEffect, useState, Suspense } from "react"; import Layout from "app/core/layouts/Layout"; import { useCurrentUser } from "app/core/hooks/useCurrentUser"; import logout from "app/auth/mutations/logout"; 

हम अपने टू-डू लिस्ट की मुख्य कार्यक्षमता बनाने के लिए React Hooks का उपयोग करेंगे। आइए लिस्ट की कुछ मुख्य विशेषताओं को लागू करें।

const Main = () => { const todoRef = useRef<HTMLInputElement>(null) const [todos, setTodos] = useState([]) const currentUser = useCurrentUser() const [logoutMutation] = useMutation(logout) const handleAddTodo = async (e) => { e.preventDefault() const antiCSRFToken = await getAntiCSRFToken() const response = await fetch("/api/add", { method: "POST", headers: { "Content-Type": "application/json", "anti-csrf": antiCSRFToken, }, body: JSON.stringify({ data: todoRef.current?.value }), }) const data = await response.json() if (data.success) { todoRef.current!.value = "" fetchTodos() } } const handleRemoveTodo = async (id) => { const antiCSRFToken = await getAntiCSRFToken() const response = await fetch("/api/remove", { method: "POST", headers: { "Content-Type": "application/json", "anti-csrf": antiCSRFToken, }, body: JSON.stringify({ data: id }), }) const data = await response.json() if (data.success) { fetchTodos() } } const fetchTodos = async () => { const antiCSRFToken = await getAntiCSRFToken() const response = await fetch("/api/getall", { method: "GET", headers: { "anti-csrf": antiCSRFToken, }, }) const res = await response.json() setTodos(res.data) } useEffect(() => { fetchTodos() }, []) if (currentUser) { return ( <>  { await logoutMutation() }} > Logout  
 User id: {currentUser.id} 
 User email: {currentUser.email} 
 
 
add a todo:
  
 
 {(todos as string[]).map((todo: string, index: number) => ( 
  handleRemoveTodo(todo)} className="flex items-center mr-4 justify-center w-5 h-5 rounded-[0.25rem] border border-solid border-gray-500 shadow-sm hover:bg-gray-700" > {todo} 
 ))} 
  ) } else { return ( 
   Sign Up     Login   
 ) } } 

<Main/> कंपोनेंट हमारे एप्लिकेशन का मूल है। इसके कोड पर करीब से नज़र डालने पर पता चलता है कि हम इसका उपयोग कैसे करते हैं। हमारे कंपोनेंट के शीर्ष पर, हम अपने एप्लिकेशन के लिए स्टेट इनिशियलाइज़ करते हैं। हम अपने "न्यू टू-डू" इनपुट में बाद में उपयोग के लिए एक ref भी घोषित करते हैं। आप antiCSRFToken के उपयोग पर भी ध्यान दे सकते हैं! Blitz.js को किसी भी प्रकार के दुर्भावनापूर्ण अभिनेता को आपकी साइट को नुकसान पहुंचाने से रोकने के लिए किसी भी API रूट्स को फ़ेच करते समय इन टोकन के उपयोग की आवश्यकता होती है। मेरी राय में यह होना अच्छा है!

हम वेबसाइट पर अपने डेटा को संभालने के लिए तीन मुख्य फ़ंक्शन का उपयोग करते हैं। ये तीन हैं:

• handleAddTodo
• handleRemoveTodo
• fetchTodos

हम पेज लोड होते ही fetchTodos को कॉल करते हैं, ताकि उन सभी टू-डू को लोड किया जा सके जिन्हें यूज़र को अभी पूरा करना है। जब कोई यूज़र टू-डू हटाता या जोड़ता है, तो हम वेबसाइट पर उस परिवर्तन को प्रतिबिंबित करने के लिए फिर से fetchTodos कॉल करते हैं!

यदि कोई यूज़र लॉग इन नहीं है, तो यूज़र को इस पेज को देखने से पहले वेबसाइट पर लॉग इन करने के लिए प्रेरित किया जाएगा।

यदि आपके पास पहले से वेबसाइट पर सत्र नहीं है तो आप साइन अप या लॉग इन कर सकते हैं। याद रखें, आप अकाउंट के बिना अपने टू-डू स्टोर नहीं कर सकते, और सभी API रूट्स के लिए आपको AntiCSRFToken के साथ प्रमाणित होना आवश्यक है!

लेकिन रुकिए, एक और महत्वपूर्ण कदम! हमें पेज को एक्सपोर्ट करना होगा!

const Home: BlitzPage = () => { return ( 
 
 
  
  
 
 
 ); }; Home.suppressFirstRenderFlicker = true; Home.getLayout = (page) => {page}; export default Home; 

जैसा कि आप ऊपर देख सकते हैं, Blitz.js Next से थोड़ा अलग दृष्टिकोण का उपयोग करता है, लेकिन इसका मूल दृष्टिकोण अभी के लिए समान है। हम पहले इम्पोर्ट किए गए Suspense का उपयोग यह दिखाने के लिए करते हैं कि ऐप लोड हो रहा है, और फिर लोडिंग समाप्त होने के बाद हम अपना </Main> कंपोनेंट दिखाते हैं!

अपने परिवर्तनों को प्रभावी देखने के लिए, अपने कंसोल में एक बार फिर से यह चलाएं, और ब्राउज़र में अपने ऐप पर जाएं।

blitz dev 

यदि आपने निर्देशों का पालन किया है, तो लॉग इन करने और कुछ टू-डू जोड़ने के बाद आपका एप्लिकेशन इस तरह दिखना चाहिए:

आप टू-डू के बगल में बॉक्स पर क्लिक करके उसे हटा सकते हैं, यही removeTodo फ़ंक्शन के लिए है 😉।

बधाई हो!

मुझे उम्मीद है कि इस ब्लॉग पोस्ट को पढ़कर आपने कुछ नया सीखा होगा, और यदि नहीं, तो याद रखें कि अपने कौशल को निखारने में कोई बुराई नहीं है! Blitz.js अपना फोकस Next.js से हटा रहा है, इसलिए भविष्य में यह पूरी तरह से अलग फ्रेमवर्क हो सकता है, लेकिन उनकी वेबसाइट पर बने रहें!

प्रोजेक्ट सोर्स: GitHub Link

कार्यशील डेमो: Demo Link

फीडबैक है? @upstash को Twitter पर फॉलो करना सुनिश्चित करें, और Discord सर्वर से जुड़ें!