Blog

API Express visual editor

Appery.io API Express make it fast and simple to connect to an enterprise data source and expose it via a REST API. With API Express you can quickly create an API for:

• A relational database
• A WSDL service (SOAP)
• An existing REST API

In this tutorial, I’m going to show how to expose an existing WSDL service as a REST API and then build a mobile app using the API.

The WSDL service you are going to use converts temperatures. You can convert Fahrenheit to Celsius (and Celsius to Fahrenheit). You can find service description here.

1. In Appery.io, click on the API Express tab.
2. Click Create new project. Name the project TempConvert and click Create. A blank API Express project is now created.
3. To expose a WSDL service via a REST API you are going to use a visual service editor. To launch the visual editor click new service link.
   

   API Express visual editor for custom services

   Every service has service input (top circle) and service output (bottom circle). On the left-hand side are various components you can drag and drop into the flow.

4. You need to use the SOAP component. Select the SOAP component and drag and drop it inside the box in the flow
   

   SOAP component

5. Select the SOAP component and enter this URL http://www.w3schools.com/xml/tempconvert.asmx?WSDL for WSDL URL in Properties.
6. Click Retrieve link to learn about this service.
7. After a few seconds, open the Service list and select TempConvert.
8. For Port, select TempConvertSoap12 option.
9. For Operation, select FahrenheitToCelsius. Once you make this selection the Request XSL will be automatically loaded.
10. In the Request XSL input, scroll through the response until you see this line:
    <ns:Fahrenheit>?</ns:Fahrenheit>
11. Replace the ? with <xsl:value-of select=”AE/PARAMS/QUERY/temperature”/>. It should look like this:
    <ns:Fahrenheit>
       <xsl:value-of select=”AE/PARAMS/QUERY/temperature”/>
    </ns:Fahrenheit>

The temperature to convert will be entered as the input to the service.  It will then be passed to the SOAP service. There is just one more thing to do and that’s to setup the service to accept one input parameter: temperature.

1. Select the input component (top circle).
2. For URI template enter tempconvert.
3. With the input component still selected, under the QUERY PARAMETERS section, add a temperature parameter of the String type.
   

   Setting service input

4. You are done. Click Save. You will be sent back to the main API page.

Now it’s time to test the API service you just created.

1. From the main API page, click test link.
2. Enter a temperature  to convert and click the Test button.
   

   Testing the API

   In the above screenshot the service is tested with 98 degrees Fahrenheit as the input value.

You can also copy the service URL and test it right in the browser (paste the URL into the address location) or in your favorite REST API client.

Testing the API directly in the browser

Now that you have exposed a WSDL service as a REST API, it will take little time to build an Ionic mobile app that looks like this:

Ionic app

You have seen how fast it is to take a WSDL service and expose it via REST API. Once any data source is exposed via a REST API, it’s easier to build a mobile front end to the service. Want to try this yourself? Sign up for an Appery.io account and build your first app.