Hergroeperen bij jodiBooks

Waar staan we in november 2019?

Wauw, het is alweer november, wat vliegt de tijd. In ons jaarverslag (januari) zullen we het hele jaar onder de loep nemen, maar dit leek ons alvast een goed moment om even stil te staan bij wat er op dit moment allemaal speelt bij jodiBooks. We hebben namelijk een hele drukke periode achter de rug, dus het leek ons goed om even rustig aan te doen en te hergroeperen bij jodiBooks.

In deze post zullen we daarom even terugkijken naar wat er op de planning stond voor dit jaar en wat we daarvan bereikt hebben. Zo weten jullie wat jullie kunnen verwachten de komende tijd. Hij is wat langer en uitgebreider geworden dan ik van tevoren dacht, dus skip er gerust doorheen.

Een goed moment om te hergroeperen bij jodiBooks
Foto door John Schnobrich op Unsplash

Planning

Aan het begin van dit jaar hadden we grofweg 4 doelen. Heel eerlijk: alle 4 zijn nog niet af. We wilden:

  1. een demo-mogelijkheid maken
  2. een app uitbrengen
  3. een agenda met boekingsplugin toevoegen
  4. de snelheid verbeteren.

Is het erg dat al onze geplande zaken nog niet af zijn? Niet echt. Uiteraard hadden we graag een volledige app gehad en een eerste versie van de agenda, maar we hebben tussendoor ook een factuuroptie gemaakt, die eigenlijk niet op onze planning stond. Dit was een directe vraag van een klant en als we klanten kunnen helpen, dan doen we dat!

Ze vroeg daarna om een agenda met boekingsplugin. Achteraf hadden we daarom het maken van de app en agenda moeten omdraaien. Maar Joep wilde heel graag een app en geloofde niet dat dat zoveel werk zou zijn.


Status demo-mogelijkheid

We hebben een demo-account gemaakt. Daarmee iedereen zonder registreren inloggen. Dit werkt op zich goed genoeg, maar als meerdere mensen tegelijk inloggen, werken ze allemaal in hetzelfde account. Als twee mensen dus allebei één bon maken, zien ze er daarna allebei twee. Klein detail, maar om dit goed op te lossen, moeten we het dashboard onder handen nemen. Dat is een hoop werk, dat we misschien willen doen na de agenda.

Het demo dashboard

Status app

We hebben een app! Dit is nog een beta en kunnen er dus nog foutjes inzitten, maar de meeste daarvan zijn onder controle. We houden een “issue” lijst bij, met bugs (fouten), verbeterpunten en gewenste toevoegingen. Hier werken we langzaam doorheen.

App issues

Op dit moment hebben we drie “grote” problemen, die opgelost moeten worden voordat we de app officiëel kunnen publiceren in de Play store van Google en de App store van Apple.

  1. Het inloggen gaat nog niet helemaal soepel. Dit is een vervelend probleem, omdat het heel vaak wel goed gaat. Het is dus lastig om de fout te vinden.
  2. Er zit een fout in Expo, het framework dat wij als basis gebruiken. Hierdoor crasht de app op iOS. We moeten waarschijnlijk wachten totdat zij de nieuwe versie van dit framework uitbrengen.
  3. Om een app in de Apple app store te zetten, heb je een Apple computer nodig. Die hebben we niet. In plaats van op een eigen mac, bood Expo aan om het via hun te doen. Maar sinds Apple iets heeft geupdated, werkt dit ook niet meer. Het is dus wachten op een fix van Expo of zelf een Mac regelen.
De jodiBooks Beauty app in Expo

App publiceren

Op dit moment kun je alleen de Android app downloaden van onze eigen website. In Android kun je namelijk ook apps installeren zonder de store. Hier hebben we uitgelegd hoe je dat moet doen.

Op iOS is dit niet mogelijk. Apple is heel streng we mogen alleen een app via hun platform delen. Met dit platform, TestFlight, kun je mensen uitnodigen om je app te testen. Helaas kunnen we op dit moment dus geen app uploaden, omdat we zelf geen mac computer hebben.

We hopen dat bij versie 36 van het Expo framework, we een app kunnen uploaden naar TestFlight. Dat wordt dan v0.2.0 van de jodiBooks Beauty app. Dit gaat ook de eerste versie worden die we gaan uploaden naar de Google Play store.

App functionaliteit

Op dit moment werken we aan het toevoegen van de klant– en leveranciershistorie. Dit duurt iets langer omdat we de klant- en leveranciers-popup daarvoor moesten aanpassen. Die aanpassing trekken we meteen door naar de rest van de app. Maar de historie kun je dus in de volgende release verwachten.

Na de historie volgt het wijzigen van data (inkomsten, klanten, producten, etc.). En als dat erin zit, staat het toevoegen van een agenda op de lijst. De volledige lijst met opties kun je in deze post terug vinden.

Klanthistorie wordt in de app gezet
Het is nog niet af, maar de historie komt in de app.

Status agenda

We zijn begonnen met het bouwen van een jodiBooks agenda. Om een werkende agenda te maken, moeten we grofweg 3 blokken bouwen: een API, een dashboard en een app. Gelukkig hebben we die alle drie al voor de rest van jodiBooks Beauty, dus een hoop werk is al gedaan. Het grote verschil zit in de technieken die we gaan gebruiken.

Agenda API

Een API (application programming interface) verzorgt de toegang tot de back-end van de software. In ons geval is het een programma waar de gebruikersinterface (het dashboard en de app) tegenaan praat en die vervolgens de juiste data uit de database peutert en terugstuurt.

Als je bijvoorbeeld in de app naar je “klanten” gaat, vraagt de app aan de API: “geef mij alle klanten van gebruiker x”. De API zoekt dan in de database naar die klanten en stuurt ze terug naar de app. Voor de agenda moeten we iets vergelijkbaars maken. De agenda API moet bijvoorbeeld alle afspraken van gebruiker x terugsturen voor deze week.

Zoals we al vertelden in de post over de architectuur, is de huidige API gemaakt in een “oude” techniek, ASP.NET MVC 5.2.6. Wij willen de nieuwste technieken kunnen toepassen, dus moeten we overschakelen naar iets nieuws: .NET Core 3.0. Afgelopen weekend heeft Diana een eerste versie aan de praat gekregen, woohoo.

Agenda dashboard

Om de agenda te gebruiken, moet je wel iets kunnen zien. Dat doen we in het dashboard en de app. Het dashboard is nu gemaakt met twee frameworks: Bootstrap en jQuery.

Bootstrap zorgt ervoor dat je het dashboard op ieder apparaat goed kunt zien en gebruiken. Of het nou een groot computer- of laptopscherm is of een tablet of nog kleinere telefoon. jQuery zorgt ervoor dat delen van de website “dynamisch” reageren. Bijvoorbeeld bij het kiezen van een datum. jQuery zorgt er dan voor dat de datum wordt ingevuld, zonder dat de pagina opnieuw moet worden geladen.

Omdat we de app met een ander framework gemaakt hebben (React-Native), willen we vanaf nu het dashboard gaan ombouwen naar het framework React. React en react-native zijn in de basis dezelfde frameworks, maar geoptimaliseerd voor andere doelen. React is bedoeld voor websites, react-native voor apps.

Agenda app

Doordat we dus hetzelfde framework gaan gebruiken voor het dashboard en de app, kunnen we een hoop code gaan delen. Dat scheelt hopelijk een hoop dubbel werk. De agenda gaat het eerste onderdeel zijn dat volledig met React gemaakt is en tegelijk op de website als in de app wordt uitgebracht.

We zijn nu nog aan het experimenteren met deze nieuwe frameworks, maar we willen zo snel mogelijk een beta pagina online zetten. Op die demo-pagina kun je dan zien hoe ver we zijn en alvast wat spelen met de jodiBooks Beauty agenda.

voorbeeld van een agenda
Voorbeeld van een agenda, nog niet de onze helaas. Waren we maar al zover 😀

Status architectuur en hosting

In juni en juli hebben we geprobeerd om de snelheid van de website te verbeteren. Dit is gedeeltelijk gelukt, maar we lopen tegen een hoop beperkingen van onze huidige hosting aan. We wisten toen dan ook al dat we langzaam moesten gaan kijken naar alternatieven. Omdat het op zich allemaal wel werkte en we wel betere dingen te doen hadden, hebben we dit iedere keer uitgesteld.

Toen we verrast werden door onze huidige hoster, zijn we “noodgewongen” toch maar eens serieus rond gaan kijken. Soms heb je een schop onder je kont nodig om te gaan doen wat je allang had moeten doen.

We zijn gaan kijken naar wat er nodig is om jodiBooks te hosten en zijn er langzaam achter gekomen hoeveel we eigenlijk niet weten. Je kunt op zo veel manieren een website hosten en daarbij veel of weinig uitbesteden en dus ook veel of minder betalen. Om daar een goede beslissing over te kunnen nemen, is Joep gaan leren hoe je zelf een website moet hosten en onderhouden. Zo komen we er vanzelf achter wat we moeten uitbesteden en wat niet.

We hebben Azure, AWS, Google en onze huidige hoster met elkaar vergeleken. We hebben ook al Azure en AWS uitgeprobeerd. Maar we komen er tot nu toe nog niet uit. De grote vraag is namelijk hoe groot (en dus duur) de server moet zijn voor onze website. Daarom heeft Joep jodiBooks Beauty op onze eigen “thuis”server gezet om dat te gaan meten.

testen op de thuisserver
Het geheugengebruik is hoger dan we dachten. Iets om eens goed naar te gaan kijken.

De eerste conclusie: het huidige hosting pakket is onvoldoende, dat was niet echt een verrassing. Maar als we iets groters nemen, wat dan wel? Dat gaan we de komende tijd uitzoeken.

Bonus: en daarna?

De app en de agenda zijn prioriteit nummer 1. En zodra we een agenda hebben, gaan we er direct een boekingsplugin aan vastplakken. Als dat allemaal goed werkt, gaan we echt aan de slag met de architectuur.

Diana gaat alle applicaties lospeuteren, zodat we de server die we dan gekozen hebben efficiënter kunnen benutten. Als de applicaties zijn losgepeuterd, worden ze allemaal omgezet naar de nieuwe techniek en wordt het dashboard omgebouwd naar React.

Om de applicaties flexibeler te kunnen hosten zijn er twee technieken die Joep gaat bestuderen: Dockers en Kubernetes. Ik weet er nog veel te weinig van om er een goede en duidelijke uitleg van te geven, maar ik beloof dat ik het ga uitleggen. Misschien geeft het volgende al een redelijk beeld (ze gebruiken het zelf ook in hun logo).

Stel je hebt een groot schip (de server), maar je hebt eigenlijk maar een klein deel van dat schip nodig om jouw lading te vervoeren. Best zonde als je dan het hele schip moet betalen. Je kunt dan een heel klein schip kiezen, of jouw lading in een container stoppen en het grote schip delen met andere containers (dockers).

Dockers zijn als een schip met containers.
Foto door Rinson Chory op Unsplash

Leave a Reply