<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet/less" type="text/less" href="common/css/common.less">
    <link rel="stylesheet/less" type="text/less" href="css/connect.css">
    <link rel="stylesheet" type="text/css" href="common/prettify/prettify.css">
    <script src="common/prettify/prettify.js" type="text/javascript"></script>
    <%- partial('header_partial') %>
    <link rel="stylesheet" type="text/css" href="css/develop.css" />
    <script src="js/develop.js"></script>
    <script src="js/develop-buildconnector.js"></script>
    <script src="js/connect.js"></script>
  </head>
  <body>
    <div>
      <%- partial('iframe/developnav_partial') %>
      <p class="description">
        Build a Connector to some external Service and publish it to the Company Store
      </p>
    </div>

    <ul>
      <li id='connect-github' class='github-step hidden'>
        <h2>Step 0: Connect GitHub</h2>
        <p>
          GitHub is used for automatically syncing Apps and Connectors that you build to you Hubinga account, from there you will be able to publish them to the Company Store
        </p>
        <div class="connect">
          <span class="synclet-name">GitHub</span>
          <span class="oauthLink action-button" data-provider="github" data-width="1000" data-height="1000">Connect</span>
          <div class="gets-list">Gets: &nbsp;Contacts</div>
        </div>
      </li>

      <li>
        <h2>Step 1: Build Your Connector</h2>
        <ul>
          <li><h3>A. Create a new repo on your local machine</h3>
            <p>
              (for help with this, check out
              <a class="orange" target="_blank" href="http://help.github.com/create-a-repo/">
                GitHub's excellent doc
              </a>)
            </p>
          </li>

          <li><h3>B. Add an auth.js file</h3>
            <p>This where you handle all the specific authorization stuff for the Service</p>
<pre class="prettyprint">
module.exports = {
  handler : function (host, apiKeys, done, req, res) {
    var qs = require('querystring');
  }
  .
  .
}
</pre>
          </li>
		  <li><h3>C. Add some whatever.js files</h3>
		    <p>Next, create specific data collectors for whatever type of data you can extract from the API in question. Typically it will be contacts, photos etc. Below is an example of what it looks like to get all connections (contacts) from LinkedIN</p>
<pre class="prettyprint">
exports.sync = require('./lib').genericSync('connection', function(pi){
  if (!pi.config.connStart) {
    pi.config.connStart = 0;
	return "people/~/connections?format=json";
  } else {
    return "people/~/connections?start=" + pi.config.connStart + "&amp;format=json";
  }
},function(pi, js){
    if (!js || !js.values) {
      pi.config.connStart = 0;
	  return [];
	}
	if (js.values.length &lt; 500) {
	  pi.config.connStart = 0;
	} else {
	  pi.config.connStart += 500;
	}
	  return js.values;
	});
</pre>
		  </li>
        </ul>
      </li>

      <li><h2>Step 2: Prepare to publish</h2>
        <p>
          Once you are ready to publish your app (or at least see it in your Hubinga account), you will need to add
          a package file and push your work to GitHub &mdash; it will sync from GitHub to your Hubinga account automatically.
        </p>
        <ul>
          <li><h3>A. Add a package.json file</h3>
            <p>
              The package.json file in the root directory of your app specifies some basic info about your app.
              Minimally, you need at least these fields populated:
            </p>
<pre class="prettyprint">
{
  "author": "Me <me@hubinga.com>",
  "name": "ServiceX",
  "description": "ServiceX Connector",
  "version": "0.0.1",
  "repository": {
    "title": "ServiceX",
    "handle": "servicex",
    "author": "Me",
    "update": "auto",
    "github": "https://github.com/CompanyStore/servicex",
    "type": "connector",
    "static": "false",
    "oauthSize": {
        "width": 491,
        "height": 163
    },
    "url": ""
  },
  "engines": {
    "node": ">=0.4.9"
  },
  "dependencies": {},
  "devDependencies": {}
}
</pre>
            <p>Without those fields populated, your app will not be synced to your Hubinga account. For more info
               about the package.json file, see the
               <a class="orange iframeLink" href="/Me/devdocs/package.html">
                 package.json documentation
               </a>.
            </p>
          </li>
          <li><h3>B. Add a screenshot</h3>
            <p>Take a screenshot and put it in the root directory of your app as screenshot.png</p>
          </li>
          <li><h3>C. Push to GitHub:</h3>
            <p>Commit your changes and push to GitHub.</p>
            <pre class="prettyprint">git add  .<br>git commit -m 'ready to go'<br>git push origin master</pre>
            <p>Your Connector will be synced to your Hubinga account automatically.</p>
          </li>
        </ul>
      </li>
      <li><h2>Step 3: Publish your Connector to the Company Store!</h2>
        <p>
          Once your Connector is synced to your Hubinga account, it will show up in the "My Connectors" section under DEVELOP. Make sure everything is working, and then click the PUBLISH button in the header.
        </p>
        <br>
        <p>
          For more info, see the
           <a class="orange iframeLink" href="develop#Develop-Publishing">
             full publishing documentation
           </a>.
         </p>
      </li>
    </ul>
  </body>
</html>
