Redis . के साथ SvelteKit TODO ऐप

इस पोस्ट में, हम SvelteKitand Serverless Redis (Upstash) का उपयोग करते हुए एक सरल TODO लिखेंगे।

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

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

निम्न आदेश चलाएँ:

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

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

npm install

npm run dev

उपयोगकर्ता इंटरफ़ेस

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

// 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: 'Create database',
      status: true
    },
    {
      id: '2',
      text: 'Copy database 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="Add todo"
      class="input"
      placeholder="What needs to be done?"
    />
  </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="Mark todo as {todo.status ? 'not done' : 'done'}"
    >
      {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="Delete todo">✕</button>
  </form>
</div>

अब आपको देखना चाहिए:

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

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

npm install @upstash/redis

चलिए अब Upstash कंसोल पर अपना 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 बनाएं और नीचे के रूप में एक नया रेडिस उदाहरण बनाएं:

// 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;

एपीआई बनाएं

फ़ोल्डर में, js/ts फाइलों का उपयोग एपीआई बैकएंड के रूप में किया जाता है। तो 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 () => {
  // runs every time the page is loaded
  return { body: { todos: [] } };
};

export const post: RequestHandler = async ({ request }) => {
  // form: create todo
  return redirect;
};

export const patch: RequestHandler = async ({ request }) => {
  // form: update todo
  return redirect;
};

export const del: RequestHandler = async ({ request }) => {
  // form: delete todo
  return redirect;
};

POST टूडू बनाएं

आइए 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 मदों की सूची बनाते हैं:

// src/routes/index.ts

export const get: RequestHandler = async () => {
  let todos = [];

  const data = await redis.hgetall(databaseName);
  if (!data) return { body: { todos } };

  // normalize data
  todos = Object.keys(data)
    .map((key) => ({
      id: key,
      text: data[key]["text"],
      status: data[key]["status"],
    }))
    // id = timestamp
    .sort((a, b) => parseInt(b.id) - parseInt(a.id));

  return { body: { todos } };
};

पोस्ट को सरल रखने के लिए, मैंने task deletion नहीं जोड़ा और taks completion यहां कोड है, लेकिन आप उन्हें जीथब रेपो में देख सकते हैं।

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

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

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

बने रहें और हमें Twitterand Discord पर फ़ॉलो करें।