Hoe ik in een paar uur een complete app maakte

Elektriciteitshuisjes. Mensen die me al wat langer volgen weten dat ik er een zwak voor heb. Dat is gekomen toen ik van 2007 tot 2009 vrijwel iedere dag op weg naar mijn werk langs een klein schattig huisje kwam. Het huisje was voorzien van een mooi plat betonnen dakje en was begroeid met klimop, die altijd perfect werd bijgehouden zodat het nooit woekerde. Het huisje had wat schattigs, maar was ook stoer. Precies in het midden zat een stalen donkergroene deur met daarop een felle gele sticker: ‘levensgevaarlijk’. En iedere keer als ik er langs fietste dacht ik: “ik moet er een foto van maken” om dat vervolgens weer te vergeten. Totdat ik op een druilerige dag een helder moment had en van mijn fiets afstapte om de foto te maken.

Die ene foto zorgde ervoor dat mijn hersenen gingen ratelen: wat als ik alle mooie elektriciteitshuisjes die ik tegenkom eens vast ga leggen? En eigenlijk wil ik wel dat meer mensen de schoonheid van de huisjes gaan inzien; wat als ik ze op een site ga verzamelen? En zo kwam ik op elektriciteitshuisjes.nl, een site met daarop een kaart met een overzicht van de mooiste elektriciteitshuisjes van Nederland.

Van site naar app

Ik ben geen programmeur. Een site maken lukt me nog wel, in dit geval in WordPress. Maar een app bouwen, da’s heel andere koek. Dacht ik.

Wat wilde ik met de app?
Ik zou graag willen dat de huisjes in een eenvoudig overzicht onder elkaar kwamen te staan. En dat ze op een kaart getoond konden worden zodat je nog een beetje een idee hebt waar het desbetreffende huisje te vinden is.

Dat kon op zich ook met de site. Die is immers responsive. Maar op de site begin ik met een kaart, terwijl op je mobiel eigenlijk het overzicht van de huisjes leuker is om eerst te zien. Op de site (bekeken op een desktop) wil ik bovendien de kaart op een andere manier vormgeven dan op mobiel. Dat kan allemaal wel, maar is veel gedoe en het zou nooit echt optimaal worden.

Ik wilde dus een app om op mobiel een fijne manier te bieden voor het bekijken van mijn elektriciteitshuisjes verzameling.

Glide. Het antwoord op ‘hoe bouw ik die app’

Uiteindelijk heb ik de app gemaakt in Glide. Toen ik voor een ander side-project (Ochtendritueel – inmiddels al lang niet meer in gebruik trouwens) op zoek was naar manieren om iets in app vorm aan te bieden kwam ik bij Glide terecht. Dat stond toen nog behoorlijk in de kinderschoenen maar ik ben ze toen wel gaan volgen op Twitter. De afgelopen tijd zag ik flink wat tweets voorbij komen waarin toffe nieuwe functionaliteiten werden aangekondigd. Dat vind ik altijd erg fijn, want daaruit blijkt een actieve ontwikkeling en mogelijk dus nog veel meer tofs in het verschiet.

Ik besloot eens een poging te wagen.

Glide werkt in combinatie met Google Spreadsheets. Dat is geen gekke gedachten, omdat een simpele database vaak ook niet veel meer is dan een tabel met verschillende kolommen.

In mijn geval had ik voor de huisjes op de site een aantal kolommen nodig: titel, locatie en foto (url). Via een plugin (WP All Export) kon ik die velden exporteren naar een .csv bestand, wat ik vervolgens in Google Spreadsheets kon laden.

Eerste resultaat

In Glide koos ik voor een nieuw project en wees als databron mijn spreadsheets met de database export aan. Tot mijn grote verbazing was het resultaat direct een eerste scherm van mijn app met daarin keurig de elektriciteitshuisjes in een lijst. Voorzien van titel, omschrijving (had ‘ie de locatie voor gepakt) en thumbnails (had ‘ie de kolom met afbeeldingen urls voor gebruikt). Top!

De lijstweergave was niet helemaal wat ik in gedachten had. Ik dacht eerder aan een lijst van grote afbeeldingen zodat de foto’s echt centraal stonden. Het bleek 1 klik, en daarmee was de layout voor 90% zoals ik wilde. Na een beetje finetunen was dit 99%. De laatste procent (uitlijning van de titels wilde ik net wat anders) bleek niet mogelijk. Swa.

Huisjes op de kaart

De huisjes op een kaart tonen, dat leek me echt onmogelijk zonder allemaal moeilijk gedoe. Weer fout gedacht. Ik kon heel eenvoudig een extra pagina (tab) toevoegen waarop een kaart getoond werd. Via een paar dropdowns kon ik aangeven welke kolom waarvoor gebruikt moest worden (Locatie voor de pins, titel + afbeelding voor de klik op de pins).

Er was één nadeel. De adressen werden niet goed herkent. Glide dacht dat ik huisjes had uit Amerika, Spanje, Duitsland, etc. Na wat uitzoekwerk bleek dat mijn notatie (Straatnaam + nummer, Plaats) niet goed was. Zonder comma’s ging het al een stuk beter, maar op de site van Glide las ik dat coördinaten het beste zou werken. En het snelste. Toen ik alle adressen in de Google Spreadsheet had aangepast naar LAT/LONG coördinaten bleek dit inderdaad de fix. Klaar!

De app delen

Apps die je maakt in Glide zijn webapps. Geen native (Android of iOS) apps dus. Je kan ze gewoon in een browser bekijken. Groot voordeel is dat het laagdrempelig is want je hoeft niks te installeren. Nadeel is dat je dus ook niet in de App stores staat. Dat moet je dan weer op een andere manier fixen (dat moet ik nog even uitzoeken).
Via Glide kan je de app eenvoudig publiceren, waardoor hij direct voor de hele wereld beschikbaar is. Je krijgt dan ook een link die je overal kan delen.

De voor- en nadelen van Glide

Voordelen

• Het werkt heel intuïtief. Je kan direct aan de slag en hebt snel resultaat
• Genoeg mogelijkheden. Je kan de data uit jouw Spreadsheets makkelijk op verschillende manieren weergeven, waarbij je per layout ook nog opties hebt om dit wat te finetunen
• Op basis van een Google Spreadsheet. Handig, want als je de spreadsheet aanpast is de data in de app ook meteen aangepast. Lekker rechttoe rechtaan.
• Binnen een paar uur heb je een mooie app. Inclusief eigen kleurtjes, app icon, icoontjes in navigatie etc. Een complete webapp die volledig functioneel is en snel en soepel werkt.

Nadelen

• Kosten. Glide is gratis, maar als je veel rijen hebt in je spreadsheet dan betaal je $19 per maand. Dan ben je wel ook meteen van de Glide branding af en krijg je nog wat extra functionaliteit. Aan de andere kant: het kost je dan $228 per jaar. Voor dat geld kan je geen app laten bouwen.
• Niet native dus je bent beperkt in de mogelijkheden. 
• Niet in de app store(s)

Lessons learned

Je kan in een paar uur een fatsoenlijke app bouwen. Glide is perfect voor een rechttoe rechtaan app zonder al teveel toeters en bellen. Door het gebrek aan device gerelateerde functionaliteit (camera / sensors) zal je wellicht tegen wat beperkingen aanlopen, maar voor veel MVP’s zal Glide best voldoen. 

Ook geleerd: soms moet je iets gewoon eens uitproberen. Bij Glide kan dat gratis en bleek het een superhandige tool te zijn om dit soort webapps mee te maken. Dat had ik niet met zekerheid geweten als ik het niet zelf even uitgeprobeerd had.

Ten slotte: het maken van (web)apps wordt steeds simpeler. Ik verwacht dat je binnen nu en een paar jaar Glide achtige applicaties hebt waarbij je native apps kan maken zonder maar één regel code te schrijven. Overigens heb je nu ook al apps die dat pretenderen, maar die zitten niet op het UX niveau dat Glide biedt en het resultaat is ook nog niet om over naar huis te schrijven.
Deze ontwikkeling maakt ook dat de rol van een UX’er steeds belangrijker wordt. Iedereen kan straks apps maken, maar hoe zorg je voor een app die logisch in elkaar steekt, voldoet aan de verwachtingen van de gebruiker en ook nog eens zorgt dat jouw doelen behaald worden? Daar gaat straks het verschil mee gemaakt worden. Huur mij dus in voor het te laat is! 😉

Downloads / sites

Download mijn app hier

Website Glide

Website Elektriciteitshuisjes.nl

Ontvang tips en maak kans op het boek Online Invloed

Kan jij wel wat kennis gebruiken? Ik geef het boek Online invloed gratis weg.  Het enige wat ik van je vraag is even aangeven dat ik je mag mailen met tips. Je ontvangt dan op onregelmatige basis  UX / Design / Conversie tips en ik betrek je graag in korte gebruikersonderzoeken van mijn eigen projecten (hoef je niet aan mee te doen, mag).

Onder de inschrijvers verloot ik het boek, als bedankje voor jullie support.

Vond je dit leuk? Geef een applausje!