Node.js অ্যাডমিন SDK ব্যবহার করে Firestore এর সাথে ক্লাউড রানে একটি সম্পূর্ণ স্ট্যাক Next.js অ্যাপ্লিকেশন স্থাপন করুন

১. সংক্ষিপ্ত বিবরণ

ক্লাউড রান একটি সম্পূর্ণভাবে পরিচালিত প্ল্যাটফর্ম যা আপনাকে গুগলের পরিবর্ধনযোগ্য পরিকাঠামোর উপর সরাসরি আপনার কোড চালানোর সুযোগ দেয়। এই কোডল্যাবে দেখানো হবে কিভাবে Node.js অ্যাডমিন SDK ব্যবহার করে ক্লাউড রানে থাকা একটি Next.js অ্যাপ্লিকেশনকে ফায়ারস্টোর ডেটাবেসের সাথে সংযুক্ত করা যায়।

এই ল্যাবে, আপনি শিখবেন কীভাবে:

  • একটি ফায়ারস্টোর ডাটাবেস তৈরি করুন
  • ক্লাউড রান-এ এমন একটি অ্যাপ্লিকেশন স্থাপন করুন যা আপনার ফায়ারস্টোর ডেটাবেসের সাথে সংযুক্ত হয়।

২. পূর্বশর্তসমূহ

  1. যদি আপনার আগে থেকে কোনো গুগল অ্যাকাউন্ট না থাকে, তাহলে আপনাকে অবশ্যই একটি গুগল অ্যাকাউন্ট তৈরি করতে হবে।
    • কর্মক্ষেত্র বা শিক্ষা প্রতিষ্ঠানের অ্যাকাউন্টের পরিবর্তে ব্যক্তিগত অ্যাকাউন্ট ব্যবহার করুন। কর্মক্ষেত্র এবং শিক্ষা প্রতিষ্ঠানে এমন কিছু সীমাবদ্ধতা থাকতে পারে, যার ফলে আপনি এই ল্যাবের জন্য প্রয়োজনীয় এপিআই (API) সক্রিয় করতে পারবেন না।

৩. প্রজেক্ট সেটআপ

  1. গুগল ক্লাউড কনসোলে সাইন-ইন করুন।
  2. ক্লাউড কনসোলে বিলিং চালু করুন ।
    • এই ল্যাবটি সম্পন্ন করতে ক্লাউড রিসোর্সে ১ মার্কিন ডলারেরও কম খরচ হওয়া উচিত।
    • পরবর্তী চার্জ এড়াতে, এই ল্যাবের শেষে দেওয়া ধাপগুলো অনুসরণ করে আপনি রিসোর্সগুলো মুছে ফেলতে পারেন।
    • নতুন ব্যবহারকারীরা ৩০০ মার্কিন ডলারের ফ্রি ট্রায়ালের জন্য যোগ্য।
  3. একটি নতুন প্রজেক্ট তৈরি করুন অথবা বিদ্যমান কোনো প্রজেক্ট পুনরায় ব্যবহার করুন।

৪. ক্লাউড শেল এডিটর খুলুন

  1. ক্লাউড শেল এডিটরে যান
  2. যদি স্ক্রিনের নীচে টার্মিনালটি দেখা না যায়, তাহলে এটি খুলুন:
    • হ্যামবার্গার মেনুতে ক্লিক করুন হ্যামবার্গার মেনু আইকন
    • টার্মিনালে ক্লিক করুন
    • নতুন টার্মিনালে ক্লিক করুন ক্লাউড শেল এডিটরে নতুন টার্মিনাল খুলুন
  3. টার্মিনালে এই কমান্ডটি দিয়ে আপনার প্রজেক্ট সেট করুন:
    • বিন্যাস: 
      gcloud config set project [PROJECT_ID]
    • উদাহরণ: 
      gcloud config set project lab-project-id-example
    • যদি আপনি আপনার প্রজেক্ট আইডি মনে করতে না পারেন:
      • আপনি আপনার সমস্ত প্রজেক্ট আইডি তালিকাভুক্ত করতে পারেন: 
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ক্লাউড শেল এডিটর টার্মিনালে প্রজেক্ট আইডি সেট করুন
  4. অনুমোদন করতে বলা হলে, চালিয়ে যাওয়ার জন্য 'Authorize'-এ ক্লিক করুন। ক্লাউড শেল অনুমোদন করতে ক্লিক করুন
  5. আপনি এই বার্তাটি দেখতে পাবেন:
    Updated property [core/project].
    যদি আপনি একটি WARNING দেখতে পান এবং আপনাকে Do you want to continue (Y/N)? জিজ্ঞাসা করা হয়, তাহলে সম্ভবত আপনি প্রজেক্ট আইডি ভুলভাবে প্রবেশ করিয়েছেন। N চাপুন, Enter চাপুন এবং gcloud config set project কমান্ডটি আবার চালানোর চেষ্টা করুন।

৫. এপিআই সক্রিয় করুন

টার্মিনালে, এপিআইগুলো সক্রিয় করুন:

gcloud services enable \
  firestore.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com

অনুমোদন করতে বলা হলে, চালিয়ে যাওয়ার জন্য 'Authorize'-এ ক্লিক করুন। ক্লাউড শেল অনুমোদন করতে ক্লিক করুন

এই কমান্ডটি সম্পন্ন হতে কয়েক মিনিট সময় লাগতে পারে, কিন্তু অবশেষে এটি এইটির মতো একটি সফলতার বার্তা দেবে:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

৬. ফায়ারস্টোর ডেটাবেস তৈরি করুন

  1. একটি ফায়ারস্টোর ডাটাবেস তৈরি করতে gcloud firestore databases create কমান্ডটি চালান। 
    gcloud firestore databases create --location=nam5

৭. আবেদনপত্র প্রস্তুত করুন

একটি Next.js অ্যাপ্লিকেশন তৈরি করুন যা HTTP অনুরোধে সাড়া দেয়।

  1. task-app নামের একটি নতুন Next.js প্রজেক্ট তৈরি করতে, এই কমান্ডটি ব্যবহার করুন: 
    npx --yes create-next-app@15 task-app \
  --ts \
  --eslint \
  --tailwind \
  --no-src-dir \
  --turbopack \
  --app \
  --no-import-alias
  2. task-app ডিরেক্টরি পরিবর্তন করুন: 
    cd task-app
  1. ফায়ারস্টোর ডাটাবেসের সাথে সংযোগ স্থাপনের জন্য firebase-admin ইনস্টল করুন। 
    npm install firebase-admin
  1. Cloud Shell Editor-এ actions.ts ফাইলটি খুলুন:
    cloudshell edit app/actions.ts
    এখন স্ক্রিনের উপরের অংশে একটি খালি ফাইল দেখা যাবে। এখানেই আপনি actions.ts ফাইলটি সম্পাদনা করতে পারবেন। দেখান যে কোডটি স্ক্রিনের উপরের অংশে থাকবে।
  2. নিচের কোডটি কপি করে খোলা actions.ts ফাইলে পেস্ট করুন: 
    'use server'
import { initializeApp, applicationDefault, getApps } from 'firebase-admin/app';
import { getFirestore } from 'firebase-admin/firestore';
const credential = applicationDefault();

// Only initialize app if it does not already exist
if (getApps().length === 0) {
  initializeApp({ credential });
}

const db = getFirestore();
const tasksRef = db.collection('tasks');

type Task = {
  id: string;
  title: string;
  status: 'IN_PROGRESS' | 'COMPLETE';
  createdAt: number;
};

// CREATE
export async function addNewTaskToDatabase(newTask: string) {
  await tasksRef.doc().create({
    title: newTask,
    status: 'IN_PROGRESS',
    createdAt: Date.now(),
  });
  return;
}

// READ
export async function getTasksFromDatabase() {
  const snapshot = await tasksRef.orderBy('createdAt', 'desc').limit(100).get();
  const tasks = await snapshot.docs.map(doc => ({
    id: doc.id,
    title: doc.data().title,
    status: doc.data().status,
    createdAt: doc.data().createdAt,
  }));
  return tasks;
}

// UPDATE
export async function updateTaskInDatabase(task: Task) {
  await tasksRef.doc(task.id).set(task);
  return;
}

// DELETE
export async function deleteTaskFromDatabase(taskId: string) {
  await tasksRef.doc(taskId).delete();
  return;
}
  1. Cloud Shell Editor-এ page.tsx ফাইলটি খুলুন:
    cloudshell edit app/page.tsx
    এখন স্ক্রিনের উপরের অংশে একটি বিদ্যমান ফাইল দেখা যাবে। এখান থেকেই আপনি page.tsx ফাইলটি সম্পাদনা করতে পারবেন। দেখান যে কোডটি স্ক্রিনের উপরের অংশে থাকবে।
  2. page.tsx ফাইলের বিদ্যমান বিষয়বস্তু মুছে ফেলুন।
  3. নিচের কোডটি কপি করে খোলা page.tsx ফাইলটিতে পেস্ট করুন: 
    'use client'
import React, { useEffect, useState } from "react";
import { addNewTaskToDatabase, getTasksFromDatabase, deleteTaskFromDatabase, updateTaskInDatabase } from "./actions";

type Task = {
  id: string;
  title: string;
  status: 'IN_PROGRESS' | 'COMPLETE';
  createdAt: number;
};

export default function Home() {
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [tasks, setTasks] = useState<Task[]>([]);

  async function getTasks() {
    const updatedListOfTasks = await getTasksFromDatabase();
    setTasks(updatedListOfTasks);
  }

  useEffect(() => {
    getTasks();
  }, []);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    await addNewTaskToDatabase(newTaskTitle);
    await getTasks();
    setNewTaskTitle('');
  };

  async function updateTask(task: Task, newTaskValues: Partial<Task>) {
    await updateTaskInDatabase({ ...task, ...newTaskValues });
    await getTasks();
  }

  async function deleteTask(taskId: string) {
    await deleteTaskFromDatabase(taskId);
    await getTasks();
  }

  return (
    <main className="p-4">
      <h2 className="text-2xl font-bold mb-4">To Do List</h2>
      <div className="flex mb-4">
        <form onSubmit={handleSubmit} className="flex mb-8">
          <input
            type="text"
            placeholder="New Task Title"
            value={newTaskTitle}
            onChange={(e) => setNewTaskTitle(e.target.value)}
            className="flex-grow border border-gray-400 rounded px-3 py-2 mr-2 bg-inherit"
          />
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-nowrap"
          >
            Add New Task
          </button>
        </form>
      </div>
      <table className="w-full">
        <tbody>
          {tasks.map(function (task) {
            const isComplete = task.status === 'COMPLETE';
            return (
              <tr key={task.id} className="border-b border-gray-200">
                <td className="py-2 px-4">
                  <input
                    type="checkbox"
                    checked={isComplete}
                    onChange={() => updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })}
                    className="transition-transform duration-300 ease-in-out transform scale-100 checked:scale-125 checked:bg-green-500"
                  />
                </td>
                <td className="py-2 px-4">
                  <span
                    className={`transition-all duration-300 ease-in-out ${isComplete ? 'line-through text-gray-400 opacity-50' : 'opacity-100'}`}
                  >
                    {task.title}
                  </span>
                </td>
                <td className="py-2 px-4">
                  <button
                    onClick={() => deleteTask(task.id)}
                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded float-right"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </main>
  );
}

অ্যাপ্লিকেশনটি এখন ডেপ্লয় করার জন্য প্রস্তুত।

৮. অ্যাপ্লিকেশনটি ক্লাউড রান-এ স্থাপন করুন।

  1. আপনার অ্যাপ্লিকেশনটি ক্লাউড রান-এ ডেপ্লয় করতে নিচের কমান্ডটি চালান: 
    gcloud run deploy helloworld \
  --region=us-central1 \
  --source=.
  2. অনুরোধ করা হলে, আপনি যে চালিয়ে যেতে চান তা নিশ্চিত করতে Y এবং Enter চাপুন: 
    Do you want to continue (Y/n)? Y

কয়েক মিনিট পর অ্যাপ্লিকেশনটি আপনাকে ভিজিট করার জন্য একটি URL প্রদান করবে।

আপনার অ্যাপ্লিকেশনটি বাস্তবে দেখতে ইউআরএল-টিতে যান। প্রতিবার ইউআরএল-টিতে গেলে বা পৃষ্ঠাটি রিফ্রেশ করলে, আপনি টাস্ক অ্যাপটি দেখতে পাবেন।

৯. অভিনন্দন

এই ল্যাবে, আপনি নিম্নলিখিত বিষয়গুলো করতে শিখেছেন:

  • একটি ক্লাউড এসকিউএল ফর পোস্টগ্রেসকিউএল ইনস্ট্যান্স তৈরি করুন
  • ক্লাউড রান-এ এমন একটি অ্যাপ্লিকেশন স্থাপন করুন যা আপনার ক্লাউড SQL ডেটাবেসের সাথে সংযোগ স্থাপন করে।

পরিষ্কার করা

ক্লাউড এসকিউএল-এর কোনো ফ্রি টিয়ার নেই এবং এটি ব্যবহার করতে থাকলে আপনাকে চার্জ করা হবে। অতিরিক্ত চার্জ এড়ানোর জন্য আপনি আপনার ক্লাউড প্রজেক্টটি ডিলিট করে দিতে পারেন।

পরিষেবাটি ব্যবহার না করা হলে ক্লাউড রান কোনো চার্জ না করলেও, আর্টিফ্যাক্ট রেজিস্ট্রি-তে কন্টেইনার ইমেজ সংরক্ষণের জন্য আপনাকে চার্জ করা হতে পারে। আপনার ক্লাউড প্রজেক্টটি ডিলিট করে দিলে সেই প্রজেক্টের মধ্যে ব্যবহৃত সমস্ত রিসোর্সের বিলিং বন্ধ হয়ে যায়।

আপনি চাইলে প্রজেক্টটি মুছে ফেলতে পারেন: 

gcloud projects delete $GOOGLE_CLOUD_PROJECT

আপনি আপনার ক্লাউডশেল ডিস্ক থেকে অপ্রয়োজনীয় রিসোর্সগুলো মুছে ফেলতে চাইতে পারেন। আপনি যা করতে পারেন:

  1. কোডল্যাব প্রজেক্ট ডিরেক্টরিটি মুছে ফেলুন: 
    rm -rf ~/task-app
  2. সতর্কীকরণ! এই পরবর্তী কাজটি পূর্বাবস্থায় ফেরানো যাবে না! জায়গা খালি করার জন্য আপনি যদি আপনার ক্লাউড শেলের সবকিছু মুছে ফেলতে চান, তাহলে আপনি আপনার সম্পূর্ণ হোম ডিরেক্টরিটি ডিলিট করে দিতে পারেন। খেয়াল রাখবেন, আপনি যা কিছু রাখতে চান তা যেন অন্য কোথাও সেভ করা থাকে। 
    sudo rm -rf $HOME

শিখতে থাকুন