My Kanban App (with gifs!)

This is just a quick write-up of a little project I worked on for a day or so, so I can come back to it later. The reasons I did this project:

  • I wanted to work through a few new tools to see if they were viable for use in my DT classes.
  • I was a bit burnt out after the end-of-year stresses of NCEA so wanted a bit of a hack day to refresh

New technologies

  • Flask – micro-framework for quickly building web sites and apps
  • Jinja2 – template engine, the flask default
  • Sqlite – database – using this means students can more easily work on their own devices, and the db will be included in source control

Process

  1. I had this tutorial bookmarked for a few months. I saw it pop up on reddit and then twitter so hoped it would be good for starting. It was.
  2. tutorialspoint helped me out again with a useful resource on WTForms. A very interesting way to generate and deal with forms
  3. Bits and pieces from this ultra in-depth tutorial
  4. A very easy to follow article on building a base template and then child templates with Jinja2
  5. Also this one for passing sets through to a template, then processing them in the template
  6. The Jinja2 docs for conditions, loops, nesting, whitespace control, variables, comparisons and logic
  7. stackoverflow.com – found answers to somewhere from 50-100 questions, probably

What I made

The second tutorial I started isn’t listed above because I worked through part 1 of 4 and then realised the author never actually wrote parts 2-4. It was a note taking app, kind of like a simple blog actually. I thought that was boring and as I fiddled with the notes I got the idea of making a simple Kanban app. So I did.

Features

Create new notes

Use a simple form to create new notes. Kind of wish I’d had title and description fields, but oh well. Maybe in the next release.

create

Assign and change priority (Low, Normal, High)

The cards order automatically with highest at the top, then normal, then low. Buttons deactivate if the action is impossible (decrease from low priority or increase from high). At first I had the buttons disappear when the action was impossible but it was super confusing to use when the buttons moved.

priority

Move cards/tasks between columns

Obviously you need to be able to promote the tasks (and maybe demote them if there’s a reason to). Again, buttons deactivate when the action is impossible.

movealong

Park and revive tasks

Tasks can be parked, because that’s a realistic situation.

park

Next features to work on

  • Delete instantly deletes the task. Either prompt for delete and/or move them to a trash somewhere, where they can be viewed and restored.
  • Create another column on the left for a backlog, and maybe something on the right (or an archive) for completed tasks. As well as this, implement a work-in-progress limit, either per column or per board. Not sure how that would work with parked tasks.
  • Create users and log ins (I did this in one of the tutorials using sessions and a database). So I can have my tasks and someone else can have theirs. Teams?
  • Add a description to the task, maybe when you click a card the full details open in a modal. Then the priority/status/category/date values can be hidden from this overview, or replaced with icons to save space.

Summary

I’d be keen to use this with students. The amount of coding actually wasn’t that much, although there are some quite abstract concepts for them to get their little brains around. I like that they pretty much don’t need any specialist software on top of what they already have – we use PyCharm and they can pip install the modules they need. PyCharm has cool tools for working with Sqlite which I discovered is bundled in Python. This was a lot easier for me to pick up than Django, Rails, or Node and is easily powerful enough for what we need to do.

The new standards have requirements for using libraries etc so this is a big tick. Also, the concept of ‘features’ for the new iterative development standards becomes very accessible using this type of tool.

Leave a comment