marri13

Exploring the New Vapi Editor

Blog Post created by marri13 Employee on Mar 20, 2015

Vapi has a new snazzy user interface written in angular.js and to go with this is an improved editor.

 

The VAPI editor is where you can create and edit the request-response pairs that make up a virtualized API. These may have been generated from a raml or swagger file, imported from GitHub or they can be just typed in manually.

 

A pair consists of a number of elements:

  • Name : all pairs have a unique name which is auto-generated but which can be changed to suit you.
  • Http method and resource. This is used to compose a REST URL.
  • Headers: the usual http headers
  • Request: this contains the http message body, if any.
  • Response: this contains the text returned from VAPI when the client you are working with sends it the corresponding request.
  • Groups: pairs can be placed in groups which are simply a means of organizing pairs that are related in some way. When you create an API manually, all pairs are placed in a default group but you can move them to new groups. If you import from a raml or swagger file, the groups correspond to the resource paths specified in the file (eg /search/code).

 

The editor looks like this:

 

blog-annotated-angular-editor.jpg

On the LHS the Pair List on the left side shows the sorted list of request/response pairs in the API. As an example, this shows the Github api as imported from a raml file.

 

  • If the list is long then it can be filtered to show the pairs you are interested in (click the filter button to show the filters, if not visible). The drop-down box allows you to filter by group. The filter field allows you to filter by a string which is matched against pair names.
  • You can use the row of green buttons to add a new new pair with sample data, move a pair to a new group, duplicate or delete a pair.
  • You can also add and delete headers for the request and response. By default, these are hidden to save screen space. Click the > button to show them.

 

On the RHS, the request panel shows the http method and resource. It also shows the actual url that a client app under test can use to invoke a response from the virtualised service that is simulating the API that it wants to use  It also shows the headers and the body of the http message, if any.

 

The response panel shows the http response code, headers and message body that is sent back when the above request is made.

 

The body fields allow for:

 

  • Free text input and editing.
  • Syntax checking for JSON. VAPI warns you of problems but does not stop you creating an API with bad syntax. This may be what you want!
  • XML syntax highlighting (but no checking yet).
  • Auto-closing of brackets.
  • Block folding – especially useful for XML or JSON objects.
  • Find text and regular expressions (ctrl-F).
  • Find and replace (ctrl-H).
  • Indent, outdent: Tab, Shift-Tab
  • Undo: ctrl-Z

 

These are the most important keyboard shortcuts; the full set is available here: https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

 

Finally, you can resize the pairs, request and response panes by dragging the boundary lines in the usual way.

 

Have fun!

Outcomes