Tasks: van idee tot product

Het begint met een berg vol ideeën en een opdracht voor school die ik zelf kan invullen. Dit was de aanleiding voor het project “Tasks”, een applicatie voor het bijhouden van activiteiten (taken, herinneringen en notities). Ik kwam op het idee voor dit project nadat Google had aangekondigt te stoppen met Google Inbox, een e-mail applicatie met ingebouwde functionaliteit voor herinneringen. Meerdere keren per dag opende ik mijn inbox waar dan niet alleen mijn email stond maar ook herinneringen. Gmail, het product wat nu gebruikt moet worden, heeft deze functie niet!

Zonder veel te denken heb ik heel simpel het project toegelicht voor de school:

Met Tasks kan je makkelijk herinneringen en taken bijhouden met behulp van een nette webapp. De app stelt je in staat om collecties te maken waar je taken en herinneringen aan kan toevoegen. Er is ook uitbreiding mogelijk om later elementen zoals notities, foto’s en documenten te kunnen toevoegen.

Tasks is wel iets anders geworden dan deze uitleg..

Design

Er zijn meerdere grote iteraties geweest voor het uiterlijk om uiteindelijk het huidige ontwerp te vormen. De site gebruikt standaard maar een smal gedeelte van het scherm op grote apparaten (tablet, desktop of laptop) en is touch vriendelijk door het gebruik van grote knoppen. Het thema gebruikt donkere kleuren uit het Nord kleurenpalette en zorgt dat het fijn is om naar te kijken in een donkere omgeving.

Functionaliteit

Wanneer de gebruiker is ingelogd staat er een overzicht met alle activiteiten. Er kan gekozen worden om te filteren op de labels of naar het archief te gaan. De instellingen van de gebruiker kunnen geopent worden via de profiel popup. Bij het bekijken van alle activiteiten met een bepaald label kan het label aangepast worden. Uiteraard kunnen activiteiten gemaakt worden vanuit elke pagina. En kan de gebruiker weer uitloggen.

Techniek

Het project is bedoeld voor persoonlijk gebruik en uiteraard educatie. Daarom heb ik besloten om er een uitdaging van te maken door het gebruik van frameworks die ik nog niet eerder gebruikt heb. Ik heb daarom gekozen om een API met behulp van GraphQL te maken. Deze API zit in een server die geschreven is in de programmeertaal Kotlin en zal uiteindelijk met de Java Virtual Machine werken. Daarbij wordt Ktor als webserver gebruikt en is Exposed aanwezig als SQL framework. Voor de GraphQL laag is gebruik gemaakt van de KGraphQL bibliotheek.

De webapp is gemaakt in TypeScript en scss dat met behulp van Webpack omgezet wordt in JavaScript en CSS. Als framework is gebruik gemaakt van Vue.JS en voor navigatie is gebruik gemaakt van de Vue Router.

GraphQL

Graphql is een taal ontwikkeld door Facebook als alternatief voor REST API’s. Er is een schema waar in gedefineert is wat alle nodes zijn en hoe deze naar elkaar linken waarmee vervolgens queries gemaakt kunnen worden.

De voorkeur ging naar de graphql bibliotheek KGraphQL. Na het implementeren van de bibliotheek liep ik tegen een probleem aan waarin private properties werden opgenomen in het schema maar zodra deze gequeried werden crashde de applicatie. Ik heb hier een oplossing voor gemaakt en bijgedragen aan het KGraphQL project.

Met de GraphQL API kunnen nu allerlij gegevens opgevragen worden in een enkel verzoek. Een voorbeeld waar we de naam van de ingelogde gebruiker opvragen samen met alle titels van alle activiteiten ziet er als volgt uit:

Verzoek

{
  user {
    name
    activities(archived: false) {
      title
    }
  }
}

Resultaat

{
  "data": {
    "user": {
      "name": "Niels",
      "activities": [
        {
          "title": "Presentatie maken voor assessment"
        },
        {
          "title": "Screenshot van Tasks maken"
        },
        {
          "title": "Blog artikel maken"
        }
      ]
    }
  }
}

Conclusie

Tasks is een mooi webapp geworden maar nog niet volledig bruikbaar. Er missen een aantal belangrijke functies zoals het wijzigen van de profielfoto of het instellen van herinneringen en het herhalen hiervan. Ik erg veel geleerd over het maken van een bruikbare applicatie in een relatief korte tijd. Er zijn wel een aantal dingen die ik een volgende keer anders zou doen.

Idee vastleggen

Er is nergens goed vastgelegd wat ik precies wilde maken waardoor het idee tijdens ontwikkeling erg veel is veranderd. Als gevolg hiervan is het eindresultaat erg anders dan de oorspronkelijke intentie was. Dit probleem had ik kunnen vermijden door aan het begin eerst het idee te gaan uitwerken.

Tijd beter inplannen

Ik heb niet om vaste tijden aan dit project gewerkt waardoor ik niet kon bijhouden of ik op tijd klaar zou zijn en soms veel progressie had en vervolgens een paar dagen helemaal niet. Ik had beter tijd kunnen vrijmaken in mijn agenda om aan Tasks te werken.

VueX gebruiken

Ik had een intentie om VueX te gebruiken zodat alle data lokaal opgeslagen kon worden en vernieuwd wanneer het nodig was. Helaas heb ik dit niet gedaan en duurt het laden van sommige data wat langer dan gewenst. Dit kan nog wel toegevoegd worden alleen had het efficienter geweest om dit vanaf het begin te doen.

JVM vermijden

De Java Virtual Machine gebruikt nogal veel RAM wanneer de server software niks staat te doen. Een probleem wat ik niet ervaar met de NodeJS applicaties die ik heb draaien op dezelfde server. Dit heeft een paar keer problemen gegeven omdat mijn server maar 512MB aan RAM heeft.