Comment créer un CMS avec React et Google Sheets

require (« dotenv ») const express = require (« express ») () // process.env global var est injecté par Nœud au moment de l’exécution // Représente l’état de l’environnement sysconst p = process.env // Configurez la route GET dans Expressexpress.get (‘/ api / team /’, async (requestsend ( » hello world « )}) // Écouteur express, sur le port spécifié dans .env fileexpress.listen (p.PORT, () => consolePORT} `)) Ici, nous appelons essentiellement les packages qui nous permettent d’accéder à l’objet des feuilles de calcul, et à la ligne six, nous définissons une variable de « p » qui crée un raccourci vers process.env. Essentiellement, cela représentera l’état de notre environnement système pour l’application au moment où elle commence à s’exécuter. En ajoutant un raccourci, nous pourrons accéder efficacement à l’objet de feuilles de calcul avec beaucoup moins d’effort. Le reste du programme initialise notre route GET express (c’est-à-dire comment nous allons interroger notre feuille) et met en place une fonction d’écoute pour aider à la construction. Cela nous donnera une invite pratique pour savoir sur quel port le serveur express fonctionne pendant que nous travaillons à connecter notre front-end React à l’application. Enfin, dirigez-vous vers votre fichier .env et attribuez votre numéro de port comme indiqué ci-dessous en texte brut, « PORT = 8000 » et appuyez sur Enregistrer. Exécutez node index.js à partir de la racine de votre terminal, et vous devriez voir apparaître le message listen console.log indiquant sur quel port votre serveur fonctionne actuellement – dans ce cas, il s’agit du port 8000. Si vous vous dirigez vers votre navigateur et accédez au port sur laquelle votre application est en cours d’exécution, vous remarquerez que votre méthode GET échoue. Corrigeons ça. Pour le moment, nous avons établi notre méthode d’interrogation de nos données. Nous devons maintenant faire circuler les données via notre serveur. La prochaine étape consiste à assembler votre feuille de calcul Google avec les en-têtes et le contenu que vous souhaitez que votre projet de nœud et votre application React utilisent. Si vous souhaitez suivre, n’hésitez pas à faire une copie de la feuille de calcul « Rencontrez l’équipe » que nous avons créée. La première chose que vous devrez soulever est votre SPREADSHEET_ID. Vous pouvez le trouver en copiant la longue chaîne (ou slug) trouvée dans l’URL après / d /. Par exemple, dans ce cas, notre slug est « 1f7o11-W_NSygxXjex8lU0WZYs8HlN3b0y4Qgg3PX7Yk ». Une fois que vous avez saisi cette chaîne, incluez-la dans votre fichier .env sous SPREADSHEET_ID. À ce stade, votre fichier .env devrait ressembler à quelque chose comme ceci: Ensuite, dirigez-vous vers la page de démarrage rapide de Google Sheets Node.js pour activer l’API Google Sheets. Vous devrez cliquer sur le bouton bleu « Activer » avant de nommer votre projet, en sélectionnant « Serveur Web » et en entrant votre URL d’hôte local lors de la configuration des valeurs 0auth. Si elle est exécutée correctement, cette étape aura activé l’API Google Sheets à partir de votre compte Google Cloud Platform (GCP). Pour confirmer que cela s’est produit, accédez simplement à votre console GCP et vous repérerez votre projet sur votre page de profil. Pour authentifier cet échange de données, nous devons générer une clé API. Cela autorisera votre application à accéder à votre Google Drive, à identifier votre feuille de calcul via le SPREADSHEET_ID, puis à effectuer une requête GET pour récupérer les données à analyser et à afficher sur votre front-end React. Pour obtenir votre clé API, vous devez accéder à la section des identifiants de la console GCP Une fois votre clé générée, copiez-la et ajoutez-la dans votre fichier .env sous API_KEY. Parfait ! Commençons par initialiser et utiliser la clé dans notre code pour authentifier notre requête Google Sheets. Dans l’extrait de code ci-dessous, vous remarquerez que nous utilisons l’opérateur await pour coïncider avec la fonction async lancée au début du programme index.js présenté plus haut dans ce didacticiel. Pour afficher le code complet comme référence, vous pouvez vous rendre ici pour examiner et même cloner le référentiel. Maintenant que nous avons autorisé notre objet de feuilles, il est temps de réduire les données. Il s’agit d’un processus par lequel nous supprimons toutes les données inutiles et superflues de l’objet JSON, de sorte qu’il ne nous reste que les sections les plus vitales de l’objet que nous modéliserons dans notre interface React. Accédez au fichier index.js du référentiel lié et vous verrez comment nous avons pu le faire. Nous commençons avec un tableau vide, puis nous parcourons les lignes de la feuille en attribuant une clé correspondant à l’en-tête de colonne, et faisons correspondre la valeur à celle des données de cellule pour cette ligne particulière. alors vous avez plus que probablement utilisé le package create-react-app qui est de loin l’un des plus grands cadeaux de Facebook au monde du développement d’applications. Avec une seule commande, vous êtes en mesure de faire tourner une instance en vous donnant la structure de fichiers et la plupart de ce dont vous avez besoin pour démarrer. La commande ‘create-react-app’ génère une application React d’une page unique hébergée localement qui ne nécessite aucune configuration pour démarrer. Lorsque vous exécutez la commande, create-react-app exécutera des vérifications locales sur votre répertoire cible, construira votre package.json, créera votre liste de dépendances et formera la structure de vos fichiers JS groupés. Commençons ce processus en exécutant ce qui suit à la racine de notre application: $ npx create-react-app client $ cd client $ npm startSi vous rencontrez des problèmes avec la version de npm / npx que vous exécutez, alors le ci-dessous la commande modifiée avec un peu plus de dégagement de cache devrait vous orienter à droite vous commencerez à voir create-react-app installer son package requis et créer la structure de fichiers ci-dessous. Enfin, vous remarquerez que votre application contient désormais deux fichiers package.json. Nous devrons apporter une modification à la section des scripts à la racine, puis ajouter une ligne sous la section « privée » de votre répertoire client. C’est pour que vous puissiez tout déclencher avec une simple commande – le sauveur éternel qui est npm start. Dans votre racine: « start »: « node index.js -ignore ‘./client' » Et dans votre client: « proxy »: « http: // localhost: 8000 » Maintenant, avec une exécution de npm start, vous serez rencontré votre front-end React en récupérant les informations de votre CMS Google Sheets. Si vous extrayez le serveur principal (fonctionnant sur le port 8000) dans votre navigateur, vous rencontrerez un objet JSON affichant les données de votre CMS sous sa forme brute et non formatée. Mais, plus important encore pour les nombreuses parties prenantes désireuses d’accéder à votre nouveau site, voici ce que vous verrez s’afficher sur le front-end. Ce qui était autrefois des entrées sur une feuille de calcul, est maintenant une application Web React entièrement formatée et un peu brillante, prête à être déployée via votre service d’hébergement préféré. L’avantage de cette solution est qu’elle peut être intégrée à votre application plus large basée sur React et stylisée à l’aide de l’un des nombreux thèmes et modèles gratuits, ce qui signifie que votre sortie finale peut réellement évoluer avec vous. Voilà – encore une autre raison d’aimer les feuilles de calcul

Télécharger maintenantSix raisons d’accélérer la surveillance des actifs à distance avec AI

Tags: