My Phone App and Dashboard in Knack

I’m no developer but I think I’ve built a nice phone app and dashboard using Knack.

I thought I’d share the usage case and some screen shots.

The basic concept of this is a marine safety app for commercial and leisure water users. I work for the Coastguard (not UK Coastguard) and boat users would call up on the marine radio telling us where they were heading, how many on board and when they were due back. The issue was when there was an incident we would get interrupted with people making these routine calls. We also struggled to register when people were back due to the logging software we did - we have to type what is said on the radio into an emergency management system.

A phone app would be great and enhance our service, reducing radio calls, but also making things safer with a live dashboard in our operations centre showing who was out and when back, along with enhancements such as photos, contact details etc. Tasks run in the background to remind them if they are overdue (problems with this due to tasks running slow or late) and colours on our dashboard show urgency of overdue.

For data protection reasons I can only show a few screenshots - there is a lot more to this but would welcome any feedback on execution… This is the first database I have built etc. although I have experience in managing developers, just never build one myself!

Phone front end:

Login:

Main Menu for leisure boater, show marine opening and closing times:

Adding a passage - logic add and removes info based on things like one way trip, round trip etc:

Tides for 7 days ahead:

Stats of my boat trips:

Coastguard Dashboard:

There is a huge amount not shown here - the commercial operators have a full dashboard in app showing which skippers are on which boats etc etc… stats, logging etc… but this give you an idea.

Love to hear what you think.

8 Likes

Some really nice CSS updates making the app look very polished :+1:

1 Like

Nice looking app - and wish it had existed in my boating days!!

Looks really nice Andrew!
Very clean and slick. I have made a phone “app” also, and really like the way you have done the logins for various users.
How do you populate the tide info?

This is very nice! I struggle with the CSS but you did a nice job here!

I would love to learn how to do something similar (CSS styles for buttons and tables). Could you share your learning sources?

Great job and thanks for sharing.

Total novice question…how do you make it into an app for your phone? We have just been using the web browser version but I would love to have an actual mobile app

Beautiful styling and UX @AndrewUK !

We have a Master button styler here. Gorgeous.

Hi @Meagan , To make it into an app for your phone (from the Knack App or the embedded version) you have to create and design the views for small screens visualization: showing less data at a time, showing data more verticaly, using more lists views, etc. While you create on your PC you need to see how it looks on a phone screen.

Those months, Knack Team is working hard on improving Live App designs.

Hi Craig, sorry for the very slow response!

I just import the data purchased from the UK Hydrographic Office into a table a line per tide then display it based upon show the next 7 days etc. there is a bit of merging of fields / concatenation to get a date marker, but that’s just due to the supplied data. It’s a shame i can’t auto purge the table and delete data more than a week old etc, but we know it’s on the feature list so hopefully by year 2050 it may be able to do this!

This is one of the great apps it looks like built with Knack. Good work.