Help me integreren met externe API's in mijn Svelte-applicatie
description
Met deze prompt leer je hoe je externe API's effectief integreert in je Svelte-applicatie, waardoor je dynamische en data-gedreven interfaces kunt bouwen. Het helpt je om betrouwbare fetch-aanroepen te schrijven, responsen goed te verwerken en fouten af te handelen, wat robuustere en interactievere apps oplevert.
prompt
Help me een externe API te integreren in mijn Svelte-applicatie. Beschrijf hoe ik API-aanroepen kan doen, data kan ophalen en verwerken, en de respons efficiënt ka ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een stapsgewijze gids om een externe API (zoals OpenWeatherMap) te integreren in je Svelte-applicatie:
1. API-aanroepen doen
Gebruik de fetch() functie om data op te halen. Omdat API-aanroepen asynchroon zijn, maak je gebruik van async/await.
2. Data ophalen en verwerken
Verwerk de JSON-respons en sla de relevante data op in component-variabelen of stores.
3. Respons efficiënt weergeven
Gebruik Svelte's reactivity om de UI automatisch te updaten zodra data beschikbaar is.
Hier is een voorbeeld van een Svelte-component om dit te doen:
```svelte
<script>
import { onMount } from 'svelte';
let weatherData = null;
let error = null;
const API_URL = 'https://api.openweathermap.org/data/2.5/weather?q=Amsterdam&appid=yourapikey';
onMount(async () => {
try {
const response = await fetch(API_URL);
if (!response.ok) {
throw new Error(`Fout bij ophalen data: ${response.status}`);
}
const data = await response.json();
weatherData = data;
} catch (err) {
error = err.message;
}
});
</script>
{#if error}
<p style="color: red;">{error}</p>
{:else}
{#if weatherData}
<h2>Weer in Amsterdam</h2>
<p>Temperatuur: {Math.round(weatherData.main.temp - 273.15)} °C</p>
<p>Weersomstandigheden: {weatherData.weather[0].description}</p>
<p>Wind: {weatherData.wind.speed} m/s</p>
{:else}
<p>Bezig met ophalen van data...</p>
{/if}
{/if}
```
**Belangrijke punten:**
- Vervang `yourapikey` door je echte API-sleutel.
- Gebruik `onMount` om de API-aanroep te doen wanneer de component geladen wordt.
- Svelte's reactivity zorgt dat de UI automatisch update zodra `weatherData` of `error` verandert.
- Je kunt de data verder verwerken of stylen zoals gewenst.
Wil je dit uitbreiden met bijvoorbeeld een invoerveld voor andere steden of meer gegevens?
provider: deepseek
model: deepseek-chat
Hier is een stapsgewijze handleiding voor het integreren van de OpenWeatherMap API in je Svelte-applicatie:
## 1. Basisopzet voor API-aanroepen
Maak een utility-bestand voor API-functies:
```javascript
// src/lib/api.js
export async function getWeatherData(city = 'Amsterdam') {
try {
const API_KEY = 'yourapikey'; // Vervang met je eigen API key
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=nl`
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Fout bij ophalen weergegevens:', error);
throw error;
}
}
```
## 2. Svelte Component met State Management
```svelte
<!-- src/components/Weather.svelte -->
<script>
import { onMount } from 'svelte';
import { getWeatherData } from '$lib/api.js';
let weatherData = null;
let loading = false;
let error = null;
let city = 'Amsterdam';
async function fetchWeather() {
loading = true;
error = null;
try {
weatherData = await getWeatherData(city);
} catch (err) {
error = err.message;
} finally {
loading = false;
}
}
onMount(() => {
fetchWeather();
});
function handleCityChange(event) {
city = event.target.value;
}
function handleSubmit(event) {
event.preventDefault();
fetchWeather();
}
</script>
<div class="weather-container">
<h1>Weer App</h1>
<!-- Zoekformulier -->
<form on:submit={handleSubmit} class="search-form">
<input
type="text"
bind:value={city}
on:input={handleCityChange}
placeholder="Voer stad naam in"
class="city-input"
/>
<button type="submit" disabled={loading} class="search-button">
{loading ? 'Laden...' : 'Zoek'}
</button>
</form>
<!-- Laadstatus -->
{#if loading}
<div class="loading">Weergegevens laden...</div>
<!-- Foutmelding -->
{:else if error}
<div class="error">Fout: {error}</div>
<!-- Weergegevens -->
{:else if weatherData}
<div class="weather-card">
<h2>{weatherData.name}, {weatherData.sys.country}</h2>
<div class="weather-main">
<img
src={`https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`}
alt={weatherData.weather[0].description}
/>
<div class="temperature">{Math.round(weatherData.main.temp)}°C</div>
</div>
<div class="weather-details">
<p><strong>Beschrijving:</strong> {weatherData.weather[0].description}</p>
<p><strong>Gevoelstemperatuur:</strong> {Math.round(weatherData.main.feels_like)}°C</p>
<p><strong>Vochtigheid:</strong> {weatherData.main.humidity}%</p>
<p><strong>Wind:</strong> {weatherData.wind.speed} m/s</p>
<p><strong>Luchtdruk:</strong> {weatherData.main.pressure} hPa</p>
</div>
</div>
{/if}
</div>
<style>
.weather-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.search-form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.city-input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.search-button {
padding: 8px 16px;
background: #007acc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.search-button:disabled {
background: #ccc;
cursor: not-allowed;
}
.weather-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.weather-main {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0;
}
.temperature {
font-size: 2em;
font-weight: bold;
}
.weather-details {
text-align: left;
margin-top: 15px;
}
.loading, .error {
text-align: center;
padding: 20px;
margin: 20px 0;
}
.error {
color: red;
background: #ffe6e6;
border: 1px solid red;
border-radius: 4px;
}
</style>
```
## 3. Gebruik in je hoofdapplicatie
```svelte
<!-- src/App.svelte -->
<script>
import Weather from './components/Weather.svelte';
</script>
<main>
<Weather />
</main>
```
## 4. Geavanceerde Opties: Stores voor State Management
Voor complexere applicaties kun je Svelte stores gebruiken:
```javascript
// src/stores/weatherStore.js
import { writable } from 'svelte/store';
import { getWeatherData } from '$lib/api.js';
function createWeatherStore() {
const { subscribe, set, update } = writable({
data: null,
loading: false,
error: null
});
return {
subscribe,
fetchWeather: async (city) => {
update(store => ({ ...store, loading: true, error: null }));
try {
const data = await getWeatherData(city);
set({ data, loading: false, error: null });
} catch (error) {
set({ data: null, loading: false, error: error.message });
}
}
};
}
export const weatherStore = createWeatherStore();
```
## Belangrijke punten:
1. **Vervang de API key** met je eigen key van OpenWeatherMap
2. **Error handling** is cruciaal voor productie-applicaties
3. **Loading states** verbeteren de gebruikerservaring
4. **Units parameter** (`units=metric`) zorgt voor Celsius i.p.v. Kelvin
5. **Lang parameter** (`lang=nl`) geeft Nederlandse beschrijvingen
Deze implementatie biedt een solide basis die je kunt uitbreiden met caching, refresh-intervallen of meerdere API endpoints.