Topics

Kakeru, Hasshi-san et d'autres utilisent Supabase pour des développements intéressants. Contrairement au développement en cascade que nous avons vu jusqu'à présent, j'entends parler de la définition des exigences fonctionnelles depuis l'interface utilisateur, mais je ne veux pas me laisser distancer !

Cette fois-ci, je vais donc créer une application de notes simple et résumer les étapes pour connecter Supabase et Prisma et enregistrer les données dans une base de données sous forme de note.Gemini CLIJe l'utiliserai aussi !

Environnement : Next.js

Nous n'utiliserons pas les modules Auth, Realtime ni RLS de Supabase, mais Prisima pour accéder aux fonctions de la base de données via l'API. Les tables de la base de données étant manipulables comme des objets JavaScript/TypeScript, nous avons pensé qu'il serait facile pour les développeurs front-end d'écrire un code qui leur est familier.

Prisma

Prisma ORM est une bibliothèque ORM (Object-Relational Mapping) qui peut être utilisée avec TypeScript et JavaScript.

En termes simples, c'est un outil qui permet de gérer une base de données sans écrire de code SQL, en utilisant des méthodes définies dans des objets d'un langage de programmation.

De plus, Prisma génère automatiquement les types à partir du schéma de la base de données ; par conséquent, si vous essayez de manipuler une colonne qui n’existe pas dans la base de données ou des données de type incorrect, vous serez averti par une erreur de compilation !

Supabase

Supabase est un service backend complet qui gagne en popularité en tant qu'alternative open source à Firebase.

• Hautement évolutif et fiable, basé sur la base de données PostgreSQL
• La fonctionnalité de base de données en temps réel vous notifie automatiquement des modifications de données.
• Prend en charge plusieurs méthodes d'authentification (courriel/mot de passe, connexion via les réseaux sociaux, authentification par téléphone, etc.).
• Fonction de stockage de fichiers pour une gestion efficace des fichiers volumineux
• Développement rapide grâce à la génération automatisée d'API RESTful et GraphQL
• Des outils de développement et des kits de développement logiciel (SDK) complets facilitent l'installation et le déploiement.

Je tiens à souligner les étapes à suivre pour se connecter à Supabase,Gemini CLICe produit est tellement pratique qu'il vous fera pleurer de joie ! Je suis ravi que mon entreprise utilise Google Workspace !

Je souhaite créer une fonction de mémo à l'aide de Supabase et Prisma. Commencez par créer le fichier page.tsx.

Très bien, je souhaite donc configurer le système pour que, lorsque j'appuie sur le bouton « Enregistrer le mémo », le contenu que j'ai saisi dans la zone de texte soit ajouté à la liste « Vos mémos ».

Voici à quoi cela ressemble, et c'est normal ! Le contenu que vous saisissez sera ajouté à la liste ci-dessous. Cependant, comme il s'agit d'un événement JavaScript, la liste disparaîtra si vous rechargez la page.

Nous utilisons une base de données pour stocker vos informations !

Commencez par créer un nouveau projet du côté de Supabase.

Créez un nouveau projet à l'aide du bouton « Nouveau projet ». Veuillez noter le mot de passe de la base de données, car vous en aurez besoin pour vous connecter à Prisma.

Ensuite, connectez Prisma.

npm install prisma --save-dev

npx prisma init

La saisie de ces commandes installera Prisma et créera un dossier Prisma.

Remplacez DATABASE_URL dans le fichier .env par l'URL de connexion à Supabase. Remplacez [YOUR-PASSWORD] par le mot de passe de votre base de données Supabase.

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

Alors/prisma/schema.prismaLe schéma (définition de la structure de la base de données) est écrit 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())
}

Le modèle ○○ peut être nommé comme vous le souhaitez.

Une fois le schéma rédigé, vous pouvez le migrer.

npx prisma migrate dev --name init

Un fichier migration.sql sera généré et des tables de données seront créées côté Supabase.

Création d'une API pour se connecter à Supabase

Créez une API de connexion pour enregistrer les valeurs saisies dans Supabase.

Installez Prisma Client dans votre projet.

npm install @prisma/client

Connexion à la 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 la méthode findMany() récupère tous les enregistrements correspondant aux conditions spécifiées. « 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 est créée à l'aide de la fonction create().

Il existe également d'autres méthodes telles que la suppression et la mise à jour, donc même si vous ne pouvez pas écrire d'instructions SQL, vous pouvez l'utiliser de la même manière qu'en Javascript.

Ici, tout est prêt.

Il vous suffit d'intégrer l'API que vous avez écrite précédemment dans le fichier page.tsx.

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

Il est enregistré du côté de Supabase !

Cette fois-ci, je me suis appuyé sur Gemini pour créer une ébauche, mais si je pouvais utiliser une base de données pour enregistrer des valeurs, la gamme de fonctions et d'applications que je pourrais créer serait plus large !

J'avais l'idée préconçue que le backend serait difficile, mais la possibilité de gérer la base de données avec un outil GUI était facile à comprendre, et cela a abaissé la barrière à l'intégration de la base de données !

Hourra !