Introducing Open in Cloud Shell, a new way to create frictionless tutorials
Marc Cohen
Developer Advocate
If you’ve ever created any sort of interactive content that involves code—a tutorial, codelab, a demo—you know that setup and installation can be the most time consuming and painful parts of the experience for your users. This is also where you stand the greatest chance of losing your audience—in today’s fast paced world, onerous prerequisites can trigger a high bounce rate.
In this article, we’ll describe a new feature of the Google Cloud Platform (GCP), Open in Cloud Shell, which makes setting up tutorials and Github repos simpler, faster and more engaging for your users — in other words, more frictionless.
For a real world example, check out any of the Google node.js samples, like the one shown above for the Video Intelligence API sample.
This capability relies on Google Cloud Shell, an on-demand interactive shell prompt running in the cloud. Cloud Shell requires no setup or maintenance on your part, since we automatically allocate and maintain the underlying VM for you.
A year ago, we added the Cloud Shell Editor, which adds a cloud-based IDE into Cloud Shell, making it easy to edit projects alongside an interactive command line, all hosted in the cloud.
And now, with Open in Cloud Shell, your users can automatically open a cloud shell, complete with a run-time specification of a Git repo to auto-clone, by clicking a link or pressing a button. For example, adding this link to your tutorial:
<a href="https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/googlecodelabs/your-first-pwapp&page=editor&open_in_editor=README.md">
<img alt="Open in Cloud Shell" src ="http://gstatic.com/cloudssh/images/open-btn.png"></a>
renders a button that:
- opens a cloud shell session
- automatically clones the
your-first-pwapp repo - loads the project into the cloud editor and
- opens the README.md file in an editor tab
For all the details about this feature, see the public documentation here.
A few examples
Whether you’re writing blog articles, codelabs, webpages, Github Readme files, or any other form of interactive content, this feature offers the ability to significantly reduce startup friction for your users. Let’s take a look at a few examples.Webpage
Add a link like this to your page:
<a href="https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/marcacohen/gcslock&page=shell">
<img alt="Open in Cloud Shell" src ="http://gstatic.com/cloudssh/images/open-btn.png"></a>
Resulting in the following:
Github repo
You can also add a similar button or link to your repo’s README.md (or other markdown file) using syntax like this:Resulting in the following:
Google Codelab
Codelabs are authored in Google Docs with specific formatting rules. By adding the following section (or a variation thereof) to your codelab source doc, you get a one-click setup to a cloud hosted shell, complete with integrated code editor and web server, pre-cloned repo and other features:Getting set up
Open a development environment in Cloud Shell Click the following button to open a cloud shell with all required source code and
access to a built-in code editor:
Resulting in the following:
In the above example, one button press replaces instructions to manually install the git tools, clone a source repo, install and operate a local web server and have access to/and knowledge about how to use a local text editor/IDE. All of those functions and more can now be hosted in the cloud!
We think Open in Cloud Shell is a really handy feature for anyone creating or consuming instructional resources based on GCP. You can read more about this feature in the Open in Cloud Shell documentation. And let us know what you think via the Feedback link on the bottom of the feature documentation page!
