Skip to content

Commit

Permalink
Merge pull request #103 from Vannsl/master
Browse files Browse the repository at this point in the history 
German Translations & Small Corrections in English Translations
  • Loading branch information
@jlooper
jlooper committed Oct 15, 2019
2 parents 13365a3 + addfea4 commit f895aae
Show file tree
Hide file tree
Showing 8 changed files with 680 additions and 618 deletions.
61 changes: 34 additions & 27 deletions de/workshop/full-day/ch3.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# 📋 Kapitel 3: Anbindung einer API

| **Ziel** | Lerne wie API-Aufrufe funktionieren und wie sie in einer Webapp genutzt werden können. |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Was du lernen wirst** | Verwendung der [DogCEO API](https://dog.ceo/dog-api/) zum dynamischen Laden von Hundebildern anstelle von Dummy-Daten. |
| **Was du dafür benötigst** | Einen modernen Browser, z.B. Google Chrome. Einen Account bei CodeSandbox.io. Falls du nicht mehr weißt, wo du warst, kannst du die Basis für dieses Kapitel von [hier](https://github.com/VueVixens/projects/tree/master/chapter-2-end) importieren. Wie das geht, steht im [Anhang 1](appendix_1.md) |
| **Dauer** | 1 Stunde
| **Ziel** | Lerne wie API-Aufrufe funktionieren und wie sie in einer Webapp genutzt werden können. |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Was du lernen wirst** | Verwendung der [DogCEO API](https://dog.ceo/dog-api/) zum dynamischen Laden von Hundebildern anstelle von Dummy-Daten. |
| **Was du dafür benötigst** | Einen modernen Browser, z.B. Google Chrome. Einen Account bei CodeSandbox.io. Falls du nicht mehr weißt, wo du warst, kannst du die Basis für dieses Kapitel von [hier](https://github.com/VueVixens/projects/tree/master/chapter-2-end) importieren. Wie das geht, steht im [Anhang 1](appendix_1.md) |
| **Dauer** | 1 Stunde |

## Anleitung

Falls du das Projekt von vorn beginnen musst, klone [dieses Projekt](https://github.com/VueVixens/projects/tree/master/chapter-1-end) in Code Sandbox nachdem du dich eingeloggt hast.
Falls du das Projekt von vorn beginnen musst, klone [dieses Projekt](https://github.com/VueVixens/projects/tree/master/chapter-1-end) in Code Sandbox, nachdem du dich eingeloggt hast. Dafür klickst du auf den Link **Import form Github** unten links auf der Hauptseite und fügst die URL des Repositories in das Feld. Du kannst ebenfalls mit dem Projekt fortfahren, dass du in [Kapitel 2](ch2.md) erstellt hast.

Bisher haben wir Hundebilder über eine statische JSON-Datei, die wir in eine Komponente importiert haben, angezeigt. Für Demozwecke ist das sehr nützlich. In produktiven Anwendungen werden meistens Echtdaten genutzt, die entweder von internen Datenquellen oder einer API geliefert werden. Wir werden eine externe API dafür nutzen.

Expand All @@ -20,25 +20,25 @@ Zu Beginn hat Vue einen eigenen Weg für API-Aufrufe mit .ajax genutzt. Dies wur

## Axios hinzufügen

Zuerst musst du Axios den Projekt-Abhängigkeiten hinzufügen. (Klicke auf `Add Dependency` und suche nach `axios`).
Zuerst musst du Axios den Projekt-Abhängigkeiten hinzufügen. Dafür klicke in Code Sandbox auf den Reiter `Explorer` -> `Dependencies` -> `Add Dependency` und suche nach `axios`. Wenn du es installiert hast, wirst du sehen, dass es zu deiner `package.json` hinzugefügt wurde.

Importiere Axios in der Komponenten, in der der API-Aufruf gemacht werden soll - `views/Pets.vue`. Kopiere folgende Zeile in den `<script>`-Block dieser Komponente:

```js
import axios from "axios";
```

Alle Aufrufe werde die gleiche Basis-URL mit verschiedenen Endpunkten nutzen. Konfiguriere direkt unter dem Axios-Import die Basis-URL:
Alle Aufrufe werde die gleiche Basis-URL mit verschiedenen Endpunkten nutzen. Konfiguriere direkt unter allen Imports, dem Axios-Import und möglichen anderen, die Basis-URL:

```js
axios.defaults.baseURL = "https://dog.ceo/api";
```

Jetzt können wir den ersten API-Aufruf machen.
Mit dieser Zeile haben wir Axios so konfiguriert, dass jeder API-Aufruf mit der URL `https://dog.ceo/api` beginnen wird. Jetzt können wir den ersten API-Aufruf machen.

## API aufrufen

Wir ersetzen das erste statische Bild mit einem zufälligen Husky-Bild von der Dog CEO API. Zuerst müssen wir den Endpunkt dafür herausfinden. Wir müssen `/breed/husky/images/random` als Endpunkt hinzufügen, das steht in der [Dokumentation](https://dog.ceo/dog-api/) der API.
Wir ersetzen das erste statische Bild mit einem zufälligen Husky-Bild von der Dog CEO API. Zuerst müssen wir den Endpunkt dafür herausfinden. Wir müssen `/breed/husky/images/random` als Endpunkt hinzufügen, das steht in der [Dokumentation](https://dog.ceo/dog-api/) der API (der `api` Teil ist bereits in der Base-URL, die wir durch das Setzen von `axios.defaults.baseURL` konfigurierten).

Wir möchten das alte Bild durch ein neues ersetzen, wenn die Komponente geladen wird. Dafür implementieren wir einen `created()`-Anker (=hook) direkt nach `data()`.

Expand All @@ -54,17 +54,17 @@ Beachte, dass du nach dem `data`-Objekt ein Komma setzen musst, bevor du den `cr
Das ist der erste Hook unserer App! Hooks sind sehr nützlich, wenn du bestimmte Code-Blöcke besser kontrollieren musst. Mehr Informationen zu Hooks kannst du [hier](https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks) finden.
:::

In dem neuen Hook werden wir nun die API aufrufen. Für eine GET-Anfrage (=request) muss `axios.get` genutzt werden. Das Ergebnis wird ein JavaScript-Promise sein (=Versprechen), in dem wir Maßnahmen (=callbacks) für einen erfolgreichen (=success) oder fehlerhaften (=failure) Aufruf implementieren müssen. Für den Moment geben wir das Ergebnis in der Konsole aus. Kopiere den folgenden Code zwischen die geschweiften Klammern von `created(){}`:
In dem neuen Hook werden wir nun die API aufrufen. Für eine GET-Anfrage (=request) muss `axios.get` genutzt werden. Das Ergebnis wird ein JavaScript-Promise sein (=Versprechen), in dem wir Maßnahmen (=callbacks) für einen erfolgreichen (=success) oder fehlerhaften (=failure) Aufruf implementieren müssen. Für den Moment geben wir das Ergebnis in der Konsole aus. Kopiere den folgenden Code, ein Axios Cide Snippet, zwischen die geschweiften Klammern von `created(){}`:

```js
axios
.get("/breed/husky/images/random")
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
axios
.get("/breed/husky/images/random")
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```

Sieh dir in der Browseransicht von Code Sandbox die Seite an und wechsel auf die Pets-Seite. In der Konsole solltest du eine Ausgabe sehen. Untersuche das Objekt indem du auf den kleinen Pfeil an der linken Seite klickst. Suche das `data`-Feld. Hier siehst du (hoffentlich) den Status `success` und eine Nachricht (=message) mit einer URL zu einem Bild. Du kannst dir diese URL kopieren und in einem neuen Browserfenster aufrufen, es sollte dir ein Bild von einem Husky anzeigen.
Expand All @@ -74,9 +74,10 @@ Sieh dir in der Browseransicht von Code Sandbox die Seite an und wechsel auf die
Wir wollen das Husky-Bild durch ein neues ersetzen. Zuerst müssen wir in der Liste der Hunde einen Husky finden. Dafür nutzen wir die `Array.find`-Methode. Es durchsucht die `dogs`-Liste, die wir bereits von `data/dogs.js` in die Komponente laden, bis es ein Element findet, dass die angegebene Bedingung erfüllt. In unserem Fall soll die Art (`breed`) dem Wert `husky` entsprechen. Ersetze die Zeile mit `console.log()` im `then`-Abschnitt des Axios-Aufrufs mit diesen Zeilen:

```js
const husky = this.dogs.find(dog => dog.breed === 'husky');
const husky = this.dogs.find(dog => dog.breed === "husky");
console.log(husky);
```

Ok. Wir haben einen Husky gefunden. Das erkennst du in der Ausgabe in der Konsole. Du siehst diesen Hund auch auf der Pets-Seite, er heißt 'Max'. Jetzt wollen wir ihm das neue Bild von der API zuweisen. Füge diese Zeile unter die letzten zwei Zeilen ein:

```js
Expand All @@ -87,7 +88,7 @@ Du solltest jetzt sehen, wie sich das Bild von 'Max' ändert.

## Die API nutzen 2 - Zufällige Bilder anzeigen

Jetzt wollen wir allen Hunden in der Liste ein Bild von der API zuweisen. Als erstes benötigen wir wieder den korrekten Endpunkt für jede Hundearte. Wir werden eine Liste mit allen Endpunkten für alle Arten erstellen. Dafür nutzen wie die `map`-Methode.
Jetzt wollen wir allen Hunden in der Liste ein Bild von der API zuweisen. Als erstes benötigen wir wieder den korrekten Endpunkt für jede Hundeart. Erinnerst du dich, wie wir den Endpunkt `/breed/husky/images/random` für die Art `husky` aufgerufen haben? Lass' uns eine Liste von Links erstellen, in dem jeder Link spezifisch für eine Art ist. Wir werden eine Liste mit allen Endpunkten für alle Arten erstellen. Dafür nutzen wie die`map`-Methode.

::: tip 💡
Die `map()`-Methode erzeugt eine neue Liste. Die Elemente dieser Liste entstehen aus den Elementen der ersten Liste, die durch eine Funktion verändert werden.
Expand All @@ -97,25 +98,30 @@ Die `map()`-Methode erzeugt eine neue Liste. Die Elemente dieser Liste entstehen

```js
const linksArray = this.dogs.map(
dog => "/breed/" + dog.breed + "/images/random"
dog => "/breed/" + dog.breed + "/images/random"
);
```

Wir nehmen die Art von jedem Hund in der Liste und fügen sie in den Endpunkt ein. (Zuvor haben wir den gleichen Endpunkt genutzt, nur mit `husky`, statt dem wechselnden Wert der Hundeart.)

Jetzt müssen wir die API für jeden Endpunkt der neuen Liste anfragen. Axios hat dafür Hilfsfunktionen namens `axios.all` und `axios.spread`. Der ersten übergeben wir die Liste mit den API-Anfragen und es gibt uns eine Liste mit den Antworten von der API zurück. Diese Liste teilen wir mit `axios.spread` auf, um die neuen Bilder den Hunden zuzuweisen.
Um alle API-Anfragen der Liste abzuarbeiten, nutzen wir wieder die `map`-Methode und werden mit jedem Wert der Liste einen API-Aufruf `axios.get` machen.
Kopiere den folgenden Code dafür unter die Definition des `linksArray`s.

```js
axios.all(linksArray.map(link => axios.get(link)))
Kopiere den folgenden Code (Zeilen 5-12) dafür direkt unter die Definition des `linksArray`s.

```js {5-12}
created() {
const linksArray = this.dogs.map(
dog => "/breed/" + dog.breed + "/images/random"
);
axios.all(linksArray.map(link => axios.get(link)))
.then(
axios.spread((...res) => {
this.dogs.forEach((dog, index) => {
dog.img = res[index].data.message;
});
})
);
}
```

::: tip 💡
Expand All @@ -129,11 +135,12 @@ Kopiere diesen Teil an die erste Stelle in den `created()`-Hook:

```js
this.dogs.forEach(dog => {
dog.img = "";
dog.img = "";
});
```

**Jetzt sehen wir zunächst keine Bilder bevor die neuen Bilder von der API geladen werden. Es geht voran!**

# Ergebnise

![chapter 3 result](./images/petshop_chapter3.jpg)
Loading

0 comments on commit f895aae

Please sign in to comment.