Cloud IDE Codenvy

Nuxeo and Codenvy have joined forces to create the Codenvy-based Nuxeo Factory that allows Nuxeo Platform developers to start a Nuxeo Development Environment with just one click. We showed you how this integration came together in a previous blog.

The Codenvy-based Nuxeo Factory generates an IDE instance for Nuxeo with:

• A guided tour of the interface and Nuxeo Codenvy customizations
• A Nuxeo Java project to create a bundle
• A Codenvy Runner (Nuxeo server to run your build)

To help get you started, I’ve created a tutorial inside the Nuxeo Factory using the guided tour.

1. The factory can be started using https://codenvy.com/f?id=pqc56f54rim6rm1u

1. The factory opens directly with a new sample operation that you can customize
2. Once customization is done, the green arrow on the top of the screen can be clicked to deploy a Nuxeo server

1. Finally, you can go to the Nuxeo server instance by clicking on the blue link below

That is all you have to do! To make it even easier, we have the guided tour to walk you step by step through the process.

Guided Tour

If you want to get a little behind the scenes, a guided tour is defined through a json file and its URL can be set. Here is an example.

And what it looks like from a schema perspective:

The guided tour (represented by bubbles in the Codenvy IDE) describes the steps to build and run the code. The bubble content or the placement can easily be customized. Here is the Nuxeo Codenvy Guided Tour json file:

Here is an example of how a step can be defined:

"steps": [
    {
      "title": "<b>Nuxeo Platform</b> Project Template",
      "content": "Welcome in the <b>Nuxeo</b> Codenvy Template. We have instantiated for you a project template. When you build it, it produces a jar that can be deployed on a <b>Nuxeo Platform</b> instance. You can use Codenvy to implement the custom java logic that you would not be able to design and configure using <b>Nuxeo Studio</b>, the configuration environment.<ul><li>[https://connect.nuxeo.com/register/#/ Nuxeo Studio Trial]</li><li>[http://doc.nuxeo.com/x/CBU5AQ Getting Started]</li><li>[http://doc.nuxeo.com/x/EIAV Nuxeo Studio Documentation]</li></ul>",
      "element": "gwt-debug-projectExplorerTree-panel",
      "placement": "RIGHT",
      "actions": [
        {
          "action": "openfile /src/main/java/org/nuxeo/sample/SampleOperation.java"
        }
      ]
    }

In this step, you can:

• Customize the content with HTML style
• Add links directly into the bubble content
• Define placement according to the target “element” and the relative position around it

The guided tour gives the ability to place the bubble on several UI components. You can add actions such as “Skip” or “Next”.

Finally, the Codenvy Guided Tour lets you execute processes by clicking on actions such as:

• Executing a runner.
• Opening a file into the editor.

{
      "title": "Start a Nuxeo Server and Deploy your Customisation",
      "content": "This button can be used to build the project and deploy it on a Nuxeo Platform instance started in a docker container in the cloud so that you can test your development. If you click on the “Run” button below, server will be automatically started.",
      "element": "gwt-debug-MainToolbar/runApp-true",
      "placement": "BOTTOM",
      "xOffset": "-17",
      "actions": [
        {
          "action": "trigger runApp"
        }
      ]
    }

By clicking the “Next” button, a Nuxeo server starts showing how to use the factory. It’s that easy!

Start your tour of the Nuxeo Codenvy Factory

You can find more technical information about the Nuxeo Codenvy generic factory here: http://doc.nuxeo.com/x/5Bk5AQ Codenvy Guided Tour documentation:http://docs.codenvy.com/project-lifecycle/ Codenvy Generic Factory documentation: http://docs.codenvy.com/user/tutorials/factories/