Skip to content

Instantly share code, notes, and snippets.

@ephbaum

ephbaum/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ephbaum/da678185e756524661f1 to your computer and use it in GitHub Desktop.
Save ephbaum/da678185e756524661f1 to your computer and use it in GitHub Desktop.
Download ZIP
thingdom-js example
Raw
index.html
<body><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"> <div class="navbar-header"><a class="navbar-brand" href="https://github.com/thingdomio/thingdom-js">Thingdom-JS Example</a> </div><div id="navbar" class="navbar-collapse collapse"></div> </nav>
<div class="jumbotron">
<div class="container">
<h1>Welcome to Thingdom</h1>
<h3 class="text-muted">a thingdom-js example</h3>
<p class="well">... being a simple example of how to use the thingdom-js library in your own project to trigger push notifications, a realtime updating feed of content / data, and realtime status from within your webapp without extra sever-side configuration. As a front-end developer there are always challenges you encounter that cannot be solved simply in the front-end for a variety of reasons; some of those problems <em>could</em> be solved by using Thingdom in your project!</p><a class="btn btn-primary btn-lg" href="#" role="button">Call to Action</a>
</div> <!-- /.container -->
</div> <!-- /.jumbotron -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h3>How does this work?</h3>
<p><strong>Simple!</strong> Follow the steps as they're laid out below and you'll see the what's going on every step of the way.</p>
<p>This will run through a really basic workflow that should hopefully help acclimate you to using Thingdom. It's easy and free to get your own Thing(s) up and running quickly!</p>
</div> <!-- / .alert.alert-info -->
</div > <!-- / .col-xs-12 -->
</div> <!-- / .row -->
<div id="resourcesAndPrep" class="panel panel-primary">
<div class="panel-heading"><h2 class="panel-title">Resources &amp; Prep</h2></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-8">
<p>This step is <em class="text-warning">optional</em> in as far as there&#39s a tl;dr to review if you don&#39t really want to click through all these links.</p>
<p>You&apos;re strongly encouraged, however, to at least try to understand both what Thingdom is, and does, before diving into the code.</p>
<div class="list-group">
<a class="list-group-item" href="https://thingdom.io" target="_blank">
<h4 class="list-group-item-heading">Thingdom Website</h4>
<span class="list-group-item-text">Learn about <em>what</em> Thingdom is and how it works. Most of the links below can be found there as well a links to our apps on iTunes and Google Play.</span>
</a>
<a class="list-group-item" href="https://dev.thingdom.io/" target="_blank">
<h4 class="list-group-item-heading">Thingdom Developer Portal</h4>
<span class="list-group-item-text">Once you have signed up for your free Thingdom account, the developer portal allows you to define your own thing product types, status types, and feed types. <strong class="text-danger">Signing up</strong> is crucial to get YOUR OWN API Secret to use within your own project.</span>
</a>
<a class="list-group-item" href="https://dev.thingdom.io/docs/api/1.1/" target="_blank">
<h4 class="list-group-item-heading">Thingdom REST API Documentation</h4>
<span class="list-group-item-text">Learn about how to communicate with the Thingdom API. There are examples that you can try out on your own using the online REST client hurl.it</span>
</a>
<a class="list-group-item" href="https://github.com/thingdomio" target="_blank">
<h4 class="list-group-item-heading">Thingdom GitHub Page</h4>
<span class="list-group-item-text">Repositories for all the opensource Thingdom wrappers and examples.</span>
</a>
<a class="list-group-item" href="https://github.com/thingdomio/thingdom-js" target="_blank">
<h4 class="list-group-item-heading">Official Thingdom-JS Wrapper</h4>
<span class="list-group-item-text">The Thingdom-JS wrapper that will be used in this example today</span>
</a>
</div> <!-- / .list-group -->
</div> <!-- / .col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading"> <h4 class="panel-title text-muted">tl;dr</h4> </div>
<div class="panel-body">
<p>The reality is that you won&#39t need to review all of these resources in detail before you embark on your journey into Thingdom with this example as it is designed to work without extra knowledge. You won&#39t <em>need</em> to sign up for or do anything else beyond the instructions on this page to actually see Thingdom in action.</p>
</div> <!-- / .panel-body -->
</div> <!-- / .panel.panel-default -->
</div> <!-- / .col-sm-4 -->
</div> <!-- / .row -->
</div> <!-- / .panel-body -->
</div> <!-- / #resourcesAndPrep .panel.panel-primary -->
<hr>
<div id="realCodes" class="panel panel-default">
<div class="panel-heading"><h2 class="panel-title">Real Codes Already?</h2></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-8">
<p>That was quick, right? It&#39s not really that complicated when you get down to it. What this example will show is how to connect to Thingdom, retrieve an existing Thing and then send feed and status.</p>
<p>We'll start with the former as you can do nothing until you have authenticated with Thingdom.</p>
<p><strong>Step One: Authenticate and initialize Thingdom</strong></p>
<p>You&#39ll want to instantiate a new Thingdom object by passing in your API Secret:</p>
<pre>var thingdom = new Thingdom( &#39EnterYourAPISecretHere&#39 );</pre>
<p>This instantiates a new Thingdom object:</p>
<p><a id="tryNewThingdom" class="btn btn-success" href="#" role="button">Try It</a></p>
<pre id="newThingdomResult" class="pre-scrollable">New <var>thingdom</var> value is displayed here</pre>
</div> <!-- / .col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading"> <h4 class="panel-title text-muted">What Happened?</h4> </div>
<div class="panel-body">
<p>This call is simple enough, it creates a new Thingdom in your code, you can then use this object to create one or more Things to use within your code.</p>
<p>Next you'll get to see how to get your first Thing!</p>
</div>
</div> <!-- / .panel.panel-default -->
</div> <!-- / .col-sm-4 -->
</div> <!-- / .row -->
</div> <!-- .panel-body -->
</div> <!-- #realCodes .panel.panel-default -->
<hr>
<div id="aThing" class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">A Thing?</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-8">
<p>Did you see how easy that was? You now have a <var>thingdom</var> object and you&#39re ready to get your first thing.</p>
<p>To get a thing you&#39ll need to define its name and product_type, as per the documentation, and pass a callback from within your own scope that will take a Thing object as its parameter. This allows the wrapper to pass control to your code.</p>
<p>In practice that looks a little like this:</p>
<pre class="pre-scrollable">var thing; thingdom.getThing( &#39Example Thing&#39, &#39javascript_example&#39, function( newThing ) { thing = newThing } );</pre>
<p><small>This is fine as an example but you should definitely try to use patterns, methods, and variables that make sense for your own code.</small></p>
<p><a id="tryNewThing" class="btn btn-success" href="#" role="button">Try It</a></p>.
<pre id="newThingResult" class="pre-scrollable">New <var>thing</var> value is displayed here</pre>
</div><!-- / .col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-muted">What Happened?</h4>
</div>
<div class="panel-body">
<p>You now have control of your first Thing! The thingdom-js wrapper handles all of the authentication and connection with the API for you, you simply follow the patterns of the methods: <ul class="list-inline"><li><var>.feed()</var></li><li><var>.status()</var></li><li><var>.statusArray()</var></li></ul></p>
<p>Click next to see how easy it is to create your first push notification and feed entries!</p>
</div>
</div> <!-- / .panel.panel-default -->
</div> <!-- / .col-sm-4 -->
</div> <!-- / .row -->
</div> <!-- .panel-body -->
</div> <!-- #realCodes .panel.panel-default -->
<hr>
<div id="feedYourThing" class="panel panel-default">
<div class="panel-heading"><h2 class="panel-title">Feed your Thing!</h2></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-8">
<p>Most likely the most important thing you&#39ll want to do with your new Thing is: feed it. This triggers push notifications and can be view in the Thingdom app to anyone subscribed to your thing!</p>
<p class="well">Before you venture further into this code, you may want to download the <a href="https://itunes.apple.com/us/app/thingdom/id807761969?mt=8" target="_blank">iOS <i class="fa fa-apple"></i></a> or <a href="https://play.google.com/store/apps/details?id=com.thingdom.mobile" target="_blank">Android <i class="fa fa-android"></i></a> apps onto your device of choice. To really appreciate the <em>magic</em> of what&#39s about to happen, it helps a lot to see all this happen irl. Once you launch Thingdom Mobile the first time you should be prompted to enter a Thing code.</p>
<p>To get the Thng Code from the Thing this example is using, click Show Code.</p>
<div class="well btn-group padded">
<a id="showThingCode" class="btn btn-default btn-primary" href="#" role="button">Show Code</a>
<a id="thingCodeNode" class="btn btn-default" role="button"><span class="text-muted">Your thing code will show up here.</span></a>
</div>
<p>Armed with this, you&#39re ready to see what happens next on your device when you Click Try It to trigger a feed message:</p>
<p><a id="tryFeedDefault" class="btn btn-success" href="#" role="button">Try It</a></p>
<pre id="defaultFeedResult" class="pre-scrollable">...</pre>
</div> <!-- / .col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-muted">What Happened?</h4>
</div>
<div class="panel-body">
<p>Some things definitely happened there, right?!?</p>
<p>How awesome is this?</p>
<p>If you thought that was cool... you could try this next:</p>
<div class="input-group">
<input id="customFeedString" type="text" placeholder="Stick some text in here..." class="form-control">
<span class="input-group-btn">
<a id="postCustomFeed" class="btn btn-default" role="button">Feed Your Thing!</a>
</span>
</div>
<pre id="customFeedResult" class="pre-scrollable">...</pre>
</div>
</div> <!-- / .panel.panel-default -->
</div> <!-- / .col-sm-4 -->
</div> <!-- / .row -->
</div> <!-- .panel-body -->
</div> <!-- #realCodes .panel.panel-default -->
<hr>
<footer>
<p>&copy; F. Stephen Kirschbaum 2014</p>
</footer>
</div>
</body>
Raw
script.js
$( function() {
var $alertDsmssBtn = $( '.alert-dismissible > .close' ),
$alertBox = $( '.alert' ),
$summaryPanels = $( '.col-sm-4 > .panel' ),
$summaryPanelsBody = $( '.col-sm-4 > .panel > .panel-body' ),
$tryNewThingdomBtn = $( 'a#tryNewThingdom' ),
$newThingdomResult = $( 'pre#newThingdomResult'),
$tryNewThingBtn = $( 'a#tryNewThing' ),
$newThingResult = $( 'pre#newThingResult'),
$showThingCodeBtn = $( 'a#showThingCode' ),
$thingCodeNode = $( 'a#thingCodeNode' ),
$thingCodeNodeSpan = $( 'a#thingCodeNode > span'),
$tryFeedDefaultBtn = $( 'a#tryFeedDefault' ),
$defaultFeedResult = $( 'pre#defaultFeedResult' ),
$customFeedResult = $( 'pre#customFeedResult' ),
$postCustomFeedBtn = $( 'a#postCustomFeed' );
var prettyUpJSON = function( jsonObject ) {
return JSON.stringify( jsonObject, ' ', 2 );
};
var thingdom,
thing,
createThingdom = function( cb ) { thingdom = new Thingdom( 'EnterYourAPISecretHere' ); var timer = setTimeout( function() { var thingdomJson = { thingdom: { getThing: "@method( (string) name, (semi-optional string) product_type, ( function ) callback )", lastError: thingdom.lastError}}; cb( prettyUpJSON( thingdomJson ) ) }, 500 );},
createThing = function( cb ) { thingdom.getThing( 'Example Request', 'javascript_example', function( newThing ) { thing = newThing; } ); var timer = setTimeout( function() { var thingJSON = { thing: { thing_code: thing.thing_code, feed: "@method( (string) message, (semi-optional string) feed_category )" status: "@method( (string) status_key (string) value (optional string) unit )",statusArray: "@method( (array of object(s)) statusArr ) )" }};cb( prettyUpJSON( thingJSON ) ); }, 500 ); }, getThingCode = function() { return thing.thing_code; }, postDefaultFeed = function( cb ) { thing.feed( "New feed message triggered from example at: " + window.location.origin + window.location.pathname, "js_web_feed" ); cb(); },
postCustomFeed = function( userString, cb ) { thing.feed( "You: " + userString, "js_web_feed" ); cb( userString ); };
$summaryPanelsBody.addClass( 'blurry-text' );
$summaryPanels.hover( function( e ) { $( e.currentTarget ).find( '.blurry-text' ).removeClass( 'blurry-text' ) }, function( e ) { $( e.currentTarget ).find( '.panel-body' ).addClass( 'blurry-text' ); } );
$alertDsmssBtn.click( function( e ) {
$alertBox.fadeOut( 'slow' );
} );
$tryNewThingdomBtn.click( function( e ) {
e.preventDefault();
var displayOutcome = function( currentThingdomString ) {
$newThingdomResult.html( currentThingdomString );
}
createThingdom( displayOutcome );
});
$tryNewThingBtn.click( function( e ) {
e.preventDefault();
var displayOutcome = function( currentThingString ) {
$newThingResult.html( currentThingString );
}
createThing( displayOutcome );
} );
$showThingCodeBtn.click( function( e ) {
e.preventDefault();
$thingCodeNodeSpan.html( getThingCode() );
} );
$tryFeedDefaultBtn.click( function( e ) {
e.preventDefault();
var displayOutcome = function() {
$defaultFeedResult.html( 'Boom! Right?!?' );
}
postDefaultFeed( displayOutcome );
} );
$postCustomFeedBtn.click( function( e ) {
e.preventDefault();
var $customFeedString = $( 'input#customFeedString' ).val(),
displayOutcome = function( passedString ) {
$customFeedResult.html( 'Sent: ' + passedString );
};
postCustomFeed( JSON.stringify( $customFeedString ), displayOutcome );
} );
} );
// javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();
Raw
style.css
.textshadow .blurry-text {
color: transparent;
text-shadow: 0 0 9px rgba(0,0,0,0.75);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment