Hé, laissez créer une application de calendrier fonctionnel avec le Jamstack

Hé, créons une application de calendrier fonctionnel avec le Jamstack

Je me suis toujours demandé comment la planification dynamique a fonctionné, j'ai donc décidé de faire des recherches approfondies, d'apprendre de nouvelles choses et d'écrire sur la partie technique du voyage. Il est juste de vous avertir: tout ce que je couvre ici est trois semaines de recherche condensée en un seul article. Même s'il est adapté aux débutants, c'est une lecture saine. Alors, s'il vous plaît, tirez une chaise, asseyons-nous et avenons une aventure.

Mon plan était de construire quelque chose qui ressemblait au calendrier Google mais qui ne montre que trois fonctionnalités de base:

1. Répertoriez tous les événements existants sur un calendrier
2. Créer de nouveaux événements
3. Planification et notification par e-mail en fonction de la date choisie lors de la création. Le calendrier doit exécuter un code pour envoyer un e-mail à l'utilisateur lorsque le moment est venu .

Jolie, non? Faites la fin de l'article, car c'est ce que nous ferons.

La seule connaissance que j'ai eu sur la demande de mon code de s'exécuter à un moment ultérieur ou différé était Cron Jobs. La façon la plus simple d'utiliser un travail cron est de définir statiquement un travail dans votre code. Ceci est ad hoc - statistiquement signifie que je ne peux pas simplement planifier un événement comme Google Calendar et qu'il le fasse facilement mettre à jour mon code cron. Si vous êtes expérimenté avec l'écriture de cronrs, vous ressentez ma douleur. Si vous ne l'êtes pas, vous avez de la chance, vous n'aurez peut-être jamais à utiliser Cron de cette façon.

Pour élaborer plus sur ma frustration, je devais déclencher un calendrier en fonction d'une charge utile de demandes HTTP. Les dates et les informations sur ce calendrier seraient transmises par le biais de la demande HTTP. Cela signifie qu'il n'y a aucun moyen de savoir des choses comme la date prévue à l'avance.

Nous (mes collègues et moi) avons trouvé un moyen de faire ce travail et - avec l'aide de l'article de Sarah Drasner sur les fonctions durables - j'ai compris ce que j'avais besoin d'apprendre (et désapparaît d'ailleurs). Vous découvrirez tout ce que j'ai travaillé dans cet article, de la création d'événements à la planification des e-mails aux annonces de calendrier. Voici une vidéo de l'application en action:

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

Vous remarquerez peut-être le retard subtil. Cela n'a rien à voir avec le synchronisation d'exécution du calendrier ou l'exécution du code. Je teste avec un compte SendGrid gratuit que je soupçonne avoir une forme de latence. Vous pouvez le confirmer en testant la fonction sans serveur responsable sans envoyer de courriels. Vous remarqueriez que le code s'exécute exactement à l'heure prévue.

Outils et architecture

Voici les trois unités fondamentales de ce projet:

1. React Frontend : Calendar UI, y compris l'interface utilisateur pour créer, mettre à jour ou supprimer les événements.
2. 8Base GraphQL : une couche de base de données back-end pour l'application. C'est là que nous stockons, lisons et mettons à jour notre date. La partie amusante est que vous n'écrirez aucun code pour ce back-end.
3. Fonctions durables : Les fonctions durables sont une sorte de fonctions sans serveur qui ont le pouvoir de se souvenir de leur état des exécutions précédentes. C'est ce qui remplace les travaux Cron et résout le problème ad hoc que nous avons décrit précédemment.

Le reste de ce poste aura trois sections principales basées sur les trois unités que nous avons vues ci-dessus. Nous en prendrons l'un après les autres, les construire, les testerons et même déployer le travail. Avant de poursuivre cela, configurons à l'aide d'un projet de démarrage que j'ai fait pour nous faire démarrer.

Repo du projet

Commencer

Vous pouvez configurer ce projet de différentes manières - soit en tant que projet complet avec les trois unités d'un projet, soit en tant que projet autonome avec chaque unité vivant dans sa propre racine. Eh bien, je suis allé avec le premier parce qu'il est plus concis, plus facile à enseigner et gérable car c'est un projet.

L'application sera un projet Create-React-App et j'ai fait un starter pour que nous réduisions la barrière à configurer. Il est livré avec du code supplémentaire et de la logique que nous n'avons pas besoin d'expliquer car ils sont hors de portée de l'article. Les éléments suivants sont mis en place pour nous:

1. Composant calendrier
2. Composants modaux et popover pour présenter des formulaires d'événements
3. Composant de formulaire d'événement
4. Une logique graphique pour interroger et muter les données
5. Un échafaudage de fonction sans serveur durable où nous écrivons les planificateurs

Conseil: chaque fichier existant dont nous nous soucions a un bloc de commentaires en haut du document. Le bloc de commentaires vous indique ce qui se passe actuellement dans le fichier de code et une section TAIS qui décrit ce que nous devons faire ensuite.

Commencez par cloner le formulaire de démarreur github:

 Git Clone -B Startter ---single-Branch https://github.com/christiannwamba/calendar-app.git

Installez les dépendances NPM décrites dans le fichier root package.json ainsi que le package sans serveur.json:

 Installation de NPM

Fonctions durables orchestrées pour la planification

Il y a deux mots que nous devons sortir d'abord avant que nous puissions comprendre ce qu'est ce terme - l'orchestration et durable .

L'orchestration a été à l'origine utilisée pour décrire un assemblage d'événements, d'actions, etc. Le mot clé est coordonné . Nous devons mettre ensemble deux ou plusieurs unités d'un système de manière coordonnée.

Durable est utilisé pour décrire tout ce qui a la caractéristique exceptionnelle de durer plus longtemps.

Mettez la coordination du système et durable ensemble, et vous obtenez des fonctions durables. Il s'agit de la fonction la plus puissante si la fonction sans serveur d'Azure. Des fonctions durables basées sur ce que nous savons maintenant ont ces deux caractéristiques:

1. Ils peuvent être utilisés pour assembler l'exécution de deux ou plusieurs fonctions et les coordonner afin que les conditions de course ne se produisent pas (orchestration).
2. Les fonctions durables se souviennent des choses. C'est ce qui le rend si puissant. Il enfreint la règle numéro un de HTTP: sans état. Les fonctions durables gardent leur état intact, peu importe combien de temps ils doivent attendre. Créez un calendrier pour 1 000 000 ans dans le futur et une fonction durable s'exécutera après un million d'années tout en se souvenant des paramètres qui y ont été transmis le jour du déclencheur. Cela signifie que les fonctions durables sont avec état .

Ces fonctionnalités de durabilité débloquent un nouveau domaine d'opportunités pour les fonctions sans serveur et c'est pourquoi nous explorons l'une de ces fonctionnalités aujourd'hui. Je recommande vivement l'article de Sarah une fois de plus pour une version visualisée de certains des cas d'utilisation possibles de fonctions durables.

J'ai également fait une représentation visuelle du comportement des fonctions durables que nous écrirons aujourd'hui. Prenez cela en tant que diagramme architectural animé:

Une mutation de données d'un système externe (8Base) déclenche l'orchestration en appelant le déclencheur HTTP . Le déclencheur appelle ensuite la fonction d'orchestration qui planifie un événement. Lorsque le temps d'exécution est dû, la fonction d'orchestration est à nouveau appelée mais cette fois saute l'orchestration et appelle la fonction d'activité . La fonction d'activité est l'interprète d'action. C'est la chose réelle qui se produit, par exemple «Envoyer une notification par e-mail».

Créer des fonctions durables orchestrées

Permettez-moi de vous guider à travers la création de fonctions à l'aide du code vs. Vous avez besoin de deux choses:

1. Un compte azur
2. VS Code

Une fois que vous avez les deux configurations, vous devez les attacher ensemble. Vous pouvez le faire en utilisant une extension de code VS et un outil CLI de nœud. Commencez par l'installation de l'outil CLI:

NPM Install -g Azure-Functions-Core-Tools

# OU

Brew Tap Azure / Fonctions
Brew Installer Azure-Functions-Core-Tools

Ensuite, installez l'extension de fonction Azure pour avoir le code vs lié aux fonctions sur Azure. Vous pouvez en savoir plus sur la configuration des fonctions Azure de mon article précédent.

Maintenant que vous avez fait toute la configuration, passons à la création de ces fonctions. Les fonctions que nous créerons seront mapperont aux dossiers suivants.

Dossier	Fonction
calendrier	Déclencheur HTTP durable
calendrier	Orchestration durable
senimemail	Activité durable

Commencez par le déclencheur.

1. Cliquez sur l'icône d'extension Azure et suivez l'image ci-dessous pour créer la fonction de planification
   
2. Comme il s'agit de la première fonction, nous avons choisi l'icône de dossier pour créer un projet de fonction. L'icône après cela crée une seule fonction (pas un projet).
3. Cliquez sur Parcourir et créer un dossier sans serveur à l'intérieur du projet. Sélectionnez le nouveau dossier sans serveur.
4. Sélectionnez JavaScript comme langue. Si TypeScript (ou toute autre langue) est votre confiture, n'hésitez pas.
5. Sélectionnez des fonctions durables HTTP Starter. Ceci est le déclencheur.
6. Nommez la première fonction comme calendrier

Ensuite, créez l'orchestrateur. Au lieu de créer un projet de fonction, créez plutôt une fonction.

1. Cliquez sur l'icône de la fonction:
   
2. Sélectionnez Orchestrator de fonctions durables.
3. Donnez-lui un nom, calendrier de calendrier et appuyez sur ENTER .
4. Il vous sera demandé de sélectionner un compte de stockage. Orchestrator utilise le stockage pour préserver l'état d'une fonction en cours .
5. Sélectionnez un abonnement dans votre compte Azure. Dans mon cas, j'ai choisi l'abonnement à l'essai gratuit.
6. Suivez les quelques étapes restantes pour créer un compte de stockage.

Enfin, répétez l'étape précédente pour créer une activité. Cette fois, ce qui suit devrait être différent:

• Sélectionnez l'activité des fonctions durables.
• Nommez-le SendEmail.
• Aucun compte de stockage ne sera nécessaire.

Planification avec un déclencheur HTTP durable

Le code dans Serverless / schedule / index.js n'a pas besoin d'être touché. C'est à quoi il ressemble à l'origine lorsque la fonction est échafaudée à l'aide du code VS ou de l'outil CLI.

 const df = require ("durables-fonctions");
module.exports = fonction async (contexte, req) {
  const client = df.getClient (contexte);
  const instanceId = attend client.startNew (req.params.functionname, undefined, req.body);
  context.log (`Orchestration a démarré avec id = '$ {instanceId}'.`);
  return client.createCheckStatusResponse (context.bindingData.req, instanceId);
};

Que se passe-t-il ici?

1. Nous créons une fonction durable du côté client qui est basé sur le contexte de la demande.
2. Nous appelons l'orchestrateur à l'aide de la fonction startNew () du client. Le nom de la fonction Orchestrator est passé comme le premier argument pour startNew () via l'objet params. Un req.body est également transmis à startNew () en tant que troisième argument qui est transmis à l'orchestrateur.
3. Enfin, nous renvoyons un ensemble de données qui peuvent être utilisées pour vérifier l'état de la fonction Orchestrator, ou même annuler le processus avant sa fin.

L'URL pour appeler la fonction ci-dessus ressemblerait à ceci:

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

Où functionname est le nom passé pour startNew. Dans notre cas, cela devrait être:

 // LocalHost: 7071 / API / Orchestrateurs / Scheduleorchestrator

Il est également bon de savoir que vous pouvez changer l'apparence de cette URL.

Orchestrer avec un orchestrateur durable

Le déclencheur HTTP StartNew appelle une fonction basée sur le nom que nous lui transmettons. Ce nom correspond au nom de la fonction et du dossier qui contient la logique d'orchestration. Le fichier de serveur sans serveur / scheduleorchestrator / index.js exporte une fonction durable. Remplacez le contenu par ce qui suit:

 const df = require ("durables-fonctions");
module.exports = df.orchestrator (fonction * (contexte) {
  const input = context.df.getInput ()
  // TODO - 1
  
  // TODO - 2
});

La fonction Orchestrator récupère le corps de la demande du déclencheur HTTP à l'aide de context.df.getInput ().

Remplacez Todo - 1 par la ligne de code suivante qui pourrait être la chose la plus importante dans toute cette démo:

 rendement contextuel.df.createtimer (nouvelle date (input.startat)))

Ce que cette ligne utilise la fonction durable pour créer une minuterie en fonction de la date passé du corps de la demande via le déclencheur HTTP.

Lorsque cette fonction s'exécute et arrivera ici, elle déclenchera temporairement la minuterie et la caution. Lorsque le calendrier est dû, il reviendra, sautez cette ligne et appelez la ligne suivante que vous devez utiliser à la place de TODO - 2.

 Return Rende Context.df.CallActivity ('SendEmail', entrée);

La fonction appellerait la fonction d'activité pour envoyer un e-mail. Nous passons également une charge utile comme deuxième argument.

Voici à quoi ressemblerait la fonction terminée:

 const df = require ("durables-fonctions");

module.exports = df.orchestrator (fonction * (contexte) {
  const input = context.df.getInput ()
    
  rendement contextuel.df.createtimer (nouvelle date (input.startat)))
    
  Return Rende Context.df.CallActivity ('SendEmail', entrée);
});

Envoi d'e-mails avec une activité durable

Lorsqu'un calendrier est dû, l'orchestrateur revient pour appeler l'activité. Le fichier d'activité vit dans Serverless / SendEmail / index.js. Remplacez ce qui est là par ce qui suit:

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

module.exports = fonction async (contexte) {
  // TODO - 1
  const msg = {}
  // TODO - 2
  retour msg;
};

Il importe actuellement Mailer de SendGrid et définit la clé API. Vous pouvez obtenir une clé API en suivant ces instructions.

Je définis la clé dans une variable environnementale pour assurer la sécurité de mes informations d'identification. Vous pouvez stocker en toute sécurité le vôtre de la même manière en créant une touche SendGrid_API_KEY dans Serverless / local.settings.json avec votre clé SendGrid comme valeur:

 {
  "Isencrypted": faux,
  "Valeurs": {
    "Azurewebjobsstorage": "",
    "Fonctions_worker_runtime": "node",
    "Sendgrid_api_key": ""
  }
}

Remplacez Todo - 1 par la ligne suivante:

 const {email, title, startat, description} = context.bindings.payload;

Cela réalise les informations de l'événement à partir de l'entrée de la fonction Orchestrator. L'entrée est attachée à Context.bindings. La charge utile peut être tout ce que vous l'appelez, alors accédez à Serverless / SendEmail / Function.json et modifiez la valeur du nom à la charge utile:

 {
  "reliures": [
    {
      "nom": "charge utile",
      "Type": "ActivityTrigger",
      "Direction": "Dans"
    }
  ]]
}

Ensuite, mettez à jour TODO - 2 avec le bloc suivant pour envoyer un e-mail:

 const msg = {
  à: e-mail,
  De: {e-mail: '[e-mail protégé]', nom: 'CodeBeast Calendar'},
  Sujet: `Event: $ {title}`,
  html: `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
};
sgmail.send (msg);

retour msg;

Voici la version complète:

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

module.exports = fonction async (contexte) {
  const {email, title, startat, description} = context.bindings.payload;
  const msg = {
    à: e-mail,
    De: {e-mail: '[e-mail protégé]', nom: 'CodeBeast Calendar'},
    Sujet: `Event: $ {title}`,
    html: `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
  };
  sgmail.send (msg);

  retour msg;
};

Déploiement des fonctions à Azure

Le déploiement des fonctions sur Azure est facile. Il s'agit simplement d'un clic de l'éditeur de code vs. Cliquez sur l'icône encerclée pour déployer et obtenir une URL de déploiement:

Toujours avec moi aussi loin? Vous faites de grands progrès! Il est tout à fait OK de faire une pause ici, de faire une sieste, de s'étirer ou de se reposer. Je l'ai définitivement fait en écrivant ce post.

Données et couche GraphQL avec 8Base

Ma description et ma compréhension la plus simple de 8Base est «Firebase pour GraphQL». 8Base est une couche de base de données pour tout type d'application que vous pouvez penser et l'aspect le plus intéressant est qu'il est basé sur GraphQL.

La meilleure façon de décrire où 8Base s'inscrit dans votre pile est de peindre une image d'un scénario.

Imaginez que vous êtes un développeur indépendant avec un contrat à l'échelle de petite à moyen pour construire un magasin de commerce électronique pour un client. Vos compétences principales sont sur le Web, vous n'êtes donc pas très à l'aise sur le dos. bien que vous puissiez écrire un peu de nœud.

Malheureusement, le commerce électronique nécessite la gestion des stocks, la gestion des commandes, la gestion des achats, la gestion de l'authentification et de l'identité, etc. «Gérer» à un niveau fondamental signifie simplement des données CUD et l'accès aux données.

Au lieu du processus redondant et ennuyeux de création, de lecture, de mise à jour, de supprimer et de gérer l'accès aux entités dans notre code backend, que se passe-t-il si nous pouvions décrire ces exigences commerciales dans une interface utilisateur? Et si nous pouvons créer des tables qui nous permettent de configurer les opérations de crud, l'authentification et l'accès? Et si nous avions une telle aide et que nous nous concentrions uniquement sur la construction du code frontal et la rédaction de requêtes? Tout ce que nous venons de décrire est abordé par 8base

Voici une architecture d'une application back-end qui s'appuie sur 8Base car c'est la couche de données:

Créez une table 8-Base pour le stockage et la récupération des événements

La première chose que nous devons faire avant de créer une table est de créer un compte. Une fois que vous avez un compte, créez un espace de travail qui contient toutes les tables et la logique pour un projet donné.

Ensuite, créez une table, nommez les événements de la table et remplissez les champs de table.

Nous devons configurer les niveaux d'accès. À l'heure actuelle, il n'y a rien à masquer à chaque utilisateur, nous pouvons donc simplement activer tout accès au tableau des événements que nous avons créé:

La configuration de l'auth est super simple avec 8Base car elle s'intègre à Auth0. Si vous avez des entités qui doivent être protégées ou que vous souhaitez prolonger notre exemple pour utiliser l'auth, veuillez vous déchaîner.

Enfin, prenez votre URL de point de terminaison pour une utilisation dans l'application React:

Tester les requêtes et mutation GraphQL dans le terrain de jeu

Pour être sûr que nous sommes prêts à emmener l'URL dans la nature et à commencer à construire le client, testons d'abord l'API avec un terrain de jeu GraphQL et voyons si la configuration est bien. Cliquez sur l'explorateur.

Collez la requête suivante dans l'éditeur.

 requête {
  EventsList {
    compter
    articles {
      identifiant
      titre
      startat
      endat
      description
      tous les jours
      e-mail
    }
  }
}

J'ai créé des données de test via l'interface utilisateur 8Base et j'obtiens le résultat lorsque j'exécute, ils interrogent:

Vous pouvez explorer l'intégralité de la base de données à l'aide du document de schéma à l'extrémité droite de la page Explorer.

Interface de formulaire de calendrier et d'événement

La troisième (et dernière) unité de notre projet est l'application React qui construit les interfaces utilisateur. Il y a quatre composants majeurs composant l'interface utilisateur et ils incluent:

1. Calendrier: une interface utilisateur du calendrier qui répertorie tous les événements existants
2. Événement Modal: un modal React qui rend le composant EventForm pour créer un composant
3. Événement Popover: Popover UI Pour lire un seul événement, mettre à jour l'événement à l'aide de l'événement ou de la suppression de l'événement
4. Formulaire d'événement: formulaire HTML pour créer un nouvel événement

Avant de plonger directement dans le composant du calendrier, nous devons configurer le client React Apollo. Le fournisseur React Apollo vous permet d'outils pour interroger une source de données GraphQL à l'aide de motifs React. Le fournisseur d'origine vous permet d'utiliser des composants d'ordre supérieur ou de rendre des accessoires pour interroger et muter les données. Nous utiliserons un wrapper pour le fournisseur d'origine qui vous permet de remettre en question et de muter à l'aide de crochets React.

Dans src / index.js, importez les crochets React Apollo et le client 8Base dans TODO - 1:

 import {apolloprovider} de 'react-Apollo-hooks';
import {huitBasEapolloclient} de '@ 8Base / apollo-Client';

AT TODO - 2, configurez le client avec l'URL de point de terminaison que nous avons obtenue dans l'étape de configuration 8Base:

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

const apolloclient = new huitBasEapolloclient ({{
  uri: uri,
  WithAuth: Faux
});

Utilisez ce client pour envelopper l'ensemble de l'arborescence d'application avec le fournisseur sur TODO - 3:

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

Montrer des événements sur le calendrier

Le composant de calendrier est rendu dans le composant de l'application et le composant BigCalendar d'importation de NPM. Alors :

1. Nous rendons le calendrier avec une liste d'événements.
2. Nous donnons à Calendar un composant popover personnalisé (EventPopover) qui sera utilisé pour modifier les événements.
3. Nous rendons un modal (EventModal) qui sera utilisé pour créer de nouveaux événements.

La seule chose que nous devons mettre à jour est la liste des événements. Au lieu d'utiliser le tableau statique des événements, nous voulons interroger 8Base pour tous les événements de magasin.

Remplacez Todo - 1 par la ligne suivante:

 const {data, error, chargeing} = useQuery (events_query);

Importez la bibliothèque UseQuery à partir de NPM et de Events_Query au début du fichier:

 import {useQuery} de 'react-Apollo-Hooks';
import {events_query} de '../../Queries';

Events_Query est exactement la même requête que nous avons testée dans 8Base Explorer. Il vit en SRC / Queries et ressemble à ceci:

 exportation const events_query = gql`
  requête {
    EventsList {
      compter
      articles {
        identifiant
        ...
      }
    }
  }
`;

Ajoutons une simple erreur et un gestionnaire de chargement sur TODO - 2:

 if (error) return console.log (erreur);
  si (chargement)
    retour (
      <div classname="calendar">
        <p> Chargement ... </p>
      </div>
    ));

Notez que le composant Calendar utilise le composant EventPopover pour rendre un événement personnalisé. Vous pouvez également observer que le fichier de composant de calendrier rend également EventModal. Les deux composants ont été configurés pour vous, et leur seule responsabilité est de rendre l'événement.

Créer, mettre à jour et supprimer les événements avec le composant du formulaire d'événement

Le composant de Src / Components / Event / EventForm.js rend un formulaire. Le formulaire est utilisé pour créer, modifier ou supprimer un événement. À TODO - 1, importer uscreateupdatemutation and usesetemutation:

 import {usecreatEupdatemutation, usesetemutation} de './eventmutationhooks'

• usecreateupdatemutation: cette mutation crée ou met à jour un événement selon que l'événement existait déjà.
• UsedEletemutation: Cette mutation supprime un événement existant.

Un appel à l'une de ces fonctions renvoie une autre fonction. La fonction renvoyée peut alors servir de gestionnaire égal.

Maintenant, allez-y et remplacez Todo - 2 par un appel aux deux fonctions:

 const CreateUpDateEvent = usecreateupdatemutation (
  charge utile,
  événement,
  EventExists,
  () => roseModal ()
));
const Deleteevent = useseTetemutation (event, () => raremodal ());

Ce sont des crochets personnalisés que j'ai écrits pour envelopper l'utilisation exposée par les crochets React Apollo. Chaque crochet crée une mutation et transmet une variable de mutation à la requête d'utilisation. Les blocs qui ressemblent à ce qui suit dans SRC / Components / Event / EventMutationHooks.js est les parties les plus importantes:

 Usemutation (MutationType, {
  Variables: {
    données
  },
  Mise à jour: (cache, {data}) => {
    const {eventsList} = cache.readquery ({
      requête: events_query
    });
    cache.writequery ({
      Query: Events_Query,
      données: {
        EventsList: transformcacheupdatedata (eventsList, data)
      }
    });
    // ..
  }
});

Appelez le déclencheur HTTP de la fonction durable de 8Base

Nous avons passé pas mal de temps à construire la structure sans serveur, le stockage de données et les couches d'interface utilisateur de notre application de calendrier. Pour récapituler, l'interface utilisateur envoie des données à 8Base pour le stockage, 8Base enregistre les données et déclenche le déclencheur HTTP de la fonction durable, le déclencheur HTTP perturbe l'orchestration et le reste est un historique. Actuellement, nous enregistrons des données avec mutation, mais nous n'appelons pas la fonction sans serveur n'importe où dans 8Base.

8Base vous permet d'écrire une logique personnalisée, ce qui le rend très puissant et extensible. La logique personnalisée est des fonctions simples qui sont appelées en fonction des actions effectuées sur la base de données 8Base. Par exemple, nous pouvons configurer une logique pour être appelée chaque fois qu'une mutation se produit sur une table. Créons un qui est appelé lorsqu'un événement est créé.

Commencez par installer la CLI 8Base:

 NPM Install -g 8Base

Sur le projet Calendar App Project, exécutez la commande suivante pour créer une logique de démarrage:

 8BASE INIT 8BASE

La commande 8base init crée un nouveau projet Logic 8Base. Vous pouvez le transmettre un nom de répertoire qui, dans ce cas, nous nommons le dossier Logic 8Base, 8Base - ne le faites pas torsion.

Déclencher la logique de planification

Supprimez tout dans 8Base / SRC et créez un fichier TRIGGERSCHEDULE.js dans le dossier SRC. Une fois que vous avez fait cela, passez à ce sujet dans le fichier:

 const fetch = require ('nœud-fetch');

module.exports = event async => {
  const res = attente fetch ('<http url de d>', {
    Méthode: «Post»,
    corps: json.stringify (event.data),
    En-têtes: {'Content-Type': 'Application / JSON'}
  })
  const JSON = attendre res.json ();
  console.log (événement, JSON)
  retourner JSON;
};</http>

Les informations sur la mutation GraphQL sont disponibles sur l'objet Event sous forme de données.

Remplacez par l'URL que vous avez obtenue après le déploiement de votre fonction. Vous pouvez obtenir l'URL en accédant à la fonction dans votre URL Azure et cliquez sur «Copier URL».

Vous devez également installer le module de festement de nœud, qui saisira les données de l'API:

 Installation du NPM - Fesc de nœud de l'énergie

Configuration logique 8base

La prochaine chose à faire est de dire à 8Base quelle mutation ou requête exacte qui doit déclencher cette logique. Dans notre cas, une mutation de création sur le tableau des événements. Vous pouvez décrire ces informations dans le fichier 8Base.yml:

 Fonctions:
  TriggersCheDule:
    Handleur:
      Code: src / Triggerschedule.js
    Type: Trigger.After
    opération: événements.Create

Dans un sens, cela dit que lorsqu'une mutation de création se produit sur le tableau des événements, veuillez appeler SRC / Triggerschedule.js une fois la mutation.

Nous voulons déployer toutes les choses

Avant que tout ne puisse être déployé, nous devons nous connecter dans le compte 8Base, ce que nous pouvons faire via la ligne de commande:

 Connexion 8base

Ensuite, exécutons la commande Deploy pour envoyer et configurer la logique de l'application dans votre instance d'espace de travail.

 8Base Déploiement

Tester l'intégralité du flux

Pour voir l'application dans toute sa gloire, cliquez sur l'un des jours du calendrier. Vous devriez obtenir l'événement modal contenant le formulaire. Remplissez cela et mettez une future date de début afin que nous déclenchez une notification. Essayez une date à plus de 2 à 5 minutes de l'heure actuelle car je n'ai pas pu déclencher une notification plus rapidement que cela.

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

Oui, allez vérifier votre e-mail! L'e-mail aurait dû arriver grâce à SendGrid. Maintenant, nous avons une application qui nous permet de créer des événements et d'être informés avec les détails de la soumission des événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!