Accessing Pogi API calls with Javascript

The Pogi server can be accessed through REST API for integration with other applications. This Reference Manual will show you how the Pogi API can be utilized in a simple Javascript + HTML + CSS Web Application.

The sample project can be checked in the public SimplyRFID github repository. The Pogi APIs can also be tested directly using the Insomnia Workspace application. The Insomnia export file can be downloaded from the Pogi API - Insomnia workspace repository or directly imported through the URL https://raw.githubusercontent.com/simplyrfid-dev/pogi-api-insomnia-workspace/main/pogi-api-insomnia-workspace.json

The starting page for the web application is named index.html. From this page, the user can then use the side navigation bar to navigate sequentially through the following pages. Also available on this page is the demo for retrieving the current Pogi version by using the get-version API call with the code snippet shown below.

async function getVersion() {
  response = await fetch(POGI_URL + '?op=get-version', { method: 'GET' }); // Send GET request to Pogi for its version
  json = await response.json(); // Grab JSON response
  var str = JSON.stringify(json, undefined, 2); // Preformat JSON output with spacing level = 2
  document.getElementById("output").innerHTML = str; // Display output in webpage
}

The authentication token is required for the majority of API Calls. In order to request a token, the user will need a user ID and a password for the Pogi server. This usually comes from the Welcome Email that you've received or you can also create a new user through the User Management Page of the Pogi Server.

Parameters for the token-get API call can be checked in the Login Authentication API CALLS chapter of the SimplyRFID Pogi API Manual. For use with the following pages, the token will be stored in the browser's local storage and then retrieved later to be sent along with the API request.

async function getToken() {
  // Assemble request body containing login credentials
  let getTokenParams = {
    "op":"token-get",
    "userId": user_ID,
    "password": password
  }
  response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(getTokenParams)}); // Fetch data from Pogi
  json = await response.json(); // Grab JSON response
  var str = JSON.stringify(json, undefined, 2); // Preformat JSON output with spacing level = 2 
  document.getElementById("output").innerHTML = str; // Display output in webpage
  currentToken = json.token; // Get new token for use with API calls requiring Authentication
  localStorage.setItem("loginToken", currentToken); // Store token for next use
  //console.log(currentToken);
}

The JSON request is first assembled to query tag history before sending a fetch request. Parameters for the history API call can be checked in the Web API Calls chapter of the SimplyRFID Pogi API Manual.

async function getHistory() {
  let currentToken = localStorage.getItem("loginToken"); // get stored token from storage   
  // Assemble request body
  let historyparams = {
    "token" : currentToken,
    "op" : "history",
    "fromDate" : "2020-01-01",
    "fromTime" : "00:00:00",
    "toDate" :"2020-12-31",
    "toTime" : "12:00:00",
    "limit" : 5,
    "offset" : 0,
    "orderDirection" : "DESC" 
  }
  response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(historyparams)}); // Request History from Pogi
  json = await response.json(); // Grab JSON response
  var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
  document.getElementById("output").innerHTML = str; // Display output in webpage
}

In this page, the API zone-list will return all of the valid Pogi locations. This API call is under the Zone Management API Calls chapter of the Simply RFID Pogi API Manual.

async function getLocation() {
  let currentToken = localStorage.getItem("loginToken"); // get stored token from storage    

  // Assemble request body
  let locationparams = {
    "token" : currentToken,
    "op" : "zone-list"
  }
  response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(locationparams)}); // Request Zone list from Pogi
  json = await response.json(); // Grab JSON response
  var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
  document.getElementById("output").innerHTML = str; // Display output in webpage
}

In this page, we will add a new tag in the Inventory. All API used in here can be checked in the ID API Calls chapter of the Pogi API Manual.

Delete Tag
For now we will start with deleting the tag for demonstration using the id-delete API call

// 1. Delete Tag
// Assemble JSON body for deleting tag ID
let deletetagparams = {
    "op":"id-delete",
    "token" : currentToken,
    "tagId": newTag
}
response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(deletetagparams)}); // Request tag delete from Pogi
json = await response.json(); // Grab JSON response
document.getElementById("deletetagOutput").innerHTML = JSON.stringify(json, undefined, 3); // Display output in webpage

Check if the Tag exists
In this step you can precheck using the id-exists API call if the tag already exist in the inventory. If it returns true, you can use it as a condition for skipping the next steps.

// 2. Check if deleted Tag still exists
// Assemble JSON body for querying tag ID existence
let checktagparams = {
    "op":"id-exists",
    "token" : currentToken,
    "tagId": newTag
}   

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(checktagparams)}); // Check if Tag exists in Pogi
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("checktagOutput").innerHTML = str; // Display output in webpage

Check if the Tag was deleted recently
If a tag is deleted in the inventory, it will have its deleted state turned as true. You can't add tags that still has a deleted state. This can be using the id-deleted API call. If the tag is new and is not yet deleted you can skip the next step and proceed directly to Adding the tag to inventory.

// 3. Check if tag has deleted state
// Assemble JSON body to check if tag ID is still in deleted state
let deletedtagparams = {
    "op":"id-deleted",
    "token" : currentToken,
    "tagId": newTag
}  

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(deletedtagparams)}); // Check if Tag is still in deleted state
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("deletedtagOutput").innerHTML = str; // Display output in webpage

Remove Tag's deleted state
In order to add a tag that was recently deleted, you will need to change its state through the id-undelete API call.

// 4. Remove Tag deleted state
// Assemble JSON body to remove tag from deleted state
let undeletetagparams = {
    "op":"id-undelete",
    "token" : currentToken,
    "tagId": newTag
} 

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(undeletetagparams)}); // Remove tag from its deleted state
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("undeletetagOutput").innerHTML = str; // Display output in webpage 

Add the Tag to Inventory
The tag data is first assembled using JSON and then requested for addition using the id-add API call.

// 5. Add Tag
// Assemble JSON body for containing the tag information
let addtagparams = {
    "op":"id-add",
    "token": currentToken,
    "tagId": newTag,
    "external_id":"Bag Tag",
    "description":"Bag Tag",
    "model_number":"Hanging tag",
    "name":"Bag Tag 1",
    "owner":"Admin",
    "part_number": "0000",
    "serial_number": "0000",
    "zone": zone
} 

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(addtagparams)}); // Push add tag request to Pogi
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("addtagOutput").innerHTML = str; // Display output in webpage

Get Tag information
This step is optional, but this can be used to confirm the tag information that is stored in the inventory, the data can be retrieved using the id-get API.

// 6. Show tag information to confirm
// Assemble JSON body for requesting tag information from pogi
let gettagparams = {
    "op":"id-get",
    "token" : currentToken,
    "tagId": newTag
} 

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(gettagparams)}); // Request for tag information from Pogi
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("gettagOutput").innerHTML = str; // Display output in webpage

In this page the added tag will be edited, same with the previous page the API calls used here can be checked in the ID API Calls chapter of the Pogi API Manual.

Edit Tag
The tag data is first assembled using JSON. Then the changes is sent with the id-update API call.

// 1. Edit Tag
// Assemble JSON body to update tag information
let edittagparams = {
    "op":"id-update",
    "token": currentToken,
    "tagId": newTag,
    "external_id":"Package Tag",
    "description":"Package Tag",
    "model_number":"Sticker tag",
    "name":"Package Tag 1",
    "owner":"Admin",
    "part_number": "0001",
    "serial_number": "0001",
    "zone": zone
} 

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(edittagparams)}); // Push new tag information to Pogi
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("edittagOutput").innerHTML = str; // Display output in webpage

Get Tag Information
This optional step is just for reviewing the changes done to the tag information using the id-get API call.

// 2. Show tag information to confirm
// Assemble JSON body for requesting tag information from pogi
let gettagparams = {
    "op":"id-get",
    "token" : currentToken,
    "tagId": newTag
}   

response = await fetch(POGI_URL, { method: 'POST', headers: {'Content-Type': 'application/json'} , body: JSON.stringify(gettagparams)}); // Request for tag information from Pogi
json = await response.json(); // Grab JSON response
var str = JSON.stringify(json, undefined, 3); // Preformat JSON output with spacing level = 3 
document.getElementById("gettagOutput").innerHTML = str; // Display output in webpage