name: inverse class: center, middle, inverse layout: true <div class="header"><span>@unixbigot — Javascript Rules My Life</div> <div class="footer"><span>BrisJS Oct 2016</span></div> --- layout: true <div class="header"><span>@unixbigot — Javascript Rules My Life</div> <div class="footer"><span>BrisJS Oct 2016</span></div> --- class: center, middle template: inverse # Javascript Rules My Life A tour of .red[Node-RED], a visual, flow-based, NodeJS coding framework.  .bottom.right[ Christopher Biggs <br>.blue[@unixbigot] ] ??? --- .left-column[ # Agenda ] .right-column[ ### **Introduction**: * Node-RED in a nutshell ### **Concepts**: * Nodes and Flows and Dashboards, Oh My! ### **Applications**: * IoT, Data visualisation, Glue APIs ] ??? This presentation will give you a whirlwind tour of how the Node-RED visual programming system makes it easier than ever before to connect all data that surrounds us, and make it do more for us. Javascript just gets everywhere. And the Node-dot-js ecosystem has code for talking to so many other systems that it's uniquely placed to be the duct tape in your data toolbox. --- .left-column[ #Intro ] .right-column[ ## So what is Node-RED? * A project of the IBM Emerging technology group * Visual system for wiring the internet of things * Flow based data processing - The old "programmers will be obsolete" malarkey * Integrated dashboarding - or push to other services ] ??? The Node-RED environment is an open-source tool written in Node.JS which lets programmers (and arguably non-programmers!) visually connect devices, APIs, databases and webpages in interesting ways. At home, I use it to unlock my front door, and water my plants. At work, it tells me how many new customers I made today, and whether everything is OK on the website. For over 30 years we have been hearing that one day folks will be able to do programming just by dragging around blocks of logic and drawing lines between them. Node-RED brings that ludicrous idea startlingly close. In Business seetings I've used Node-RED to pull data from the business's existing data silos, and look at it in new ways. In combination with the "Blynk" application for iPhone and Android, I have an at-a-glance view of vital business status on my phone, and receive notifications when things go off the rails. You can produce dashboard applications and roll them out for one person or for dozens in just a few hours. --- class: middle ## Example - Open Sesame .img-800w[] ??? * an example to give you flavour * all the key concepts - inputs, messages, formatting, outputs * Node library at left * Tab bar at top * Deploy Button --- .left-column[ #Intro ## IoT ] .right-column.small.nopad[ ## Awesomesauce for IoT * Monitor environment, security, power usage * Control lighting, ventilation, blinds etc * Web and App control panels (incl mobile) .img-250w[] .img-250w[] ] ??? In the sphere of "The Internet Of Things" Node-RED can be the glue that connects all the sensors and controllers in your home or factory. I can tell from my phone whether I left the front door open, and I can unlock it again when I get home. As I leave the house, a screen detects my presence and tells me whether or not to grab an umbrella from the rack. The key thing about this tool is pluggability, you can take a vast array of software (and hardware) modules off the shelf and plug them together quickly to produce new value, connect independent systems, or just try out an idea. The winning ideas can either be shared and deployed as automated processes directly in Node-RED, or used as a specification for an implementation in traditional code. --- .left-column[ #Intro ## IoT ## BI ] .right-column.nopad.small[ ## Business Intelligence Supervillain Lair * Collect info from databases and message brokers * Interact with social media and chat platforms .img-250w[] .img-250w[] ] ??? In the workplace, Node-RED plugs into pretty much every database, message bus and notification system out there. What I see in the BI world is that everyone wants to be your one stop shop, so you typically end up with a number of silos that meet maybe 80% of your business needs, and don't play well with others. If you have your traffic data in elastic search, and your sales data in postgres, and your server status in redis, then if you want to produce some report or alert combining pieces of that you can build a flow in Node-RED that pulls all the information together. You can push the answers you come up with out by email, or web api, or slack, to a dashboard, or whatever. You can monitor what people are saying about you on social media and pick up on dips in sentiment hopefully in time to avoid a faceplant. --- .left-column[ #Concepts ] .right-column.nopad.small[ ## Installation and Setup * `sudo npm install -g node-red` - Optional Authentication (see config file in `~/.node-red`) - Can also serve assets and APIs at configurable paths * Web flow editor on port 1880 - Drag .blue[Nodes] from palette - Connect .blue[Nodes] into .blue[Flows] that process .blue[Messages] - Click .red[Deploy] to apply changes - Live example: .blue[nodered.unixbigot.id.au] ] ??? So how do you use Node-RED? * Easy to install from NPM - Out of the box in RasPi - See my blog soon for EC2 * Runs as a daemon - Listens on port 1880 - Everything is configurable, commented out examples - Separate area for static files - Separate area for web APIs * Interactive web editor is the core interface - Nodes are like subroutines (but more) - Flows are programs - Messages travel through flows --- .left-column[ #Concepts ## Nodes ] .right-column.nopad.small[ ## Nodes * Inputs: Manual, Timers, Network, IoT, PubSub, Database * Processing: Filter, Smooth, RBE, Analyse, Format * Output: web, email, Dashboard, PubSub, Alerts, SocMed, Chat, IoT * Services have configuration nodes * Function nodes run arbitrary code * Nodes are in own namespace, various levels of "globals" * Huge node library, installable as `npm` modules ] ??? * Three kinds of nodes - Inputs (generate messages) - Filters (process and propagate messages (or not)) - Outputs (receive messages, do stuff) * Configuration nodes for services * Function node can do pretty much anything (but don't) * Status text and symbols for nodes * Make your own nodes as simple npm modules --- .left-column[ #Concepts ## Nodes ## Flows ] .right-column.nopad.small[ ## Flows * Drag and drop flow construction * Debug sidebar * Flows are JSON data - clipboard exchange - easy to track and review changes .img-640w[] ] ??? * Flows are collections of connected nodes - Select a data source - Drag in a debug node - Build in stages - Deploy, or refresh to abort * Multiple inputs, use topic to distinguish * Nodes may output mulitiple messages, or to multiple links (or both) * Organise flows into libraries, easy cut and paste * Its all JSON, amenable to change tracking and code review * Links can be moved in editor * Links can jump tabs using 'link' node --- .left-column[ #Concepts ## Nodes ## Flows ## Messages ] .right-column[ ## Messages * Node receives an input as an object called `msg` * Most nodes operate on `msg.payload` * `msg.topic` often used to distinguish message type * Delayed message output is possible (eg after callback) * Handy features for rate limiting ] ??? * Messages are javascript objects * Some conventions - payload, topic * Query results and files easily converted to/from msg * Nodes can output more than one message per input message - ...or none - ...or asynchronously * Rate limiting and deadband filter are handy for avoiding message overload --- .left-column[ #Concepts ## Nodes ## Flows ## Messages ## Dashboards ] .right-column.small.nopad[ ## Dashboards .img-640w[] .img-640w[] ] ??? * One last concept - Own dashboarding now built in * site:1880/ui * Push values to widgets - Buttons, sliders, text, gauges, charts * Arrange widgets into groups and tabs * Responsive, presents well on mobile * Really great for smart TVs or tablets --- .left-column[ #Apps ] .right-column[ ## Applications * IoT and Home Automation * Robotics * Business Dashboarding * Rapid API development * Social Media Integration (cf. IFTTT) ] --- .left-column[ #Apps ## IoT ] .right-column[ ## IoT and Home Automation * Subscribe to MQTT messages * Read local or remote sensors * Control many IoT device families - Smart appliances (eg Philips Hue) - Talk to other hubs (Amazon, Google, Apple) - Anything with a remote control (TVs, garage doors, lights, pools) ] --- class: middle ## Environment monitoring .img-800w[] --- class: center, middle .img-320w[] .img-320w[] --- .left-column[ #Apps ## IoT ## Robotics ] .right-column[ ## Robotics * Read/Write pins on Raspberry Pi and other SBCs * Tethered Arduino etc. * PID control * Geolocation and mapping ] --- class: middle ## Sensor tracking and response .img-800w[] --- class: middle ## Home Automation Hub * Raspberry Pi running Node-RED * Arduino tethered over USB * Motion Sensors, LED lighting, Door Locks, Weather Display .center[.img-500w[]] --- class: middle ## Open Sesame (again) .img-800w[] --- .left-column[ #Apps ## IoT ## Robotics ## Dashboarding ] .right-column[ ## Business Dashboarding * Search most SQL and NoSQL databases * Filter, Smooth, Report-by-Exception * Built in HTML dashboard nodes * Push data to Blynk for iPhone/Android Apps ] --- class: middle ## Business Goal Monitor .img-800w[] --- class: center, middle .img-320w[] --- class: middle ## Server Error Monitor .img-800w[] --- class: center, middle .img-320w[] --- .left-column[ #Apps ## IoT ## Robotics ## Dashboarding ## Rapid Dev ] .right-column[ ## Rapid API Development * Create HTTP APIs * Bridge different kinds of APIs (eg REST to PubSub) * Websockets * Work with CSV, JSON and XML data ] --- class: middle ## Slack to MQTT API .img-800w[] --- .left-column[ #Apps ## IoT ## Robotics ## Dashboarding ## Rapid Dev ## SocMed ] .right-column[ ## Social Media Integration * Receive feeds from twitter * Recieve feeds from app stores * Post to slack, and monitor channels * Analyse, Summarise, Respond, Alert ] --- .left-column[ # Recap ] .right-column.nopad.small[ ## Resources, Questions ### Node-RED - Nick O'Leary, Dave Conway-Jones, et.al. - Website [nodered.org](https://node-red.org) + Doco, Node and flow library - Code: `npm` or [github](github.com/node-red) - Support: google group, slack team ### Me - Christopher Biggs - Twitter: .blue[@unixbigot] - Email: .blue[christopher@biggs.id.au] - Hire Me: http://christopher.biggs.id.au/ ]