… I’ve written two blog post at the SAP blog:
As you may have noticed our blog was down for a while. The reason is very simple. We moved office space and dropped it…
But now we put it in a very safe place.
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”…
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.
We now have another Hybris Labs prototype running entirely on YaaS – The Changing Room.
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.
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
This nicely rounds off the Changing Room story. If we wanted to, we now could speak of a ‘customer journey’…
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.”
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.
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.
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:
With a change node you change the ‘tempc’ value 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:
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:
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:
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:
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
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.
“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:
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.
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.
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 🙂
- API description for pubsub.
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:
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.
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.
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:
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.
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.
In my next blog post I’ll go into PubSub and who we can listen to an order event.