In today’s development ecosystem, it’s common to see a microservice based architecture. The days of monolithic code blocks are coming to an end, and API usage is growing even faster. But building an API doesn’t have to be an intimidating task. You can use your knowledge of JavaScript with the help of Velo by Wix to build your APIs in record time.
Velo by Wix is a full stack web development platform on top of Wix’s drag and drop UI editor. It opens up a database that you can use to store and record data with a robust set of APIs that can be used to access not only those databases, but your website’s UI and backend.
Velo APIs give you access to expose your site as a service via HTTP Functions. This allows you to easily create a REST service for your site using your database as your mock and live data, or expose functionality from your site for server to server communication. The Velo HTTP Functions API makes it easy to write javascript code to create your exposed functionality. The API includes methods to create GET, POST, PUT, and DELETE requests. This functionality comes out of the box with the Velo HTTP Functions API and doesn’t require any additional header setup for the requests to work. You can also add server responses without additional coding, such as an OK 200 response or error responses such as bad requests or forbidden.
For this example, you will need a Wix Site. Go ahead and sign up for one. It’s free! You will also need a simple database of the planets. You can download the CSV for the database here.
To create a REST API for your Wix Site or database, you will need to enable Velo by turning Dev Mode On in the top menu bar of the Wix Editor.
Once Dev Mode is on, you’ll have access to your code files. In your code files, under Backend, create a new file called http-functions.js.
This file will automatically populate with some sample code to create a sample GET request. Feel free to keep it for reference or go ahead and remove it all EXCEPT for the import line at the top. We will need this to get access to our request and response functions when returning our APIs.
To create a GET request, we need to define our function with a GET prefix. The name of the function will then be the description of what we are getting. For example your function name may look like get_topPlanet.
Once we have the function definition, we’ll want to start defining our response object. Since the query returns a JSON, we know the response will be in a json format. Let’s create a response object with a header property of content type JSON.
We need to actually retrieve the data from our database to complete our response object. In this case we’ll need to query our database Planets collection and return the most popular planet. To query the database, we’ll need to import our Wix Data API first. At the top of the file, add a new import for wix-data.
Now inside our GET request, we want to query the database. Since this is the data we want returned from the API call, make sure the query is returned.
If you are new to Wix Data queries, it is important to note that queries are asynchronous functionality, so when the promise of the query resolves, this is where we add in our response header handling. If the promise is fulfilled and we get a data result, we first want to add the data to the response object as the body.
Then we will want to use the OK function to add the appropriate response headers and return a 200, OK. Make sure your query is returned as well.
Here you could also add error handling. If the promise is rejected, you can look at the error and return a bad request or forbidden error along with the error message so the user can try and debug.
Once our request is ready to go, we need to publish our site to start testing. While we can test using the browser or through our Wix site, it is important to note that this will test as an admin user for your site. Using a tool like Postman will enable you to test as a regular level of user permissions.
Postman is a collaboration platform for API development. Postman enables you to streamline every stage of the API development process. It includes tools to test, document, and monitor your APIs.
If you don’t already have Postman, go ahead and download it. It’s free!
Open up Postman and go ahead and create a new request by clicking the (+) button to create a new tab for a request.
To reach your Velo API for Top Planet, you’ll need to form the proper URL by taking your site name, adding _functions to the url and then pointing to your function endpoint.
Paste or type that URL in the request URL box next to the request type. Leave the request type as GET since we built a GET Request in Velo. And then hit Send!
Now your API should give you the Planets from our database!
The cool thing about Postman is not only can we test our APIs, we can also save and reuse values from these calls using variables. Maybe we need to send our top planet to another API. We can take a look at how chaining these API calls together might look by storing the values of one API call in a variable and using that variable in the subsequent call.
To store a value from an API call as a variable in Postman, we’ll go to the Tests tab of the request. Here we can write scripts that will execute when a response is returned so we can access the response values. You can get and set Global, Environment, and Collection level variables. Since I don’t have a collection set up for this call but I do have an environment, I am going to use Environment level variables. If you have a collection set up for your requests that are related, you can use Collection variables. If you don’t have collections or environments set up, you can alway use globals.
Postman has snippets to help us out, so I am going to choose the Set Environment Variable snippet to get me started.
This will give you sample code for setting a variable. Set the variable key to something more descriptive like topPlanet.
To access the response body JSON, we’ll have to use the Postman APIs. Postman APIs do autofill which will help us in constructing our variable value. So first start by accessing the response and then the JSON method.
Then we have to index out the value we need, like the planet name.
Next time we send the request, our variable will get set.
To access it in our next request, we can go one of two ways. We can either use the Pre-request Scripts to get the variable value and assign it to as a header or query parameter value.
The other way is to assign the variable in the GUI version of the Headers or Params as the VALUE.
Now when we send this request, it will check the latest value of the topPlanet variable and use that value for the request. This helps us test workflows that need to pass data from request to request or for subsequent requests that require authorization where we can store auth keys as variables. You can automate the processes by saving your API requests into collections and storing the variables you need across the collection as variables. This way every time you make a request in that collection, you’ll be able to save yourself some headaches and automatically have updated data for your data flows without any additional setup!
To learn more about building APIs with Velo, check out some of these resources:
To learn more about variables and scripting with Postman, explore these other resources:
