Topics

Kakeru-san, Hasshi-san y otros están usando Supabase para realizar desarrollos interesantes. A diferencia del desarrollo en cascada que hemos visto hasta ahora, oigo un montón de cosas sobre la definición de requisitos funcionales desde la interfaz de usuario, ¡pero no puedo quedarme atrás!

Entonces, esta vez crearé una aplicación de notas simple y resumiré los pasos para conectar Supabase y Prisma y guardar los datos en una base de datos como una nota.Gemini CLI¡Yo también lo usaré!

Entorno: Next.js

No utilizaremos la autenticación, el tiempo real ni el RLS de Supabase, sino Prisima para acceder a las funciones de la base de datos desde la API. Dado que las tablas de la base de datos pueden tratarse como objetos Javascript/Typescript, pensamos que sería fácil para los ingenieros front-end escribir código que les resulte familiar.

Prisma

Prisma ORM es una biblioteca ORM (Object-Relational Mapping) que se puede utilizar con TypeScript y JavaScript.

En pocas palabras, es una herramienta que permite operar una base de datos sin escribir SQL utilizando métodos definidos en objetos de un lenguaje de programación.

Además, Prisma genera automáticamente tipos a partir del esquema de la base de datos, por lo que si intenta manipular una columna que no existe en la base de datos o datos del tipo incorrecto, recibirá una notificación mediante un error de compilación.

Supabase

Supabase es un servicio backend full-stack que está ganando terreno como alternativa de código abierto a Firebase.

• Altamente escalable y confiable, basado en la base de datos PostgreSQL
• La funcionalidad de base de datos en tiempo real le notifica automáticamente los cambios de datos
• Admite múltiples métodos de autenticación (correo electrónico/contraseña, inicio de sesión social, autenticación telefónica, etc.)
• Función de almacenamiento de archivos para una gestión eficiente de archivos grandes
• Desarrollo rápido con generación automatizada de API RESTful y GraphQL
• Las amplias herramientas para desarrolladores y los SDK facilitan la configuración y la implementación

Quiero enfatizar los pasos para conectarse a Supabase,Gemini CLI¡Este producto es tan práctico que te hará llorar! ¡Me alegra mucho que mi empresa use Google Workspace!

Quiero crear una función de memo con Supabase y Prisma. Primero, crea page.tsx.

Bien, entonces, quiero configurarlo para que cuando presione el botón Guardar nota, el contenido que ingresé en el área de texto se agregue a la lista en Sus notas.

¡Parece así y está bien! El contenido que ingreses se agregará a la lista de abajo. Sin embargo, como se trata solo de un evento de JavaScript, la lista desaparecerá al recargar.

¡Usamos una base de datos para almacenar tus aportaciones!

Primero, crea un nuevo proyecto en el lado de Supabase.

Cree un nuevo proyecto con el botón "Nuevo proyecto". Anote la contraseña de la base de datos, ya que la necesitará para conectarse a Prisma.

A continuación, conecta Prisma.

npm install prisma --save-dev

npx prisma init

Al ingresar estos comandos se instalará Prisma y se creará una carpeta Prisma.

Reemplace DATABASE_URL en el archivo .env con la URL de conexión de Supabase. Reemplace [YOUR-PASSWORD] con la contraseña de la base de datos que configuró en Supabase.

DATABASE_URL="postgresql://postgres.odoaingwnxkhkeujwhtp:[YOUR-PASSWORD]@aws-1-ap-northeast-1.pooler.supabase.com:5432/postgres"

Entonces/prisma/schema.prismaEl esquema (definición de la estructura de la base de datos) está escrito en .

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Memo {
  id        Int      @id @default(autoincrement())
  content   String
  createdAt DateTime @default(now())
}

El modelo ○○ se puede nombrar como desees.

Una vez que haya escrito el esquema, puede migrarlo.

npx prisma migrate dev --name init

Se generará un archivo migration.sql y se crearán tablas de datos en el lado de Supabase.

Creación de una API para conectarse a Supabase

Cree una API de conexión para guardar los valores ingresados ​​​​en Supabase.

Instale Prisma Client en su proyecto.

npm install @prisma/client

Conectarse a Supabase

/libs/prisma.ts

import { PrismaClient } from "@prisma/client"; 

const Prisma = new PrismaClient(); //インスタンス化

export const main = async () => {
  try {
    await Prisma.$connect();
  } catch (error) {
    return Error("DB接続に失敗しました");
  }
};

API

/api/memos/route.ts

import { NextResponse } from "next/server";
import { prisma } from '@/lib/prisma';

export const GET = async (req: Request, res: NextResponse) => {
  try {
    await main();             
    const memos = await Prisma.memo.findMany(); 
    return NextResponse.json(memos);
  } catch (error) {
    return NextResponse.json("エラーが発生しました");
  } finally {  
    await Prisma.$disconnect();
  }
};

export const POST = async (req: Request, res: NextResponse) => {
  const { content } = await req.json(); 
  try {
    await main();
    const memos = await Prisma.memo.**create**({
      data: {
        content: content,
      },
    });
    return NextResponse.json(memos);
  } catch (error) {
    return NextResponse.json("エラーが発生しました");
  } finally {
    await Prisma.$disconnect();
  }
};

La función GET es una API que recupera todos los registros de la base de datos, y el método findMany() recupera todos los registros que coinciden con las condiciones. "memo" en Prisma.memo.findMany() es el nombre del esquema.

La función POST es una API que agrega datos a la base de datos y se crea utilizando create().

También existen otros métodos como eliminar y actualizar, por lo que incluso si no puedes escribir sentencias SQL, puedes operar de la misma manera que Javascript.

Aquí tenemos todo preparado.

Todo lo que tienes que hacer es traer la API que escribiste anteriormente a page.tsx e incorporarla.

'use client';

import React, { useState, useEffect } from 'react';

interface Memo {
  id: number;
  content: string;
  createdAt: string;
}

export default function MemoApp() {
  const [memos, setMemos] = useState<Memo[]>([]);
  const [newMemo, setNewMemo] = useState('');

  const fetchMemos = async () => {
    const response = await fetch('/api/memos');
    const data = await response.json();
    setMemos(data);
  };

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

  const handleSaveMemo = async (e: React.FormEvent) => {
    e.preventDefault();
    if (newMemo.trim() !== '') {
      await fetch('/api/memos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ content: newMemo }),
      });
      setNewMemo('');
      fetchMemos();
    }
  };

  return (
    <div className="bg-white min-h-screen">
      <div className="max-w-2xl mx-auto px-4 py-16">
        <header className="text-center mb-12">
          <h1 className="text-5xl font-extrabold text-gray-900">Memo</h1>
        </header>

        <main>
          <div className="mb-12">
            <form onSubmit={handleSaveMemo}>
              <textarea
                className="w-full p-4 text-gray-800 bg-gray-100 rounded-lg border-2 border-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition"
                placeholder="Create a new memo..."
                rows={3}
                value={newMemo}
                onChange={(e) => setNewMemo(e.target.value)}
              ></textarea>
              <div className="flex justify-end mt-4">
                <button
                  type="submit"
                  className="px-6 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-900 transition"
                >
                  Save Memo
                </button>
              </div>
            </form>
          </div>

          <section>
            <h2 className="text-3xl font-bold text-gray-800 mb-6">Your Memos</h2>
            <div className="space-y-4">
              {memos.length > 0 ? (
                memos.map((memo) => (
                  <div key={memo.id} className="bg-gray-50 p-6 rounded-lg shadow-sm">
                    <p className="text-gray-700">{memo.content}</p>
                  </div>
                ))
              ) : (
                <div className="text-center text-gray-500">
                  <p>No memos yet. Add one above!</p>
                </div>
              )}
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}

¡Está guardado en el lado de Supabase!

Esta vez, confié en Gemini para crear un esquema aproximado, pero si pudiera usar una base de datos para guardar valores, ¡la gama de funciones y aplicaciones que podría crear sería más amplia!

Tenía una idea preconcebida de que el backend sería difícil, pero poder administrar la base de datos con una herramienta GUI fue fácil de entender y redujo la barrera para la integración de la base de datos.

¡Hurra!