Project X-Ray

Two of our Hybris Labs prototypes need a tag-to-YaaS mapping. Infinite Cart  uses NFC (Near field communication) where the Tag ID is mapped as product code (SKU number). For the Changing Room prototype we are using RFID (Radio-frequency identification) tags. When we started with this prototype you had to hold a RFID tag near an RFID scanner and then had to check the log files to find its ID.

With the RFID Action Reader, which we’re also using for our Expose prototype, you can read the RFID ID on a Raspberry Pi. But I also built a custom made Arduino Shield with an Indy RS500 chip (from Impinj), which sends the the RFID value via USB port. This made life much easier and gave me the idea for Project X-Ray.

X-Ray Vision

The idea of the X-Ray Project: you can use any scanner (Barcode, NFC or RFID) to automatically add the scanned product code. The name of the Project: Tom Brady can scan the defense of an American Football team, but Superman has X-Ray Vision.

YaaS Builder Module

The X-Ray YaaS Builder Module lists all products (or variants, if you use them) with its image, product name and an editable product code.

X-Ray Demo Screenshot

X-Ray Demo Screenshot

The selected product will be saved when the user hits Return or a scanner sends a Return ‘\n’. This allows you to use a simple barcode scanner, or a NFC/RFID scanner with an Arduino Leonardo which uses the HID protocol. The HID (Human Interface Device) protocol simulates a keyboard. In this case my RFID or NFC scanner works like a keyboard and I could use it here (RFID: E28011606000020507B259A0).

An alternative is WebUSB. In this case the scan result will be only available in the browser. Another effect is that it is independent of the keyboard layout (HID shows other characters, if you’re using Dvorak as keyboard layout).

Subscribe Module

If you’re interested in this Builder Module you can subscribe it as Private Package with the Version ID 58a310e5b11af50013e341af.

Some technical stuff

The YaaS Builder Module is a static web module using RESTangular. The module runs on Cloud Foundry. For the X-Ray demo I’ve been using some images from the RetroPie project. You may have heard about our Arcade Machine here at Hybris? We are all ‘retro‘ now 🙂

And because I’m lazy, I’ve built a tool which adds products via YAML file into YaaS. The name of this tool: Megablast … yes, from the retro game Xenon 2 Megablast.

yaas.js examples

Do you remember our blog post about yaas.js?

In the meanwhile YaaS is also available in Germany and therefore the screenshots are a little bit outdated. An always up-to-date documentation you can find on the YaaS Builder page.

Another thing we’ve changed, was to add some tests. Therefore the example we mentioned in our previous blog post is now a test case which needs a testing framework (mocha). But don’t worry, I’ve add some examples to yaas.js. Just copy and adjust the test-config-TEMPLATE.json to test-config.json and run an example.

14% OFF – Coupons with Node-RED

YaaS offers a coupon services. The “Coupon Management (Beta)” package can be added with the YaaS Marketplace via the YaaS Builder (Administration  – Subscriptions). With “Configure it” you could start to add coupons in the Builder, but we will do it in Node-RED and our percentage value will depend on temperature values.

Before we start we also have to manage the required scopes in the Builder Clients. I’ve selected all 4 scopes and as you can see there’s also a hybris.coupon.redemption event for PubSub (the previous blog post Order created goes more into PubSub and events).

Create a coupon

Let’s start to create a coupon. The easiest way would be to use an inject node with a value. But we want to use temperature values. Therefore I’ve installed the openweathermap Node-RED library and obtained an API key on OpenWeatherMap.

Drag & drop the openweathermap node and configure it:

Configuration OpenWeatherMap

OpenWeatherMap configuration for Munich.

With a change node you change the ‘tempc’ value to a payload:

change tempc to payload

Change the tempc property to a payload.

Now we add a coupon create node and select Percentage as the Type. We connect all the nodes, add an inject node and deploy it. When you now press the inject node you see the coupon code and the percentage value:

create coupon

Use a temperature value to create a coupon.

But before you get too excited, the summer in Munich is cold. So the discount price isn’t so high and it would only make sense if you sold winter stuff. For summer clothing and cold drinks it would make sense to start at 40 degree Celsius and subtract the temperature.

Get coupon and apply it

You can take a look at the Builder in Coupons to see the new created coupon. To get the coupon in Node-RED, add the coupon get node to the flow and configure it. Also add an inject node with the coupon text as string and a debug node:

get coupon node

Show a specific coupon.

When you now press the inject node you can see the coupon data in the debug tab on the right side. To apply this coupon to a shopping cart, just drag & drop a apply discount node and configure it for a customer:

apply coupon

Get a specific coupon and apply it.

After deploying it and pressing the inject node again the discount is added to the customer shopping cart. Open the shop, log in with the customer account and take a look at the shopping cart. You may have to add a product to see it:

 

Shopping cart with coupon

Shopping cart with the apply coupon.

The weather forecast for the weekend looks better. Sunday should be 25 degrees, so enjoy the shopping, weather and weekend with some YaaS and Node-RED hacking:

  • Take the temperature from tomorrow’s weather forecast
  • Use a function node to subtract a temperature value from 42
  • Use Fahrenheit divided by π 🙂
  • listen to the hybris.coupon.redemption PubSub event

Further information:

Order created

Have you looked deeper into the checkout and order API? In the order documentation you can find an Events section. These events are published when e.g. an order is created. With the PubSub service you can consume these events.

PubSub

The PubSub service enables clients on the YaaS platform to integrate using asynchronous message-based communication.” For more information you can read the PubSub documentation.

I will show you how you can use the PubSub nodes. Yesterday I updated the PubSub nodes. Therefore you should update the YaaS Node-RED modules (hint: npm install node-red-contrib-yaas).

Every time an order is created, PubSub sends a hybris.order.order-created event. Just drag & drop the PubSub read node into the flow and double click to configure it. The YaaS Credentials should be fine and also the Topic Owner Client and Event Type are already filled in with the correct values. If not, you need to update YaaS Node-RED 😉

With the PubSub read node all (new) orders, even those who are created by a shop, will return the order number. Adding a salesorders node will return all entries of this order:

PubSub and Salesorders nodes

Reading PubSub order created and the order items.

At this year’s Hybris Summit I used this to combine it with Node-RED and our Moto prototype. Every ordered item triggered a blinking on a Moto device which represented the product on top of it.

Moto at Hybris Summit 2016

Moto at Hybris Summit 2016.

 

PubSub read and Moto

Read order created and blink moto.

Publish events

With PubSub you can also publish your own events and listen to them. Therefore drag & drop the PubSub publish node to the flow and configure the Event Type. Now you can also add an inject node to send something to PubSub.

With a PubSub read node you can read this event when you use the same Event Type and leave the Topic Owner Client empty. Add a debug node to read and display this event.

PubSub publish and read

Sending and reading button.1 event with PubSub. 

Now you can find a product, add it to a shopping cart, check out and listen to an order created event. Do you need more? Of course, people love coupons 🙂

Further information:

Triggering and checkout with Node-RED and YaaS

In the last blog post we saw how to add a product to a shopping cart. This was done by pressing a button in Node-RED which was admittedly not that exciting. Therefore I will now show you some triggers which add something to a shopping cart and also to do the checkout.

Lets trigger the triggers

We’ve already seen the inject node as a trigger and Node-RED has more. At some Hybris Labs prototypes we are using the following nodes:

  • mqtt
  • twitter
  • arduino

MQTT

With MQTT you have an MQTT broker (server) where one or more clients can connect, send a message to a topic and subscribe to this or other topics. This allows, for example, an IoT device to send a temperature value for a specific topic (e.q. /labs/desk7/temperature) and for another device to subscribe to this topic and get notified when that new message arrives. Our Hybris Labs Moto prototype detects when someone is standing in front of a Moto device and sends a presence notification to an MQTT broker. An MQTT node could subscribe to this topic, a change node creates a product id for the product by ID node, which then adds a product to the shopping cart.

MQTT and YaaS nodes

A Moto presence event do an add to card.

Twitter

Node-RED has a twitter node where you can connect your Twitter ID, select where to search (e.g. all public tweets, follower, specific user or direct message) and what to search for. This allows you to add a product to a shopping cart when someone tweets about your product. In this case you can also use the change node to create the correct product id.

Twitter and YaaS nodes

A tweet adds a product to a shopping cart.

Arduino

One of our demos uses a big blue button to do a checkout. The button has an Arduino inside which is connected via USB to a laptop where Node-RED is running. The Arduino nodes for Node-RED are also installed like the YaaS nodes. For further information on how to install it, take a look at Interacting with Arduino.

So, every time the button is pressed the node triggers an event. From a ‘mechanical’ point of view, a button is made out of some metal and there will be lots of connections made the moment the metal points comes into contact. The magic is to get only one connection – called debouncing – and you can do it with the delay node:

Arduino and checkout node

Connecting a button with the YaaS checkout node.

debouncing configuration

Delay node configuration to debounce a button.

When you now press the button the first event gets through and the others are blocked for a second. This is fine, as a maximum of one checkout per second should be adequate 🙂

Talking about checkout – let’s play with the checkout node.

Checkout Service

If you’ve setup a new YaaS project, you also have to do some configuration in the YaaS Builder for the Commerce Settings:

  • Payment Settings: setup a stripe.com account
  • Shipping Settings: define a zone and shipment method

I also recommend to do a checkout on the shop and fill out the customer name (next to the email address) and add a shipping address.

Now we can drag & drop the checkout node in our flow and configure it. We already have Customer and YaaS Credentials. For the Stripe Credentials you have to use the “Test Publishable Key” from your stripe account. You can find test credit card numbers and more information on the stripe documentation page.

After connecting the output of the delay node with the checkout node and the output with a debug node, you should see an order id, when the big blue button is pressed.

Big Blue Button

Big blue button.

In my next blog post I’ll go into PubSub and who we can listen to an order event.

Further information:

How to use YaaS with Node-RED

As you’ve seen in our previous blog post the YaaS Client SDK for Node.js is already available and open sourced. If you haven’t read it yet and are setting up a YaaS project, I recommend to start with it first. It’s a good starting point to setup a new YaaS project, learn how to subscribe to the Product Content (Beta) package and tells you where you can find the Client Credentials. All the things we need for the following Node-RED examples.

Install Node-RED

After you’ve setup a YaaS project with the YaaS Builder you are ready to install Node-RED. You install it with npm, therefore you need Node.js installed. Yaas.js requires a Node.js version 4.0 or higher. For more information on how to install Node.js and Node-RED the Node-RED Installation page explains it very nicely.
For those who are familiar with Node.js and npm, this is what you need:
    sudo npm install -g --unsafe-perm node-red
Node-RED will be installed globally, so you only have to type node-red in a Terminal and the Node-RED server starts.
When Node-RED starts you can see the Node-RED version, Node.js version and also the User directory. The User directory is the path where you install node-red-contrib-yaas

Installing node-red-contrib-yaas

To install node-red-contrib-yaas, you stop Node-RED, change to the Node-RED User directory (see above) and install it with the following command and then start it again:
     cd ~/.node-red
     npm install node-red-contrib-yaas
     node-red
This will create a node_modules directory (if it doesn’t exist) and install all necessary packages, including the YaaS Client SDK.
 
When you startup Node-RED again and open a browser at http://127.0.0.1:1880/ (or refresh the page) you will see the Node-RED application:
 
Node-RED overview with YaaS nodes

This is a Node-RED overview with a YaaS Node.

On the left side is a list of all installed Nodes, grouped by Input, Output, Function and also Yaas. In the middle of the window you define the flows and on the right you can see an Info and Debug tab. When you select a node (on the left side) the Info tab shows information about this node. The Debug tab allows you to show debugging information from the debug node.
 
Lets start.

Our first Node-RED flow – product by query

First we select the “products by query” node and drag & drop it in the flow. Then we add an inject node from the input group and a debug node from the output group.
 
When you double click on the node you can configure it: 
 
YaaS Credentials input

YaaS Credentials with Client Id, Client Secret and Application ID.

To configure the YaaS Node you need the YaaS Credentials and Application ID. You can find this information in your project. Open in the YaaS Builder your project and click on Client of the left side navigation. See also the YaaS Client SDK blog post to learn how to setup a YaaS project.
 
The Application ID (Identifier) is also at the Client section where Client ID and Secret is.
 
Change the inject node to String and the text to sku:"YOUR PRODUCT NUMBER" (e.g.sku:"8700810087"). You can find the Product Number at a defined Product (note: the quotation marks are required).
 
configuring inject node

Edit inject node to set the product number (sku).

Now you connect the inject Node with the “product by query” Node and the end of it with the debug Node. At the end you hit the red Deploy button (top right) and then you press the inject Node. If everything went fine, you should see a JSON output on the debug tab:
[ { "product": { "id": "569fa69c924e1f2bc1724d7b", "sku": "8700810087", "name": "Wizard Queen", "description": "Fight mystic wars on the chessboard! Let the White Witch’s powers guide you to victory!", "published": true, ...
The JSON output contains the product id, the sku (Product Number), name, description, and so one. We need the product id for our next example.

Product by ID Node example

The product id can be used for the “product by ID” node. Therefore Drag & drop the “product by ID” node in the flow and configure it with a double click. In this case the Credentials should already be filled and you only need to hit the Done button.
 
Now add another inject Node with the String of the product Id (e.g. 569fa69c924e1f2bc1724d7b). Connect these nodes and also with the debug node (or add a new debug node). Deploy, clean the debug tab and then press the new inject Node. You should see the same result as before.
 
YaaS nodes

YaaS nodes ‘product by query’ and ‘product by ID’.

We have two different ways to find a product and we are ready to add this product to a shopping cart.

Lets go shopping – add to cart example

Drag & drop the “add to cart” node and configure it. Therefore you need a customer, which you can register on your YaaS shop in a browser window (http://shops.yaas.io/YOUR_CLIENT_IDENTIFIER) . Credentials and the other options are the same as before.
 
Now connect the end of “product by ID” with the “add to cart“, deploy it and hit the inject node.
YaaS node add to cart

Add to cart node connected.

When you open your shop and login with the customer account, you will see the product in the shopping cart. Just hit a few more times the inject Node, refresh the shop page and you’ll see how the shopping cart is filled up.
 
These are the basics to start and play further with:
  • instead of only one product use other products
  • use name instead of sku as search query at product by query
  • and more advanced: take the product id from the product by ID result, change the msg.payload (hint: payload[0].product.id) with a change node and use the result for product by query
Next time I’ll show how a trigger can be used to add a product and to do a checkout.
 
Further information:

It seems Lars lost his brain – in Future

During Oktoberfest many people lose something like an umbrella, a shoe and control. But it seems Lars lost his brain that lies on his desk with some LEDs under it.

“Lars, is this your brain?”

“No, Lars, this is not our brain, it is just some slimy gimmick, which looks like one. I’m fine, don’t worry.”IMG_0433

“And why are there LEDs under it?”

“This whole thing is a prototype for a project. First of all I’ve connected a group of three LEDs and let them fade and pulse. The next thing was to control it with my Laptop. Therefore I’m using the USB connection to the Arduino and send the CPU idle time of my Laptop as numbers. The more my computer thinks the faster the brain pulses.”

“Can you say something about the project?”

“Yes, but we can also time travel to it.”

“What? Do you think we can time travel?”

to be continued…