Trick for complex external settings UI

Some on-device apps may have complex external configuration requirements. I found an old thread discussing this:

Complex external configuration? - Discussion - Connect IQ - Garmin Forums

Quoting from that thread:

Default app settings is not user friendly for complex setups. For some kind of settings I have chosen the "config from elsewhere", thus my web app displays cleary all the possibilities but as said Jim it asks much work; a web app, a database to store settings, and a comunication watch->web app.

I want to share a trick which allows on-device apps to open an external configuration UI on a smartphone:

Without an android companion app; only Connect IQ app
Without a web service w/database storing user settings

This trick uses the OAuth APIs as a communication channel between the device and smartphone.

OAuth's intended purpose is to grant the device credentials to talk to a web service. However, when we break it down, here is what's actually happening:

Device requests that Connect IQ open a webpage, including a data payload as query params
Webpage sends a payload of data back to Connect IQ, which proxies it to the device

This means we have a bidirectional communication channel between the device and the phone, *without* installing a custom companion app on the smartphone.

The device app calls makeOAuthRequest. The URL points to a static webpage w/JavaScript hosted on Github Pages or other static site host, with URL query params encoding all settings.
The static webpage parses configuration from URL query params, presents an interactive UI to configure.
When user clicks "Save," the webpage redirects to connectiq://oauth?<query params> with params encoding the modified settings.
The app receives these params and updates settings accordingly.

Things I haven't tested yet:

offline support: webpages actually don't require internet access if they declare a "cache manifest" Does this work with Connect IQ? Not sure yet
Bidirectional serialization of Monkey C object <- base64 -> JavaScript. Can be reusable monkey C and JS libraries

flowstate over 2 years ago

Wow this is such a great idea. Thanks!

flowstate over 2 years ago in reply to flowstate

The only thing I’m wondering is whether there’s any kind of timeout on the device side. For example, if a device makes an oauth request and the backend takes 30 minutes to respond, the device might just give up. With this trick, you really want the user to have an indefinite amount of time to do configuration.

cspotcode over 2 years ago in reply to flowstate

Docs say that, if the app is closed when response arrives, the device will cache it and pass to the app as soon as it registers to receive oauth responses, which it can do at startup. I tested this informally. I can start the flow, close the app, click "save" on the webpage, re-open the app, and it gets the values. I haven't tested a 30 minute delay, though.

I also tested offline caching, and that works too.

I made a demo: github.com/.../