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 natestimonial
aplikaci, kterou jsme vytvořili v předchozím článku. - Přejděte na
identity
a klikněte naEnable 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ázatCreate 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/testimonialZá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.