make-a-smartspace.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>diyActive: Make a reelyActive Smart Space</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style/main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="js/diyactive.js"></script>
  </head>
  <body ng-app="diyActive">
    <div ng-controller="InteractionCtrl">
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle"
                  ng-init="navCollapsed = true"
                  ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="https://www.reelyactive.com">
            <strong>reely</strong>Active
          </a>
        </div>
        <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"
             ng-click="navCollapsed = true">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="index.html"> diyActive </a></li>
            <li class="dropdown" dropdown on-toggle="toggled(open)">
              <a href class="dropdown-toggle" dropdown-toggle role="button"
                 data-toggle="dropdown" aria-haspopup="true"
                 aria-expanded="false">
                Quick links <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="https://github.com/reelyactive/" target="_blank">
                    reelyActive on GitHub
                  </a>
                </li>
                <li>
                  <a href="https://www.npmjs.com/~reelyactive" target="_blank">
                    reelyActive on npmjs
                  </a>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                  <a href="https://www.reelyactive.com" target="_blank">
                    reelyActive website
                  </a>
                </li>
                <li>
                  <a href="https://getpareto.com" target="_blank">
                    Pareto by reelyActive
                  </a>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                  <a href="https://shop.reelyactive.com" target="_blank">
                    Our online store
                  </a>
                </li>
                <li>
                  <a href="https://reelyactive.com/blog/" target="_blank">
                    Our blog
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
          <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
            <p class="bg-danger lead">
              <b>NOTICE:</b> This tutorial applies to earlier versions of the reelyActive code base.  We do not recommend following this tutorial.  Current tutorials are available <a href="./">here</a>.
            </p>
            <h1> Make a Smart Space </h1>
            <div class="embed-container"><iframe src="http://www.youtube.com/embed/MGZm6rUU6_g?rel=0&controls=0&showinfo=0&modestbranding" frameborder="0" allowfullscreen></iframe></div>
            <p> Here we'll present how to create a Smart Space that you can visualise in a web browser like <a href="http://smartspac.es/notman" target="_blank">this</a>. All you'll need is two of our free software packages and (optionally) some of our hardware. The image below highlights the reelyActive smartspaces stack. </p>
            <img src="images/smartspacesStack.png"
                 class="img-responsive center-block">
            <p> In a nutshell, you'll install and run smartspaces and hlc-server on a server (for instance your personal computer). If you have reelyActive hardware we'll connect that too.  A few simple configurations and you have a live Smart Space! </p>
            <h2> Installing Node.js </h2>
            <p> If you don't already have Node.js installed, be sure to do so first!  Installation is easy on all platforms. </p>
            <p class="text-center">
              <a class="btn btn-primary" href="https://nodejs.org"
                 role="button" target="_blank"> Let's do it </a>
            </p>
            <h2> Installing smartspaces </h2>
            <p> The easy way is via npm.  Create a new directory called smartspaces, then from that directory run: </p>
            <code> npm install smartspaces </code>
            <p> Yeah, that's it, you're done! </p>
            <hr>
            <p> If you prefer to install from github, instead clone the following projects:
              <ul>
                <li> <a href="https://github.com/reelyactive/smartspaces-server" target="_blank">smartspaces-server</a>
                <li> <a href="https://github.com/reelyactive/smartspaces-client" target="_blank">smartspaces-client</a>
              </ul>
            </p>
            <h2> Installing hlc-server </h2>
            <p> The easy way is via npm.  From the smartspaces directory you created above, run: </p>
            <code> npm install hlc-server </code>
            <p> Again, that's it, you're done! </p>
            <hr>
            <p> If you prefer to install from github, instead clone <a href="https://github.com/reelyactive/hlc-server" target="_blank">hlc-server</a>. </p>
            <h2> Installing reelyActive hardware </h2>
            <p> If you have one of our <a href="http://shop.reelyactive.com/collections/starter-kits" target="_blank">starter kits</a>, be sure to read our <a href="install-a-starter-kit.html" target="_blank">Install a Starter Kit</a> tutorial. If not, don't worry, you can still test everything without any hardware. </p>
            <h2> Running everything together </h2>
            <p> In the smartspaces directory you created above, open a new file called server.js and paste in the following code: </p>
            <code> var smartspaces = require('smartspaces'); </code> <br>
            <code> var hlcserver = require('hlc-server'); </code> <br><br>
            <code> var ui = new smartspaces(); </code> <br>
            <code> var server = new hlcserver( { useCors: true } ); </code> <br>
            <p> To fire up both servers, simply run: </p>
            <code> node server.js </code>
            <h2> Did it work? </h2>
            <p> You should see the following two lines on the console: </p>
            <code> hlc-server is listening on port 3001 </code> <br>
            <code> smartspaces-server is listening on port 3000 </code>
            <p> Now let's test out hlc-server and then configure smartspaces. </p>
            <h2> Testing hlc-server </h2>
            <p> Open your favourite web brower and browse to <a href="http://localhost:3001" target="_blank">localhost:3001</a> for the hlc-server landing page.  It should look something like this: </p>
            <img src="images/hlcLanding.png"
                 class="img-responsive center-block">
            <p> Now let's follow the suggestion and type <i>test</i> in the search bar and click Search.  This will take us to <a href="http://localhost:3001/at/test" target="_blank">localhost:3001/at/test</a> which is effectively asking the API "what is at <i>test</i>", where <i>test</i> is the name of a place.  You should see the following output: </p>
            <code> { </code> <br>
            <code> &nbsp; _meta: { </code> <br>
            <code> &nbsp; &nbsp; message: "ok", </code> <br>
            <code> &nbsp; &nbsp; statusCode: 200 </code> <br>
            <code> &nbsp; }, </code> <br>
            <code> &nbsp; _links: { </code> <br>
            <code> &nbsp; &nbsp; self: { </code> <br>
            <code> &nbsp; &nbsp; &nbsp; href: "http://localhost:3001/at/test" </code> <br>
            <code> &nbsp; &nbsp; } </code> <br>
            <code> &nbsp; }, </code> <br>
            <code> &nbsp; devices: { </code> <br>
            <code> &nbsp; &nbsp; 001bc50940100000: { </code> <br>
            <code> &nbsp; &nbsp; &nbsp; identifier: { </code> <br>
            <code> &nbsp; &nbsp; &nbsp; &nbsp; type: "EUI-64", </code> <br>
            <code> &nbsp; &nbsp; &nbsp; &nbsp; value: "001bc50940100000" </code> <br>
            <code> &nbsp; &nbsp; &nbsp; }, </code> <br>
            <code> &nbsp; &nbsp; &nbsp; url: "http://reelyactive.com/metadata/test.json", </code> <br>
            <code> &nbsp; &nbsp; &nbsp; href: "http://localhost:3001/id/001bc50940100000" </code> <br>
            <code> &nbsp; &nbsp; } </code> <br>
            <code> &nbsp; } </code> <br>
            <code> } </code> <br>
            <p> While this is a hardcoded output for test purposes, it nonetheless respects the standard format of all API responses.  Effectively, what it says is that a device with identifier <i>001bc50940100000</i> is detected at the <i>test</i> place, and that this device is linked with metadata at <a href="http://reelyactive.com/metadata/test.json" target="_blank">reelyactive.com/metadata/test.json</a>.  The metadata link is what smartspaces will use to display information about the device. </p>
            <h2> Configuring smartspaces </h2>
            <p> Now let's configure smartspaces so that we can visualise what's at the <i>test</i> place.  Browse to <a href="http://localhost:3000/manage" target="_blank">localhost:3000/manage</a> to get started.  Since this is your first time running smartspaces, you'll be prompted to choose a password.  Go ahead and do this. </p>
            <p> In the management interface, you should see the option to <i>Add a new place</i>.  Select this option so that we can create a <i>test</i> place to visualise the data from hlc-server.  You should see the following: </p>
            <img src="images/addTheBarn.png"
                 class="img-responsive center-block">
            <p> Fill in the fields as shown above.  The <i>Place Name</i> will be displayed in the smartspaces website (we chose The Barn because we suppose that's where barn owls live, right?).  The <i>Identifier</i> uniquely identifies the place, in our case <i>test</i>.  The <i>API root</i> is the path to the API (the <i>Identifier</i> will be appended to this to complete the URL).  And the Twitter feed will be displayed as part of the social scene.</p>
            <p> Click the Add button.  Next we'll see what's happening at The Barn! </p>
            <h2> Visiting the Smart Barn </h2>
            <p> Browse to <a href="http://localhost:3000/test" target="_blank">localhost:3000/test</a> to visit The Barn as a Smart Space.  If everything went to plan, you should be rewarded with a barn owl floating in a bubble!  Have fun exploring The Barn! </p>
            <img src="images/theBarn.png"
                 class="img-responsive center-block">
            <p> Yes, we also find it humourous that it says <i>Who</i>'s here and that's the sound an owl makes. </p>
            <h2> Create Your Smart Space </h2>
            <p> Now that you've successfully run the demo, the next step is to create your own Smart Space that can receive guests other than our barn owl.  To do so, you'll need a <a href="https://www.npmjs.com/package/json-silo" target="_blank">json-silo</a> to create and store the profiles of all the guests visiting your space.  Simply follow the first section of the <a href="host-a-json-silo.html" target="_blank">Host a JSON Silo tutorial</a> which will then point you back to this tutorial. </p>
            <h2> All Together Now! </h2>
            <p> Running your own Smart Space with hardware requires just a single additional line of code where we tell the server where to listen for the data stream.  Your server.js file should now look like this: </p>
            <code> var smartspaces = require('smartspaces'); </code> <br>
            <code> var hlcserver = require('hlc-server'); </code> <br>
            <code> var jsonsilo = require('json-silo'); </code> <br><br>
            <code> var ui = new smartspaces(); </code> <br>
            <code> var server = new hlcserver( { useCors: true } ); </code> <br>
            <code> var silo = new jsonsilo( { useCors: true } ); </code> <br><br>
            <code> server.bind( { protocol: 'udp', </code> <br>
            <code> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;path: '192.168.1.101:50000' } ); </code> <br>
            <p> Make sure that the last line of code correctly points to the source of the data stream!  If you're using a <a href="http://shop.reelyactive.com/collections/starter-kits" target="_blank">starter kit</a>, you can find all the details in the <a href="install-a-starter-kit.html" target="_blank">Install a Starter Kit tutorial</a>. </p>
            <h2> What's next? </h2>
            <p> More to come soon, be sure to check back! </p>
            <p class="text-center">
              <a class="btn btn-success" href="index.html"
                 role="button"> Return to diyActive </a>
            </p>
          </div>
          <div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
        </div>
      </div>
      <footer class="footer">
        <a href="/"> diyActive </a> &nbsp; | &nbsp;
        <a href="https://www.reelyactive.com">
          &copy; reelyActive 2014-2018
        </a>
      </footer>
    </div>
  </body>
</html>