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.

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> $ {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> $ {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!