Fermer

juin 9, 2020

Des sites statiques aux applications JAMstack des utilisateurs finaux avec FaunaDB


À propos de l'auteur

Bryan est un concepteur, développeur et éducateur passionné de CSS et de sites statiques. Il travaille activement pour encadrer et enseigner aux développeurs et concepteurs la valeur…
En savoir plus sur
Bryan
Robinson
…

Pour passer du «site» à l'application, nous devons plonger dans le monde du contenu «généré par l'application». Dans cet article, nous allons commencer dans ce monde avec la puissance des données sans serveur. Nous commencerons par une démonstration simple en ingérant et en publiant des données sur FaunaDB puis nous étendrons cette fonctionnalité dans une application à part entière en utilisant Auth0, le système de jetons de FaunaDB et les fonctions définies par l'utilisateur.

s'est avéré être l'un des meilleurs moyens de produire des sites axés sur le contenu, mais c'est également un excellent endroit pour héberger des applications. Si vous avez utilisé JAMstack pour vos sites Web performants, les démos de cet article vous aideront également à étendre ces philosophies aux applications.

Lorsque vous utilisez JAMstack pour créer des applications, vous avez besoin d'un service de données qui s'intègre le plus aspects importants de la philosophie JAMstack:

  • Distribution mondiale
  • Zéro besoin opérationnel
  • Une API conviviale pour les développeurs.

Dans l'écosystème JAMstack, il existe de nombreuses sociétés de logiciels en tant que service qui offrent des moyens de obtenir et stocker des types de données spécifiques. Que vous souhaitiez envoyer des e-mails, des SMS ou passer des appels téléphoniques (Twilio) ou accepter des soumissions de formulaires de manière efficace (Formspree, Formingo, Formstack, etc.), il semble qu'il existe une API pour presque tout.

Ce sont d'excellents services qui peuvent faire une grande partie du travail de bas niveau de nombreuses applications, mais une fois que vos données sont plus complexes qu'une feuille de calcul ou doivent être mises à jour et stockées en temps réel, il est peut-être temps de consulter une base de données.

L'API de service peut encore être utilisé, mais une base de données centrale gérant l'état et les opérations de votre application devient beaucoup plus importante. Même si vous avez besoin d'une base de données, vous voulez toujours qu'elle suive les principales philosophies JAMstack que nous avons décrites ci-dessus. Cela signifie que nous ne voulons pas héberger notre propre serveur de base de données. Nous avons besoin d'une solution de base de données en tant que service. Notre base de données doit être optimisée pour JAMstack:

  • Optimisée pour les appels d'API à partir d'un navigateur ou d'un processus de construction.
  • Flexible pour modéliser vos données de la manière spécifique dont votre application a besoin.
  • Distribution mondiale de nos données comme un CDN héberge nos sites.
  • Évolutivité mains libres sans intervention d'un administrateur de base de données ou d'un développeur.

Le service que vous recherchez doit suivre ces principes de données sans serveur. Dans nos démos, nous explorerons FaunaDB une base de données mondiale sans serveur, avec GraphQL natif pour assurer que nous gardons nos applications en phase avec les philosophies de JAMstack.

Plongeons-nous dans le code! [19659018] Une application de livre d'or JAMstack avec Gatsby et la faune

Je suis un grand fan de la réinvention des outils et concepts Internet des années 1990 et du début des années 2000. Nous pouvons prendre ces concepts et les faire sentir frais avec le nouvel ensemble d'outils et d'interactions.

guestbook-form-and-signature
Un aperçu de l'application que nous créons. Un formulaire de signature avec une liste de signatures ci-dessous. Le formulaire remplira une base de données FaunaDB et cette base de données créera la liste des vues. ( Grand aperçu )

Dans cette démo, nous allons créer une application qui faisait fureur à cette époque: le livre d'or. Un livre d'or n'est rien d'autre qu'un contenu et une interaction générés par l'application. Un utilisateur peut venir sur le site, voir toutes les signatures des anciens «invités», puis laisser les leurs.

Pour commencer, nous rendrons statiquement notre site et construirons nos données à partir de Fauna pendant notre étape de construction. Cela fournira les performances rapides que nous attendons d'un site JAMstack. Pour ce faire, nous utiliserons GatsbyJS.

Configuration initiale

Notre première étape sera d'installer Gatsby globalement sur notre ordinateur. Si vous n'avez jamais passé beaucoup de temps sur la ligne de commande, le didacticiel «partie 0» de Gatsby vous aidera à être opérationnel. Si Node et NPM sont déjà installés, vous installerez Gatsby CLI globalement et créerez un nouveau site avec lui à l'aide des commandes suivantes:

 npm install -g gatsby-cli 
 gatsby new

Gatsby est livré avec un grand référentiel de démarreurs qui peut vous aider à démarrer votre projet. Pour cette démo, j'ai choisi un simple démarreur équipé du framework Bulma CSS.

 gatsby new guestbook-app https://github.com/amandeepmittal/gatsby-bulma-quickstart[19659030diplomatedCelanousdonneunbondépartpointetstructureIlprésenteégalementl'avantagesupplémentairedeproposerdesstylesprêtsàl'emploi
 Faisons un peu de nettoyage pour les choses dont nous n'avons pas besoin. Nous allons commencer par simplifier notre  components.header.js 
 importation de React à partir de 'react';

import './style.scss';

const Header = ({siteTitle}) => (
  

    

      

        

          

             Signez notre livre d'or virtuel
          

          

             Si vous aimez tout ce que nous faisons, assurez-vous de signer notre livre d'or virtuel
          

        

      

    

  

);

exporter l'en-tête par défaut;

 Cela supprimera une grande partie du contenu de marque. N'hésitez pas à personnaliser cette section, mais nous n'écrirons aucun de nos codes ici.
 Ensuite, nous allons nettoyer le fichier  components / midsection.js . C'est là que le code de notre application sera rendu.
 importez React, {useState} de 'react';
importer des signatures à partir de './signatures';
importer SignForm à partir de './sign-form';


const Midsection = () => {

    const [sigData, setSigData] = useState (data.allSignatures.nodes);
    revenir (
        

            

                

                    
 Signer ici 

                    
                


                

                    
 Afficher les signatures 

                    
                

            

        

    )
}

exporter la section médiane par défaut;

 Dans ce code, nous avons principalement supprimé le contenu "site" et ajouté quelques nouveaux composants. Un  qui contiendra notre formulaire pour soumettre une signature et un composant  pour contenir la liste des signatures.
 Maintenant que nous avons une liste relativement vierge, nous pouvons configurer notre base de données FaunaDB.
 Up A FaunaDB Collection
 Après vous être connecté à Fauna (ou ouvrir un compte), vous aurez la possibilité de créer une nouvelle base de données. Nous allons créer une nouvelle base de données appelée  livre d'or .
 Collection de signatures 
 L'état initial de notre collection de signatures après l'ajout de notre premier document. ( Grand aperçu )
 Dans cette base de données, nous allons créer une "Collection" appelée  signature . Collections dans Fauna un groupe de documents qui sont à leur tour des objets JSON.
 Dans cette nouvelle collection, nous allons créer un nouveau document avec le JSON suivant:
 {
 nom: "Bryan Robinson",
 message:
   "Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme"
} 
 Ce sera le schéma de données simple pour chacune de nos signatures. Pour chacun de ces documents, Fauna créera des données supplémentaires autour de lui.
 {
 "ref": Ref (Collection ("signatures"), "262884172900598291"),
 "ts": 1586964733980000,
 "Les données": {
   "nom": "Bryan Robinson",
   "message": "Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme"
 }
} 
 La référence   est l'identifiant unique à l'intérieur de Fauna et la  ts  est l'heure (en tant qu'horodatage Unix) du document a été créé / mis à jour.
 Après avoir créé notre données, nous voulons un moyen facile de saisir toutes ces données et de les utiliser dans notre site. Dans Fauna, le moyen le plus efficace pour obtenir des données est via un index. Nous allons créer un index appelé  allSignatures . Cela va récupérer et retourner tous nos documents de signature dans la collection.
 Maintenant que nous avons un moyen efficace d'accéder aux données dans Gatsby, nous avons besoin de Gatsby pour savoir où les obtenir.
 Configuration du plug-in de source de données Fauna Gatsby
 npm install gatsby-source-faunadb 
 Après avoir installé ce plugin sur notre site Web, Gatsby possède un référentiel de plug-ins qui peuvent récupérer des données à partir de diverses sources. projet, nous devons le configurer dans notre fichier  gatsby-config.js . Dans le tableau  plugins  de notre projet, nous allons ajouter un nouvel élément.
 {
    résoudre: `gatsby-source-faunadb`,
    options: {
    // Le secret de la clé que vous utilisez pour vous connecter à votre base de données Fauna.
    // Vous pouvez en générer sur l'onglet "Sécurité" de votre console Fauna.
        secret: process.env.YOUR_FAUNADB_SECRET,
    // Le nom de l'index que vous souhaitez interroger
    // Vous pouvez créer un index dans l'onglet "Index" de votre console Fauna.
        index: `allSignatures`,
    // C'est le nom sous lequel vos données apparaîtront dans les requêtes Gatsby GraphQL
    // Ce qui suit créera des requêtes appelées `allBird` et` bird`.
        type: "Signatures",
    // Si vous devez limiter le nombre de documents retournés, vous pouvez spécifier un
    // Nombre maximum facultatif à lire.
    // taille: 100
    },
},

 Dans cette configuration, vous lui fournissez votre clé secrète de faune, le nom d'index que nous avons créé et le «type» auquel nous voulons accéder dans notre requête Gatsby GraphQL.
 Où est-ce que  process.env.YOUR_FAUNADB_SECRET
 Dans votre projet, créez un fichier  .env  - et incluez ce fichier dans votre .gitignore! Ce fichier donnera à la configuration Webpack de Gatsby la valeur secrète. Cela gardera vos informations sensibles en sécurité et non stockées dans GitHub.
 YOUR_FAUNADB_SECRET = "valeur de la faune" 
  Nous pouvons ensuite nous diriger vers l'onglet "Sécurité" de notre base de données et créer une nouvelle clé. Comme il s'agit d'un secret protégé, il est sûr d'utiliser un rôle de «serveur». Lorsque vous enregistrez la clé, elle vous fournira votre secret. Assurez-vous de saisir cela maintenant, car vous ne pouvez pas l'obtenir à nouveau (sans recréer la clé). 
 Une fois la configuration établie, nous pouvons écrire une requête GraphQL dans nos composants pour récupérer les données à la construction
 Obtention des données et création du modèle
 Nous allons ajouter cette requête à notre composant Midsection pour la rendre accessible à nos deux composants.
 const Midsection = () => {
 const data = useStaticQuery (
 graphql`
            requête GetSignatures {
                allSignatures {
                  nœuds {
                    Nom
                    message
                    _ts
                    _id
                  }
                }
            } `
        );
// ... reste du composant
} 
 Ceci accède au type  Signatures  que nous avons créé dans la configuration. Il saisira toutes les signatures et fournira un tableau de nœuds. Ces nœuds contiendront les données dont nous avons besoin:  nom  message  ts  id .
 Nous allons définir ces données dans notre état - cela facilitera leur mise à jour plus tard.
 const [sigData, setSigData] = useState (data.allSignatures.nodes); 
 Maintenant, nous pouvons passer  sigData  comme accessoire dans  et  setSigData  dans .
  


  
 Configurons notre composant Signatures pour utiliser ces données!
 importez React depuis 'react';
importer la signature à partir de './signature'

const Signatures = (props) => {
    const SignatureMarkup = () => {
        return props.sigData.map ((signature, index) => {
            revenir (
                
            )
        }).inverser()
    }

    revenir (
        
    )
}

exporter les signatures par défaut

 Dans cette fonction, nous allons  .map ()  sur nos données de signature et créer un tableau de balisage basé sur un nouveau composant  dans lequel nous transmettons les données.
 Le  Le composant Signature  gérera le formatage de nos données et le renvoi d'un ensemble approprié de code HTML.
 importez React de 'react';

const Signature = ({signature}) => {
    const dateObj = nouvelle date (signature._ts / 1000);
    let dateString = `$ {dateObj.toLocaleString ('default', {semaine: 'long'})}, $ {dateObj.toLocaleString ('default', {mois: 'long'})} $ {dateObj.getDate () } à $ {dateObj.toLocaleTimeString ('défaut', {heure: '2 chiffres', minute: '2 chiffres', heure12: faux})} `

    revenir (
    
      
        
 {signature.name} - {dateString} 

        

             {signature.message}
        

    

)};

exporter la signature par défaut;

 À ce stade, si vous démarrez votre serveur de développement Gatsby, vous devriez avoir une liste de signatures existant actuellement dans votre base de données. Exécutez la commande suivante pour être opérationnel:
 gatsby develop 
 Toute signature stockée dans notre base de données créera du HTML dans ce composant. Mais comment pouvons-nous obtenir des signatures dans notre base de données?
 Configurons un composant de formulaire de signature pour envoyer des données et mettre à jour notre liste de signatures.
 Faisons en sorte que notre JAMstack Guestbook soit interactif
 Premièrement, nous allons configurer la base structure pour notre composant. Il affichera un formulaire simple sur la page avec une entrée de texte, une zone de texte et un bouton pour la soumission.
 import React from 'react';

import faunadb, {requête as q} from "faunadb"

var client = new faunadb.Client ({secret: process.env.GATSBY_FAUNA_CLIENT_SECRET})

exporter la classe par défaut SignForm étend React.Component {
    constructeur (accessoires) {
        super (accessoires)
        this.state = {
            sigName: "",
            sigMessage: ""
        }
    }

    handleSubmit = async event => {
        // Gérer la soumission
    }

    handleInputChange = event => {
        // Lorsqu'une entrée change, mettez à jour l'état
    }

    render () {
        revenir (
            

                

                    

                 
                    

                

                

                    
                

                

                    
                

            

        )
    }

}

 Pour commencer, nous allons configurer notre état pour inclure le nom et le message. Nous les remplacerons par défaut par des chaînes vides et les insérerons dans nos