Creativiteit is ontdekken, experimenteren & risico's nemen!

Webservices zijn er in vrijwel elke vorm, functie en grootte dat je kan voorstellen. Van uitgebreide databases tot interactieve integraties zoals Google Maps. Gelukkig voor ons volgt het aansluiten van een integratie in het Betty Blocks-platform voor iedereen dezelfde basisstappen. Voor dit voorbeeld gebruiken we JSONPlaceHolder!

Wat is een webservice?

De kans is groot dat je honderden webservices hebt gebruikt zonder dat echt door gehad te hebben. Integraties laten een applicatie eenvoudig toegang krijgen tot gegevens van een andere applicatie voor hun eigen doeleinden (ook wel een API-verbinding genoemd). Een mooi voorbeeld zijn betalingsservices (zoals PayPal of Klarna) in online shopping-applicaties. De online shop bezit niet de rechten op PayPal of de gegevensoverdracht, maar met een integratie kunnen ze deze op hun site implementeren.

Om een ​​webservice met de aangepaste toepassing te verbinden, hoeft u eigenlijk maar twee dingen te doen. Definieer de webservice en maak endpoints. We beginnen het proces door onze applicatie te vertellen met welke integratie we verbinding willen maken, waar deze wordt gehost en welk type gegeven zal worden ontvangen.

Stap 1: Definieer

Voordat je kan beginnen met het plaatsen van webservices in uw front-end, moeten we de basis in uw Back-Office voorbereiden. Met Betty Blocks hoef je je daar geen zorgen te maken over het coderen van een van deze fundamenten. Het enige wat je hoeft te doen is de relevante informatie in een formulier invullen en ready. De belangrijkste dingen hier zijn de naam, host en inhoudstype.

Dit voorbeeld is gemaakt door Betty Blocks


Hier zijn de details voor JSONPlaceHolder als u mee wilt gaan in uw eigen applicatie:

Name: JSONPlaceHolder API

  • Protocol: HTTPS
  • Host: jsonplaceholder.typicode.com
  • Authentication Type: None
  • Request Content-Type: JSON
  • Response Content-Type: JSON
  • Headers: None
  • Help text: -


De host is net als een webadres waar uw toepassing de informatie van ophaalt. Ons voorbeeld gebruikt JSON als het inhoudstype dat uw applicatie precies vertelt hoe het klaar moet zijn wat wordt afgeleverd. Inhoudstypen kunnen variëren, afhankelijk van de webservice die u gebruikt, maar JSON is één van de meest voorkomende.

Nu ben je klaar met het verbinden van je eerste webservice. Hij is verbonden met de applicatie maar doet nog niets nuttigs, laten we dat gaan oplossen!


Stap 2: maak een endpoint

De volgende stap is uw applicatie laten weten waar je de gegevens vandaan moet halen. Waarom moeten we dat doen? Simpel gezegd, webservices kunnen enorme databases zijn, terwijl u alleen geïnteresseerd bent in specifieke informatie. Ons endpoint is dus gewoon een URL binnen de integratie en een bescheiden verzoek om gegevens (ala Oliver Twist).

Nogmaals, het enige dat u hoeft te doen bij het maken van een endpoint is het invullen van de juiste informatie. Omdat we gegevens opvragen, is het type ‘GET’. Noem het endpoint als iets dat u zich kunt herinneren, omdat u later misschien meerdere aanvragen van dezelfde integratie ontvangt.

Stap 3: Testen

Niets maakt een developer gelukkiger dan foutloze applicatiecomponenten. Laten we jouw nieuwe integratie dus een snelle test geven om te controleren of alles werkt zoals bedoeld. Klik op 'Test uitvoeren' en het platform verzendt automatisch een aanvraag en probeert een aantal smakelijke gegevens te verzamelen.

We zijn op zoek naar 4 dingen:

  1. De aanvraag-URL bovenaan is de volledige URL (host + pad), die er goed uitziet
  2. De responscode is 200, wat betekent dat alles volgens plan is verlopen
  3. Het inhoudstype Response zegt application / json; charset = utf-8 (voor ons voorbeeld)
  4. De Response-body bevat de gegevens die we hebben ontvangen van de Webservice, die er ook redelijk goed uitziet!

In het ideale geval ziet uw testrun er ongeveer zo uit:

Bewaar de gegevens

Je kunt een aangepast model genereren op basis van de eerste webservicetest in plaats van handmatig een model te maken of gegevens op te slaan in een cluster van afzonderlijke variabelen. Aan elk gegeven dat in de webservice wordt gevonden, wordt door het platform automatisch een variabel type toegewezen. Deze informatie kan opnieuw worden toegewezen op basis van specifieke behoeften van uw toepassing.

Het voordeel hiervan is dat wanneer je deze gegevens in de toekomst daadwerkelijk wilt gebruiken voor acties of gebruikersinterfacepagina's, je slechts één model hoeft aan te roepen in plaats van 10 afzonderlijk gemaakte modellen. Hiermee bespaar je effectief tijd en moeite wanneer het tijd is om de gegevens op een zinvolle manier te gebruiken. Voor een nieuwe developer voorkomt het gebruik van de automatische aangepaste modellen invoerfouten en maakt het webservices veel eenvoudiger op grote schaal te implementeren.

Note: Je kunt handmatig een aangepast model instellen als je zeer specifieke gegevens wilt opslaan of jouw eigen variabelen wilt toevoegen aan de ontvangen informatie. In ons voorbeeld is dit niet nodig, maar voel je vrij om los te gaan op je eigen applicaties!

Recycle

Hoewel het hele proces supersnel is (en geen codering nodig is), kan het zijn dat een bepaalde integratie goed werkt in andere applicaties die je ontwikkelt. Dus in plaats van ze helemaal opnieuw te maken, kan je met onze Block Store webservices samen met alle aangesloten onderdelen opslaan en opnieuw gebruiken.

Topje van de ijsberg

Het creëren van een webservice binnen Betty Blocks duurt slechts een paar minuten van start tot finish. Nu een aangepaste gegevensmodel gereed is, kan het overal worden geïmplementeerd. Ons voorbeeld bevat album informatie, maar die van jou kan worden gebruikt om evenementinformatie, contactgegevens, registraties en nog veel meer weer te geven. Zoals vermeld aan het begin van dit artikel, is de reikwijdte van integraties enorm met opties voor zowat alles wat je ooit voor jouw gebruikers zou willen.


ERVAAR DE KRACHT VAN HOLYGROW X BETTY BLOCKS

Wij van Holygrow willen jou helpen bij het bedenken, ontwerpen en ontwikkelen van web, business en mobiele applicaties. Ontvang een 30 minuten demo op basis van jouw business case!

Gratis applicatie demo