Comment créer une application Jamstack sans client-serveur à l’aide de Netlify, Gatsby et Fauna


le Jamstack est une architecture de développement Web moderne basée sur JavaScript côté client, des API réutilisables et un balisage prédéfini.

Les aspects clés d’une application Jamstack sont les suivants:

  • L’ensemble de l’application fonctionne sur un CDN (ou ADN). CDN signifie Content Delivery Network et un ADN est un Application Delivery Network.
  • Tout vit à Git.
  • Les builds automatisés s’exécutent avec un flux de travail lorsque les développeurs poussent le code.
  • Il existe un déploiement automatique du balisage prédéfini sur le CDN / ADN.
  • Les API réutilisables permettent des intégrations sans tracas avec de nombreux services. Pour prendre quelques exemples, Stripe pour le paiement et la caisse, Mailgun pour les services de messagerie, etc. Nous pouvons également écrire des API personnalisées ciblées sur un cas d’utilisation spécifique. Nous verrons de tels exemples d’API personnalisées dans cet article.
  • C’est pratiquement sans serveur. Pour le dire plus clairement, nous ne maintenons aucun serveur, nous utilisons plutôt des services déjà existants (comme le courrier électronique, les médias, la base de données, la recherche, etc.) ou des fonctions sans serveur.

Dans cet article, nous allons apprendre à créer une application Jamstack qui a:

  • Un magasin de données global avec prise en charge de GraphQL pour stocker et récupérer des données facilement. Nous utiliserons Faune pour y parvenir.
  • Fonctions sans serveur qui agissent également en tant qu’API pour extraire les données du magasin de données Fauna. Nous utiliserons Fonctions sans serveur Netlify pour ça.
  • Nous allons créer le côté client de l’application en utilisant un Générateur de site statique appelé Gatsbyjs.
  • Enfin, nous déploierons l’application sur un CDN configuré et géré par Netlify CDN.

Alors, que construisons-nous aujourd’hui?

Nous aimons tous faire du shopping. À quel point serait-il cool de gérer toutes nos notes de magasinage dans un endroit centralisé? Nous allons donc créer une application appelée “shopnote” qui nous permet de gérer les notes de boutique. Nous pouvons également ajouter un ou plusieurs éléments à une note, les marquer comme terminés, les marquer comme urgents, etc.

À la fin de cet article, notre application shopnote ressemblera à ceci,

TL; DR

Nous allons apprendre des choses avec une approche étape par étape dans cet article. Si vous souhaitez accéder plus tôt au code source ou à la démonstration, voici des liens vers eux.

Configurer la faune

Faune est l’API de données pour les applications sans client-serveur. Si vous êtes familier avec un SGBDR traditionnel, une différence majeure avec Fauna serait qu’il s’agit d’un système NOSQL relationnel qui donne toutes les capacités de l’ancien SGBDR. Il est très flexible sans compromettre l’évolutivité et les performances.

Fauna prend en charge plusieurs API pour l’accès aux données,

  • GraphQL: Un langage de requête et de manipulation de données open source. Si vous êtes nouveau sur GraphQL, vous pouvez trouver plus de détails ici, https://graphql.org/
  • Fauna Query Language (FQL): Une API pour interroger Fauna. FQL a des pilotes spécifiques au langage qui le rendent flexible à utiliser avec des langages comme JavaScript, Java, Go, etc. Trouver plus de détails sur FQL d’ici.

Dans cet article, nous vous expliquerons les usages de GraphQL pour l’application ShopNote.

Commençons par le commencement, inscrivez-vous en utilisant cette URL. Veuillez sélectionner le plan gratuit qui est avec un quota d’utilisation quotidienne généreux et plus que suffisant pour notre utilisation.

Ensuite, créez une base de données en fournissant un nom de base de données de votre choix. J’ai utilisé des notes de magasin comme nom de base de données.

Après avoir créé la base de données, nous définirons le schéma GraphQL et l’importerons dans la base de données. Un schéma GraphQL définit la structure des données. Il définit les types de données et la relation entre eux. Avec schema, nous pouvons également spécifier le type de requêtes autorisées.

À ce stade, créons notre dossier de projet. Créez un dossier de projet quelque part sur votre disque dur avec le nom, shopnote. Créez un fichier avec le nom, shopnotes.gql avec le contenu suivant:

type ShopNote {
  name: String!
  description: String
  updatedAt: Time
  items: [Item!] @relation
}
 
type Item {
  name: String!
  urgent: Boolean
  checked: Boolean
  note: ShopNote!
}
 
type Query {
  allShopNotes: [ShopNote!]!
}

Ici, nous avons défini le schéma d’une liste et d’un article de note de magasin, où chacun ShopNote contient le nom, la description, l’heure de mise à jour et une liste d’éléments. Chaque Item le type a des propriétés telles que, nom, urgent, vérifié et à quelle note de magasin il appartient.

Noter la @relation directive ici. Vous pouvez annoter un champ avec le @relation directive pour le marquer comme participant à une relation bidirectionnelle avec le type de cible. Dans ce cas, ShopNote et Item sont dans une relation un-à-plusieurs. Cela signifie, un ShopNote peut avoir plusieurs articles, chaque article pouvant être lié à un maximum d’une ShopNote.

Vous pouvez en savoir plus sur le @relation directif d’ici. Plus d’informations sur les relations GraphQL peuvent être trouvées d’ici.

Comme étape suivante, téléchargez le shopnotes.gql fichier depuis le tableau de bord Fauna à l’aide du bouton IMPORT SCHEMA,

Lors de l’importation d’un schéma GraphQL, FaunaDB créera, maintiendra et mettra à jour automatiquement les ressources suivantes:

  • Collections pour chaque type GraphQL non natif; dans ce cas, ShopNote et Item.
  • Requêtes / mutations CRUD de base pour chaque collection créée par le schéma, par exemple createShopNote allShopNotes; dont chacun est alimenté par FQL.
  • Pour des directives GraphQL spécifiques: index personnalisés ou FQL pour établir des relations (i.e. @relation), unicité (@unique), et plus!

En coulisse, Fauna aidera également à créer les documents automatiquement. Nous verrons cela dans un moment.

Fauna prend en charge un modèle de données relationnelles objet sans schéma. Une base de données dans Fauna peut contenir un groupe de collections. Une collection peut contenir un ou plusieurs documents. Chacun des enregistrements de données est inséré dans le document. Cela forme une hiérarchie qui peut être visualisée comme suit:

Ici, l’enregistrement de données peut être des tableaux, des objets ou de tout autre type pris en charge. Avec le modèle de données Fauna, nous pouvons créer des index, appliquer des contraintes. Les index de la faune peuvent combiner des données provenant de plusieurs collections et sont capables d’effectuer des calculs.

À ce stade, Fauna a déjà créé quelques collections pour nous, ShopNote et Item. Lorsque nous commencerons à insérer des enregistrements, nous verrons que les documents sont également créés. Nous pourrons visualiser et interroger les enregistrements et utiliser la puissance des index. Vous verrez peut-être la structure du modèle de données apparaître dans votre tableau de bord Fauna comme ceci dans un moment,

Point à noter ici, chacun des documents est identifié par l’unique ref attribut. Il y a aussi ts champ qui renvoie l’horodatage de la modification récente du document. L’enregistrement de données fait partie du data champ. Cette compréhension est vraiment importante lorsque vous interagissez avec des collections, des documents, des enregistrements à l’aide des fonctions intégrées FQL. Cependant, dans cet article, nous allons interagir avec eux à l’aide de requêtes GraphQL avec Netlify Functions.

Avec toutes ces connaissances, commençons à utiliser notre base de données Shopenotes qui a été créée avec succès et prête à l’emploi.

Essayons quelques questions

Même si nous avons importé le schéma et que les éléments sous-jacents sont en place, nous n’avons pas encore de document. Créons-en un. Pour ce faire, copiez la requête de mutation GraphQL suivante dans le panneau gauche de l’écran du terrain de jeu GraphQL et exécutez.

mutation {
  createShopNote(data: {
    name: "My Shopping List"
    description: "This is my today's list to buy from Tom's shop"
    items: {
      create: [
        { name: "Butther - 1 pk", urgent: true }
        { name: "Milk - 2 ltrs", urgent: false }
        { name: "Meat - 1lb", urgent: false }
      ]
    }
  }) {
    _id
    name
    description
    items {
      data {
        name,
        urgent
      }
    }
  }
}

Notez que Fauna a déjà créé les classes de mutation GraphQL en arrière-plan, nous pouvons directement l’utiliser comme, createShopNote. Une fois exécutée avec succès, vous pouvez voir la réponse d’une création ShopNote sur le côté droit de l’éditeur.

Le nouvellement créé ShopNote document a tous les détails requis que nous avons transmis lors de sa création. Nous avons vu ShopNote a une relation un-à-plusieurs avec Item. Vous pouvez voir que la réponse de la note de magasin contient les données d’article imbriquées. Dans ce cas, une note de magasin contient trois articles. C’est vraiment puissant. Une fois le schéma et la relation définis, le document sera créé automatiquement en gardant cette relation à l’esprit.

Maintenant, essayons de récupérer toutes les notes de magasin. Voici la requête GraphQL:

query {
    allShopNotes {
    data {
      _id
      name
      description
      updatedAt
      items {
        data {
          name,
          checked,
          urgent
        }
      }
    }
  }
}

Essayons la requête dans l’aire de jeu comme précédemment:

Nous avons maintenant une base de données avec un schéma et elle est pleinement opérationnelle avec la fonctionnalité de création et de récupération. De même, nous pouvons créer des requêtes pour ajouter, mettre à jour, supprimer des articles dans une note de magasin et également mettre à jour et supprimer une note de magasin. Ces requêtes seront utilisées ultérieurement lors de la création des fonctions sans serveur.

Si vous souhaitez exécuter d’autres requêtes dans l’éditeur GraphQL, vous pouvez trouvez-les d’ici,

Créer une clé secrète de serveur

Ensuite, nous devons créer une clé de serveur sécurisée pour nous assurer que l’accès à la base de données est authentifié et autorisé.

Cliquez sur l’option SECURITE disponible dans l’interface FaunaDB pour créer la clé, comme ceci,

Une fois la création de la clé réussie, vous pourrez voir le secret de la clé. Assurez-vous de le copier et de le sauvegarder dans un endroit sûr.

Nous ne voulons pas que quiconque connaisse cette clé. Ce n’est même pas une bonne idée de le valider dans le référentiel de code source. Pour conserver ce secret, créez un fichier vide appelé .env au niveau racine de votre dossier de projet.

Modifier le .env et ajoutez-y la ligne suivante (collez la clé de serveur générée à la place de, ).

FAUNA_SERVER_SECRET=

Ajouter un .gitignore fichier et écrivez-y le contenu suivant. C’est pour nous assurer que nous ne commettons pas accidentellement le fichier .env dans le référentiel de code source. Nous ignorons également node_modules en tant que meilleure pratique.

.env

Nous en avons terminé avec tout ce qui avait à voir avec la configuration de Fauna. Passons à la phase suivante pour créer des fonctions sans serveur et des API pour accéder aux données du magasin de données Fauna. À ce stade, la structure des répertoires peut ressembler à ceci,

Configurer les fonctions sans serveur Netlify

Netlify est une excellente plate-forme pour créer des fonctions sans serveur sans tracas. Ces fonctions peuvent interagir avec les bases de données, le système de fichiers et les objets en mémoire.

Fonctions Netlify sont alimentés par AWS Lambda. Mise en place AWS Lambdas à lui seul peut être un travail assez complexe. Avec Netlify, nous allons simplement définir un dossier et supprimer nos fonctions. L’écriture de fonctions simples devient automatiquement des API.

Première, créer un compte avec Netlify. C’est gratuit et tout comme le niveau gratuit FaunaDB, Netlify est également très flexible.

Nous devons maintenant installer quelques dépendances en utilisant soit npm, soit yarn. Assurez-vous que vous avez nodejs installée. Ouvrez une invite de commande à la racine du dossier du projet. Utilisez la commande suivante pour initialiser le projet avec les dépendances de nœud,

npm init -y

Installez l’utilitaire netlify-cli afin que nous puissions exécuter la fonction sans serveur localement.

npm install netlify-cli -g

Nous allons maintenant installer deux bibliothèques importantes, axios et dotenv. axios sera utilisé pour faire les appels HTTP et dotenv aidera à charger le FAUNA_SERVER_SECRET variable d’environnement de .env déposer dans process.env.

yarn add axios dotenv

Ou:

npm i axios dotenv

Créer des fonctions sans serveur

Créez un dossier avec le nom, functions à la racine du dossier du projet. Nous allons garder toutes les fonctions sans serveur en dessous.

Créez maintenant un sous-dossier appelé utils sous le functions dossier. Créez un fichier appelé query.js sous le utils dossier. Nous aurons besoin d’un code commun pour interroger le magasin de données pour toutes les fonctions sans serveur. Le code commun sera dans le query.js fichier.

Nous importons d’abord la fonctionnalité de la bibliothèque axios et chargeons le .env fichier. Ensuite, nous exportons une fonction asynchrone qui prend la requête et les variables. Dans la fonction async, nous faisons des appels en utilisant axios avec la clé secrète. Enfin, nous retournons la réponse.

// query.js
 
const axios = require("axios");
require("dotenv").config();
 
module.exports = async (query, variables) => {
  const result = await axios({
      url: "https://graphql.fauna.com/graphql",
      method: "POST",
      headers: {
          Authorization: `Bearer ${process.env.FAUNA_SERVER_SECRET}`
      },
      data: {
        query,
        variables
      }
 });
 
 return result.data;
};

Créez un fichier avec le nom, get-shopnotes.js sous le functions dossier. Nous effectuerons une requête pour récupérer toutes les notes de la boutique.

// get-shopnotes.js
 
const query = require("./utils/query");
 
const GET_SHOPNOTES = `
   query {
       allShopNotes {
       data {
         _id
         name
         description
         updatedAt
         items {
           data {
             _id,
             name,
             checked,
             urgent
         }
       }
     }
   }
 }  
`;
 
exports.handler = async () => {
  const { data, errors } = await query(GET_SHOPNOTES);
 
  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }
 
  return {
    statusCode: 200,
    body: JSON.stringify({ shopnotes: data.allShopNotes.data })
  };
};

Il est temps de tester la fonction sans serveur comme une API. Nous devons faire une configuration unique ici. Ouvrez une invite de commande à la racine du dossier du projet et tapez:

netlify login

Cela ouvrira un onglet de navigateur et vous demandera de vous connecter et d’autoriser l’accès à votre compte Netlify. Veuillez cliquer sur le bouton Autoriser.

Ensuite, créez un fichier appelé, netlify.toml à la racine de votre dossier de projet et ajoutez-y ce contenu,

[build]
    functions = "functions"
 
[[redirects]]
   from = "/api/*"
   to = "/.netlify/functions/:splat"
   status = 200

Il s’agit d’indiquer à Netlify l’emplacement des fonctions que nous avons écrites afin qu’il soit connu au moment de la construction.

Netlify fournit automatiquement les API pour les fonctions. L’URL pour accéder à l’API se présente sous cette forme, /.netlify/functions/get-shopnotes ce qui peut ne pas être très convivial. Nous avons écrit une redirection pour faire comme, /api/get-shopnotes.

Ok, nous avons terminé. Maintenant dans le type d’invite de commande,

netlify dev

Par défaut, l’application s’exécutera sur localhost: 8888 pour accéder à la fonction sans serveur en tant qu’API.

Ouvrez un onglet de navigateur et essayez cette URL, http://localhost:8888/api/get-shopnotes:

Toutes nos félicitations!!! Vous avez votre première fonction sans serveur opérationnelle.

Écrivons maintenant la prochaine fonction sans serveur pour créer un ShopNote. Cela va être simple. Créez un fichier nommé, create-shopnote.js sous le functions dossier. Nous devons écrire une mutation en passant les paramètres requis.

//create-shopnote.js
 
const query = require("./utils/query");
 
const CREATE_SHOPNOTE = `
  mutation($name: String!, $description: String!, $updatedAt: Time!, $items: ShopNoteItemsRelation!) {
    createShopNote(data: {name: $name, description: $description, updatedAt: $updatedAt, items: $items}) {
      _id
      name
      description
      updatedAt
      items {
        data {
          name,
          checked,
          urgent
        }
      }
    }
  }
`;
 
exports.handler = async event => {
  
  const { name, items } = JSON.parse(event.body);
  const { data, errors } = await query(
    CREATE_SHOPNOTE, { name, items });
 
  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }
 
  return {
    statusCode: 200,
    body: JSON.stringify({ shopnote: data.createShopNote })
  };
};

Veuillez prêter votre attention au paramètre, ShopNotesItemRelation. Comme nous avions créé une relation entre le ShopNote et Item dans notre schéma, nous devons maintenir cela lors de l’écriture de la requête.

Nous avons déstructuré la charge utile pour obtenir les informations requises à partir de la charge utile. Une fois que nous les avons obtenus, nous avons simplement appelé la méthode de requête pour créer un ShopNote.

Très bien, testons-le. Vous pouvez utiliser Postman ou tout autre outil de votre choix pour le tester comme une API. Voici la capture d’écran du facteur.

Super, nous pouvons créer un ShopNote avec tous les articles que nous voulons acheter dans un centre commercial. Et si nous voulons ajouter un élément à un élément existant ShopNote? Créons une API pour cela. Avec les connaissances que nous avons jusqu’à présent, ce sera très rapide.

Rappelles toi, ShopNote et Item sont liés? Donc, pour créer un objet, nous devons obligatoirement dire lequel ShopNote il en fera partie. Voici notre prochaine fonction sans serveur pour ajouter un élément à un élément existant ShopNote.

//add-item.js
 
const query = require("./utils/query");
 
const ADD_ITEM = `
  mutation($name: String!, $urgent: Boolean!, $checked: Boolean!, $note: ItemNoteRelation!) {
    createItem(data: {name: $name, urgent: $urgent, checked: $checked, note: $note}) {
      _id
      name
      urgent
      checked
      note {
        name
      }
    }
  }
`;
 
exports.handler = async event => {
  
  const { name, urgent, checked, note} = JSON.parse(event.body);
  const { data, errors } = await query(
    ADD_ITEM, { name, urgent, checked, note });
 
  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }
 
  return {
    statusCode: 200,
    body: JSON.stringify({ item: data.createItem })
  };
};

Nous transmettons les propriétés de l’élément comme, nom, si c’est urgent, la valeur de contrôle et la note dont les éléments doivent faire partie. Voyons comment cette API peut être appelée à l’aide de Postman,

Comme vous le voyez, nous passons le id de la note lors de la création d’un élément pour elle.

Nous ne prendrons pas la peine d’écrire le reste des fonctionnalités de l’API dans cet article, comme la mise à jour, la suppression d’une note de magasin, la mise à jour, la suppression d’éléments, etc. Si vous êtes intéressé, vous pouvez consulter ces fonctions à partir du Dépôt GitHub.

Cependant, après avoir créé le reste de l’API, vous devriez avoir une structure de répertoires comme celle-ci,

Nous avons réussi à créer un magasin de données avec Fauna, à le configurer pour l’utilisation, à créer une API soutenue par des fonctions sans serveur, à l’aide des fonctions Netlify, et à tester ces fonctions / routes.

Félicitations, vous l’avez fait. Ensuite, construisons des interfaces utilisateur pour afficher les notes de la boutique et y ajouter des articles. Pour ce faire, nous utiliserons Gatsby.js (alias Gatsby) qui est un générateur de site statique super cool basé sur React.

La section suivante nécessite que vous ayez des connaissances de base sur ReactJS. Si vous êtes nouveau dans ce domaine, vous pouvez l’apprendre d’ici. Si vous connaissez d’autres technologies d’interface utilisateur telles que Angular, Vue, etc., n’hésitez pas à ignorer la section suivante et à créer la vôtre à l’aide des API expliquées jusqu’à présent.

Configurer les interfaces utilisateur à l’aide de Gatsby

Nous pouvons mettre en place un projet Gatsby soit en utilisant le projets de démarrage ou initialisez-le manuellement. Nous allons construire les choses à partir de zéro pour mieux les comprendre.

Installez gatsby-cli globalement.

npm install -g gatsby-cli

Installez gatsby, réagissez et réagissez-dom

yarn add gatsby react react-dom

Modifiez la section scripts du package.json fichier pour ajouter un script pour develop.

"scripts": {
  "develop": "gatsby develop"
 }

Les projets Gatsby nécessitent un fichier de configuration spécial appelé, gatsby-config.js. Veuillez créer un fichier nommé, gatsby-config.js à la racine du dossier du projet avec le contenu suivant,

module.exports = {
  // keep it empty    
}

Créons notre première page avec Gatsby. Créez un dossier nommé, src à la racine du dossier du projet. Créez un sous-dossier nommé pages sous src. Créez un fichier nommé, index.js sous src/pages avec le contenu suivant:

import React, { useEffect, useState } from 'react';    
 
export default () => {    
  const [loading, setLoading ] = useState(false);    
  const [shopnotes, setShopnotes] = useState(null);    
 
  return (
    <>    
      

Shopnotes to load here...

) }

Lançons-le. Nous devons généralement utiliser la commande gatsby develop pour exécuter l’application localement. Comme nous devons exécuter l’application côté client avec les fonctions netlify, nous continuerons à utiliser, netlify dev commander.

netlify dev

C’est tout. Essayez d’accéder à la page à l’adresse http://localhost:8888. Tu devrais voir quelque chose comme ça,

La construction du projet Gatsby crée quelques dossiers de sortie que vous ne voudrez peut-être pas pousser vers le référentiel de code source. Ajoutons quelques entrées à la .gitignore fichier afin que nous n’obtenions pas de bruit indésirable.

Ajouter .cache, node_modules et public à la .gitignore fichier. Voici le contenu complet du fichier:

.cache
public
node_modules
*.env

À ce stade, la structure du répertoire de votre projet doit correspondre à ce qui suit:

Penser aux composants de l’interface utilisateur

Nous créerons de petits composants logiques pour atteindre le ShopNote interface utilisateur. Les composants sont:

  • Entête: Un composant d’en-tête se compose du logo, de l’en-tête et du bouton de création pour créer une note de magasin.
  • Shopenotes: Ce composant contiendra la liste de la note boutique (Note composant).
  • Remarque: Ce sont des notes individuelles. Chacune des notes contiendra un ou plusieurs éléments.
  • Article: Chacun des éléments. Il se compose du nom de l’élément et des actions pour ajouter, supprimer, modifier un élément.

Vous pouvez voir les sections marquées dans l’image ci-dessous:

Installez quelques dépendances supplémentaires

Nous installerons quelques dépendances supplémentaires nécessaires pour que les interfaces utilisateur soient fonctionnelles et meilleures. Ouvrez une invite de commande à la racine du dossier du projet et installez ces dépendances,

yarn add bootstrap lodash moment react-bootstrap react-feather shortid

Permet de charger toutes les notes de la boutique

Nous utiliserons les Reactjs useEffect hook pour effectuer l’appel d’API et mettre à jour les variables d’état des notes de magasin. Voici le code pour récupérer toutes les notes de la boutique.

useEffect(() => {
  axios("/api/get-shopnotes").then(result => {
    if (result.status !== 200) {
      console.error("Error loading shopnotes");
      console.error(result);
      return;
    }
    setShopnotes(result.data.shopnotes);
    setLoading(true);
  });
}, [loading]);

Enfin, modifions la section de retour pour utiliser les données des notes de magasin. Ici, nous vérifions si les données sont chargées. Si tel est le cas, effectuez le rendu Shopnotes composant en transmettant les données que nous avons reçues à l’aide de l’API.

return (
  
{ loading ? :

Loading...

}
);

Vous pouvez trouver l’intégralité du code du fichier index.js d’ici le index.js fichier crée la route initiale (/) pour l’interface utilisateur. Il utilise d’autres composants comme, Shopnotes, Note et Item pour rendre l’interface utilisateur pleinement opérationnelle. Nous n’irons pas trop loin pour comprendre chacun de ces composants de l’interface utilisateur. Vous pouvez créer un dossier appelé composants sous le src dossier et copiez les fichiers des composants d’ici.

Finalement, le index.css fichier

Maintenant, nous avons juste besoin d’un fichier css pour améliorer l’apparence des choses. Créez un fichier appelé index.css sous le pages dossier. Copiez le contenu à partir de ce fichier CSS à la index.css fichier.

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css'

C’est tout. Nous avons fini. Vous devriez avoir l’application opérationnelle avec toutes les notes de magasin créées jusqu’à présent. Nous n’entrerons pas dans l’explication de chacune des actions sur les éléments et les notes ici pour ne pas rendre l’article très long. Vous pouvez trouver tout le code dans le référentiel GitHub. À ce stade, la structure des répertoires peut ressembler à ceci,

Un petit exercice

Je n’ai pas inclus l’implémentation de l’interface utilisateur Create Note dans le référentiel GitHib. Cependant, nous avons déjà créé l’API. Et si vous construisiez le frontal pour ajouter une note de magasin? Je suggère de mettre en œuvre un bouton dans l’en-tête, qui, lorsque vous cliquez dessus, crée une note de magasin à l’aide de l’API que nous avons déjà définie. Essaie!

Déployons-nous

Tout va bien jusqu’à présent. Mais il y a un problème. Nous exécutons l’application localement. Bien que productif, il n’est pas idéal pour le public d’y accéder. Corrigeons ce problème en quelques étapes simples.

Assurez-vous de valider toutes les modifications de code dans le référentiel Git, par exemple, shopnote. Vous avez déjà un compte Netlify. Veuillez vous connecter et cliquer sur le bouton Nouveau site de Git.

Ensuite, sélectionnez les services Git appropriés dans lesquels le code source de votre projet est poussé. Dans mon cas, c’est GitHub.

Parcourez le projet et sélectionnez-le.

Fournissez les détails de configuration comme la commande build, publiez le répertoire comme indiqué dans l’image ci-dessous. Cliquez ensuite sur le bouton pour fournir des informations de configuration avancées. Dans ce cas, nous passerons le FAUNA_SERVER_SECRET paire valeur / clé du fichier .env. Veuillez copier-coller dans les champs respectifs. Cliquez sur déployer.

Vous devriez voir la construction réussie dans quelques minutes et le site sera en ligne juste après cela.

En résumé

Résumer:

  • Le Jamstack est une architecture de développement Web moderne basée sur JavaScript côté client, des API réutilisables et un balisage prédéfini.
  • 70% à 80% des fonctionnalités qui nécessitaient autrefois un back-end personnalisé peuvent désormais être réalisées soit sur le front-end, soit sur des API, des services dont vous pouvez profiter.
  • Faune fournit l’API de données pour les applications sans client-serveur. Nous pouvons utiliser GraphQL ou FQL de Fauna pour parler au magasin.
  • Les fonctions sans serveur de Netlify peuvent être facilement intégrées à Fauna en utilisant les mutations et requêtes GraphQL. Cette approche peut être utile lorsque vous avez besoin d’une authentification personnalisée construite avec les fonctions Netlify et une solution flexible comme Auth0.
  • Gatsby et d’autres générateurs de sites statiques sont d’excellents contributeurs au Jamstack pour offrir une expérience utilisateur rapide.

Merci d’avoir lu jusqu’ici! Connectons-nous. Vous pouvez @ moi sur Twitter (@tapasadhikary) avec des commentaires, ou n’hésitez pas à suivre.



Close Menu