On Vuetify — creating Travel Trax MVP for Travel & Subsistence Logs

Why?

I spent my weekend creating Travel Trax MVP — a webapp to track and record travel logs. Assuming you have employees who travel and claim T&S and the kilometers claimed are in-accurate at worst, it can come handy. You need something that they can use in their mobile devices. They “start” a trip, this records their current location and time. After they finish their trip, they “finish” the trip. This logs their “path”, calculating the actual distance travelled.

They should see their location on a map in real-time. At least every 5 minutes, when a work trip is running, their “movement” should be recorded as it times, they might divert using other routes etc. Their “travel log” should be exportable to excel and should be shown in a calendar when choosing a date range. An employee can also cancel a trip.

Conceptualizing the deliverable

As this is just a MVP (Most Viable Product), I needed to think quick on my feet. I have learned enough of Vuetify to know that its fully capable to deliver on this. I can use the v-calendar to show the trips, for a day, week or a month. I can use the v-data-table to list the trips. For my notifications I can use sweet-alerts, they are awesome.

For mapping I had two choices, Leaflet and Google Maps. I had implemented both to show GPS positions, overlay marker images, polylines, etc etc. The challenge was to calculate the real distance travelled during a “driving” mode.

I ended up using Google Maps because after checking the source code examples for their Distance Matrix API, it felt just like at home. I did some tests first to see if I could make it work with B4x, and then after the API tests implemented the JavaScript version as my MVP will work on a browser.

The Final MVP

After all was done, I was ready to showcase this master-piece. A user will register first, this saves everything to IndexedDB. The plan has to ensure that the WebApp works offline. They will “start” a trip and when done, “finish” it, this calculates the distance travelled between the two points using Googles Distance Matrix in driving mode, and saves the result offline.

Technologies Used

Vuetify — I had wrapped this amazing lib as BANanoVuetifyAD3, a drag n drop B4x platform framework. With this you code using a variant of the Visual Basic language, called simply B4x, and with the BANano transpiler, you get pure native JavaScript. You just deploy to your web server.

B4X — this is a very powerful programming platform that I have come to love. This has helped me deliver native iOS, Android and now PWA/SPA apps with ease. When I was coding this MVP, I loved how easy it was just to transverse the DistanceMatrix service response using the B4x As directive. Of course, the end result is pure unadulterated JavaScript.

And yes, I am able to get the HTML templates from BVAD3 just like any VueJS App, which build up each of the pages of the App.

IndexedDB — this is used to store profile, trip details and movements during active trips. Internally BANano comes built in with AlaSQL, this helps one use normal SQL query statements against their IndexedDB database.

Google Maps Platform — After getting my API key, then coding the DistanceMatrix service code I was good to go. The mapping part for BVAD3 had already been done before.

The Test Drive

The Travel Trax MVP is available on Netlify

Happy BVAD3 Coding!