HANA XS development with the SPS07 Web IDE (focus on debugging)

[kai-christoph_mueller]

Intro

With the upcoming release of HANA SPS07 all developers will be enabled to use a new lightweight development environment which has significantly improved to the prior version. Supporting the development of this tool I had the chance to get my hands on a preliminary version. So this is not an official announcement of anything. If you are looking for the official announcement, please watch the activities of our Product Management (thomas.jung).

In this Post I am now going to highlight some differences to the former Web IDE and look at outstanding features of the new tool.

Setup and installation

In SP6 there have been two different web tools. The 'Editor' had some features which have been missing in the 'IDE' , and the other way around. So we decided to take the best out of both of them and come up with one integrated, new UI. Nevertheless we did not forget to develop new features as well.

You will see these four tools now:

• IDE/Editor
• DB schema browser (aka Catalog)
• Security
• Trace analysis

Installation

In it's SPS06 version the Web IDE came as non-automated content and you needed to set it up on your own. As we changed the delivery model to automated content you do not need to install the tool explicitly anymore. It is installed by default. If you are already running SPS07 or above, you can access it at:

http://<hostname>:80<InstNo>/sap/hana/xs/ide/

Setup

For security reasons we introduced some new roles. According to your development scenario the administrator needs to assign some of them to the development user. The role 'sap.hana.xs.ide.roles::Developer' is a super user roles, as it contains all the others. So if you have got this one, you do not need any of the others at all.

This is a more details description of the new roles:

Role name	Description
sap.hana.xs.ide.roles::Developer	This is the super user role. It contains all the other roles and provides access to all sections.
sap.hana.xs.ide.roles::EditorDeveloper	This role provides access to the IDE/editor section.
sap.hana.xs.ide.roles::CatalogDeveloper	This role provides access to the catalog section.
sap.hana.xs.ide.roles::SecurityAdmin	This role provides access to the security section.
sap.hana.xs.ide.roles::TraceViewer	This role provides access to the trace section.

In addition the debugger role enables the developer to debug XS server side JavaScript source code. Any developer will be grateful to be able to do so :wink:

• sap.hana.xs.debugger::Debugger

You can enable the developer mode and xsjs debugging in the system in the Studio or via SQL

Using the Studio you can enable the debugging via

• Go to the 'Administration perspective'.
• Double click your system.
• Change to the tab 'Configuration'
• Create a new section named 'debugger'
• Provide a property for this section
  • name: 'enabled'
  • value: 'true'

The developer mode is enabled (in the same place) via

• Create a property below the 'httpserver' section
  • name: 'developer_mode'
  • value: 'true'

Taking it all together, the easiest thing to do all this is to run these SQL statements (also attached):

-- enable xsjs debugging and developer mode

alter system alter configuration ('xsengine.ini','SYSTEM')set ('debugger','enabled')='true' with reconfigure;

alter system alter configuration ('xsengine.ini','SYSTEM') set ('httpserver','developer_mode')='true' with reconfigure;

-- create a development user and assign required roles

CREATE USER <REPLACE_ME> password topSecret;

CALL GRANT_ACTIVATED_ROLE('sap.hana.xs.debugger::Debugger','<REPLACE_ME>');

CALL GRANT_ACTIVATED_ROLE('sap.hana.xs.ide.roles::Developer','<REPLACE_ME>');

CALL GRANT_ACTIVATED_ROLE('sap.hana.xs.ide.roles::CatalogDeveloper','<REPLACE_ME>');

CALL GRANT_ACTIVATED_ROLE('sap.hana.xs.ide.roles::EditorDeveloper','<REPLACE_ME>');

CALL GRANT_ACTIVATED_ROLE('sap.hana.xs.ide.roles::SecurityAdmin','<REPLACE_ME>');

CALL GRANT_ACTIVATED_ROLE('sap.hana.xs.ide.roles::TraceViewer','<REPLACE_ME>');

Development workbench

If you enter the workbench at it's base URL ( http://<hostname>:80<InstNo>/sap/hana/xs/ide/ ), you will see this:

You can navigate to the tool of your choice via the central entry screen or access them directly at:

Tool	Access URL
IDE/Editor	/sap/hana/xs/ide/editor/
Catalog	/sap/hana/xs/ide/catalog/
Security	/sap/hana/xs/ide/security/
Traces	/sap/hana/xs/ide/trace/

IDE/Editor

The Editor is the most powerful tool here. You will find 'a lightweight, browser based IDE to create and edit XS development objects'.

I like the enhanced, out of the box reliably working XSJS debugger the most. Nevertheless code completion, syntax highlighting and all those handy keyboard shortcuts (let me know if you miss some) make this a really productive IDE. This holds especially true as you do not need to keep any local installation in sync with some server version anymore. Furthermore checking in and out code over and over is part of the past now.

So start thinking about what to do with all that gained time :smile:

Miscellaneous features

Let's have a look at the features in a more formal way.

This is what you can access via the buttons tool bar:

• Use a template (see section below).
• Format the code.
• Open Code in a separate Window.
• Save / Save all.
• Search (see below).
• Setting (Appearance and inactive object handling).
• Shortcut to FAQs and keyboard shortcuts.

Coding

As the new IDE leverages the ace JavaScript code editor, it still comes with a lot of handy features:

• Syntax highlighting
• Code folding
• Code formatting
• Keyboard shortcuts
• Code checks (client and server side)
• One tab / separate window per open file

Code completion

Looking at code completion there are two different kinds. The local code completion (accessible via <Ctrl>+<Space>) provides access to

• local variables
• local methods
• keywords (like this, undefined, NaN, ....)
• snippets
  • no more need to type e.g. the complete 'for loop' syntax yourself

This one comes handy when you want to code very fast and/or want to be sure not to introduce typos in your code.

And there also is another one. The XS backend API code completion (accessible via typing '$.', followed by <Ctrl>+<M>). It gives you access to all the XS objects (including sub objects) being provided:

• import
• web
• request
• response
• session
• trace
• db
• net

So watch out you're not asked to return your second monitor as the XS JavaScript API has not to be open all the time anymore :wink:

Inactive save and execution

Using the settings button you are now able to save code in an inactive state and execute it. Doing so you will be the only one to see ('Enable inactive save' switch) and/or execute ('Enable inactive object execution' checkbox) code. This is a quite useful feature in a distributed development environment, in which you should try out things before releasing them to others.

Templates

If you already developed XS applications you might have a good collection of templates for recurring tasks - available at your local machine. You can (still) drag them from your desktop and drop them in the drop zone of the web IDE (which is enabled via selecting a package).

To furthermore ease your life, we included the most important templates into the IDE itself. There are more  to come and we also started working on a feature to create and use self defined templates. For the time being, let's look at the already available templates.

Some templates can be accessed when creating a new applications (via node 'Content' -> right click->'Create application' 😞

• HANA XS Hello World
• SAP UI5 Hello World
• Simple Mobile Application
• Blank Application
• Trace Viewer Demo

Others can be integrated into existing code (first button in the menu bar). Depending on the open file type, you will see some of the following:

• XSJS filetype (.xsjs)
  • Default request/reply pattern (see screenshot)
• HTML file (.html)
  • Empty SAP UI5 frame
  • SAP UI5 Goldreflection Shell
  • SAP Mobile Frame
• JavaScript file (.js)
  • SAP UI5 JavaScript View
  • SAP UI5 JavaScript Controller

Search

If you are working in a big project you may know something was written ...somewhere... but how to search for this before SPS07 without interrupting your workflow? We now provide access to the search engine of HANA via the IDE! You can either search the repository for a file (via the toolbar button 'Search'), or you search for code snippets (by selecting a container object - content or package folder) in the navigation area followed by selecting 'Search Text'.

Lifecycle management

You have got full access to the repository and are able to manage all these different life-cycle management aspects of your code in place:

• Create and delete packages.
• Create and export delivery units.
• Assign and unassign packages to/from delivery units.
• Create files.
• Create applications (using templates if you like).
• MultiFile Drop Zone:
  • You already have got some files on your Desktop and want to deploy them?
  • Just select the target package in the IDE and 'drag and drop' these files using your mouse from the Desktop into the IDE's 'drop zone'!
• Version control for files ('Right click' -> 'Versions'):

Debugging

Getting to the point of having a running debugging session for XS server side JavaScript code has been a quite challenging task up to now.

The server side component (using 'Web Sockets', a feature you can be looking forward to) now comes together with the 'client component'. So protocol compatibility became much easier to achieve - without the need for up-/downgrading anything on your local machine.

Before deep diving into the debug part I would like to point out two important facts in this context (these are the same ones as in the setup chapter):

Developer mode

Enabling the developer mode by changing the servers configuration gives you much better error messages than '500 - internal server error'. The latter one is acceptable for a productive environment where you might not want to show the internals of your implementation. It is nevertheless making things complex during development and you do not even receive an advantage for that drawback. So let's make HANA more chatty by executing this SQL statement:

alter system alter configuration ('xsengine.ini','SYSTEM') set ('httpserver','developer_mode')='true' with reconfigure;

Another way is setting the parameter 'developer_mode' in the httpserver section of your xsengine.ini file via the Studio (see the setup section for details).

Debugger enablement

The server side component for debugging XSJS code is not enabled by default. If you see something like:

16:06:29 >> WebSocket connection for debugging closed.

16:06:33 >> WebSocket connection is not ready for debugging.

in the Web IDE, you can be sure it is not enabled.

To change this, you can either create a section 'debugger', holding a parameter 'enabled' with value 'true' in your xsengine.ini file (maybe check the setup section):

or you execute this SQL statement:

alter system alter configuration ('xsengine.ini','SYSTEM')set ('debugger','enabled')='true' with reconfigure;

How to use the Debugger

Once you enabled debugging, the only thing you need to do for a running debugger session is to set some breakpoints and to finally run the server side Java Script code.

You can set breakpoints via

• Open the server side JavaScript (XSJS) file you want to debug.
• Click into the line number column of the statement you want to stop at.
  • Set as many breakpoints as you want.
  • As a result you will see a red arrow in that column for everyone of them.
    • See the screenshot to the right.

The next thing you want to do is to call that file via one of these methods

• Click the green arrow in the button toolbar.
• Push the 'F8' key.
• Call another file, which calls this one (e.g. a client side JavaScript file).

Once the script is executed and your marked statement is reached, you will see another, blue arrow inside the red, bigger one (screenshot below).

Right to the source code there is the debugging area, showing you all the current runtime values of existing variables. You can deep dive into any existing sub elements:

Using the buttons on the top of this window:

you can 'Resume', 'Step In, Over and Out' (of the current script execution).

So you can control whether to make the script run to the end or the next breakpoint, step over a function, go into the body of a function or leave the current function body. Follow the blue arrow - it will always show you which will be the next statement to be executed.

While all this gives you a pretty good overview of what is happening, we still did not look at the most powerful feature:

You can write your own statements being executed immediately on the server. This way you can change variables and hereby the runtime behavior of the server side JavaScript file.

This feature is available via the evaluate expressions button:

If the according package is configured to run in 'info' trace level mode or below, the above statement will log 'great' immediately. You may come up with more meaningful loggings :wink:

Catalog

The catalog section serves as a very good entry if you need to check things in the database. There is a SQL console, which you can use to send SQL statements to the engine and an outstanding feature of this SQL console is the code-completion:

If you start typing 'SELECT * FROM <SchemaPrefix>' and hit '<Ctrl>+<Space>', you will see a list of all available objects, starting with that particular prefix.

After selecting an object, containing other objects (like a schema), you simply go on with typing and/or hit '<Ctrl>+<Space>' again to see available sub-objects.

Other than that you can create sequences and generate insert or select statements.

Creating a sequence:

Browsing a table:

Security

The security area provides a lightweight access for basic user management tasks. You can create roles, assign those to users and create users themselves:

New role dialog:

New user dialog:

Traces

The trace files are sorted by master process now, allowing you to easily find what you are looking for. Most likely this will be the latest file below the xsengine node.

The most important feature right here is setting the desired trace level for your package:

Conclusion

While I think the HANA XS Web IDE has not already reached it's full potential in some areas, you have a powerful tool available now.

I am looking forward to see a lot of new innovative XS apps and hope the Web IDE can help you here.

Stay tuned for more

Kai-Christoph