Share
Wufoo is een webapplicatie die formulieren wil vereenvoudigen. Formulieren kunnen over het algemeen saai zijn om mee te werken. U moet de XHTML / CSS voor de formulierelementen schrijven, de back-endcode instellen om alle gegevens vast te leggen en vervolgens werken aan het genereren van bruikbare rapporten. Wufoo vereenvoudigt dit hele proces, van het maken van formulieren tot het integreren van het in uw site via uitgebreide thema-ondersteuning tot het produceren van mooie, bruikbare rapporten om uw gegevens te ontleden.
Het doet zelfs veel geavanceerde dingen, waaronder web hooks en een goede API om toegang te krijgen tot de verzamelde gegevens. Vandaag zullen we bekijken hoe we een eenvoudig formulier met Wufoo kunnen maken en vervolgens de API gebruiken om de verzamelde gegevens programmatisch te openen en aan te passen.
Eerst moeten we een formulier maken zodat we ermee kunnen spelen. Registreer je voor een nieuwe account bij Wufoo en je wordt meegenomen naar een van de meest humoristische lege applicatiestaten aller tijden:
Klik op de knop om een nieuw formulier te maken en u gaat naar de formulierbuilder-applicatie. De interface is zeer intuïtief met een contextgevoelig paneel aan de linkerkant en het hoofdgedeelte aan de rechterkant. Het toevoegen van elementen is net zo eenvoudig als erop klikken of het naar het hoofdgedeelte slepen.
Als u op het gemaakte element klikt, kunt u alle relevante details bewerken.
Omdat we het zo eenvoudig mogelijk willen houden, is slechts één tekstveld met een e-mailadres voldoende. Klik op formulier opslaan en we zijn klaar. We hebben ons eerste formulier gemaakt met nulcode en het heeft alle 60 seconden geduurd.
Het is ongelooflijk eenvoudig om het aangemaakte formulier in onze site te integreren. Ga naar de formulierpagina en klik op de code koppeling van het nieuw gemaakte formulier.
Wufoo biedt een aantal manieren om het formulier naar uw bezoekers te sturen, inclusief een JavaScript-versie die in een iframe, XHTML-code voor een volledige pagina met de formulieren werkt of slechts een link die u met uw vrienden kunt delen.
Met de Wufoo API kun je met weinig moeite programmatisch gegevens die relevant zijn voor je account opvragen, indienen en wijzigen. De API-set bestaat in wezen uit twee stabiele, vaste API's en nog een bètatest. We zullen vandaag naar de stabiele delen kijken.
Houd er rekening mee dat u alleen gegevens kunt ophalen en verzenden naar reeds bestaande formulieren. Als u formulieren direct wilt maken en vervolgens gegevens wilt verzenden of alleen nieuwe velden wilt maken via de API, heeft u geen geluk. De huidige versie van de API staat deze functionaliteit niet toe, maar let er in de nabije toekomst op samen met een heleboel andere functies.
Maar eerst heeft u een API-sleutel nodig. U kunt het verkrijgen via de API-informatiekoppeling op de pagina waar u uw codefragmenten ophaalt.
Noteer uw API-sleutel en de ID van het veld dat u wilt openen en / of aanpassen. We zullen het binnenkort gebruiken.
Met de Query-API kunt u informatie ophalen die u via uw formulieren heeft verzameld, zonder de Wufoo-website te omzeilen. Als u op zoek bent naar alle onbewerkte gegevens en er vervolgens een aangepast rapport van maakt, is dit de juiste keuze.
Het eerste dat u moet opmerken, is de URL die u moet aanvragen om bij de juiste gegevens te komen. De URL ziet er zo uit:
http://username.wufoo.com/api/query/
Vervangen gebruikersnaam met je gebruikersnaam en je bent klaar om te gaan. De vraag delen laten de Wufoo-servers weten dat u informatie van de servers wilt ophalen.
cURL is de gemakkelijkste manier om gegevens naar de server te verzenden. Als je een beetje nieuw bent bij CURL en je verloren voelt, raad ik je ten zeerste aan dit cURL-artikel hier bij Nettuts door te nemen+.
Laten we de code voor een deel bekijken. We hebben eerst de API-sleutel nodig waar we eerder een notitie van hebben gemaakt. We hebben ook de naam nodig van het formulier waarvan u de gegevens wilt ophalen. Deze twee samen met de versie van de API die we gebruiken, twee in ons geval, zijn de minimumparameters die we nodig hebben om een succesvol verzoek te doen.
We voegen alle vereiste elementen samen als sleutel / waarde-paren en slaan deze op voor later gebruik.
Vervolgens geven we de juiste URL door, zoals hierboven aangegeven, samen met de aanvraagreeks die we hierboven hebben gemaakt. We slaan ook het antwoord op een variabele op zodat we het kunnen gebruiken.
$ resp houdt het antwoord op ons verzoek. Standaard retourneert de Wufoo API gegevens in een JSON-indeling. In het geval dat XML uw payload naar keuze is, moet u een extra parameter toevoegen aan de tekenreeks. De extra parameter heeft de notatie van w_format = format waarbij het formaat XML of JSON kan zijn.
De geretourneerde JSON-payload is eigenlijk behoorlijk groot en bevat talloze stukjes informatie. De relevante onderdelen worden hieronder getoond:
Het grootste deel is het resultaat van het verzoek, samen met informatie over het gevraagde formulier, waaronder de naam van het formulier, de titel, URL, beschrijving en veel andere informatie..
Het tweede aandachtspunt zijn de velden, het formulier bevat. Omdat onze vorm heel eenvoudig was met slechts een enkel veld, zijn onze geretourneerde gegevens vrij kort. Hoe dan ook, het bevat informatie over de ID van het veld, de titel en verschillende andere informatie, inclusief of deze al dan niet vereist is, een beschrijving voor het veld enzovoort.
Het laatste interessante punt is het gedeelte met de vermeldingen zelf. Elke vermelding voor het geselecteerde formulier wordt teruggestuurd naar de beller met een groot aantal gegevens, waaronder de ID van het item, de waarde van de velden, het IP-adres van de gebruiker, de datum waarop het is gemaakt enzovoort.
Vanaf dit punt is wat u doet met de gegevens volledig aan u. U kunt de gegevens analyseren om een mooi aangepast rapport te maken, de informatie voor specifieke gegevens doorzoeken of ze allemaal in een spreadsheet of database invoeren. Je verbeelding is de limiet.
Met de API voor verzenden kunt u gegevens rechtstreeks naar de Wufoo-servers verzenden. Deze API is vooral handig als je absoluut je eigen XHTML / CSS moet gebruiken terwijl je nog steeds gebruik maakt van alle back-endmogelijkheden die Wufoo biedt. Op deze manier krijg je het beste van twee werelden: je mag je eigen aangepaste look gebruiken maar behoudt de kracht van Wufoo.
De voorkant vereist geen significant verschil. Als voorbeeld, hier is de markup, die ik heb gebruikt voor het testen van de submit API.
handler.php ziet er zo uit.
Er zijn een paar dingen om op te merken hier. Net als bij de query-API, slaan we de apikey en formid op, zodat we deze later kunnen gebruiken. We nemen ook de waarde van het POST-tekstvak op, zodat we het zelf naar Wufoo kunnen sturen.
Merk op dat we ook een variabele hebben gemaakt met de naam fieldid. Dit komt direct overeen met de API-ID op de API-sleutelpagina.
Hierna is alles net zoals voorheen. We voegen de string samen en gebruiken vervolgens cURL om de gegevens door te geven aan de server. De server retourneert een JSON-antwoord dat er als volgt uitziet:
Dat is het. Geen gedoe, geen onzin. Posten op Wufoo via onze aangepaste code is zo simpel als dat.
Als extra bonusfunctie kunt u met Wufoo nu posten naar andere services wanneer een nieuw item in het systeem is aangemeld. Je kunt veel handige dingen doen met deze geweldige nieuwe functie, maar ik zal gewoon blijven bij het gebruik van deze functie.
Om naar de pagina met meldingen te gaan, klikt u op de koppeling Meldingen op de pagina Formulieren.
Op deze pagina kun je kiezen om meldingen te ontvangen via een aantal opties, waaronder e-mail en sms of post naar services zoals Highrise, Twitter en nog veel meer wanneer een nieuw item is gepost. Maar dat zijn niet degenen waar we vandaag naar zullen kijken. Degene die we gaan bekijken, is web hooks - een handige technologie waarmee ontwikkelaars HTTP-callbacks kunnen ontvangen wanneer een item wordt ingediend bij Wufoo. Zie het als een terugroep op steroïden.
Aan de kant van Wufoo hoeft u alleen maar een URL in te voeren waarnaar Wufoo elke keer POST-gegevens zal verzenden. Alles wat u nodig hebt om het aan uw kant om een pagina in te stellen die de POST-gegevens vangt. Voor testdoeleinden kunt u een account bij PostBin instellen, wat u het gedoe bespaart. Voer deze URL in Wufoo in en je bent helemaal klaar. Een voorbeeld van de gegevens die door Wufoo zijn gepost naar onze doel-URL.
Heel handig, als ik het zelf mag zeggen.
En we zijn klaar! We hebben gekeken naar het creëren van een eenvoudig formulier met Wufoo en vervolgens over het programmatisch manipuleren en ophalen van de gegevens die we hebben verzameld via de eenvoudig te gebruiken API van Wufoo. Hopelijk was dit nuttig voor jou en je vond het interessant. Ik zal de commentarensectie nauwlettend in de gaten houden; dus klokken daarbinnen als je vragen hebt.
Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Happy codering!
Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].
Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.
Accentsconagua