Supabase als backenddienst · Les

Integratie met externe services

Leer patronen voor het verbinden van uw Supabase-backend met API's en services van derden om de mogelijkheden van uw applicatie uit te breiden

Les 1 van 312 stappen

Integratie met externe services is een gratis Supabase als backenddienst-les op CoddyKit. Dit is les 1 van 3. 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 3 lessen.

Waarom externe diensten?

Je app moet vaak meer doen dan alleen gegevens in Supabase beheren. Denk aan het versturen van e-mails, het verwerken van betalingen of het integreren van AI-hulpmiddelen.

Daar komt integratie met externe diensten van pas! Hiermee kan je Supabase-backend communiceren met andere API's en platforms om de mogelijkheden van je applicatie uit te breiden.

Veelvoorkomende integratiebehoeften

Veelgebruikte functies van apps zijn afhankelijk van externe diensten:

Betaalproviders: Stripe, PayPal voor transacties.
E-mail/SMS: SendGrid, Twilio voor meldingen.
AI/ML-API's: OpenAI, Google Cloud AI voor geavanceerde functies.
Geolocatie: Google Maps, Mapbox voor kaartdiensten.
Analyse: Mixpanel, Segment voor het volgen van gebruikersgedrag.

De rol van Supabase: Edge Functions

Hoewel je clientapplicatie externe API's rechtstreeks kan aanroepen, zijn Supabase Edge Functions ideaal voor veilige integraties die vanuit de backend worden aangestuurd.

Edge Functions fungeren als serverloze backendlogica die dicht bij je gebruikers wordt uitgevoerd. Ze kunnen HTTP-verzoeken naar elke externe API sturen zonder gevoelige informatie rechtstreeks in je clientcode bloot te geven.

Een API-aanroep maken met Deno

Supabase Edge Functions zijn gebouwd op Deno, dat de standaard-API fetch gebruikt voor netwerkverzoeken, net als browsers. Daardoor is het eenvoudig om met externe diensten te communiceren.

De werking is als volgt: je client roept een Edge Function aan, die vervolgens een verzoek naar de externe API stuurt, het antwoord verwerkt en dit terugstuurt naar je client.

Cod demonstratie: externe gegevens ophalen

Hier zie je een eenvoudige Edge Function die een willekeurig 'todo'-item ophaalt uit een openbare API (JSONPlaceholder). Let erop dat we Deno.serve als ingangspunt voor de functie gebruiken.

import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'

Deno.serve(async (req) => {
  const { name } = await req.json()

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const data = await response.json()

    return new Response(JSON.stringify({
      message: `Hello ${name}! Here's a todo: ${data.title}`,
    }), {
      headers: { 'Content-Type': 'application/json' },
      status: 200,
    })
  } catch (error) {
    return new Response(JSON.stringify({
      error: error.message,
    }), {
      headers: { 'Content-Type': 'application/json' },
      status: 500,
    })
  }
})

De Edge Function aanroepen

Na de implementatie kan je clientapplicatie deze Edge Function aanroepen met de Supabase-clientbibliotheek. De functienaam zou hier bijvoorbeeld 'fetch-todo' zijn.

De methode invoke verwerkt het versturen van gegevens naar je functie en het ontvangen van het antwoord.

// Client-side JavaScript
async function getTodoFromEdgeFunction() {
  try {
    const { data, error } = await supabase.functions.invoke('fetch-todo', {
      body: { name: 'CoddyKit User' },
    })

    if (error) {
      console.error('Function error:', error)
    } else {
      console.log('Function response:', data)
    }
  } catch (err) {
    console.error('Invocation error:', err)
  }
}

// Call the function (e.g., on button click)
// getTodoFromEdgeFunction();

API-sleutels beveiligen met Supabase Secrets

API-sleutels rechtstreeks in de code van je Edge Function zetten is een beveiligingsrisico. Als je code ooit openbaar wordt, zijn je sleutels gecompromitteerd.

Supabase biedt Secrets om omgevingsvariabelen veilig op te slaan voor je Edge Functions. Deze maken geen deel uit van je codebase en worden tijdens runtime geïnjecteerd.

Secrets gebruiken in Edge Functions

Eerst stel je een secret in met de Supabase CLI: supabase secrets set MY_EXTERNAL_API_KEY=your_key_here. Vervolgens krijg je er in je Edge Function toegang toe via Deno.env.get('MY_EXTERNAL_API_KEY').

Zo houd je je gevoelige referenties veilig en buiten je versiebeheer.

import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'

Deno.serve(async (req) => {
  // Access the secret environment variable
  const apiKey = Deno.env.get('MY_EXTERNAL_API_KEY') || 'NO_KEY_SET'

  // Example: Use the apiKey in a header for an external API call
  // const response = await fetch('https://api.example.com/data', {
  //   headers: { 'Authorization': `Bearer ${apiKey}` },
  // })

  return new Response(JSON.stringify({
    message: `API Key accessed: ${apiKey.substring(0, 5)}...`,
  }), {
    headers: { 'Content-Type': 'application/json' },
    status: 200,
  })
})

Antwoorden en fouten robuust afhandelen

Bereid je bij het integreren van externe diensten altijd voor op succes en mislukking. Parse het antwoord van de API correct (vaak als JSON) en handel mogelijke fouten af.

Controleer de HTTP-status: Niet alle 2xx-antwoorden zijn succesvol; sommige API's gebruiken 4xx voor fouten in de bedrijfslogica.
Try-catch-blokken: Essentieel voor netwerkfouten of problemen bij het parsen van antwoorden.
Betekenisvolle foutmeldingen: Stuur duidelijke foutmeldingen terug naar de client zonder interne API-details bloot te geven.

Best practices voor integraties

Zo zorg je voor robuuste en schaalbare integraties:

Snelheidsbeperking: Houd je aan de snelheidslimieten van externe API's om te voorkomen dat je wordt geblokkeerd.
Nieuwe pogingen: Implementeer exponentiële wachttijden voor tijdelijke netwerkproblemen.
Time-outs: Stel redelijke time-outs in voor externe verzoeken om te voorkomen dat ze blijven hangen.
Logboekregistratie: Leg verzoeken en antwoorden vast, vooral fouten, voor foutopsporing.
Idempotentie: Ontwerp je functies zo dat ze dubbele verzoeken netjes afhandelen voor bewerkingen zoals betalingen.

Korte controle over integratie

Je bouwt een Edge Function om een e-mail te versturen met een externe e-mail-API. Je moet de API-sleutel van je e-maildienst opnemen.

Beantwoord dit in de interactieve les

Samenvatting: externe diensten integreren

Je hebt geleerd hoe je de mogelijkheden van je Supabase-applicatie uitbreidt door externe API's en diensten te integreren.

Edge Functions zijn ideaal voor veilige communicatie tussen de backend en externe diensten.
Gebruik fetch binnen Deno Edge Functions om HTTP-verzoeken te versturen.
Beveilig gevoelige referenties, zoals API-sleutels, altijd met Supabase Secrets.
Implementeer een robuuste foutafhandeling en volg best practices voor betrouwbare integraties.

Zo ontstaan enorm veel mogelijkheden voor krachtige applicaties met veel functies!

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Integratie met externe services” gratis?

Ja — de volledige tekst van “Integratie met externe services” 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 3 lessen.

Wat leer ik in “Integratie met externe services”?

Leer patronen voor het verbinden van uw Supabase-backend met API's en services van derden om de mogelijkheden van uw applicatie uit te breiden 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 1 van 3.

Hoe lang duurt de les “Integratie met externe services”?

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

← Terug naar Supabase als backenddienst