Shō und Hasshi arbeiten mit Supabase an interessanten Entwicklungsprojekten. Im Gegensatz zur bisherigen Wasserfall-Entwicklung höre ich allerlei von Anforderungsdefinitionen ausgehend vom UI – da kann ich nicht nachstehen!
Diesmal erstelle ich eine einfache Notiz-App und dokumentiere die Schritte, wie man Supabase und Prisma miteinander verbindet, um Daten in der Datenbank zu speichern. Und ich nutze auch Gemini CLI!
Umgebung: Next.js
Wir nutzen nicht die Auth-, Realtime- und RLS-Funktionen von Supabase, sondern verwenden Prisma, um über API auf Datenbankfunktionen zuzugreifen. Da Datenbanktabellen wie JavaScript-/TypeScript-Objekte behandelt werden können, sollte die Syntax für Frontend-Ingenieure vertraut sein.
Prisma
Prisma ORM ist eine ORM-Bibliothek (Object-Relational Mapping), die mit TypeScript und JavaScript verwendet werden kann.
Einfach gesagt: Ein Werkzeug, mit dem Sie Datenbankoperationen durch Methoden ausführen können, die in Objekten einer Programmiersprache definiert sind – ohne SQL schreiben zu müssen.
Darüber hinaus generiert Prisma automatisch Typen aus dem Datenbankschema, sodass Sie sofort einen Compilerfehler erhalten, wenn Sie versuchen, auf Spalten zuzugreifen, die nicht existieren, oder Daten mit falschen Typen zu verwenden!
Supabase
Supabase ist ein vollständiger Backend-Service, der als Open-Source-Alternative zu Firebase an Bedeutung gewinnt.
- Hohe Skalierbarkeit und Zuverlässigkeit auf PostgreSQL-Datenbankbasis
- Automatische Benachrichtigungen bei Datenänderungen mit Echtzeit-Datenbankfunktion
- Unterstützung verschiedener Authentifizierungsmethoden (E-Mail/Passwort, Social Login, Telefonauthentifizierung usw.)
- Verwalten Sie große Dateien effizient mit der Dateispeicher-Funktion
- Schnelle Entwicklung durch automatische Generierung von RESTful API und GraphQL API
- Umfangreiche Developer-Tools und SDK, einfache Konfiguration und Integration
Da die Integrationsschritte mit Supabase wichtig sind, lassen wir uns Gemini CLI die Oberflächendesign erstellen. Das ist wieder ein unglaublich praktisches Tool! Es war ein Glück, dass das Unternehmen Google Workspace nutzt!
Ich möchte mit Supabase und Prisma eine Notizfunktion erstellen. Bitte erstellen Sie zunächst eine page.tsx.
Okay, also wünscht du, dass der eingegebene Text aus dem textarea nach Klick auf den "Save Memo"-Button als Liste in "Your Memos" hinzugefügt wird?
Das Aussehen sieht so in Ordnung aus! Der eingegebene Inhalt wird nun zur Liste unten hinzugefügt. Allerdings funktioniert dies nur mit JavaScript-Ereignissen, daher verschwindet die Liste beim Neuladen der Seite.
Wir verwenden eine Datenbank, um die eingegebenen Inhalte zu speichern!
Zuerst erstellen Sie ein neues Projekt auf der Supabase-Seite.
Erstellen Sie ein neues Projekt über die Schaltfläche „New Project". Das Database-Passwort ist erforderlich, um die Verbindung mit Prisma herzustellen. Notieren Sie es sich daher.
Als Nächstes integrieren wir Prisma.
npm install prisma --save-dev
npx prisma init
Wenn Sie diese Befehle eingeben, wird prisma installiert und der prisma-Ordner wird angezeigt.
Ersetzen Sie die DATABASE_URL in der .env-Datei durch die Verbindungs-URL von Supabase. Ersetzen Sie den Platzhalter [YOUR-PASSWORD] mit dem Datenbankpasswort, das Sie zuvor in Supabase eingestellt haben.
DATABASE_URL="postgresql://postgres.odoaingwnxkhkeujwhtp:[YOUR-PASSWORD]@aws-1-ap-northeast-1.pooler.supabase.com:5432/postgres"
Danach schreiben Sie das Schema (die Strukturdefinition der Datenbank) in /prisma/schema.prisma.
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())
}
Das Modell ○○ kann beliebig benannt werden.
Nachdem Sie das Schema geschrieben haben, führen Sie die Migration durch.
npx prisma migrate dev --name init
Die migration.sql-Datei wird generiert und die Datentabelle wird auf der Supabase-Seite erstellt.
API-Erstellung für die Verbindung mit Supabase
Um die eingegebenen Werte in Supabase zu speichern, erstellen Sie eine API für die Verbindung.
Installieren Sie Prisma Client in Ihrem Projekt.
npm install @prisma/client
Verbindung mit 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();
}
};
Die GET-Funktion ist eine API, die alle Datensätze aus der Datenbank abruft und mit der Methode findMany() alle Datensätze abruft, die den Bedingungen entsprechen. Das "memo" in Prisma.memo.findMany() ist der Schemaname.
Die POST-Funktion ist eine API zum Hinzufügen zur Datenbank und wird mit create() erstellt.
Es gibt auch andere Methoden wie das Löschen und Aktualisieren, und Sie können sie mit JavaScript-Logik verwenden, ohne SQL-Anweisungen schreiben zu müssen.
Damit ist die Vorbereitung abgeschlossen.
Danach können Sie die zuvor geschriebene API in page.tsx einbinden und fertig sind Sie.
'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 wird auf der Supabase-Seite gespeichert!
Dieses Mal habe ich mich auf Gemini verlassen und es grob erstellt, aber wenn ich eine Datenbank nutze, um Werte zu speichern, können die Funktionen und Apps, die ich erstelle, viel vielfältiger werden!
Ich hatte den Eindruck, dass Backend irgendwie schwierig aussieht, aber mit GUI-Tools kann ich die Datenbank verwalten und es ist verständlich — die Hürde für die Datenbankintegration ist gesunken!
Geschafft!
Ich konzentriere mich auf Markup und entwickle Frontends mit JavaScript, React und Next.js. Es freut mich immer, wenn die Websites, an denen ich mitgearbeitet habe, erfolgreich veröffentlicht werden! Mein Hobby ist Gitarrespielen. Ich mag Katzen und gebackene Süßkartoffeln 🐱🍠
Hiraicchi
Frontend-Engineer / Eintritt 2022