Redis সহ SvelteKit TODO অ্যাপ

এই পোস্টে, আমরা SvelteKitand সার্ভারলেস রেডিস (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-ভিত্তিক 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 () => {
  // 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 তৈরি করুন

আসুন 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 কোড এখানে, কিন্তু আপনি তাদের গিথুব রেপোতে দেখতে পারেন।

এখন সবকিছু প্রস্তুত!

সোর্স কোড| ডেমো অ্যাপ

আমি Next.js এর সাথে একই TODO অ্যাপ্লিকেশন বাস্তবায়ন করার পরিকল্পনা করছি। তারপর আমি এই ফ্রেমওয়ার্কগুলিতে আমার অভিজ্ঞতার তুলনা করব।

সাথে থাকুন এবং Twitter এবং Discord-এ আমাদের অনুসরণ করুন৷