ephbaum/index.html

## 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="container">

    <div id="thingdom" class="panel panel-default">
      <div class="hidden panel-heading"><h2 class="panel-title">Real Codes Already?</h2></div>
      <div class="panel-body">
      <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="newThingdom" 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> <!-- .panel-body -->
    </div> <!-- #thingdom .panel.panel-default -->

    <hr>

    <div id="thing" class="panel panel-default">
      <div class="panel-body">
        <p><strong>Step Two: Create or get your Thing</strong></p>
        <p>You'll need to call your Thing with its name and a product type and pass in a callback from within your scope.</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="newThing" 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> <!-- .panel-body -->
    </div> <!-- #thing .panel.panel-default -->

    <hr>

    <div id="feed" class="panel panel-default">
      <div class="panel-body">
        <p><strong>Step Three: Post a feed to your Thing</strong></p>
        <p class="well well-sm">Before you continue you should 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(s) of choice. To really appreciate the <em>magic</em> of what&#39s about to happen, it helps a lot to see all this happen on a device in front of you. Once you launch Thingdom Mobile the first time you should be prompted to enter a Thing code.</p>
        <p class="hidden">To get the Thng Code from the Thing this example is using, click Show Code.</p>
        <div class="well btn-group btn-group-justified">
          <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">Thing Code</span></a>
        </div>
        <pre class="pre-scrollable">thing.feed( "Example feed message...", "js_web_feed" );</pre>
        <p>When you click Try It you'll trigger a feed message.</p>
        <p><a id="postDefaultFeed" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="defaultFeedResult" class="pre-scrollable">...</pre>
        <p>Try passing in your own input:</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">Custom Message</a>
          </span>
        </div>
        <pre id="customFeedResult" class="pre-scrollable">...</pre>
      </div> <!-- .panel-body -->
    </div> <!-- #feed .panel.panel-default -->

    <hr>

    <div id="status" class="panel panel-default">
      <div class="panel-body">
        <p><strong>Step 4: Update your Thing's Status</strong></p>
        <pre class="pre-scrollable">thing.status( "js_web_status", "online" );</pre>
        <p>Click Try It to update your Thing's status to <span class="text-success text-muted">online</span></p>
        <p><a id="postOnlineStatus" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="onlineStatusResult" class="pre-scrollable">...</pre>
        <pre class="pre-scrollable">thing.status( "js_web_status", "offline" );</pre>
        <p>Click Try It to update your Thing's status to <span class="text-info text-muted">offline</span></p>
        <p><a id="postOfflineStatus" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="offlineStatusResult" class="pre-scrollable">...</pre>
      </div> <!-- .panel-body -->
    </div> <!-- #status .panel.panel-default -->

    <hr>

    <div id="resources" class="panel panel-primary">
      <div class="panel-heading"><h2 class="panel-title">Resources</h2></div>
      <div class="panel-body">
        <p>Here are some links to resources to help you understand both what Thingdom is.</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> <!-- / .panel-body -->
    </div> <!-- / #resources .panel.panel-primary -->

    <hr>

  </div>
</body>

## script.js
$( function() {
  var $newThingdomBtn       = $( 'a#newThingdom' ),
      $newThingdomResult    = $( 'pre#newThingdomResult'),
      $newThingBtn          = $( 'a#newThing' ),
      $newThingResult       = $( 'pre#newThingResult'),
      $showThingCodeBtn     = $( 'a#showThingCode' ),
      $thingCodeNode        = $( 'a#thingCodeNode' ),
      $thingCodeNodeSpan    = $( 'a#thingCodeNode > span'),
      $postDefaultFeedBtn   = $( 'a#postDefaultFeed' ),
      $defaultFeedResult    = $( 'pre#defaultFeedResult' ),
      $postCustomFeedBtn    = $( 'a#postCustomFeed' ),
      $customFeedResult     = $( 'pre#customFeedResult' ),
      $postOnlineStatusBtn  = $( 'a#postOnlineStatus' ),
      $onlineStatusResult   = $( 'pre#onlineStatusResult' ),
      $postOfflineStatusBtn = $( 'a#postOnlineStatus' ),
      $offlineStatusResult  = $( 'pre#onlineStatusResult' );

  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( "Example feed message from example at: " + window.location.origin + window.location.pathname, "js_web_feed" ); cb(); },
      postCustomFeed = function( userString, cb ) { thing.feed( "You Sent: " + userString, "js_web_feed" ); cb( userString ); },
      postOnlineStatus = function( cb ) { thing.status( "js_web_status", "online" ); cb(); },
      postOfflineStatus = function( cb ) { thing.status( "js_web_status", "offline" ); cb(); };

  $newThingdomBtn.click( function( e ) {
    e.preventDefault();
    var displayOutcome = function( currentThingdomString ) {
      $newThingdomResult.html( currentThingdomString );
    }
    createThingdom( displayOutcome );
  });

  $newThingBtn.click( function( e ) {
    e.preventDefault();
    var displayOutcome = function( currentThingString ) {
      $newThingResult.html( currentThingString );
    }
    createThing( displayOutcome );
  } );

  $showThingCodeBtn.click( function( e ) {
    e.preventDefault();
    $thingCodeNodeSpan.html( getThingCode() );
  } );

  $postDefaultFeedBtn.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 );
  } );

  $postOnlineStatusBtn.click( function( e ) {
    e.preventDefault();
    var displayOutcome = function() {
      $onlineStatusResult.html( 'Online' );
      $offlineStatusResult.html( '...' );
    };
    postOnlineStatus( displayOutcome );
  } );

  $postOfflineStatusBtn.click( function( e ) {
    e.preventDefault();
    var displayOutcome = function() {
      $onlineStatusResult.html( '...' );
      $offlineStatusResult.html( 'Online' );
    };
    postOnlineStatus( 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)})();

## style.css
body {
  padding-top: 64px;
}
.textshadow .blurry-text {
   color: transparent;
   text-shadow: 0 0 9px rgba(0,0,0,0.75);
}

## thingdom-js-example.markdown

      
    Raw
  

              thingdom-js-example.markdown
            
          
    thingdom-js example

... being a simple ( almost completely functional ) 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 could be solved by using Thingdom in your project!
A Pen by F. Stephen Kirschbaum on CodePen.
License.
	<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="container">

	<div id="thingdom" class="panel panel-default">
	<div class="hidden panel-heading"><h2 class="panel-title">Real Codes Already?</h2></div>
	<div class="panel-body">
	<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="newThingdom" 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> <!-- .panel-body -->
	</div> <!-- #thingdom .panel.panel-default -->

	<hr>

	<div id="thing" class="panel panel-default">
	<div class="panel-body">
	<p><strong>Step Two: Create or get your Thing</strong></p>
	<p>You'll need to call your Thing with its name and a product type and pass in a callback from within your scope.</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="newThing" 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> <!-- .panel-body -->
	</div> <!-- #thing .panel.panel-default -->

	<hr>

	<div id="feed" class="panel panel-default">
	<div class="panel-body">
	<p><strong>Step Three: Post a feed to your Thing</strong></p>
	<p class="well well-sm">Before you continue you should 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(s) of choice. To really appreciate the <em>magic</em> of what&#39s about to happen, it helps a lot to see all this happen on a device in front of you. Once you launch Thingdom Mobile the first time you should be prompted to enter a Thing code.</p>
	<p class="hidden">To get the Thng Code from the Thing this example is using, click Show Code.</p>
	<div class="well btn-group btn-group-justified">
	<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">Thing Code</span></a>
	</div>
	<pre class="pre-scrollable">thing.feed( "Example feed message...", "js_web_feed" );</pre>
	<p>When you click Try It you'll trigger a feed message.</p>
	<p><a id="postDefaultFeed" class="btn btn-success" href="#" role="button">Try It</a></p>
	<pre id="defaultFeedResult" class="pre-scrollable">...</pre>
	<p>Try passing in your own input:</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">Custom Message</a>
	</span>
	</div>
	<pre id="customFeedResult" class="pre-scrollable">...</pre>
	</div> <!-- .panel-body -->
	</div> <!-- #feed .panel.panel-default -->

	<hr>

	<div id="status" class="panel panel-default">
	<div class="panel-body">
	<p><strong>Step 4: Update your Thing's Status</strong></p>
	<pre class="pre-scrollable">thing.status( "js_web_status", "online" );</pre>
	<p>Click Try It to update your Thing's status to <span class="text-success text-muted">online</span></p>
	<p><a id="postOnlineStatus" class="btn btn-success" href="#" role="button">Try It</a></p>
	<pre id="onlineStatusResult" class="pre-scrollable">...</pre>
	<pre class="pre-scrollable">thing.status( "js_web_status", "offline" );</pre>
	<p>Click Try It to update your Thing's status to <span class="text-info text-muted">offline</span></p>
	<p><a id="postOfflineStatus" class="btn btn-success" href="#" role="button">Try It</a></p>
	<pre id="offlineStatusResult" class="pre-scrollable">...</pre>
	</div> <!-- .panel-body -->
	</div> <!-- #status .panel.panel-default -->

	<hr>

	<div id="resources" class="panel panel-primary">
	<div class="panel-heading"><h2 class="panel-title">Resources</h2></div>
	<div class="panel-body">
	<p>Here are some links to resources to help you understand both what Thingdom is.</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> <!-- / .panel-body -->
	</div> <!-- / #resources .panel.panel-primary -->

	<hr>

	</div>
	</body>
	$( function() {
	var $newThingdomBtn = $( 'a#newThingdom' ),
	$newThingdomResult = $( 'pre#newThingdomResult'),
	$newThingBtn = $( 'a#newThing' ),
	$newThingResult = $( 'pre#newThingResult'),
	$showThingCodeBtn = $( 'a#showThingCode' ),
	$thingCodeNode = $( 'a#thingCodeNode' ),
	$thingCodeNodeSpan = $( 'a#thingCodeNode > span'),
	$postDefaultFeedBtn = $( 'a#postDefaultFeed' ),
	$defaultFeedResult = $( 'pre#defaultFeedResult' ),
	$postCustomFeedBtn = $( 'a#postCustomFeed' ),
	$customFeedResult = $( 'pre#customFeedResult' ),
	$postOnlineStatusBtn = $( 'a#postOnlineStatus' ),
	$onlineStatusResult = $( 'pre#onlineStatusResult' ),
	$postOfflineStatusBtn = $( 'a#postOnlineStatus' ),
	$offlineStatusResult = $( 'pre#onlineStatusResult' );

	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( "Example feed message from example at: " + window.location.origin + window.location.pathname, "js_web_feed" ); cb(); },
	postCustomFeed = function( userString, cb ) { thing.feed( "You Sent: " + userString, "js_web_feed" ); cb( userString ); },
	postOnlineStatus = function( cb ) { thing.status( "js_web_status", "online" ); cb(); },
	postOfflineStatus = function( cb ) { thing.status( "js_web_status", "offline" ); cb(); };

	$newThingdomBtn.click( function( e ) {
	e.preventDefault();
	var displayOutcome = function( currentThingdomString ) {
	$newThingdomResult.html( currentThingdomString );
	}
	createThingdom( displayOutcome );
	});

	$newThingBtn.click( function( e ) {
	e.preventDefault();
	var displayOutcome = function( currentThingString ) {
	$newThingResult.html( currentThingString );
	}
	createThing( displayOutcome );
	} );

	$showThingCodeBtn.click( function( e ) {
	e.preventDefault();
	$thingCodeNodeSpan.html( getThingCode() );
	} );

	$postDefaultFeedBtn.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 );
	} );

	$postOnlineStatusBtn.click( function( e ) {
	e.preventDefault();
	var displayOutcome = function() {
	$onlineStatusResult.html( 'Online' );
	$offlineStatusResult.html( '...' );
	};
	postOnlineStatus( displayOutcome );
	} );

	$postOfflineStatusBtn.click( function( e ) {
	e.preventDefault();
	var displayOutcome = function() {
	$onlineStatusResult.html( '...' );
	$offlineStatusResult.html( 'Online' );
	};
	postOnlineStatus( 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)})();
	body {
	padding-top: 64px;
	}
	.textshadow .blurry-text {
	color: transparent;
	text-shadow: 0 0 9px rgba(0,0,0,0.75);
	}