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:
https://github.com/atapas/testimonial/tree/part-2-client-sideGatsby: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
částipackage.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ázvemgatsby-config.js
. V tuto chvíli budeme potřebovat prázdný soubor. Vytvořte prosím soubor s názvemgatsby-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ázvempages
podsrc
. Vytvořte soubor s názvemindex.js
podsrc/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
auseEffect
. 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 snetlify 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
apublic
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ámeaxios
uskutečnit tento hovor. Po úspěšné odpovědi jsou posudky uloženy vtestimonials
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ímetestimonials
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 sCarousel
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čítkoNew 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ělitnetlify
o tomto klíči. Přejděte do nastavení prostředí podBuild & 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.
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 tlačítko Odebírat v horní části stránky.
Sledujte mě na twitteru @tapasadhikary pro další aktualizace.