Foto von Chris Becker auf Unsplash

So verwenden Sie API-first-Plattformen, um Ihre Websites schneller zu erstellen

Tools wie Jekyll, Hugo oder Hexo haben in den letzten Jahren statische Websites populär gemacht. Mit dem sogenannten JAMstack können Sie hochdynamische Inhalte ohne Back-End-Layer bereitstellen. Darüber hinaus haben Entwickler-APIs Front-End-Entwicklern ermöglicht, noch komplexere Funktionen zu erstellen. Dies können sie tun, ohne die Browser-Sandbox zu verlassen. Lassen Sie uns sehen, wie Sie moderne API-First-Plattformen nutzen können, um einen soliden Prototyp einer Geschäftsanwendung zu liefern. Der in diesem Artikel vorgestellte Ansatz kann sich als nützlich für die Toolbox Ihres Lösungsarchitekten erweisen.

Das Tutorial besteht aus 2 Teilen:

  • Die erste zeigt Ihnen, wie Sie die Anwendung so gestalten, dass Sie einen so genannten Happy Path erhalten. Wir erstellen einen halbautomatischen Prototyp, mit dem Sie Benutzerfeedback zu einer Demo-Sitzung erhalten können
  • Im zweiten Abschnitt wird erläutert, wie die Automatisierung von Geschäftsprozessen verstärkt wird, damit die App den frühen Datenverkehr in der Produktion verarbeiten kann

Was ist eine API-first-Plattform?

Wie es Ed Shelley von ChartMogul beschreibt, gibt es einige kaum zu übersehende Merkmale eines solchen Dienstes:

  • Es gibt KEINE Benutzeroberfläche (GUI). In einigen Fällen gibt es eine grafische Benutzeroberfläche, die jedoch dem Kernprodukt nachgeordnet ist.
  • Die Interaktion mit dem Service erfolgt über eine webbasierte API. Dies ist eine programmgesteuerte Methode zum Verbinden von Diensten und zum maschinenlesbaren Übertragen von Daten über das Internet.
  • Der Wert des Dienstes ist normalerweise in den über die API bereitgestellten Daten enthalten.
  • Die Preisgestaltung erfolgt häufig nach Verwendungszweck, dh die Kosten richten sich nach der Anzahl der an die API gestellten Anforderungen.

Grundsätzlich bieten sie eine Reihe von Bausteinen, in der Regel im SaaS-Modell. Mit diesen können Sie eine bestimmte Funktionalität mit weniger Code erstellen. Einer der ersten und wahrscheinlich bemerkenswertesten Vertreter ist Stripe.Stripe, der bei der Zahlungsabwicklung hilft. Sie haben jedoch vielleicht schon von anderen großen Fischen gehört, die kürzlich auf dem Markt aufgetaucht sind, wie Twilio oder Algolia.

Warum eine API-first-Plattform verwenden?

Beginnen wir mit einem kleinen Haftungsausschluss. In diesem Lernprogramm wird beschrieben, wie Sie Anwendungen ohne Server entwickeln. Wir glauben jedoch, dass dies kein pragmatischer Ansatz für die Softwarearchitektur ist.

Wir möchten vielmehr einige Teile Ihrer Back-End-Maschinen hervorheben, die Sie nicht von Grund auf neu implementieren müssen. Dies gilt insbesondere dann, wenn die Geschäftsanforderungen für ein bestimmtes Feature nicht in Stein gemeißelt sind und Sie das Ziel haben, sie tatsächlich zu ermitteln. Mit anderen Worten, um herauszufinden, ob die Funktionalität von den Benutzern positiv aufgenommen wird und irgendwann einen Platz in Ihrem Produkt hat.

Gleichzeitig möchten Sie Ihr Produkt nicht an einen Anbieter binden, der eine sofort einsatzbereite Lösung bietet. Dies liegt daran, dass Sie wissen, dass dies früher oder später zu einer „Workaround-Hölle“ führen wird. Und wie Sie gelernt haben, ist es schwierig, von dort zurückzukehren.

Stellen Sie sich beispielsweise vor, Ihr Unternehmen möchte ein Blog erstellen. Darüber hinaus haben sie bereits erklärt, dass sie es erweitern und später monetarisieren möchten. Es gibt zwei implizite Anforderungen, die Sie berücksichtigen müssen, bevor Sie in einem solchen Szenario einen Tech-Stack erstellen können:

  • Sie möchten die Blog-Funktionalität schnell bereitstellen - Unternehmen können nicht lange auf ein einfaches Blog warten.
  • Sie möchten nicht mit dem Jonglieren von Wordpress-Plugins enden.

Die Art der Werkzeuge, die wir präsentieren möchten, könnte die Antwort sein. Sie geben Ihnen einige funktionale Bausteine ​​und Ihre einzige Aufgabe ist es, sie an Ihr Unternehmen anzupassen.

Sie werden glücklich, weil Sie die volle Kontrolle über Ihre Codebasis haben. Darüber hinaus freut sich auch das Management, dass sie ab dem 1. Tag einen Mehrwert erhalten. Außerdem müssen sie nicht im Voraus bezahlen!

Lassen Sie uns nun zeigen, wie diese Tools wochenlang Entwicklungszeit sparen und gleichzeitig Ihre Codebasis für Änderungen offen halten können.

Hinweis: Die Tools, die wir verwenden werden, funktionieren auch im serverseitigen Modus. Sie bieten tatsächlich mehr Funktionen, wenn sie über sichere API-Schlüssel verbunden sind. Wir finden es daher pragmatischer, es serverseitig zu integrieren. Als Experiment verwenden wir jedoch nur die clientseitige Funktionalität. Darüber hinaus werden wir Zapier-Kleber verwenden, um verschiedene Geschäftsprozesse schnell zu automatisieren.

nostalgia.io

Wir werden einen Marktplatz für die bekannten Berater für Webtechnologien aufbauen - nostalgia.io. Wenn Sie vielleicht Hilfe bei einem alten System suchen, das auf Struts oder Google Web Toolkit basiert, sind Sie hier genau richtig. Im ersten Teil dieses Tutorials erfahren Sie, wie Sie mehrere API-first-Plattformen nutzen, um die folgenden Funktionen bereitzustellen:

  • Durchsuchen älterer Technologien
  • Volltextsuche und Filterung von Experten
  • Buchungstermine mit Experten
  • Rabatt mit Gutscheinen

Der Tech-Stack besteht aus:

  • Contentful - als Datenbank für Technologien und Experten
  • Algolia - für die Volltextsuche
  • Timekit - zur Verfügbarkeitsprüfung und Buchung
  • Typeform - für Formulare
  • Voucherify - für die Gutscheinverwaltung (Haftungsausschluss: Dies ist unser Produkt)

Hinweis: Die Authentifizierung und die Zahlungsabwicklung selbst werden nicht behandelt. Sie können versuchen, sie selbst als Hausaufgabe zu implementieren (Hinweis: auth0 und Stripe könnten hilfreich sein).

Lassen Sie uns in den Code springen.

Hinweis 1: Der Kürze halber beschreiben wir keine detaillierte schrittweise Anleitung. Sie sollten die fehlenden Teile in den technischen Daten nachschlagen. Glücklicherweise verfügen API-First-Anbieter in der Regel über entwicklerfreundliche Dokumente, eine umfassende API-Referenz und Dutzende nützlicher Handbücher.

Hinweis 2: Es gibt viele Möglichkeiten, wie Sie Ihre statische Website hosten können. Wir verwenden die Glitch-Entwicklungsplattform, damit Sie sie problemlos neu mischen und selbst damit spielen können.

Hinweis 3: Es ist uns egal, wie die Anwendung aussieht und sich anfühlt, damit der Integrationsteil nicht verdeckt wird. Außerdem passt er irgendwie zum Geschäftsthema, nicht wahr? :)

Datenmodell - Inhaltlich

Normalerweise beginnt der Entwurf der Anwendung mit einem Datenbeziehungsmodell. Dies sollte auch für uns das erste Anliegen sein. Aber lassen Sie uns die Diskussion der Datenbankanbieter für einen Moment überspringen und direkt zu den Modellen springen. Wieso das?

Meet Contentful - ein kopfloses CMS. Mit einer starken Vereinfachung können Sie sich das als Wordpress ohne Frontend vorstellen.

Es ermöglicht:

  • Entwickler können die auf das Medium abgestimmten Inhalte, sei es eine Website, eine mobile App oder ein VR-Gerät, über die RESTful-API bereitstellen
  • Marketingfachleute können Inhalte erstellen, verwalten und veröffentlichen, ohne sich mit der Formatierung befassen zu müssen - mit der Unterstützung des Dashboards zur Inhaltsmodellierung und des Rich-Text-Editors

Wir werden Contentful verwenden, um zwei grundlegende Entitäten zu erstellen - "Technologie" und "Experte". Ein Experte kennt eine oder mehrere Technologien. Lassen Sie uns sehen, wie einfach es ist, solche Objekte zu erstellen, echte Objekte hinzuzufügen und sie auf einer statischen Seite anzuzeigen.

Technologie-Browser

Mit dem Modellmanager von Contentful ist das Entwerfen einer Entität so einfach wie das Ziehen und Ablegen neuer Felder in den Modellmanager für Dateninhalte. Es gibt 8 verschiedene Typen. Dazu gehört die Standardeinstellung wie eine Zeichenfolge oder eine Zahl. Es gibt auch bestimmte Typen, wie z. B. Speicherort oder Datenträger, die nützliche Eigenschaften aufweisen.

Erstelle einen kostenlosen Account. Befolgen Sie dann die Anweisungen zum Einsteigen, um einen Platz zu erstellen.

Erstellen Sie schließlich Ihr erstes Modell, ähnlich wie im folgenden Screenshot dargestellt:

Nachdem Sie das Technologiemodell haben, wechseln Sie zur Registerkarte Inhalt, um einige Instanzen zu erstellen. Wie Sie sehen, bietet Contentful einen intuitiven Editor für die Dateneingabe. Es kümmert sich um Datenüberprüfung, Lokalisierung, Veröffentlichungsstatus, Versionskontrolle und vieles mehr. Es ist in erster Linie eine Plattform für Entwickler. Diese Funktionen überzeugen jedoch auch Vermarkter und Content-Manager.

Wenn Sie genug geklickt haben, können Sie mit der Codierung beginnen. Die erste Aufgabe besteht darin, die soeben erstellten Technologien anzuzeigen. Dazu verwenden wir Contentful JavaScript SDK.

Es vereinfacht das Abrufen von Technologien und besteht aus drei Schritten:

  • Erstellen Sie ein neues Glitch-Website-Projekt, laden Sie das Skript contentful.js und initialisieren Sie es mit den Anmeldeinformationen, die Sie im Abschnitt API finden.

Hinweis: In Contentful stehen zwei Arten von Schlüsseln zur Verfügung. Eine ist für das Content-Management und eine für die Bereitstellung von Inhalten.
Der erste Typ kann zum programmgesteuerten Erstellen, Aktualisieren oder Löschen neuer Modelle oder ihrer Instanzen verwendet werden.
Mit der zweiten Option können Sie Ihre Inhalte auf Ihre Website oder App übertragen.
Diese Unterscheidung wurde aus Sicherheitsgründen getroffen. Sie möchten Ihre Content-Management-Schlüssel nicht auf Ihrer Website veröffentlichen, oder? Gleiches gilt für die anderen API-first-Plattformen, die wir in diesem Tutorial verwenden.

  • Rufen Sie die Methode getEntries auf. Dadurch wird der Inhalt gemäß Ihren Abfrageparametern geladen. In unserem Fall möchten wir nur die "Technologie" -Entitäten laden. Bauen Sie ein Front-End auf den Daten auf. Was Sie von Contentful erhalten, ist reines JSON (Beispiel). Jetzt können Sie es Ihren Benutzern anzeigen, wie Sie möchten. Dies ist einer der größten Profis, wenn Sie Ihre Inhalte an mehrere Geräte anpassen möchten oder müssen.

Schauen Sie sich diesen Kern an:

Kurz und bündig, nicht wahr? Den Gesamteffekt sehen Sie hier.

Hinzufügen von Experten und die Suche

Nun möchten wir die Liste der Experten anzeigen, wenn jemand eine bestimmte Technologie auswählt. Das sollte ungefähr so ​​sein, wie wir es vor einer Sekunde mit Technologie gemacht haben. Aber machen wir es etwas weiter. Was ist, wenn wir Experten durchsuchbar machen wollen? Denken Sie an die Volltextsuche in ihren Profilen und auch an einen Preisfilter.

Natürlich können Sie es auf Contentful aufbauen. Fügen Sie beispielsweise eine weitere Entität hinzu, konfigurieren Sie Suchmechanismen und Benutzeroberfläche mit getEntries, aber es gibt einen schnelleren Weg. Und mit "schneller" meine ich sowohl die Implementierungszeit als auch die Geschwindigkeit, mit der Suchergebnisse geladen werden.

Wir werden einen anderen API-Anbieter verwenden - Algolia. Ihre Plattform macht es einfach, eine superschnelle Volltextsuche zu erstellen und zu pflegen. Sie kümmern sich um Tippfehler, Synonyme, Geosuche und andere kleine Probleme. Diese Probleme würden Sie höchstwahrscheinlich bemerken, wenn Ihre Suchfunktion in Produktion geht.

Wie funktioniert es? Sie verwenden lediglich eine RESTful-API, um die Engine mit den Daten zu versorgen. Anschließend konfigurieren Sie, welche Attribute durchsuchbar sein sollen und wie die Ergebnisse eingestuft werden sollen. Mit dem JavaScript-SDK können Sie jeder Website die sofortige Suche ermöglichen. Machen wir unsere Experten jetzt durchsuchbar!

Wir beginnen mit der Erstellung eines Datenmodells in Contentful und der Erstellung einer Beziehung zur Technologieeinheit. Anschließend erstellen wir einen Algolia-Index und fügen ihm unsere Entitäten (JSON-Format) hinzu.

Fügen Sie ein weiteres Inhaltsmodell mit den unten angezeigten Feldern hinzu:

Beachten Sie, dass wir mit dem Feldtyp "Referenz" eine Eins-zu-Viele-Beziehung hergestellt haben. Wir möchten nur darauf hinweisen, dass jeder Experte mehr als eine Technologie kennt. Fügen Sie anschließend einige Experten hinzu und weisen Sie sie manuell ihren Technologien zu. Verwenden Sie mehrere Technologien für einen der Experten.

Sie sollten am Ende eine ähnliche Liste haben:

Und die JSON-Struktur sieht folgendermaßen aus:

Laden wir unsere Experten nach Algolien hoch. Eröffnen Sie ein kostenloses Konto, gehen Sie zum Abschnitt Indizes und führen Sie NEW INDEX aus.

Jetzt müssen wir unsere Einheiten von Contentful nach Algolia übertragen. Wir hätten einen dedizierten Migrator einsetzen können. Dies ist ein fantastisches Tool, das Ihre Inhalte automatisch lädt. In diesem Fall werden die Contentful-Systeminformationen (siehe Übersicht oben) aus den effektiven JSONs entfernt. Es kann auch Beziehungen auflösen. Anstelle von IDs senden Sie beispielsweise die tatsächlichen Namen, wenn es um das Feld "Technologien" geht. Schließlich wird es mit dem Algolia-Index synchronisiert.

Aber wir werden es absichtlich manuell machen. Wir brauchen eine kleine Verbesserung in der Art und Weise, wie wir unseren Index erstellen. Daher ist die Eins-zu-Eins-Synchronisierung mit dem Migrator in unserem Fall keine Option.

Wenn wir die Sucheingabe auf einer Technologiesite verwenden, möchten wir natürlich nur die Experten der ausgewählten Technologie in die Suchergebnisse einbeziehen. Wie Sie im Expert JSON-Beispiel sehen können, werden Technologien als Array von Objekten dargestellt. Das Problem ist, dass Sie mit Algolia keine Facette erstellen können, die die Daten basierend auf einem verschachtelten Array von Objekten filtert.

Sie schlagen vor, das Expertenobjekt in so viele Unterobjekte wie die Anzahl der Technologien aufzuteilen. Im Fall von Javier Hernandez, der zwei Frameworks kennt, sollten wir zwei Objekte hinzufügen:

{
  Name: "Javier Hernandez",
  Technologien: {
    Name: "Google Web Toolkit"
    … // andere Eigenschaften
  }
  … // andere Eigenschaften
}
{
  Name: "Javier Hernandez"
  Technologien: {
    Name: "Apache Struts 1"
    … // andere Eigenschaften
  }
  … // andere Eigenschaften
}

Als Übung können Sie ein Skript erstellen, das Experten aufteilt und sie über die Algolia-API zum Index hinzufügt. Sie benötigen serverseitige Algolia-Authentifizierungsschlüssel. Hier ist ein Ausschnitt, der die Aufteilungslogik behandelt. Beachten Sie, dass das Skript auch die Systeminformationen von Contentful löscht.

Dies macht die Objekte leichter und beschleunigt die Suche:

Da wir 6 Experten haben und 2 von ihnen 2 Technologien kennen, sollten wir am Ende 8 Objekte im Index haben. Alternativ zur API-Einfügemethode können Sie diese über das Dashboard hochladen. Nach dem Hochladen können Sie versuchen, mithilfe der Suche im Dashboard zu ermitteln, wie schnell Algolia die Daten filtert.

Jetzt sind wir fast bereit, unsere Suche mit Algolien zu verbinden. Fast - weil wir eine Facette erstellen müssen, mit der wir die Ergebnisse nach Technologie und Preis filtern können. Gehen Sie zu ANZEIGE und wählen Sie unter "Attribute für Facettierung" den Namen und den Preis der Technologie aus und klicken Sie dann auf Speichern.

Schließlich können wir unsere Suche mit unserem Index verknüpfen, damit er die Ergebnisse abruft und anzeigt. Algolia wird mit einer erweiterten JavaScript-Bibliothek geliefert, die es Ihnen ganz einfach macht.

Sehen Sie sich diesen Code an:

Beachten Sie, wie wir die Suche so konfigurieren, dass der Technologiefilter in den Zeilen 8–10 verwendet wird. Sehen Sie, wie einfach es ist, die Ergebnisseite an einen entsprechenden Container anzupassen - Zeile 28 (obwohl es in den Dokumenten schwer zu finden ist).

Insgesamt mit etwa 2 Dutzend Zeilen und Sie erhalten diese:

Bisher haben wir einen einfachen Expertenbrowser erstellt, der die Volltextsuche und Preisregler unterstützt. Das Hinzufügen neuer Experten ist zu diesem Zeitpunkt mühsam, da Sie diese zunächst manuell in Contentful erstellen und dann mit Algolia synchronisieren müssen. Wir werden dies im zweiten Teil automatisieren.

Die gute Nachricht ist, dass Sie diesen Prototyp bereits verwenden können, um frühzeitig Feedback für das Durchsuchen von Technologien und das Filtern von Experten zu erhalten. Im nächsten Schritt erstellen Sie die Expertenprofilseite und aktivieren die Buchung.

Den Demo-Code für die Suche finden Sie in experts.html.

Buchungen

Wie Sie vielleicht erraten haben, werden wir die Kalenderfunktionen auch nicht von Grund auf neu implementieren. Wir werden Timekit verwenden. Sie bieten das API + Dashboard zum Verwalten von Kalendern und Buchungen für Personen und Ressourcen. Stellen Sie es sich als eine Google / Outlook-Kalender-Engine vor, die mit der REST-API verfügbar gemacht wird.

So machen Sie Experten mit Timekit buchbar:

  • Erstellen Sie eine Ressourcenentität und eine zugewiesene Kalenderentität
  • Speichern Sie die Ressourcen- und Kalender-IDs in einer entsprechenden Expertenentität in Contentful
  • Verwenden Sie das Timekit JS SDK, um den Kalender auf der Profilseite eines Experten anzuzeigen

Und das war's, Sie haben gerade Buchungen in Betrieb genommen! Glaubst du mir nicht? Weiter lesen:

  • Erstellen Sie ein Konto und starten Sie eine kostenlose Testversion (es gibt keine kostenlose Version).
  • Erstellen Sie ein Projekt, in dem Sie die grundlegenden Mechanismen des Kalenders definieren. Zum Beispiel Ereignisdauer, Mindestbenachrichtigung und Erinnerungen.
  • Legen Sie fest, ob die Buchungsanfragen automatisch angenommen werden sollen oder manuell bestätigt werden müssen.

Erstellen Sie für jeden Experten eine Ressource und innerhalb dieser Ressource einen Kalender. Beachten Sie, dass eine Ressource möglicherweise mehr als einen Kalender enthält.

Dies ist eine nette Funktion, die Sie berücksichtigen sollten, wenn Sie Upgrades im Geschäftsmodell von Nostalgia planen.

Jetzt müssen wir die E-Mail-Adresse der Ressource, die neu erstellte Kalender-ID und den clientseitigen API-Schlüssel in der entsprechenden Expertenentität in Contentful speichern.

Sie können das Experten-Inhaltsmodell bearbeiten und ein JSON-Feld mit dem Namen timekit hinzufügen. Ändern Sie dann die Expertenentitäten, um Details zum Timekit hinzuzufügen.

Im letzten Schritt wird der aktuelle Kalender auf der Profilseite des Experten angezeigt. Sie kennen den Vorgang bereits. Fügen Sie ein SDK-Skript hinzu und konfigurieren Sie es ordnungsgemäß, um das Widget zu rendern.

Aber diesmal müssen wir 2 Bibliotheken laden:

  • Inhaltlich - zum Laden von Kundendaten, einschließlich Timekit-Anmeldeinformationen
  • Timekit - um den Kalender zu platzieren, der einem bestimmten Experten zugewiesen ist

Hier ist der Code:

Beachten Sie, wie wir die Buchungsdetails wie Zeitfenster anpassen können (Zeile 39). Timekit bietet noch mehr Anpassungsmöglichkeiten. Lesen Sie daher unbedingt die Spezifikation booking.js.

Der Effekt haut uns einfach um. Zwanzig Codezeilen und wir haben unser Buchungs-Widget installiert. Timekit überwacht den gesamten Prozess für Sie. Es hilft bei der Lösung von Konflikten und sendet E-Mail-Bestätigungen an Experten und Kunden.

Das Wichtigste ist, dass dieser Ansatz sehr flexibel ist. Alles im Code. Jeder einzelne Teil dieses Mechanismus kann über die API angepasst werden.

Angenommen, wir möchten eine Buchungsanfrage prüfen, bevor wir sie annehmen. Es ist einfach so, dass Timekit dies mit einer einzigen Flagge ermöglicht. Solche Optionen sind die eigentliche Stärke von API-First-Lösungen. Lesen Sie unbedingt die Tutorials und Dokumente, um alle Funktionen kennenzulernen.

Gutscheine

Nostalgie ist noch kein bekanntes Geschäft. Wir müssen einen Weg finden, um Early Adopters zu gewinnen. Eine der ältesten und erfolgreichsten Methoden sind Rabatte. Ein Rabatt kann entweder nach dem Einlösen eines Gutscheins oder aufgrund der Menge der im Warenkorb befindlichen Produkte gewährt werden. Um beide Fälle zu implementieren, können Sie Voucherify verwenden.

Warum Voucherify? Es gibt ein paar grundlegende Dinge, die Sie richtig machen sollten, wenn Sie Gutscheine richtig handhaben möchten, um sich jede Menge Engineering-Zeit zu sparen:

  • Eindeutigkeit von Gutscheincodes - Um Betrug zu reduzieren und Ihre Werbekampagnen genau zu verfolgen
  • Erweiterbarer Coupon-Validierungsmechanismus - Dies ist ein allgemeiner Ansatz, der das Hinzufügen / Entfernen / Ablaufen mehrerer Coupon-Codes ermöglicht
  • Einfaches Überwachen der Einlösung - Dies beantwortet Fragen der Marketing- und Kundendienstabteilung auf Anhieb

Sie können sich selbst um diese 3 Dinge kümmern. Mit Voucherify-API-Endpunkten können Sie jedoch mit ein paar Zeilen dasselbe Ergebnis erzielen. Auf diese Weise können Sie die missbräuchliche Verwendung von Gutscheinen sofort vergessen und in der „Wenn“ -Leiter prüfen, ob der Code aktiv und gültig ist. Sie können auch darauf verzichten, Marketing-Teams die Ergebnisse von Coupon-Kampagnen zur Verfügung zu stellen. Sie werden auch nicht in den Protokollen nachvollziehen, warum die Einlösung eines Kunden fehlgeschlagen ist.

Erstellen wir einen Bulk von 1000 Gutscheinen. Diese senden wir unseren Early Adopters. Lassen Sie uns den Kunden zum Schluss die Möglichkeit geben, sie tatsächlich auf unserer Website zu verwenden, um von ermäßigten Preisen zu profitieren.

Melden Sie sich für ein Voucherify-Konto an und rufen Sie den Kampagnenmanager auf, um den ersten Stapel von Gutscheincodes zu erstellen. Nehmen wir an, jeder Gutschein bringt 25% Rabatt.

Im Manager können Sie die Rabattdetails und andere Geschäftslimits angeben. Geben Sie beispielsweise das Ablaufdatum, den maximalen Gesamtbetrag oder ein bestimmtes Kundensegment an, für das der Rabatt gewährt werden kann.

Wenn der Manager fertig ist, können Sie Coupons über verschiedene Kanäle verteilen. Voucherify bietet E-Mail, SMS, Push-Benachrichtigung, Gegensprechanlage oder Hartlot. Dank REST-API und Webhooks gibt es jedoch noch viele andere Möglichkeiten.

Bevor Sie sie versenden, sollten Sie den Kunden die Möglichkeit geben, sie einzulösen. Dies kann erreicht werden, indem der Einlösungsendpunkt von der API verwendet wird. Sie können jedoch auch das vorgefertigte Widget von voucherify.js verwenden.

Mit Voucherify können Sie den Gutschein entweder validieren oder einlösen.

Die Validierung prüft, ob:

  • Der Gutschein kommt von Ihrem Voucherify-Konto
  • ist nicht abgelaufen oder deaktiviert
  • Es entspricht allen Geschäftsregeln

Die Einlösung führt zuerst die Validierung durch und markiert anschließend den Coupon als verwendet. In diesem Teil wird die Validierung nur durchgeführt, um Kunden einen ermäßigten Preis anzuzeigen. Im zweiten Artikel senden wir eine Rücknahmeanforderung, sobald die Buchung bestätigt wurde.

Fügen Sie voucherify.js Snippet und optional die entsprechende CSS-Datei hinzu, um ein besseres Erscheinungsbild zu erhalten. Dann geben Sie den folgenden Code ein:

Die Bibliothek erstellt ein Gutschein-Widget, das den Code automatisch anhand der Voucherify-API überprüft.

Sie können es mit den Codes testen, die wir mit dem Kampagnenmanager vorab generiert haben:
* 25% Rabatt: nstlg-CCAMIDFf, nstlg-wZK4CoLs, nstlg-V8eV9A3p
* $ 5 Rabatt: uub-nstlg, afl-nstlg, yeq-nstlg
* abgelaufener Code: VuFF2Wyy

Beachten Sie, dass Sie Codemuster, -präfixe und -nachbesserungen leicht anpassen können, was für die Nachverfolgung und Berichterstellung hilfreich sein kann.

Fügen Sie nun einen beliebigen Gutscheincode in das Widget ein und sehen Sie den entsprechenden Rabatt:

Im zweiten Artikel erfahren Sie, wie Sie die erfolgreichen und fehlgeschlagenen Coupon-Einlösungen überwachen, um festzustellen, ob Ihre Werbekampagne auf dem richtigen Weg ist.

Voucherify bietet viel mehr. In den Dokumenten und Beispielen erfahren Sie, wie Sie erweiterte Promotions- und Empfehlungsprogramme in Tagen statt in Monaten erstellen können.

Den Buchungscode finden Sie hier (scheduler.html).

Rekapitulieren

Wir wollten einen Proof of Concept für eine neue Geschäftsanwendung erstellen - Nostalgia.io. Ein Prototyp, mit dem wir die Gehirne früher Benutzer ermitteln können. Etwas, das wir in einem anständigen Zeitraum liefern können, aber nicht vollständig wegwerfen.

Hoffentlich haben wir Sie davon überzeugt, dass Sie dies mit Tools wie Contentful, Algolia, Timekit oder Voucherify erreichen können. Noch wichtiger ist, dass Sie dies tun können, ohne überhaupt eine Back-End-Ebene einzurichten.

Es sind noch einige manuelle Arbeiten erforderlich, um die Daten zwischen den Tools synchron zu halten. Die Flexibilität und Geschwindigkeit der Iteration dieser API-first-Tools, die Sie jederzeit zur Hand haben, macht dies jedoch definitiv wett.

Natürlich sind diese Werkzeuge nicht alle hell und hell. Bei der Durcharbeitung dieses Artikels sind wir beispielsweise auf folgende Probleme gestoßen:

  • Die inhaltliche getEntry () -Methode löst keine Links auf. Wir mussten stattdessen getEntries () verwenden, um eine einzelne Expertenentität mit einer Profilbild-URL zu erhalten
  • Wir haben mehr als eine Weile gebraucht, um zu verstehen, wie wir die Ergebnisse mithilfe des Spaltenlayouts anzeigen können (Standard sind Zeilen).
  • In Timekit kann die Kalenderinstanzkonfiguration nicht mit einer externen ID abgerufen werden. Aus diesem Grund müssen Kalendertoken in Contentful in einer Expertenentität gespeichert werden
  • Mit dem Voucherify-Widget können Sie keinen anderen gültigen Code versuchen, ohne die Website zu aktualisieren

Ich bin mir sicher, dass es noch viel mehr davon gibt. Sie können diese kleinen Probleme jedoch in weitaus kürzerer Zeit lösen, als Sie für die Neuerstellung dieser Funktionen aufwenden würden. Darüber hinaus vermeiden Sie die schwerwiegenden und zeitaufwendigen Architekturfehler, die die Teams auf diesen Plattformen vor Ihnen gemacht haben.

Den Quellcode des Projekts finden Sie hier. Und die Demo ist hier live!

Härten und Skalieren

Wie Sie sehen, sind einige Prozesse noch manuell und daher mühsam:

  • Neue Experten hinzufügen
  • Experten durchsuchbar machen
  • Kalender für Experten erstellen

Im nächsten Teil werden wir diese Services mit Zapier zusammenfügen. Zapier ist eine Plattform, die das Verbinden von API-First-Plattformen erleichtert. Auf diese Weise reduzieren wir die manuelle Arbeit, die zur Ausführung der oben genannten Geschäftsabläufe erforderlich ist. Experten können sich beispielsweise selbst anmelden. Darüber hinaus erstellt die Plattform alle erforderlichen Entitäten programmgesteuert.

Zuletzt werden wir den Prototyp zur Produktion bringen. Es wird immer noch eine frühe Anwendung sein, aber es wird robuster und bereit sein, echte Kunden zu bedienen. Bleib dran!

Update: Den zweiten Teil finden Sie hier.