After the release of the new OpenRouteService dashboard the team has worked on a new interactive API documentation application named API Playground , that allows the users to explore all the OpenRouteService API services, parameters and responses in an intuitive and easy way. It is possible run requests, see the response in a map, table or navigable JSON document, according the response type, or even download the response.
The API Playground is fully integrated with the new ORS Dashboard so that once the user is authenticated the valid API token linked to the account is automatically loaded in the request forms.
A first key aspect of the API Playground Web App is that it is actually a dynamic API documentation parser and builder. The elements of the interactive documentation are built based on an OpenRouteService API documentation file. The app can also handle multiple versions of API documentations so that when a new API version is released it is available to be selected by the user, being possible to explore the playground and easily switch between versions.
Notwithstanding the fact of having the API resources, endpoints and forms being dynamically built the app was designed to deliver also an intuitive and responsive interface, keeping the polished look and feel found in the dashboard. To achieve this solution we have created new modules to our single page application using the Vue.js framework and Leaflet.
A second important aspect is that the API Playground is completely responsive and adapts its elements according the available resolution, cascading the columns and navigable elements based on available space. In addition it was created also a custom box component that allows the users to “maximize/minimize” sections of the Web App so that the user can focus on what is important for a given interaction.
- New interactive documentation web app.
- Integration with the dashboard to load user’s token key
- Results in table, JSON, GPX or map
- Navigable json response display
- Download the response as a JSON document
- Code samples updated on the fly for different languages
- Map component with support to display routes, places/points and isochrones
- Support for Makdown describing fields’ help and responses
- Beautified code, GPX, JSON and code inside markdown documents
- Selectable/restricted parameters input avoiding providing wrong values
- Parameter input fields and help accessible in in the same view
- Maximizable form, help, map and other responses results view
- Colorized URL, param and values, making it easier to distinguish them
- Single click to copy action URL
- Response time for each request
- Explore multiple versions of the API