Full Install via UI PWA - Improved app install flow

[ivelin]

Based on user feedback, we are revisiting the app install flow.
New state diagram

New UI flow mockup

Diagram source

[vickywane]

@ivelin i spent some time trying to understand the diagrams. If this is still an active issue, i would like to take a dive at it

[ivelin]

Yes, it is still an active topic of discussion. Thank you for taking interest in it.
Before diving into code, I would suggest catching up with @BKristenssonAlfsson 's work on BLE auto-discovery (#397).

[ivelin]

We now have a simpler way to install Ambianic from scratch. It's time to embed setup instructions in the UI flow, so that there is a single entry point for new users.

First time visitors to the UI PWA should be greeted and walked step-by-step through the setup process. Repeat visitors should be taken directly to their latest timeline, but be able to go to Settings for installing more devices and changing configuration settings on existing devices.

[vickywane]

This user onboarding plan seems awesome. If a little bug bounty is attached to it ( to reward the time spent working on this), I would love to implement it.

[ivelin]

@vickywane this is a possibility. Here is the bounty. Feel free to update with your ask.

[ivelin]

@vickywane Installed tipit.io for this repo if that works better for you. https://tipit.io/help

.pool 1 TOKEN Will create, or add to an existing bounty pool reward for the pull request that is linked and merged to solve the issue.

.tip @user 1 TOKEN Command must be executed from a Github issue, will tip mentioned user 1 TOKEN.

[tipitbot]

You don't have the required balance to start the Bounty.

[ivelin]

boss.dev is now also available for bounties on ambianic repos. It has ability to ask for a bounty amount to close an issue:
https://www.boss.dev/doc/get-started

Bounty Earner Command Examples
/boss ask $100 | Announce you will close this issue for $100. In the near future, we will let you know when this number has been reached by one or more bounty creators.
/boss champion | Announce that you are working on the issue. It is still up to the repo owners whether or not to accept and merge your PR. And there may be multiple champions per issue.
/boss onit | alias for champion
/boss volunteer | alias for champion

[ivelin]

/boss $50

[boss-bounty]

Total Bounty: $50
Solved by @vickywane via pull request: #466
To claim this bounty @vickywane must enable receiving bounties at https://www.boss.dev/

Bounties

Bounties paid automatically on close:

• @ivelin: $50

Errors

• To claim this bounty @vickywane must enable receiving bounties at https://www.boss.dev/
• @ivelin: Login at https://www.boss.dev/ and enable earning bounties
• @vickywane: Login at https://www.boss.dev/ to setup an account

[vickywane]

@ivelin I'd like to ask for $100.

I went through the linked sketches on Draw.io. I guess the entire onboarding can take place in a single-center aligned modal or are there actual UI design mockups to complement the sketches?

[ivelin]

@vickywane I think you need to insert a boss command as an issue comment. That's how I contributed $50 to the bounty. Seems to work. See docs and examples:
https://www.boss.dev/doc/get-started

Bounty Earner Command Examples
/boss ask $100 | Announce you will close this issue for $100. In the near future, we will let you know when this number has been reached by one or more bounty creators.
/boss champion | Announce that you are working on the issue. It is still up to the repo owners whether or not to accept and merge your PR. And there may be multiple champions per issue.
/boss onit | alias for champion
/boss volunteer | alias for champion

[vickywane]

/boss ask $100

[vickywane]

@ivelin I just tried following the examples

[ivelin]

@ivelin I'd like to ask for $100.

I went through the linked sketches on Draw.io. I guess the entire onboarding can take place in a single-center aligned modal or are there actual UI design mockups to complement the sketches?

There is also this mockup flow diagram. It was linked under the state diagram in the original issue.

Vuetify stepper seems like a natural choice for the UX here, which we already use for the peer connection page but we can look at other ideas if you wish to propose.

[vickywane]

Great!

Vue-stepper is a great choice, however, I am trying to visualize how it would be with the number of steps in the sketch.

[vickywane]

We can schedule a video call if you would like to explain the flow better

[ivelin]

Sounds good. Join the slack channel <https://ambianicai.slack.com/archives/C011EADFSH2> to coordinate.

…

On Fri, Dec 18, 2020 at 4:02 PM Nwani Victory ***@***.***> wrote: We can schedule a video call if you would like to explain the flow better — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#380 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARBUFNHUMNFCYOIMH4UHV3SVPGQTANCNFSM4NMQGWAQ> .

[vickywane]

I'm already a part of the workspace, on the UI track

[ivelin]

It was nice speaking with you. Looking forward to seeing your work.

[ivelin]

@vickywane :

Following the app installation flow, looking at the diagram where the requester ( the new user ) gets the shared connection link from an existing user, I can see the sketch continues the discussion in some sort of chat UI.
Is there a messaging channel to handle this?
To make it more clearer, how do we handle the installation after a user has received the shared access? @bjorn @ivelin

If I understand the question correctly, there is no need for a separate channel. Once the requester receives the URL with the information about the edge device, they just need to click on the link and it will open directly the page of the Ambianic UI that handles remote connection to a new remote Peer. Currently this is the section of the Settings page in the UI that handles remote Peer connection, but that would have to change. We want the remote peer connection to be handled by the UI as a parameterized URL that can be triggered from a text message. It can look something like:
https://ui.ambianic.ai/remotePeerConnect?remotePeerId=xyz123

The host name part of the URL should match the host name of the sending user's UI app. For most users that would be https://ui.ambianic.ai, but if someone is doing a dev, test or private install of the Ambianic UI, we should allow that.

When the sending user is generating the link from their in-app Share Connection page, it can populate the full URL using its host name and adding as a parameter the PeerId of the edge devices that will be shared with the requesting user.

I think for now we should implement sharing button on the sender side per edge device. If the sender manages multiple devices, they can share connection to each, one at a time. In the future if there is user interest we may look at allowing the sender to share connection to multiple devices at once.

@BKristenssonAlfsson any thoughts here?

[vickywane]

Ok.

Following the sketch, it shows that a user comes back to the installation-flow to continue it after clicking the received URL ( share link ). However, from what you are explaining, I guess the installation should end at the point where the access link is shared reason being that there is no way to resume back from where the installation was stopped.

@ivelin

[ivelin]

Ok.

Following the sketch, it shows that a user comes back to the installation-flow to continue it after clicking the received URL ( share link ). However, from what you are explaining, I guess the installation should end at the point where the access link is shared reason being that there is no way to resume back from where the installation was stopped.

@ivelin

It is not clear which diagram you are referring to and which steps. Below is an updated version of the UI flow mockup with numbered steps. Hopefully we can converge faster by referencing specific step labels.

I guess you may be referring to the transitions (5R6) -> (6). If that is correct then I believe the diagram is self explanatory. After connecting a device successfully, the user should be directed to the timeline page and the install sequence ends. The diagram does not detail the specifics of error handling and recovery during the install process.

[vickywane]

Yes, I am making reference to 5R6 -> 6.

What I assume would happen is this;
A user would click on the sent access link -> This would most likely open a new browser window and they thus lose track of this installation flow.

On a second look at this, I guess there would have to be a background job that keeps checking if the new device has been connected so it moves to (6) after a successful connection. Is this correct @ivelin ?

[ivelin]

Yes, all correct. The diagram does not detail everything but you do get the gist of it. Let’s start somewhere and iterate to polish the install UX. Please remember to keep PRs scoped down for smooth and quick review and merge.

[vickywane]

Yes, i would reduce the scope of this PR. I found it difficult to work with the current setup, eslint keep throwing errors instead of warnings and this was quite frustrating to work with. I probably would raise issues with regards to this when this PR is completed.

[ivelin]

Yes, I am making reference to 5R6 -> 6.

What I assume would happen is this;
A user would click on the sent access link -> This would most likely open a new browser window and they thus lose track of this installation flow.

On a second look at this, I guess there would have to be a background job that keeps checking if the new device has been connected so it moves to (6) after a successful connection. Is this correct @ivelin ?

Absolutely correct!

[ivelin]

related to #467

[ivelin]

🎉 This issue has been resolved in version 2.10.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release
• v2.10.0

Your semantic-release bot 📦🚀