Share
Uansett hvor enkelt vi prøver å lage webapplikasjoner, er det ofte nyttig å veilede nye brukere gjennom deres første erfaring. Visuelle turer er sannsynligvis den enkleste måten.
Hvis du har fulgt min Envato Tuts + Building Din oppstart Med PHP-serien, er du kjent med Meeting Planner. Etter å ha sett brukere som planlegger sitt første møte, bestemte jeg meg for at det var best å bygge en slags guide.
Først tenkte jeg å bygge det selv, men da fant jeg en åpen kildekode, Shepherd.
I dagens veiledning vil jeg introdusere deg til å bygge en visuell brukertur med Shepherd. Å bruke Shepherd er relativt grei, og jeg vil gjennomgå noe av min egen kode som jeg pleide å strømlinjeforme forfatterprosessen.
Shepherd er et open source-tilbud fra HubSpot, en innkommende markedsføringstjeneste. Kudos til dem for å tilby et robust bibliotek med god dokumentasjon.
Jeg deltar i kommentarfeltene nedenfor, så vær så snill å stille spørsmål og dele tilbakemelding. Jeg vil spesielt være interessert i din erfaring med andre visuelle reiseguide. Du kan også nå meg på Twitter @lookahead_io.
La oss gå gjennom et enkelt scenario for Shepherd.
Å integrere en grunnleggende tur med Shepherd til søknaden din er grei. Først velger du en temafil og integrerer JavaScript slik:
Du kan laste ned filene fra Shepherd GitHub siden. Jeg bruker gjeter-tema-arrows.css ovenfor, men du kan velge mellom noen av standardene nedenfor og tilpasse dem:
Deretter oppretter du et turobjekt:
var tur; tour = new Shepherd.Tour (standard: klasser: 'shepherd-theme-arrows', scrollTo: true);
Standardene kan defineres for alle trinnene når du oppretter turen. Klassene refererer til temadefinisjonene du brukte, f.eks. gjeter-tema-piler. Og scrollTo Pass på at alle trinnene vises i det synlige visningsporten.
Deretter legger du til individuelle trinn for turen:
Accentsconagua
tour.addStep ('example-step', text: 'Dette trinnet er knyttet til bunnen av . eksempel-css-velgeren element. ', attachTo:' .example-css-selector bottom ', klasser:' example-step-extra-class ', knapper: [text:' Next ', action: tour.next]);De tekst er det som vises i kroppen av den visuelle turen. feste til peker på en CSS-velg for det elementet du vil ha på tur-popupen for å peke på i dette trinnet. De knapper lar deg definere en eller flere knapper og deres handlinger, f.eks. neste.
Og til slutt starter du turen:
tour.start ();
Shepherd bygger på Tether, et annet HubSpot open source-tilbud, som hjelper posisjonelementer til andre elementer på en side. Tether sørger for at trinnene dine aldri overløper skjermen eller blir beskåret.
Mens jeg ikke hadde noen problemer med Tether, fant jeg problemer med Shepherd som ikke viste riktig piler på enkelte elementer. Dette skjedde tilfeldig, og jeg er ikke den eneste med dette problemet. HubSpot-teamet har ikke svart på noen av mine GitHub-forespørsler etter to uker, noe som er litt skuffende. Likevel er Shepherd samlet et flott JavaScript-bibliotek.
Da jeg begynte å eksperimentere med Shepherd, oppdaget jeg raskt at det var ganske lang tid å skrive en guide med mange trinn. Dette er noe jeg adresserte i min egen gjennomføring.
Jeg ville ikke forfatter turen med et langt bunt av JavaScript-kode som måtte beholdes over tid. I stedet valgte jeg å lage en matrise og programmatisk tilpasse knappene basert på om brukerne var i begynnelsen eller slutten av turen.
For eksempel lager jeg en trinn [] array og definert turen ved å fylle opp arrayet:
var tur; var trinn = []; steps.push (['. nav-tabs top', 'Welcome', 'Tillat meg å vise deg hvordan du planlegger en' + tittel + '.Hvis du foretrekker det, kan du slå av denne veiledningen.
']); steps.push (['# headingWho top', 'Hvem vil du invitere?', 'Du kan legge til en person eller en gruppe mennesker til' + tittelen + '.Klikk på personknappen for å legge til deltakere.
']); steps.push (['# invitasjons-url-nederst', 'Invitere via e-post', 'Alternativt kan du sende inn møtelinket til deltaker (e)')); steps.push (['# headingWhat bottom', 'Hva er møtet ditt om?', 'Du kan tilpasse emnet for din + tittel +. Vi bruker det til invitasjons- og påminnelsesmails.Klikk på blyantknappen for å redigere motivet.
']); Hvis du ønsker å gjøre det, kan du foreslå en eller flere aktivitetsideer. Med flere ideer, Deltakerne dine kan hjelpe deg med å velge deres favoritt.Klikk på pluss-knappen for å foreslå aktiviteter.
']); steps.push (['# headingWhen top', 'Når vil du møte?', 'Foreslå en eller flere datoer og tider for' + tittel + '. Med flere enn en kan deltakerne hjelpe deg med å velge.Klikk på + -knappen for å legge til dem.
']); steps.push (['# headingWhere top', 'Hvor vil du møte?', 'Foreslå ett eller flere steder for' + tittel + '. Med flere steder kan deltakerne hjelpe deg med å velge.Vi bruker Google Steder for å forenkle å legge dem til. Klikk på + knappen for å starte.
']); steps.push (['. virtualThing top', 'Er dette et virtuelt møte?', 'Bytt mellom personlig og virtuell '+ tittel +' s som telefonsamtaler eller online konferanser. ']); steps.push (['# actionSend top', 'Send invitasjoner', 'Planlegging er samarbeidende. Etter at du har lagt til tider og steder, kan du Invitere deltakere til å velge sine favoritter. Et sted er ikke nødvendig for virtuell '+ tittel +' \ s.']); steps.push (['# actionFinalize right', 'Finalizing planen', 'Når du velger en tid og et sted, kan du Fullstendig planen. Vi vil sende invitasjoner og oppsett påminnelser. ']); steps.push (['# tourDiscussion left', 'Del meldinger med deltakere', 'Du kan skrive frem og tilbake med deltakere på meldinger tab.Meldinger leveres via e-post.
']); steps.push (['container', 'Still et spørsmål', 'Trenger du hjelp? Still et spørsmål, og vi svarer så fort vi kan.Hvis du foretrekker det, kan du slå av guiden i innstillinger.
']);
Hvert arrayelement som jeg la til, inkluderte tre elementer:
'#headingWho top' 'Når vil du møtes?' Vedlikehold av denne gruppen var mye enklere for meg enn å definere knapper for hvert enkelt trinn i opplæringen. Dette betydde imidlertid at jeg måtte programmatisk definere knapper mens jeg lastet trinnene inn i turen.
Jeg skrev denne koden for å legge til og svare på knapper for turen riktig. Med hvert trinn skaper det en knapp array, som jeg ellers måtte definere manuelt:
for (i = 0; i < steps.length; i++) buttons=[]; // no back button at the start if (i>0) buttons.push (text: 'Back', klasser: 'shepherd-button-secondary', handling: funksjon () return tour.back ();); // ingen neste knapp på siste trinn hvis (i! = (steps.length-1)) buttons.push (text: 'Next', klasser: 'shepherd-button-primary' returnere tour.next ();); else buttons.push (text: 'Close', klasser: 'shepherd-button-primary', handling: funksjon () return tour.hide (););
For eksempel har det første trinnet ingen Tilbake knappen, og det siste trinnet har nei neste knapp. Men det siste trinnet har a Lukk knapp.
Så, hver skritt fra mitt utvalg og hver knapp array er lagt til turen.
tour.addStep ('step _' + i, text: trinn [i] [2], tittel: trinn [i] [1], vedleggTo: trinn [i] [0], // klasser: 'hyrdehyrde Shepherd-Theme-Arrows Shepherd-transparent-text ', knapper: knapper,);Ved å bruke denne tilnærmingen, måtte jeg ikke gjentatte ganger omdefinere de samme knappene for hvert trinn i opplæringen min. Det tilbyr også noen programmatisk evne til å tilpasse turen dynamisk for fremtiden.
Ved å bruke Yii, min valgte PHP programmeringsramme, la jeg til, at det var nødvendig å inkludere filer til min ressursfil. Dette blir lastet på bestemte sider der turen er nødvendig. I mitt tilfelle, møteplanleggingssiden:
Du vil se over CSS for Shepherd-temaet og JavaScript for Tether, Shepherd og min turdefinisjonsfil,
meeting_tour.js.Jeg har også lagt til CSS for å kontrollere den totale bredden på min tur til 40% av visningsporten:
.hyrde-element.heter-tema-piler maksimal bredde: 40%;Du kan se eksempelvisningsturen over eller på Vimeo. Hvis du vil prøve det selv, melde du på møteplanlegger og du blir straks tatt til planleggingsturen.
Andre ting å vurdere
Slå av visuell tur
Jeg opprettet en brukerinnstilling for folk å raskt slå av turen. Snarere enn å inkludere en distraherende Av-knapp på hvert trinn, la jeg til en lenke til Slå av guiden på første og siste trinn av turen:
Slå av skjer interaktivt via AJAX og viser en nyttig kobling til innstillingssiden nedenfor. Dette hjelper nye brukere med å finne ut hvordan å snu turen tilbake:
Shepherd's Advanced Capabilities
Jeg har nettopp vist deg grunnleggende om Shepherd og hvordan du raskt kan integrere det i webapplikasjonen din. Så langt har det fungert bra for meg bortsett fra sporadiske problemer med piler. Men Shepherd tilbyr mye mer enn jeg har vurdert, spesielt rundt hendelsesbehandling og ledelse. Dette gjør at du kan tilpasse turen til din søknad og brukerens nåværende tilstand på en mer tilpasset måte. De har også veldig god dokumentasjon.
Hvis en bruker hopper til et område på nettsiden din, kan du for eksempel få hendelsen til å gi et hopp til et annet trinn i turen. Jeg kan kanskje dykke inn i dette i en fremtidig opplæring.
I Avslutning
Jeg håper du har likt å lære om Shepherd. Det er absolutt en visuelt polert, utvikler-vennlig visuell tur som du raskt kan integrere i enhver applikasjon.
Vennligst del din erfaring med Shepherd og andre visuelle reisebiblioteker i kommentarene. Og vær så snill å stille spørsmål.
Du kan også alltid nå meg på Twitter @lookahead_io direkte. Hvis du vil lese mer av mine Envato Tuts + opplæringsprogrammer, er det noen interessante:
Relaterte linker
