Shô et Hasshî travaillent sur des projets de développement intéressants avec Supabase. Contrairement aux approches de développement en cascade traditionnelles, on entend parler de définition des exigences fonctionnelles basée sur l'UI, et je ne peux pas rester à la traîne !
Donc cette fois-ci, je vais créer une simple application de prise de notes et documenter le processus d'intégration de Supabase et Prisma pour enregistrer les données dans la base de données. On utilise aussi Gemini CLI !
Environnement : Next.js
Nous avons adopté Prisma pour accéder aux fonctionnalités de base de données via l'API, sans utiliser l'authentification Supabase, Realtime ou RLS. Prisma permet de gérer les tables de bases de données comme des objets JavaScript/TypeScript, ce qui devrait être une approche familière pour les développeurs frontend.
Prisma
Prisma ORM est une bibliothèque ORM (Object-Relational Mapping) utilisable avec TypeScript et JavaScript.
En résumé, c'est un outil qui permet de manipuler une base de données en utilisant des méthodes définies comme des objets dans un langage de programmation, sans avoir à écrire de SQL.
De plus, Prisma génère automatiquement les types à partir du schéma de la base de données, ce qui permet de détecter les colonnes inexistantes ou les données de types incorrects au moment de la compilation !
Supabase
Supabase est un service backend full-stack open source qui a attiré l'attention en tant qu'alternative à Firebase.
- Extensibilité et fiabilité élevées basées sur la base de données PostgreSQL
- Notifications automatiques des modifications de données via la fonctionnalité de base de données en temps réel
- Support de multiples méthodes d'authentification (email/mot de passe, connexion sociale, authentification par téléphone, etc.)
- Gestion efficace des fichiers volumineux grâce à la fonctionnalité de stockage de fichiers
- Développement rapide grâce à la génération automatique d'API RESTful et GraphQL
- Outils et SDK riches pour les développeurs avec configuration et intégration faciles
Je veux prioriser la procédure d'intégration avec Supabase, donc je vais demander à Gemini CLI de créer la partie visuelle. C'est un outil incroyablement pratique ! J'ai été heureux que notre entreprise utilise Google Workspace !
Je veux créer une fonctionnalité de mémo avec Supabase et Prisma. Veuillez d'abord créer le fichier page.tsx.
D'accord, donc je veux que vous le configuriez pour que lorsque vous appuyez sur le bouton Save Memo, le contenu saisi dans la zone de texte soit ajouté à une liste dans Your Memos.
L'apparence ressemble à ceci, c'est bon ! Le contenu saisi s'ajoute à la liste ci-dessous. Cependant, comme c'est juste un événement JavaScript, la liste disparaît au rechargement.
Pour conserver le contenu saisi, nous utilisons une base de données !
Commencez par créer un nouveau projet côté Supabase.
Créez-le via le bouton « New Project » et conservez le Database password, car il sera nécessaire pour la connexion avec Prisma.
Ensuite, intégrez Prisma.
npm install prisma --save-dev
npx prisma init
Après avoir entré ces commandes, Prisma est installé et le dossier prisma apparaît.
Remplacez DATABASE_URL dans le fichier .env par l'URL de connexion de Supabase. Appliquez le Database password que vous avez défini dans Supabase à la partie [YOUR-PASSWORD].
DATABASE_URL="postgresql://postgres.odoaingwnxkhkeujwhtp:[YOUR-PASSWORD]@aws-1-ap-northeast-1.pooler.supabase.com:5432/postgres"
Ensuite, décrivez le schéma (la structure de définition de la base de données) dans /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())
}
Le modèle ○○ peut être nommé à volonté.
Une fois le schéma écrit, effectuez la migration.
npx prisma migrate dev --name init
Un fichier migration.sql est généré et les tableaux de données sont créés côté Supabase.
Créer une API pour se connecter à Supabase
Créez une API de connexion pour enregistrer les valeurs saisies dans Supabase.
Installez Prisma Client dans le projet.
npm install @prisma/client
Connexion à 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 fonction GET est une API qui récupère tous les enregistrements de la base de données et utilise la méthode findMany() pour récupérer tous les enregistrements correspondant aux conditions. Le « memo » dans Prisma.memo.findMany() est le nom du schéma.
La fonction POST est une API qui ajoute des données à la base de données et les crée avec create().
Il existe également d'autres méthodes pour supprimer ou mettre à jour, et vous pouvez les utiliser avec la logique JavaScript sans avoir à écrire de requêtes SQL.
Tous les préparatifs sont maintenant terminés.
Il ne reste plus qu'à récupérer l'API écrite précédemment dans page.tsx et à l'intégrer.
'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>
);
}
C'est sauvegardé du côté de Supabase !
Cette fois, j'ai compté sur Gemini pour créer une version sommaire, mais en utilisant la base de données pour sauvegarder les valeurs, on pourrait vraiment élargir la gamme des fonctionnalités et des applications qu'on crée !
Je pensais que le backend semblait difficile… mais avec un outil GUI pour gérer la base de données, c'est beaucoup plus clair et les barrières à l'intégration de bases de données ont vraiment baissé !
Youpi !
Je me concentre principalement sur le balisage, et je développe le frontend en utilisant JavaScript, React et Next.js. Je suis toujours ravi quand un site auquel j'ai participé est lancé avec succès ! Mon hobby est de jouer de la guitare. J'aime les chats et les patates douces🐱🍠
Hira
Ingénieur frontend / Embauché en 2022