Einführung
Vue.js ist ein JavaScript-Framework für die Frontend-Entwicklung von Benutzeroberflächen. Es ist von Grund auf so konzipiert, dass es schrittweise eingeführt werden kann und sich gut in andere Bibliotheken oder bestehende Projekte integrieren lässt. Dieser Ansatz macht es sowohl für kleine Projekte als auch für komplexe Single-Page-Anwendungen geeignet, insbesondere in Kombination mit anderen Tools und Bibliotheken.
Eine API (Application Programming Interface) ist eine Softwareschnittstelle, die die Kommunikation zwischen zwei Anwendungen ermöglicht. APIs stellen häufig Daten bereit, die andere Entwickler in ihren Anwendungen nutzen können, ohne sich um Datenbanken oder Unterschiede in Programmiersprachen kümmern zu müssen. Entwickler rufen Daten oft von einer API ab, die diese im JSON-Format zurückgibt und anschließend in Frontend-Anwendungen integriert. Vue.js eignet sich hervorragend für die Nutzung solcher APIs.
In diesem Tutorial erstellen Sie eine Vue-Anwendung, die die Cryptocompare-API nutzt, um aktuelle Kurse der beiden führenden Kryptowährungen Bitcoin und Ethereum anzuzeigen. Neben Vue verwenden Sie die Axios-Bibliothek, um API-Anfragen zu stellen und die Ergebnisse zu verarbeiten. Axios ist besonders nützlich, da es JSON-Daten automatisch in JavaScript-Objekte umwandelt und Promises unterstützt. Dadurch wird der Code lesbarer und einfacher zu debuggen. Für ein ansprechendes Design verwenden wir das CSS Foundation Framework.
Voraussetzungen
- Ein Texteditor mit Unterstützung für JavaScript-Syntaxhervorhebung, wie beispielsweise Atom, Visual Studio Code oder Sublime Text. Diese Editoren sind für Windows, macOS und Linux verfügbar.
- Kenntnisse im Umgang mit HTML und JavaScript sind erforderlich. Mehr dazu erfahren Sie unter „JavaScript zu HTML hinzufügen“.
- Lernen Sie das JSON-Datenformat kennen, um mehr darüber zu erfahren, wie Sie in JavaScript mit JSON arbeiten können.
- Erste Schritte mit API-Anfragen: Ein umfassendes Tutorial zur Arbeit mit APIs finden Sie unter „How to Use Web API in Python3“. Obwohl es für Python geschrieben ist, hilft es Ihnen dennoch, die Kernkonzepte der API-Arbeit zu verstehen.
Schritt 1 – Erstellen einer einfachen Vue-App
In diesem Schritt erstellen Sie eine einfache Vue-Anwendung. Wir erstellen eine einzelne HTML-Seite mit Beispieldaten, die wir später durch Live-Daten von der API ersetzen. Zur Anzeige dieser Beispieldaten verwenden wir Vue.js. Für diesen ersten Schritt speichern wir den gesamten Code in einer einzigen Datei.
Erstellen Sie mit Ihrem Texteditor eine neue Datei namens index.html.
Fügen Sie in dieser Datei den folgenden HTML-Code ein, der ein HTML-Grundgerüst definiert und das CSS Foundation Framework sowie die Vue.js-Bibliothek von einem Content Delivery Network (CDN) einbindet. Durch die Verwendung eines CDN muss kein zusätzlicher Code heruntergeladen werden, um mit der Entwicklung Ihrer Anwendung zu beginnen.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="utf-8">
<title>Cryptocurrency Pricing Application</title>
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
</body>
</html>Die Zeile {{ BTCinUSD }} ist ein Platzhalter für Daten, die von Vue.js bereitgestellt werden und es uns ermöglichen, Daten deklarativ in der Benutzeroberfläche darzustellen. Definieren wir diese Daten.
Direkt unter dem Etikett با Vue، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:
...
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>
Dieser Code erstellt eine neue Vue-App-Instanz und bindet diese an das Element mit der App-ID. Vue bezeichnet diesen Vorgang als „Mounting der App“. Wir definieren eine neue Vue-Instanz und konfigurieren sie, indem wir ihr ein Konfigurationsobjekt übergeben. Der `createApp`-Instanz übergeben wir ein Datenobjekt, das den Wert `BTCinUSD` zurückgibt. Zusätzlich rufen wir die `mount`-Methode der `createApp`-Instanz mit dem Argument `#app` auf. Dieses Argument gibt die Element-ID an, an der die App gemountet werden soll, sowie eine Datenoption mit den Daten, die in der Ansicht verfügbar sein sollen.
In diesem Beispiel enthält unser Datenmodell ein einzelnes Schlüssel-Wert-Paar mit einem Dummy-Wert für den Bitcoin-Preis: { BTCinUSD: 3759.91}. Diese Daten werden in unserer HTML-Seite oder -Ansicht angezeigt, wobei wir den Schlüssel in doppelte geschweifte Klammern einschließen, wie folgt:
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>Wir werden diesen verschlüsselten Wert schließlich durch Live-Daten aus der API ersetzen.
Öffnen Sie diese Datei in Ihrem Browser. Auf Ihrem Bildschirm wird die folgende Ausgabe mit den Beispieldaten angezeigt:
Wir zeigen den Preis in US-Dollar an. Um ihn in einer weiteren Währung, beispielsweise Euro, anzuzeigen, fügen wir unserem Datenmodell ein weiteres Schlüssel-Wert-Paar und eine weitere Spalte im Markup hinzu. Zuerst fügen wir die Euro-Zeile zum Datenmodell hinzu:
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>Dann der Abschnitt <div class> Ersetzen Sie den bestehenden Text durch die folgenden Zeilen.
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>Speichern Sie die Datei und laden Sie sie in Ihrem Browser neu. Die App zeigt nun den Bitcoin-Preis in Euro und US-Dollar an.
In diesem Schritt erstellen Sie Ihre Vue-App mit Beispieldaten, um sicherzustellen, dass sie geladen wird. Bisher haben wir alles in einer einzigen Datei erledigt, daher werden wir die einzelnen Elemente nun in separate Dateien aufteilen, um die Wartbarkeit zu verbessern.
Schritt 2 – JavaScript und HTML zur besseren Übersichtlichkeit trennen
Um die Funktionsweise zu verstehen, haben wir den gesamten Code in einer Datei zusammengefasst. In diesem Schritt teilen Sie den Anwendungscode in zwei separate Dateien auf: index.html und vueApp.js. Die Datei index.html enthält das Markup, die JavaScript-Datei die Anwendungslogik. Beide Dateien befinden sich im selben Verzeichnis.
Ändern Sie zunächst die Datei index.html, entfernen Sie den JavaScript-Code und ersetzen Sie ihn durch einen Link zur Datei vueApp.js.
Suchen Sie diesen Abschnitt der Datei:
...
<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
...Und ändern Sie es so:
...
<script src="https://unpkg.com/vue@3"></script>
<script src="vueApp.js"></script>
...Erstellen Sie anschließend die Datei vueApp.js im selben Ordner wie die Datei index.html.
Fügen Sie in diese neue Datei denselben JavaScript-Code ein, der sich ursprünglich in der Datei index.html befand, jedoch ohne das <code>-Tag. قرار دهید:
const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')Speichern Sie die Datei und laden Sie index.html im Browser neu. Sie werden dasselbe Ergebnis wie zuvor sehen.
Hier haben Sie die Anwendung vom Markup getrennt. Als Nächstes fügen Sie weitere Daten hinzu, um neben Bitcoin auch andere Kryptowährungen zu unterstützen.
Schritt 3 – Daten mit Vue durchlaufen
In diesem Schritt werden Sie die Daten neu strukturieren und die Darstellung so ändern, dass die Preise von Bitcoin und Ethereum angezeigt werden.
Öffnen Sie die Datei vueApp.js und ändern Sie den Rückgabeteil des Datenmodells wie folgt:
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')Unser Datenmodell ist durch eine verschachtelte Datenstruktur etwas komplexer geworden. Wir haben nun einen Schlüssel namens „results“, der zwei Datensätze enthält: einen für den Bitcoin-Preis und einen für den Ethereum-Preis. Diese neue Struktur ermöglicht es uns, Redundanzen in unserer Ansicht zu reduzieren. Sie ähnelt außerdem den Daten, die wir von der Cryptocompare-API erhalten.
Speichern Sie die Datei.
Nun ändern wir unser Markup, um die Daten planvoller zu verarbeiten.
Öffnen Sie die Datei index.html und suchen Sie diesen Abschnitt der Datei, in dem der Bitcoin-Preis angezeigt wird:
...
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>
</div>
...Ersetzen Sie ihn durch diesen Code, der den von Ihnen definierten Datensatz durchläuft.
...
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{ index }} </p>
</div>
<div class="card-divider">
<p>$ {{ result.USD }}</p>
</div>
<div class="card-section">
<p> € {{ result.EUR }}</p>
</div>
</div>
</div>
...Dieser Code verwendet die v-for-Anweisung, die wie eine for-Schleife funktioniert. Sie durchläuft alle Schlüssel-Wert-Paare in unserem Datenmodell und zeigt die Daten für jedes Paar an.
Wenn Sie die Seite im Browser neu laden, werden Sie die lächerlichen Preise sehen:
Diese Modifikation ermöglicht es uns, in vueApp.js eine neue Währung zu den Ergebnisdaten hinzuzufügen und diese ohne weitere Änderungen auf dem Bildschirm anzuzeigen.
Fügen Sie dem Datensatz einen weiteren simulierten Eintrag mit hervorgehobenen Informationen hinzu, um dies auszuprobieren:
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
}
}).mount('#app')Fügen Sie nach dem Ethereum-Eintrag ein abschließendes Komma ein. Speichern Sie die Datei.
Wenn Sie die Seite nun in einem Webbrowser laden, wird der neue Eintrag angezeigt:
Wenn wir Daten programmatisch untersuchen, müssen wir keine neuen Spalten manuell im Markup hinzufügen.
Hier haben Sie anhand von Beispieldaten die Preise verschiedener Währungen visualisiert. Nun rufen wir die tatsächlichen Daten mithilfe der Cryptocompare-API ab.
Schritt 4 – Daten von der API abrufen
In diesem Schritt ersetzen Sie die simulierten Daten durch Live-Daten der Cryptocompare API, um die Preise von Bitcoin und Ethereum auf der Webseite in US-Dollar und Euro anzuzeigen.
Um die Daten für unsere Seite zu erhalten, fordern wir die API https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR an, die Bitcoin und Ethereum in USD und EUR abfragt. Diese API liefert eine JSON-Antwort.
Verwenden Sie curl, um eine Anfrage an die API zu senden und die Antwort in einer Terminal-Sitzung anzuzeigen:
curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'Die Ausgabe sieht dann etwa so aus:
Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}Dieses Ergebnis ähnelt dem kodierten Datenmodell aus dem vorherigen Schritt, enthält aber die aktuellen Werte von Bitcoin und Ethereum. Jetzt müssen wir die Daten nur noch anpassen, indem wir diese URL von unserer Anwendung aus anfordern.
Für die Anfrage verwenden wir die `mounted()`-Funktion von Vue in Kombination mit der `GET`-Funktion der Axios-Bibliothek, um die Daten abzurufen und im Ergebnis-Array des Datenmodells zu speichern. Die `mounted()`-Funktion wird aufgerufen, sobald die Vue-Anwendung auf einem Element eingebunden wird. Nach dem Einbinden der Vue-Anwendung senden wir die Anfrage an die API und speichern die Ergebnisse. Die Webseite wird über die Änderung benachrichtigt und die Werte werden auf der Seite angezeigt.
Öffnen Sie zunächst die Datei index.html und laden Sie die Axios-Bibliothek, indem Sie ein Skript unterhalb der Zeile einfügen, in der Sie Vue platziert haben:
...
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vueApp.js"></script>
...Speichern Sie die Datei und öffnen Sie anschließend vueApp.js.
Ändern und aktualisieren Sie vueApp.js, um die API anzufordern und das Datenmodell mit den Ergebnissen zu füllen.
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
createApp({
data() {
return {
results:[]
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
}).mount('#app')Beachten Sie, dass wir den Standardwert für „results“ entfernt und durch ein leeres Array ersetzt haben. Beim ersten Laden unserer App sind daher keine Daten vorhanden, die HTML-Ansicht erwartet jedoch, dass beim erneuten Laden einige Daten wiederholt werden.
Die Funktion `axios.get` verwendet ein Promise. Wenn die API erfolgreich Daten zurückgibt, wird der Code innerhalb des Blocks ausgeführt und die Daten werden in unserer Ergebnisvariablen gespeichert.
Speichern Sie die Datei und laden Sie die index.html-Seite in Ihrem Webbrowser neu. Diesmal sehen Sie den aktuellen Preis der Kryptowährungen.
Falls Sie nichts sehen, können Sie die Anleitung zur Verwendung der JavaScript-Entwicklerkonsole lesen und diese zum Debuggen Ihres Codes verwenden. Es kann einen Moment dauern, bis die Seite mit den API-Daten aktualisiert wird.
Sie können auch dieses GitHub-Repository einsehen, das HTML- und JS-Dateien enthält, die Sie zur Kreuzvalidierung herunterladen können. Sie können das Repository auch klonen.
An diesem Punkt haben Sie Ihre Anwendung so angepasst, dass sie Live-Daten zur Überprüfung abruft.
Ergebnis
In weniger als fünfzig Zeilen Code haben Sie eine API-basierte Anwendung mit nur drei Tools erstellt: Vue.js, Axios und der Cryptocompare-API. Sie haben gelernt, wie man Daten auf einer Seite anzeigt, Ergebnisse durchläuft und statische Daten durch API-Ergebnisse ersetzt.
Nachdem Sie nun die Grundlagen verstanden haben, können Sie Ihrer Anwendung zusätzliche Funktionen hinzufügen. Modifizieren Sie diese Anwendung, um weitere Währungen anzuzeigen, oder nutzen Sie die in diesem Tutorial erlernten Techniken, um andere Webanwendungen mit einer anderen API zu erstellen.
