Getting Started
To illustrate how to use Whisk’s API, we’ll take a look at the search API endpoint as an example. You can search for recipes based on a phrase in this live demo. Here’s what Whisk will return when searching for “pita”.
Inspecting the live code
The code for this example is hosted on Glitch, a site for developing and deploying Node.js apps. It's easy to copy an app on Glitch and to "remix" it to suit your needs. You can inspect the entirety of the code from this project by clicking the fish, and then clicking “View Source”. You can also make a copy of the app to edit and make your own by selecting “Remix on Glitch”.
Token security
To use the Whisk API, you’ll need a token to authenticate. To avoid others masquerading as you - you shouldn’t include this token in a public-facing site. On Glitch, secrets can be saved in a secret .env
file which isn’t copied to remixes of the site. In this demo, this is how data is transferred without exposing the token:
The browser sends a POST request to the back end at /search
The backend then sends an authenticated request to https://graph.whisk.com/v1/search
and forwards the results back to the browser.
Because the token won't be copied when you remix this app, you'll need to generate your own token, and paste it into the .env
file The API call The following snippet is how we call the Whisk API. You'll see a GET request with parameters encoded in the URL. Notice the Authorization
header is where the token is added to the request and its value should look like the following "Token isUafj9s8dfja98dxHAP1".
Parsing the results
The above API returns a JSON object with 25 recipes with about 10 properties each. In this demo we only use the name of the recipe, a link to the original recipe site, and an image. To handle the data, I personally use TypeScript, so whenever I access an API that returns JSON, I paste the resulting object itself into json2ts which generates a type definition from example data. This gets me auto-completion and type checking. You can also refer to the API response docs and the swagger API documentation.
Example data
For example, here's a recipe I found when searching for "sandwich".
Rendering the results
The website you reach in the demo is a Vue front end, which renders a list of results by accessing the content
for the name
of the dish, and the images
.
You can find the following template in index.html
:
That wraps up the end-to-end walkthrough on how to search for recipes using the Whisk API, and display them. You'll find a complete list of APIs and features to help you use the Whisk API in your own site or mobile App.
Last updated