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 beaver.js taps into the socket.io feed of real-time events so that you can use the data in your web application as you 'chews'. Okay, enough with the beaver puns!
Ready to 'sink your teeth' into the tutorial? Dam it — enough already!
A beaver can't fill a pond without a source of water and beaver.js can't collect contextual events without a real-time data feed! You'll need one of the following:
If you'll be tapping into the data stream from your live Pareto account, first follow our Connect a websocket client to Pareto tutorial. In the other two cases, you already have an accessible socket.io feed to which we can point beaver.js.
Our beaver.js example code already tabs into our live example data stream: check it out. 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
git clone https://github.com/reelyactive/beaver.git
If you're not familiar with git, browse to the repository and instead download it as a ZIP.
To run the code, simply open the index.html file in your favourite web browser and you should see a screen like this:
In the example code, beaver.js is sourcing data from https://www.hyperlocalcontext.com/reelyactive using socket.io. If you browse to that URL, you won't see anything — it expects a websocket connection! Next we'll point beaver.js to your own data stream.
Open the file js/dashboard.js and you should see DEFAULT_SOCKET_URL at the top. This is where we tell beaver.js where to connect and listen. Change it as follows:
DEFAULT_SOCKET_URL = 'http://localhost:3001';
Now, if you're running an hlc-server instance on the same machine, either as specified in the Connect a websocket client to Pareto tutorial, the Make a Raspberry Pi Hub tutorial, or the Hello Hyperlocal Context example, you should be providing a live data feed on localhost:3001.
Again, open (or refresh) the index.html file in your favourite web browser and you should see live data — this time your own!
Before adapting the example, let's take a look at what each file does.
|index.html||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 body tags.|
|style/reelyactive.css||The Cascading Style Sheet which defines the reelyActive look-and-feel. Don't like #0770a2 blue? Change it in this file.|
Like all of our client-side code, the beaver.js example follows our Angular.js Style Guide which we invite you to use for inspiration.
The beaver.js 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:
Read the beaver story, or return to the diyActive home page.