Kuidas Netlifysse rakendust React juurutada, mis loeb Google'i lehelt

Selles õpetuses käsitleme seda, kuidas luua ühenduse Google'i hostitud arvutustabeliga, kuvada see teave rakenduses React ja installida Netlifysse.

Vaadake jaotist „Seadistamine”, kui te ei hooli sellest, kust andmed pärinevad või miks otsustasin selle luua. Ma ei hullu, ma luban.

Praegu näib lõpptulemus selline, kuid lisan sellele varsti veel uusi funktsioone.

Leiate selle aadressilt https://dougscore.netlify.com

Miks

Armastan autosid . Kui tunnete isegi autode vastu pisut huvi, olete tõenäoliselt mingil hetkel komistanud Doug Demuro Youtube'i kanali poole. Ta hindab laia valikut autosid, alates 3 miljoni dollarist Ferrari Enzo kuni kolmerattalise BMW Isetta. Dougi vorming on pisut erinev kui enamus kasutajate arvustusi. Tema umbes 20-minutilistel videol on kolm peamist punkti:

  • Huvitavad viktoriinid ja funktsioonid: umbes 70% videost on tema ettekanne auto välis- ja sisetüdrukutest. Need võivad ulatuda omaniku käsiraamatu lõigust kuni piduritulede huvitava kujuga.
Mitte tegelikult Doug, vaid õnnelik doggo
  • Sõitmine: umbes 20% videost on see, kui Doug võtab auto teelt välja ja teeb kiirendusel naljakaid nägusid. Samuti räägib ta sisemürast, juhitavusest, kiirusest jne.
  • DougScore: Doug lõi arvutustabeli kõigi autodega, mida ta on kunagi üle vaadanud (alates punktisüsteemi loomisest), ja reastas need kõik oma süsteemi kasutades. See on jagatud kahte kategooriasse:
    * Nädalavahetuse tulemus: sisuliselt kui lõbus on auto.
    * Päeva tulemus: põhimõtteliselt kui praktiline auto on.
Huvitav, kas Doug loeb neid kõikiSiis leiab ta lehelt 73 kirjavigu

Sellepärast võib ta minu arvates saada mahtuniversaali 25-minutilise video kohta üle 1,5 miljoni vaatamise ‍. Kuna videod on nii pentsikud ja ka Doug ise on üsna pentsik, on tema järg tulnud mõned loomingulised kommentaarid. Minu lemmik on "Doug on tüüp, kelle poole ..." märkused, nagu ülaltoodud.

Ja nüüd teile kõigile, kes olete pärast seda sissejuhatust järele jäänud, millel pole midagi pistmist rakenduse, Google Sheets API või Reacti loomisega, on see, millest ma räägin.

Seadistamine

Doug hoiab oma arvutustabelit Google'i arvutustabelites ja sellele pääseb juurde igaüks, kellel on link. Minu jaoks oli raske navigeerida. Niisiis otsustasin uurida, kas on võimalust seda laiendada ja lisada veel mõned funktsioonid.

Reaktsiooni loomise rakendus

Facebooki reaalajas Boileri panevad meid üsna kiiresti tööle, ilma et oleks vaja taustaprogramme konfigureerida. Valige oma valitud terminalis (minu jaoks hüper) ja pange sisse:

$ npx loo-reageeri-rakenduse doug-score
$ cd doug-score
$ lõnga algus
# või npm, olenemata sellest, mis teie paadil hõljub, kuid ma kasutan lõnga

Avage valitud redaktoris kaust (minu jaoks VS-kood) ja minge üle App.js. Kavatseme luua eraldi komponendi nimega CarList, pannes selle komponentide kausta ja lisades rakendusse.

impordi Reakt, {komponent} rakendusest "reageerima";
impordi logo saidilt "./logo.svg";
import "./App.css";
impordi CarList kataloogist "./components/CarList";
klassi rakendus laiendab komponenti {
  renderdama () {
    tagasi (
      
        
          logo           

Tere tulemast reageerima

        
               
    );   } }
eksport vaikimisi rakendus;

CarListi komponent näeb nüüd välja selline:

impordi reakt, {komponent} rakendusest 'reageerima';
klassi CarList laiendab komponenti {
  renderdama () {
    tagasi (
      
        Sellest saab autode nimekiri       
    );   } }

Google'i arvutustabelite API

Läheme edasi ja loome Google'is uue projekti. Ma olen seda nimetanud doug-score'iks. Kui see on loodud, klõpsake API-de kastis nuppu „Mine API-de ülevaatesse”. Kui klõpsate käsul „Luba API-d ja teenused”, kuvatakse teile API-teek. Jätkame otsimist „Google'i arvutustabelite API-l”. Kui olete sellele klõpsanud, klõpsake nuppu „Luba” ja pärast selle töötlemist peaksite seda lehte nägema.

Google API-de juhtpaneel

Liikuge külgribal valikule „Volikirjad”, klõpsake nuppu „Loo mandaat” ja valige „API võti.” Klõpsake „Piira võtit” ja määrake sellele nimi (ma määrasin sellele „DougScore”). Jaotises „Rakendusepiirangud” seame selle väärtuseks “HTTP-viitajad” ja lisame praegu http: // localhost: 3000. Valige jaotises „API piirangud” „Google Sheets API” ja salvestage. Meil peaks olema hea sellega edasi liikuda.

Ühendus

Nüüd, kui meil on API-võti, minge tagasi rakenduse koodi juurde ja looge uus fail nimega config.js. Sisestage sinna oma API-võti ja arvutustabeli ID.

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

Nüüd vajame Google API teeki, seega kasutame avalikus raamatukogus oma indeksi.html faili pärast meie



  
    
  
  
    
    
            

See annab meile juurdepääsu Window.gapi-le, mida kasutame ühenduse loomiseks Sheets API-ga. Selle kohta lisateabe saamiseks külastage Google'i dokumente.

Andmed

Nüüd, kui meil on juurdepääs API-le, loogem sellega ühendus. Parim koht selleks on varem loodud komponendi CarList elutsükli komponentDidMount sees. Lähme sinna.

komponentDidMount () {
  // 1. Laadige JavaScripti kliendikogumik.
  window.gapi.load ("klient", see.initClient);
}

window.gapi.load aktsepteerib tagasihelistamist, nii et meie initClient funktsioon näeb välja selline:

initClient = () => {
  // 2. Käivitage JavaScripti kliendikogus.
  aken.gapi.klient
    .selles({
      apiKey: config.apiKey,
      // Teie API-võti lisatakse automaatselt avastusdokumendi URL-idele.
      discoveryDocs: config.discoveryDocs
    })
    . seejärel (() => {
    // 3. Initsialiseerige ja tehke API taotlus.
    koormus (see.koormus);
  });
};

Siin tutvustatakse mõnda asja. config pärineb varem loodud failist config.js, nii et ärge unustage importida konfiguratsiooni kaustast “../config”; faili CarList.js ülaosas.

laadimine on funktsioon, mille loome nüüd. See vastutab õige arvutustabeliga ühenduse loomise, andmete korrektse vormindamise ja selle sellesse kohta.onLoad tagasihelistamiskomponendisse tagastamise eest (või vea tagastamise eest, kui midagi segamini ajame).

Tahtsin selle loogika komponendist eraldada, et hoida failid väikesed ja üsna loetavad. Loome src-i sisse uue kausta nimega helpers ja paneme sinna spreadsheet.js-faili.

impordi konfiguratsioon kataloogist .. ../config;
/ **
 * Laadige autod arvutustabelilt
 * Hankige sellest õiged väärtused ja määrake.
 * /
ekspordi funktsiooni laadimine (tagasihelistamine) {
  window.gapi.client.load ("lehed", "v4", () => {
    aken.gapi.klient.sheets.spreadsheets.values
      .get ({
        spreadsheetId: config.spreadsheetId,
        vahemik: "Sheet1! A4: T"
      })
      siis (
        vastus => {
          const data = response.result.values;
const autod = data.map (auto => ({
            aasta: auto [0],
            mark: auto [1],
            mudel: auto [2]
          })) || [];
helista tagasi({
            autod
          });
        },
        vastus => {
          tagasihelistamine (vale, response.result.error);
        }
      );
  });
}

Seega kutsume siin esilehtede API-sid ja saame arvutustabelilt väärtusi, edastades spreadsheetId ja vahemiku. Lubadus annab kaks vastust: ühe andmete olemasolul ja teise tõrke korral. Vastusväärtused on massiivide massiiv, kus igaüks neist on arvutustabelis rida.

Ekraan

Nüüd, kui andmed on CarListi komponendi sees tagasi, saame hakata selle jaoks ekraani seadistama. Funktsioonis initClient oli meil laadimisfunktsioon (this.onLoad), nii et lähme sinna üles.

onLoad = (andmed, viga) => {
  if (andmed) {
    const autod = data.cars;
    this.setState ({autod});
  } veel {
    this.setState ({tõrge});
  }
};

Kui laadimisfunktsioon spreadsheet.js-s tagastab andmed, seadsime autode oleku nendele andmetele. Muidu seadsime vea oleku, et näidata oma kasutajatele, et midagi läks valesti.

Vaikeolek

Kuna andmeid ei saa kohe kätte, peame oma komponendi jaoks vaikeseade seadistama.

osariik = {
  autod: [],
  viga: null
}

Renderdama

Renderdamise funktsiooni sees saame kuvada olekut:

renderdama () {
  const {autod, viga} = this.state;
  if (viga) {
    tagasta 
{this.state.error}
;   }   tagasi (     
          {autod.map ((auto, i) => (         
  •           {car.year} {car.make} {car.model}         
  •       ))}     
  ); }

Siin hävitame oleku (ES6 FTW ) ja kontrollime kõigepealt, kas selles on viga. Kui ei, siis kaardistame autod üle ja kuvame need järjestamata loendis.

Kasutuselevõtt

Nüüd, kui meil on meie ülikaunis autode loend, mille Doug on üle vaadanud, saame edasi minna ja seda kogu maailmale jagada. Kuna see on staatiline veebisait, kavatsen ma selle oma CLI abil Netlifysse juurutada. Selleks peatame meie kohaliku masti ja käivitame järgmised käsud:

lõnga ehitamine

See loob rakenduses ehitamiskausta, mis on tootmiseks valmis. Nüüd peate tegema ainult järgmist:

$ npm installib netlify-cli -g
$ netlify juurutada

Kui see küsib, veenduge, et olete kasutusele võtnud tee ehitamiseks? (praegune dir).

Netlify kavatseb oma asja teha ja näitab teile lõplikku URL-i (minu oma on https://laughing-yonath-118f58.netlify.com )

Kui proovite juurde pääseda oma loodud kanalile, näete oma konsoolis viga, kuna teie URL-i ei lisatud Google API konsooli. Minge edasi ja lisage vajalik URL ja pärast seda peaks kõik toimima ootuspäraselt.

Lõpp

Loodan, et see kõik on mõistlik. Nüüd saate oma võluväel kasutada funktsioone sellesse loendisse lisamisel nagu sortimine, filtreerimine, leheküljele lisamine, otsing, võrdlus ja nii edasi. Ja kui Doug lisab sellesse loendisse veel ühe auto, värskendatakse rakendus automaatselt uue teabega.

Kui see õpetus oli mõttekas, siis andke see a ja jagage seda sõbraga. Kui soovite mulle öelda, et see on imetud või teil on lisaküsimusi, kommenteerige allpool või karjutage mulle Twitteris, siis ma tõesti ei pane seda tähele. Kui Doug seda loeb, siis hei Doug!