How you handle SnowShoe API responses is the second half of the experience you're providing for your users. There are nearly endless actions you can take once you authenticate a stamp. We'll attempt to cover a few of the more common cases here.
First, you'll need to parse the JSON response returned to you from the SnowShoe API. For a more in-depth look at the structure of this response, check out Example JSON Responses.
The most common thing to do is serve back an asset URL. For now we'll cover the insecure method, meaning this asset is public (anyone can make a GET request to it), but nonetheless we're using it as part of the user experience.
Building off what we did in Part 2: API Client:
# serving back JSON to the front-end client's AJAX request
if response.include? "stamp"
render json: '{"magic_asset": "http://mydomain.com/super/cool/asset}'
else
render json: '{"error_asset": "http://mydomain.com/try/again/asset"}'
end
// serving back JSON to the front-end client's AJAX request
if (error) {
var statusCode = error.statusCode,
errorJson = JSON.parse(error.data);
response.status(statusCode).send(errorJson)
} else {
response.send(data)
}
// serving back HTML when using HTTP POST
if (stamp in response.data) {
response.render('magic_asset.html', {});
} else {
response.render('stamp_not_found.html', {});
}
// Because the SnowShoe Wordpress plugin currently requires the use of AJAX, make sure to handle the API response on the frontend using the success and error properties of the SnowShoe jQuery data initialization object. Example success and error responses could look like:
<script>
var stampScreenInitData = {
"postUrl": "http://mydomain.com/stampscreen",
"stampScreenElmId": "stamp-screen",
"postViaAjax": true,
"success": function(response){
if (response.hasOwnProperty('stamp')) { window.location.replace("http://www.yourdomain.com/snowshoe-stamp-demo/stamp-recognized/");}
},
"error": function(response){
window.location.replace("http://www.yourdomain.com/snowshoe-stamp-demo/no-stamp-recognized/");
}
}
</script>
It's pretty straightforward. We just send back to our client the URL of our asset for it to display to the user (via jQuery or similar). In the case of a failure, meaning the stamp was not authenticated, we send back the URL of an image telling them the stamp was not found and they need to try stamping again.
Building on that, we can say that our SnowShoe application has two stamps assigned to it: DEVA and DEVB. We can serve back unique assets based on which stamp was used.
# serving back custom JSON to the front-end client's AJAX request
if response.include? "stamp"
case response["stamp"]["serial"]
when "DEVA"
render json: '{"magic_asset": "http://mydomain.com/super/cool/asset-A}'
when "DEVB"
render json: '{"magic_asset": "http://mydomain.com/super/cool/asset-B}'
else
render json: '{"error_asset": "http://mydomain.com/try/again/asset"}'
end
// serving back JSON to the front-end client's AJAX request
if (error) {
var statusCode = error.statusCode,
errorJson = JSON.parse(error.data);
response.status(statusCode).send(errorJson)
} else {
response.send(data)
}
// serving back stamp-dependent HTML when using HTTP POST
if (stamp in response.data) {
if (response.data.stamp == "DEVA"){
response.render('magic_asset_1.html', {});
}
else {
response.render('magic_asset_2.html', {});
}
} else {
response.render('stamp_not_found.html', {});
}
// Because the SnowShoe Wordpress plugin currently requires the use of AJAX, make sure to handle the API response on the frontend using the success and error properties of the SnowShoe jQuery data initialization object. Example success and error responses could look like:
<script>
var stampScreenInitData = {
"postUrl": "http://mydomain.com/stampscreen",
"stampScreenElmId": "stamp-screen",
"postViaAjax": true,
"success": function(response){
if (response.stamp.serial == "DEVA") { window.location.replace("http://www.yourdomain.com/snowshoe-stamp-demo/stamp-a-recognized/");}
else { window.location.replace("http://www.yourdomain.com/snowshoe-stamp-demo/stamp-b-recognized/");};
},
"error": function(response){
window.location.replace("http://www.yourdomain.com/snowshoe-stamp-demo/no-stamp-recognized/");
}
}
</script>