Comment déployer une application React pour Netlify qui lit à partir d'une feuille Google

Dans ce didacticiel, nous allons expliquer comment se connecter à une feuille de calcul hébergée sur Google, afficher ces informations dans une application React et les déployer sur Netlify.

Passez à «La configuration» si vous ne vous souciez pas de l’origine des données ou de la raison pour laquelle j’ai choisi de le construire. Je ne serai pas en colère, je le promets.

Pour l’instant, le résultat final ressemble à ceci, mais j’ajouterai d’autres fonctionnalités sous peu.

Vous pouvez le trouver à https://dougscore.netlify.com

Le pourquoi

J'aime les voitures cars. Si vous êtes un peu intéressé par les voitures, vous êtes probablement tombé par hasard sur la chaîne Youtube de Doug Demuro. Il passe en revue une large gamme de voitures allant d’une Ferrari Enzo à 3 millions de dollars à une BMW Isetta à 3 roues. Le format de Doug est un peu différent de la plupart des avis d’utilisateurs. Ses vidéos d'environ 20 minutes ont trois points principaux:

  • Curiosités et caractéristiques intéressantes: environ 70% de la vidéo est consacrée aux bizarreries extérieures et intérieures de la voiture. Celles-ci peuvent aller d’un paragraphe du manuel du propriétaire à une forme intéressante de feux de pause.
Pas vraiment Doug, mais un doggo heureux
  • Conduite: environ 20% de la vidéo montre Doug prendre la voiture sur la route et faire des grimaces quand il accélère. Il parle également du bruit intérieur, de la maniabilité, de la vitesse, etc.
  • The DougScore: Doug a créé un tableur avec toutes les voitures qu'il a déjà examinées (depuis la création du système de notation) et les a classées selon son propre système. Il est divisé en deux catégories:
    * Score Week-end: Essentiellement, combien la voiture est amusante.
    * Score quotidien: Essentiellement à quel point la voiture est pratique.
Je me demande si Doug lit tous cesEnsuite, il trouvera une faute de frappe à la page 73

C’est pourquoi, à mon avis, il peut obtenir plus de 1,5 million de vues sur une vidéo de 25 minutes d’un monospace. Comme les vidéos sont si bizarres et que Doug lui-même est assez bizarre aussi, ses suivants ont formulé des commentaires créatifs. Mon préféré est le "Doug est le type de gars à ..." remarques, comme ceux ci-dessus.

Et maintenant, pour tous ceux qui sont restés coincés après cette intro qui n’a rien à voir avec la création d’une application, de l’API Google Sheets ou de React, voici ce dont je parle.

La mise en place

Doug conserve sa feuille de calcul sur Google Sheets, et toute personne disposant d'un lien peut y accéder. Pour moi, il était difficile de naviguer. J'ai donc décidé de voir s'il existait un moyen de l'étendre et d'ajouter des fonctionnalités supplémentaires.

Réagissez Créer une application

Le compte-rendu React de Facebook nous permettra de démarrer assez rapidement sans avoir à configurer de back-end. Dans votre terminal de choix (Hyper pour moi), allez-y et insérez:

$ npx créer-réagir-application doubler-score
$ cd doug-score
$ début de fil
# ou npm commencent, quel que soit le bateau qui flotte, mais j'utiliserai du fil

Ouvrez le dossier dans l'éditeur de votre choix (VS Code for me) et dirigez-vous sur App.js. Nous allons créer un composant distinct appelé CarList, le placer dans un dossier de composants et l’ajouter à App.

importer Réagir, {Composant} de "réagir";
importer le logo de "./logo.svg";
importer "./App.css";
importer CarList de "./components/CarList";
La classe App étend le composant {
  render () {
    revenir (
      
        
          logo           

Bienvenue dans React                              )   } }

exportation par défaut App;

Pour l'instant, voici à quoi ressemblera le composant CarList:

importer Réagir, {Composant} de 'réagir';
La classe CarList étend le composant {
  render () {
    revenir (
      
        Ce sera la liste des voitures            )   } }

API Google Sheets

Continuons et créons un nouveau projet sur Google. Je l’ai appelé doubler-score. Une fois créé, dans la zone API, cliquez sur «Accéder à la vue d'ensemble des API». Une fois que vous avez cliqué sur «Activer les API et les services», la bibliothèque d'API s'affichera. Nous allons poursuivre et rechercher «Google Sheets API». Une fois que vous avez cliqué dessus, cliquez sur «Activer». Une fois cette opération traitée, vous devriez voir cette page.

Tableau de bord des API Google

Dans la barre latérale, rendez-vous sur «Informations d'identification», cliquez sur le bouton «Créer les informations d'identification», puis sélectionnez «Clé API». Cliquez sur «Limiter la clé» et définissez un nom pour celle-ci (je l'ai défini sur «DougScore»). Sous «Restrictions d'application», nous allons le définir sur «Référents HTTP» et ajouter http: // localhost: 3000 pour le moment. Sous «Restrictions API», sélectionnez «API Google Sheets», puis enregistrez. Nous devrions être bons pour aller sur cette fin.

La connexion

Maintenant que nous avons une clé API, revenez au code de l'application et créez un nouveau fichier appelé config.js. Entrez votre clé API et l'ID de la feuille de calcul.

défaut d'exportation {
  apiKey: "YOUR_API_KEY",
  discoveryDocs:
    ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  spreadsheetId: "1KTArYwDWrn52fnc7B12KvjRb6nmcEaU6gXYehWfsZSo"
};

Nous avons maintenant besoin de la bibliothèque API Google. Nous allons donc utiliser notre fichier index.html dans la bibliothèque publique après notre