HTML5 Powered Internet Of Things Products
48
Clickslide.co [email protected] @clickslideCTO Introduction ActionScript Cordova JavaScript PHP • Ruby • C++ • C# • Java AWS Jelastic • Heroku Node.js • Binary Packets APIs!!!!!
-
Upload
clickslide -
Category
Software
-
view
319 -
download
1
description
Leveraging HTML5, JavaScript, CSS, and Datadipity (http://clickslide.co) developers can build internet connected products in 1 day. We have demonstrated this technique by winning multiple hackathons. The products we've created include a connected Dog Collar, a connected door lock for keyless entry, a connected garbage can to weigh your trash and many more. Using this advanced technique, IoT products can be reduced to one HTML file and one Javascript file running inside of a Phonegap application. Developers can leverage existing APIs and cloud services to build a virtual full-stack without having to learn anything new or program any of the API interactions. We believe HTML5 is the future of software development and aim to support HTML5 developers with a fast and stable method to deliver IoT products with HTML5 & Javascript only. Here is an example of an IoT product built in 1 day using this technique: https://www.youtube.com/watch?v=9C6MgZsbVYE
Transcript of HTML5 Powered Internet Of Things Products
[email protected]@clickslideCTO
Introduction
ActionScript
Cordova
JavaScript
PHP
• Ruby
• C++
• C#
• Java
AWS
Jelastic
• Heroku
Node.js
• Binary Packets
APIs!!!!!
[email protected]@clickslideCTO
HTML5 Powered IoT Products
JavaScript and the virtual API software stack.
[email protected]@clickslideCTO
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.
[email protected]@clickslideCTO
Sensor Data
Quick Demo of using sensor data in
JavaScript using:
• Simply.js
• Pebble Watch
[email protected]@clickslideCTO
JavaScript in Cordova (Phonegap)
• Quick demo of App structure for Cordova
• Event Driven
• Templates
– Jsviews is awesome
• Plugins
[email protected]@clickslideCTO
JavaScript on Arduino
• Johnny Five
• Firmata
• Quick Demo of LED blinky
[email protected]@clickslideCTO
Information Routing
Think of Node.js as a message router for Web Sockets and Web Hooks.
Node.js
API
Node.js
Service
Node.js
Service
Node.js
Service
TCP
TCP
TCP
[email protected]@clickslideCTO
API Intelligence
Set it and forget it
Front End
API
APIAPI
IaaS
Social, Geo, SaaS, etc.Quantifiable Self
BaaS
[email protected]@clickslideCTO
Front-end Only
Business logic in a JavaScript client.
Front End
API
APIAPI
IaaS
Social, Geo, SaaS, etc.Quantifiable Self
BaaS
Web Socket
Router
[email protected]@clickslideCTO
Data Structuring
• Reusable Logic
• Reusable components
• Plug-’n’-play intelligence with APIs
• Focus on building beautiful front-ends
• 100% JavaScript applications
[email protected]@clickslideCTO
Software Stack
Client(HTML/CSS/J
avaScript)Serversdatabases
Traditional proprietary software stack
Programming required
[email protected]@clickslideCTO
Software Stack Using APIs
HTML5 Client
Server
databases
Traditional proprietary software stack leveraging APIs
APIs
Programming required
[email protected]@clickslideCTO
Virtual API Stack
Client(JS/HTML5)
API Powered JavaScript Client
APIs
Programming required
[email protected]@clickslideCTO
Virtual API Stack with
Datadipity
Datadipity
Front-end Only – JavaScript Everywhere
APIs
NML.js
Client
Programming required
No Programming required
[email protected]@clickslideCTO
Security
• No data stored on Client
• PCI Compliant
• Copyright Algorithms where needed
• SSL
• MD5/SHA Hash
[email protected]@clickslideCTO
BREAK TIME
Recap
• Virtual API Software Stack – No More
Backend!
• APIs Provide Intelligence to smart objects
• JavaScript Firmware
[email protected]@clickslideCTO
The HTML
• Socket.io
• Bootstrap
• JSViews
• Jquery
• Modernizer
• NML.js
[email protected]@clickslideCTO
APIs To Integrate
• AT&T M2X for real time sensor data
• AT&T In App Messaging for SMS
[email protected]@clickslideCTO
Publish The API
• Generates XML, JSON, JSONP REST
endpoint for your mashup.
[email protected]@clickslideCTO
Prepare App Views
• JSViews
– ./templates/jsviews/loading-progress.html
– ./temples/jsviews/login-register-auth.html
[email protected]@clickslideCTO
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.
[email protected]@clickslideCTO
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)
[email protected]@clickslideCTO
Tools
• 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
[email protected]@clickslideCTO
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
apps
• Use APIs to get Data into your Apps
• HTML5 is the future!
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://static.fdocuments.us/doc/165x107/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
