Jak vytvořit aplikaci bez serveru s Gatsby, Netlify a FaunaDB - část 3

Každý příběh má svůj konec

Konečně jsme na konci série, Go Serverless. Děkujeme, že jste si přečetli předchozí články ze série a že se jim líbíte. Opravdu oceňuji.

Pokud jste v seriálu noví, zde je rychlá rekapitulace toho, co jsme doposud probrali:

👉 Jak vytvořit aplikaci bez serveru s Gatsby, Netlify a FaunaDB – část 1

  • Vytvořili databázi, schéma, sadu dat a klíč serveru pomocí FaunaDB .
  • Testovali sadu dat posudků pomocí operací vytváření a načítání.
  • Napsáno serverless funkce pomocí Netlify Function schopnost načítat, vytvářet, aktualizovat a mazat posudky.
  • Testovali tyto funkce jako rozhraní API.

👉 Jak vytvořit aplikaci bez serveru pomocí Gatsby, Netlify a FaunaDB – část 2

  • Prozkoumali Gatsby napsat aplikaci s doporučením na straně klienta.
  • Načetli reference v aplikaci pomocí serverless funkce.
  • Nasadili aplikaci s Netlify .

V tomto článku budeme pokračovat ve vývoji aplikace a přidáme vrstvu ověřování. Našim uživatelům umožníme vytvořit posudek až poté, co se ověří v naší aplikaci.

Naše aplikace Reference

Náš plán je,

  • Přidejte Login do uživatelského rozhraní.
  • Umožněte uživatelům vytvořit si účet pomocí e-mailového ID a hesla.
  • Umožněte uživatelům zadat přihlašovací údaje při pokusu o přihlášení.
  • Zobrazit Create Testimonial možnost úspěšného přihlášení a umožnit uživatelům vytvářet posudky.
  • Přidejte nově vytvořený posudek do seznamu.
  • Umožněte přihlášenému uživateli se odhlásit.

Na konci se aplikace pro hodnocení může chovat takto:

Ale my jsme bez serveru!

Jak je to tedy s modulem Authentication? Potřebujeme nějaký implementovat? Kdo bude spravovat identity (tj. vytváření účtu, zajišťování rolí atd.)?

Mezi ně patří moduly Autentizace a Autorizace. Napájí going serverless také. Nic z toho nebudeme sami implementovat. Spíše použijeme jeden.

Netlify Identity

Prozkoumáme Netlify Identity .

  • Přihlaste se ke svému Netlify účtu a přejděte na testimonial aplikaci, kterou jsme vytvořili v předchozím článku.
  • Přejděte na identity a klikněte na Enable Identity knoflík.

To je vše. Úspěšně jste povolili služby identity pro aplikaci s doporučeními. Pojďme to nyní využít úpravou testimonial trochu aplikace.

Instalační závislosti

Abychom mohli používat Netlify Identity v naší aplikaci, musíme nainstalovat několik sad závislostí.

  • react-netlify-identity-widget :Komponenta React používaná k autentizaci pomocí služby Netlify Identity. Má také některé závislosti na peer, jako je @reach/dialog , @reach/tabs , @reach/visually-hidden .
  • gatsby-plugin-netlify-identity :Gatsby plugin, který pro nás přidává poskytovatele React Netlify Identity Widget.

Otevřete příkazový řádek v kořenovém adresáři složky projektu a nainstalujte závislosti pomocí:

yarn add gatsby-plugin-netlify-identity react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually-hidden

Použijeme modální dialog, který uživatelům umožní vytvořit posudek. Používám react-bootstrap za tím účelem. Nainstalujte jej také,

yarn add react-bootstrap bootstrap

Konfigurovat Gatsby

Dále musíme sdělit Gatsby že použijeme službu identity od Netlify. Za tímto účelem upravte gatsby-config.js a přidejte plugins sekce, jak je uvedeno níže:

module.exports = {
    plugins: [
        {
          resolve: `gatsby-plugin-netlify-identity`,
          options: {
            url: `https://your-project-identity.netlify.app/`
          }
        }
    ]
}

Upozorňujeme, že adresa URL ve výše uvedené konfiguraci by se měla shodovat s názvem domény vaší aplikace. Zde je příklad toho, co musíte vybrat a zadat jako adresu URL v gatsby-config.js soubor:

Zahrneme to do kódu

Je čas upravit index.js k použití služby identity od Netlify.

  • Nejprve importujte požadované balíčky

    import IdentityModal, { useIdentityContext } 
                         from "react-netlify-identity-widget";
    import "react-netlify-identity-widget/styles.css";
    
    import 'bootstrap/dist/css/bootstrap.min.css';
    import Button from 'react-bootstrap/Button';
    import Modal from 'react-bootstrap/Modal';
    
  • react-netlify-identity-widget poskytuje modální dialogové okno pro zadání přihlašovacích údajů a vytvoření účtu. Musíme zachytit, zda je uživatel pomocí něj správně autentizován, a poté ukázat Create Testimonial tlačítko.

    // identity code to get if the user logged-in
    
    const identity = useIdentityContext();
    const [dialog, setDialog] = useState(false);
    const name =
      (identity && identity.user && identity.user.user_metadata && 
           identity.user.user_metadata.full_name) || "Untitled";
    const isLoggedIn = identity && identity.isLoggedIn;
    
     {
          identity && identity.isLoggedIn ? (
                <div className="auth-btn-grp">
                  <Button 
                           variant="outline-primary" 
                           onClick={handleShow}>Create Testimonial
                   </Button>
                  { ' '}
                  <Button 
                            variant="outline-primary" 
                            className="login-btn" 
                            onClick={() => setDialog(true)}>
                      {isLoggedIn ? `Hello ${name}, Log out here!` : "LOG IN"}
                  </Button>
                </div>
            ) : (
                <div className="auth-btn-grp">
                    <Button 
                              variant="outline-primary" 
                              className="login-btn" 
                              onClick={() => setDialog(true)}>
                        {isLoggedIn ? `Hello ${name}, Log out here!` : "LOG IN"}
                    </Button>
                </div>
            ) 
      }
    
  • Toto je způsob, jak přidat dialogové okno identity:

     <IdentityModal showDialog={dialog} 
                               onCloseDialog={() => setDialog(false)} />
    
  • Nakonec upravte index.css soubor pro přidání těchto tříd:

     .auth-btn-grp {
        float: right;
        padding: 5px;
     }
    
     .create-testimonial {
        color: #000000;
     }
    
     .create-form {
        display: flex;
        justify-content: center;
        flex-direction: column;
     }
    

To je vše pro zahrnutí služby identity z Netlify na testimonial aplikace!

Zde je kompletní index.js soubor po úpravě. Můžete si všimnout způsobu, jakým nazýváme /api/create-testimonial pro vytvoření posudku po úspěšné autentizaci.

import React, { useEffect, useState } from 'react';    
import axios from "axios";
import ReactStars from 'react-stars';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

import IdentityModal, { useIdentityContext } from "react-netlify-identity-widget";
import "react-netlify-identity-widget/styles.css";

import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

import './index.css';

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;
  }

  // identity code
  const identity = useIdentityContext();
  const [dialog, setDialog] = useState(false);
  const name =
    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || "Untitled";
  const isLoggedIn = identity && identity.isLoggedIn;

  // create testimonial
  const [show, setShow] = useState(false);
  const [rating, setRating] = useState(4);
  const [text, setText] = useState('');
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const ratingChanged = (newRating) => {
    setRating(newRating);
  }
  const textChanged = evt => {
    const val = evt.target.value;
    setText(val);
  }
  const handleCreate = async event => {
    if(text === '') return;
    await axios.post('/api/create-testimonial', { text, rating });
    const newList = testimonials.concat({ text, rating });
    setTestimonials(newList);
    setShow(false);
  }

  return (
    <>
      {
        identity && identity.isLoggedIn ? (
              <div className="auth-btn-grp">
                <Button variant="outline-primary" onClick={handleShow}>Create Testimonial</Button>
                { ' '}
                <Button variant="outline-primary" className="login-btn" onClick={() => setDialog(true)}>
                    {isLoggedIn ? `Hello ${name}, Log out here!` : "LOG IN"}
                </Button>
              </div>
          ) : (
              <div className="auth-btn-grp">
                  <Button variant="outline-primary" className="login-btn" onClick={() => setDialog(true)}>
                      {isLoggedIn ? `Hello ${name}, Log out here!` : "LOG IN"}
                  </Button>
              </div>
          ) 
      }

      <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>

      <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />

      <Modal
          show={show}
          onHide={handleClose}
          animation={true}
          className="create-testimonial"
        >
          <Modal.Header closeButton>
            <Modal.Title>Create a Testimonial</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="create-form">
              <textarea 
                onChange={(evt) => textChanged(evt)} 
                placeholder="Enter your message here" />
              <br />
              <span>Rating:</span> {' '} 
              <ReactStars
                count={5}
                value={rating}
                onChange={ratingChanged}
                size={24}
                color2={'#ffd700'}
                half={false} />
              </div>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button variant="primary" onClick={(evt) => handleCreate(evt)}>Create</Button>
          </Modal.Footer>
      </Modal>
    </>
  );    
}

Jsme hotovi. Stačí poslat kód do vašeho git repo. Sestavení by se mělo v Netlify spustit automaticky a aktualizovaná aplikace by měla být nasazena, aby byl web aktivní.

Zde je odkaz na git repo. Pokud se vám práce líbila, nezapomeňte ji ohodnotit hvězdičkou.

https://github.com/atapas/testimonial

Závěr

Děkujeme za přečtení a vyzkoušení aplikace. Doufám, že jste si to užili. Zakončíme několika užitečnými odkazy:

  • Začínáme s FaunaDB
  • Funkce lambda AWS Nettlify
  • Nasazení Gatsbyho na Netlify
  • Netlify Identity

Také by se vám mohlo líbit,

  • JAMstack pro všechny
  • Co je to statický generátor stránek a jak jej vybrat

Pokud vám to bylo užitečné, dejte like/sdílejte, aby se to dostalo i k ostatním. Chcete-li dostávat e-mailová upozornění na mé nejnovější příspěvky, přihlaste se k odběru mého blogu kliknutím na Přihlásit se k odběru tlačítko v horní části stránky.

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