KATA - Acme Location Tracker
Updated: Nov 29, 2021
I dive into a code Kata with Vue.js / Node-Express / MongoDb. This project took about 20 hours.... Link to application: https://acme-tracking.herokuapp.com Features Mostly works on mobile Users can login via Auth0. Doing so will allow them to edit their information and access the report page (icon next to login) Once logged in you can make yourself an admin (since this is a demo) As an Admin you can: Edit all users information Make anyone else an Admin Delete / Add cards Has a rudimentary pipeline that deploys to Heroku
Â
Get your Life Jackets on and Let's Dive In!
This was a code kata that went a bit crazy town.... largely because that's how I am. I did this mostly because I wanted to get more hands on with MongdoDB. Originally this was going to be React, Python/Flask, MongoDB stack. But if you are using one technology you don't know much about, why not toss in a second? So Vue.js, Node.js/Express, and MongdoDB it is. It will be fun.... right..... right? Before I get too far ahead let's take a look at the requirements.
The requirements
# Description
Acme Co is having trouble tracking where its employees are working on a day to day basis. Sometimes employees are working from unexpected locations, like home, the office, or the lab. Acme Co wants a web application built that allows its users to publish their location.
# Requirements
1. Web app shall show location status of all employees
2. Web app shall allow named users to login to edit their status
3. Status can be either:
1. Working from home
2. Working from office
3. Working from lab
4. Web app shall remember user status changes
5. Web app shall include a view of the status history
# Constraints
* Back end tech stack is up to the implementor
* Front end needs to be Angular, React or Vue
* User management, like add/delete/edit need not exist --- so... I added the User management.... because I wanted to. And it was like 15 minutes of work after all the framework was put into place.
The Application Results
This project is about 20 hours of work, over a 3 day window. Take a look, and I'll break the most fun parts. Link to application: https://acme-tracking.herokuapp.com Source code: https://github.com/dcrackel/acme-location-tracking
What do you think? Pretty neat? After a project is "done" (as I'm sure I'm going to add a couple more things to it) it's good to document what you learned, and troubles you had.
Â
Vue.js
Of the React, Angular and Vue front end framework trio, Vue.js I had the last amount of experience with. Over the project I came to really like it's relative simplicity. My montra became, if it's taking me longer than 5 minutes to make this work, I'm over thinking it it. I would take a step back, and most of the time the solution was just a single line of code rather than a new method or methods.... man did I need to step back a number of times. My development had two modes: Light Speed and Banging my head on the wall. After a number of thumps it was more often than not an issue of an out of place character, or something else that was a simple overlooking. This between this and other languages, was the errors were always the clearest as to what exactly was going wrong, at times I would just remark out code until the error chains stopped, then knowing what node was my culprit I could see the issue. In spite of what I say, I was able to implement allot of features quickly with a small amount of code.
The biggest roadblock I had
I use a angile mindset when writing code, I don't write anything unless there is a reason. This means starting with basically a empty text file and building out. I had the main page completed, and it wasn't until I needed to add the report page and the Auth0 connector that I implamented the router. npm -i vue-router@next
Super easy, back to doing what I know. I made the router.js, added routes.... but they didn't work. The app didn't work. I looked at API's... nothing. Documentation... looks good... why doesn't this work? Tutorial videos... nope it's exactly the same.... Why isn't this working?!? I did what I know to do. Maybe I don't know how to code? Maybe I don't know anything.... what am I when you really start thinking about it? Before my impending existential crisis set in, a friend send me a screen shot of their package.json Funny, they are using router version 3.5.1 when their version of Vue 2.6.11. I'm using 2.6.11 but my I'm using the newer version 4 of router..... hummmm..... I set my version of router back to 3.5.1 and tada everything worked as expected. This only cost me a few hours.
Summery
Vue.js is a great tool for getting UI elements made quickly.
Â
Node.js & Express
Originally I was going to do a vanilla Node.js. I even wrote the 1st get REST api. It looks me like screen of code for a single method call.
In looking around the interwebs, I saw examples of Express and that was exactly what I was looking for, and it was felt allot like using Flask. I'm in! That same GET method is now like 2 lines of code. I thought writing the API in javascript would annoy me after decades of Spring/Boot but it didn't, It all felt natural, and often I just wrote what I needed out of habit without even noticing until after it was working. Express was really easy to get installed and to get stared. Even Cors was pretty to get implemented, and CORS normally makes me hate life. The integration with MongoDB went exactly like the 3 step instruction process had covered. I didn't really have any hick-ups with it.
Summery
Node.js + Express is a super easy and fast way to get a web API off the ground. Highly Recemend it.
Â
MongoDB and Me
I have used Flat File DB for years for projects, that vast majority of data that needs to stored by a micro controller project, small web apps, or even large ones can be done in something very simple. File IO is crazy fast these days. If you need a database.... SQL is really easy. I mean it's like the easiest technology to escape the 70's. With the number of solid Free DB's like postgress, mySQL and other cloud solutions why use mongoDB?
The Document Model
If you've been a developer for even a short amount of time you've crossed one of these two examples (likely both). You need to get 3 pieces of data, but in order to get it you must join in 4 tables. Someone thought they would normalize everything, and normalize it they did! Getting any data now requires a query as long as your arm. - or - "Select * from bigtable"
.... hun... this keep going to the right....
wow... there like 92 columns on this table. 10 of them are named "expansion1" to "expansion10" Getting any data now requires a select query as long as your arm, good luck if you need join in some other data. MongoDB avoids this problem, there is no such thing as "tables" they are json objects, they can have as many or as few "columns" in them as you wish. {
_id : (whatever), name: Bob Smith, phone: ["555-555-5555", "555-555-5556", "555-555-5557"] } can live in the same place as: { _id: (whatever else), name: Suzzy Smith, phone: "555-555-5858", tags: ["home", "work","office"], call: true } The shapes are different and it doesn't matter. Store what you want, how you want. Easy.
The Down Side?
MongoDB is really easy to set up and get going. SQL is crazy easy, and while javascript quiries are still easy. They do have a small draw back. Select name, phone, email from users where phone = '555-555-555'; Something we all written like a million times. in mongoDB that same query. db.users.find({"phone":"555-555-5555"}.pretty(). <- you really want the pretty at the end of all your queries... such an awesome feature. The the statements seem pretty similar... and they are the problem is in typing the various brackets, quotes and colons. They physically take longer to type. When you are on a short time frame every second counts. If that's the worse I can come up with, you know it's a damn good product :)
The biggest hold up
At one point I didn't make a forever loop vue that had inserted some 10,000ish rows before I notices a moment later. (yea, this stuff is speedy)
It took me about 20 minutes to get the .deleteMany() worked out, as the format of it is a hair different than the other queries. I expected: db.users.deleteMany({"email":"bob123@gmail.com"}) But deleteMany takes an inner query.... db.users.deleteMany({'email':{'$in':'bob123@gmail.com'}}) Did the trick
Summery
MongoDb is easy way to get a storage connected to your app, without much thought from you the Developer. You can focus on what you like, and interact with the DB in whatever way makes the most sense to what you are doing. Getting connect is a snap, and it offered redundancy and a bunch of other security and reliability features. With how quickly you can get things working, you are not likely to think about those things until must further now the delivery board.
This was a fun little project. I'm likely to use this again with a different tech stack. Let me know what you think, or tell me about a project you have done lately!