PostgreSQL এর জন্য ক্লাউড এসকিউএল সহ ক্লাউড রানে একটি সম্পূর্ণ স্ট্যাক জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন স্থাপন করুন

1. ওভারভিউ

ক্লাউড রান হল একটি সম্পূর্ণরূপে পরিচালিত প্ল্যাটফর্ম যা আপনাকে সরাসরি Google-এর মাপযোগ্য পরিকাঠামোর উপরে আপনার কোড চালাতে সক্ষম করে। এই কোডল্যাব প্রদর্শন করবে কিভাবে PostgreSQL ডাটাবেসের জন্য একটি ক্লাউড এসকিউএল- এ ক্লাউড রানে একটি Next.js অ্যাপ্লিকেশন সংযোগ করতে হয়।

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

• PostgreSQL উদাহরণের জন্য একটি ক্লাউড SQL তৈরি করুন ( ব্যক্তিগত পরিষেবা সংযোগ ব্যবহার করার জন্য কনফিগার করা হয়েছে)
• ক্লাউড রানে একটি অ্যাপ্লিকেশন স্থাপন করুন যা আপনার ক্লাউড SQL ডাটাবেসের সাথে সংযোগ করে
• আপনার অ্যাপ্লিকেশনে কার্যকারিতা যোগ করতে জেমিনি কোড সহায়তা ব্যবহার করুন

2. পূর্বশর্ত

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

3. প্রকল্প সেটআপ

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

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

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. অনুমোদন করার জন্য অনুরোধ করা হলে, চালিয়ে যেতে অনুমোদন ক্লিক করুন।
5. আপনার এই বার্তাটি দেখতে হবে:

   Updated property [core/project].
   

   যদি আপনি একটি WARNING দেখতে পান এবং জিজ্ঞাসা করা হয় Do you want to continue (Y/N)? , তাহলে আপনি সম্ভবত প্রজেক্ট আইডি ভুলভাবে প্রবেশ করেছেন। N টিপুন, Enter টিপুন এবং আবার gcloud config set project কমান্ড চালানোর চেষ্টা করুন।

5. API সক্রিয় করুন

টার্মিনালে, APIs সক্ষম করুন:

gcloud services enable \
  compute.googleapis.com \
  sqladmin.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com \
  networkconnectivity.googleapis.com \
  servicenetworking.googleapis.com \
  cloudaicompanion.googleapis.com

অনুমোদন করার জন্য অনুরোধ করা হলে, চালিয়ে যেতে অনুমোদন ক্লিক করুন।

এই কমান্ডটি সম্পূর্ণ হতে কয়েক মিনিট সময় নিতে পারে, তবে এটি শেষ পর্যন্ত এটির মতো একটি সফল বার্তা তৈরি করবে:

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

6. একটি পরিষেবা অ্যাকাউন্ট সেট আপ করুন৷

ক্লাউড রান দ্বারা ব্যবহার করার জন্য একটি Google ক্লাউড পরিষেবা অ্যাকাউন্ট তৈরি এবং কনফিগার করুন যাতে এটি ক্লাউড SQL এর সাথে সংযোগ করার জন্য সঠিক অনুমতি পায়৷

1. একটি নতুন পরিষেবা অ্যাকাউন্ট তৈরি করতে নিম্নরূপ gcloud iam service-accounts create কমান্ড চালান:

   gcloud iam service-accounts create quickstart-service-account \
     --display-name="Quickstart Service Account"
   

2. আপনি এইমাত্র তৈরি করা Google ক্লাউড পরিষেবা অ্যাকাউন্টে লগ রাইটার ভূমিকা যোগ করতে নিম্নরূপ gcloud প্রজেক্ট অ্যাড-iam-policy-binding কমান্ডটি চালান।

   gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \
     --member="serviceAccount:quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
     --role="roles/logging.logWriter"
   

7. ক্লাউড এসকিউএল ইনস্ট্যান্স তৈরি করুন

1. প্রাইভেট সার্ভিস কানেক্টের মাধ্যমে ক্লাউড রান থেকে ক্লাউড এসকিউএল-এ নেটওয়ার্ক সংযোগের অনুমতি দিতে একটি পরিষেবা সংযোগ নীতি তৈরি করুন

   gcloud network-connectivity service-connection-policies create quickstart-policy \
       --network=default \
       --project=${GOOGLE_CLOUD_PROJECT} \
       --region=us-central1 \
       --service-class=google-cloud-sql \
       --subnets=https://www.googleapis.com/compute/v1/projects/${GOOGLE_CLOUD_PROJECT}/regions/us-central1/subnetworks/default
   

2. আপনার ডাটাবেসের জন্য একটি অনন্য পাসওয়ার্ড তৈরি করুন

   export DB_PASSWORD=$(openssl rand -base64 20)
   

3. একটি ক্লাউড এসকিউএল ইনস্ট্যান্স তৈরি করতে gcloud sql instances create কমান্ডটি চালান

   gcloud sql instances create quickstart-instance \
       --project=${GOOGLE_CLOUD_PROJECT} \
       --root-password=${DB_PASSWORD} \
       --database-version=POSTGRES_17 \
       --tier=db-perf-optimized-N-2 \
       --region=us-central1 \
       --ssl-mode=ENCRYPTED_ONLY \
       --no-assign-ip \
       --enable-private-service-connect \
       --psc-auto-connections=network=projects/${GOOGLE_CLOUD_PROJECT}/global/networks/default
   

এই কমান্ডটি সম্পূর্ণ হতে কয়েক মিনিট সময় লাগতে পারে।

1. quickstart-instance মধ্যে একটি ক্লাউড এসকিউএল ডাটাবেস তৈরি করতে gcloud sql databases create কমান্ডটি চালান।

   gcloud sql databases create quickstart_db \
     --instance=quickstart-instance
   

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

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

1. task-app নামে একটি নতুন Next.js প্রকল্প তৈরি করতে, কমান্ডটি ব্যবহার করুন:

   npx create-next-app@15.0.3 task-app \
     --ts \
     --eslint \
     --tailwind \
     --no-src-dir \
     --turbopack \
     --app \
     --no-import-alias
   

2. create-next-app ইনস্টল করতে বলা হলে, এগিয়ে যেতে Enter টিপুন:

   Need to install the following packages:
   create-next-app@15.0.3
   Ok to proceed? (y)
   

3. task-app ডিরেক্টরি পরিবর্তন করুন:

   cd task-app
   

4. PostgreSQL ডাটাবেসের সাথে ইন্টারঅ্যাক্ট করতে pg ইনস্টল করুন।

   npm install pg
   

5. TypeScript Next.js অ্যাপ্লিকেশন ব্যবহার করার জন্য @types/pg একটি ডেভ ডিপেন্ডেন্সি হিসেবে ইনস্টল করুন।

   npm install --save-dev @types/pg
   

6. actions.ts ফাইল তৈরি করুন।

   touch app/actions.ts
   

7. ক্লাউড শেল এডিটরে actions.ts ফাইলটি খুলুন:

   cloudshell edit app/actions.ts
   

   একটি খালি ফাইল এখন পর্দার উপরের অংশে উপস্থিত হওয়া উচিত। এখানে আপনি এই actions.ts ফাইলটি সম্পাদনা করতে পারেন।
8. নিম্নলিখিত কোডটি অনুলিপি করুন এবং খোলা actions.ts ফাইলে পেস্ট করুন:

   'use server'
   import pg from 'pg';
   
   type Task = {
     id: string;
     title: string;
     status: 'IN_PROGRESS' | 'COMPLETE';
   };
   
   const { Pool } = pg;
   
   const pool = new Pool({
     host: process.env.DB_HOST,
     user: process.env.DB_USER,
     password: process.env.DB_PASSWORD,
     database: process.env.DB_NAME,
     ssl: {
       // @ts-expect-error require true is not recognized by @types/pg, but does exist on pg
       require: true,
       rejectUnauthorized: false, // required for self-signed certs
       // https://node-postgres.com/features/ssl#self-signed-cert
     }
   });
   
   const tableCreationIfDoesNotExist = async () => {
     await pool.query(`CREATE TABLE IF NOT EXISTS visits (
       id SERIAL NOT NULL,
       created_at timestamp NOT NULL,
       PRIMARY KEY (id)
     );`);
     await pool.query(`CREATE TABLE IF NOT EXISTS tasks (
       id SERIAL NOT NULL,
       created_at timestamp NOT NULL,
       status VARCHAR(255) NOT NULL default 'IN_PROGRESS',
       title VARCHAR(1024) NOT NULL,
       PRIMARY KEY (id)
     );`);
   }
   
   // CREATE
   export async function addNewTaskToDatabase(newTask: string) {
     await tableCreationIfDoesNotExist();
     await pool.query(`INSERT INTO tasks(created_at, status, title) VALUES(NOW(), 'IN_PROGRESS', $1)`, [newTask]);
     return;
   }
   
   // READ
   export async function getTasksFromDatabase() {
     await tableCreationIfDoesNotExist();
     const { rows } = await pool.query(`SELECT id, created_at, status, title FROM tasks ORDER BY created_at DESC LIMIT 100`);
     console.table(rows); // logs the last 5 visits on the server
     return rows; // sends the last 5 visits to the client
   }
   
   // UPDATE
   export async function updateTaskInDatabase(task: Task) {
     await tableCreationIfDoesNotExist();
     await pool.query(
       `UPDATE tasks SET status = $1, title = $2 WHERE id = $3`,
       [task.status, task.title, task.id]
     );
     return;
   }
   
   // DELETE
   export async function deleteTaskFromDatabase(taskId: string) {
     await tableCreationIfDoesNotExist();
     await pool.query(`DELETE FROM tasks WHERE id = $1`, [taskId]);
     return;
   }
   

9. ক্লাউড শেল এডিটরে page.tsx ফাইলটি খুলুন:

   cloudshell edit app/page.tsx
   

   একটি বিদ্যমান ফাইল এখন পর্দার উপরের অংশে উপস্থিত হওয়া উচিত। এখানে আপনি এই page.tsx ফাইলটি সম্পাদনা করতে পারেন।
10. page.tsx ফাইলের বিদ্যমান বিষয়বস্তু মুছুন।
11. নিম্নলিখিত কোডটি অনুলিপি করুন এবং খোলা 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';
    };
    
    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 addTask() {
        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}
                        onClick={() => 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"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </main>
      );
    }
    

অ্যাপ্লিকেশন এখন স্থাপন করার জন্য প্রস্তুত.

9. ক্লাউড রানে অ্যাপ্লিকেশনটি স্থাপন করুন

1. আপনি যে ক্লাউড রান পরিষেবাটি তৈরি করতে চলেছেন তার জন্য ক্লাউড রান পরিষেবা অ্যাকাউন্টে নেটওয়ার্ক ব্যবহারকারীর ভূমিকা যুক্ত করতে নিম্নরূপ gcloud প্রকল্পের add-iam-policy-binding কমান্ডটি চালান৷

   gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \
   --member "serviceAccount:service-$(gcloud projects describe ${GOOGLE_CLOUD_PROJECT} --format="value(projectNumber)")@serverless-robot-prod.iam.gserviceaccount.com" \
   --role "roles/compute.networkUser"
   

1. ক্লাউড রানে আপনার অ্যাপ্লিকেশন স্থাপন করতে নীচের কমান্ডটি চালান:

   gcloud run deploy helloworld \
     --region=us-central1 \
     --source=. \
     --set-env-vars DB_NAME="quickstart_db" \
     --set-env-vars DB_USER="postgres" \
     --set-env-vars DB_PASSWORD=${DB_PASSWORD} \
     --set-env-vars DB_HOST="$(gcloud sql instances describe quickstart-instance --project=${GOOGLE_CLOUD_PROJECT} --format='value(settings.ipConfiguration.pscConfig.pscAutoConnections.ipAddress)')" \
     --service-account="quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
     --network=default \
     --subnet=default \
     --allow-unauthenticated
   

2. অনুরোধ করা হলে, আপনি চালিয়ে যেতে চান তা নিশ্চিত করতে Y এবং Enter টিপুন:

   Do you want to continue (Y/n)? Y
   

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

আপনার অ্যাপ্লিকেশানটি কার্যকর দেখতে URL এ নেভিগেট করুন৷ যতবার আপনি URL পরিদর্শন করবেন বা পৃষ্ঠা রিফ্রেশ করবেন, আপনি টাস্ক অ্যাপটি দেখতে পাবেন।

10. জেমিনি কোড অ্যাসিস্টের সাথে একটি বৈশিষ্ট্য যুক্ত করুন৷

এখন আপনি একটি ডাটাবেস সহ একটি ওয়েব অ্যাপ স্থাপন করেছেন৷ এরপর, আমরা AI সহায়তার শক্তি ব্যবহার করে আমাদের next.js অ্যাপে একটি নতুন বৈশিষ্ট্য যোগ করতে যাচ্ছি।

1. ক্লাউড শেল এডিটরে ফিরে যান
2. আবার page.tsx খুলুন

   cd ~/task-app
   cloudshell edit app/page.tsx
   

3. ক্লাউড শেল এডিটরের মধ্যে জেমিনি কোড অ্যাসিস্টে নেভিগেট করুন:
   • মিথুন আইকনে ক্লিক করুন স্ক্রিনের বাম দিকে টুলবারে
   • অনুরোধ করা হলে, আপনার Google অ্যাকাউন্টের শংসাপত্র দিয়ে সাইন ইন করুন
   • একটি প্রকল্প নির্বাচন করার জন্য অনুরোধ করা হলে, এই কোডল্যাবের জন্য আপনার তৈরি করা প্রকল্পটি নির্বাচন করুন
4. প্রম্পট লিখুন: Add the ability to update the title of the task. The code in your output should be complete and working code. . একটি handleEditStart এবং handleEditCancel ফাংশন যোগ করতে প্রতিক্রিয়াটিতে এই স্নিপেটের মতো কিছু অন্তর্ভুক্ত করা উচিত:

   const [editingTaskId, setEditingTaskId] = useState<string>('');
   const [editedTaskTitle, setEditedTaskTitle] = useState('');
   
   const handleEditStart = (task: Task) => {
     setEditingTaskId(task.id);
     setEditedTaskTitle(task.title);
   };
   
   const handleEditCancel = () => {
     setEditingTaskId('');
     setEditedTaskTitle('');
   };
   

   <td className="py-2 px-4">
     {editingTaskId === task.id ? (
       <form onSubmit={(e) => {
         e.preventDefault();
         updateTask(task, { title: editedTaskTitle });
       }}>
         <input
           type="text"
           value={editedTaskTitle}
           onChange={(e) => setEditedTaskTitle(e.target.value)}
           onBlur={() => handleEditCancel} // Handle clicking outside input
           className="border border-gray-400 rounded px-3 py-1 mr-2"
         />
           <button type="submit" className="text-green-600 hover:text-green-900 mr-1">Save</button>
       </form>
   
     ) : (
       <span onClick={() => handleEditStart(task)} className="cursor-pointer">
         {task.title}
       </span>
     )}
   </td>
   

5. জেমিনি কোড অ্যাসিস্টের আউটপুট দিয়ে 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';
   };
   
   export default function Home() {
     const [newTaskTitle, setNewTaskTitle] = useState('');
     const [tasks, setTasks] = useState<Task[]>([]);
     const [editingTaskId, setEditingTaskId] = useState<string>('');
     const [editedTaskTitle, setEditedTaskTitle] = useState('');
   
     async function getTasks() {
       const updatedListOfTasks = await getTasksFromDatabase();
       setTasks(updatedListOfTasks);
     }
   
     useEffect(() => {
       getTasks();
     }, []);
   
     async function addTask() {
       await addNewTaskToDatabase(newTaskTitle);
       await getTasks();
       setNewTaskTitle('');
     }
   
     async function updateTask(task: Task, newTaskValues: Partial<Task>) {
       await updateTaskInDatabase({ ...task, ...newTaskValues });
       await getTasks();
       setEditingTaskId(''); // Clear editing state after update
       setEditedTaskTitle('');
     }
   
     async function deleteTask(taskId: string) {
       await deleteTaskFromDatabase(taskId);
       await getTasks();
     }
   
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       addTask();
     };
   
   
     const handleEditStart = (task: Task) => {
       setEditingTaskId(task.id);
       setEditedTaskTitle(task.title);
     };
   
     const handleEditCancel = () => {
       setEditingTaskId('');
       setEditedTaskTitle('');
     };
   
     return (
       <main className="p-4">
         <h2 className="text-2xl font-bold mb-4">To Do List</h2>
         <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>
         <table className="w-full">
           <tbody>
             {tasks.map(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}
                       onClick={() => 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">
                     {editingTaskId === task.id ? (
                       <form 
                         onSubmit={(e) => {
                           e.preventDefault();
                           updateTask(task, { title: editedTaskTitle });
                         }}
                         className="flex"
                       >
                         <input
                           type="text"
                           value={editedTaskTitle}
                           onChange={(e) => setEditedTaskTitle(e.target.value)}
                           onBlur={() => handleEditCancel()} // Handle clicking outside input
                           className="flex-grow border border-gray-400 rounded px-3 py-1 mr-2 bg-inherit"
                         />
                         <button
                           type="submit"
                           className="bg-green-600 hover:bg-green-900 m-1 text-white font-bold py-2 px-4 rounded"
                         >
                           Save
                         </button>
                       </form>
                     ) : (
                       <span
                         onClick={() => handleEditStart(task)}
                         className={`transition-all duration-300 ease-in-out cursor-pointer ${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>
     );
   }
   

11. ক্লাউড রানে অ্যাপ্লিকেশনটি পুনরায় স্থাপন করুন

1. ক্লাউড রানে আপনার অ্যাপ্লিকেশন স্থাপন করতে নীচের কমান্ডটি চালান:

   gcloud run deploy helloworld \
     --region=us-central1 \
     --source=. \
     --set-env-vars DB_NAME="quickstart_db" \
     --set-env-vars DB_USER="postgres" \
     --set-env-vars DB_PASSWORD=${DB_PASSWORD} \
     --set-env-vars DB_HOST="$(gcloud sql instances describe quickstart-instance --project=${GOOGLE_CLOUD_PROJECT} --format='value(settings.ipConfiguration.pscConfig.pscAutoConnections.ipAddress)')" \
     --service-account="quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
     --network=default \
     --subnet=default \
     --allow-unauthenticated
   

2. অনুরোধ করা হলে, আপনি চালিয়ে যেতে চান তা নিশ্চিত করতে Y এবং Enter টিপুন:

   Do you want to continue (Y/n)? Y
   

12. অভিনন্দন

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

• PostgreSQL উদাহরণের জন্য একটি ক্লাউড SQL তৈরি করুন ( ব্যক্তিগত পরিষেবা সংযোগ ব্যবহার করার জন্য কনফিগার করা হয়েছে)
• ক্লাউড রানে একটি অ্যাপ্লিকেশন স্থাপন করুন যা আপনার ক্লাউড SQL ডাটাবেসের সাথে সংযোগ করে
• আপনার অ্যাপ্লিকেশনে কার্যকারিতা যোগ করতে জেমিনি কোড সহায়তা ব্যবহার করুন

পরিষ্কার করুন

ক্লাউড এসকিউএল-এর একটি বিনামূল্যের স্তর নেই এবং আপনি এটি ব্যবহার করা চালিয়ে গেলে আপনাকে চার্জ করবে। অতিরিক্ত চার্জ এড়াতে আপনি আপনার ক্লাউড প্রকল্প মুছে ফেলতে পারেন।

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

আপনি যদি চান, প্রকল্প মুছে ফেলুন:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

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

1. কোডল্যাব প্রকল্প ডিরেক্টরি মুছুন:

   rm -rf ~/task-app
   

2. সতর্কতা ! এই পরবর্তী ক্রিয়াটি পূর্বাবস্থায় ফেরানো যাবে না! আপনি যদি স্থান খালি করতে আপনার ক্লাউড শেলের সবকিছু মুছতে চান, তাহলে আপনি আপনার পুরো হোম ডিরেক্টরি মুছে ফেলতে পারেন। সতর্ক থাকুন যে আপনি যা কিছু রাখতে চান তা অন্য কোথাও সংরক্ষণ করা হয়।

   sudo rm -rf $HOME