Comment créer un CMS avec React et Google Sheets

Lancer un site Web peut sembler être un moment marquant. C’est l’équivalent de l’ère numérique de suspendre une pancarte « Open For Business » dans votre fenêtre. Si votre signe proverbial est statique et nécessite rarement des mises à jour – par exemple, s’il est simplement destiné à communiquer des pratiques d’exploitation de base telles que les heures d’ouverture, les informations de contact et une liste de services – alors vous pouvez probablement créer un site simple en HTML et CSS, et encapsuler le projet là-bas. Mais pour la plupart des entreprises, quelque chose de beaucoup plus dynamique est nécessaire.Comme le terme l’indique, un système de gestion de contenu, ou CMS, est une structure qui permet aux utilisateurs de modéliser, modifier, créer et mettre à jour le contenu d’un site Web sans avoir à le coder en dur. dans le site lui-même. De nombreuses entreprises utilisent des outils CMS standard tels que WordPress, Joomla, Magento ou Squarespace pour gérer cette fonction. Les solutions -box partagent un trait commun : elles sont faciles à interpréter. Pour tout CMS, son succès en tant que produit repose entièrement sur la facilité avec laquelle les équipes peuvent créer, gérer et mettre à jour des structures de données logiques. Plus ce processus est simple, plus il devient facile pour les équipes de créer des modèles de contenu robustes. Cela étant dit, comme tout ingénieur vous le dira, la mise en œuvre de bases de données relationnelles est en soi sa propre forme d’art. Le problème avec ces solutions prêtes à l’emploi est qu’elles peuvent souvent inclure beaucoup trop de fonctionnalités, répondre à des niveaux complètement différents de littératie technologique et, de plus, peuvent vous faciliter la tâche pour accumuler une facture coûteuse.. Une autre option consiste à créer votre propre CMS personnalisé conçu pour répondre à vos besoins spécifiques.Lorsque la construction de ce dont vous avez besoin est souvent considérée comme la voie panoramique pour résoudre votre problème, lorsqu’elle est abordée de la bonne manière, elle peut s’avérer être la solution. solution la plus rapide. Un excellent moyen de rationaliser un projet avec un potentiel de fluage infini, tout en exploitant à bon escient toutes les informations dormantes dans une feuille de calcul, consiste à utiliser Google Sheets comme base de votre CMS. Malgré les meilleurs efforts d’AirTable, de Notion et même de Smartsheets, il y a une raison pour laquelle les feuilles de calcul ont résisté à l’épreuve du temps en tant que format de fichier largement accepté. Peu importe le niveau de compétence ou l’aversion pour la technologie, il y a de fortes chances que la plupart des personnes au sein d’une entreprise sachent comment naviguer dans une feuille de calcul. Dans le didacticiel suivant, vous verrez comment l’utilisation des outils JavaScript populaires, notamment le framework Node.js et la bibliothèque React, vous permet de créer une application Web dynamique construite directement au-dessus de Google Sheets. Nous allons créer un projet Node qui servira de conteneur pour nos requêtes API, puis exploiterons React pour analyser nos données, qui seront ensuite présentées et servies à l’utilisateur via un frontal dynamique. Ici, nous allons profiter de la tendance de React à faire abstraction d’une grande partie des complexités internes du fonctionnement interne de notre application, ainsi que de ses composants réutilisables. Cette dernière fonctionnalité est parfaite si vous créez un site Web large avec une multitude de pages que vous souhaitez toutes avoir une apparence cohérente. Pour cet exemple, nous utiliserons la page « Rencontrer l’équipe » pour une entreprise technologique fictive. Si vous souhaitez utiliser les exemples de données que nous utilisons aux fins de cette démonstration, vous trouverez la feuille de calcul liée ci-dessous. Ce que vous allez essentiellement faire est d’accéder à votre feuille de calcul en tant qu’API, en l’interrogeant afin d’extraire le contenu de votre page React frontale. Nous allons accéder aux données de la feuille au format JSON, puis utiliser le package dotenv afin de stocker les informations d’identification nécessaires pour accéder aux informations de notre projet Node. Cela analysera les informations et les transmettra au front-end, les présentant dans un format beaucoup plus raffiné et stylisé. Tout d’abord, utilisons le terminal pour générer un nouveau projet à partir duquel nous allons travailler. Créez un nouveau répertoire pour votre projet en exécutant ‘mkdir’ suivi du nom de votre projet, puis entrez dans ce répertoire à l’aide de la commande ‘cd’. Pour créer notre projet Node, nous allons d’abord exécuter ‘$ npm init -y’ à partir du terminal, avant de créer deux fichiers supplémentaires dont nous avons besoin pour démarrer, en utilisant la commande ‘touch’. L’un de ceux-ci est notre fichier.env qui contiendra toutes les clés sensibles, les informations d’identification ou les paramètres de variables dont nous aurons besoin pour accéder à notre feuille. N’oubliez pas de conserver cette section dans votre.gitignore si vous décidez de partager votre référentiel publiquement pour éviter que vos clés ne soient désactivées et que vos identifiants ne soient volés. La dernière étape, comme illustré dans l’extrait de code ci-dessous, consiste à installer quelques packages externes que nous utiliserons dans notre projet. Nous avons couvert dotenv, et le googlesheetsapi n’est pas une surprise. Le dernier est Express, que nous utiliserons comme framework Node.js en raison de sa nature légère et de sa capacité à faire démarrer rapidement des serveurs. $ Mkdir nom-projet $ cd nom-projet $ npm init -y $ touch index.js.env $ npm i express google-spreadsheet dotenvUne fois que vous avez installé vos packages externes,: 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 (request.// Écouteur express, sur le port spécifié dans.env fileexpress.listen (p.PORT, () => console. 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_ ». 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.

Tags: