Pojďme pokračovat...

Vítejte v Part 2 ze série Go Serverless. Doufám, že se vám to zatím líbí, když budete postupovat podle kroků k vývoji aplikace pro hodnocení bez serveru.

V minulém článku (část 1) jsme vytvořili základ,

• Vytvoření účtu u poskytovatele datového rozhraní API typu klient-server s názvem FaunaDB .
• Nastavení databáze, schématu, dokumentu a klíče serveru.
• Zápis funkcí bez serveru pomocí Netlify a nakonec je otestovali jako API

V tomto článku použijeme funkce bez serveru k vytvoření uživatelského rozhraní aplikace pro hodnocení. K tomu použijeme Gatsby což je super cool generátor statického místa založený na reakci. Dozvíme se také o používání Netlify k vytvoření a nasazení aplikace s doporučeními.

Začneme tam, kde jsme v minulém článku skončili. Pokračujme ve vývoji aplikace nad dosud implementovaným kódem jako součást předchozího článku.

Jako obvykle zde je odkaz na úložiště zdrojového kódu:

Gatsby:Instalace a počáteční nastavení

Existuje několik způsobů, jak nastavit projekt založený na Gatsby. Existuje spousta startovacích projektů, které vám pomohou rozjet se. Další informace naleznete v tomto rychlém průvodci.

Pro lepší pochopení zde nebudeme používat žádný ze startovacích projektů. Budeme stavět věci od nuly.

• Nainstalujte gatsby-cli globálně. Tento nástroj nám pomůže pracovat s prostředím Gatsby.

   npm install -g gatsby-cli
  

• Nainstalujte si gatsby, reagujte a reagujte

   yarn add gatsby react react-dom
  

• Upravte scripts části package.json soubor přidat skript pro 'develop'.

   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "develop": "gatsby develop"
    }
  

• Gatsby projekty potřebují speciální konfigurační soubor s názvem gatsby-config.js . V tuto chvíli budeme potřebovat prázdný soubor. Vytvořte prosím soubor s názvem gatsby-config.js s následujícím obsahem:

   module.exports = {
    // keep it empty    
   }
  

• Nyní je čas vytvořit naši první stránku s Gatsbym. Vytvořte složku s názvem src v kořenovém adresáři složky projektu. Vytvořte podsložku s názvem pages pod src . Vytvořte soubor s názvem index.js pod src/pages s následujícím obsahem:

    import React, { useEffect, useState } from 'react';    
  
    export default () => {    
      const [status, setStatus ] = useState('loading...');    
      const [testimonials, setTestimonials] = useState(null);    
  
      return (
        <>    
          <h1>Testimonials to load here...</h1>
        </>        
      )    
    }
  

  Výše uvedený kód je jednoduchá reakční komponenta. Importujeme React a dva vestavěné háčky zvané useState a useEffect . Máme několik stavových proměnných, abychom mohli sledovat řadu posudků a odpovědí API.

• Pojďme to spustit. Obecně potřebujeme použít příkaz gatsby develop pro spuštění aplikace lokálně. Protože musíme spouštět aplikaci na straně klienta s netlify functions , budeme nadále používat, netlify dev příkaz.

  Tento jediný příkaz se postará o místní spuštění funkcí bez serveru spolu s aplikací gatsby na straně klienta. Otevřete příkazový řádek v kořenovém adresáři složky projektu a zadejte,

   netlify dev
  

• To je vše. Zkuste stránku otevřít na čísle localhost:8888 . Měli byste vidět něco takového,

• Sestavení projektu Gatsby vytváří několik výstupních složek, které možná nebudete chtít tlačit do úložiště zdrojového kódu. Pojďme přidat několik položek do .gitignore soubor, takže nedochází k nežádoucímu šumu.

  Přidejte .cache a public do souboru .gitignore. Zde je úplný obsah souboru:

  .cache
  public
  node_modules
  *.env
  

  V této fázi by adresářová struktura vašeho projektu měla odpovídat následujícímu:

  

Načíst všechny posudky

Naším cílem je získat všechny posudky pomocí /api/get-testimonials volání. Rádi bychom zobrazili stažené posudky následujícím způsobem:

První věc. Potřebujeme načíst všechny posudky pomocí serverless function a ukázat jej na stránce, kterou jsme právě vytvořili.

Načíst data

Pro načtení všech posudků provedeme pouze několik kroků. Musíte upravit index.js soubor s následujícími změnami:

• Importujte axios knihovny, abychom mohli provádět volání API.

  import axios from "axios";
  

• Zavolejte na číslo serverless pomocí URI, api/get-tetsimonials . Použijeme háček, useEffect abych to splnil. Používáme axios uskutečnit tento hovor. Po úspěšné odpovědi jsou posudky uloženy v testimonials stavová proměnná.

  Všimněte si, že také změníme stav na loaded to znamená, že data byla úspěšně načtena.

   useEffect(() => {
    if (status !== "loading...") return;
    axios("/api/get-testimonials").then(result => {
      if (result.status !== 200) {
        console.error("Error loading testimonials");
        console.error(result);
        return;
      }
      setTestimonials(result.data.messages);
      setStatus("loaded");
    });
  }, [status]);
  

• Všimli jste si těch skvělých avatarů ve výše uvedeném rozhraní? Používám je z https://avatars.dicebear.com/api/. Tyto avatary jsou k dispozici ke stažení zdarma pomocí adres URL.

  Napíšeme jednoduchou util funkci s názvem getAvatar() získat nějaké náhodné 'šťastné' avatary.

  const getAvatar = () => {
    const random = Math.floor(Math.random() * (testimonials.length - 0 + 1) + 0);
    const imgUrl = `https://avatars.dicebear.com/api/human/${random}.svg?mood[]=happy`;
    return imgUrl;
  }
  

• Poslední je render funkce pro zobrazení zprávy posudku, hodnocení spolu s avatarem v uživatelském rozhraní. Procházíme testimonials pole a vykreslete podrobnosti pomocí prvků uživatelského rozhraní.

  return (
    <>
      {testimonials && testimonials.map((testimonial, index) => (
        <div key={ index }>
          <img 
            src={ getAvatar() } 
            height="50px"
            width="50px"
            alt="avatar" />
          <div className="testimonial">
            <span>{ testimonial.rating }</span>
            <p className="text">
              { testimonial.text }
            </p>
          </div>
        </div>
      ))}
    </>
  );
  

To je všechno! Dokončili jsme načítání všech posudků a jejich zobrazení v uživatelském rozhraní. Zde je úplný kód index.js :

import React, { useEffect, useState } from 'react';    
import axios from "axios";

export default () => {    
  const [status, setStatus ] = useState('loading...');    
  const [testimonials, setTestimonials] = useState(null);

  useEffect(() => {
    if (status !== "loading...") return;
    axios("/api/get-testimonials").then(result => {
      if (result.status !== 200) {
        console.error("Error loading testimonials");
        console.error(result);
        return;
      }
      setTestimonials(result.data.messages);
      setStatus("loaded");
    });
  }, [status]);

  const getAvatar = () => {
    const random = Math.floor(Math.random() * (testimonials.length - 0 + 1) + 0);
    const imgUrl = `https://avatars.dicebear.com/api/human/${random}.svg?mood[]=happy`;
    return imgUrl;
  }

  return (
    <>
      {testimonials && testimonials.map((testimonial, index) => (
        <div key={ index }>
          <img 
            src={ getAvatar() } 
            height="50px"
            width="50px"
            alt="avatar" />
          <div className="testimonial">
            <span>{ testimonial.rating }</span>
            <p className="text">
              { testimonial.text }
            </p>
          </div>
        </div>
      ))}
    </>
  );    
}

Jak nyní vypadá uživatelské rozhraní? No, vypadá to takto:

Není pochyb o tom, že jsme stáhli všechny posudky a zobrazili je v uživatelském rozhraní. Ale nevypadá to skvěle, že?

Takže pojďme, aby věci vypadaly lépe

Naší vizí je toto,

Všimněte si, že existuje komponenta hodnocení (s hvězdičkami) a komponenta karuselu k procházení posudků. K dosažení těchto cílů použijeme několik npm založených na reakci.

Instalovat knihovny

Otevřete příkazový řádek v kořenovém adresáři složky projektu. Zkuste tento příkaz (nebo npm i ) k instalaci těchto knihoven.

 yarn add react-stars react-responsive-carousel

Používejte knihovny

Importovali jsme komponenty ReactStars a Carousel spolu s carousel.min.css do souboru index.js.

Musíme udělat jen několik změn,

• Zabalte kód JSX část kódu s Carousel komponent
• Použijte ReactStars komponenta pro hodnocení.

Zde je úplný kód se změnami:

import React, { useEffect, useState } from 'react';    
import axios from "axios";

// import these libraries
import ReactStars from 'react-stars';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

export default () => {    
  const [status, setStatus ] = useState('loading...');    
  const [testimonials, setTestimonials] = useState(null);

  useEffect(() => {
    if (status !== "loading...") return;
    axios("/api/get-testimonials").then(result => {
      if (result.status !== 200) {
        console.error("Error loading testimonials");
        console.error(result);
        return;
      }
      setTestimonials(result.data.messages);
      setStatus("loaded");
    });
  }, [status]);

  const getAvatar = () => {
    const random = Math.floor(Math.random() * (testimonials.length - 0 + 1) + 0);
    const imgUrl = `https://avatars.dicebear.com/api/human/${random}.svg?mood[]=happy`;
    return imgUrl;
  }

  return (
    <Carousel
        className="main"
        showArrows={true}
        infiniteLoop={true}
        showThumbs={false}
        showStatus={false}
        autoPlay={false} >

        {testimonials && testimonials.map((testimonial, index) => (
            <div key={ index } className="testimonial"> 
            <img 
                src={ getAvatar() } 
                height="50px"
                width="50px"
                alt="avatar" />
            <div className="message">
                <ReactStars
                    className="rating"
                    count={ testimonial.rating }
                    size={24}
                    color1={'#ffd700'} 
                    edit={false}
                    half={false} />
                <p className="text">
                { testimonial.text }
                </p>
            </div>
            </div>
        ))}
    </Carousel>
  );    
}

Vytvořte prosím soubor s názvem index.css s následujícím obsahem v adresáři src/pages .

.rating {
    display: flex;
    justify-content: center;
}

.carousel .slide {
    padding: 20px;
    font-size: 20px;
}

body {
    background-color: #000000;
    color: #FFFFFF;
}

Importujte index.css soubor do index.js soubor jako,

import './index.css';

Zkuste netlify dev a přejděte na adresu URL localhost:8888 . Uživatelské rozhraní by se mělo zobrazit takto:

Nasazení a publikování

Zatím vše dobré. Ale je tu jeden problém. Aplikaci spouštíme lokálně. Je to zábavné, ale ne tolik, kolik získáme tím, že to budeme provozovat veřejně. Udělejme to pomocí několika jednoduchých kroků.

• Ujistěte se, že jste všechny změny kódu odevzdali do úložiště git, řekněme testimonial .

• Máte účet s netlify již. Přihlaste se prosím a klikněte na tlačítko New site from Git .

• Poskytněte autorizaci jedním kliknutím vašemu git repo a vyberte testimonial úložiště.

• Chcete-li aplikaci nasadit, musíte zadat několik podrobností. Zadejte podrobnosti, jak je uvedeno níže, a nasaďte aplikaci.

• Pamatujete si, že jsme použili API server key lokálně pro přístup k datům z databáze? Nyní musíme sdělit netlify o tomto klíči. Přejděte do nastavení prostředí pod Build & deploy možnost vytvořit novou proměnnou prostředí.

  Vytvořte novou proměnnou prostředí s klíčem jako FAUNA_SERVER_SECRET a hodnota je skutečný klíč serveru z .env soubor.

• Netlify přiděluje vaší aplikaci/webu doménu s náhodným názvem. Můžete to změnit na něco, co pro vás bude smysluplnější. V mém případě jsem dal jméno jako testimonial-greenroots .

  Aplikace tedy bude k dispozici na této adrese URL:https://testimonial-greenroots.netlify.app/.

• Nakonec aplikaci znovu nasaďte vymazáním mezipaměti.

Gratulujeme!!!! Vaše aplikace/web je nyní veřejně dostupný.

Co bude dál?

Dalším, posledním článkem série je bezbolestná integrace ověřovacího modulu do naší aplikace. Uživatelům umožníme vytvořit posudek až poté, co se autentizují v naší aplikaci.

Zní to jako legrace? Jo, zůstaňte naladěni a brzy se tam dostanete.

Sledujte mě na twitteru @tapasadhikary pro další aktualizace.