Verfasst von Akansel Cengiz
Veröffentlicht am 20.11.2023
03 | Woher bekomme ich die Daten für meine Testimonials ?
Wir tauchen ein in die Welt von Fake Daten auf Abruf und wo sie zu finden sind.
6 Minuten Lesezeit
Vorwort
Ich hatte gar nicht vor, eine Testimonials-Seite einzupflegen. Den nötigen Schubser hat mir wieder die Astro Documentation gegeben. Ich kannte mich mit dem Fetchen zwar aus und die Herangehensweise von Astro gefiel mir auch sehr gut, aber hab mich am Ende trotzdem für meine Variante entschieden.
Was ist eine API?
API steht für Application Programming Interface und was es genau macht und wie es funktioniert erfährst du in der nächsten Zeile.
Alles Wissenswerte zu APIs findest du auf dieser AWS ↗️ Seite.
Kurze Erklärung:
APIs sind Mechanismen, die es zwei Software-Komponenten ermöglichen, über eine Reihe von Definitionen und Protokollen miteinander zu kommunizieren. Beispielsweise enthält das Software-System des Wetteramtes tägliche Wetterdaten. Die Wetter-App auf Ihrem Mobiltelefon „spricht“ über APIs mit diesem System und zeigt Ihnen tägliche Wetteraktualisierungen auf Ihrem Mobiltelefon an.
Woher kommen die Fake-User Daten von der Testimonial-Seite?
Auf der Documentation Seite von Astro wird mit RandomUser ↗️ gearbeitet. Das habe ich auch so belassen. Es gibt auch genug andere Alternativen, die man nehmen könnte. Man muss bei Google z.B. einfach nach „Fake User API“ suchen. Einer der bekanntesten überhaupt ist meines Wissens der JSON Placeholder ↗️.
Wie fordere ich die Daten an?
In der Welt der Webentwicklung müssen Webseiten und Apps häufig mit Servern kommunizieren, um Daten abzurufen oder zu senden. Dieser Prozess erfolgt über das Client-Server-Modell, bei dem der Client (die Webseite oder die App) Anfragen an den Server sendet und Antworten erhält.
Ein gängiger Ansatz für diese Kommunikation sind HTTP-Clients. HTTP-Clients sind Bibliotheken oder Funktionen, die es dem Client ermöglichen, HTTP-Anfragen zu stellen und Antworten zu verarbeiten. Ich habe mich für die von React entschieden.
Hier ein paar Beispiele:
Bild 1 ⬇️ ist aus der Documentation von Astro:
---
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Data fetched at build can be rendered in HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- Data fetched at build can be passed to components as props -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />Bild 2 ⬇️ ist ein native JavaScript „Fetch API“
fetch('https://randomuser.me/api/')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));Bild 3 ⬇️ ist von der JavaScript-Bibliothek „Axios“
axios.get('https://randomuser.me/api/')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));Bild 4 ⬇️ ist von meinem Code
import React, { useState, useEffect } from 'react';
import Location from './Location';
import Contact from './Contact';
import State from './State';
import Country from './Country';
import Age from './Age';
// const pageTitle = "Stimmen aus der Community...";
const Refresh = () => {
// Zustand für die API-Daten
const [randomUserData, setrandomUserData] = useState(null);
// Funktion zum Abrufen der API-Daten
const fetchUserData = async () => {
try {
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
console.log('API-Daten aktualisiert!');
// Hier setzt du den Zustand mit den erhaltenen Benutzerdaten
setrandomUserData(data.results[0]); // Da die API ein Array mit Ergebnissen zurückgibt, nehmen wir das erste Element
} catch (error) {
console.error('Abrufen der API-Daten Fehlgeschlagen:', error);
}
};
// useEffect zum Initiieren des Intervalls
useEffect(() => {
// Initial die API-Daten abrufen
fetchUserData();
// Intervall alle 3 Sekunden für das Aktualisieren der API-Daten
const intervalId = setInterval(() => {
fetchUserData();
}, 3000)
// Aufräumen: Interval stoppen, wenn die Komponente unmontiert wird
return () => clearInterval(intervalId);
}, []); // Leeres Array als zweites Argument stellt sicher, dass der Effekt nur einmal beim Laden der Komponente ausgeführt wird
// Ich habe setTimeout benutzt um sofort die Testimonials API starten zu können
// Ich muss wegen "Refresh client:load" die Testimonial Seite jedes mal manuell Refreshen damit
// die API startet
setTimeout(() => {
console.log();
}, 1);
// Hier kannst du den Rest deiner JSX-Komponente mit den API-Daten rendern
return (
<>
{/* <b><h4 className="">{pageTitle}</h4></b> */}
{/* Hier kannst du die API-Daten in deinem JSX verwenden */}
{randomUserData && (
<section
className="font-roboto mx-auto mt-20 w-full flex flex-row justify-center items-center pt-12"
>
<section className="card w-96 mx-auto dark:text-dark border bg-indigo-300 rounded shadow-[0_10px_20px_rgba(240,_46,_170,_0.7)]">
<img
className="w-32 mx-auto rounded-full -mt-20 border-8 border-stone-300"
src={randomUserData.picture.large}
alt="Fotos von Gesichtern"
/>
<article className="text-center mt-2 text-3xl font-medium">
{randomUserData.name.first}{" "}
{randomUserData.name.last}
</article>
<article className="text-center mt-2 font-light text-sm">
{randomUserData.login.username}
</article>
<hr className="mt-8" />
<article className="text-center font-normal text-lg">
<Location city={randomUserData.location.city} />
<State state={randomUserData.location.state} />
<Country country={randomUserData.location.country} />
<Age age={randomUserData.dob.age} />
<Contact client="load" email={randomUserData.email} />
</article>
</section>
</section>
)
}
</ >
);
};
export default Refresh;Der untere Screenshot zeigt dir die JSON ↗️ Datei des Anbieters an, wo alle Parameter einer Person aufgelistet sind.
Wir brauchen z.B. nur den Vornamen, Nachnamen und die Stadt dann muss der Code so aussehen.
{randomUserData.name.first}
{randomUserData.name.last}
<Location city={randomUserData.location.city}Dann wäre das laut dem Objekt der JSON Datei.
Jenni Nichols aus Billings.
Ich hoffe, du verstehst es jetzt etwas besser wie eine API funktioniert. Du kannst jeden verfügbaren Parameter anfordern, den du möchtest (Siehe großes JSON-Bild). Wenn du z.B. ein Bild haben möchtest, dann schaut der Code so aus. Das ist das Tolle an APIs.
{randomUserData.picture.large}
oder in anderen größen
{randomUserData.picture.medium}
{randomUserData.picture.thumbnail}Wie stelle ich Daten auf meiner Seite bereit und mache Sie sichtbar?
Ich empfehle zuerst mit einem minimalem CSS Styling zu arbeiten, mit der man nur sehen kann, ob die Daten auch wirklich alle da sind, die man angefordert hat. Wenn alles geklappt hat und die gewünschten Daten fließen, dann kann man auch die Seite in Ruhe zu Ende stylen.
Selbstverständlich muss man die Console.log Daten, die in der Konsole ausgegeben
werden, auch im Auge behalten.
Wenn du Apple User bist, geht es am schnellsten mit dem Shortcut Shift+Command+C oder
als Windows User mit Strg+Umschalt+C um in den Inspector-Modus zu gelangen.
Du könntest aber auch, wenn du auf der Seite bist, irgendwo im Viewport (Unter dem Begriff Viewport versteht man denjenigen Bereich einer Webseite, der für einen Benutzer sichtbar ist) auf Mausklick-rechts klicken
und im folgenden auf gepoppten Fenster nach dem Text „Untersuchen“ schauen.
Der befindet sich meistens ganz unten im Fenster.
Wirst du die Seite weiter bearbeiten?
Ich werde die Seite so umbauen, dass ich multiple Cards von Personen nebeneinander anzeigen lassen kann. Das Design werde ich auch optimieren.
Mein Fazit
Es gibt viele Möglichkeiten, Daten von einer API anzufordern. Jedes bringt natürlich seine Vor- und Nachteile mit sich. Für mich hat es auf jeden Fall Spaß gemacht und freue mich schon auf meine nächste Arbeit mit einer API.