Frontend example code:

This is a proof of concept for a frontend intergration based on IPscreener API v 3.0 on how it could look.

To make it work an Auth-key is needed and will be provided from IPscreener Support.


Download demo.html 


Demo code HTML with Javascript 
<html>
<head>
	<title>IPscreener API Demo</title>
	<style>		
		#form label, input, textarea, button {
			width: 100%;
			padding: 10px;
		}
		
		#summery {
			height: 100px;
		}
	</style>
</head>
<body>
<script>

function search(){
	// Insert your API key here
	var API_KEY = 'Auth-key';	
	
	var summery = document.getElementById("summery");
	var reference = document.getElementById("reference");
	
	if(summery.value.length == 0 || reference.value.length == 0){
		alert("Reference and Summary can not be empty")
		return false;
	}
	
	var myHeaders = new Headers();
	myHeaders.append("Authorization", API_KEY);
	myHeaders.append("Reference-number", reference);
	myHeaders.append("Content-Type", "application/x-www-form-urlencoded");	
	
	var urlencoded = new URLSearchParams();
	urlencoded.append("query", summery.value);
	urlencoded.append("index", "1"); // Default index is 1
	urlencoded.append("requested-hits", "10"); // How many hits
	urlencoded.append("view", "bibliographic,claim,description,passage,image"); // View-keywords

	var requestOptions = {
	  method: 'POST',
	  headers: myHeaders,
	  body: urlencoded,
	  redirect: 'follow'
	};
	
    const ticketData = null;

	fetch("https://api.ipscreener.com/v3/search", requestOptions)
	  .then(response => response.json())
	  .then(
	  	
		  function(ticketData){
			  if(ticketData.status == 'error'){
				  alert(ticketData.message);
				  return false;
			  }else if(ticketData.status == 'success'){
				  
				  var ticket = ticketData.data;
				  

				  // We have a ticket now, let poll until we have result				  			
					  var requestOptions = {
					    method: 'GET',
					    headers: myHeaders,
					    redirect: 'follow'
					  };

					  const data = null;
					  function fetchResult(){
						  
						fetch("https://api.ipscreener.com/v3/search?ticket="+ticket, requestOptions)
					    .then(response => response.json())
					  	.then(
		
							 function(data){
				  				var resultList = document.getElementById('result');
								 								 
					  			//console.log(data.data["ipscreener-results"]["index-1"]);
								if(data.message == 'Processing'){
									resultList.innerHTML = 'Searching...';
									setTimeout(fetchResult, 3500); // Poll every 3,5 seconds
									return false;
								}
								
								if(data.message == 'Resource Fetched Successfully'){
									// Clear old results
									resultList.innerHTML = '';
								}
			
					  			data.data["ipscreener-results"]["index-1"].forEach(function(data, index){
				
					  				// Title + Abstract
					  				resultList.innerHTML += '<li><strong><em>' + data.relevance.country + data.relevance.number + data.relevance["kind-code"] + '</em> ' + data.bibliographic.title[0].text + '</strong><p>' + data.bibliographic.abstract[0].text + '</p>';
					  				if(typeof data.image.data !== 'undefined' && data.image.data  !== null){
					  					resultList.innerHTML += '<img width="200" height="100" src="data:image/png;base64, ' + data.image.data + '" /> ';
					  				}
									
									// Applicant
									resultList.innerHTML += '<p><em>Applicant</em></p>'
									data.bibliographic.applicant.forEach(function(data, index){
										resultList.innerHTML += '<p>' + data.name + '</p>';
									});
									
									// Inventors
									resultList.innerHTML += '<p><em>Inventor</em></p>'									
									data.bibliographic.inventor.forEach(function(data, index){
										resultList.innerHTML += '<p>' + data.name + '</p>';
									});
				
									// CPC classes
									resultList.innerHTML += '<p><em>CPC class</em></p>'									
									data.bibliographic.class.forEach(function(data, index){
										if(data.type == 'CPC'){
											resultList.innerHTML += '<p>' + data.sub + '</p>';											
										}
									});
					  				resultList.innerHTML += '</li>';
				
					  			});
					  		}  
					    )
					    .catch(error => console.log('error', error));
						
				 	}
					
					fetchResult();
			  }
		  }
		
	  )
	  .catch(error => console.log(error));

}
</script>
<div id="form">
	<h1>Your idea</h1>
	<label for="reference">Reference number</label>
	<input type="text" id="reference" value="test" />
	<label for="summery">Summery</label>
	<textarea id="summery">PlayStation-era fans of the franchise can look forward to classic Crash Bandicoot gameplay and iconic characters, locations, and bosses on the smartphones. Players will be able to craft gadgets and weapons, earn rewards, go running with friends in multiplayer mode, and more.
</textarea> //Sample quary
	<button type="submit" onclick="search()">Send</button>
</div>
<div>
	<h2>Result list</h2>
	<ul id="result"></ul>
</div>

</body>
</html>
  • No labels
Write a comment…