Guides with Skills Network

[mdenby]

From Jamie Coleman:

I am currently looking at integrating what we have in the guides section to a new environment (Skills Network) that allows users to try stuff out via a browser. Here is what we have on the openliberty.io site:

https://openliberty.io/guides/

and this is what we want to integrate:

https://ide.skillsnetwork.site/open-liberty-tutorial-catalogue

One thing to note is that it currently or at least didn't a few months back work in the Safari browser.

[yeekangc]

@gkwan-ibm @mbroz2 @lauracowen

[yeekangc]

IMO, it isn't so much adding a new page but they should be extensions of the tiles for corresponding guides and be integrated into guide pages for each guide too.

[mbroz2]

I think we should start by keeping things simple and just exposing a link (via some nice button/image) to the Skill Network equivalent of the guide, as an alternate (remote instead of local) way of completing the guide. Like YK said, we'd expose these links from the guide and perhaps from /guides as well, though personally I'm not sure we need it on the card/tile itself as I think it will get busy (unless we just mean to add a badge like we have for interactive guides, to signal that the guide is available on Skills Network as well, but that only makes sense if not all static guides will be converted).

If Any further integration into the site is wanted, we would need more discussion.

[jamiecoleman92]

We could just give the user the option via a pop up dialog box when they click on a guide to either do it locally or on a hosted pre-setup environment? The SN site does look quite different to the OL site so I am wondering if they could give us a version that has some visual tweeks to align with the OL site or just use the two IFrames they have and put them on a page that looks the same as the OL site.

[mbroz2]

The iframe approach is what I'd like to avoid for the first implementation, as it would need much more discussions and would likely be a much larger effort (which would likely end up delaying the integration).

I'm also against a pop-ups (not just for this, but in general) on the site, and I don't think it would be appropriate for this scenario. I think a simple link/button (which we can 'highlight') would be my preferred solution, at least as a cheap, first pass.

[yeekangc]

Should keep in mind the design that we are looking at for Gradle support since this is another option for users to choose: https://github.com/OpenLiberty/guides-common/issues/46

[yeekangc]

I lean toward linking out at the moment as Michal suggested and I would like the SN site for our labs to be appropriately styled/branded for Open Liberty too.

[jamiecoleman92]

I spoke to the Skills Network team to talk about how we can go about this. They said changing the design of the UI other than the IDE should be fairly simple. I do not think we should be making changes to the IDE design as it matches what VS code looks like and will be familiar with developers. I have told them that we will produce some designs and I would go back to them next week and they would review what they think is possible. Overall they are happy to create us our own version for OL.io

Now in regards to metrics and user tracking we will need to implement LTI on the Open Liberty site in order to get metrics from the users. This will also remove the need to have to link off to another page to start the guide and just start the guide directly from the OL site. LTI has a lot of advantages and also allows us to track how long people spend on a guide, How many guides they did, where they came from etc. @mbroz2 I am not sure how much work this would involve on your end. The way around is to link off to a page about the guide then have a button to launch it from there.

[jamiecoleman92]

I am currently waiting for the staging environment to be finished so we have a better look at how the whole process so I can create the POC.

[mbroz2]

@jamiecoleman92 @yeekangc If we moved forward with LTI on ol.io, would a user then need to sign in on ol.io before being to proceed to one of the links for the SN guides?

I would rather, certainly in the short-term, just link to guide specific URLs. For example, the ol.io "Creating RESTful Web Services" guide would link directly to its SN equivalent of https://labs.cognitiveclass.ai/tools/theiadocker?md_instructions_url=https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/creating-a-restful-web-service-with-open-liberty/instructions.md However, the first time they went there, they would be presented with this page: which makes it sound like this flow won't work for the long-term and the user would still need to then login.

[jamiecoleman92]

@mbroz2 So the site that we would link off to would be what you would log into and that would have LTI implemented. I am not sure about having to log in on the OL side if we did not want to link off so I will ask the SN team to see if they know.

[jamiecoleman92]

The above message should go away soon as we are now changing the catalogue page to use the LTI method of starting a quicklab.

[yeekangc]

I am not suggesting that we adopt LTI atm. We should look into it further.

[mdenby]

So here is the first part in Open Liberty.

Questions:

1. Should the user be able to filter by "QuickLab"?
2. Should it be a tag like "Interactive" and "New" on the Guide?
3. Will some guides be both "Interactive" and "QuickLab"? (I assume no...)

Here are three options for the guides page. We could put the link and info in the "Getting started" section. Or the prerequisite section. Or the top under the description.

[mdenby]

Several options for how and where to display the button/text to launch out.

[yeekangc]

I lean toward the last 2 options for the "launch out".

Then, the 2nd design though we will need to have the button and text before users clone the GH repo locally.

[jamiecoleman92]

I think I like the last two also :)

[jamiecoleman92]

@mdenby thanks for the designs. We also need to have a think about how the page to will look on the Skills Network side. They said they should be able to change the colours of the headers, instructions box and add the OL logo somewhere. They are just unable to change how the IDE looks.

[mdenby]

@jamiecoleman92 Definitely! That is my next step :-)

[jamiecoleman92]

@mdenby So the IDE on the right of the first image is the only thing that would be an issue to change.

This image is the page you will be taken to after a user has left the openliberty.io site via the links/buttons in your images above. I think they should be able to edit this page also as the Skills Network team have control over the css of that site. This page is required so we do not have to implement a login on the openliberty.io site and if you click on the Access QuickLab button it will launch the environment.

[jamiecoleman92]

They are happy to chance things like colors, fonts and putting an OL logo on the site but if we wanted to go further and change the layout etc then this might not be possible as a first pass at getting this implemented.

[yeekangc]

@jamiecoleman92, we won't have the login step below anymore?

[mdenby]

I'll work on the intro page but here is the header changed to look like Open Liberty. Can or should we change the colors inside the left panel?

[mdenby]

It seems like the user would select "Launch" from an Open Liberty guide then go straight to the Skills Network page above (or maybe login first?) Would they have to see this screen? (It feels redundant)

Also, do we need to brand this page too? I do like the idea of seeing the OL catalogue here.

[yeekangc]

In my mind, this is how it will (should) flow:

1. Click on button or equivalent on guide page
2. Landing or transition page if necessary e.g. for users to login
3. Actual hosted lab environment

Need @jamiecoleman92 to confirm which page is the one for the 2nd step and what will happen there.

So, I think you got what we need for step 1 and 3, @mdenby. And yes, we should be able to customize the left panel where the instruction (guide text) is.

Good point re customizing the catalogue page(s). We should consider it but it will be a separate item from the work to integrate the hosted labs into openliberty.io since they won't be surfaced through openliberty.io directly.

[yeekangc]

@jamiecoleman92, have you had a chance to look at the above? Thanks.

If the SNL team would like to ensure visibility, let us make sure Melissa understands and take that into consideration. The team can then chime in once we have the design drafts. I can see an indication that the hosted labs are powered by SNL on the branded page(s).

[gkwan-ibm]

I can run either the following by a private browser. Any issue cannot add either link into the guide?

• https://labs.cognitiveclass.ai/login?next=https%3A%2F%2Flabs.cognitiveclass.ai%2Ftools%2Ftheiadocker%2F%3Fmd_instructions_url%3Dhttps%3A%252F%252Fcf-courses-data.s3.us.cloud-object-storage.appdomain.cloud%252Fcreating-reactive-microservices-using-microprofile-reactive-messaging%252Finstructions.md
• https://labs.cognitiveclass.ai/tools/theiadocker/?md_instructions_url=https:%2F%2Fcf-courses-data.s3.us.cloud-object-storage.appdomain.cloud%2Fcreating-reactive-microservices-using-microprofile-reactive-messaging%2Finstructions.md

[jamiecoleman92]

I am not sure what your question is but the top link you provided @gkwan-ibm is the one that uses LTI.

[yeekangc]

Looks like we need to review how things (the pages) will flow here and then, close on the design?

[gkwan-ibm]

@jamiecoleman92 basically, is it a necessary to have a landing page? Can users click on a link/button (either of the links in above), then the quick lab can be started directly including login redirect? Unless, there is additional information that the users need to be known/aware before start the lab.

[mdenby]

Yes, if there is a landing page login--please let me know and I can make it look branded Open Liberty. I'll update the left side of the guide screen and post here. Is there anything else that I can update on this page?

[jamiecoleman92]

@gkwan-ibm & @yeekangc I think I stated this a few times already in the UFO and the designs I created for the flow of pages but yes it is required if we would like to get any metrics out of the system. The SN team are setting up our own portal that we will be able to customise however we like.

[lauracowen]

@jamiecoleman92 (this is maybe a question for the SN team rather than you personally) Why can we only get metrics if we go through a visible landing page? As long as the user logs in, why would it matter? It would be a much smoother, slicker experience for the user if they didn't get thrown to a different landing page when they're just wanting to start the lab.

[jamiecoleman92]

@lauracowen so I think the main reason is that the portal/landing page is the site that gets the metrics as opposed to the environment itself. We could go straight to the environment but that has no mechanism for gather metrics. I think we could possibly bypass the portal but we would lose any ability to get metrics in the future.

[jamiecoleman92]

Essentially the two options that was provided are to implement LTI on the Openliberty.io site or use a landing page/portal and as we decided to not go down the LTI route then this was the only viable option. I am just trying to get public github username of the team lead for the SN team so he can chime in.

[jamiecoleman92]

@mdenby No that is about it in regards to what you can customise on the environment page. We may not have so much control over the instructions panel but I will let the Skills Network team chime in on this to see if the above is possible as it does look really good!

[gkwan-ibm]

@mdenby @jamiecoleman92 When design the landing page, may consider a single page instead of multiple, so that the maintenance work will be easier.

The guides site can do like https://openliberty.io/guides/?search=jpa, I am thinking why not the landing page do similar (of course not for search)

[mdenby]

Here are a couple of versions of the course landing page. I'm not sure about the "Edit this page" button. Working on the login page now and will post shortly.

[mdenby]

So my question with the login screen is around the content and wording--will that need to change? I've simply replaced the logo at the top. (Did we ever find out about the catalog page? Should I rebrand that too?)

[jamiecoleman92]

@mdenby Thank you so much for the above designs. The Login page might not be something we can change as it is no included in the landing portal but I will ask. The edit this page button should only be available to admins so users should not see that. I will talk to the SN team and see if they are able to create a custom login page for us.

[jamiecoleman92]

In regards to the catalogue, we will want it redesigned but that is not covered in the scope of this work at the moment. Once we have the first few guides in production we will review the content page for a redesign as it will not be part of the user flow for this work item.

[yeekangc]

+1 to update the wording on the login page. We should clean up some of the wording on the landing page too.

[jamiecoleman92]

@mdenby so it looks like we should have full control of the login screen but it will not be like the one above. They are adding in what is needed in the back-end for users to also login with GitHub, Google, FaceBook and LinkedIn. They have now set up a basic portal for us and if you follow the link you will see the flow and what the current Login screen looks like: https://openliberty.skillsnetwork.site/quicklab/ol-masterclass-1 . If you could create a design based off that login screen with the addition of the social login buttons that would be great. You will need to create a new account to use this new portal.

[jamiecoleman92]

[mdenby]

@jamiecoleman92 How about this for the new login page with the social buttons.

[jamiecoleman92]

Thank you @mdenby. I think it looks great and if we manage to get the portal login to look like the above I will be very happy. @yeekangc are you happy with me to use the above in the UFO?

[mdenby]

@yeekangc @jamiecoleman92 Here is what the header would look like (following the header pattern of other IBM products) I'll add a style guide for fonts and colors later this week.

[steven1046]

@mdenby , do you have the icon for the skills network button?

[mdenby]

@steven1046 I just wrote "Skills Network Labs" in IBM Plex Sans. I can ask @jamiecoleman92 for the actual button if you need their specific version.

[steven1046]

Thanks, i got the icon from Gilbert!