Accéder à vos données avec les fonctions Netlify et réagir

Les générateurs de sites statiques sont populaires pour leur vitesse, leur sécurité et leur expérience utilisateur. Cependant, parfois, votre application a besoin de données qui ne sont pas disponibles lorsque le site est construit. React est une bibliothèque de création d'interfaces utilisateur qui vous aide à récupérer et à stocker des données dynamiques dans votre application client.

La faune est une base de données flexible et sans serveur fournie comme une API qui élimine complètement les frais généraux opérationnels tels que la planification de la capacité, la réplication des données et la maintenance planifiée. La faune vous permet de modéliser vos données en tant que documents, ce qui en fait un ajustement naturel pour les applications Web écrites avec React. Bien que vous puissiez accéder directement à la faune via un pilote JavaScript, cela nécessite une implémentation personnalisée pour chaque client qui se connecte à votre base de données. En plaçant votre base de données de faune derrière une API, vous pouvez permettre à tout client autorisé de se connecter, quel que soit le langage de programmation.

Les fonctions Netlify vous permettent de créer des applications dynamiques évolutives en déploiement du code côté serveur qui fonctionne comme des points de terminaison de l'API. Dans ce didacticiel, vous créez une application sans serveur à l'aide de React, Netlify Fonctions et Fauna. Vous apprenez les bases du stockage et de la récupération de vos données avec la faune. Vous créez et déployez des fonctions Netlify pour accéder à vos données dans la faune en toute sécurité. Enfin, vous déploiez votre application React à Netlify.

Début avec la faune

La faune est une base de données OLTP NOSQL sans serveur distribuée et fortement cohérente qui est conforme à l'acide et propose une interface multimodelle. La faune prend également en charge les ensembles de données de documents, relationnels, graphiques et temporels à partir d'une seule requête. Tout d'abord, nous commencerons par créer une base de données dans la console de la faune en sélectionnant l'onglet de base de données et en cliquant sur le bouton Créer de la base de données.

Ensuite, vous devrez créer une collection. Pour cela, vous devrez sélectionner une base de données, et sous l'onglet Collections, cliquez sur Créer la collection.

La faune utilise une structure particulière en matière de données persistantes. La conception se compose d'attributs comme l'exemple ci-dessous.

 {
  "Ref": Ref (collection ("Avengers"), "299221087899615749"),
  "TS": 1623215668240000,
  "données": {
    "ID": "DB7BD11D-29C5-4877-B30D-DFC4DFB2B90E",
    "Nom": "Captain America",
    "Power": "haute résistance",
    "Description": "Bouclier"
  }
}

Notez que la faune conserve une colonne de référence qui est un identifiant unique utilisé pour identifier un document particulier. L'attribut TS est un horodatage pour déterminer l'heure de création de l'enregistrement et l'attribut de données responsable des données.

Pourquoi la création d'un index est importante

Ensuite, créons deux index pour notre collection Avengers . Cela sera assez précieux dans la dernière partie du projet. Vous pouvez créer un index à partir de l'onglet Index ou à partir de l'onglet Shell, qui fournit une console pour exécuter des scripts. La faune prend en charge deux types de techniques de requête: FQL (langue de requête de Fauna) et GraphQL. FQL fonctionne basé sur le schéma de la faune, qui comprend des documents, des collections, des index, des ensembles et des bases de données.

Créons les index à partir du shell.

Cette commande créera un index sur la collection, qui créera un index par le champ ID à l'intérieur de l'objet de données. Cet index renverra une réf de l'objet de données. Ensuite, créons un autre index pour l'attribut de nom et nommez- le Avenger_By_Name .

Création d'une clé de serveur

Pour créer une touche de serveur, nous devons naviguer dans l'onglet Sécurité et cliquer sur le bouton de la nouvelle clé . Cette section vous invitera à créer une clé pour une base de données sélectionnée et le rôle de l'utilisateur.

Début avec les fonctions Netlify et réagir

Dans cette section, nous verrons comment nous créons des fonctions Netlify avec React. Nous utiliserons Create-React-App pour créer l'application React.

 NPX Create-React-App Avengers-Faunadb

Après avoir créé l'application React, installons certaines dépendances, y compris les dépendances de la faune et de Netlify.

 Yarn Ajouter Axios Bootstrap Node-Sass UUID Faunadb React-Netlify-Identity React-Netlify-Identity-Widget

Créons maintenant notre première fonction Netlfiy. Pour faire les fonctions, nous devons d'abord installer Netlifiy CLI globalement.

 NPM Installer Netlify-Cli -g

Maintenant que la CLI est installée, créons un fichier .env sur notre racine de projet avec les champs suivants.

 Faunadb_Server_Secret = <faunadb secret key>
React_app_netlify = <netlify application url></netlify></faunadb>

Ensuite, voyons comment nous pouvons commencer par la création de fonctions Netlify. Pour cela, nous devrons créer un répertoire dans notre racine de projet appelée fonctions et un fichier appelé netlify.toml , qui sera responsable de la maintenance des configurations de notre projet Netlify. Ce fichier définit le répertoire, le répertoire de construction de notre fonction et notre exécution à exécuter.

 [construire]
Command = "NPM Run build"
functions = "functions /"
publier = "build"

[[Redirection]]
  de = "/ api / *"
  vers = "/.netlify/functions/plat"
  Statut = 200
  force = vrai

Nous ferons une configuration supplémentaire pour le fichier de configuration Netlify, comme dans la section de redirection de cet exemple. Notez que nous modifions le chemin par défaut de la fonction Netlify de /.netlify/** vers / api /. Cette configuration est principalement pour l'amélioration de l'apparence et du champ de l'URL de l'API. Donc, pour déclencher ou appeler notre fonction, nous pouvons utiliser le chemin:

 https://domain.com/api/getpokemons

…au lieu de:

 https://domain.com/.netlify/getpokemons

Ensuite, créons notre fonction Netlify dans le répertoire des fonctions . Mais, d'abord, faisons un fichier de connexion pour la faune appelée util / connections.js, renvoyant un objet de connexion de faune.

 const faunadb = require ('faunadb');
const q = faunadb.query

const clientQuery = new Faunadb.Client ({{
  secret: process.env.faunadb_server_secret,
});

module.exports = {clientQuery, q};

Ensuite, créons une fonction d'assistance vérifiant la référence et le retour, car nous devrons analyser les données à plusieurs reprises tout au long de l'application. Ce fichier sera util / helper.js .

 const ResponseObj = (statuscode, data) => {
  retour {
    statuscode: statuscode,
    En-têtes: {
     / * Requis pour que le support COR fonctionne * /
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "*",
      "Access-Control-Allow-Methods": "Get, Post, Options",
    },
   corps: json.stringify (données)
  };
};

const de demandesobj = (data) => {
  return json.parse (data);
}

module.Exports = {ResponseObj: ResponseObj, requestObj: requestObj}

Notez que les fonctions d'assistance ci-dessus gèrent les problèmes CORS , le stringification et l'analyse des données JSON. Créons notre première fonction, Getavengers , qui renverra toutes les données.

 const {réponseoBj} = require ('./ util / helper');
const {q, clientQuery} = require ('./ util / connection');

exports.handler = async (événement, contexte) => {
  essayer {
   Laissez Avengers = Await ClientQuery.Query (
     q.map (
       q.paginate (q.documents (q.collection ('Avengers'))),
       q.lambda (x => q.get (x))
      )
    )
    Retour ResponseBj (200, Avengers)
  } catch (erreur) {
    console.log (erreur)
    return ResponseObj (500, erreur);
  }
};

Dans l'exemple de code ci-dessus, vous pouvez voir que nous avons utilisé plusieurs commandes FQL comme Map , Paginate , Lamda. La clé de carte est utilisée pour parcourir le tableau, et il faut deux arguments: un tableau et la lambda . Nous avons passé le Paginate pour le premier paramètre, qui vérifiera la référence et renverra une page de résultats (un tableau). Ensuite, nous avons utilisé une instruction LAMDA, une fonction anonyme qui est assez similaire à une fonction de flèche anonyme dans ES6.

Ensuite, créons notre fonction Addavenger responsable de la création / de l'insertion de données dans la collection.

 const {requestObj, réponseoBj} = require ('./ util / helper');
const {q, clientQuery} = require ('./ util / connection');

exports.handler = async (événement, contexte) => {
  Selt Data = requestObj (event.body);

  essayer {
    Laissez Avenger = Await ClientQuery.Query (
      Q.Create (
        Q.Collection («Avengers»),
        {
          données: {
            ID: data.id,
            Nom: data.name,
            puissance: data.power,
            Description: Data.Description
          }
        }
      )
    ));

    Retour ResponseBj (200, Avenger)
  } catch (erreur) {
    console.log (erreur)
    return ResponseObj (500, erreur);
  }
 
};

Pour enregistrer des données pour une collection particulière, nous devrons passer ou les données dans l'objet Data: {} comme dans l'exemple de code ci-dessus. Ensuite, nous devons le transmettre à la fonction de création et le pointer vers la collecte que vous souhaitez et les données. Alors, exécutons notre code et voyons comment cela fonctionne via la commande Netlify Dev .

Débusons la fonction Getavengers via le navigateur via l'URL http: // localhost: 8888 / api / getavengers .

La fonction ci-dessus va récupérer l'objet Avenger par la propriété de nom de recherche dans l'index Avenger_BY_NAME . Mais, d'abord, appelons la fonction GetavengerByName via une fonction Netlify. Pour cela, créons une fonction appelée Searchavenger.

 const {réponseoBj} = require ('./ util / helper');
const {q, clientQuery} = require ('./ util / connection');

exports.handler = async (événement, contexte) => {
  const {
    QueryStringParameters: {nom},
  } = événement;

  essayer {
    Laissez Avenger = Await ClientQuery.Query (
      q.call (q.function ("getavengerByName"), [nom])
    ));
    Retour ResponseBj (200, Avenger)
  } catch (erreur) {
    console.log (erreur)
    return ResponseObj (500, erreur);
  }
};

Notez que la fonction d'appel prend deux arguments où le premier paramètre sera la référence pour la fonction FQL que nous avons créée et les données que nous devons transmettre à la fonction.

Appeler la fonction Netlify via React

Maintenant que plusieurs fonctions sont disponibles, consomnons ces fonctions via React. Étant donné que les fonctions sont des API REST, consommons-les via Axios et pour la gestion de l'État, utilisons l'API de contexte de React. Commençons par le contexte de l'application appelé AppContext.js .

 import {createContext, userReducer} depuis "react";
Appréducteur d'importation de "./appreducer"

const initialstate = {
    Isoditing: faux,
    Avenger: {nom: '', description: '', puissance: ''},
    Avengers: [],
    Utilisateur: NULL,
    isloggedin: faux
};

export const appontext = createContext (initialState);

export const appontextProvider = ({enfants}) => {
    const [State, Dispatch] = userReducer (Appreducer, InitialState);

    const Login = (data) => {Dispatch ({Type: 'Login', charge utile: données})}
    const logout = (data) => {dissatch ({type: 'logout', charge utile: données})}
    const getavenger = (data) => {dissatch ({type: 'get_avenger', charge utile: données})}
    const updateAvenger = (data) => {dissatch ({type: 'update_avenger', charge utile: données})}
    const Clearavenger = (data) => {dissatch ({type: 'clear_avenger', charge utile: données})}
    const selectAVenger = (data) => {dissatch ({type: 'select_avenger', charge utile: données})}
    const getavengers = (data) => {dissatch ({type: 'get_avengers', charge utile: données})}
    const CreateAvenger = (data) => {dissatch ({type: 'create_avenger', charge utile: données})}
    const DeleteAVengers = (data) => {dissatch ({type: 'Delete_avenger', charge utile: données})}

    return <ppcontext.provider value="{{{" ... se connecter d selectavenger updateavenger clearavenger getavenger getavengers cr> {enfants}  appContext.provider>
}

Exporter par défaut AppContextProvider;</ppcontext.provider>

Créons les réducteurs de ce contexte dans le fichier Appreducer.js , qui consistera en une fonction de réducteur pour chaque opération dans le contexte de l'application.

 const updateItem = (Avengers, data) => {
    Soit Avenger = Avengers.Find ((Avenger) => Avenger.id === data.id);
    Laissez UpdatedAVenger = {... Avenger, ... Data};
    Soit AvengerIndex = Avengers.FinDindex ((Avenger) => Avenger.id === Data.id);
    retour [
        ... Avengers.slice (0, AvengerIndex),
        Updatedavenger,
        ... Avengers.slice (AvengerIndex),
    ]]
}

const DeleteItem = (Avengers, id) => {
    return Avengers.Filter ((Avenger) => Avenger.Data.id! == ID)
}

const appréducteur = (état, action) => {
    switch (action.type) {
        case 'select_avenger':
            retour {
                ...État,
                isédit: vrai,
                Avenger: Action.Payload
            }
        case 'clear_avenger':
            retour {
                ...État,
                Isoditing: faux,
                Avenger: {nom: '', Description: '', puissance: ''}
            }
        case 'update_avenger':
            retour {
                ...État,
                Isoditing: faux,
                Avengers: UpdateItem (State.avengers, Action.Payload)
            }
        case 'get_avenger':
            retour {
                ...État,
                Avenger: action.payload.data
            }
        case 'get_avengers':
            retour {
                ...État,
                Avengers: array.isArray (action.payload && action.payload.data)? action.payload.data: [{... action.payload}]
            };
        case 'create_avenger':
            retour {
                ...État,
                Avengers: [{data: action.payload}, ... state.avengers]
            };
        case 'Delete_avenger':
            retour {
                ...État,
                Avengers: DeleteItem (State.avengers, Action.Payload)
            };
        Cas «Connexion»:
            retour {
                ...État,
                Utilisateur: action.payload,
                IsloggedIn: vrai
            };
        case «déconnexion»:
            retour {
                ...État,
                Utilisateur: NULL,
                isloggedin: faux
            };
        défaut:
            état de retour
    }
}

Exportation par défaut l'appréducteur;

Étant donné que le contexte d'application est maintenant disponible, nous pouvons récupérer des données à partir des fonctions Netlify que nous avons créées et les persister dans notre contexte d'application. Voyons donc comment appeler l'une de ces fonctions.

 const {Avengers, getavengers} = useContext (appContext);

const getavengers = async () => {
  Selt {data} = attendre axios.get ('/ api / getavengers);
  Getavengers (données)
}

Pour obtenir les données dans les contextes d'application, importons la fonction Getavengers de notre contexte d'application et passons les données obtenues par l'appel GET. Cette fonction appellera la fonction réductrice, qui conservera les données dans le contexte. Pour accéder au contexte, nous pouvons utiliser l'attribut appelé Avengers. Ensuite, voyons comment nous pourrions enregistrer des données sur la collecte Avengers.

 const {createAvenger} = useContext (appContext);

const CreateAenger = async (e) => {
  E.PreventDefault ();
  Laissez new_avenger = {id: uUid (), ... newavenger}
  Await Axios.Post ('/ api / addavenger', new_avenger);
  clair();
  CreateAenger (New_avenger)
}

L'objet NewAvenger ci-dessus est l'objet d'état qui conservera les données de forme. Notez que nous passons un nouvel ID de type UUID à chacun de nos documents. Ainsi, lorsque les données sont enregistrées dans la faune, nous utiliserons la fonction CreateAvenger dans le contexte de l'application pour enregistrer les données dans notre contexte. De même, nous pouvons invoquer toutes les fonctions Netlify avec des opérations CRUD comme celle-ci via Axios.

Comment déployer la demande sur netlify

Maintenant que nous avons une application de travail, nous pouvons déployer cette application sur Netlify. Il existe plusieurs façons de déployer cette application:

1. Connexion et déploiement de l'application via GitHub
2. Déploiement de la demande via la CLI Netlify

L'utilisation de la CLI vous invitera à saisir des détails et des sélections spécifiques, et la CLI s'occupera du reste. Mais dans cet exemple, nous déploierons l'application via GitHub. Donc d'abord, connectez-vous au tableau de bord Netlify et cliquez sur le nouveau site à partir du bouton GIT . Ensuite, il vous invitera à sélectionner le dépôt que vous devez déployer et les configurations de votre site comme la commande build, le dossier de construction, etc.

Comment authentifier et autoriser les fonctions par Netlify Identity

Netlify Identity fournit une suite complète de fonctionnalités d'authentification à votre application qui nous aidera à gérer les utilisateurs authentifiés tout au long de l'application. L'identité NetLify peut être facilement intégrée dans l'application sans utiliser aucun autre service et bibliothèques tiers. Pour activer l'identité Netlify, nous devons nous connecter dans notre tableau de bord Neltify, et sous notre site déployé, nous devons passer à l'onglet Identité et permettre la fonction d'identité.

L'activation de l'identité fournira un lien vers votre identité Netlify. Vous devrez copier cette URL et l'ajouter au fichier .env de votre application pour react_app_netlify . Ensuite, nous devons ajouter l'identité Netlify à notre application React via les fonctions Netlify-Identity-Widget et Netlify. Mais, d'abord, ajoutons la propriété react_app_netlify pour le composant du fournisseur de contexte d'identité dans le fichier index.js.

 importer réagir à partir de «réagir»;
Importer Reactdom de «React-Dom»;
import './index.css';
Importez "React-netlify-Identity-Widget / Styles.css"
import 'bootstrap / dist / css / bootstrap.css';
Importer l'application à partir de './app';
import {identityContextProvider} à partir de "react-netlify-identity-widget"
const url = process.env.react_app_netlify;

Reactdom.render (
  <identitycontextprovider url="{url}">
    <app></app>
   IdentityContextProvider>,
  document.getElementByid ('root')
));</identitycontextprovider>

Ce composant est la barre de navigation que nous utilisons dans cette application. Ce composant sera au-dessus de tous les autres composants pour être l'endroit idéal pour gérer l'authentification. Ce React-Netlify-Identity-Widget ajoutera un autre composant qui gérera l'utilisateur Signi = IN et s'inscrira.

Ensuite, utilisons l'identité dans nos fonctions Netlify. L'identité introduira quelques modifications mineures à nos fonctions, comme la fonction ci-dessous Getavenger.

 const {réponseoBj} = require ('./ util / helper');
const {q, clientQuery} = require ('./ util / connection');

exports.handler = async (événement, contexte) => {
    if (context.clientContext.User) {
        const {
            QueryStringParameters: {id},
        } = événement;
        essayer {
            const Avenger = attendre clientQuery.Query (
                Q.get (
                    q.match (q.index ('Avenger_By_id'), id)
                )
            ));
            Retour ResponseBj (200, Avenger)
        } catch (erreur) {
            console.log (erreur)
            return ResponseObj (500, erreur);
        }
    } autre {
        Retour ResponseObj (401, «non autorisé»);
    }
};

Le contexte de chaque demande comprendra une propriété appelée clientContext , qui consistera en des détails utilisateur authentifiés. Dans l'exemple ci-dessus, nous utilisons une condition simple pour vérifier le contexte de l'utilisateur.

Pour obtenir le ClientContext dans chacune de nos demandes, nous devons passer le jeton utilisateur via les en-têtes d'autorisation.

 const {user} = useIdentityContext ();

const getavenger = async (id) => {
  Soit {data} = attendre axios.get ('/ api / getavenger /? id =' id, utilisateur && {
    En-têtes: {
      Autorisation: `Bearer $ {user.token.access_token}`
    }
  });
  getavenger (données)
}

Ce jeton utilisateur sera disponible dans le contexte de l'utilisateur une fois connecté à l'application via le widget d'identité NetLify.

Comme vous pouvez le voir, les fonctions Netlify et la faune semblent être un duo prometteur pour la création d'applications sans serveur. Vous pouvez suivre ce dépôt GitHub pour le code complet et vous référer à cette URL pour la démo de travail.

Conclusion

En conclusion, Fauna et Netlify semblent être un duo prometteur pour la création d'applications sans serveur. Netlify offre également la flexibilité pour étendre ses fonctionnalités via les plugins pour améliorer l'expérience. Le plan de tarification avec salaire au fur et à mesure est idéal pour les développeurs pour commencer avec la faune. La faune est extrêmement rapide, et elle s'accumule automatiquement afin que les développeurs aient le temps de se concentrer plus que jamais sur leur développement. La faune peut gérer des opérations de base de données complexes où vous trouverez dans les bases de données relationnelles, document, graphique et temporelle. Le pilote de faune prend en charge toutes les principales langues telles que Android, C #, Go, Java, JavaScript, Python, Ruby, Scala et Swift. Avec toutes ces excellentes fonctionnalités, la faune semble être l'une des meilleures bases de données sans serveur. Pour plus d'informations, passez par la documentation de la faune.

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!