Gather API Tutorial: Understanding Search

By Brian Pontarelli
Technology, Online Community, Products, Gather
April 14, 2015

The Gather API enables websites, apps (desktop/smartphone), anything really, to fully interact with user generated content stored in Gather. The use cases are limitless. Here I’ll show how Gather’s search API can be integrated into a browser-based game to enhance the user experience.

Let’s assume you’ve built an amazing game that has revolutionized in-browser role-playing. It’s called Candide 3D. In the first six months after launch both the game and the community website have been wildly successful. The website community allows users and administrators to create game guides, post tips, answer questions, and more. The community content has become so valuable that your users are asking for a way to access the content from inside the game. The game-play experience, best played full-screen, is hindered when users must: minimize the game, run a community search, commit relevant results to memory, and finally, return the game to full-screen. Certainly not a great user experience. Good thing you chose to build your community with Gather!

Here’s an example screenshot of what we want to end up with:

Gather-API-Tutorial

Get there with three easy steps:

I’m using Angular for the purpose of this demo and, assuming Gather is running at localhost:10011

Step 1) Build your controller code

File app.js:

var App = angular.module('App', []);

App.controller('GatherDemoController', function($scope, $http) {
 $scope.gatherPosts = []
 $scope.performSearch = function(searchTerm) {
  $http.get('http://localhost:10011/api/search?content=' + searchTerm)
   .success(function(res){
    $scope.gatherPosts = res.posts;
   });
 };
});

Step 2) Integrate the search display into the view

Your view will probably have more code.

File display.html:

<!doctype html>
<html ng-app="App">
<head>
 <title>Gather Search Demo</title>
 <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="GatherDemoController">
<div>
 Enter a search term:
 <input type="text" ng-model="sometext">
 <button ng-click="performSearch(some text)">Search</button>
 <hr/>
 <div ng-repeat="post in gatherPosts" style="border-bottom: 1px dashed #aaa;">
 <h4> ()</h4>
 <p style="margin-left: 
 10px;"></p>
 </div>
</div>
</body>
</html>

Step 3) Try it

Save app.js and display.html in a directory. Make sure app.js correctly points to a running Gather instance.
Fire up a server in the directory: (e.g. $ python -m SimpleHTTPServer 8000)
Open browser to http://localhost:8000/display.html
Type in search term and press ‘search’

Conclusion

This basic example takes content from Gather and pushes it to a simple Angular.js front-end. Your application/game might be written in Swift or Java or Objective-C, but the ability to integrate with Gather is just as simple. And, your users get a great game-play experience.

This example has a very narrow scope: search. With a few more calls to Gather’s API your game’s users could reply to posts, vote on posts, sort results, edit posts, and much more.

Tags:

CleanSpeak