html5 powered internet of things products

Clickslide.coaaron@clickslide.co@clickslideCTO

Introduction

ActionScript

Cordova

JavaScript

• Ruby

• C++

• C#

• Java

Jelastic

• Heroku

Node.js

• Binary Packets

APIs!!!!!

HTML5 Powered IoT Products

JavaScript and the virtual API software stack.

What We’ll Cover

Part 1:

General Overview of infrastructure for Virtual

API Software Stack.

Part 2:

Breakdown of a practical example with

sample code and process overview.

What are IoT Products?

“Smart” vs. “Intelligence”

Smart and intelligent are not the same

Internet Connected

What does it take to get an object online?

Sensor Data

Quick Demo of using sensor data in

JavaScript using:

• Simply.js

• Pebble Watch

IoT Infrastructure

JavaScript everywhere!

JavaScript in the browser

• Data Analysis

• Business Logic

JavaScript in Cordova (Phonegap)

• Quick demo of App structure for Cordova

• Event Driven

• Templates

– Jsviews is awesome

• Plugins

JavaScript on Arduino

• Johnny Five

• Firmata

• Quick Demo of LED blinky

I APIs

Web Hooks

Web Sockets

HTTPKeep it in the client!

Large packets of data all at once

Web Hooks

If This Then What?

Push notifications for servers

Web Hooks

No chain of events

Web Sockets

“Real Time” messaging for Apps

ClientServer

Information Routing

Think of Node.js as a message router for Web Sockets and Web Hooks.

Node.js

Service

Node.js

Service

Node.js

Service

Relieve Stress

Move business logic to the front-end

API Intelligence

Set it and forget it

Front End

APIAPI

Social, Geo, SaaS, etc.Quantifiable Self

Front-end Only

Business logic in a JavaScript client.

Front End

APIAPI

Social, Geo, SaaS, etc.Quantifiable Self

Web Socket

Router

Data Structuring

• Reusable Logic

• Reusable components

• Plug-’n’-play intelligence with APIs

• Focus on building beautiful front-ends

• 100% JavaScript applications

Software Stack

Client(HTML/CSS/J

avaScript)Serversdatabases

Traditional proprietary software stack

Programming required

Software Stack Using APIs

HTML5 Client

Server

databases

Traditional proprietary software stack leveraging APIs

Virtual API Stack

Client(JS/HTML5)

API Powered JavaScript Client

Virtual API Stack with

Datadipity

Front-end Only – JavaScript Everywhere

NML.js

Client

No Programming required

Security

• No data stored on Client

• PCI Compliant

• Copyright Algorithms where needed

• SSL

• MD5/SHA Hash

Security Continued

BREAK TIME

• Virtual API Software Stack – No More

Backend!

• APIs Provide Intelligence to smart objects

• JavaScript Firmware

My Hardware Setup

The Firmware

• Johnny-five for Node.js

– Also, Cylon-js etc..

The Webhook

• Get data from M2X locally with Ngrok

The HTML

• Socket.io

• Bootstrap

• JSViews

• Jquery

• Modernizer

• NML.js

The App

APIs To Integrate

• AT&T M2X for real time sensor data

• AT&T In App Messaging for SMS

• Twitter

• Facebook

Mashup APIs

• Facebook

• Twitter

• SMS

Test The Integration

Structure The Data

Download NML.js

• https://github.com/clickslide/NML.js

Publish The API

• Generates XML, JSON, JSONP REST

endpoint for your mashup.

Create Cordova Ready App

Prepare App Views

• JSViews

– ./templates/jsviews/loading-progress.html

– ./temples/jsviews/login-register-auth.html

Instantiate NML.js

Take Away

• Firmware is JavaScript, which is a different

type of front-end

• JavaScript developer can now be founders

of hardware companies

• 2 man team to manage full IoT company

at scale; 1 firmware, 1 full-stack.

Where JavaScript Shines

• Web Hooks

– to Node.js Server

• Web Sockets

– Server to Client(s)

– Client to Client(s)

• Ajax

– Client to APIs

– APIs to Client(s)

• Server Frameworks– Meteor

– Express

– Percolate

– Keystone

– Actionhero

• BaaS– Parse

– Kinvey

– Firebase

• SaaS– Social

– Geolocation

– Gaming

• Scaling– AWS

– Heroku

– Joyent

– Nodejitsu

– MongoDB - the JavaScript of NoSQL dbs.

• IaaS– Datadipity

• Front-end– Angular

– Backbone

– NML.js

– Jquery

Things to Remember

• APIs are eventually consistent

• Leverage Services not Servers

• Up-front costs are minimally higher, but

save drastically in the long term

• Use Web Sockets to send events between

• Use APIs to get Data into your Apps

• HTML5 is the future!

Sign Up Today

http://clickslide.co

html5 powered internet of things products

Software

html5-caniuse 1 html5-tags ordered alphabetically 6 html5...

html5/css3 course introduction to html5 · html5/css3...

html5 introduction – features and resources for html5

html5 – 201 nolan erck · basic html5 things first stuff...

introduction to aria and html5 - webaim · principles of...

solar-powered smart agricultural monitoring system using...

connectedness of things - · pdf filedecember 2015...

5 cool things you can do with html5 and apex

xss & csrf strike back powered by html5 shreeraj shah...

html5 - (01) visão geral do html5

html5 – canvas javascript...

sparking healthcare innovation, cloud and 5g-powered...

xss & csrf strike back powered by html5 shreeraj shah...

html5 devconf 2014 - quintus html5 game tutorial

rf-powered internet of things - drscj82kv96h/... ·...

html5 & javascript html5 javascript & html5 html5 html5...

html5 websocket for the real-time weband the internet of...

ny html5 - game development with html5 & javascript

solar-powered almost all energy for living things comes from...

khoi ngo nguyen html5 overview. outline history about html &...