DEV Community: Adam Wojkowski

how to make simple scrum roadmap with WEKAN

Adam Wojkowski — Sat, 13 Aug 2022 13:59:00 +0000

In this post, I would like to share, how did we resolve one of my SCRUM pain's - make nice and easy to work with, ROADMAP.
First when we started practice SCRUM in our team we spent some time time with search for useful onpremise tool. We are hospital, ok... quite large hospital, 8.5k employees, in 7 cities, highly secured environment, no cloud services, very large intranet (30k devices), though job to keep up with world outside :)

Fortunately there is WEKAN. I'll write some article how do we run it later, for now, lets have running WEKAN onpremise with SSO.

Back to roadmap. There is no easy guide/single template for SCRUM roadmap. try goog for it,... U'll get tenths of very different templates,... well ... this is nice at the end, nobody forces us to make it exactly specific way :)

We run the WEKAN for 1/2 a year in team (before get bored with the roadmap), so we all had some time to get familiar with this tool.
And it was me, who decided to use WEKAN for roadmap because we already know it and there will be no extra effort/cost.

We run 14 days sprints. That splits the year into 26 cycles in 4 quarters, lets see how we modeled it in WEKAN.

All I did is, that I made 4 swimmlanes (Q1 - spring, Q2 - summer, Q3 - autumn, Q4 - winter) and I placed 7 columns into it, just numbered 1,3,5,... after first week of sprint.

BTW does anybody have better idea how to name them ?

Then I placed exactly one card into each column in each swimmlane.

Tip: don't forget to remove unwanted fields from cards such as CreatedBy, BeginsAt, blah blah, here nobody needs them :)

Halelujah, I got it I though,... I started to make card tags (very simple) but,...man it is useless, tags can't be grouped, ordered, arranged, so ... game over with Wekan???

When I was under deepest depression, I showed my problem to my teammate and he (is anyway a million dollar man) responded within just 4 hours with very, but really very nice solution :O, what a shame on me :)

Thank you again Honza !!!!!

The secret is string template custom field. It is a bit hidden in Wekan, so lets look closer where U can find it.

now look what he did :O, he just put this as a field format:

<p class="card-label card-label-silver">%{value}</p>

and thats it.

We use Wekan Tag styles and colors, ... one can easily find them all with browser page inspector, eg.
card-label-silver
card-label-peachpuff
card-label-yellow
card-label-lime
card-label-purple
...

Then whenewer we wants to show to manager what we are going to work on sprint, just open sprint card, add the custom field on it.

then fill some texts row by row like this

and thats all.
We showed it to our general manager and he was thrilling/jumping/screaming YES, etc,... anyway I know, he would never look at it :), but... we can now make profi workplan for whole year.

tadaaa, here is our first roadmap

we finished the roadmap just few weeks ago, so there is nothing at the begin of year in plan, ... and yes we were all at work, busy on projects :)

As I wrote, we are very happy with fact, that we don't need another tool.

Please let me know what do you think about our setup and if anybody will interest, I might share how do we work with product backlogs and sprints in Wekan next time.

thank you for reading and many thanks to:

xet7 for making Wekan
Jan Cermak for p class="card-label card-label-silver" %{value} p
and Krajska Zdravotni a.s. for patience

Adam

FOSS project-time-tracker

Adam Wojkowski — Fri, 25 Mar 2022 16:49:57 +0000

some 4 months ago I started to search for flexible time tracker app for small team of (rather very large hospital) developers. While it might sound strange, it is quite tough ... when you need this:

pure onpremise (cybersecurity officer requirement)
react based easy customizable and integrate
node backend
usefull & customizable reporting functions

err("not found") says google

although,... there was one
https://github.com/shijuvar/React-TimeTracker.git

does exactly what I wanted... except...

In February 2022 was finally some spare time to dive into team time tracking... ehm... with surprise... React-TimeTracker is totaly unmaintained/un-upgradeable:

react 1.0
not so good for containerization LAMP backend (w/ just single handler)
obscure UX lib, unsupported for years

so sad, it was my favorite one :(

prepare stage

spent next 3 days by evaluating possibilities of DYI time tracker ... liked so much simple shijuvar's React-TimeTracker data structure. I tried to make prototype and estimate time cost to write my own tracker... decided to go w/ 1 month budget.

at very begin I was so optimistic and thought of use my loved MANO, but MANO is in very early stage, and finally... sqlite3 is good enough for this, so I gave up on this, despite it would be much more fun with it :)

Also I thought that I can use React-TimeTracker screen layouts, but no way, even UX moves forward miiiles ;), but at least one component that I don't have to think about much...database structure.

this time I decided to not create visual prototype using presentation tool as I felt this app is piece of cake, haha, how silly :)

development

There will be no code in this article, as everything I wrote about is publicly available at: https://gitlab.com/woji/prott.git

database

My only changes to React-TimeTracker db were:

uppercased all tables and columns
changed table PK from int autonumber to natural text codes, it is much easier to read data in db then.
added DATA column to all tables to store raw json data as text. Doing RDBMS for 20 years though me, to don't create column for every stupid attribute I believe I need :)
provided user & task with bit-value role ,eg. 0,1,2,4,8,16, so I don't have to mess with user -> task assignment. I just assign project & roles -> user and roles -> task. It simplifies all.

containerization

As being quite lazy & picky, I always try not to trash my computer with node, react, git etc. I work directly in container only (installed in VirtualBox).
The only component installed in macbook is Atom editor & its ssh remote editor plugin & VirtualBox :). So first of all docker-compose.yml was created and, see how do I install npm packages in it :)

This was my first app in react.js with hooks. Previously I wrote whole corporate internal eshop using react class components (w/ ASP.NET & MSSQL as backend) ,but this time I wanted to be puristic, all FOSS, all new :)

Also I decided to go for all fresh MUI 5, react 17, react router 6... goodbye all my past hardly taken know-how. But it wasn't that big nightmare as I though.

First component I messed with was react-router. New version supports property transfer to routed component and with hooks,...not bad, it was easy to setup route map for app, see ui/src/App.js.

Next was Console UI. It is something I like, tiles with hover effects, icons, texts, almost no programming and no backend needed :)

Actually backend,... with very minor changes to data structure I decided to go for nodejs and sqlite3. I used sqlite3 in past for corporate Android app sync and... except unsupported outer right join, I can do all I need (I use CTE often).

so first true app component was Clients section (see ui/src/layout/Client).

Client list display ClientCard and allows Add/Edit Client data using EditClientDlg.

actually this is 4th iteration of these components and still I'am unhappy about, but it works.

Also first component that required backend. Quickly wrote /svc/ctrlClients.js (and required server.js and routes.js) ...bam...

node-sqlite3 is fully async (w/out promise support), very annoying, so worked with nesting to nesting and nesting...
After 20 days of development I finally found some useful solution to avoid async hell (see /svc/aa-sqlite.js), unfortunately 80% of backend was already written...this will be tough to refractor :(

another challenge was MUI 5. Compare to previous version, all is up side down, but changes makes sense so I manually took previously made components and refactored them into new shape. Inline styles are now pretty straightforward and easy, so I don't mess with some withStyle useStyle, etc.

Next component was surprisingly Timesheet

I was very curious how difficult is to write such a complex (to my skill) UI.
First I needed to add some functionality to JS Date so I made client version of DatePlus and created functions to compute week, week start&end dates... and yes, all is fully internationalized... there is also server version for nodejs, more consolidated. Unfortunately I don't know the way how to share DatePlus code between react and express :(

actually, did U know that week starts on 4 different days on this planet ????? damn...

I wanted to make timesheet annoyance as much fun & comfortable to use for my guys

so tap day & tap amount of man hours... satisfied me :)

Then I implemented step by step Projects

Tasks

Users

All similar to Clients with just different backend calls and form fields.

and also UserReport

note that user report shows 3 colors (blue all time, green paid time, orange non-paid.

ProjectReport

With react it is like write a book not like oldschool C#, ASP, etc.

actually, it is very challenging for me still to start new class or functional component. Any idea how to make it faster ?

conclusion

until now 2022-03-25 this project took's me almost exactly one month nearly full-time (for some reason... I have this time now).

What I have now is quite satisfying to my needs. I still need to finalize delete functionality to UI, add indexes to db add some charts,... but the core work is done.

So my team toolchain is:

fossil-scm - to manage sources and bugtracking
Wekan - to do agile team coop and minimize multitasking
PROTT - to track time that team spent on projects

I would like to send my big thanks to:

apple for making macbook
atom.io for great code editor
google for V8 and facebook for react
MUI for nice UX
Richard Hipp's team for sqlite3 and inspiration

and, please send me some feedback if you like my work :)