SlideShare a Scribd company logo
1 of 48
Download to read offline
Introduction 
ActionScript 
Cordova 
JavaScript 
PHP 
• Ruby 
• C++ 
• C# 
• Java 
AWS 
Jelastic 
• Heroku 
Node.js 
• Binary Packets 
APIs!!!!! 
@clickslideCTO aaron@clickslide.co Clickslide.co
HTML5 Powered IoT Products 
JavaScript and the virtual API software stack. 
@clickslideCTO aaron@clickslide.co Clickslide.co
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. 
@clickslideCTO aaron@clickslide.co Clickslide.co
What are IoT Products? 
@clickslideCTO aaron@clickslide.co Clickslide.co
“Smart” vs. “Intelligence” 
Smart and intelligent are not the same 
@clickslideCTO aaron@clickslide.co Clickslide.co
Internet Connected 
What does it take to get an object online? 
@clickslideCTO aaron@clickslide.co Clickslide.co
Sensor Data 
Quick Demo of using sensor data in 
JavaScript using: 
• Simply.js 
• Pebble Watch 
@clickslideCTO aaron@clickslide.co Clickslide.co
IoT Infrastructure 
JavaScript everywhere! 
@clickslideCTO aaron@clickslide.co Clickslide.co
JavaScript in the browser 
• Data Analysis 
• Business Logic 
@clickslideCTO aaron@clickslide.co Clickslide.co
JavaScript in Cordova (Phonegap) 
• Quick demo of App structure for Cordova 
• Event Driven 
• Templates 
– Jsviews is awesome  
@clickslideCTO aaron@clickslide.co Clickslide.co 
• Plugins
JavaScript on Arduino 
• Johnny Five 
• Firmata 
• Quick Demo of LED blinky 
@clickslideCTO aaron@clickslide.co Clickslide.co
I APIs 
@clickslideCTO aaron@clickslide.co Clickslide.co
HTTP 
vs. 
Web Hooks 
vs. 
Web Sockets 
@clickslideCTO aaron@clickslide.co Clickslide.co
HTTP 
Keep it in the client! 
Large packets of data all at once 
@clickslideCTO aaron@clickslide.co Clickslide.co
Web Hooks 
If This Then What? 
Push notifications for servers 
@clickslideCTO aaron@clickslide.co Clickslide.co
Web Hooks 
POST 
1 : 1 
No chain of events 
@clickslideCTO aaron@clickslide.co Clickslide.co
Web Sockets 
Server Client 
“Real Time” messaging for Apps 
@clickslideCTO aaron@clickslide.co Clickslide.co
Information Routing 
Node.js 
API 
Node.js 
Service 
Node.js 
Service 
Node.js 
Service 
TCP 
TCP 
TCP 
Think of Node.js as a message router for Web Sockets and Web 
Hooks. 
@clickslideCTO aaron@clickslide.co Clickslide.co
Relieve Stress 
Move business logic to the front-end 
@clickslideCTO aaron@clickslide.co Clickslide.co
API Intelligence 
API 
Front 
End 
IaaS 
BaaS 
Quantifiable Self Social, Geo, SaaS, etc. 
API API 
Set it and forget it 
@clickslideCTO aaron@clickslide.co Clickslide.co
Front-end Only 
API 
Front 
End 
IaaS 
BaaS 
Web Socket 
Router 
Quantifiable Self Social, Geo, SaaS, etc. 
API API 
Business logic in a JavaScript client. 
@clickslideCTO aaron@clickslide.co Clickslide.co
Data Structuring 
• Reusable Logic 
• Reusable components 
• Plug-’n’-play intelligence with APIs 
• Focus on building beautiful front-ends 
• 100% JavaScript applications 
@clickslideCTO aaron@clickslide.co Clickslide.co
Software Stack 
Client 
(HTML/CSS/J 
avaScript) 
databases Servers 
Programming 
required 
Traditional proprietary software stack 
@clickslideCTO aaron@clickslide.co Clickslide.co
Software Stack Using APIs 
Server 
HTML5 
Client 
databases 
APIs 
Programming 
required 
Traditional proprietary software stack leveraging APIs 
@clickslideCTO aaron@clickslide.co Clickslide.co
Virtual API Stack 
Client 
(JS/HTML5) 
APIs 
Programming 
required 
API Powered JavaScript Client 
@clickslideCTO aaron@clickslide.co Clickslide.co
Virtual API Stack with 
Datadipity 
Datadipity 
APIs 
Front-end Only – JavaScript Everywhere 
@clickslideCTO aaron@clickslide.co Clickslide.co 
NML.js 
Client 
Programming 
required 
No Programming 
required
Security 
• No data stored on Client 
• PCI Compliant 
• Copyright Algorithms where needed 
• SSL 
• MD5/SHA Hash 
@clickslideCTO aaron@clickslide.co Clickslide.co
Security Continued 
@clickslideCTO aaron@clickslide.co Clickslide.co
BREAK TIME 
Recap 
• Virtual API Software Stack – No More 
Backend! 
• APIs Provide Intelligence to smart objects 
• JavaScript Firmware 
@clickslideCTO aaron@clickslide.co Clickslide.co
My Hardware Setup 
@clickslideCTO aaron@clickslide.co Clickslide.co
The Firmware 
• Johnny-five for Node.js 
– Also, Cylon-js etc.. 
@clickslideCTO aaron@clickslide.co Clickslide.co
The Webhook 
• Get data from M2X locally with Ngrok 
@clickslideCTO aaron@clickslide.co Clickslide.co
The HTML 
• Socket.io 
• Bootstrap 
• JSViews 
• Jquery 
• Modernizer 
• NML.js 
@clickslideCTO aaron@clickslide.co Clickslide.co
The App 
@clickslideCTO aaron@clickslide.co Clickslide.co
APIs To Integrate 
• AT&T M2X for real time sensor data 
• AT&T In App Messaging for SMS 
• Twitter 
• Facebook 
@clickslideCTO aaron@clickslide.co Clickslide.co
Mashup APIs 
@clickslideCTO aaron@clickslide.co Clickslide.co 
• Facebook 
• Twitter 
• SMS
Test The Integration 
@clickslideCTO aaron@clickslide.co Clickslide.co
Structure The Data 
@clickslideCTO aaron@clickslide.co Clickslide.co
Download NML.js 
• https://github.com/clickslide/NML.js 
@clickslideCTO aaron@clickslide.co Clickslide.co
Publish The API 
• Generates XML, JSON, JSONP REST 
endpoint for your mashup. 
@clickslideCTO aaron@clickslide.co Clickslide.co
Create Cordova Ready App 
@clickslideCTO aaron@clickslide.co Clickslide.co
Prepare App Views 
@clickslideCTO aaron@clickslide.co Clickslide.co 
• JSViews 
– ./templates/jsviews/loading-progress.html 
– ./temples/jsviews/login-register-auth.html
Instantiate NML.js 
@clickslideCTO aaron@clickslide.co Clickslide.co
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. 
@clickslideCTO aaron@clickslide.co Clickslide.co
Where JavaScript Shines 
• Web Hooks 
– to Node.js Server 
• Web Sockets 
– Server to Client(s) 
– Client to Client(s) 
@clickslideCTO aaron@clickslide.co Clickslide.co 
• Ajax 
– Client to APIs 
– APIs to Client(s)
Tools 
• Server Frameworks 
@clickslideCTO aaron@clickslide.co Clickslide.co 
– 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 
apps 
• Use APIs to get Data into your Apps 
• HTML5 is the future! 
@clickslideCTO aaron@clickslide.co Clickslide.co
Sign Up Today 
http://clickslide.co 
@clickslideCTO aaron@clickslide.co Clickslide.co

More Related Content

Recently uploaded

Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityRandy Shoup
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.Ritesh Kanjee
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...telebusocialmarketin
 
Technical improvements. Reasons. Methods. Estimations. CJ
Technical improvements.  Reasons. Methods. Estimations. CJTechnical improvements.  Reasons. Methods. Estimations. CJ
Technical improvements. Reasons. Methods. Estimations. CJpolinaucc
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...MyFAA
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxBarakaMuyengi
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements SolutionsIQBG inc
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckNaval Singh
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeKaylee Miller
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfCloudMetic
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energyjeyasrig
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevpmgdscunsri
 
Practical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfPractical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfICS
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easymichealwillson701
 

Recently uploaded (20)

Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
 
Technical improvements. Reasons. Methods. Estimations. CJ
Technical improvements.  Reasons. Methods. Estimations. CJTechnical improvements.  Reasons. Methods. Estimations. CJ
Technical improvements. Reasons. Methods. Estimations. CJ
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements Solutions
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deck
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller Resume
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdf
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energy
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
 
Practical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfPractical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdf
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easy
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

HTML5 Powered Internet Of Things Products

  • 1. Introduction ActionScript Cordova JavaScript PHP • Ruby • C++ • C# • Java AWS Jelastic • Heroku Node.js • Binary Packets APIs!!!!! @clickslideCTO aaron@clickslide.co Clickslide.co
  • 2. HTML5 Powered IoT Products JavaScript and the virtual API software stack. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 3. 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. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 4. What are IoT Products? @clickslideCTO aaron@clickslide.co Clickslide.co
  • 5. “Smart” vs. “Intelligence” Smart and intelligent are not the same @clickslideCTO aaron@clickslide.co Clickslide.co
  • 6. Internet Connected What does it take to get an object online? @clickslideCTO aaron@clickslide.co Clickslide.co
  • 7. Sensor Data Quick Demo of using sensor data in JavaScript using: • Simply.js • Pebble Watch @clickslideCTO aaron@clickslide.co Clickslide.co
  • 8. IoT Infrastructure JavaScript everywhere! @clickslideCTO aaron@clickslide.co Clickslide.co
  • 9. JavaScript in the browser • Data Analysis • Business Logic @clickslideCTO aaron@clickslide.co Clickslide.co
  • 10. JavaScript in Cordova (Phonegap) • Quick demo of App structure for Cordova • Event Driven • Templates – Jsviews is awesome  @clickslideCTO aaron@clickslide.co Clickslide.co • Plugins
  • 11. JavaScript on Arduino • Johnny Five • Firmata • Quick Demo of LED blinky @clickslideCTO aaron@clickslide.co Clickslide.co
  • 12. I APIs @clickslideCTO aaron@clickslide.co Clickslide.co
  • 13. HTTP vs. Web Hooks vs. Web Sockets @clickslideCTO aaron@clickslide.co Clickslide.co
  • 14. HTTP Keep it in the client! Large packets of data all at once @clickslideCTO aaron@clickslide.co Clickslide.co
  • 15. Web Hooks If This Then What? Push notifications for servers @clickslideCTO aaron@clickslide.co Clickslide.co
  • 16. Web Hooks POST 1 : 1 No chain of events @clickslideCTO aaron@clickslide.co Clickslide.co
  • 17. Web Sockets Server Client “Real Time” messaging for Apps @clickslideCTO aaron@clickslide.co Clickslide.co
  • 18. Information Routing Node.js API Node.js Service Node.js Service Node.js Service TCP TCP TCP Think of Node.js as a message router for Web Sockets and Web Hooks. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 19. Relieve Stress Move business logic to the front-end @clickslideCTO aaron@clickslide.co Clickslide.co
  • 20. API Intelligence API Front End IaaS BaaS Quantifiable Self Social, Geo, SaaS, etc. API API Set it and forget it @clickslideCTO aaron@clickslide.co Clickslide.co
  • 21. Front-end Only API Front End IaaS BaaS Web Socket Router Quantifiable Self Social, Geo, SaaS, etc. API API Business logic in a JavaScript client. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 22. Data Structuring • Reusable Logic • Reusable components • Plug-’n’-play intelligence with APIs • Focus on building beautiful front-ends • 100% JavaScript applications @clickslideCTO aaron@clickslide.co Clickslide.co
  • 23. Software Stack Client (HTML/CSS/J avaScript) databases Servers Programming required Traditional proprietary software stack @clickslideCTO aaron@clickslide.co Clickslide.co
  • 24. Software Stack Using APIs Server HTML5 Client databases APIs Programming required Traditional proprietary software stack leveraging APIs @clickslideCTO aaron@clickslide.co Clickslide.co
  • 25. Virtual API Stack Client (JS/HTML5) APIs Programming required API Powered JavaScript Client @clickslideCTO aaron@clickslide.co Clickslide.co
  • 26. Virtual API Stack with Datadipity Datadipity APIs Front-end Only – JavaScript Everywhere @clickslideCTO aaron@clickslide.co Clickslide.co NML.js Client Programming required No Programming required
  • 27. Security • No data stored on Client • PCI Compliant • Copyright Algorithms where needed • SSL • MD5/SHA Hash @clickslideCTO aaron@clickslide.co Clickslide.co
  • 28. Security Continued @clickslideCTO aaron@clickslide.co Clickslide.co
  • 29. BREAK TIME Recap • Virtual API Software Stack – No More Backend! • APIs Provide Intelligence to smart objects • JavaScript Firmware @clickslideCTO aaron@clickslide.co Clickslide.co
  • 30. My Hardware Setup @clickslideCTO aaron@clickslide.co Clickslide.co
  • 31. The Firmware • Johnny-five for Node.js – Also, Cylon-js etc.. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 32. The Webhook • Get data from M2X locally with Ngrok @clickslideCTO aaron@clickslide.co Clickslide.co
  • 33. The HTML • Socket.io • Bootstrap • JSViews • Jquery • Modernizer • NML.js @clickslideCTO aaron@clickslide.co Clickslide.co
  • 34. The App @clickslideCTO aaron@clickslide.co Clickslide.co
  • 35. APIs To Integrate • AT&T M2X for real time sensor data • AT&T In App Messaging for SMS • Twitter • Facebook @clickslideCTO aaron@clickslide.co Clickslide.co
  • 36. Mashup APIs @clickslideCTO aaron@clickslide.co Clickslide.co • Facebook • Twitter • SMS
  • 37. Test The Integration @clickslideCTO aaron@clickslide.co Clickslide.co
  • 38. Structure The Data @clickslideCTO aaron@clickslide.co Clickslide.co
  • 39. Download NML.js • https://github.com/clickslide/NML.js @clickslideCTO aaron@clickslide.co Clickslide.co
  • 40. Publish The API • Generates XML, JSON, JSONP REST endpoint for your mashup. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 41. Create Cordova Ready App @clickslideCTO aaron@clickslide.co Clickslide.co
  • 42. Prepare App Views @clickslideCTO aaron@clickslide.co Clickslide.co • JSViews – ./templates/jsviews/loading-progress.html – ./temples/jsviews/login-register-auth.html
  • 43. Instantiate NML.js @clickslideCTO aaron@clickslide.co Clickslide.co
  • 44. 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. @clickslideCTO aaron@clickslide.co Clickslide.co
  • 45. Where JavaScript Shines • Web Hooks – to Node.js Server • Web Sockets – Server to Client(s) – Client to Client(s) @clickslideCTO aaron@clickslide.co Clickslide.co • Ajax – Client to APIs – APIs to Client(s)
  • 46. Tools • Server Frameworks @clickslideCTO aaron@clickslide.co Clickslide.co – 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
  • 47. 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! @clickslideCTO aaron@clickslide.co Clickslide.co
  • 48. Sign Up Today http://clickslide.co @clickslideCTO aaron@clickslide.co Clickslide.co

Editor's Notes

  1. Hi, I’m Aaron Franco. I’m the CTO of Clickslide. At Clickslide we created a technology that enables you to integrate APIs without programming. I love JavaScript and APIs. The things in stars are my expertise and the rest I have experience working with. But this is not why I’m here today…
  2. I’m here to talk about HTML5 Powered IoT Products. I’ll do my best to go over all the things that enable the virtual API software stack. Every example I show you will be written in JavaScript. I’ll go over some infrastructure and walk you through an example.
  3. Hi, I’m Aaron Franco. I’m the CTO of Clickslide. At Clickslide we created a technology that enables you to integrate APIs without programming. I love JavaScript and APIs. The things in stars are my expertise and the rest I have experience working with. But this is not why I’m here today…
  4. IoT products are anything with a sensor connected to the internet, such as glasses, watches, thermostats, bracelets, smoke detectors and so on… These products usually have an App for settings, configuration, identity and analytics. Traditionally, we would refer to these things as “Smart” objects.
  5. After some time working in software and connecting software to objects and sensors, we start to find that “Smart” isn’t really smart. It simply means the object is connected to the internet. Once the data is processed, analyzed, and visualized in the App, the object becomes “intelligent.” Using the Jawbone UP as an example, the bracelet would be useless without the App and the App is useless without the data. And, without APIs there would be no data. So, not only do APIs connect these things to the internet, they also add the intelligence required to make these products useful and “smart.”
  6. There are many ways to get an object or sensor connected to the internet. One of the most popular today is Bluetooth LE connected to a mobile App. This way is quickly becoming a standard. Other radio frequencies such as ZigBee, Zwave, and Wifi are also being used but have not really hit mainstream like Bluetooth has. Bluetooth seems to be more prominent in wearables and beacons, while the rest are mainly used inside the home.
  7. There are a lot of great products that fit directly into the JavaScript ecosystem. Many of the ones you see are used regularly for Apps and products. I have included some JavaScript specific things like JohnnyFive and Phonegap. There are obviously many more great tools out there, but what you see here makes up most of the HTML5 IoT infrastructure. Heroku and Amazon for hosting Node.js, AMQP for messaging between servers, Arduino for prototyping, Johnnyfive for prototyping Arduino with JavaScript, Phonegap for Native app deployment, NoSQL databases for scale and finally Angular and backbone for GUI. Even with just these tools it is not hard to imagine a software world that is all JavaScript everywhere!
  8. Data Analysis can be difficult in the browser. However, if you have access to an API that can manage the heavy load of finding insights, then the data can be offloaded to that API. Once the analyzed data is returned, it can be easily visualized. Business logic has traditionally been kept to the server side, but we feel that it belongs more at home in the client. Business logic to a designer is UX.
  9. Phonegap is great for analyzing sensor data before it is sent to the server. It is also great for packaging all your HTML5 technologies on multiple platforms.
  10. Johnny Five combined with Firmata make a great pair.
  11. Now I’d like to move on to discuss how APIs play a part in this infrastructure for IoT products.
  12. For the most part, these are the APIs we have. There are some hardware APIs and lower level sensor APIs, but they aren’t directly consumed in HTML5. These are. However, the only true protocol that enables APIs is HTTP. Web Hooks and Web Sockets may appear to be APIs, but they are not. I’ll explain what I mean.
  13. HTTP is the strong man of data exchange. HTTP can send small packets and very large packets of data over the internet. This protocol is the reason APIs are so powerful. True APIs leverage HTTP to send moderate to large amounts of data over the internet. Typically, the data is sent from a remote server to a consumer’s client application or website. ALL APIs work over HTTP.
  14. Web Hooks are very simple events that are triggered after API data is received by a server. Web Hooks are also used over HTTP. However, they are not APIs. You cannot write a program to a Web Hook. You can only handle the event data.
  15. Web hooks are write-only HTTP requests. There is no chain of events or programmable interface. It is simply a notification. In fact, most companies that use Web Hooks have discuss the load placed on servers due to long polling. Companies like IFTTT are spending a lot of money long polling APIs waiting for something to change so they can then POST data over HTTP.
  16. After my experience working with WebSockets, I think the bicycle chain is a great analogy for it. Each link represents a small bit of data you are sending in response to some event. The main intent for web sockets and an example always used, is a chat application. When leveraging this technology in IoT, web sockets are best used to send sensor data readings to the server for processing or messages between apps that XYZ sensor was triggered. Like Web Hooks, Web Sockets notify other parts of the IoT product ecosystem. However, since its bidirectional, messaging is a more suitable term.
  17. The flow of events / messages looks something like this. This is a similar architecture to the one that Firebase offers as a service. Firebase is mainly for data storage as they don’t offer any way to analyze or process data. We could build all this ourselves, even do a hybrid of this with something like Firebase.. .OR…
  18. We could move our processing and business logic to the front-end and not have to concern ourselves with a complicated back-end. By doing so, we can eliminate the load on the server, which will create a more reliable platform for our product. In fact, in today’s API economy, you no longer need to build anything server side. You can leverage great tools like Google Prediction API or Wolfram Alpha for data processing. There are tools like IsaasCloud that provide a simple API to gamify any App.
  19. So, thanks to API intelligence, we can create robust, scalable applications completely in the client using HTML5. Enabling us to do more! Faster! Reliably! At massive scale! Using HTML5! “Set it and forget it”. I know this seems far-fetched now, but I will lead you on a journey to an understanding of how this is possible with a software development technique we have developed at my company, Clickslide, using our product Datadipity. The technique is possible without our product, but to do it without would take a very long time and require a lot of code. I will show you how this technique works and the impact is has on your programming.
  20. You can see in this slide, I threw in a Web Socket router. This is a Node.js server that re-routes Web Sockets messages and Web Hook notifications back down to my front-end. Once they arrive, I use those events to trigger API functions which may read/write/delete data depending on the type of event. You can put one of the servers up on heroku and use it for all your prototyping. Once you have an app that starts to scale up, you can isolate a Heroku account for that app and just keep adding Dynos as it scales. This will make it very easy to manage your app and scale the client.
  21. Data structuring is a key facet of this new technique. By normalizing all the data coming to my app from the various APIs, I leverage in my virtual API stack and my code becomes very predictable and manageable. These are the benefits of using structured data in your app.
  22. In traditional software development, teams would create a software stack of services for their project. Usually, these will be running on multiple VMs or bare metal and load balanced between themselves and the client. In such a situation the client will most likely be rendered in the server and displayed using templates. Classic examples of this occur often in Ruby on Rails and PHP apps. Node.js has also gone this route due to its Asynchronous behavior. Which is great for PHP and Ruby on Rails developers to make the transition to Node.js. All connections and servers are written and abstraction layers between the data and client are managed in an MVC type of framework.
  23. This is a more traditional approach to API-based development. Development teams will take a traditional approach but also leverage API technology in their server platform. The data and connections are typically coded in an MVC type of framework and the team will devise an Adapter strategy for managing all the different APIs required in the project.
  24. This is possible but very cumbersome. Writing a service layer for each API as well as managing redirects for every API authorization process will become unmanageable very quickly. There are some APIs that won’t support front-end authentication as well…
  25. The tools we use at Clickslide to develop software drastically alter the way one even approaches software development. By isolating the code to just the client, we not only simplify the way we work, but even the way we approach development has changed. I can offload most of the heavy lifting to APIs and then plug & play that intelligence into my UX via my business logic.