Trend 1 – Alexa / Voice / AI Chat

Screen Shot 2017-06-27 at 7.29.21 AM

What does user experience look like without a mouse & keyboard or easy to enter form fields? How do people talk to AI systems to solve problems? These systems can be through devices like Alexa or virtual systems like automated chatbots. Understanding psychology and human behavior become just as valuable as business knowledge when designing these systems. Because of this we will see new software architectures come into play that deal with these variations and have multiple and guided user flows.

There are two main components of developing an apps for Alexa, intent schemas and utterances.

  • Intents: An intent represents an action that fulfills a users spoken request.
  • Utterances: A likely set of spoken phrases that are mapped to intents.

Here’s a sample intent for a few commands I’ve used to control my house.

{
  "intents": [
    {
      "slots": [
        {
          "name": "Command",
          "type": "LIST_OF_COMMANDS"
        },
        {
          "name": "OnOff",
          "type": "LIST_OF_ONOFFS"
        }
      ],
      "intent": "SendJarvisCommand"
    },
    {
      "intent": "AMAZON.HelpIntent"
    }
  ]
}

Intents also have slots. For example:

LIST_OF_COMMANDS --> lights | porch | yard | backyard | frontroom | hallway | garage | basement | workbench | wemo | bedroom | tv room	
LIST_OF_ONOFFS --> on | off | dim

The list of utterances, or ways users can interact with this data might look like:

SendJarvisCommand turn the {Command} {OnOff}
SendJarvisCommand switch the {Command} {OnOff}
SendJarvisCommand {Command} {OnOff}

This text is then passed to a lambda function where it needs parsed and then returns a response.

So your traditional web form is converted like this.

  • Form Target – Becomes Intent (SendJarvisCommand) which is mapped to code.
  • Droplist & form fields – Becomes Slots
  • Utterances – not in traditional apps.

Because utterances don’t match up to anything in existing form fields most businesses and user experiences have holes that need filled. You can also chain intents to one another creating user flows that are out of order.

So whether it’s voice or AI chat you need architectures that deal with this dynamic workflow, getting some of the data at unexpected points during a conversation, then re-prompting the user in a dynamic way to solicit input required to complete the task.

Whether it’s retail for a shopping assistant or a chatbot to help you reset your password it’s really fun time because we need to invent something new!

3 Trends about to take off – Part 1

alexa-small2017 is halfway over and while some of these trends started a few yeas ago I think we’re about to see a few of these really catch-on, and by catch-on, I mean go mainstream and get funded.

Over the next week I’m going to discuss these three trends in a little more details and provide some code or projects to help you get started!

Trend 1 - Alexa / Voice / AI Chat

What does user experience look like without a mouse & keyboard or easy to enter form fields? How do people talk to AI systems to solve problems? These systems can be through devices like Alexa or virtual systems like automated chatbots. Understanding psychology and human behavior become just as valuable as business knowledge when designing these systems. Because of this we will see new software architectures come into play that deal with these variations and have multiple and guided user flows.

Trend 2 – JS/UI Architecture

SPAs (Single Page Applications) built on frameworks like Angular and React changed the way we think about building software. But for the longest time it was code, code, code without much thought of how it’s going to scale, and how it’s going to be supported in the enterprise. These systems need to hang around and be maintainable for 10 years, refactoring your apps should not have to entail complete system rewrites. Having architectures for UIs that allow for modular building and refactoring are crucial for adoption of these technologies that change every 9 months.

Trend 3 – Augmented Reality

There’s more and more data about the world around us. Why not provide more ways for people to interact with this data? Why make everyone have to look something up on a browser or an app? Voice combined with computer vision begins to bridge this gap. Google Glass still might not be the right use case, but camera augmentation, heads-up displays in cars, smart kiosk and push voice will be where this begins to have application.

Redux’s Connect Method Explained.

Sorry but all the explanations this far have been bad so I thought I’d simplify it.

In plain Redux without connect you need to manually bind up your store.dispatch to your components as well as subscribe to updates so you can call store.getState(). But your components are suppose to be dumb.

const store = createStore(reducer);

const render = () => ReactDOM.render( // turns ReactDOM.render into executable function
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  document.getElementById('root')
);

render();
store.subscribe(render);

So rather than manually linking dispatch and subscribing to updates we create two mapping functions, both of which bind the dispatch and the state to props of the ‘connected component’. So in this case all updates to this.store.getState().value are mapped to this.props.value and rather than mapping dispatch directly, we just wrap it and pass it in as a prop.

// create component
class ContainerComponent extends React.Component {
  render() {
    <PresentationComponent 
      value={this.props.value}
      onIncrement={this.props.onIncrement} 
      onDecrement={this.props.onDecrement} />
  }
}
// create state mapping
function mapStateToProps(state) {
  return { 
    value: state.value
  };
}
// add dispatch mapper 
function mapDispatchToProps(dispatch) { 
  return { 
    onIncrement: function() { 
      dispatch({type:'INCREMENT'}); 
    }, 
    onDecrement : function() { 
      dispatch({type:'DECREMENT'}); 
    } 
  }; 
} 
export default connect(mapStateToProps,mapDispatchToProps)(ContainerComponent);

Now when you call your components you can simply call the value passed in like so.

export default class PresentationComponent extends React.Component {
render() {
    return (      
        <div>
<span>{this.props.value}</span>
<button onClick={this.props.onIncrement}>Increment</button>
<button onClick={this.props.onDecrement}>Decrement</button>
        </div>
    );
  }
}

For more information you can checkout both of these github projects for reference.

JavaScript has become Java, sigh…

  • If I wanted to work with compiled languages, I would have stuck with Java.
  • If I wanted complicated build systems, I would have stuck with Java.
  • If I wanted complicated all encompassing frameworks, I would have stuck with Java.
  • If I wanted complicated unreadable error messages, I would have stuck with Java.
  • If I wanted to run server side code (Node) in my browser, I would have stuck with Java.

Something needs to happen to fix JavaScript making it more and more like Java is not the answer. Or is it time to move to another language with less ceremony???

libopenzwave.so error

If you’ve ever seen this error:

MinOZW: error while loading shared libraries: libopenzwave.so.1.3: cannot open shared object file: No such file or directory

or 

Error: libopenzwave.so.1.3: cannot open shared object file: No such file or directory

Just type this and it did the trick for me (Ubuntu 14.04).

sudo ldconfig /usr/local/lib64

 

Simple React Example

So I’ve been trying to find a simple React example, one that uses a flux implementation that works out of the box in a browser without any compilation or node stuff. I couldn’t find one so I built one. Here it is: https://github.com/scottpreston/react-examples.

This requires, RefluxJS, ReactJS, React-Dom and a Browser. You can use node to run it if you want, but that’s not required. Enjoy! (Copy-Paste & ES5 Compatible)

    // the action, nothing special
    var myAction = Reflux.createAction();

    // the store, holds state and listens to action.
    var myStore = Reflux.createStore({
        times: 0,
        init: function () {
            this.listenTo(myAction, this.actionCallback);
        },
        actionCallback: function () {
            this.times++;
            this.trigger(this.times);
        }
    });

    // the react component, which subscribtes to the store and updates it's state via listen
    var CountBox = React.createClass({
        displayName: 'CountBox',
        getInitialState: function () {
            return {count: 0};
        },
        componentDidMount: function () {
            var self = this;
            myStore.listen(function (data) {
                self.setState({count: data});
            });
        },
        render: function () {
            return (
                // the component in plain old JS no JSX
                    React.createElement('div', {className: "countBox"},
                            "Count Value =  " + this.state.count
                    )
            );
        }
    });

    ReactDOM.render(
            React.createElement(CountBox, {count: 0}),
            document.getElementById('example')
    );

    document.querySelector("#test").addEventListener("click", function() {
        myAction(null);
    });

Openzwave Binary Sensors

I’ve been struggling a bit with openzwave items because its so poorly documented. I’ve finally figured out how to get results from a door sensors with the node package node-openzwave-shared.

If you follow the install script, then just add this event handler below, you can receive updates.

zwave.on('node event', function(nodeid, nodeEvt) {
 console.log(new Date(), 'node event', nodeid, nodeEvt);
});

More live examples coming soon here: https://github.com/scottpreston/node-openzwave-examples

And via npm via npm-install node-openzwave-examples

Simple WebSocket & NodeJS Server Example

I’ve been searching for a NodeJS server for web sockets, but socket.io, required both the client and server to be run from within node. I wanted to connect to this server via a normal web page using WebSockets from HTML5. Here’s some code, hope you find it useful:

https://github.com/scottpreston/examples

Server Code

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 3000});

wss.on('connection', function (ws) {
    ws.on('message', function (message) {
        console.log('received: %s', message);
        ws.send(message + "!!!!");
    });
});

Client Code

    var websocket = new WebSocket('ws://localhost:3000');
    websocket.onopen = function (evt) {
        websocket.send("This Rocks!");
        websocket.close();
     }
    websocket.onmessage = function (evt) {
        console.log('RESPONSE: ' + evt.data);
    };