Heads up! Web Development experience is recommended for this guide. We will not cover the set up and specific configuration of an Express server. We assume you have basic knowledge of APIs, HTTP GET requests, as well as EJS (Embedded JavaScript).
Many Node applications are built using the Express framework for developing fast, robust web and mobile applications. We are going to demonstrate how to make API calls using Express with Usabilla’s Node.js Client. Be sure to follow the link to the Github page with additional instructions for configuration and examples of usage.
You can start your project by using the express-generator command in your Terminal to quickly scaffold a project. For this tutorial, we will not be using any scaffolding and we will build the server.js file from scratch.
Before we begin, you will need your API keys in order to make /GET requests from our API. If you are an Administrator, you can find your API keys in your account settings. Otherwise, you can reach out to your account Administrator to receive the keys.
Once you have initialized your app and have finished installing the dependencies you require, go ahead and install the Usabilla Node client via NPM:
$ npm install --save usabilla-api
Next, import the module into your project, create a new class of “Usabilla” and enter your API keys as the parameters.
NOTE: Remember, NEVER share your API keys! Always store them in a secret file or encrypt them. For the sake of demonstration we are storing them in the server.js file, but it is not best practice.
For our first GET request, we will retrieve the total number of buttons on our account. We will then define which route we want to serve the incoming JSON. In this example, we will simply define the route “/buttons“. For now we will just console.log the total number of buttons to make sure we retrieving something from the API. Your code should look something like this:
If your console prints the total number of buttons in your account, you have successfully communicated with Usabilla’s API!
But a console message is not enough for our app. By now, you are probably testing in a local environment (in this case, my app is listening on localhost:3000). If you navigate to localhost:3000/buttons, you should see the JSON response sent from the API. Now that the data is in JSON format, we can manipulate the data however we wish.
From here you can render the data for the browser however you choose, whether you use a view engine, our a front end framework like React.js, it is up to you! You can make AJAX or Fetch requests at the /buttons path as well.
Let’s go ahead and render this data into something a little prettier. For this tutorial we will be using the EJS View Engine to inject the data from the API into our application’s HTML. Be sure you’ve installed your dependencies for EJS. Let’s go back to our server.js and assign the JSON response to JavaScript variable. To do this. We will use Express’ render method, and serve the variables at the ‘/‘ index route.
Now we have the variables title, message, and data available for us to use at the index route. Next, since we are using EJS, we will create a file called index.ejs and start building the front end code for our app there!
In index.ejs we pass in the aforementioned variables and inject them using EJS’ Clown Tags
<%= variable %>
Remember, ‘data” here holds a JSON response which is an array, so we have to loop through the values in the array to render each one. We will place them into a table element to get ourselves organized, and add a touch of CSS behind the scenes for style.
With all of this done, now it’s time to visit localhost:3000/ and see what if our data is rendered as HTML.
Success! Now instead of the daunting JSON, we converted the data into an easy to read format. Displaying the data in the browser as HTML is called rendering, which is just one of the ways the API can integrate with your application; with a few extra steps you can push the data to another platform’s API if you wish!