Hey, lass mich mit dem Jamstack eine funktionale Kalender -App erstellen

Hey, erstellen wir eine funktionale Kalender -App mit dem Jamstack

Ich habe mich immer gefragt, wie die dynamische Zeitplanung funktioniert hat, also habe ich beschlossen, umfangreiche Recherchen durchzuführen, neue Dinge zu lernen und über den technischen Teil der Reise zu schreiben. Es ist nur fair, Sie zu warnen: Alles, was ich hier berichte, ist drei Wochen Forschungsforschung, die zu einem einzigen Artikel zusammengefasst sind. Obwohl es anfängerfreundlich ist, ist es eine gesunde Menge an Lesen. Also, bitte, ziehen Sie einen Stuhl hoch, setzen Sie sich hin und lass uns ein Abenteuer haben.

Mein Plan war es, etwas zu erstellen, das wie Google -Kalender aussah, aber nur drei Kernfunktionen demonstrieren:

1. Listen Sie alle vorhandenen Ereignisse in einem Kalender auf
2. Neue Ereignisse erstellen
3. Zeitplan- und E -Mail -Benachrichtigung basierend auf dem Datum, das während der Erstellung gewählt wurde. Der Zeitplan sollte einen Code ausführen, um den Benutzer per E -Mail zu senden, wenn die Zeit stimmt .

Hübsch, richtig? Machen Sie es bis zum Ende des Artikels, denn das ist es, was wir machen werden.

Das einzige Wissen, das ich hatte, um meinen Code zu bitten, zu einer späteren oder verzögerten Zeit zu laufen, waren Cron Jobs. Der einfachste Weg, einen Cron -Job zu verwenden, besteht darin, einen Job in Ihrem Code statisch zu definieren. Dies ist Ad -hoc - statisch bedeutet, dass ich ein Ereignis wie Google -Kalender nicht einfach planen kann und es einfach meinen Cron -Code aktualisieren kann. Wenn Sie mit dem Schreiben von Cron -Triggern erfahren haben, spüren Sie meinen Schmerz. Wenn dies nicht der Fall ist, haben Sie Glück, dass Sie Cron auf diese Weise vielleicht nie benutzen müssen.

Um mehr über meine Frustration einzugehen, musste ich einen Zeitplan auslösen, der auf einer Nutzlast von HTTP -Anfragen basiert. Die Daten und Informationen zu diesem Zeitplan würden über die HTTP -Anfrage übergeben. Dies bedeutet, dass es keine Möglichkeit gibt, Dinge wie das geplante Datum vorher zu wissen.

Wir (meine Kollegen und ich) haben einen Weg gefunden, um diese Arbeit zu machen, und mit Hilfe von Sarah Drasners Artikel über dauerhafte Funktionen verstand ich, was ich musste, das ich lernte (und in dieser Angelegenheit verlernen). Sie erfahren über alles, was ich in diesem Artikel gearbeitet habe, von der Erstellung von E -Mails bis hin zur E -Mail -Planung bis hin zu Kalendereinträgen. Hier ist ein Video der App in Aktion:

https://www.youtube.com/watch?v=simam4fxpoo&&

Sie können die subtile Verzögerung bemerken. Dies hat nichts mit dem Ausführungszeitpunkt des Zeitplans oder dem Ausführen des Codes zu tun. Ich teste mit einem kostenlosen SendGrid -Konto, von dem ich vermute, dass es eine Latenz hat. Sie können dies bestätigen, indem Sie die serverlose Funktion testen, ohne E -Mails zu senden. Sie würden feststellen, dass der Code genau zur geplanten Zeit ausgeführt wird.

Werkzeuge und Architektur

Hier sind die drei grundlegenden Einheiten dieses Projekts:

1. React Frontend : Kalender -Benutzeroberfläche, einschließlich der Benutzeroberfläche zum Erstellen, Aktualisieren oder Löschen von Ereignissen.
2. 8Base GraphQL : Eine Back-End-Datenbankschicht für die App. Hier werden wir unser Datum speichern, lesen und aktualisieren. Der lustige Teil ist, dass Sie keinen Code für dieses Back -End schreiben.
3. Langlebige Funktionen : Langlebige Funktionen sind eine Art serverlose Funktionen, die die Möglichkeit haben, sich an ihren Zustand aus früheren Ausführungen zu erinnern. Dies ersetzt Cron -Jobs und löst das zuvor beschriebene Ad -hoc -Problem.

Der Rest dieses Beitrags wird drei Hauptabschnitte haben, die auf den drei oben gesehenen Einheiten basieren. Wir werden sie nacheinander nehmen, sie ausbauen, sie testen und sogar die Arbeit einsetzen. Bevor wir damit eingehen, setzen wir uns mit einem Starterprojekt ein, das ich gemacht habe, um uns anzufangen.

Projektrepo

Erste Schritte

Sie können dieses Projekt auf unterschiedliche Weise einrichten-entweder als Vollstapelprojekt mit den drei Einheiten in einem Projekt oder als eigenständiges Projekt mit jeder Einheit, die in seiner eigenen Wurzel lebt. Nun, ich habe mit dem ersten gegangen, weil es prägnanter, leichter zu unterrichten und überschaubar ist, da es ein Projekt ist.

Die App wird ein Projekt für das Erstellen von React-Apps sein, und ich habe einen Starter für uns gemacht, um die zu errichtete Barriere zu senken. Es kommt mit Zusatzcode und Logik, die wir nicht erklären müssen, da sie nicht im Rahmen des Artikels liegen. Das Folgende ist für uns eingerichtet:

1. Kalenderkomponente
2. Modale und Popover -Komponenten für die Präsentation von Ereignisformen
3. Ereignisformularkomponente
4. Einige GraphQL -Logik zum Abfragen und Mutieren von Daten
5. Ein dauerhaftes serverloses Funktionsgerüst, in dem wir die Scheduler schreiben werden

Tipp: Jede vorhandene Datei, die uns wichtig ist, befindet sich oben im Dokument einen Kommentarblock. Der Kommentarblock zeigt Ihnen an, was derzeit in der Codedatei und in einem Aufgabenabschnitt passiert, in dem beschrieben wird, was wir als nächstes tun müssen.

Beginnen Sie zunächst den Starterformular GitHub:

 Git Clone -B Starter ---single-branch https://github.com/christiannwamba/calendar-app.git

Installieren Sie die in der Stammpaket.json -Datei beschriebenen NPM -Abhängigkeiten sowie das serverlose paket.json:

 NPM Installation

Orchestrierte dauerhafte Funktionen für die Planung

Es gibt zwei Wörter, die wir zuerst aus dem Weg gehen müssen, bevor wir verstehen können, was dieser Begriff ist - Orchestrierung und langlebig .

Die Orchestrierung wurde ursprünglich verwendet, um eine Ansammlung gut koordinierter Ereignisse, Aktionen usw. zu beschreiben. Sie wird stark in der Computing geliehen, um eine reibungslose Koordination von Computersystemen zu beschreiben. Das Schlüsselwort ist die Koordinate . Wir müssen zwei oder mehr Einheiten eines Systems auf koordinierte Weise zusammenstellen.

Langlebig wird verwendet, um alles zu beschreiben, was das herausragende Merkmal länger hat.

Setzen Sie die Systemkoordination und langlebig zusammen und Sie erhalten dauerhafte Funktionen. Dies ist die leistungsstärkste Funktion, wenn die serverlose Funktion von Azure. Langlebige Funktionen basieren auf dem, was wir jetzt wissen, diese beiden Funktionen haben:

1. Sie können verwendet werden, um die Ausführung von zwei oder mehr Funktionen zusammenzustellen und sie zu koordinieren, damit Rennbedingungen nicht auftreten (Orchestrierung).
2. Langlebige Funktionen erinnern sich an Dinge. Das macht es so mächtig. Es bricht die Nummer eins von HTTP: Staurlos. Langlebige Funktionen halten ihren Zustand intakt, egal wie lange sie warten müssen. Erstellen Sie einen Zeitplan für 1.000.000 Jahre in der Zukunft und eine dauerhafte Funktion wird nach einer Million Jahren ausgeführt und sich an die Parameter erinnern, die am Tag des Auslösers an sie übergeben wurden. Das bedeutet, dass langlebige Funktionen staatlich sind .

Diese Haltbarkeitsfunktionen schalten einen neuen Bereich von Möglichkeiten für serverlose Funktionen frei und deshalb untersuchen wir heute eine dieser Funktionen. Ich empfehle Sarahs Artikel noch einmal für eine visualisierte Version einiger möglicher Anwendungsfälle von dauerhaften Funktionen.

Ich habe auch eine visuelle Darstellung des Verhaltens der dauerhaften Funktionen gemacht, die wir heute schreiben werden. Nehmen Sie dies als animiertes architektonisches Diagramm:

Eine Datenmutation aus einem externen System (8Base) löst die Orchestrierung durch Aufruf des HTTP -Triggers aus. Der Auslöser ruft dann die Orchestrierungsfunktion auf, die ein Ereignis plant. Wenn die Ausführungszeit fällig ist, wird die Orchestrierungsfunktion erneut aufgerufen, überspringt jedoch diesmal die Orchestrierung und ruft die Aktivitätsfunktion auf. Die Aktivitätsfunktion ist der Aktionsdarsteller. Dies ist die tatsächliche Sache, die passiert, z. B. "E -Mail -Benachrichtigung senden".

Erstellen Sie orchestrierte dauerhafte Funktionen

Lassen Sie mich Sie durch das Erstellen von Funktionen mit VS -Code führen. Sie brauchen zwei Dinge:

1. Ein Azure -Konto
2. Vs Code

Sobald Sie beide eingerichtet haben, müssen Sie sie zusammenbinden. Sie können dies mit einer VS -Code -Erweiterung und einem Knoten -CLI -Tool tun. Beginnen Sie mit der Installation des CLI -Tools:

NPM install -g Azure-Funktionsstörungen-Core-Tools

# ODER

Brew Tap Azure/Funktionen
Brew Installieren Sie Azure-Funktionen-Core-Tools

Installieren Sie als Nächstes die Azure -Funktionserweiterung so, dass sie VS -Code an Funktionen auf Azure gebunden ist. Weitere Informationen zum Einrichten von Azure -Funktionen aus meinem vorherigen Artikel.

Nachdem Sie das gesamte Setup erledigt haben, lassen Sie uns diese Funktionen erstellen. Die Funktionen, die wir erstellen, werden den folgenden Ordnern zugeordnet.

Ordner	Funktion
Zeitplan	Langlebiger HTTP -Auslöser
planorchestrator	Langlebige Orchestrierung
Sendemail	Langlebige Aktivität

Beginnen Sie mit dem Abzug.

1. Klicken Sie auf das Symbol zur Erweiterung von Azure und befolgen Sie das Bild unten, um die Zeitplanfunktion zu erstellen
   
2. Da dies die erste Funktion ist, haben wir das Ordnersymbol für ein Funktionsprojekt ausgewählt. Das Symbol danach erstellt eine einzelne Funktion (kein Projekt).
3. Klicken Sie auf Durchsuchen und erstellen Sie im Projekt einen serverlosen Ordner. Wählen Sie den neuen serverlosen Ordner aus.
4. Wählen Sie JavaScript als Sprache. Wenn TypeScript (oder eine andere Sprache) Ihr Jam ist, fühlen Sie sich bitte frei.
5. Wählen Sie langlebige Funktionen HTTP -Starter. Dies ist der Auslöser.
6. Nennen Sie die erste Funktion als Zeitplan

Erstellen Sie als Nächstes den Orchestrator. Erstellen Sie stattdessen eine Funktion, anstatt ein Funktionsprojekt zu erstellen.

1. Klicken Sie auf das Funktionsymbol:
   
2. Wählen Sie Langlebende Funktionen Orchestrator.
3. Geben Sie ihm einen Namen, einen Zeitplan für die Eingabetaste an.
4. Sie werden gebeten, ein Speicherkonto auszuwählen. Der Orchestrator verwendet Speicher, um den Zustand einer Funktion zu erhalten.
5. Wählen Sie ein Abonnement in Ihrem Azure -Konto aus. In meinem Fall habe ich das kostenlose Testabonnement ausgewählt.
6. Befolgen Sie die wenigen verbleibenden Schritte, um ein Speicherkonto zu erstellen.

Wiederholen Sie schließlich den vorherigen Schritt, um eine Aktivität zu erstellen. Diesmal sollte Folgendes anders sein:

• Wählen Sie Langlebigkeitsfunktionen Aktivität.
• Nennen Sie es sendemail.
• Es wird kein Speicherkonto benötigt.

Planen mit einem dauerhaften HTTP -Auslöser

Der Code in serverless/plan/index.js muss nicht berührt werden. So sieht es ursprünglich aus, wenn die Funktion mit VS -Code oder dem CLI -Tool gerüstet wird.

 const df = fordern ("dauerhafte Funktionen");
module.exports = async Funktion (Kontext, Req) {
  const client = df.getClient (Kontext);
  const instanceId = warte client
  context.log ("Orchestrierung mit id = '$ {InstanceId}'.`);
  return Client.CreateCheckStatusResponse (context.bindingData.req, InstanceId);
};

Was passiert hier?

1. Wir erstellen eine dauerhafte Funktion auf der Clientseite, die auf dem Kontext der Anfrage basiert.
2. Wir rufen den Orchestrator mit der StartNew () -Funktion des Kunden an. Der Orchestrator -Funktionsname wird als erstes Argument über das Params -Objekt übergeben. Ein Req.Body wird ebenfalls an StartNew () als drittes Argument übergeben, das an den Orchestrator weitergeleitet wird.
3. Schließlich geben wir eine Reihe von Daten zurück, mit denen der Status der Orchestrator -Funktion überprüft werden kann, oder den Vorgang sogar abbrechen, bevor er abgeschlossen ist.

Die URL, um die obige Funktion aufzurufen, würde so aussehen:

 http: // localhost: 7071/api/orchestrators/{FunktionName}

Wo Funktionsname der Name ist, der an StartNew übergeben wurde. In unserem Fall sollte es sein:

 // localhost: 7071/api/orchestrators/planorchestrator

Es ist auch gut zu wissen, dass Sie das Aussehen dieser URL ändern können.

Orchestrieren mit einem haltbaren Orchestrator

Der HTTP -Trigger -StartNew -Aufruf ruft eine Funktion auf, die auf dem von uns übergebenen Namen basiert. Dieser Name entspricht dem Namen der Funktion und des Ordners, der die Orchestrierungslogik enthält. Die serverlose/planorchestrator/index.js -Datei exportiert eine dauerhafte Funktion. Ersetzen Sie den Inhalt durch Folgendes:

 const df = fordern ("dauerhafte Funktionen");
module.exports = df.orchestrator (Funktion* (Kontext) {
  const input = context.df.getInput ()
  // todo - 1
  
  // todo - 2
});

Die Orchestrator -Funktion ruft den Anforderungskörper mithilfe von context.df.getInput () aus dem HTTP -Trigger ab.

Ersetzen Sie Todo - 1 durch die folgende Codezeile, die in dieser gesamten Demo das bedeutendste ist:

 Rendite Context.df.CreateTimer (neues Datum (input.startat))

In welcher Zeile erstellt diese Zeile die dauerhafte Funktion, um einen Timer zu erstellen, der auf dem Datum der Anforderungsbehörde über den HTTP -Auslöser basiert.

Wenn diese Funktion ausgeführt und hier kommt, wird sie den Timer und die Kaution vorübergehend ausgelöst. Wenn der Zeitplan fällig ist, kommt er zurück, überspringen Sie diese Zeile und rufen Sie die folgende Zeile an, die Sie anstelle von Todo verwenden sollten - 2.

 Rendite Rendite Context.df.CallActivity ('sendemail', Eingabe);

Die Funktion würde die Aktivitätsfunktion aufrufen, um eine E -Mail zu senden. Wir bestehen auch eine Nutzlast als zweites Argument.

So würde die abgeschlossene Funktion aussehen:

 const df = fordern ("dauerhafte Funktionen");

module.exports = df.orchestrator (Funktion* (Kontext) {
  const input = context.df.getInput ()
    
  Rendite Context.df.CreateTimer (neues Datum (input.startat))
    
  Rendite Rendite Context.df.CallActivity ('sendemail', Eingabe);
});

E -Mail mit einer dauerhaften Aktivität senden

Wenn ein Zeitplan fällig ist, kommt der Orchestrator zurück, um die Aktivität aufzurufen. Die Aktivitätsdatei lebt in serverloser/sendemail/index.js. Ersetzen Sie das, was dort drin ist, durch Folgendes:

 const sgmail = fordert ('@sendgrid/mail');
sgmail.setapikey (process.env ['sendgrid_api_key']);

module.exports = async function (context) {
  // todo - 1
  const msg = {}
  // todo - 2
  MSG zurückgeben;
};

Derzeit importiert es den Mailer von SendGrid und legt den API -Schlüssel fest. Sie können einen API -Schlüssel erhalten, indem Sie diesen Anweisungen folgen.

Ich stelle den Schlüssel in einer Umgebungsvariablen ein, um meine Anmeldeinformationen sicher zu halten. Sie können Ihre sicher auf die gleiche Weise speichern, indem Sie einen SendGrid_api_key -Schlüssel in serverlosen/local.Setings.json mit Ihrem SendGrid -Schlüssel als Wert erstellen:

 {
  "Iscrypted": falsch,
  "Werte": {
    "AzurewebjobStorage": "",
    "Functions_worker_runtime": "node",
    "SENDGRID_API_KEY": ""
  }
}

Ersetzen Sie Todo - 1 durch die folgende Zeile:

 const {E -Mail, Titel, Startat, Beschreibung} = context.bindings.payload;

Dadurch wird die Ereignisinformationen aus der Eingabe aus der Orchestrator -Funktion herausgegeben. Die Eingabe ist an den Kontext angehängt. Payload kann alles sein, was Sie nennen, also gehen Sie zu Serverless/sendemail/function.json und ändern Sie den Namenswert auf Nutzlast:

 {
  "Bindungen": [
    {
      "Name": "Nutzlast",
      "Typ": "ActivityTrigger",
      "Richtung": "In"
    }
  ]
}

Aktualisieren Sie als nächstes TODO - 2 mit dem folgenden Block, um eine E -Mail zu senden:

 const msg = {
  an: E -Mail,
  Von: {E -Mail: '[E -Mail geschützt]', Name: 'Codebeast Calendar'},
  Betreff: `Ereignis: $ {title}`,
  html: `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {Beschreibung} </p>`
};
sgmail.send (msg);

MSG zurückgeben;

Hier ist die komplette Version:

 const sgmail = fordert ('@sendgrid/mail');
sgmail.setapikey (process.env ['sendgrid_api_key']);

module.exports = async function (context) {
  const {E -Mail, Titel, Startat, Beschreibung} = context.bindings.payload;
  const msg = {
    an: E -Mail,
    Von: {E -Mail: '[E -Mail geschützt]', Name: 'Codebeast Calendar'},
    Betreff: `Ereignis: $ {title}`,
    html: `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {Beschreibung} </p>`
  };
  sgmail.send (msg);

  MSG zurückgeben;
};

Bereitstellung von Funktionen für Azure

Das Bereitstellen von Funktionen in Azure ist einfach. Es ist nur ein Klick vom VS -Code -Editor entfernt. Klicken Sie auf das eingekreiste Symbol, um eine URL bereitzustellen und abzurufen:

Immer noch bei mir, so weit in? Sie machen große Fortschritte! Es ist völlig in Ordnung, hier eine Pause einzulegen, ein Nickerchen zu machen, zu dehnen oder sich auszuruhen. Ich habe diesen Beitrag definitiv gemacht.

Daten- und GraphQL -Schicht mit 8Base

Meine einfachste Beschreibung und das Verständnis von 8Base ist „Firebase for GraphQl“. 8Base ist eine Datenbankschicht für jede Art von App, die Sie sich vorstellen können, und der interessanteste Aspekt ist, dass sie auf GraphQL basiert.

Der beste Weg zu beschreiben, wo 8Base in Ihren Stapel passt, besteht darin, ein Bild eines Szenarios zu malen.

Stellen Sie sich vor, Sie sind ein freiberuflicher Entwickler mit einem kleinen bis mittleren Skala-Vertrag, um einen E-Commerce-Geschäft für einen Kunden zu erstellen. Ihre Kernfähigkeiten sind im Internet, sodass Sie sich am hinteren Ende nicht sehr wohl fühlen. Sie können zwar ein bisschen Knoten schreiben.

Leider erfordert E-Commerce das Verwalten von Lagerbeständen, das Bestellmanagement, das Verwalten von Einkäufen, die Verwaltung von Authentifizierung und Identität usw. „Verwalten“ auf grundlegender Ebene bedeutet nur Daten-CRUD- und Datenzugriff.

Was wäre, wenn wir diese Geschäftsanforderungen in einer Benutzeroberfläche beschreiben könnten? Was ist, wenn wir Tabellen erstellen können, mit denen wir CRUD -Operationen, Auth und Zugriff konfigurieren können? Was wäre, wenn wir solche Hilfe hätten und uns nur darauf konzentrieren, Frontend -Code zu erstellen und Abfragen zu schreiben? Alles, was wir gerade beschrieben haben, wird von 8Base angegriffen

Hier ist eine Architektur einer Back-End-App, die auf 8Base als Datenschicht beruht:

Erstellen Sie eine 8Base -Tabelle für Ereignisse Speicher und Abruf

Das erste, was wir tun müssen, bevor wir eine Tabelle erstellen, ist, ein Konto zu erstellen. Sobald Sie ein Konto haben, erstellen Sie einen Arbeitsbereich, der alle Tabellen und Logik für ein bestimmtes Projekt enthält.

Erstellen Sie als nächstes eine Tabelle, nennen Sie die Tabellenereignisse und füllen Sie die Tabellenfelder aus.

Wir müssen Zugriffsstufen konfigurieren. Im Moment gibt es nichts zu verbergen von jedem Benutzer, sodass wir einfach den gesamten Zugriff auf die von uns erstellte Ereignisstabelle einschalten können:

Das Einrichten von AUTH ist mit 8Base super einfach, da es in Auth0 integriert ist. Wenn Sie Entitäten haben, die geschützt werden müssen oder unser Beispiel für die Verwendung von AUTH erweitern möchten, werden Sie bitte wild.

Greifen Sie schließlich Ihre Endpunkt -URL für die Verwendung in der React -App:

Testen von GraphQL -Abfragen und Mutation auf dem Spielplatz

Um sicherzugehen, dass wir bereit sind, die URL in die Wildnis zu bringen und den Kunden zu bauen, lassen Sie uns die API zunächst mit einem GraphQL -Spielplatz testen und sehen, ob das Setup in Ordnung ist. Klicken Sie auf den Explorer.

Fügen Sie die folgende Abfrage in den Editor ein.

 Abfrage {
  EventList {
    zählen
    Artikel {
      Ausweis
      Titel
      Startat
      Endat
      Beschreibung
      Allday
      E-Mail
    }
  }
}

Ich habe einige Testdaten über die 8Base -Benutzeroberfläche erstellt und erhalte das Ergebnis zurück, wenn ich ausführte, dass sie abfragen:

Sie können die gesamte Datenbank mit dem Schema -Dokument am richtigen Ende der Explore -Seite untersuchen.

Kalender- und Ereignisformularschnittstelle

Die dritte (und letzte) Einheit unseres Projekts ist die React -App, die die Benutzeroberflächen erstellt. Es gibt vier Hauptkomponenten, die die Benutzeroberfläche ausmachen, und sie umfassen:

1. Kalender: Eine Kalender -Benutzeroberfläche, die alle vorhandenen Ereignisse auflistet
2. Ereignismodal: Ein React -Modal, der die Eventformkomponente zum Erstellen einer Komponente macht
3. Event Popover: Popover UI zum Lesen eines einzelnen Ereignisses, eines Update -Ereignisses mit Eventform oder Löschen von Ereignissen
4. Ereignisformular: HTML -Form zum Erstellen eines neuen Ereignisses

Bevor wir direkt in die Kalenderkomponente eintauchen, müssen wir den React React Apollo -Client einrichten. Der React Apollo -Anbieter befähigt Sie mit Tools, um eine GraphQL -Datenquelle mithilfe von React -Mustern abzufragen. Mit dem ursprünglichen Anbieter können Sie Komponenten höherer Ordnung verwenden oder Requisiten zur Abfrage und Mutation von Daten ausführen. Wir werden einen Wrapper zum ursprünglichen Anbieter verwenden, mit dem Sie mit React -Hooks abfragen und mutieren können.

Importieren Sie in SRC/Index.js die React Apollo Hooks und den 8Base -Client in Todo - 1:

 importieren {apolloprovider} aus 'React-Apollo-Hooks';
Import {achtbaseaPolloclient} aus '@8base/apollo-Client';

Konfigurieren Sie bei TODO - 2 den Client mit der Endpunkt -URL, die wir in der 8Base -Setup -Phase erhalten haben:

 const uri = 'https://api.8base.com/cjvuk51i0000701S0HVVCBNXG';

const apolloclient = new EightBaseaPolloclient ({{{
  URI: URI,
  mit auth: false
});

Verwenden Sie diesen Client, um den gesamten App -Baum mit dem Anbieter auf Todo zu wickeln - 3:

 Reactdom.render (
  <apolloprovider client="{apolloclient}">
    <app></app>
  </apolloprovider>,
  document.getElementById ('root')
);

Ereignisse im Kalender zeigen

Die Kalenderkomponente wird in der App -Komponente und die Bigcalendar -Komponente von NPM importiert. Dann :

1. Wir machen den Kalender mit einer Liste von Ereignissen.
2. Wir geben Kalender eine benutzerdefinierte Popover -Komponente (EventPopover), mit der Ereignisse bearbeitet werden.
3. Wir machen ein Modal (Eventmodal), mit dem neue Ereignisse erstellt werden.

Das einzige, was wir aktualisieren müssen, ist die Liste der Ereignisse. Anstatt die statische Reihe von Ereignissen zu verwenden, möchten wir 8Base für alle Speicherveranstaltungen abfragen.

Ersetzen Sie Todo - 1 durch die folgende Zeile:

 const {Daten, Fehler, Laden} = useQuery (Events_Query);

Importieren Sie die UseQuery -Bibliothek von NPM und die Events_Query zu Beginn der Datei:

 Import {useQuery} aus 'React-Apollo-Hooks';
import {events_query} aus '../../queries';

Events_Query ist genau die gleiche Abfrage, die wir in 8Base Explorer getestet haben. Es lebt in SRC/Abfragen und sieht so aus:

 exportieren const events_query = gql`
  Abfrage {
    EventList {
      zählen
      Artikel {
        Ausweis
        ...
      }
    }
  }
`;

Fügen wir einen einfachen Fehler hinzu und laden Sie Handler auf Todo - 2:

 if (Fehler) return console.log (fehler);
  if (Laden)
    zurückkehren (
      <div classname="calendar">
        <p> Laden ... </p>
      </div>
    );

Beachten Sie, dass die Kalenderkomponente die EventPopover -Komponente verwendet, um ein benutzerdefiniertes Ereignis zu rendern. Sie können auch beobachten, dass die Kalenderkomponentendatei auch EventModal macht. Beide Komponenten wurden für Sie eingerichtet, und ihre einzige Verantwortung ist es, die Ereignisse zu erzielen.

Erstellen, Aktualisieren und Löschen von Ereignissen mit der Ereignisformularkomponente

Die Komponente in SRC/Komponenten/Ereignis/Eventform.js macht ein Formular. Das Formular wird zum Erstellen, Bearbeiten oder Löschen eines Ereignisses verwendet. AT TODO - 1, importieren Sie UsecrreateupDatemutation und Nutzungserziehung:

 Import {usecreateupDatemutation, gebrauchte LETTEMUTATION} aus './eventmutationhooks' '

• UsecreateupDatemutation: Diese Mutation erstellt oder aktualisiert entweder ein Ereignis, je nachdem, ob das Ereignis bereits existiert.
• Gebrauchteletemutation: Diese Mutation löscht ein vorhandenes Ereignis.

Ein Aufruf an eine dieser Funktionen gibt eine weitere Funktion zurück. Die zurückgegebene Funktion kann dann als gleichmäßiger Handler dienen.

Ersetzen Sie nun Todo - 2 durch einen Anruf bei beiden Funktionen:

 const createUpdateEvent = usecreateupdatemutation (
  Nutzlast,
  Ereignis,
  Eventexisten,
  () => conneModal ()
);
const deleteEvent = gebrauchterLetemutation (Ereignis, () => conneModal ());

Dies sind benutzerdefinierte Haken, die ich geschrieben habe, um die von React Apollo Hooks entlarvte Nutzungsverbrauchsumme zu wickeln. Jeder Haken erzeugt eine Mutation und übergibt die Mutationsvariable an die Nutzungsabfrage. Die Blöcke, die in SRC/Komponenten/Event/EventMutationhooks.js wie Folgendes aussehen, sind die wichtigsten Teile:

 Usemutation (MutationType, {
  Variablen: {
    Daten
  },
  Update: (Cache, {data}) => {
    const {eventsList} = cache.readQuery ({{{{{
      Abfrage: events_query
    });
    cache.writeQuery ({{
      Abfrage: events_query,
      Daten: {
        EventList: TransformCacheUpdatedata (EventList, Daten)
      }
    });
    // .. ..
  }
});

Rufen Sie den HTTP -Trigger der dauerhaften Funktion von 8Base auf

Wir haben einige Zeit damit verbracht, die serverlose Struktur, die Datenspeicherung und die Benutzeroberfläche unserer Kalender -App zu erstellen. Zum Zusammenhang sendet die Benutzeroberfläche Daten zur Speicherung an 8Base, 8Base speichert Daten und löst den haltbaren Funktion HTTP -Trigger aus, der HTTP -Trigger tritt in Orchestrierung ein und der Rest ist Geschichte. Derzeit speichern wir Daten mit Mutation, aber wir rufen die serverlose Funktion nirgendwo in 8Base auf.

8Base ermöglicht es Ihnen, benutzerdefinierte Logik zu schreiben, was sie sehr leistungsfähig und erweiterbar macht. Benutzerdefinierte Logik sind einfache Funktionen, die basierend auf Aktionen, die in der 8Base -Datenbank ausgeführt wurden, bezeichnet werden. Zum Beispiel können wir jedes Mal, wenn eine Mutation auf einer Tabelle auftritt, eine Logik einrichten. Lassen Sie uns eines erstellen, das aufgerufen wird, wenn ein Ereignis erstellt wird.

Beginnen Sie mit der Installation der 8Base CLI:

 NPM Installation -g 8base

Führen Sie im Kalender -App -Projekt den folgenden Befehl aus, um eine Starterlogik zu erstellen:

 8Base init 8Base

8Base Init -Befehl erstellt ein neues 8Base -Logikprojekt. Sie können ihm einen Verzeichnisnamen übergeben, der in diesem Fall den 8Base -Logikordner 8Base benennen - lassen Sie ihn nicht verdrehen.

Planungslogik auslösen

Löschen Sie alles in 8Base/SRC und erstellen Sie eine Datei TriggerSchedaLedule.js im SRC -Ordner. Sobald Sie dies getan haben, geben Sie die folgenden Datei ein:

 const fetch = require ('node-fetch');

module.exports = async event => {
  const res = warte fetch ('<http trigger url>', {
    Methode: 'Post',
    Körper: JSON.Stringify (Event.Data),
    Header: {'Inhaltstyp': 'application/json'}
  })
  const json = warte res.json ();
  console.log (Ereignis, JSON)
  Rückkehr JSON;
};</http>

Die Informationen zur GraphQL -Mutation finden Sie im Ereignisobjekt als Daten.

Ersetzen Sie durch die URL, die Sie nach der Bereitstellung Ihrer Funktion erhalten haben. Sie können die URL erhalten, indem Sie zur Funktion in Ihrer Azure -URL gehen und auf "URL kopieren" klicken.

Sie müssen auch das Knoten-Fetch-Modul installieren, mit dem die Daten aus der API erfasst werden:

 NPM Installation-Save-Knoten-Abrieb

8Base Logic -Konfiguration

Das nächste, was Sie tun sollten, ist, 8Base zu sagen, welche genaue Mutation oder Abfrage diese Logik auslösen muss. In unserem Fall eine Mutation auf der Ereignis Tabelle erstellen. Sie können diese Informationen in der Datei 8Base.yml beschreiben:

 Funktionen:
  Triggerschoner:
    Handler:
      Code: SRC/TriggerSchedule.js
    Typ: Trigger.after
    Operation: Ereignisse.Create

In gewissem Sinne heißt es, wenn eine Erstellungsmutation in der Ereignisentabelle auftritt, rufen Sie bitte SRC/TriggerSchedule.js an, nachdem die Mutation aufgetreten ist.

Wir möchten alle Dinge bereitstellen

Bevor etwas bereitgestellt werden kann, müssen wir uns in das 8Base -Konto anmelden, das wir über die Befehlszeile tun können:

 8BASE Login

Führen Sie dann den Befehl Bereitstellung aus, um die App -Logik in Ihrer Arbeitsbereichsinstanz zu senden und einzurichten.

 8Base -Bereitstellung

Testen des gesamten Flusses

Klicken Sie auf einen der Tage des Kalenders, um die App in ihrer ganzen Pracht zu sehen. Sie sollten das Ereignismodal mit dem Formular erhalten. Füllen Sie das aus und setzen Sie ein zukünftiges Startdatum ein, damit wir eine Benachrichtigung auslösen. Probieren Sie ein Datum von mehr als 2-5 Minuten aus der aktuellen Zeit, da ich keine meldende Benachrichtigung schneller auslösen konnte.

https://www.youtube.com/watch?v=simam4fxpoo&&

Ja, überprüfen Sie Ihre E -Mails! Die E -Mail hätte dank SendGrid eingehen müssen. Jetzt haben wir eine App, mit der wir Ereignisse erstellen und mit den Details der Event -Einreichung benachrichtigt werden.

Das obige ist der detaillierte Inhalt vonHey, lass mich mit dem Jamstack eine funktionale Kalender -App erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!