Topics

Kakeru, Hasshi-san en anderen gebruiken Supabase om interessante ontwikkelingen te doen. In tegenstelling tot de waterval-achtige ontwikkeling die we tot nu toe hebben gezien, hoor ik van alles over het definiëren van functionele vereisten vanuit de gebruikersinterface, maar ik laat me niet overtreffen!

Deze keer ga ik een eenvoudige memo-app maken en de stappen samenvatten om Supabase en Prisma te verbinden en de gegevens in een database op te slaan als memo.Gemini CLIIk ga het ook gebruiken!

Omgeving: Next.js

We gebruiken geen Auth, Realtime of RLS van Supabase, maar Prisima om toegang te krijgen tot databasefuncties via de API. Omdat databasetabellen behandeld kunnen worden als Javascript/Typescript-objecten, dachten we dat het voor front-end engineers gemakkelijk zou zijn om code te schrijven die voor hen vertrouwd is.

Prisma

Prisma ORM is een ORM-bibliotheek (Object-Relational Mapping) die kan worden gebruikt met TypeScript en JavaScript.

Simpel gezegd is het een hulpmiddel waarmee u een database kunt beheren zonder SQL te schrijven, met behulp van methoden die zijn gedefinieerd in objecten van een programmeertaal.

Bovendien genereert Prisma automatisch typen op basis van het databaseschema. Als u dus een kolom probeert te bewerken die niet in de database voorkomt of als u gegevens van het verkeerde type probeert te bewerken, wordt u gewaarschuwd door een compilatiefout!

Supabase

Supabase is een full-stack backend-service die steeds populairder wordt als open source-alternatief voor Firebase.

• Zeer schaalbaar en betrouwbaar, gebaseerd op de PostgreSQL-database
• Realtime databasefunctionaliteit brengt u automatisch op de hoogte van wijzigingen in uw gegevens
• Ondersteunt meerdere authenticatiemethoden (e-mail/wachtwoord, sociale login, telefoonauthenticatie, enz.)
• Bestandsopslagfunctie voor efficiënt beheer van grote bestanden
• Snelle ontwikkeling met geautomatiseerde generatie van RESTful- en GraphQL-API's
• Uitgebreide ontwikkelaarstools en SDK's maken installatie en implementatie eenvoudig

Ik wil de stappen benadrukken om verbinding te maken met Supabase,Gemini CLIDit is een superhandig product waar je tranen van in de ogen krijgt! Ik ben zo blij dat mijn bedrijf Google Workspace gebruikt!

Ik wil een memofunctie maken met Supabase en Prisma. Maak eerst page.tsx aan.

Oké, ik wil het zo instellen dat wanneer ik op de knop Memo opslaan klik, de inhoud die ik in het tekstvak heb ingevoerd, wordt toegevoegd aan de lijst in Uw memo's.

Het ziet er zo uit en het is OK! De inhoud die u invoert, wordt nu toegevoegd aan de onderstaande lijst. Omdat dit echter slechts een JavaScript-gebeurtenis is, verdwijnt de lijst als u opnieuw laadt.

Wij gebruiken een database om uw invoer op te slaan!

Maak eerst een nieuw project aan op de Supabase-zijde.

Maak een nieuw project aan met de knop "Nieuw project". Noteer het databasewachtwoord, want dit is nodig om verbinding te maken met Prisma.

Sluit vervolgens Prisma aan.

npm install prisma --save-dev

npx prisma init

Wanneer u deze opdrachten invoert, wordt Prisma geïnstalleerd en wordt er een Prisma-map aangemaakt.

Vervang de DATABASE_URL in het .env-bestand door de Supabase-verbindings-URL. Vervang [UW-WACHTWOORD] door het databasewachtwoord dat u in Supabase hebt ingesteld.

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

Dan/prisma/schema.prismaHet schema (definitie van de databasestructuur) is geschreven in .

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

Model ○○ kan naar wens worden genoemd.

Nadat u het schema hebt geschreven, kunt u het migreren.

npx prisma migrate dev --name init

Er wordt een migration.sql-bestand gegenereerd en er worden gegevenstabellen aangemaakt aan de Supabase-zijde.

Een API maken om verbinding te maken met Supabase

Maak een verbindings-API om de ingevoerde waarden in Supabase op te slaan.

Installeer Prisma Client in uw project.

npm install @prisma/client

Verbinding maken met 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();
  }
};

De GET-functie is een API die alle records uit de database ophaalt. De findMany()-methode haalt alle records op die aan de voorwaarden voldoen. "memo" in Prisma.memo.findMany() is de schemanaam.

De POST-functie is een API die gegevens aan de database toevoegt en wordt gemaakt met create().

Er zijn ook andere methoden, zoals delete en update. Zelfs als u geen SQL-instructies kunt schrijven, kunt u deze op dezelfde manier uitvoeren als JavaScript.

Hier hebben we alles klaar staan.

Het enige wat u hoeft te doen is de API die u eerder hebt geschreven, in page.tsx te zetten en te integreren.

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

Het is opgeslagen aan de Supabase-kant!

Deze keer heb ik Gemini gebruikt om een ​​ruwe schets te maken, maar als ik een database zou kunnen gebruiken om waarden op te slaan, zou het scala aan functies en apps dat ik zou kunnen maken, groter zijn!

Ik had het idee dat de backend lastig zou zijn, maar het was makkelijk te begrijpen dat ik de database met een GUI-tool kon beheren. Bovendien verlaagde het de drempel voor database-integratie!

Hoera!