App maken zonder programmeerkennis met Glide
Wellicht heb je een goed idee voor een app, maar heb je niet de kennis om deze helemaal zelf te programmeren. Dat zou je kunnen uitbesteden, maar een app maken zonder programmeerkennis is ook een optie. We gebruiken hiervoor Glide en leggen ook uit wat de beperkingen van deze aanpak zijn.
Het doel van ‘no-code programmeren’ is om het programmeren van apps toegankelijk te maken voor technisch minder onderlegde personen. De term ‘programmeren’ mag je wat ons betreft wel met een korrel zout nemen. No-codetools bestaan steevast uit een bepaalde verzameling van functies, die jij op een visuele manier combineert tot jouw eigen app.
Uiteraard kun je met die aanpak apps maken, maar écht vernieuwende programma’s hoef je niet te verwachten. Je mogelijkheden blijven altijd beperkt tot de functionaliteit die de programmeurs van de no-codetool hebben voorzien.
Codeloos programmeren kun je nog het best vergelijken met het ontwikkelen van een website in een cms zoals WordPress, in plaats van zelf html, css en javascript te schrijven. Het volstaat prima voor heel wat toepassingen, maar vroeg of laat loop je toch tegen beperkingen aan en zit er niets anders op dan alsnog zélf code te schrijven.
Wil je aan de slag met codeloos programmeren? De belangrijkste keuze is welke tool je zult gebruiken, want die bepaalt in grote mate de mogelijkheden én beperkingen van jouw app. Voor dit artikel kozen we voor Glide. Glide is in eerste instantie bedoeld voor webapps die geoptimaliseerd zijn voor mobiele apparaten. Je kunt Glide-apps ook openen in een browser op je pc, maar dan krijg je nog steeds de mobiele lay-out te zien.
Achterliggend gebruikt elke Glide-app een Google-spreadsheet om data te bewaren. Maak je wijzigingen aan de spreadsheet in Google Sheets, dan zie je die meestal al na enkele seconden in de app verschijnen. Omgekeerd werkt dat trouwens ook.
Media zoals afbeeldingen, geluid en video zie je als links in de spreadsheet. Voor publiek toegankelijke bestanden kun je gewoon verwijzen naar url’s op andere webservers. Bestanden die je uploadt via de Glide-app komen in Google Cloud terecht.
Voorbeelden
De snelste manier om met Glide aan de slag te gaan, is op basis van een template. Op glideapps.com/templates vind je driehonderd templates, waarvan ongeveer een derde gratis te gebruiken is. Je kunt elke template eerst uitproberen, voordat je besluit om je eigen app op basis van die template te bouwen. Enkele voorbeelden zijn:
- een app om je persoonlijke uitgaven te inventariseren
- een app om je takenlijstje te beheren
- een eenvoudige webwinkel
- een menukaart voor een restaurant
- een database van personeelsleden
- apps met verschillende fitnesswork-outs
©PXimport
Je merkt meteen dat de meeste Glide-apps niet meer doen dan een lijst van een bepaald type gegevens (uitgaven, recepten, fitnessoefeningen enzovoort) op een gebruiksvriendelijke manier presenteren. Om te weten of Glide geschikt is voor jouw app, stel je dus het best de volgende vraag: is er een probleem dat je kunt oplossen door gegevens te manipuleren in een spreadsheet?
Luidt het antwoord ja, dan is Glide een prima oplossing om jouw app te bouwen!
Voordat we onze eigen app gaan bouwen, tonen we je eerst hoe je Glide-apps kunt gebruiken. Kies een template uit de lijst en klik op Copy app for free om de gekozen template te openen in de editor. Klik vervolgens rechtsboven op Copy template om een eigen app te maken op basis van die template. Tot slot klik je op de Share-knop en kies je Publish app.
Glide toont nu een url voor jouw app, bestaande uit twee willekeurige woorden en een cijfer. Je kunt die url naar je smartphone kopiëren via de getoonde qr-code of via een tekstbericht naar jouw mobiele telefoonnummer. Daarna gebruik je de app rechtstreeks in je browser of installeer je ’m door te klikken op App toevoegen aan startscherm (op Android, voor iOS is er een vergelijkbare functie).
Daarna vind je de app terug tussen jouw andere apps en kun je hem buiten de browser in een volledig scherm openen. De app past zich trouwens ook automatisch aan als je je scherm kantelt, wat vooral handig is op tablets.
Account en prijzen
Om met Glide te starten, surf je naar go.glideapps.com. Gezien de koppeling met Google Docs is het niet verwonderlijk dat je je dient aan te melden met een Google-account. Vind je dat maar niets, dan kun je natuurlijk altijd een extra Google-account aanmaken om uitsluitend te gebruiken met Glide.
Glide onderscheidt vier soorten apps, elk met eigen beperkingen. Het begint bij de Personal app, de enige die gratis te gebruiken is. Je kunt dan slechts 500 rijen van een spreadsheet inladen en 100 MB data uploaden (zoals foto’s of pdf-bestanden). Ook het aantal updates vanaf Google Sheets is beperkt tot duizend per maand. Voor persoonlijke apps is dat vaak al voldoende.
Wil je meer data bewaren, de reclame voor Glide verwijderen, een eigen domein gebruiken of de app enkel toegankelijk maken voor geregistreerde gebruikers? Dan kun je overstappen op een Basic app, een Pro app of een Private app. Daarnaast kun je ook zogenaamde Boosts aanschaffen die voor al jouw apps gelden, zoals 500 rijen extra voor 5 dollar per maand.
©PXimport
In de stijgers zetten
Wij laten de templates links liggen en bouwen vanaf nul een eigen app. Denk om te beginnen even na welke data jouw app zal bevatten en hoe je die het best organiseert in een spreadsheet. Maak vervolgens een nieuwe Google Sheet aan met minstens enkele rijen aan data. Je hoeft uiteraard niet alle data nu al in te voeren: dat kan straks makkelijker via je app! In het startscherm van Glide klik je vervolgens op Create app... / From Google Sheet... en selecteer je de net aangemaakte spreadsheet. Glide maakt dan een standaardapp aan op basis van jouw data.
Als voorbeeld bouwen we een app om het winkelen voor mensen met een voedselallergie iets makkelijker te maken. Iedereen met zo’n allergie weet natuurlijk welke ingrediënten absoluut moeten worden vermeden. Helaas bevatten veel producten ook de vermelding “kan sporen bevatten van ...”. Uit ervaring weten we dat de consumptie van dergelijke producten altijd een loterij is. Soms kan het absoluut geen kwaad, maar andere keren krijg je toch weer te maken met milde of zelfs erge allergische reacties.
Om te vermijden dat we tweemaal dezelfde fout begaan, kunnen we in onze app dus bijhouden welke voedingsmiddelen veilig zijn en welke niet. In de afbeeldingen hieronder zie je de spreadsheet waarmee we starten en de initiële versie van de app in Glide.
©PXimport
De kans is erg klein dat de Glide-app er meteen uitziet zoals jij wilt. Daarom beginnen we met het aanpassen van de lay-out, via de bovenste knop in de navigatiebalk links. Standaard toont Glide jouw data in een lijst met tien elementen per pagina. Dat pas je snel aan door een van volgende stijlen te kiezen:
- Compact toont meer elementen per pagina
- Tiles geeft meer ruimte aan de afbeeldingen
- Cards lijkt op Tiles, maar toont extra informatie per element
- Details toont alle gegevens van één element
Het spreekt voor zich waarvoor je Calendar, Map en Checklist kunt gebruiken, maar voor onze toepassing hebben we die niet nodig. Verder kun je bij elke stijl de verschillende kolommen van de spreadsheet nog op de juiste plaats in de app zetten, bijvoorbeeld als titel, ondertitel of detailinformatie.
Standaard toont de app de gegevens in dezelfde volgorde als in de spreadsheet. Dat pas je eventueel aan in de Sort-optie onder het tabblad Features. Ook de Group by-optie is nuttig om meer structuur aan te brengen in langere spreadsheets. Tot slot kun je gebruikers ook in staat stellen om resultaten te filteren op bepaalde kolommen (Filter by) of de sorteervolgorde zelf aan te passen (Sort by). Experimenteer gerust met die opties totdat de lay-out helemaal naar wens is.
Data toevoegen en bewerken
De Cards- en Tiles-stijlen zijn pas echt aantrekkelijk met afbeeldingen. Daarvoor voeg je via de Data-knop in de navigatiebalk van Glide of via Google Sheets een extra kolom toe. Vervolgens stel je die kolom in voor de afbeeldingen onder Layout / Layout / Data.
Het zal je alvast opgevallen zijn dat de app nog geen mogelijkheid biedt om extra data in te voeren. Vink daarom de optie Allow users to add items aan onder het Properties-tabblad. Er verschijnt dan een +-icoontje rechtsboven in de app. Je dient wel nog even de verschillende velden in te stellen die de gebruiker mag invoeren.
In ons voorbeeld maakte Glide automatisch vier velden aan met vrije tekstinvoer: Merk, Product, Categorie en Allergische reactie. Voor die twee laatste hebben we liever dat de gebruiker enkel de keuze heeft uit een aantal vooringestelde waarden. We verwijderen die velden dus door op het kruisje ernaast te klikken en voegen een nieuw veld toe met de blauwe plusknop. Daarna klikken we in de Picker-categorie op Choice en kiezen we zowel bij de optie Source / Values als bij Data / Column de gewenste kolom (bijvoorbeeld Categorie).
©PXimport
Let wel op dat alle mogelijke waarden reeds aanwezig moeten zijn in jouw spreadsheet. Optioneel geef je nog aan dat het veld verplicht is en of je op voorhand een standaardwaarde wilt invullen. Voeg tot slot nog een Image Picker-element toe aan de pagina om later afbeeldingen te kunnen uploaden in de app.
Onze app heeft nu wel een knop om extra data toe te voegen, maar ingevoerde data kun je niet meer bewerken. Dat los je op door te klikken op een element in de lijst van je app en het Edit-tabblad te openen. Vink de opties Allow users to edit en Allow users to delete aan. Er verschijnt dan een potloodicoontje op de detailpagina in je app. Vervolgens stel je dezelfde velden in als bij het venster om data toe te voegen (let op: Choice vind je nu onder de categorie Edit components). In het Layout-tabblad kun je de lay-out van de detailpagina overigens naar wens aanpassen.
Meerdere tabbladen
Onze app is nog erg eenvoudig van opzet, maar je hoeft je niet te beperken tot slechts één venster. Klik op de Tabs-knop in de navigatiebalk en vervolgens op de blauwe plusknop om extra tabbladen toe te voegen aan je app.
Je navigeert tussen de verschillende tabbladen met behulp van de icoontjes en de tekst onder in je app. Kies voor beide tabs eerst een duidelijke naam en een passend icoontje. Jammer genoeg heb je bij een gratis app slechts keuze uit vijftien categorieën met icoontjes.
Vergeet niet dat elke tab een eigen blad binnen je spreadsheet nodig heeft, dus maak dat ook even aan. Daarna koppel je het nieuwe blad aan de nieuwe tab in je app. Vervolgens keer je terug naar het Layout-onderdeel om de nieuwe tab vorm te geven, net zoals je dat voor de eerste tab gedaan hebt.
Linksonder in de preview van de app zie je twee icoontjes staan: een afspeelknop (Play Mode) en een pijltje (Select Mode). In Play Mode kun je alle functionaliteit van je app testen, zoals navigeren tussen de verschillende tabs, gegevens opzoeken, data invoeren, data bewerken enzovoort. Select Mode gebruik je om snel individuele elementen van je app te selecteren en aan te passen.
Meer componenten
De bouwstenen van een Glide-app zijn de zogenaamde componenten die je in de verschillende tabs van je app plaatst. Je hebt al kennisgemaakt met enkele componenten, maar er zijn er nog véél meer.
Houd de muiscursor even boven een component voor een korte beschrijving ervan. Het gaat te ver om ze hier allemaal op te sommen, maar we willen er toch enkele aanstippen:
- invoervelden voor tekst, e-mail, telefoonnummer of locatie
- kiezers voor bestanden, afbeeldingen, scores of datum en tijd
- media zoals audio, video of een kaart (Google Maps)
- knoppen
©PXimport
Onder het tabblad Features van een component kun je ervoor kiezen om bepaalde voorwaarden op te leggen. De component is dan enkel zichtbaar in je app wanneer aan die voorwaarden wordt voldaan.
Aan sommige componenten (zoals een knop) moet ook nog een actie worden gekoppeld, bijvoorbeeld een rij toevoegen, teruggaan naar het vorige scherm of een notificatie tonen. Op het eerste gezicht lijkt het aantal beschikbare acties misschien beperkt, maar je zult merken dat dat zeker niet het geval is!
Settings nalopen
Onze app is nu bijna klaar, maar we moeten nog enkele algemene instellingen aanpassen. Die vind je allemaal terug onder de Settings-knop in de navigatiebalk.
Onder Appearance kun je een thema, een lettertype en een accentkleur kiezen. Onder App Info stel je de naam en een korte beschrijving in voor jouw app. Je kunt ook een icoontje kiezen uit een van de beschikbare emoji’s of een eigen afbeelding uploaden. Onder Data Sync kies je ten slotte hoe vaak de app de data moet updaten vanuit de spreadsheet.
In gratis apps verschijnen handmatige wijzigingen aan de spreadsheet hooguit enkele minuten later in de app; omgekeerd duurt het slechts enkele seconden. Automatische wijzigingen, bijvoorbeeld door functies zoals NOW of GOOGLEFINANCE, worden niet getoond in een gratis app. Daarvoor moet namelijk de optie Refresh while editing or using the app worden ingeschakeld, en die is enkel beschikbaar in Pro apps.
©PXimport
Tot nu toe hebben we één belangrijk aspect van onze app over het hoofd gezien: beveiliging. Het is niet bij elke app de bedoeling dat iedereen die zomaar kan gebruiken. Zo is onze app eigenlijk uitsluitend bedoeld voor onszelf en enkele vrienden en familieleden.
Gelukkig bevat Glide verschillende mogelijkheden om de toegang tot jouw app te beperken: je vindt ze onder Privacy. Elke app is ofwel publiek, ofwel privé. Bij publieke apps kun je eisen dat de gebruikers inloggen met een e-mailadres of een Google-account. Dat vereist wel een upgrade naar een Basic app.
Bij een privé-app kun je de toegang beperken tot enkel jouw e-mailadres of Google-account, of stel je een globaal wachtwoord in voor de app. Beide opties zijn gratis, maar het nadeel is dat slechts één gebruiker tegelijk de app kan gebruiken. Wil je meerdere gebruikers toegang geven tot een privé-app, dan dien je over te stappen naar een Private app.
De precieze lay-out van het inlogscherm pas je eventueel nog aan onder Sign-In Screen, al zijn de meeste opties niet beschikbaar voor gratis apps.
Koppelen aan Zapier
We hebben eerder al vermeld dat je erg uitgebreide acties kunt koppelen aan componenten in je Glide-app. Daarvoor dien je Glide wel eerst aan een Zapier-account te koppelen. Over Zapier lees je hier meer. We gaan er van uit dat je weet hoe Zapier werkt: we bekijken hier enkel de integratie met Glide.
Onder Settings / Integrations klik je op de knop om de Zapier API Key te kopiëren. Log in op je Zapier-account en maak een nieuwe zap. Als trigger kies je Glide en als trigger event New Zapier Action (dat is de enige keuze). Klik op Continue, vervolgens op Sign in to Glide en plak de API Key in het tekstveld. Je hebt Zapier nu gekoppeld aan jouw Glide-app. Voor elke nieuwe app zet je een aparte koppeling op.
©PXimport
Vervolgens configureer je de zap naar wens, met als enige verschil dat je ’m niet rechtstreeks kunt testen vanuit Zapier. De zap heeft namelijk input nodig van Glide om correct te functioneren, maar we hebben de zap nog niet toegevoegd aan onze Glide-app.
Je koppelt de zap aan een component in Glide door de Zapier-actie te selecteren en daarna de gewenste zap te kiezen. Vergeet niet om alle variabelen uit de zap te koppelen aan het juiste informatieveld in je Glide-app. Tot slot trigger je de zap vanuit je Glide-app (bijvoorbeeld door op een knop te klikken) en kijk je in de Task History van Zapier of de taak correct is uitgevoerd. Vergeet ook niet dat gratis apps maar honderd Zapier-acties per maand ondersteunen.
Tot slot
Glide is een prima tool om eenvoudige mobiele apps te bouwen. In slechts een paar uurtjes maak je al een functionele app. De mogelijkheden zijn uiteraard wat beperkt, maar toch voldoende voor heel wat apps.
In de templates vind je erg uiteenlopende voorbeelden van wat je allemaal kunt maken met Glide. Kort gezegd kun je met Glide een app bouwen voor elk probleem dat je via een spreadsheet zou kunnen oplossen. Dankzij de integratie met Zapier werkt jouw app ook prima samen met verschillende clouddiensten.
Het enige nadeel is dat voor sommige toepassingen de gratis Glide-apps niet zullen volstaan. Je zult dan over moeten stappen naar een betaald abonnement en dat kost minstens 7 à 8 euro per maand.
