În acest tutorial, vom prezenta cum să vă conectați la o foaie de calcul găzduită pe Google, să afișăm acele informații într-o aplicație React și să le implementați pe Netlify.

Treceți la „Configurare” dacă nu vă pasă de unde vor veni datele sau de ce am ales să construiesc acest lucru. Nu voi fi supărat, promit.

În acest moment, rezultatul final arată astfel, dar îi voi adăuga în curând mai multe funcții.

Cum sa implementati o aplicatie React la Netlify care citeste
O puteți găsi la https://dougscore.netlify.com

De ce

Ador mașinile? ? ️. Dacă sunteți chiar ușor interesați de mașini, probabil că v-ați dat la un moment dat pe Docanalul YouTube al lui Demuro. El trece în revistă o gamă largă de mașini, de la 3 USD Milioane de Ferrari Enzo toa 3 BMW Isetta cu roți. Formatul lui Doug este puțin diferit de majoritatea recenziilor utilizatorilor. Videoclipurile sale de aproximativ 20 de minute au trei puncte principale:

  • Ciudățenii și caracteristici interesante: aproximativ 70% din videoclip îl face el despre ciudățenile exterioare și interioare ale mașinii. Acestea pot varia de la un paragraf din manualul de utilizare până la o formă interesantă a luminilor de pauză.
Cum sa implementati o aplicatie React la Netlify care citeste
De fapt nu Doug, ci un doggo fericit?
  • Conducere: aproximativ 20% din videoclip este Doug care scoate mașina pe drum și face fețe amuzante atunci când accelerează. El vorbește și despre zgomotul interior, manevrabilitatea, viteza și așa mai departe.
  • DougScore: Doug a creat o foaie de calcul cu toate mașinile pe care le-a revizuit vreodată (de la crearea sistemului de notare) și le-a clasat pe toate folosind propriul său sistem. Este împărțit în două categorii:
    * Scorul de weekend: în esență cât de distractivă este mașina.
    * Scor zilnic: în esență cât de practic este mașina.
1611367448 553 Cum sa implementati o aplicatie React la Netlify care citeste
Mă întreb dacă Doug citește toate acestea
1611367448 452 Cum sa implementati o aplicatie React la Netlify care citeste
Apoi va găsi o greșeală de scriere la pagina 73

De aceea, după părerea mea, poate obține peste 1,5 milioane de vizualizări pe un Videoclip de 25 de minute al unui monovolum ?? ‍. Deoarece videoclipurile sunt atât de ciudate, cât și Doug însuși este destul de ciudat, următorii săi au venit cu câteva comentarii creative. Preferatele mele sunt remarcile „Doug este tipul de tip care …”, ca cele de mai sus.

ad-banner

Și acum, pentru toți cei care ați rămas după această introducere care nu are nicio legătură cu crearea unei aplicații, Google Sheets API sau React, iată despre ce mă refer.

Pregatirea

Doug îl păstrează pe al său foaie de calcul pe Foi de calcul Google și oricine are un link îl poate accesa. Pentru mine a fost greu de navigat. Așa că am decis să văd dacă există o modalitate de ao extinde și de a adăuga câteva funcționalități suplimentare.

Aplicația React Create

Cazanul React de pe Facebook ne va ajuta să începem destul de repede fără a fi nevoie să configurăm backend-uri. În terminalul ales (Hiper pentru mine), mergeți mai departe și introduceți:

npx create-react-app doug-score
cd doug-score
yarn start

(Sau npm start, orice îți plutește barca, dar voi folosi fire.)

Deschideți dosarul în editorul ales (Cod VS pentru mine) și mergeți la App.js. Vom crea o componentă separată numită CarList , punându-l în interiorul unui components folder și adăugându-l la App .

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import CarList from "./components/CarList";
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <CarList />
      </div>
    );
  }
}
export default App;

Deocamdată, așa va arăta componenta CarList:

import React, { Component } from 'react';
class CarList extends Component {
  render() {
    return (
      <div>
        This will be the car list
      </div>
    );
  }
}

API Foi de calcul Google

Să mergem înainte și creați un nou proiect pe Google. Am numit-o doug-score. După ce a fost creat, în caseta API-uri, faceți clic pe „Accesați prezentarea generală a API-urilor”. După ce faceți clic pe „Activați API-urile și serviciile”, vi se va prezenta biblioteca API. Vom continua și vom căuta „Google Sheets API”. După ce faceți clic pe acesta, faceți clic pe „Activați” și, după ce este procesat, ar trebui să vedeți această pagină.

1611367449 489 Cum sa implementati o aplicatie React la Netlify care citeste
Tabloul de bord Google API-uri

În bara laterală, mergeți la „Acreditări”, faceți clic pe butonul „Creați acreditări” și selectați „Cheie API”. Faceți clic pe „Restrict Key” și setați un nume pentru acesta (l-am setat la „DougScore”). În „Restricții de aplicație”, îl vom seta la „Refereri HTTP” și îl vom adăuga http://localhost:3000 deocamdata. Sub „Restricții API”, selectați „API Foi de calcul Google” și salvați. Ar trebui să fim buni să mergem în acest scop.

Conexiunea

Acum că avem o cheie API, reveniți la codul aplicației și creați un nou fișier numit config.js . Introduceți cheia API și ID-ul foii de calcul în ea.

export default {
  apiKey: "YOUR_API_KEY",
  discoveryDocs: 
    ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  spreadsheetId: "1KTArYwDWrn52fnc7B12KvjRb6nmcEaU6gXYehWfsZSo"
};

Acum, vom avea nevoie de biblioteca API Google, așa că o vom folosi pe a noastră index.html fișier în interiorul fișierului public bibliotecă după <div id="root">