-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhost-a-json-silo.html
224 lines (224 loc) · 16.7 KB
/
host-a-json-silo.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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE HTML>
<html>
<head>
<title>diyActive: Host a JSON Silo</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> Host a JSON Silo </h1>
<p> Here we'll present how to host your very own JSON Silo identical to our public silo which you can check out at <a href="http://myjson.info" target="_blank">myjson.info</a>. A JSON Silo stores and shares digital stories: machine-readable representations of people and things. </p>
<img src="images/moreSilo.jpg"
class="img-responsive center-block">
<p> <a href="http://en.wikipedia.org/wiki/More_cowbell">Will Ferrell's bandmates are right</a>, and that's why we're showing you how to take complete control over your digital stories and share them as freely as you wish via your own hosted instance of <a href="https://www.npmjs.org/package/json-silo" target="_blank">json-silo</a>. </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 json-silo </h2>
<p> The easy way is via npm. Create a new directory called myjson, then from that directory run: </p>
<code> npm install json-silo </code>
<p> Yeah, that's it, you're done! </p>
<hr>
<p> If you prefer to install from github, instead clone <a href="https://github.com/reelyactive/json-silo" target="_blank">json-silo</a>. </p>
<h2> Running the silo </h2>
<p> In the myjson directory you created above, open a new file called server.js and paste in the following code: </p>
<code> var server = require('json-silo'); </code> <br>
<code> var app = new server( { useCors: true, </code> <br>
<code> password: null } ); </code>
<p> To fire up the silo, simply run: </p>
<code> node server.js </code>
<h2> Did it work? </h2>
<p> You should see the following line on the console: </p>
<code> json-silo is listening on port 3002 </code> <br>
<p> Now open your favourite web brower and browse to <a href="http://localhost:3002" target="_blank">localhost:3002</a> for the json-silo landing page. It should look something like this: </p>
<img src="images/jsonSiloLanding.png"
class="img-responsive center-block">
<p> Great! Now it's time to play around. </p>
<h2> Create a digital story </h2>
<p> Fill in any or all of the info fields at left, and the JSON at right will update immediately thanks to the magic of client-side JavaScript (see <a href="http://reelyactive.github.io/jsonerator/" target="_blank">jsonerator</a>). Select the option to check-in at The Barn, and to self-destruct after 1 hour. Then press the <i>Store your JSON in the silo</i> button. You should see something like the following: </p>
<img src="images/jsonSiloStored.png"
class="img-responsive center-block">
<p> Click on the link to your JSON URL. A new browser tab will open and the page will show your raw JSON hosted by the silo. If you had entered "Barn Owl" as your name, it would look like this: </p>
<code> { </code> <br>
<code> person: { </code> <br>
<code> firstName: "Barn", </code> <br>
<code> lastName: "Owl" </code> <br>
<code> } </code> <br>
<code> } </code> <br>
<p> At this point you're sharing your digital story locally: only your computer can access that link. But if we run the code in the cloud, the link would be accessible across the Internet. We'll get there in a moment but first let's see what happened with our check-in at The Barn. </p>
<h2> What's at The Barn? </h2>
<p> Again, open your favourite web browser and this time browse to <a href="http://localhost:3002/at/test" target="_blank">localhost:3002/at/test</a> (test is the handle for The Barn). You should see something like the following: </p>
<code> { </code> <br>
<code> _meta: { </code> <br>
<code> message: "ok", </code> <br>
<code> statusCode: 200 </code> <br>
<code> }, </code> <br>
<code> _links: { </code> <br>
<code> self: { </code> <br>
<code> href: "http://localhost:3002/at/test" </code> <br>
<code> } </code> <br>
<code> }, </code> <br>
<code> devices: { </code> <br>
<code> ipSBnuqEapXpf61j: { </code> <br>
<code> url: "http://localhost:3002/id/ipSBnuqEapXpf61j", </code> <br>
<code> } </code> <br>
<code> test: { </code> <br>
<code> url: "http://localhost:3002/id/test", </code> <br>
<code> } </code> <br>
<code> } </code> <br>
<code> } </code> <br>
<p> Notice how <i>your</i> JSON URL is among the list of devices? That's because you checked in. A computer could parse through this list to form a contextual understanding of who/what is present at The Barn. </p>
<p> If you've read the <a href="make-a-smart-space.html" target="_blank">Make a Smart Space</a> tutorial, you'll notice that this is an identical API response format as that of hlc-server. It's no coincidence! You can use json-silo in place of hlc-server to allow for manual check-ins at locations that don't have hardware infrastructure. </p>
<p> If you're keen to see the digital stories you entered floating around in a smartspaces bubble, follow the instructions from the <a href="make-a-smart-space.html" target="_blank">Make a Smart Space</a> tutorial, but when configuring smartspaces, instead set the API root to <i>http://localhost:3002/at/</i> so that it points to json-silo rather than hlc-server. Then browse to <a href="http://localhost:3000/test" target="_blank">localhost:3000/test</a> to see The Barn as a Smart Space. </p>
<h2> Take a break! </h2>
<p> The last feature we need to test is whether the digital story you entered will actually self-destruct after an hour. Since you probably have the better part of that hour to kill, why not watch the <a href="http://vimeo.com/91715361" target="_blank">Saturday Night Live skit</a> that inspired the "More Silo" meme. And then some more videos, you know, while you're waiting for that hour to pass. Then, once it has, refresh the browser tab that had your JSON and you should see the following: </p>
<code> { } </code>
<p> It really did self-destruct! </p>
<br><br>
<hr id="azure">
<br><br>
<h1> Host on Azure </h1>
<p> As we mentioned above, if we run json-silo in the cloud, our digital stories would be accessible across the Internet. In this section we'll show you how elegantly simple it is to host json-silo as a website on <a href="http://azure.microsoft.com/" target="_blank">Microsoft Azure</a>. If you already have an account and git installed on your local machine this will be a breeze. </p>
<h2> Get an Azure Account </h2>
<p> If you're a startup and you're not already a BizSpark member, get on that now, seriously! Take advantage of all the free stuff, including Azure credits, which would come in handy right now, wouldn't they? <a href="http://www.microsoft.com/bizspark/" target="_blank">Let's do it ></a> </p>
<p> Otherwise, if you don't already have an Azure account, visit <a href="http://azure.microsoft.com/" target="_blank">azure.microsoft.com</a> and click on <i>Free Trial</i>. Follow the steps until you have an account. </p>
<h2> Install git </h2>
<p> If you don't already have git installed, be sure to do so. Installation is easy on all platforms. <a href="http://git-scm.com/downloads" target="_blank">Let's do it ></a> </p>
<h2> Create an Azure Website </h2>
<p> Okay, now check out how easy it is to create a website with Azure, git and Node.js. Open <a href="http://azure.microsoft.com/en-us/documentation/articles/web-sites-nodejs-develop-deploy-mac/" target="_blank">this tutorial</a> and follow all the steps in the <i>Create an Azure Website and enable Git publishing</i> section, which should start like this: </p>
<img src="images/azureNewWebsite.png"
class="img-responsive center-block">
<p> When you get through that section, STOP! Once the git repository is ready, read on below where we'll show you exactly what to do next. </p>
<h2> Prepare the local git repository </h2>
<p> On your local machine, return to the myjson directory we created earlier. We'll update our code to be Azure-friendly and then check it in. First, update the file server.js to contain the following: </p>
<code> var server = require('json-silo'); </code> <br>
<code> var options = { httpPort: 1337, </code> <br>
<code> useCors: true, </code> <br>
<code> hlcServerUrl: "http://www.hyperlocalcontext.com", </code> <br>
<code> smartspacesUrl: "http://smartspac.es", </code> <br>
<code> password: "moresilo" }; </code> <br>
<code> var app = new server(options); </code>
<p> You can, of course, choose a better password. Then, in the same directory, create a file called package.json which contains the following: </p>
<code> { </code> <br>
<code> "name": "myjsonsilo", </code> <br>
<code> "description": "...", </code> <br>
<code> "engines": { </code> <br>
<code> "node": ">=0.10.0" </code> <br>
<code> }, </code> <br>
<code> "dependencies": { </code> <br>
<code> "json-silo": ">=0.1.3" </code> <br>
<code> } </code> <br>
<code> } </code> <br>
<p> This file tells Azure to install the json-silo package and what version of Node.js to use. You can change the name and fill in your own description if you like. </p>
<p> Now we can check in your code locally using git. In the same directory, from the command line type: </p>
<code> git init </code> <br>
<code> git add server.js </code> <br>
<code> git add package.json </code> <br>
<code> git commit -m "Initial commit" </code>
<p> Your code is now checked in locally, all that's left is to publish it to Azure! </p>
<h2> Publish your website to Azure </h2>
<p> Where you left off the Azure tutorial, you should have arrived at a screen which provided you a git repository URL like the following: </p>
<code>https://[email protected]. ... .git</code>
<p> Now we'll add that as a remote directory to which we'll push our local commit. Again, in the same local directory, from the command line type: </p>
<code> git remote add azure [URL from above] </code> <br>
<code> git push azure master </code> <br>
<p> If you don't see any errors on the command line, your website should be live in a few seconds! </p>
<h2> Visit your hosted silo </h2>
<p> Open your favourite web brower and browse to <i>myjsonsilo.azurewebsites.net</i>, or whatever name you selected, to visit your hosted JSON Silo. Click the Login link at the bottom of the page and enter the password you specified in server.js. Now you're ready to create digital stories that can be shared over the Internet! </p>
<h2> What's next? </h2>
<p> Read the documentation on <a href="https://www.npmjs.org/package/json-silo" target="_blank">json-silo</a> to learn about the additional options and features not specified in this tutorial. </p>
<p> <a href="http://www.reelyactive.com/contact/" target="_blank">Contact us</a> if you'd like your <i>virtual</i> Smart Space to be hosted on <a href="http://smartspac.es" target="_blank">smartspac.es</a>. </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 2014-2018
</a>
</footer>
</div>
</body>
</html>