SvelteKit এবং সার্ভারলেস রেডিস (Upstash) দিয়ে দ্রুত TODO অ্যাপ তৈরি করুন

এই পোস্টে আমরা SvelteKit এবং সার্ভারলেস রেডিস (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="Add 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="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 রেডিসে রাখব। তাই Upstash ডেটাবেস তৈরি করুন। আমরা HTTP-ভিত্তিক Upstash ক্লায়েন্ট ব্যবহার করব যা সার্ভারলেস পরিবেশের সাথে বান্ধব। ইনস্টল করুন:

npm install @upstash/redis

এখন Upstash কনসোলে আমাদের রেডিস ডেটাবেস তৈরি করুন। 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;

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"],
    }))
    // id = টাইমস্ট্যাম্প
    .sort((a, b) => parseInt(b.id) - parseInt(a.id));
  
  return { body: { todos } };
};

পোস্টটি সহজ রাখতে আমি টাস্ক ডিলিশন এবং টাস্ক কমপ্লিশন কোড এখানে যোগিনি, তবে গিটহাব রিপোতে দেখতে পাবেন।

সবকিছু প্রস্তুত!

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

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

আপডেট পেতে টুইটার এবং ডিসকোর্ডে ফলো করুন।