Hybris Labs in 2016 – The Year of IoT

Parallel to the SAP Hybris Digital Summit  2017 we want to take a look at the past year through the eyes of Hybris Labs. We decided to name our 2016 “The Year of IoT”. The very first Labs IoT prototype does of course date back to 2014 and came in the shape of the original Smart Wine Shelf. But what we like to refer to as the “mastery of IoT” involves achievements such as the replication and adaptation of our prototypes, enabled through YaaS, the distribution of our demos to events across the globe, and the very first Hybris Labs prototype with an SAP Hybris customer.

 

BASF & Hybris Wine Shelf

After showing Bullseye at the SAP Hybris Global Summit in Feb 2016 it was “HEINEKEN” who first approached us with a customisation request for an internal event. The result was the beer selector which we then later also showed at the Hybris Americas Customer Days in Fort Lauderdale.

“BASF”, a world leading chemistry company but also one of Germany’s largest wine distributors, decided to take the Bullseye prototype one step further. The BASF & Hybris Wine Shelf is the first pilot project Labs engaged in together with a customer and is currently in use in the BASF “Weinkeller” in Ludwigshafen.

 

Bottomless shopping carts and robots on trucks

There was more to the past year than just Bullseye. The close collaboration with the SAP Hybris customer “hansgrohe” allowed us to frequently present our Infinite Cart prototype in an eye-catching setup and produce a video that is equally stimulating to its viewers.

Without living up to the clichés that are commonly associated with this term, Hybris Labs are often referred to as rock stars. Reluctantly accepting those honours, we did manage to get one of our team members on a tour bus – the “Beyond CRM Truck”. His name… her… its name: Pepper.

Pepper was the only one of us tough enough to deal with life on the road. As an extension to Bullseye, Pepper handed out candy to truck-visitors all across Europe.

 

The golden age of computed artificiality

In the past our lay on the digitization of the physical retail space. In 2017 Hybris Labs will be exploring the potential of virtual reality, augmented reality, and artificial intelligence in the shape of voice controlled digital assistants and conversational commerce. We’re hoping to present the first results of this research in spring. With other words: New Hybris Labs prototypes are coming soon!

“What the computer in virtual reality enables us to do is to recalibrate ourselves so that we can start seeing those pieces of information that are invisible to us but have become important for us to understand.” – Douglas Adams

Perhaps we’ll even find the question to the answer “42”…

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.

Changing Room on YaaS

We now have another Hybris Labs prototype running entirely on YaaS – The Changing Room.

Screen Shot 2016-12-01 at 09.51.33 (2)

After Bullseye and Infinite Cart this is now the third of our prototypes we have integrated with YaaS. Again, the biggest benefit lies in the flexibility to configure the demo to specific needs. “Product content management with YaaS Builder” we call it. In less fancy words: we can easily exchange the products.

Screen Shot 2016-11-30 at 14.51.34

There is of course a bit more to it than that. At the end, one of our main goals is to demonstrate the possibilities of combining innovative ideas with SAP Hybris software. It also allowed us to add some new features:

  • Customer loyalty card detection on customer opt-in
  • Transfer of products currently in changing room to customers shopping cart on mobile device via QR code

IMG_7571 1

This nicely rounds off the Changing Room story. If we wanted to, we now could speak of a ‘customer journey’…

Changing Room conquers new region

After the Smart Wine Shelf in Mexico and Infinite Cart in Japan, we now had the Changing Room in the Middle East. In Dubai, a city well known for luxury shopping and modern architecture,  it was Lukas Kerschbaum, Director of Presales at SAP Hybris who had the pleasure of conducting the demo. Here’s what Lukas had to say:

“This year at GITEX it’s all about LIVE – construction, events, boardroom and of course LIVE Retail. What else is there to demonstrate this better than our very own Hybris Labs Changing Room. Together with other smart innovations that make people’s lives easier, we showcased our concept of an interactive shopping or dressing experience to the visitors at GITEX. Many big retailers love the idea of connecting a digital experience with a store visit. To attract even more attention we will move the Changing Room to the newly created Customer Experience Center in the new Dubai office after GITEX.”

IMG_9349 1

Leveraging Labs limitlessly

We might be regretting that headline pretty soon… ‘Limitlessly’ is slightly exaggerated. Those of you who know Hybris Labs better or have been following our blog will in fact debunk this statement as a blatant lie. ‘Leveraging’ is a bit dicey too actually. ‘Labs’ is fine though.

What we have been trying to do and are continuously succeeding with, is making it possible for SAP teams around the world to show and in some cases even rebuild our prototypes without our physical presence. The two latest examples of this sort of collaboration were presented by our colleagues in Mexico and Japan.

Wine Shelf Mexico

In Mexico it’s the original Smart Wine Shelf that’s creating a buzz. It was stored in the US for quite some time, so we’re happy to see it in action again. After all, it was the very first wine shelf we built and in a way marks the beginning of the Labs era as you know it today.

Our Japanese colleagues decided to go with Infinite Cart. Even if we need to invest some time to ‘leverage’ our demos and make sure they work, we think it’s definitely worth it. Because at the end: Everybody’s happy.

Japan_InfiniteCart

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: