Første dag havde jeg et møde med min kontaktperson, Anders, hvor vi fik aftalt lidt om det kommende praktikforløb. Jeg kommer til at sidde i et team med 2 dygtige udviklere, og vi skal arbejde med et projekt kaldet Robot CoWorker, som simpelt sagt, er et interface der kan bruges til at kontrollere robotter.
Mit fokusområde til at starte med, er at udvikle et operatørvindue, hvor man kan se data, livecharts, fejlbeskeder og alt andet relevant info der foregår imens robotten kører. Det skal bygges op modulært med komponenter som skal kunne udskiftes baseret på operatørens ønsker. Derudover skal det også i fremtiden, være muligt at kunne bygge sine egne komponenter, som skal kunne installeres og bruges i operatørvinduet.
En super interessant opgave, som nok skal udfordre mig, både det at kode i Angular 2 og TypeScript, samt finde relevant dokumentation, som ikke er outdated, da det rent ud sagt, er et mareridt med alle de forskellige Angular versioner der er.
Ih det lyder fint. I bund og grund handler det om at CoWorker er opbygget i moduler, mit operatør vindue er et af dem, og et modul indeholder mindst én komponent, men som regel mange komponenter, som i sin helhed skaber det endelige modul.
Før sommeren havde jeg opbygget arkitekturen, så man via en config fil man loader ind, dynamisk udskifter de komponenter der bliver brugt i operatør vinduet. Det fungerer fint, når man lige har i tankerne at det er den første prototype. Det vil sige, at der er ingen validering på, om man har udfyldt sin config korrekt, det er noget som skal udvikles i fremtiden. Lige nu er den primære opgave, at prototypen skal fungere.
Valget på den første komponent, som jeg ville kode, var måske lidt et optimistisk valg, men hvad bedre end en graf der opdateres live, i sådan et fint live status operatør vindue? Så det var bare igang.
Jeg brugte en del tid på at undersøge de forskellige charts der var til rådighed til Angular 2. Jeg har tidligere haft stor sucess med Highcharts og Chart.js, dog ikke til Angular, så måske det var tid til at prøve noget nyt. Jeg faldt over ngx-charts, et open-source projekt udviklet af Swimlane, som jeg besluttede mig for at prøve, og det var der et par gode grunde til, selvom det på ingen måde er endeligt besluttet endnu.
Jeg startede med at inkludere ngx-chart i mit projekt. Planen var at få vist en simpel hardcoded bar graf, i en graf komponent som dynamisk ville blive loade, via min config fil. Vælg config -> Load komponent.
Her fik jeg lige den tanke, at det nok var en god idé at sikre sig imod load af ikke valide komponenter. Så jeg oprettede en error komponent der bliver injected, hvis komponenten i ens config ikke eksisterer.
Efter at have oprettet graf komponenten, og fået den til at loade inde i observatør vinduet, hvilket var let nok, var det tid til at forsøge med lidt live opdatering af grafen.
Før jeg gik igang med Observables, ville jeg teste om jeg kunne få grafen til at opdatere, via almindelig JavaSc.... TypeScript. Ved at binde data til ngx-chart i komponenten, og bruge SetInterval til at kalde en metode som returnerer en værdi, og derefter opdatere data... kunne man let få grafen til at opdatere, super! Så var næste skridt at flytte business logikken (data) ud i en service, og prøve at kalde den via en Observable, og her blev det lidt tricky.
I sig selv er det egentlig meget simpelt, jeg har en service som returnerer en Observable, hvor jeg har mappet min data til via en API/DB. På modtager siden, kalder jeg den service, derefter kalder jeg metoden, og subscriber til Observable.
Først brugte jeg alt for lang tid på at finde ud af, at data skulle være i Array format, og ikke json. Det virker umiddelbart til at ngx-chart har en meget specifik måde at arbejde med data på. Da jeg havde fået data til at visualisere sig i grafen, igen, nu dog med bedre arkitektur, skulle den live opdateres.
Det lykkedes også, det er stadig mockup data, men grafen blev opdateret, via en Observable som kørte i et interval... hvilket virker helt forkert, men det var lige pt. den bedste metode jeg havde, til at lave mockup data. Dog var der et problem med mit Array, som jeg konstant opdaterede, og fjernede det 1. index (splice), for at holde et flot live flow... den splicede fint, men graf blev ikke korrekt opdateret. Jeg skal også have struktureret mig ud af en måde, der sikrer at hvis man navigerer væk fra siden, eller skifter config, eller stopper sin robot, så stopper/pauser alle processer.
Det første delmål er at grafen skal opdateres automatisk når man har loadet sin config, og initialiseret programmet, hvorefter den henter den relevante live data, fra en SocketService. Voila.
Resten af teamet kommer tilbage fra ferie næste uge, så satser jeg på der kommer lidt mere struktur på mit arbejde (KanbanScrum!). Vi bruger et "backlog management" værktøj, som hedder Agilefant... så har man også prøvet det. Umiddelbart er jeg ikke fan, jeg foretrækker Project Teamwork, men hvem ved, måske jeg bliver fan undervejs...