Topics

Kakeru-san, Hasshi-san und andere nutzen Supabase für interessante Entwicklungen. Anders als bei der bisherigen Wasserfall-Entwicklung höre ich hier viel über die Definition funktionaler Anforderungen aus der Benutzeroberfläche, aber ich lasse mich nicht übertrumpfen!

Daher werde ich dieses Mal eine einfache Memo-App erstellen und die Schritte zum Verbinden von Supabase und Prisma und zum Speichern der Daten in einer Datenbank als Memo zusammenfassen.Gemini CLIIch werde es auch verwenden!

Umgebung: Next.js

Wir werden weder Supabases Auth, Realtime noch RLS verwenden, sondern Prisma, um über die API auf Datenbankfunktionen zuzugreifen. Da Datenbanktabellen wie Javascript/Typescript-Objekte behandelt werden können, dachten wir, dass es für Front-End-Entwickler einfach sein würde, ihnen vertrauten Code zu schreiben.

Prisma

Prisma ORM ist eine ORM-Bibliothek (Object-Relational Mapping), die mit TypeScript und JavaScript verwendet werden kann.

Einfach ausgedrückt handelt es sich um ein Tool, mit dem Sie eine Datenbank betreiben können, ohne SQL schreiben zu müssen, indem Sie Methoden verwenden, die in Objekten einer Programmiersprache definiert sind.

Darüber hinaus generiert Prisma automatisch Typen aus dem Datenbankschema. Wenn Sie also versuchen, eine Spalte zu manipulieren, die in der Datenbank nicht vorhanden ist, oder Daten des falschen Typs, werden Sie durch einen Kompilierungsfehler benachrichtigt!

Supabase

Supabase ist ein Full-Stack-Backend-Dienst, der als Open-Source-Alternative zu Firebase an Bedeutung gewinnt.

• Hoch skalierbar und zuverlässig basierend auf der PostgreSQL-Datenbank
• Echtzeit-Datenbankfunktionalität benachrichtigt Sie automatisch über Datenänderungen
• Unterstützt mehrere Authentifizierungsmethoden (E-Mail/Passwort, Social Login, Telefonauthentifizierung usw.)
• Dateispeicherfunktion zur effizienten Verwaltung großer Dateien
• Schnelle Entwicklung mit automatisierter Generierung von RESTful- und GraphQL-APIs
• Umfangreiche Entwicklertools und SDKs vereinfachen die Einrichtung und Bereitstellung

Ich möchte die Schritte zur Verbindung mit Supabase hervorheben,Gemini CLIDies ist ein sehr praktisches Produkt, das Sie zum Weinen bringen wird! Ich bin so froh, dass mein Unternehmen Google Workspace verwendet!

Ich möchte eine Memofunktion mit Supabase und Prisma erstellen. Erstellen Sie zunächst page.tsx.

Okay, dann möchte ich es so einrichten, dass, wenn ich auf die Schaltfläche „Memo speichern“ klicke, der Inhalt, den ich in das Textfeld eingegeben habe, der Liste in „Ihre Memos“ hinzugefügt wird.

Es sieht so aus und ist OK! Der von Ihnen eingegebene Inhalt wird nun der Liste unten hinzugefügt. Da es sich jedoch nur um ein JavaScript-Ereignis handelt, verschwindet die Liste beim Neuladen.

Zur Speicherung Ihrer Eingaben verwenden wir eine Datenbank!

Erstellen Sie zunächst ein neues Projekt auf der Supabase-Seite.

Erstellen Sie über die Schaltfläche „Neues Projekt“ ein neues Projekt. Notieren Sie sich das Datenbankpasswort, da Sie es für die Verbindung mit Prisma benötigen.

Als nächstes verbinden Sie Prisma.

npm install prisma --save-dev

npx prisma init

Durch Eingabe dieser Befehle wird Prisma installiert und ein Prisma-Ordner erstellt.

Ersetzen Sie die DATABASE_URL in der .env-Datei durch die Supabase-Verbindungs-URL. Ersetzen Sie [IHR PASSWORT] durch das Datenbankpasswort, das Sie in Supabase festgelegt haben.

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

Dann/prisma/schema.prismaDas Schema (Datenbankstrukturdefinition) ist in geschrieben.

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())
}

Modell ○○ kann beliebig benannt werden.

Sobald Sie das Schema geschrieben haben, können Sie es migrieren.

npx prisma migrate dev --name init

Es wird eine migration.sql-Datei generiert und auf der Supabase-Seite werden Datentabellen erstellt.

Erstellen einer API zur Verbindung mit Supabase

Erstellen Sie eine Verbindungs-API, um die eingegebenen Werte in Supabase zu speichern.

Installieren Sie Prisma Client in Ihrem Projekt.

npm install @prisma/client

Verbindung zu Supabase herstellen

/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();
  }
};

Die GET-Funktion ist eine API, die alle Datensätze aus der Datenbank abruft, und die Methode findMany() ruft alle Datensätze ab, die den Bedingungen entsprechen. „memo“ in Prisma.memo.findMany() ist der Schemaname.

Die POST-Funktion ist eine API, die Daten zur Datenbank hinzufügt und mit create() erstellt wird.

Es gibt auch andere Methoden wie Löschen und Aktualisieren. Selbst wenn Sie keine SQL-Anweisungen schreiben können, können Sie es auf die gleiche Weise wie Javascript ausführen.

Hier, wir haben alles bereit.

Sie müssen lediglich die zuvor geschriebene API in page.tsx einfügen und integrieren.

'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>
  );
}

Es ist auf der Supabase-Seite gespeichert!

Dieses Mal habe ich mich auf Gemini verlassen, um eine grobe Gliederung zu erstellen. Wenn ich jedoch eine Datenbank zum Speichern von Werten verwenden könnte, wäre die Palette der Funktionen und Apps, die ich erstellen könnte, größer!

Ich hatte die vorgefasste Meinung, dass das Backend schwierig sein würde, aber die Möglichkeit, die Datenbank mit einem GUI-Tool zu verwalten, war leicht verständlich und senkte die Hürde für die Datenbankintegration!

Juhu!