Šiame straipsnyje apžvelgsime, kaip sukurti svetainę, kurią galėtumėte naudoti kurdami naujas apklausas, bendrindami savo apklausas ir analizuodami rezultatus. Jūsų svetainė bus žaibiška ir pritaikyta SEO, pasikliaujant visomis naujausiomis funkcijomis Next.js. Jis taip pat bus lankstus ir lengvai pastatomas ApklausaJStodėl dirbti su apklausomis lengva.
Šiame straipsnyje bus daroma prielaida, kad supratote pagrindinius dalykus Reaguoti ir Next.jstačiau jame bus paaiškinta, kaip sukurti kiekvieną svetainės komponentą ir puslapį. Galite sekti visą kodą kartu su straipsniu arba galite pereiti į pabaigą ir naudoti pavyzdinė saugykla čia. Taip pat galite pažvelgti į galutinę mano turimos svetainės versiją jums čia dislokuota.
Next.js yra „React“ pagrindu sukurta sistema, padedanti kurti visas svetaines naudojant „React“. Next.js tvarko visą paketavimą ir suteikia jums galingų API, kad galėtumėte nuspręsti, kaip pateikti kiekvieną puslapį, kad jis būtų žaibiškas. Šiame straipsnyje mes pasirūpinsime, kad visi mūsų puslapiai būtų pateikti kūrimo metu. Tai reiškia, kad galime lengvai atskleisti svetainės schemą, kurią „Google“ gali naudoti indeksuodama jūsų svetainę, o tai labai svarbu norint užtikrinti puikų SEO našumą.
SurveyJS yra atvirojo kodo formų valdymo įrankis, suteikiantis galimybę kurti, bendrinti ir analizuoti apklausas ir formas. Jie pateikia React API, kurią naudosime kurdami apklausų valdymo sistemą su Next.js.
„Next.js“ nustatymas
Pirmiausia nustatykime „Next.js“ programą. Greitai ir lengva pradėti naudoti Next.js, nes jie suteikia CLI įrankį, leidžiantį sukurti pagrindinę programą pagal jūsų pateiktas nuostatas.
Norėdami naudoti įrankį, turite įsitikinti, kad turite npx įdiegta ir paleiskite šią komandą:
npx create-next-app@latest
Kai paleisite create-next-app komandą, ji užduos jums keletą klausimų apie projektą, kurį norite sukurti. Dauguma klausimų yra visiškai pagrįsti asmeniniais pageidavimais, todėl galite į juos atsakyti, kaip norite. Šiam straipsniui naudosime gryną „JavaScript“ (o ne „Typescript“) ir taip pat naudosime naudojant naują programos maršruto parinktuvą Next.js o ne senasis failų maršrutizatorius.
Dabar, kai nustatėte Next.js programą, galite ją paleisti naudodami:
yarn run dev
Taip bus paleistas kūrėjo serveris, kuris bus atnaujintas kiekvieną kartą, kai pakeisite failus. Kol kas tęskime tai, kad galėtume pridėti puslapių nereikės kaskart jų kurti iš naujo.
SurveyJS nustatymas
Norėdami nustatyti SurveyJS, turėsime įdiegti visas skirtingas priklausomybes. Naudosime visas skirtingas SurveyJS dalis, įskaitant formų kūrėją, formos rodymą ir rezultatų paketą, todėl turime jas visas įdiegti.
Norėdami įdiegti paketus, būtinai paleiskite šią diegimo komandą:
yarn add survey-analytics survey-core survey-creator-core survey-creator-react survey-react-ui
Formos kūrėjo nustatymas
Pirmiausia pradėkime pridėdami formos kūrėjo puslapį. Aš padarysiu savo prieinamą adresu /creatortodėl tam sukuriu failą adresu /creator/page.js.
Kūrėjui nereikia jokių serverio duomenų, kad būtų galima pateikti, tai reiškia, kad mūsų puslapio komponentas yra labai paprastas; tai tik atvaizduoja mūsų Kūrėjo komponentą, kurį apibūdinsiu vėliau. Tai atrodo taip:
export const metadata = {
title: "Survey Creator",
};
export default function Page() {
return <Creator />;
}
Aukščiau pateiktame kode matote, kad eksportuoju ir puslapį, ir metaduomenų objektą. The metadata Tada Next.js objektą naudos SEO metažymoms. Šiame puslapyje visada norime naudoti tą pačią eilutę, todėl tiesiog eksportuojame objektą.
The Creator komponentas yra vieta, kur mes iš tikrųjų naudojame SurveyJS API. Pažvelkime į komponentą:
"use client";
import { useEffect, useState } from "react";
import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";
export default function Creator() {
let [creator, setCreator] = useState();
useEffect(() => {
const newCreator = new SurveyCreator({
showLogicTab: true,
showTranslationTab: true,
});
setCreator(newCreator);
}, []);
return <div>{creator && <SurveyCreatorComponent creator={creator} />}</div>;
}
Pirmas dalykas, kurį pastebėsite, yra tai, kad mes naudojame use client direktyvą šiame komponente. Taip yra todėl, kad SurveyJS komponentai nėra skirti paleisti kaip serverio komponentai. Vis dėlto nesijaudinkite; jie vis tiek pirmiausia bus pateikti serveryje, prieš siunčiant klientui.
Kitas dalykas, kurį pamatysite, yra tai, kad mes vykdome a useEffect su tuščiu priklausomybių masyvu. Tai reiškia, kad funkcija veiks vieną kartą ir sukurs SurveyCreator. Galite matyti, kad tuo metu kūrėjui galime perduoti bet kokias parinktis, priklausomai nuo to, kokias funkcijas norime įjungti.
Viskas, ką turime padaryti, tai pateikti SurveyCreatorComponent ir perduoti jį kūrėjo objektui. Pasirinktinai pateikiame jį taip, kad jis nesugestų prieš nustatant kūrėją.
Jūsų kūrėjo serveris turėjo būti įkeliamas iš naujo, taigi, jei dabar apsilankysite /creatorgalėsite pasiekti kūrėją ir naudotis visomis funkcijomis, kurias galite pamatyti toliau pateiktoje ekrano kopijoje.
Sukurkite puslapį, kad galėtumėte peržiūrėti formą
Tada norime sukurti puslapį, kuriame būtų galima peržiūrėti sukurtas formas. Sukūrę formą dizaineriu, išvestis bus JSON objektas, kuriame bus jūsų klausimai ir nuostatos, kurias nustatote kurdami apklausą, įskaitant logiką ar stilius.
Formos puslapyje norime naudoti dinaminę sąranką, kad galėtume pateikti bet kokį formos puslapių skaičių nekurdami naujo failo kiekvienai naujai formai. Tai darome naudodami Next.js dinaminius maršrutus. Norėdami sukurti dinaminį maršrutą, turime sukurti naują failą adresu /app/form/[slug]/page.js kuri suteiks visoms mūsų formoms atskirą puslapį adresu /form/form-slug.
Naujame faile turime sukurti keletą funkcijų, kad palaikytume Next.js, kad galėtume kurti mūsų puslapius. Pirma, pradėkime nuo generateStaticParamskurį galime naudoti norėdami pasakyti Next.js, kuriuos puslapius norime generuoti. Žemiau galite pamatyti funkcijos turinį:
export async function generateStaticParams() {
return surveys.map((x) => ({ slug: x.slug }));
}
Šiam projektui sukūrėme failą, kuris eksportuoja sąrašą surveys (kuriuose yra a slug) ir a survey (kuris yra apklausos projektuotojo pateiktas objektas). Jei norime įtraukti naują apklausą, tereikia į mūsų sąrašą įtraukti kitą įrašą surveys masyvas. Mūsų generateStaticParams funkcijai reikia eksportuoti sąrašą slugskurį Next.js tada naudos mūsų puslapiams pateikti kūrimo metu. Mums tai tikrai paprasta; mums tereikia susieti savo apklausų masyvą, kad jis atitiktų formatą:
export async function generateMetadata({ params }) {
const survey = surveys.find((x) => x.slug === params.slug);
return {
title: survey.survey.title,
description: survey.survey.description,
};
}
Kita funkcija, kurią apžvelgsime, yra generateMetadata. Tai paima parametrus iš statinių parametrų funkcijos, kurią ką tik apibrėžėme, tada grąžina pavadinimą ir aprašą, kurie naudojami mūsų tinklalapio metaduomenims. Kaip matote aukščiau, mūsų funkcija suranda tinkamą tyrimo objektą pagal slug mums duota. Tada galime naudoti tą patį pavadinimą ir aprašą, kuriuos rašėme kurdami apklausą.
Paskutinis dalykas, kurį turime apibrėžti savo page.js failas yra pats „React“ puslapis. Mūsų formos puslapio puslapio komponentas taip pat labai paprastas. Jis vėl suranda tyrimo objektą, tada perduoda jį į SurveyComponent:
export default function Page({ params: { slug } }) {
const survey = surveys.find((x) => x.slug === slug);
return (
<div>
<SurveyComponent surveyData={survey.survey} />
</div>
);
}
The SurveyComponent tada reikia apibrėžti atskirai. Pažvelkite į komponentą:
"use client";
import { useCallback } from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
export default function SurveyComponent({ surveyData }) {
const model = new Model(surveyData);
const alertResults = useCallback(async (sender) => {
fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
body: JSON.stringify({ result: sender.data }),
});
}, []);
model.onComplete.add(alertResults);
return <Survey model={model} />;
}
Vėlgi, jūs pastebėsite, kad mes turime use client direktyvą, kad įsitikintumėte, jog Next.js žino, kad tai nėra serverio komponentas. Tada sukuriame modelį su SurveyJS ir perduodame jį į SurveyJS Survey komponentas. Prieš tai darydami pastebėsite, kad sukūrėme onComplete funkcija. Mūsų atveju funkcija tiesiog siunčia neapdorotus duomenis /api/submitkurią vėliau galima ten tvarkyti.
Galite naudoti Next.js, kad sukurtumėte API galutinius taškus. Mūsų atveju tai galime padaryti sukurdami failą adresu /api/submit/route.js ir įdėti į jį POST funkciją, pavyzdžiui:
export async function POST(request) {
const res = await request.json();
console.log(res);
return Response.json({ message: "Done" });
}
Mūsų atveju, POST funkcija yra labai paprasta: ji sugriebia išsiųstą objektą ir įrašo jį į konsolę ir atsako pranešimu. Čia norėtumėte išsaugoti rezultatą savo duomenų bazėje, jei tokią turite. Taip pat galite pasirinkti toliau patvirtinti rezultatą ir grąžinti rezultatą, kad jis būtų rodomas sąsajoje. Šiuo metu visiškai priklauso nuo jūsų, ką darysite su duomenimis.
Puslapio kūrimas rezultatams peržiūrėti
Dabar, kai nustatėme formų kūrimo ir rodymo būdą, turime nustatyti būdą, kaip peržiūrėti rezultatus, kuriuos surinkome iš formų. Akivaizdu, kad vienas iš būdų pažvelgti į rezultatus yra tiesiog žiūrėti tiesiai į duomenų bazę, bet tai nesuteiks jums jokių įžvalgų apie tendencijas, kurios rodomos jūsų apklausose. Jei norime nustatyti tendencijas, galime naudoti surveyjs-analytics paketą.
Šiam projektui sukūriau netikrų rezultatų duomenų, kad galėtume sukurti rezultatų informacijos suvestinę. Aš pridėjau a results masyvas kiekvienam tyrimo objektui, kurį naudojome anksčiau. Kiekvienas rezultatas atrodo maždaug taip:
{
"nps-score": 9,
"disappointing-experience": [
"The service is great, i highly recommend you use it.",
],
"improvements-required": [
"The service is great, i highly recommend you use it.",
],
"promoter-features": ["ui"],
rebuy: [true, false],
}
Kaip matote, kiekvienas rezultatas yra tiesiog objektas, kurio raktas yra klausimo ID, o atsakymas – kaip reikšmė. Būtent tai mes gauname iš onComplete funkcija, kai pateikiama forma.
Pirma, norime sukurti naują dinaminį puslapį, nes norime sukurti naują tinklalapį kiekvienai kitai formai, kad galėtume rodyti konkrečiai tos formos rezultatus. Šiam puslapiui norime sukurti naują failą adresu /results/[slug]/page.js.
Vėlgi, norime apibrėžti a generateMetadata ir a generateStaticParams kaip tai darėme norėdami rodyti formas. Mūsų generateMetadata funkciją, šiek tiek pakoreguojame pavadinimą, kad būtų aišku, kad žiūrime į rezultatus, o ne į pačią formą. Vienintelis skirtumas šį kartą yra tas, kad mūsų viduje generateStaticParamsfiltruojame kai kurias formas, kurios neturi rezultatų, todėl nesugeneruojame puslapio formoms be rezultatų. Mūsų generateStaticParams funkcija baigiasi taip:
export async function generateStaticParams() {
return surveys
.filter((x) => x.results.length > 0)
.map((x) => ({ slug: x.slug }));
}
Vėlgi, mes taip pat norime eksportuoti a Page komponentas. Mūsų puslapio komponentas yra identiškas ankstesnės skilties puslapio komponentui, išskyrus tai, kad mes pateikiame komponentą Results. Tačiau vis tiek randame, kad gautume tinkamus apklausos duomenis ir pateiktume juos komponentui.
Mūsų Results komponentas įkeliamas į visus reikiamus paketus ir pateikia juos puslapyje. Tam reikia kelių useEffect kabliukai nustatyti, o visas komponentas atrodo taip:
"use client";
import { useEffect } from "react";
import { Model } from "survey-core";
export default function Results({ surveyData }) {
useEffect(() => {
(async () => {
const survey = new Model(surveyData.survey);
const { VisualizationPanel } = await import("survey-analytics");
const currentPanel = new VisualizationPanel(
survey.getAllQuestions(),
surveyData.results,
{
allowHideQuestions: false,
}
);
currentPanel.render("surveyVizPanel");
return () => {
const panelElement = document.getElementById("surveyVizPanel");
if (panelElement) {
panelElement.innerHTML = "";
}
};
})();
}, [surveyData]);
return (
<div>
<div id="surveyVizPanel" />
</div>
);
}
Kaip matote, vėl pradedame nuo use client dėl tų pačių priežasčių kaip ir anksčiau. Komponentas prasideda raide a useEffect kuri naudojama nustatant skydelį, kuriame rodomos visos diagramos. Pirmiausia jis naudoja surveyData objektas, kuris apibrėžia pačią apklausą, kad sukurtų a Model. Tai leidžia rezultatų paketui žinoti, kuriuos grafikus rodyti, nes jis gali suprasti kiekvieną klausimą.
Kitas dalykas useEffect tai įkelti survey-analytics paketą. Tai atliekame naudodami dinaminį importavimą, todėl jis nėra įkeliamas kūrimo metu. Šis metodas apsaugo nuo kūrimo laiko klaidų, kurias sukelia konkretus kliento kodas pakete.
Gavę reikiamą paketą, mes nustatome vizualizacijos objektą su visais klausimais, tada galime pateikti visų pateiktų dokumentų sąrašą ir sukurti grafikus. Šiuo metu galite konfigūruoti savo vizualizacijas su pateiktomis parinktimis. Po to tereikia leisti skydelio objektui žinoti, kurį ID naudoti norint pateikti DOM, o tai mūsų atveju yra surveyVizPanelkurį pateikiame toliau. Galiausiai turime užtikrinti, kad mūsų kabliukas būtų išvalytas, kad jis išvalytų elementą, kai jis bus atliktas.
Pastebėsite, kad einame tik į surveyData į priklausomybės masyvą, kad visus grafikus iš naujo pateiktume tik pasikeitus įvesties duomenims, o tai gali nutikti, jei kada nors susietume skirtingus rezultatų puslapius.
Tolesnis Darbas
Šis straipsnis suteikė jums pakankamai idėjos, kad galėtumėte pradėti integruoti SurveyJS į Next.js programą. Norėdami turėti visiškai veikiančią sistemą, norėsite pridėti tam tikrą autentifikavimo sistemą, kad įsitikintumėte, jog tik patvirtinti vartotojai gali pasiekti skirtingas sistemos dalis.
Taip pat norėsite integruoti su tam tikru duomenų šaltiniu, kad kūrėjas galėtų kurti naujas formas ir rinkti rezultatus iš galutinio vartotojo. Visi šie papildymai yra labai paprasti Next.js ir SurveyJS.
Išvada
Šiame vadove parodyta, kaip sukurti išsamią apklausų valdymo sistemą Next.js naudojant SurveyJS. Naudodami Next.js gausite tiek daug privalumų, todėl, nors galbūt neparašėte tiek daug kodo, pastebėsite, kad tai, ką sukūrėte, bus pritaikyta tiek formų, kiek norite, be jokio vargo.
Dėkojame, kad skyrėte laiko perskaityti šį vadovą. Kaip jau minėjau, galite patikrinkite visą repo čia arba galite žaisti su čia priglobta sistemos versija.
