-
Notifications
You must be signed in to change notification settings - Fork 3
/
quickyactive.html
187 lines (187 loc) · 13.8 KB
/
quickyactive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE HTML>
<html>
<head>
<title>diyActive: quickyActive, the five-minute reelyActive tutorial</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> quickyActive </h1>
<p> This is a five-minute crash course in getting started with <a href="http://smartspac.es" target="_blank">Smart Spaces</a>. It's designed for those with little time to waste (or millenials with ADHD). Here we'll present how to run the Smart Spaces platform locally on your computer, and how to show up as a floating bubble on your screen. There's even time for guest appearances from infamous memes. </p>
<h2> Installing Node.js </h2>
<p> Okay, we'll be honest, if you don't already have Node.js installed, this will take a little longer than five minutes. Nonetheless, 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>
<img src="images/grumpyFiveMinutes.jpg"
class="img-responsive center-block">
<p> Already too impatient? You can always <a href="http://smartspac.es/#participate" target="_blank">check into The Barn online</a> instead, it's not unlike what we'll do below. </p>
<h2> Install these files </h2>
<p> For your convenience, we've zipped up all the files pre-configured for out-of-the-box enjoyment. Simply save <a href="resources/quickyActive.zip" target="_blank">quickyActive.zip</a> to a local directory and unzip the files. </p>
<h2> Install the packages from npmjs </h2>
<p> From the directory where you saved all the files, run the following three commands: </p>
<code> npm install smartspaces </code> <br>
<code> npm install hlc-server </code> <br>
<code> npm install json-silo </code>
<p> Everything is now installed and we're ready to run! </p>
<h2> Run the quickyActive demo </h2>
<p> From the directory where you saved all the files, run: </p>
<code> node quickyActive </code>
<p> You should see something similar to the following in the console, the order isn't important: </p>
<code> smartspaces-server is listening on port 3000 </code> <br>
<code> hlc-server is listening on port 3001 </code> <br>
<code> json-silo is listening on port 3002 </code> <br>
<code> quickyActive: wow, that was fast! </code>
<p> Now we're ready to have some fun! </p>
<h2> Visit "My dumb space" </h2>
<p> Point your favourite browser to <a href="http://localhost:3000" target="_blank">localhost:3000</a> and from the pull-down, select "My dumb space" as below. </p>
<img src="images/myDumbSpaceSelect.png"
class="img-responsive center-block">
<p> Oh no! It's Kim Jong-il from <a href="http://en.wikipedia.org/wiki/Team_America:_World_Police" target="_blank">Team America: World Police</a> at his piano <a href="http://youtu.be/UEaKX9YYHiQ?t=8s" target="_blank">singing about his loneliness</a>! That's because he is in fact all alone: no one has checked in here yet. Let's check in and see what happens. </p>
<img src="images/myDumbSpaceLonely.png"
class="img-responsive center-block">
<h2> Check in to "My dumb space" </h2>
<p> Point your favourite browser to <a href="http://localhost:3002" target="_blank">localhost:3002</a> to access the JSON Silo. Fill in the page as below, or enter your own profile. </p>
<a href="images/jsonGrumpyCat.png" target="_blank">
<img src="images/jsonGrumpyCat.png"
class="img-responsive center-block">
</a>
<p> Once complete, click on "Store your JSON in the silo". </p>
<img src="images/jsonGrumpyCatStored.png"
class="img-responsive center-block">
<p> Your profile, or what we call a digital story, will now be hosted for 1 hour at the URL shown above. It will also be checked in to "My dumb space". Click the "Visit your Smart Space" button to proceed. </p>
<h2> Revisit "My dumb space" </h2>
<p> Look! Kim Jong-il has been replaced by Grumpy Cat (or whatever you decided to enter in the silo). You can even read her tweets. </p>
<img src="images/myDumbSpaceGrumpyCat.png"
class="img-responsive center-block">
<p> The reason we called this "My dumb space" is because it cannot <i>automatically</i> detect the presence of those who visit. A manual check-in is required, and, like any human-entered data, this is error prone. Smart Spaces don't require such human intervention, they reliably detect presence via the equivalent of <a href="http://context.reelyactive.com/technology.html" target="_blank">invisible buttons</a>. </p>
<h2> Visit two Smart Spaces </h2>
<p> Now let's visit two Smart Spaces that respond, in real-time, to the presence of their occupants. Point your favourite browser to <a href="http://localhost:3000/smart-one" target="_blank">localhost:3000/smart-one</a> and <a href="http://localhost:3000/smart-two" target="_blank">localhost:3000/smart-two</a>, opening each in a separate tab or, ideally, side-by-side.</p>
<img src="images/smartSpaceOneAndTwoBefore.png"
class="img-responsive center-block">
<p> Notice that Barn Owl is floating between the two spaces. That's happening for two reasons:
<ol>
<li> the code we're running is simulating two wireless devices being randomly detected by two <a href="http://context.reelyactive.com/technology.html" target="_blank">reelceivers</a>, each representing a space
<li> Barn Owl is associated with one of those wireless devices
</ol>
</p>
<p> Let's create another profile and associate it with the other wireless device so that we can float between the spaces like Barn Owl. </p>
<h2> Create another profile </h2>
<p> Point your favourite browser back to <a href="http://localhost:3002" target="_blank">localhost:3002</a> to access the JSON Silo. You can enter the same information again, or get creative. But this time, don't check in at "My dumb space". Instead, we're going to select "-" and not check in anywhere, because the Smart Spaces will detect our presence automagically. </p>
<img src="images/jsonGrumpyCatNoCheckIn.png"
class="img-responsive center-block">
<p> Once complete, click on "Store your JSON in the silo". </p>
<img src="images/jsonGrumpyCatStoredNoCheckIn.png"
class="img-responsive center-block">
<p> Your digital story will again be hosted for 1 hour at the URL shown above. The final step will be to associate that URL with the unique identifier of the wireless device. That way, whenever the wireless device is detected, the Smart Space can retrieve its digital story via the URL. Make sense? Click on "Associate a wireless device" to proceed. </p>
<h2> Associate a wireless device </h2>
<p> You'll now be redirected to the Hyperlocal Context server which will store the association. Notice that the JSON URL has already been entered for you, all you need to do is enter the unique identifier of the wireless device. In this case it is: </p>
<code> fee150bada55 </code>
<p> Enter that into the Device ID field as below: </p>
<img src="images/associateWirelessDevice.png"
class="img-responsive center-block">
<p> Now click "Add ID" to complete the association. </p>
<img src="images/hlcDeviceQueryUrl.png"
class="img-responsive center-block">
<p> If you're feeling nerdy you can <a href="http://localhost:3001/id/fee150bada55" target="_blank">click on the link</a> and you'll be rewarded with a screen full of JSON describing the wireless transmission and on which reelceiver it was detected the strongest. Let's not get into that now though... </p>
<h2> Back to the Smart Spaces! </h2>
<p> Instead, let's once again pull up those two Smart Spaces side by side, and this time you should see both Barn Owl and the profile we created wandering between the two. </p>
<img src="images/smartSpaceOneAndTwoAfter.png"
class="img-responsive center-block">
<p> After 1 hour, the digital story we created in the JSON Silo will expire and self-destruct. Grumpy Cat (or whatever you entered) will disappear from the Smart Spaces because his story can no longer be retrieved, even if his wireless device is still anonymously detected. That is the beauty of Smart Spaces: you're always in control of when and where to share your digital story via your presence, which is automatically detected in any Smart Space you enter. </p>
<p> Congratulations, you completed quickyActive and created both dumb and (sort of) Smart Spaces!
<h2> What's next? </h2>
<p> If you haven't already done so, learn more about Hyperlocal Context on <a href="http://context.reelyactive.com/context.html" target="_blank">the reelyActive website</a>. To dive deeper into what we just did, read our <a href="make-a-smart-space.html" target="_blank">Make a Smart Space tutorial</a> where you'll also find out how to connect a <a href="http://shop.reelyactive.com/collections/starter-kits" target="_blank">hardware starter kit</a>.</p>
<p> Alternatively, you can waste some time looking at <a href="http://instagram.com/realgrumpycat" target="_blank">pictures of Grumpy Cat</a> and watching <a href="https://www.youtube.com/playlist?list=PLZbXA4lyCtqqvFkPOanCSuVFUhazCqweO" target="_blank">Team America video clips</a>. Have fun! </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> |
<a href="https://www.reelyactive.com">
© reelyActive 2015-2018
</a>
</footer>
</div>
</body>
</html>