Uw eerste functie implementeren
Schrijf en implementeer een eenvoudige Edge Function voor aangepaste API-endpoints of backendlogica rechtstreeks vanuit uw Supabase-project.
Uw eerste functie implementeren is een gratis Supabase als backenddienst-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Supabase als backenddienst. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Supabase als backenddienst bevat in totaal 4 lessen.
Je code live zetten
Welkom bij het implementeren van je eerste Supabase Edge Function! In deze les leer je hoe je je functiecode toegankelijk maakt via een API-eindpunt.
Implementeren betekent dat je je functie publiceert, zodat deze vanuit je app, een webbrowser of andere services kan worden aangeroepen. Zo wordt je backendlogica live!
De Supabase CLI
Om Edge Functions te implementeren gebruik je voornamelijk de Supabase Command Line Interface (CLI). Deze tool helpt je om je Supabase-project lokaal te beheren en te communiceren met je externe backend.
- Zorg dat de CLI is geïnstalleerd en voor je project is geconfigureerd.
- Je gebruikt opdrachten zoals
supabase functions newensupabase functions deploy.
Een nieuwe functie maken
Laten we beginnen met het maken van een nieuwe Edge Function. Ga in je terminal naar de hoofdmap van je project en gebruik de opdracht supabase functions new:
Deze opdracht maakt een nieuwe map voor je functie met een bestand index.ts. Daarin komt je Deno-code (TypeScript/JavaScript) te staan.
supabase functions new my-first-functionStructuur van de functiecode
Na het maken van de functie vind je een nieuwe map (bijvoorbeeld supabase/functions/my-first-function) met daarin een bestand index.ts. Dit bestand is het startpunt van je Edge Function.
Supabase Edge Functions zijn gebaseerd op Deno, een veilige runtime voor JavaScript en TypeScript. Ze exporteren een standaardfunctie die binnenkomende HTTP-verzoeken verwerkt.
Een eenvoudige functie schrijven
Laten we nu een eenvoudige functie voor 'Hallo, wereld!' schrijven. Open het bestand index.ts in de map van je nieuwe functie en vervang de inhoud door de volgende code:
Deze functie retourneert eenvoudig een antwoord met platte tekst. Het is een uitstekend startpunt!
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
serve(async (req) => {
return new Response("Hello from your first Edge Function!", {
headers: { 'Content-Type': 'text/plain' },
})
})Je functie implementeren
Nu je code klaar is, is het tijd om deze te implementeren! Gebruik de opdracht supabase functions deploy en geef de naam van je functie op:
De CLI bouwt je functie en uploadt deze naar je Supabase-project. Na de implementatie is de functie een live API-eindpunt!
supabase functions deploy my-first-functionAanroepen met cURL
Na de implementatie kun je je functie testen. De eenvoudigste manier is door cURL in je terminal te gebruiken. Je hebt de URL van je Supabase-project en de Anon Key van je project nodig (te vinden in je projectinstellingen).
Vervang de tijdelijke aanduidingen door de werkelijke gegevens van je project:
curl -X POST 'https://your-project-ref.supabase.co/functions/v1/my-first-function' \
-H 'Authorization: Bearer YOUR_ANON_KEY' \
-H 'Content-Type: application/json' \
-d '{}'Aanroepen vanuit het web (JS)
Je kunt je Edge Function ook vanuit elke webtoepassing aanroepen met de standaard-API fetch. Zo kun je de functie vanuit JavaScript aan de clientzijde aanroepen:
Vergeet niet de tijdelijke URL en sleutel te vervangen door de werkelijke gegevens van je project.
async function callMyFunction() {
const SUPABASE_URL = "https://your-project-ref.supabase.co";
const SUPABASE_ANON_KEY = "YOUR_ANON_KEY";
try {
const res = await fetch(
`${SUPABASE_URL}/functions/v1/my-first-function`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({})
}
)
const data = await res.text() // Use .text() for plain text response
console.log(data)
} catch (error) {
console.error("Error calling function:", error)
}
}
callMyFunction()Gegevens doorgeven en opnieuw implementeren
Functies zijn nuttiger wanneer ze invoer kunnen accepteren! Laten we onze functie aanpassen zodat deze een name uit de aanvraaginhoud haalt en een persoonlijke begroeting retourneert.
Na het aanpassen van het bestand index.ts moet je opnieuw supabase functions deploy my-first-function uitvoeren om de wijzigingen live te zetten.
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
serve(async (req) => {
const { name } = await req.json() // Expects { "name": "..." }
const greeting = name ? `Hello, ${name}!` : "Hello there!"
return new Response(
JSON.stringify({ message: greeting }),
{ headers: { 'Content-Type': 'application/json' } },
)
})Korte controle: implementatiestappen
Welke van de volgende reeksen stappen is de juiste volgorde om een Supabase Edge Function te implementeren nadat je de code hebt geschreven?
Samenvatting: je eerste implementatie!
Je hebt je eerste Supabase Edge Function succesvol geïmplementeerd! Dit hebben we behandeld:
- Je hebt de Supabase CLI gebruikt om functies te beheren.
- Je hebt een nieuwe functie gemaakt met
supabase functions new. - Je hebt een eenvoudige Deno-functie geschreven in
index.ts. - Je hebt deze geïmplementeerd met
supabase functions deploy. - Je hebt de functie aangeroepen met
cURLen JavaScript aan de clientzijde. - Je hebt geleerd hoe je gegevens aan functies doorgeeft en wijzigingen opnieuw implementeert.
Je hebt nu een live backend-eindpunt dat klaar is voor gebruik!
Leer Supabase als backenddienst met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 11
- Lessen
- 40
Veelgestelde vragen
Is de les “Uw eerste functie implementeren” gratis?
Ja — de volledige tekst van “Uw eerste functie implementeren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Supabase als backenddienst wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Supabase als backenddienst bevat in totaal 4 lessen.
Wat leer ik in “Uw eerste functie implementeren”?
Schrijf en implementeer een eenvoudige Edge Function voor aangepaste API-endpoints of backendlogica rechtstreeks vanuit uw Supabase-project. Je oefent met Supabase als backenddienst door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Supabase als backenddienst te beginnen?
Ervaring vooraf is niet nodig. Supabase als backenddienst op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Uw eerste functie implementeren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Supabase als backenddienst?
Ja. Elke les over Supabase als backenddienst bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Kennismaking met Edge Functions
- Uw eerste functie implementeren
- Functies met uw app integreren
- Secrets, environmentvariabelen en geplande functies