Share
Hoe eenvoudig we ook onze webapps proberen te maken, het is vaak handig om nieuwe gebruikers te begeleiden bij hun eerste ervaring. Visuele rondleidingen zijn waarschijnlijk de gemakkelijkste manier.
Als je mijn Envato Tuts + Building Your Startup With PHP-serie hebt gevolgd, ben je bekend met Meeting Planner. Na het bekijken van gebruikers die hun eerste vergadering gepland hadden, besloot ik dat het het beste zou zijn om een soort gids te maken.
In eerste instantie overwoog ik om het zelf te bouwen, maar toen vond ik een open-sourceoptie, Shepherd.
In de tutorial van vandaag, laat ik je kennismaken met het bouwen van een visuele gebruikerstour met Shepherd. Het gebruik van Shepherd is relatief eenvoudig, en ik zal enkele van mijn eigen code herzien die ik gebruikte om het schrijfproces te stroomlijnen.
Shepherd is een open-source aanbod van HubSpot, een inkomende marketingdienst. Een pluim voor hen voor het aanbieden van een robuuste bibliotheek met goede documentatie.
Ik neem wel deel aan de onderstaande opmerkingen, dus stel gerust vragen en deel uw feedback. Ik zou vooral geïnteresseerd zijn in uw ervaring met andere visuele reisgidsoplossingen. Je kunt me ook bereiken op Twitter @lookahead_io.
Laten we een eenvoudig scenario voor Shepherd doornemen.
Het is eenvoudig om een basistournee met Shepherd op uw aanvraag te integreren. Eerst kiest u een themabestand en integreert u hun JavaScript als volgt:
Je kunt de bestanden downloaden van de Shepherd GitHub-pagina. Ik gebruik de herder-theme-arrows.css hierboven, maar u kunt kiezen uit een van de standaardwaarden hieronder en deze aanpassen:
Vervolgens maakt u een tourobject:
var tour; tour = new Shepherd.Tour (default: classes: 'shepherd-theme-arrows', scrollTo: true);
De standaardwaarden kunnen voor alle stappen worden gedefinieerd wanneer u de tour maakt. De klassen verwijzen naar de thema-definities die u hebt gebruikt, bijvoorbeeld. herder-theme-pijlen. En scrollTo behulpzaam zorgt ervoor dat alle stappen in de zichtbare viewport verschijnen.
Vervolgens voegt u afzonderlijke stappen toe aan de tour:
Accentsconagua
tour.addStep ('example-step', text: 'Deze stap is onderaan de . Bijvoorbeeld-css-selector element. ', attachTo:' .example-css-selector bottom ', classes:' example-step-extra-class ', buttons: [text:' Next ', action: tour.next]);De tekst is wat verschijnt in de body van de visuele tour. bevestigen aan verwijst naar een CSS-selector voor het item waarnaar je de tourpop-up wilt laten wijzen in deze stap. De toetsen kunt u een of meer knoppen en hun acties definiëren, bijvoorbeeld. volgende.
En tot slot start je de tour:
tour.start ();
Shepherd bouwt verder op Tether, een ander open source-aanbod van HubSpot, dat helpt elementen naar andere elementen op een pagina te verplaatsen. Tether zorgt ervoor dat uw stappen nooit over het scherm lopen of worden bijgesneden.
Hoewel ik geen problemen had met Tether, vond ik problemen met Shepherd die pijlen niet goed op sommige elementen weergeeft. Dit gebeurde willekeurig, en ik ben niet de enige met dit probleem. Het HubSpot-team heeft na twee weken nog niet op een van mijn GitHub-verzoeken gereageerd, wat een beetje teleurstellend is. Toch is Shepherd over het algemeen een geweldige JavaScript-bibliotheek.
Toen ik begon te experimenteren met Shepherd, ontdekte ik al snel dat het schrijven van een handleiding met veel stappen vrij lang kon duren. Dit is iets dat ik heb aangepakt in mijn eigen implementatie.
Ik wilde de tour niet schrijven met een lange bundel JavaScript-code die in de loop van de tijd zou moeten worden onderhouden. In plaats daarvan heb ik ervoor gekozen om een array te maken en de knoppen programmatisch aan te passen naargelang gebruikers aan het begin of aan het einde van de tour waren.
Ik maak bijvoorbeeld een stappen[] array en definieerde de tour door de array te vullen:
var tour; var stappen = []; steps.push (['. nav-tabs top', 'Welcome', 'Laat me je laten zien hoe je een' + title + 'plant.Als u wilt, kunt u deze gids uitschakelen.
']); steps.push (['# headingWie top', 'Wie zou u willen uitnodigen?', 'U kunt één persoon of een groep mensen toevoegen aan uw' + title + '.Klik op de knop Personen om deelnemers toe te voegen.
']); steps.push (['# invitation-url bottom', 'Uitnodigen via e-mail', 'Als alternatief kunt u de vergaderingslink naar uw deelnemer (s) e-mailen']); steps.push (['# headingWhat bottom', 'What is your meeting about?', 'U kunt het onderwerp van uw' + title + 'aanpassen. We zullen het gebruiken voor de e-mails met uitnodigingen en herinneringen.Klik op de potloodknop om het onderwerp te bewerken.
']); if ($ ('# headingActivity'). length> 0) steps.push (['# headingActivity top', 'Wat wilt u doen?', 'U kunt een of meer activiteitsideeën voorstellen. Met meerdere ideeën, uw deelnemers kunnen u helpen hun favoriet te selecteren.Klik op de plusknop om activiteiten voor te stellen.
']); steps.push (['# headingWhen top', 'Wanneer wil je kennis maken?', 'Suggereer een of meer datums en tijden voor je' + title + '. Met meer dan een kunnen je deelnemers je helpen bij het kiezen.Klik op de + knop om ze toe te voegen.
']); steps.push (['# headingWhere top', 'Where do you want to meet?', 'Suggereer een of meer plaatsen voor uw' + title + '. Met meerdere plaatsen kunnen uw deelnemers u helpen bij het kiezen.We gebruiken Google Places om het toevoegen ervan te vereenvoudigen. Klik op de knop + om te beginnen.
']); steps.push (['. virtualThing top', 'Is dit een virtuele vergadering?', 'Schakel tussen persoonlijk en virtueel '+ titel +' s zoals telefoontjes of online conferenties. ']); steps.push (['# actionSend top', 'Uitnodigingen verzenden', 'Planning is een samenwerking. Nadat u tijden en plaatsen heeft toegevoegd, kunt u Nodig uit deelnemers om hun favorieten te selecteren. Een plek is niet nodig voor virtuele '+ titel +' \ s.']); steps.push (['# actionFinalize right', 'Finalizing the plan', 'Als je een tijd en plaats hebt gekozen, kun je Compleet het plan. We e-mailen de uitnodigingen en de installatieherinneringen. ']); steps.push (['# tourDiscussion left', 'Deel berichten met deelnemers', 'Je kunt heen en weer schrijven met deelnemers aan de berichten tab.Berichten worden via e-mail bezorgd.
']); steps.push (['. container', 'Stel een vraag', 'Heb je hulp nodig? Stel een vraag en we zullen zo snel reageren als we kunnen.Als u wilt, kunt u de gids uitschakelen in de instellingen.
']);
Elk array-element dat ik heb toegevoegd omvatte drie items:
'#headingWie top' 'Wanneer wil je afspreken?' Het onderhouden van deze array was veel eenvoudiger voor mij dan het definiëren van knoppen voor elke stap van de tutorial. Dit betekende echter dat ik programmatisch knoppen moest definiëren terwijl ik de stappen in de tour laadde.
Ik heb deze code geschreven om knoppen toe te voegen en op knoppen te reageren voor de rondleiding. Bij elke stap creëert het een knop array, die ik anders handmatig zou moeten definiëren:
voor (i = 0; i < steps.length; i++) buttons=[]; // no back button at the start if (i>0) buttons.push (text: 'Back', classes: 'shepherd-button-secondary', action: function () return tour.back ();); // geen volgende knop bij laatste stap if (i! = (steps.length-1)) buttons.push (text: 'Next', classes: 'shepherd-button-primary', action: function () return tour.next ();); else buttons.push (text: 'Close', classes: 'shepherd-button-primary', action: function () return tour.hide (););
De eerste stap is bijvoorbeeld nee Terug knop, en de laatste stap heeft nee volgende knop. Maar de laatste stap heeft een Dichtbij knop.
Vervolgens elk stap van mijn array en elk knop array is toegevoegd aan de tour.
tour.addStep ('step _' + i, text: steps [i] [2], title: steps [i] [1], attachTo: steps [i] [0], // classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text ', buttons: buttons,);Met deze aanpak hoefde ik niet meer dezelfde knoppen te herdefiniëren voor elke stap van mijn zelfstudie. Het biedt ook enige programmatische mogelijkheid om de tour dynamisch aan te passen voor de toekomst.
Het gebruik van Yii, mijn gekozen PHP-programmeerraamwerk, dat ik nodig heb toegevoegd, omvat bestanden in mijn activabestand. Dit wordt geladen op bepaalde pagina's waar de tour nodig is. In mijn geval is de planningspagina voor vergaderingen:
Je ziet boven de CSS voor het thema Shepherd en het JavaScript voor Tether, Shepherd en mijn tourdefinitiebestand,
meeting_tour.js.Ik heb ook CSS toegevoegd om de algemene breedte van mijn tourpop-up te regelen 40% van de viewport:
.shepherd-element.shepherd-theme-arrows max-width: 40%;Je kunt de voorbeeldrondleidingvideo hierboven of op Vimeo bekijken. Als u het zelf wilt proberen, meldt u zich aan bij Meeting Planner en wordt u meteen meegenomen naar de planningstour.
Andere dingen om te overwegen
De visuele tour uitschakelen
Ik heb een gebruikersinstelling gemaakt voor mensen om snel de tour uit te zetten. In plaats van een afleidende knop Uit te voegen bij elke stap, heb ik een link toegevoegd aan zet de gids uit op de eerste en laatste stappen van de tour:
Het uitschakelen gebeurt interactief via AJAX en geeft een handige link naar de instellingenpagina hieronder. Dit helpt nieuwe gebruikers gemakkelijk te vinden hoe ze de tour weer kunnen inschakelen:
De geavanceerde vaardigheden van Shepherd
Ik heb je net de basis van Shepherd laten zien en hoe je het snel kunt integreren in je webapplicatie. Tot dusverre heeft het voor mij goed gewerkt, afgezien van de incidentele problemen met pijlen. Shepherd biedt echter veel meer dan ik heb besproken, met name over het verwerken en beheren van gebeurtenissen. Hiermee kunt u uw rondleiding aan uw toepassing en de huidige staat van de gebruiker op een meer aangepaste manier aanpassen. Ze hebben ook zeer goede documentatie.
Als een gebruiker bijvoorbeeld naar een bepaald gedeelte van uw webpagina springt, kunt u ervoor zorgen dat de gebeurtenis automatisch een sprong naar een andere stap van de tour activeert. Ik zou hier in een toekomstige tutorial over kunnen duiken.
In Closing
Ik hoop dat je het leuk vond om over Shepherd te leren. Het is zeker een visueel gepolijste, ontwikkelaarvriendelijke visuele tour die u snel kunt integreren in elke toepassing.
Deel uw ervaring met Shepherd en andere visuele tourbibliotheken in de opmerkingen. En voel je vrij om vragen te stellen.
Je kunt me ook altijd rechtstreeks op Twitter @lookahead_io bereiken. Als je meer wilt weten over mijn Envato Tuts + -lessen, zijn hier een paar interessante:
Gerelateerde Links
