Wie mir meine API-gesteuerte Website hilft, die Welt zu bereisen

(Dies ist ein gesponserter Beitrag.) Kürzlich habe ich beschlossen, meine persönliche Website neu zu erstellen, weil sie sechs Jahre alt war und – höflich gesagt – ein wenig „veraltet“ aussah. Das Ziel war, einige Informationen über mich, einen Blog-Bereich, eine Liste meiner letzten Nebenprojekte und bevorstehende Veranstaltungen einzufügen.

Da ich von Zeit zu Zeit mit Kunden arbeite, gab es eine Sache, mit der ich mich nicht beschäftigen wollte – Datenbanken ! Früher habe ich WordPress-Seiten für alle erstellt, die es wollten. Der Programmierteil hat mir normalerweise Spaß gemacht, aber die Freigaben, das Verschieben von Datenbanken in andere Umgebungen und das eigentliche Veröffentlichen waren immer nervig. Billige Hosting-Anbieter bieten nur schlechte Webinterfaces zum Einrichten von MySQL-Datenbanken und ein FTP-Zugang zum Hochladen von Dateien war immer das Schlimmste. Ich wollte mich damit nicht für meine private Website befassen.

Meine Anforderungen an das Redesign waren also:

• Ein aktueller Technologie-Stack basierend auf JavaScript und Frontend-Technologien.
• Eine Content-Management-Lösung, um Inhalte von überall aus zu bearbeiten.
• Eine gut funktionierende Website mit schnellen Ergebnissen.

In diesem Artikel möchte ich Ihnen zeigen, was ich gebaut habe und wie sich meine Website überraschenderweise zu meinem täglichen Begleiter entwickelt hat.

Definieren eines Inhaltsmodells

Das Veröffentlichen von Dingen im Web scheint einfach zu sein. Wählen Sie ein Content-Management-System ( CMS ), das einen WYSIWYG - Editor ( W hat Sie sehen, ist, was Sie bekommen ) für jede benötigte Seite bereitstellt , und alle Redakteure können den Inhalt einfach verwalten. Das ist es, oder?

Nachdem ich mehrere Kunden-Websites erstellt hatte, von kleinen Cafés bis hin zu wachsenden Startups, stellte ich fest, dass der heilige WYSIWYG-Editor nicht immer die Wunderwaffe ist, nach der wir alle suchen. Diese Schnittstellen zielen darauf ab, das Erstellen von Websites zu vereinfachen, aber hier kommt der Punkt:

Das Erstellen von Websites ist nicht einfach

Um den Inhalt einer Website zu erstellen und zu bearbeiten, ohne sie ständig zu beschädigen, müssen Sie über fundierte HTML-Kenntnisse verfügen und zumindest ein wenig CSS verstehen. Das können Sie von Ihren Redakteuren nicht erwarten.

Ich habe schrecklich komplexe Layouts gesehen, die mit WYSIWYG-Editoren erstellt wurden, und ich kann gar nicht alle Situationen aufzählen, in denen alles auseinanderbricht, weil das System zu anfällig ist. Diese Situationen führen zu Kämpfen und Unannehmlichkeiten, bei denen sich alle Parteien gegenseitig für etwas beschuldigen, das unvermeidlich war. Ich habe immer versucht, diese Situationen zu vermeiden und komfortable, stabile Umgebungen für Redakteure zu schaffen, um wütende E-Mails zu vermeiden, in denen „Hilfe! Alles ist kaputt."

Strukturierter Inhalt erspart Ihnen einige Probleme

Ich habe ziemlich schnell gelernt, dass Leute selten etwas kaputt machen, wenn ich alle benötigten Website-Inhalte in mehrere Teile aufteile, die alle miteinander in Beziehung stehen, ohne an eine Darstellung zu denken. In WordPress kann dies mit benutzerdefinierten Beitragstypen erreicht werden. Jeder benutzerdefinierte Beitragstyp kann mehrere Eigenschaften mit einem eigenen, leicht verständlichen Textfeld enthalten. Ich habe das Konzept des Denkens in Seiten vollständig begraben.

Meine Aufgabe war es, die Inhaltselemente zu verbinden und aus diesen Inhaltsblöcken Webseiten zu erstellen. Das bedeutete, dass Redakteure ihre Websites nur geringfügig oder gar nicht optisch verändern konnten. Sie waren für den Inhalt und nur für den Inhalt verantwortlich. Visuelle Änderungen mussten von mir vorgenommen werden – nicht jeder konnte die Seite gestalten, und wir konnten eine fragile Umgebung vermeiden. Dieses Konzept fühlte sich wie ein großartiger Kompromiss an und wurde normalerweise gut angenommen.

Später entdeckte ich, dass ich ein Inhaltsmodell definierte. Rachel Lovinger definiert in ihrem ausgezeichneten Artikel „Content Modeling: A Master Skill“ ein Inhaltsmodell wie folgt:

„Ein Inhaltsmodell dokumentiert alle verschiedenen Arten von Inhalten, die Sie für ein bestimmtes Projekt haben werden. Es enthält detaillierte Definitionen der Elemente jedes Inhaltstyps und ihrer Beziehungen zueinander.“

Mit der Inhaltsmodellierung zu beginnen, funktionierte für die meisten Kunden gut, bis auf einen.

„Stefan, ich definiere nicht dein Datenbankschema!“

Die Idee dieses einen Projekts war es, eine riesige Website zu bauen, die viel organischen Traffic erzeugen sollte, indem sie Tonnen von Inhalten bereitstellt – in allen Variationen, die auf mehreren verschiedenen Seiten und Orten angezeigt werden. Ich habe ein Treffen anberaumt, um unsere Strategie zur Herangehensweise an dieses Projekt zu besprechen.

Ich wollte alle Seiten und Inhaltsmodelle definieren, die enthalten sein sollten. Es spielte keine Rolle, welches winzige Widget oder welche Seitenleiste der Kunde im Sinn hatte, ich wollte, dass es klar definiert ist. Mein Ziel war es, eine solide Inhaltsstruktur zu schaffen, die es ermöglicht, eine einfach zu bedienende Oberfläche für die Redakteure bereitzustellen, und wiederverwendbare Daten bereitstellt, um sie in jedem denkbaren Format anzuzeigen.

Es stellte sich heraus, dass die Idee dieses Projekts nicht sehr klar war und ich nicht alle meine Fragen beantworten konnte. Der Projektleiter hat nicht verstanden, dass wir mit der richtigen Inhaltsmodellierung beginnen sollten (nicht mit Design und Entwicklung). Für ihn war dies nur eine Tonne Seiten. Doppelte Inhalte und riesige Textbereiche, um eine große Menge Text hinzuzufügen, schienen kein Problem zu sein. Seiner Meinung nach waren die Fragen, die ich zur Struktur hatte, technischer Art, und sie sollten sich darüber keine Gedanken machen müssen. Um es kurz zu machen, ich habe das Projekt nicht gemacht.

Wichtig ist, dass es bei der Inhaltsmodellierung nicht um Datenbanken geht.

Es geht darum, Ihre Inhalte zugänglich und zukunftssicher zu machen. Wenn Sie die Anforderungen für Ihre Inhalte beim Projektstart nicht definieren können, wird es sehr schwierig, wenn nicht gar unmöglich, sie später wiederzuverwenden.

Die richtige Inhaltsmodellierung ist der Schlüssel zu aktuellen und zukünftigen Websites.

Inhaltlich: Ein Headless CMS

Es war klar, dass ich auch für meine Seite eine gute Inhaltsmodellierung verfolgen wollte. Allerdings gab es noch eine Sache. Ich wollte mich beim Erstellen meiner neuen Website nicht mit der Speicherschicht befassen, also entschied ich mich für Contentful, ein Headless-CMS, an dem ich (vollständiger Haftungsausschluss!) Derzeit arbeite. „Headless“ bedeutet, dass dieser Dienst eine Webschnittstelle zur Verwaltung der Inhalte in der Cloud und eine API bietet, die mir meine Daten im JSON-Format zurückgibt. Die Wahl dieses CMS hat mir geholfen, sofort produktiv zu sein, da mir innerhalb von Minuten eine API zur Verfügung stand und ich mich nicht um eine Infrastruktureinrichtung kümmern musste. Contentful bietet auch einen kostenlosen Plan, der sich perfekt für kleine Projekte wie meine persönliche Website eignet.

Eine Beispielabfrage zum Abrufen aller Blogbeiträge sieht folgendermaßen aus:

 <a href="https://cdn.contentful.com/spaces/space_id/entries?access_token=access_token&content_type=post">https://cdn.contentful.com/spaces/space_id/entries?access_token=access_token&content_type=post</a>

Und die Antwort sieht in verkürzter Form so aus:

 { "sys": { "type": "Array" }, "total": 7, "skip": 0, "limit": 100, "items": [ { "sys": { "space": {...}, "id": "455OEfg1KUskygWUiKwmkc", "type": "Entry", "createdAt": "2016-07-29T11:53:52.596Z", "updatedAt": "2016-11-09T21:07:19.118Z", "revision": 12, "contentType": {...}, "locale": "en-US" }, "fields": { "title": "How to React to Changing Environments Using matchMedia", "excerpt": "...", "slug": "how-to-react-to-changing-environments-using-match-media", "author": [...], "body": "...", "date": "2014-12-26T00:00+02:00", "comments": true, "externalUrl": "https://4waisenkinder.de/blog/2014/12/26/handle-environment-changes-via-window-dot-matchmedia/" }, {...}, {...}, {...}, {...}, {...}, {...} ] } }

Das Tolle an Contentful ist, dass es großartig in der Inhaltsmodellierung ist, was ich brauchte. Über die bereitgestellte Weboberfläche kann ich schnell alle benötigten Inhalte definieren. Die Definition eines bestimmten Inhaltsmodells in Contentful wird als Inhaltstyp bezeichnet. Eine großartige Sache, die hier hervorgehoben werden sollte, ist die Fähigkeit, Beziehungen zwischen Inhaltselementen zu modellieren. Ich kann zum Beispiel einen Autor ganz einfach mit einem Blogbeitrag verbinden. Dies kann zu strukturierten Datenbäumen führen, die sich perfekt für verschiedene Anwendungsfälle wiederverwenden lassen.

Also habe ich mein Inhaltsmodell eingerichtet, ohne über Seiten nachzudenken, die ich in Zukunft erstellen möchte.

Der nächste Schritt war, herauszufinden, was ich mit diesen Daten machen wollte. Ich habe einen Designer gefragt, den ich kannte, und er hat eine Indexseite der Website mit der folgenden Struktur erstellt.

Rendern von HTML-Seiten mit Node.js

Jetzt kam der heikle Teil. Bisher musste ich mich nicht mit Storage und Datenbanken auseinandersetzen, was für mich eine tolle Leistung war. Wie kann ich also meine Website erstellen, wenn mir nur eine API zur Verfügung steht?

Mein erster Ansatz war der Do-it-yourself-Ansatz. Ich fing an, ein einfaches Node.js-Skript zu schreiben, das die Daten abrufen und etwas HTML daraus rendern würde.

Das Rendern aller HTML-Dateien im Voraus erfüllte eine meiner Hauptanforderungen. Statisches HTML kann sehr schnell bereitgestellt werden.

Schauen wir uns also das Skript an, das ich verwendet habe.

 'use strict'; const contentful = require('contentful'); const template = require('lodash.template'); const fs = require('fs'); // create contentful client with particular credentials const client = contentful.createClient({ space: 'your_space_id', accessToken: 'your_token' }); // cache templates to not read // them over and over again const TEMPLATES = { index : template(fs.readFileSync(`${__dirname}/templates/index.html`)) }; // fetch all the data Promise.all([ // get posts client.getEntries({content_type: 'content_type_post_id'}), // get events client.getEntries({content_type: 'content_type_event_id'}), // get projects client.getEntries({content_type: 'content_type_project_id'}), // get talk client.getEntries({content_type: 'content_type_talk_id'}), // get specific person client.getEntries({'sys.id': 'person_id'}) ]) .then(([posts, events, projects, talks, persons]) => { const renderedHTML = TEMPLATES.index({ posts, events, projects, talks, person : persons.items[0] }) fs.writeFileSync(`${__dirname}/build/index.html`, renderedHTML); console.log('Rendered HTML'); }) .catch(console.error);

 <!doctype html> <html lang="en"> <head> <!-- ... --> </head> <body> <!-- ... --> <h2>Posts</h2> <ul> <% posts.items.forEach( function( talk ) { %> <li><%- talk.fields.title %> <% }) %> </ul> <!-- ... --> </body> </html>

Dies funktionierte gut. Ich konnte meine gewünschte Website völlig flexibel aufbauen und alle Entscheidungen über die Dateistruktur und Funktionalität treffen. Das Rendern unterschiedlicher Seitentypen mit völlig unterschiedlichen Datensätzen war überhaupt kein Problem. Jeder, der gegen Regeln und Struktur eines bestehenden CMS gekämpft hat, das mit HTML-Rendering ausgeliefert wird, weiß, dass völlige Freiheit eine hervorragende Sache sein kann. Gerade wenn das Datenmodell mit der Zeit immer komplexer wird und viele Relationen enthält — Flexibilität zahlt sich aus.

In diesem Node.js-Skript wird ein Contentful SDK-Client erstellt und alle Daten werden mithilfe der Client-Methode getEntries . Alle bereitgestellten Methoden des Clients sind Promise-gesteuert, wodurch tief verschachtelte Callbacks einfach vermieden werden können. Für das Templating habe ich mich für die Templating-Engine von lodash entschieden. Schließlich bietet Node.js zum Lesen und Schreiben von Dateien das native fs -Modul, das dann zum Lesen der Vorlagen und zum Schreiben des gerenderten HTML verwendet wird.

Dieser Ansatz hatte jedoch einen Nachteil; es war sehr nackt. Auch wenn diese Methode völlig flexibel war, fühlte es sich an, als würde man das Rad neu erfinden. Was ich gebaut habe, war im Grunde ein statischer Site-Generator, und es gibt bereits viele davon. Es war an der Zeit, noch einmal von vorne anzufangen.

Sich für einen echten statischen Site-Generator entscheiden

Bekannte Static-Site-Generatoren, zum Beispiel Jekyll oder Middleman, arbeiten normalerweise mit Markdown-Dateien, die in HTML gerendert werden. Redakteure arbeiten damit, und die Website wird mit einem CLI-Befehl erstellt. Dieser Ansatz verfehlte jedoch eine meiner ursprünglichen Anforderungen. Ich wollte die Seite überall bearbeiten können und mich nicht auf Dateien auf meinem privaten Computer verlassen müssen.

Meine erste Idee war, diese Markdown-Dateien mit der API zu rendern. Das hätte zwar funktioniert, aber es fühlte sich nicht richtig an. Das Rendern von Markdown-Dateien zur späteren Umwandlung in HTML waren immer noch zwei Schritte, die im Vergleich zu meiner ursprünglichen Lösung keinen großen Vorteil boten.

Glücklicherweise gibt es Contentful-Integrationen, zB für Metalsmith und Middleman. Ich habe mich für dieses Projekt für Metalsmith entschieden, da es in Node.js geschrieben ist und ich keine Ruby-Abhängigkeit einbringen wollte.

Metalsmith wandelt Dateien aus einem Quellordner um und rendert sie in einem Zielordner. Diese Dateien müssen nicht unbedingt Markdown-Dateien sein. Sie können es auch zum Transpilieren von Sass oder zum Optimieren Ihrer Bilder verwenden. Es gibt keine Grenzen und es ist wirklich flexibel.

Mithilfe der Contentful-Integration konnte ich einige Quelldateien definieren, die als Konfigurationsdateien verwendet wurden, und konnte dann alles Notwendige von der API abrufen.

 --- title: Blog contentful: content_type: content_type_id entry_filename_pattern: ${ fields.slug } entry_template: article.html order: '-fields.date' filter: include: 5 layout: blog.html description: >- Recent articles by Stefan Judis. ---

Diese Beispielkonfiguration rendert den Blog-Post-Bereich mit einer übergeordneten blog.html -Datei, einschließlich der Antwort auf die API-Anfrage, rendert aber auch mehrere untergeordnete Seiten mithilfe der Vorlage article.html . Dateinamen für die untergeordneten Seiten werden über entry_filename_pattern definiert.

Wie Sie sehen, kann ich mit so etwas meine Seiten einfach aufbauen. Dieses Setup funktionierte perfekt, um sicherzustellen, dass alle Seiten von der API abhängig waren.

Verbinden Sie den Dienst mit Ihrem Projekt

Der einzige fehlende Teil bestand darin, die Website mit dem CMS-Dienst zu verbinden und sie neu zu rendern, wenn Inhalte bearbeitet wurden. Die Lösung für dieses Problem – Webhooks, mit denen Sie vielleicht bereits vertraut sind, wenn Sie Dienste wie GitHub verwenden.

Webhooks sind Anfragen von Software as a Service an einen zuvor definierten Endpunkt, die Sie darüber informieren, dass etwas passiert ist. GitHub kann Sie beispielsweise zurückpingen, wenn jemand einen Pull-Request in einem Ihrer Repos geöffnet hat. Beim Content Management können wir hier das gleiche Prinzip anwenden. Wann immer etwas mit dem Inhalt passiert, pingen Sie einen Endpunkt und lassen Sie eine bestimmte Umgebung darauf reagieren. In unserem Fall würde dies bedeuten, den HTML-Code mit metalsmith neu zu rendern.

Um Webhooks zu akzeptieren, habe ich mich auch für eine JavaScript-Lösung entschieden. Der von mir gewählte Hosting-Anbieter (Uberspace) ermöglicht es, Node.js zu installieren und serverseitig JavaScript zu verwenden.

 const http = require('http'); const exec = require('child_process').exec; const server = http.createServer((req, res) => { res.setHeader('Content-Type', 'text/plain'); // check for secret header // to not open up this endpoint for everybody if (req.headers.secret === 'YOUR_SECRET') { res.end('ok'); // wait for the CDN to // invalidate the data setTimeout(() => { // execute command exec('npm start', { cwd: __dirname }, (error) => { if (error) { return console.log(error); } console.log('Rebuilt success'); }); }, 1000 * 120 ); } else { res.end('Not allowed'); } }); console.log('Started server at 8000'); server.listen(8000);

Dieses Skript startet einen einfachen HTTP-Server auf Port 8000. Es überprüft eingehende Anfragen auf einen korrekten Header, um sicherzustellen, dass es sich um den Webhook von Contentful handelt. Wenn die Anfrage als Webhook bestätigt wird, wird der vordefinierte Befehl npm start ausgeführt, um alle HTML-Seiten neu zu rendern. Sie fragen sich vielleicht, warum es eine Zeitüberschreitung gibt. Dies ist erforderlich, um Aktionen für einen Moment anzuhalten, bis die Daten in der Cloud ungültig sind, da die gespeicherten Daten von einem CDN bereitgestellt werden.

Abhängig von Ihrer Umgebung ist dieser HTTP-Server möglicherweise nicht über das Internet zugänglich. Meine Site wird über einen Apache-Server bereitgestellt, daher musste ich eine interne Rewrite-Regel hinzufügen, um den laufenden Node-Server für das Internet zugänglich zu machen.

 # add node endpoint to enable webhooks RewriteRule ^rerender/(.*) https://localhost:8000/$1 [P]

API-First und strukturierte Daten: Beste Freunde für immer

Zu diesem Zeitpunkt konnte ich alle meine Daten in der Cloud verwalten und meine Website würde bei Änderungen entsprechend reagieren.

Wiederholung überall

Unterwegs zu sein ist ein wichtiger Teil meines Lebens, daher war es notwendig, Informationen wie den Standort eines bestimmten Veranstaltungsortes oder das von mir gebuchte Hotel direkt zur Hand zu haben – normalerweise in einer Google-Tabelle gespeichert. Jetzt waren die Informationen über eine Tabelle, mehrere E-Mails, meinen Kalender sowie auf meiner Website verteilt.

Ich muss zugeben, dass ich in meinem täglichen Arbeitsablauf viele Daten dupliziert habe.

Der Moment der strukturierten Daten

Ich träumte von einer einzigen Quelle der Wahrheit (vorzugsweise auf meinem Handy), um schnell zu sehen, welche Veranstaltungen anstehen, aber auch zusätzliche Informationen über Hotels und Veranstaltungsorte zu erhalten. Die auf meiner Website aufgeführten Veranstaltungen enthielten zu diesem Zeitpunkt noch nicht alle Informationen, aber es ist wirklich einfach, neue Felder zu einem Inhaltstyp in Contentful hinzuzufügen. Also habe ich die benötigten Felder zum Inhaltstyp „Ereignis“ hinzugefügt.

Diese Informationen in mein Website-CMS einzufügen, war nie meine Absicht, da sie nicht online angezeigt werden sollten, aber durch den Zugriff über eine API wurde mir klar, dass ich mit diesen Daten jetzt ganz andere Dinge tun könnte.

Erstellen einer nativen App mit JavaScript

Das Erstellen von Apps für Mobilgeräte ist seit Jahren ein Thema, und es gibt mehrere Ansätze dazu. Progressive Web Apps (PWA) sind heutzutage ein besonders heißes Thema. Mithilfe von Service Workern und einem Web-App-Manifest ist es möglich, mithilfe von Webtechnologien vollständige App-ähnliche Erfahrungen zu erstellen, die von einem Startbildschirmsymbol bis hin zu verwaltetem Offline-Verhalten reichen.

Es gibt einen Nachteil zu erwähnen. Progressive Web Apps sind auf dem Vormarsch, aber sie sind noch nicht ganz da. Service Worker beispielsweise werden heute von Safari nicht unterstützt und von Apples Seite bisher nur „in Erwägung gezogen“. Dies war für mich ein Deal-Breaker, da ich auch auf iPhones eine offline-fähige App haben wollte.

Also suchte ich nach Alternativen. Ein Freund von mir war total begeistert von NativeScript und erzählte mir immer wieder von dieser ziemlich neuen Technologie. NativeScript ist ein Open-Source-Framework zum Erstellen wirklich nativer mobiler Apps mit JavaScript, also habe ich beschlossen, es auszuprobieren.

NativeScript kennenlernen

Die Einrichtung von NativeScript dauert eine Weile, da Sie eine Menge Dinge installieren müssen, um für native mobile Umgebungen zu entwickeln. Wenn Sie das NativeScript-Befehlszeilentool zum ersten Mal mit npm install nativescript -g , werden Sie durch den Installationsprozess geführt.

Anschließend können Sie Gerüstbaubefehle verwenden, um neue Projekte einzurichten: tns create MyNewApp

Dies habe ich jedoch nicht getan. Ich habe die Dokumentation durchgesehen und bin auf eine in NativeScript erstellte Beispiel-App zur Verwaltung von Lebensmitteln gestoßen. Also nahm ich diese App, vertiefte mich in den Code und modifizierte ihn Schritt für Schritt, um ihn an meine Bedürfnisse anzupassen.

Ich möchte nicht zu tief in den Prozess eintauchen, aber es hat nicht lange gedauert, eine gut aussehende Liste mit allen Informationen zu erstellen, die ich wollte.

NativeScript spielt wirklich gut zusammen mit Angular 2, was ich dieses Mal nicht ausprobieren wollte, da sich die Entdeckung von NativeScript selbst groß genug anfühlte. In NativeScript schreibt man „Views“. Jede Ansicht besteht aus einer XML-Datei, die das Basislayout und optional JavaScript und CSS definiert. All dies wird in einem Ordner pro Ansicht definiert.

Das Rendern einer einfachen Liste kann mit einer XML-Vorlage wie dieser erreicht werden:

 <!-- call JavaScript function when ready --> <Page loaded="loaded"> <ActionBar title="All Travels" /> <!-- make it scrollable when going too big --> <ScrollView> <!-- iterate over the entries in context --> <ListView items="{{ entries }}"> <ListView.itemTemplate> <Label text="{{ fields.name }}" textWrap="true" class="headline"/> </ListView.itemTemplate> </ListView> </ScrollView> </Page>

Als erstes wird hier ein Seitenelement definiert. Innerhalb dieser Seite habe ich eine ActionBar definiert, um ihr den klassischen Android-Look sowie eine passende Überschrift zu verleihen. Das Erstellen von Dingen für native Umgebungen kann manchmal etwas schwierig sein. Um beispielsweise ein funktionierendes Bildlaufverhalten zu erreichen, müssen Sie eine 'ScrollView' verwenden. Das Letzte ist dann, einfach mit einer ListView über meine Ereignisse zu iterieren. Insgesamt fühlte es sich ziemlich einfach an!

Aber woher kommen diese Einträge, die in der Ansicht verwendet werden? Es stellt sich heraus, dass es ein gemeinsames Kontextobjekt gibt, das dafür verwendet werden kann. Beim Lesen des XML für die Ansicht ist Ihnen vielleicht schon aufgefallen, dass die Seite einen loaded Attributsatz hat. Indem ich dieses Attribut setze, sage ich der Ansicht, dass sie eine bestimmte JavaScript-Funktion aufrufen soll, wenn die Seite geladen wird.

Diese JavaScript-Funktion ist in der abhängigen JS-Datei definiert. Es kann zugänglich gemacht werden, indem es einfach mit exports.something exportiert wird. Um die Datenbindung hinzuzufügen, müssen wir lediglich ein neues Observable auf die Seiteneigenschaft bindingContext . Observables in NativeScript geben propertyChange -Ereignisse aus, die benötigt werden, um auf Datenänderungen innerhalb der Ansichten zu reagieren, aber Sie müssen sich darüber keine Gedanken machen, da es sofort einsatzbereit ist.

 const context = new Observable({ entries: null}); const fetchModule = require('fetch'); // export loaded to be called from // List.xml when everything is loaded exports.loaded = (args) => { const page = args.object; page.bindingContext = context; fetchModule.fetch( `https://cdn.contentful.com/spaces/${config.space}/entries?access_token=${config.cda.token}&content_type=event&order=fields.start`, { method: "GET", headers: { 'Content-Type': 'application/json' } } ) .then(response => response.json()) .then(response => context.set('entries', response.items)); }

Als letztes müssen die Daten abgerufen und in den Kontext gesetzt werden. Dies kann mithilfe des NativeScript- fetch -Moduls erfolgen. Hier sehen Sie das Ergebnis.

Wie Sie also sehen können, ist das Erstellen einer einfachen Liste mit NativeScript nicht wirklich schwierig. Später habe ich die App um eine weitere Ansicht sowie zusätzliche Funktionen erweitert, um bestimmte Adressen in Google Maps und Webansichten zu öffnen, um die Veranstaltungswebsites anzusehen.

Eine Sache, auf die hier hingewiesen werden sollte, ist, dass NativeScript noch ziemlich neu ist, was bedeutet, dass die auf npm gefundenen Plugins normalerweise nicht viele Downloads oder Sterne auf GitHub haben. Das hat mich zunächst irritiert, aber ich habe mehrere native Komponenten verwendet (nativescript-floatingactionbutton, nativescript-advanced-webview und nativescript-pulltorefresh), die mir geholfen haben, ein natives Erlebnis zu erreichen, und alle funktionierten einwandfrei.

Das verbesserte Ergebnis sehen Sie hier:

Je mehr Funktionalität ich in diese App einbaute, desto mehr mochte ich sie und desto mehr benutzte ich sie. Das Beste daran ist, dass ich die Datenduplizierung beseitigen konnte, die Daten alle an einem Ort verwaltete und gleichzeitig flexibel genug war, um sie für verschiedene Anwendungsfälle anzuzeigen.

Seiten waren gestern: Es lebe strukturierter Inhalt!

Das Erstellen dieser App hat mir einmal mehr gezeigt, dass das Prinzip, Daten im Seitenformat zu haben, der Vergangenheit angehört. Wir wissen nicht, wohin unsere Daten gehen – wir müssen für eine unbegrenzte Anzahl von Anwendungsfällen gerüstet sein.

Was ich rückblickend erreicht habe, ist:

• Ein Content-Management-System in der Cloud haben
• Sie müssen sich nicht um die Datenbankpflege kümmern
• Ein vollständiger JavaScript-Technologie-Stack
• Eine effiziente statische Website haben
• Eine Android-App zu haben, um jederzeit und überall auf meine Inhalte zugreifen zu können

Und der wichtigste Teil:

Dass meine Inhalte strukturiert und zugänglich waren, half mir, mein tägliches Leben zu verbessern.

Dieser Anwendungsfall mag Ihnen im Moment trivial erscheinen, aber wenn Sie an die Produkte denken, die Sie jeden Tag erstellen, gibt es immer mehr Anwendungsfälle für Ihre Inhalte auf verschiedenen Plattformen. Heute akzeptieren wir, dass mobile Geräte endlich die Desktop-Umgebungen der alten Schule überholen, aber Plattformen wie Autos, Uhren und sogar Kühlschränke warten bereits auf ihr Rampenlicht. Ich kann mir nicht einmal vorstellen, welche Anwendungsfälle kommen werden.

Versuchen wir also, bereit zu sein und strukturierte Inhalte in die Mitte zu stellen, denn am Ende geht es nicht um Datenbankschemata – es geht darum , für die Zukunft zu bauen.

Weiterführende Literatur zu SmashingMag:

• Web-Scraping mit Node.js
• Segeln mit Sails.js: Ein Framework im MVC-Stil für Node.js
• 40 Reisesymbole, um Ihre Designs aufzupeppen
• Eine ausführliche Einführung in Webpack