SvelteKit और Serverless Redis (Upstash) के साथ तेज़ TODO ऐप बनाएं

परिचय

इस पोस्ट में, हम SvelteKit और Serverless Redis (Upstash) का उपयोग करके एक सरल TODO ऐप बनाएंगे।

SvelteKit सभी आकार के वेब एप्लिकेशन बनाने के लिए एक फ्रेमवर्क है, जिसमें एक शानदार विकास अनुभव और लचीली फाइलसिस्टम-आधारित रूटिंग है।

प्रोजेक्ट बनाएं

नीचे दिए गए कमांड को चलाएं:

npm init svelte@next todo-app-with-redis

प्रोजेक्ट तैयार है। अब निर्भरताएं इंस्टॉल करें और चलाएं:

npm install

npm run dev

यूज़र इंटरफेस

हम एक सरल फॉर्म और सूची बनाएंगे TODO आइटम रखने के लिए। यह अभी खाली है, बाद में हम इसे डेटाबेस से बांधेंगे।

// src/routes/index.svelte
<script lang="ts">
  import type {Todo} from "../lib/types";
  import TodoItem from "../components/Todo.svelte";
  export let todos: Todo[] = [
    { id: '1', text: 'डेटाबेस बनाएं', status: true },
    { id: '2', text: 'डेटाबेस URL कॉपी करें', status: false }
  ];
  const uncheckedTodos = todos.filter((todo) => !todo.status);
  const checkedTodos = todos.filter((todo) => todo.status);
</script>

<main class="container">
  <form class="new" action="/" method="post">
    <input type="text" name="text" autofocus aria-label="TODO जोड़ें" class="input" placeholder="क्या करना है?" />
  </form>
  {#if uncheckedTodos.length}
    <div class="todos">
      {#each uncheckedTodos as todo (todo.id)}
        <TodoItem {todo}/>
      {/each}
    </div>
  {/if}
  {#if checkedTodos.length}
    <div class="todos todos-done">
      {#each checkedTodos as todo (todo.id)}
        <TodoItem {todo}/>
      {/each}
    </div>
  {/if}
</main>

यहाँ हमारा TODO कंपोनेंट है:

// src/components/Todo.svelte
<script lang="ts">
  import type {Todo} from "../lib/types";
  export let todo: Todo;
</script>

<div class="todo">
  <form action="/?_method=PATCH" method="post">
    <input type="hidden" name="todo" value={JSON.stringify(todo)}/>
    <button class="checkbox" aria-label="TODO को {todo.status ? 'नहीं किया' : 'किया'} के रूप में चिह्नित करें">
      {todo.status ? "✓" : ""}
    </button>
  </form>
  <span class="text">{todo.text}</span>
  <form action="/?_method=DELETE" method="post">
    <input type="hidden" name="id" value={todo.id}/>
    <button class="delete" aria-label="TODO हटाएं">✕</button>
  </form>
</div>

डेटाबेस तैयार करें

हम अपना डेटा Upstash Redis में रखेंगे। तो एक Upstash डेटाबेस बनाएं। हम HTTP-आधारित Upstash क्लाइंट का उपयोग करेंगे जो सर्वरलेस वातावरण के अनुकूल है। इंस्टॉल करें:

npm install @upstash/redis

अब Upstash Console पर अपना Redis डेटाबेस बनाएं। UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN को .env फ़ाइल में कॉपी/पेस्ट करें।

UPSTASH_REDIS_REST_URL=https://global-renewing-gecko-31543.upstash.io
UPSTASH_REDIS_REST_TOKEN=AXs3ACsjfg684jJBFQgN34je7RFJ58wYjg4NjMt=

पर्यावरण चर का उपयोग करने के लिए dotenv इंस्टॉल करें।

npm install dotenv

अब lib/redis.ts बनाएं और नीचे दिखाए अनुसार एक नया Redis इंस्टेंस बनाएं:

// src/lib/redis.ts
import "dotenv/config";
import { Redis } from "@upstash/redis";

export const databaseName = process.env.NODE_ENV === "development"
  ? "redis-with-svelte-kit-dev"
  : "redis-with-svelte-kit";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN,
});

export default redis;

API बनाएं

फोल्डर में, js/ts फाइलें API बैकएंड के रूप में उपयोग होती हैं। तो index.svelte -> फ्रंटएंड, index.ts -> बैकएंड।

आइए index.ts बनाएं और आवश्यक API मेथड जोड़ें।

// src/routes/index.ts
import redis, { databaseName } from "../lib/redis";
import type { RequestHandler } from "@sveltejs/kit";

const redirect = {
  status: 303,
  headers: { location: "/" },
};

export const get: RequestHandler = async () => {
  // हर बार पेज लोड होने पर चलता है
  return { body: { todos: [] } };
};

export const post: RequestHandler = async ({ request }) => {
  // फॉर्म: TODO बनाएं
  return redirect;
};

export const patch: RequestHandler = async ({ request }) => {
  // फॉर्म: TODO अपडेट करें
  return redirect;
};

export const del: RequestHandler = async ({ request }) => {
  // फॉर्म: TODO हटाएं
  return redirect;
};

POST TODO बनाएं

आइए TODO आइटम निर्माण को लागू करें:

// src/routes/index.ts
export const post: RequestHandler = async ({ request }) => {
  const form = await request.formData();
  const text = form.get("text");
  const id = Date.now().toString();
  const todo = JSON.stringify({ text, status: false });
  await redis.hset(databaseName, id, todo);
  return redirect;
};

GET TODO लोड करें

अब, आइए TODO आइटम सूचीबद्ध करें:

// src/routes/index.ts
export const get: RequestHandler = async () => {
  let todos = [];
  const data = await redis.hgetall(databaseName);
  if (!data) return { body: { todos } };

  // डेटा नॉर्मलाइज़ करें
  todos = Object.keys(data).map((key) => ({
    id: key,
    text: data[key]["text"],
    status: data[key]["status"],
  })).sort((a, b) => parseInt(b.id) - parseInt(a.id)); // id = टाइमस्टैम्प

  return { body: { todos } };
};

पोस्ट को सरल रखने के लिए, मैंने टास्क डिलीशन और टास्क पूरा करना कोड यहां नहीं जोड़ा है, लेकिन आप उन्हें गिटहब रेपो में देख सकते हैं।

अब सब कुछ तैयार है!

सोर्स कोड | डेमो ऐप

मैं Next.js के साथ इसी TODO एप्लिकेशन को लागू करने की योजना बना रहा हूं। फिर मैं इन फ्रेमवर्क में अपने अनुभव की तुलना करूंगा।

जुड़े रहें और हमें ट्विटर और डिस्कॉर्ड पर फॉलो करें।