/
build-web-apps-with-beaver.html
199 lines (199 loc) · 12.4 KB
/
build-web-apps-with-beaver.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
<!DOCTYPE HTML>
<html>
<head>
<title>Build web apps with beaver.js | diyActive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="How to build some pretty 'dam' useful web apps with beaver.js and a real-time 'stream' of data.">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="js/diyactive.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49659454-2', 'auto');
ga('send', 'pageview');
</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="/"> diyActive </a></li>
<li class="dropdown" uib-dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" uib-dropdown-toggle role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Quick links <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<li role="menuitem">
<a href="https://github.com/reelyactive/" target="_blank">
reelyActive on GitHub
</a>
</li>
<li role="menuitem">
<a href="https://www.npmjs.com/~reelyactive" target="_blank">
reelyActive on npmjs
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://www.reelyactive.com" target="_blank">
reelyActive website
</a>
</li>
<li role="menuitem">
<a href="https://getpareto.com" target="_blank">
Pareto by reelyActive
</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a href="https://shop.reelyactive.com" target="_blank">
Our online store
</a>
</li>
<li role="menuitem">
<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-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<h1>
Build web apps with beaver.js <br>
<small> Tap into a real-time 'stream' of contextual data </small>
</h1>
<div class="row">
<div class="col-xs-12 col-sm-3 col-lg-2">
<img src="https://reelyactive.github.io/beaver/images/beaver-bubble.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-9 col-lg-10">
<p> Want to build custom web applications on top of the real-time contextual data 'stream' from your Pareto account and/or our open source software? You're in the right place. Here we'll show you how to build a simple webpage where <b>beaver.js</b> taps into the socket.io feed of real-time events so that you can use the data in your web application as you 'chews'. <i> Okay, enough with the beaver puns! </i> </p>
<p> Ready to 'sink your teeth' into the tutorial? <i> Dam it — enough already! </i> </p>
</div>
</div>
<h2> The data source </h2>
<p> A beaver can't fill a pond without a source of water and <b>beaver.js</b> can't collect contextual events without a real-time data feed! You'll need one of the following: </p>
<ul>
<li> a live Pareto account
<li> a live hlc-server instance
<li> our live example data stream
</ul>
<p> If you'll be tapping into the data stream from your live Pareto account, first follow our <a href="pareto-socket-client.html">Connect a websocket client to Pareto</a> tutorial. In the other two cases, you already have an accessible socket.io feed to which we can point <b>beaver.js</b>. </p>
<h2> Wait, what's Pareto? </h2>
<img src="images/pareto-by-reelyactive.jpg"
class="img-responsive center-block"><br>
<p> Pareto is our enterprise cloud platform which provides the convenience and scalability of SaaS. </p>
<p class="text-center">
<a class="btn btn-primary" href="https://getpareto.com"
target="_blank" role="button"> Visit getpareto.com </a>
<a class="btn btn-default" href="https://pareto.reelyactive.com"
target="_blank" role="button"> Log in to your account </a>
</p>
<h2> Clone the beaver.js example repository </h2>
<p> Our beaver.js example code already tabs into our live example data stream: <a href="http://reelyactive.github.io/beaver/" target="_blank">check it out</a>. We can simply clone the GitHub repository and use the code as a starting point. Create a beaver folder on your computer and from that folder, on the command line, run <br> <code>git clone https://github.com/reelyactive/beaver.git</code> </p>
<p> <i> If you're not familiar with git, <a href="https://github.com/reelyactive/beaver/tree/gh-pages" target=_"blank">browse to the repository</a> and instead download it as a ZIP. </i> </p>
<h2> Run the beaver.js example code </h2>
<p> To run the code, simply open the <b>index.html</b> file in your favourite web browser and you should see a screen like this: </p>
<img src="images/beaver-example.png" class="img-responsive">
<h2> Tap into your own data stream </h2>
<p> In the example code, <b>beaver.js</b> is sourcing data from https://www.hyperlocalcontext.com/ using socket.io. <i>If you browse to that URL, you won't see anything — it expects a websocket connection! </i> Next we'll point <b>beaver.js</b> to your own data stream. </p>
<p> Open the file <b>js/dashboard.js</b> and you should see DEFAULT_SOCKET_URL at the top. This is where we tell <b>beaver.js</b> where to connect and listen. Change it as follows: </p>
<pre>DEFAULT_SOCKET_URL = 'http://localhost:3001';</pre>
<p> Now, if you're running an hlc-server instance on the same machine, either as specified in the <a href="pareto-socket-client.html">Connect a websocket client to Pareto</a> tutorial, the <a href="make-a-pi-hub.html">Make a Raspberry Pi Hub</a> tutorial, or the <a href="https://www.npmjs.com/package/hlc-server#hello-hyperlocal-context" target="_blank">Hello Hyperlocal Context</a> example, you should be providing a live data feed on localhost:3001. </p>
<p> Again, open (or refresh) the <b>index.html</b> file in your favourite web browser and you should see live data — <i>this time your own!</i> </p>
<h2> How does the example work? </h2>
<p> Before adapting the example, let's take a look at what each file does. </p>
<table class="table table-striped table-hover table-reelyactive">
<caption> FILES IN THE BEAVER.JS EXAMPLE </caption>
<thead>
<tr>
<th> File </th>
<th> Purpose </th>
</tr>
</thead>
<tbody>
<tr>
<th> index.html </th>
<td> The main file in the web application, it specifies to the browser all the supporting files to load and the viewable content. You'll surely want to edit what's between the <i>body</i> tags. </td>
</tr>
<tr>
<th> style/reelyactive.css </th>
<td> The Cascading Style Sheet which defines the reelyActive look-and-feel. Don't like <i>#0770a2</i> blue? Change it in this file. </td>
</tr>
<tr>
<th> js/dashboard.js </th>
<td> The main JavaScript code of the web application, it instructs beaver.js where to connect and listen, and does useful things with the real-time events that beaver.js emits. You'll surely want to edit (at least) the <i>handleEvent(event)</i> function. </td>
</tr>
<tr>
<th> js/beaver.js </th>
<td> The JavaScript code that connects and listens to the data feed, processes it, and emits events for your own JavaScript code to handle. There is no need to edit this code. </td>
</tr>
<tr>
<th> js/socket.min.js </th>
<td> The JavaScript code by <a href="https://github.com/btford" target="_blank">btford</a> that implements socket.io for Angular.js. There is no need to edit this code. </td>
</tr>
</tbody>
</table>
<p> Like all of our client-side code, the <b>beaver.js</b> example follows our Angular.js Style Guide which we invite you to use for inspiration. </p>
<p class="text-center">
<a href="https://github.com/reelyactive/angular-style-guide#reelyactives-angularjs-guide" target="_blank" class="btn btn-default"> reelyActive's Angular.js Style Guide </a>
</p>
<h2> Build your own web application </h2>
<p> The <b>beaver.js</b> example should serve as a solid starting point for building your own web application. If you're simply experimenting and looking for ideas of what to build, here are a few: </p>
<ul>
<li> create a simple asset management dashboard which shows what's present (and where)
<li> create a checkpoint application which displays passage counts and times
<li> trigger image, audio or video content on screen when a new device is detected or gets close to a sensor
<li> create generative, multimedia web art from the steady stream of events
</ul>
<h2> What's next? </h2>
<p> Read the beaver story, or return to the diyActive home page. </p>
<p class="text-center">
<a class="btn btn-default" href="mascot-stories.html#beaver"
role="button"> The beaver story </a>
<a class="btn btn-success" href="/"
role="button"> Return to diyActive </a>
</p>
</div>
</div>
</div>
<footer class="footer">
<a href="/"
uib-tooltip="Do-it-yourself with reelyActive"
tooltip-placement="left"> diyActive </a> |
<a href="https://www.reelyactive.com"
uib-tooltip="We believe in an open Internet of Things"
tooltip-placement="right">
© reelyActive 2017-2018
</a>
</footer>
</div>
</body>
</html>