Service logging with QR-code or NFC tag

[OleksiyRudenko]

Is your feature request related to a problem? Please describe. As a bike owner I do quite many tiny and bigger things around my bike quite often. Tiny but frequent things to do are charging traffic lights, cleaning and oiling the drivetrain (after every ride through forest in winter), cleaning bags, washing the bike etc. I want to register the ongoing service as fast as possible. For example, currently, to register a chain oiling service requires the following actions:

1. Open app (web site)

2. Login with Strava (every other time)

3. When on the dashboard https://bikecare.gerbenbol.com/dashboard click Details (only available when the service is overdue, otherwise 1 extra step to locate the required service)

4. When on service schedule view https://bikecare.gerbenbol.com/dashboard/component/service-schedule/details/4 click Register service

5. When on Add service log view https://bikecare.gerbenbol.com/dashboard/component/4/service-log/add fill in at least 2 fields and click Submit

6. Make sure the service is registered

Altogether it takes at least 8 actions (2 of which are typing - service title and mileage)

Describe the solution you'd like I want to have a predefined url that will (a) log a specific service with pre-filled defaults or (b) will lead me to a service log view with pre-filled defauts so that I can edit and confirm, and (c) will be possible to accomplish the above without worrying of being logged in with Strava acc.

I also want such url (or 2 urls for both options a and b above) be encoded and exposed as a QR-code(s) so that I can download and/or print them, attach them next to my bike service area and use my phone camera to instantly log the service.

This will also enable me to flash an NFC-tag and use my phone to log the service even faster as I won't need to activate camera, just wave my phone close to the NFC-tag.

This UX will reduce number of user actions from 8 down to 2 or 1, including any typing discarded if I am happy with all default values.

Suggested approach: For every service generate 2 urls, one that leads to a prefilled service log page, another one that submits a log entry with predefined values (mileage as of the moment of logging), generate 2 QR-codes, expose those urls and QR-codes to the user, and encourage them to print QR-codes and use urls to flash NFC-tags.

QR codes should be clearly titled with their purpose (service title, component type and title, service frequency etc) so that user is able to differentiate between printed QR codes.

This entire section with URLs and QR codes can be folded to not clutter the UI as it will not be used often.

The urls could look like:

• View, edit and confirm https://bikecare.gerbenbol.com/dashboard/component/service-schedule/details/4?title=A&notes=B&date=2024-02-16&time=21:15&service=Chain+Shimano+Dirtcheap+-+Oiling+Every+50km
• Register with default values - same as above + &autosubmit=true

All params should be optional. See also #33 about defaults.

Possible issue: If I am not logged in with Strava the action will fail. Suggested approach: add url param with a unique user's or service's code (uuid) that would help to surpass the Strava authorization on the app. Risk is low. If anyone would be interested to steal this param the biggest damage would be unexpected service log entries on my service log that I can identify and possbly remove or ignore.

NTH sub-feature: Make url parameters editable (I may want to change e.g. notes or title) and allow to re-generate the QR codes. Keep edited urls in DB along with the service schedule.

Describe alternatives you've considered Use direct service logging url, e.g. https://bikecare.gerbenbol.com/dashboard/component/15/service-log/add to jump straight to the service log input view.

Additional context n/a

[OleksiyRudenko]

I wish way more apps were QR/NFC friendly.

For example, I start bike ride on Strava using NFC tag. But there is no exposed url for the exercise stop/finish/save to use NFC tag for this. It would be really nice to have, esp. in winter when hands are coated in gloves and using touch screen is an experince being well below pleasant.

[Gerben321]

That's a great idea. I'm not fully convinced about the logging in avoiding, because you should stay logged in for a long time after connecting with strava. Doesn't that work for you?

But I agree this can be done quicker. Another option can be to add a shortcut to the app. Try and hold press the bike care icon and see the options there. That would save a few clicks.

It now prevents myself from logging all small things as well so you're on to something for sure. I'll go ahead and think this one out. Maybe the default log title can be the title of the schedule, and the distance indeed the current distance. I think these two can even be that as default always, if you want to change it, it doesn't take more time I guess.

To be clear, so you want one url for every schedule to add a log right?

[Gerben321]

Awesome, nfc seems to be possible in a PWA. https://developer.chrome.com/docs/capabilities/nfc

I'm also thinking about using customs url schemes to prevent just anyone from using public urls. So for example bikecare://linkhere. This means you need to have the app (pwa is fine I believe) installed and that way the app handles the custom url while you can't just run the url. I understand it's not really a safety measure, but I think it prevents a load of unwanted behavior.

[OleksiyRudenko]

To be clear, so you want one url for every schedule to add a log right?

I personally would prefer the one with instant submission of the entry with values properly set using defaults. But can easily imagine that many people would prefer the one where they still have the opportunity to review and confirm the values.

So, having two would be great to have. The difference I guess would be a single url parameter like autosubmit=true

[OleksiyRudenko]

That's a great idea. I'm not fully convinced about the logging in avoiding, because you should stay logged in for a long time after connecting with strava. Doesn't that work for you?

Well, if I use an autosubmission option I will never know that I wasn't logged in and the operation failed.

But I agree this can be done quicker. Another option can be to add a shortcut to the app. Try and hold press the bike care icon and see the options there. That would save a few clicks.

But how many shortcuts we can fit in there? I reckon the app shortcut menu is good for an app's main (app's top level) menu. Unless you'd allow users to customize it and they decide what actions are the most critical to them.

Anyway, I would lovely vote for any opportunity that reduces number of clicks drastically (ideally down to 1 or zero) for the actions that are used most frequently yet burrowed deeply in the app's functionality, kinda 5-10 clicks away from the app entry point.

[Gerben321]

I believe I can fit 3 or 4 items there. As far as I know I can't let users customize the shortcuts in a PWA sadly. I've replaced the Dashboard shortcut because it's useless, it now is replaced by the "add a service log".

So we can have both, the added shortcut and I'm working on #33 to make that easier with pre-filled data. And I think this issue is also very helpful for people! And I think a real unique feature compared to other apps.

[OleksiyRudenko]

Why do I love NFC? (Not necessarily related to the feature suggested here, just sharing my general experience with NFC vs any in-app actions).

With NFC you pick your phone, you wave it close to the NFC. Done. Same experience as paying by waving your phone at the grocery checkout.

To enter the app you pick the phone, you turn the screen on, you unlock it, you locate the app. Then continue with in-app actions.

One may argue that face recognition or fingerprint recognition do a great deal of job for you. I would respond: when I am wearing goggles or balaclava in winter, or in twilight, under bright sun, or wearing gloves it does shitty job. If you have also work profile on the phone the security policy may turn biometrics off.

These are the corner cases but boy we have too many of them in our mundane life :)

P.S. Ages ago I used to read paper books and newspapers, counted banknotes and coins at the cash register and checked the change, had to plan my day using the paper notebook, had to get home to watch tv, dialed a phone number and talked to a real person to book a taxi, tickets and whatever. These days I pay by waving a phone, have a powerful computer combined with tv and telephone the size of my palm, I am still want to save a second of my time spent on clicks. Hell spoiled child I am. :-D Just gave it a thought myself.

[Gerben321]

Haha we are spoiled for sure, but I think anything that can make our lives easier and better is a good thing! I've created another app in the past to control smart home automation stuff with a NFC tag as well, so I am fully behind using NFC tags for things like this! So I think it's an awesome idea.

One thing to consider is that (in my case) I always service my bike after riding, and then upload to Strava. So you have to keep in mind that your distance isn't correct when you use the QR or NFC tag until Bike Care has imported the activity from Strava.

[OleksiyRudenko]

One thing to consider is that (in my case) I always service my bike after riding, and then upload to Strava. So you have to keep in mind that your distance isn't correct when you use the QR or NFC tag until Bike Care has imported the activity from Strava.

That's the risk I personally would be willing to accept.

[Gerben321]

Little progress report: I've tried to walk the path of using custom protocol handler in the PWA. Sadly, when I write such a link (web+bikecare://linkhere) on the NFC tag, my Samsung phone with Android 13 just shows the record and does not trigger anything.

However, when I write a regular URL (https://bikecare.gerbenbol.com/dashboard/bikes) and scan that, I get the option to use Bike Care (when installed). So that's some progress! This may differ on phones, but once I click 'remember' it automatically opens the link.

So this means I can just create a special URL that you can trigger with some secret password/hash/uuid or whatever, which then adds the service log with pre-filled data with the current mileage etc.

Little preview. Don't mind the Dutch, but you get the idea I hope. Next step will be to create a screen to write the URL to the tags etc. But it's hopeful so far.

[Gerben321]

I've got some nice progress: I hope to make this easy to use and understand for people. Maybe it's interesting to show always, since it's below the most important element, the service schedule itself. Maybe some people get interested because of it and get nice ideas how to use it. If you think it's better to hide it as default let me know.

The NFC part is not done yet, that will be my next step. The QR part is functionally done. As you can see you get a nice QR code in a Bike Care style which you can scan. The URL inside automatically logs service with a default title and distance/moving time (as in #33) when it's opened. It can be opened from anywhere without having to be logged it. In case you want to refresh the link you can do so. I've also added the direct link itself in case you want to use that in some kind of automation yourself.

What do you think so far?

[Gerben321]

Here's the video showing it! It's super fast and easy to use! I'm using a local address so after writing it doesn't suggest to open the the link with Bike Care, but it will if you have the app installed. I'm super stoked how this works.

https://github.com/Gerben321/bike-care-tracker/assets/24865452/39d48358-31f2-47de-bdf8-210e0b6b73b2

[Gerben321]

It's now deployed! Let me know what you think.