Lieblingsbuchlisten-App mit Cosmic JS

TL;DR

Laden Sie das Github-Repository herunter

Schauen Sie sich die Demo an

Einleitung
Diese App bietet begeisterten Leserfans die Möglichkeit, eine Liste ihrer Lieblingsbücher anzuzeigen. Mit Cosmic JS können Sie dieser Liste Bücher hinzufügen und zusätzlich einen Link zum Kauf des Buches. Die Hauptseite zeigt die aktuellen Bücher in der Liste mit einer kurzen Beschreibung/Kommentar zum Buch. Um weitere Informationen über das Buch zu erhalten, klicken Sie auf die Schaltfläche „Weitere Informationen“. Dadurch gelangen Sie zu der Seite, auf der eine vollständige Beschreibung/Kommentar des Buchs zusammen mit dem vollständigen Bild und einem Link zum Kauf bei Amazon angezeigt wird.

Backend vorbereiten
Der erste Schritt besteht darin, einen Bucket zu erstellen. Danach müssen wir einen Objekttyp erstellen, um die Bücher in unserer App zu beschreiben. Um dies in Ihrem Bucket zu erreichen, klicken Sie auf „Objekttyp hinzufügen“. Für die Buch-App haben wir einen Titel mit Autor und drei Metafelder. Die drei Metafelder, die wir verwenden werden, sind: ein „Website“-Titel mit einem Link zur Amazon-Kaufseite, ein „Bild“-Titel-Metafeld mit einer Bild-URL und ein „Kommentar“-Titel-Metafeld mit einer Beschreibung/einem Kommentar.

Damit ist das Backend-Setup mit Cosmic JS abgeschlossen. Wie Sie sehen können, ist es einfach, Bücher oder jede Art von Inhalt zu Cosmic JS hinzuzufügen.

Einstieg
Ich habe Node JS als Backend-Sprache verwendet, da der NPM-Manager von Node ein perfektes Tool für die Verwendung mit Cosmic JS ist. Erstellen Sie zunächst einen Ordner mit dem Titel BookApp. Dies ist das Verzeichnis, in dem die App gespeichert wird. Für das Frontend-Framework habe ich mich für Semantic UI entschieden. Dies funktioniert hervorragend, wenn Sie eine Website zum Laufen bringen und mit den Standardauswahlen gut aussehen.

Nach diesem Setup habe ich eine app.js-Datei, index.ejs und show.ejs erstellt. Die Datei app.js enthält den Speicherort für alle Routen und die Einrichtung für die Anwendung. Ich habe Bucket.getObjects verwendet, um alle Daten für die Bücher zu erfassen. Dies ist ein supereinfacher Vorgang und erfordert nur ein paar Codezeilen.

Auf der Indexseite richte ich die Spalten und Segmente für die Anzeige der Bücher ein. In dieser Datei habe ich die Objekte in Cosmic JS durchlaufen und alle Daten jeweils in einem Segment mit dem entsprechenden Inhalt angezeigt. Semantic UI macht es einfach, Dinge in einem Segment innerhalb eines Containers zusammenzufassen.

Die letzte Datei ist die Datei show.ejs. Diese Datei wurde angezeigt, wenn auf die Schaltfläche „Weitere Informationen“ geklickt wurde. Dies wurde durch Schreiben einer Get-Anforderung und Identifizieren des spezifischen Slugs erreicht. Der Slug spielt die Rolle einer ID für dieses bestimmte Buch. Sobald der Slug für diesen Objekttyp identifiziert wurde, wurden diese Daten an die Datei show.ejs übergeben. Hier wurde der Inhalt wieder mithilfe von Segmenten angezeigt, ähnlich wie auf der Seite index.ejs.

Bereitstellen
Als Nächstes stellen Sie Ihre Buch-App bereit. Cosmic JS macht das wirklich einfach. Für diese Anwendung müssen Sie lediglich Ihre Datei „package.json“ hinzufügen. Unter dem Abschnitt „Skripte“ müssen wir „start“: node app.js hinzufügen. Wenn Sie auf Cosmic JS auf Deployment klicken, wird gesucht, was ausgeführt werden soll, und wir müssen sicherstellen, dass node app.js aufgerufen wird.

Für die eigentliche Bereitstellung ist es so einfach, zu Einstellungen -> Webhosting -> Auf Cosmic bereitstellen zu gehen. Sie erhalten dann eine Bestätigungs-E-Mail, wenn Ihre App ordnungsgemäß bereitgestellt wurde. Ist dies nicht der Fall, wird auf der Bereitstellungsseite ein Fehlerprotokoll angezeigt, mit dessen Hilfe ermittelt werden kann, was behoben werden muss, damit die Bereitstellung korrekt erfolgt.

Fazit
Insgesamt ist Cosmic JS ein großartiges Tool zum Erstellen Ihrer Anwendungen. Es macht es einfach und schnell, Inhalte hinzuzufügen und zu bearbeiten. Durch die Verwendung von etwas wie Cosmic JS können Sie schnell großartige Anwendungen erstellen, und ist das nicht das, was wir alle wollen?

Similar Posts

Leave a Reply

Your email address will not be published.