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:

 
6 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

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:

 
6 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

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:

 
6 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

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:
 
7 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

That would make it one on each continent…

…Smart Wine Shelves, that is. It looks like the guys from SAP South Africa are planning to build one. Well, since the Smart Wine Shelf will no longer be supported by the end of this year, it’ll be Bullseye in the wine shelf version. But that count’s!

“‘The benefits for both retailers and consumers are enormous,'” commented Brett Parker, Managing Director, SAP Africa. “‘With so much online competition, in-store experiences now need to be fun and engaging. Not only do concepts such as SAP’s Smart Wine Shelf provide for this, upping the customer experience and ultimately customer satisfaction, but smart technology also provides the retailer with access to valuable analytics.'”

IMG_1088

 
6 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

The Future us upon us 2

… Hopefully this won’t be a sequel that’s worse than the original.

So I showed you what AR is and how it works yesterday, and since the team is also working on some VR stuff (it’s still pretty early in development so don’t expect it any time soon) I decided today I’d discuss VR and its main use in Commerce

Now “what is VR?” you’re probably asking, if you’re not… well don’t worry I’ll just pretend you are. VR stands for virtual reality. This is different from AR in the sense that it doesn’t just add computer generated information to our physical world but instead goes a step further and completely immerses you in a virtual CGI world (Not a single trace of reality, you know unless it’s a gritty realistic FPS you’re simulating)

Gritty fps

To put it in an extremely simple way VR is simply tracking the movements of your body and transferring that data into your character’s movements in a virtual world created by the headset (which part of the body it tracks may differ a bit depending on hardware but it’s mostly just head tracking, hence why we mainly have VR headsets). The headset is designed to give you a full first person experience (no screens in the way to break your immersion), so that you feel like you’re actually there in this virtual world.

VR immersion

For an in depth look into how a VR headset actually works check out this link: http://www.wareable.com/vr/how-does-vr-work-explained

VR unlike AR hasn’t been used much in commerce. While VR has its uses there hasn’t been any  real products made or any companies that are actually using it currently, although some big companies are making pushes towards a V(irtual)Commerce platform and they are likely making prototypes as we speak (yea, like what we do. Crazy huh?)

VR prototypes

Despite VR’s lack of use in Commerce currently, it still has many potential uses that haven’t been put into practice just yet. The main one is creating a virtual store, where you can wander around the place looking at items as if you were there, except you’ve actually skipped the 40 tedious minutes spent trying to get to that store and then not finding what you want and having to walk to another store that’s on the other side of the shopping mall.

VR shopping mall

Right now VR shopping poses the potential to be the best of both online and traditional shopping (for example being able to buy from home, able to switch stores at will and able to wander around and find something cool that you weren’t originally looking for).

Well that rounds up this article on VR, I apologise for not going into how the headsets work more myself but honestly that’d make for one insanely long post. Well I hope you enjoyed this and all my other articles, as this is my last one.

Anyways thanks for taking your time to read these and thanks to the Hybris Labs team for taking care of me this past week.

 
4 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

The Future is upon us

So we here at Hybris Labs have been working on a new AR prototype (well it’s under wraps for now, so pretend to be surprised when we actually unveil it); so I figured it’d be a good time to give a quick rundown on what AR is and how it works, as well as some of its uses in Commerce (just in case we decide to give you a pop quiz). I’ll also give one of my own ideas.

AR, in case you didn’t know, stands for augmented reality and what it does is enhance the real world by supplying computer generated data (augment it, if you will. You never would’ve guessed huh?) – this is often done by superimposing computer generated images (CGI) onto our view of reality but something like using sound to augment reality can also be done.

Hololens AR pic

(Remember that one scene in Iron Man where Tony interacts with the holograms in his lab? You know how that made you think “that’s so cool! I wish we had that in real life”? Yea well that might be our reality soon, although you may have to be as rich as ol’ billionaire Stark to buy one when Microsoft’s HoloLens initially comes out)

Now onto how AR works (in a simplified way). For the most part all forms of AR work in a similar way (on a basic level anyways) with a few differences depending on what hardware is used (Head mounted displays, Spatial AR, smartphones etc.) In essence it takes information from the real world through GPS, compass, camera etc. (and if a server is required sends it to the server first) then processes and returns the data as media (text, video, image, 3D models etc.) and through an output displays the media (outputs such as: a screen, speakers, and… you know what? I’m pretty sick of how long all of these lists are).

There are several ways AR could be used in Commerce, one way is by displaying product information with AR through our smartphones. Just imagine pointing your phone’s camera at an item and having all its details floating around the object in question (well you don’t have to imagine, I do have a picture of it below after all). With this you could easily find out, say an article of clothing’s price, available colours and sizes as well as how the prices compare to other retailers.

AR product info pic

(Of course food works too, just don’t walk into a clothes store to look for a $2 chocolate bar, and then blame us when you can’t find it)

We could also use AR to visualise what an item of furniture would look like in your house. Say you’re unsure if you have enough space for that comfy leather sofa you want, or say you want to test what colour of a table would look best in your dining room; well this is where AR comes in. By simply pointing a smartphone’s camera at a spot where you’d like to place the table (and opening an app I suppose), you would be able to see a 3D life-size model of that table appear on your smartphone’s screen- thus allowing you to see what the furniture would look like in your home before you commit to buying it.

AR furniture visulisation

(if you haven’t noticed, tablets will work too)

Finally my idea for a use of AR is to have a sort of virtual changing room. Honestly for me the worst part about shopping is how long the act of trying on clothes is. So I thought it’d be a cool idea if there was a changing room where you could have the clothes superimposed on you (as a virtual 3D model), so you can check its size and if it looks good on you without ever having to take off your clothes, as well as allowing you to easily change the colour and size of your clothes in the changing room(assuming they have said colours and sizes in stock).

There you have it, a quick rundown on AR and how it can be used; now you’re set to go out and do as you please with this new found knowledge you’ve acquired.

 
8 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

So it seems we’re not just working on prototypes…

… are you suprised yet? Well recently Hybris Labs has been making some contributions to a Hybris Commerce product that’s pretty awesome (don’t worry though, our main focus will still be our prototypes).

So basically what’s been happening is that Georg has been helping out the people working on the Assisted Service Module, by bringing in some of the technologies from the Changing Room to use in their product.

What's new pic

Now it uses RFID, iBeacons + an App etc. to detect when a customer enters the store to pick up their order (we wouldn’t want to be unprepared after all). Also, using the Assisted Service Module, store assistants have direct access to the customer data; so they can help the customer in the physical location, greatly improving the customer’s shopping experience.

Man remember the days when you had to walk around for hours to find that one jacket you really wanted in your size…no? Well I’d hope not because then we wouldn’t be doing our jobs. More seriously though, I honestly can’t wait for this to be in every store so I no longer have to dread going shopping for clothes.

 
5 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Me, Max and a whole load of wires spend the morning together

As you probably already know if you’ve been reading our blog, we’ve been spending some of our time renovating the showroom. So when I heard Max would be doing some work on the showroom I figured this would be a good chance to go with him and see what he’s up to.

Once we had arrived at the showroom we needed to unscrew and take out an USB port on the wall. unfortunately our lack of a screw driver that would actually fit stopped us swiftly in our tracks.

IMG_0652

(Max had tried several screw driver heads at this point and was thoroughly fed up).

Don’t worry though, we recovered pretty quickly and moved on to another important job. We decided to go to the server room, because we had a problem where the big TV screens would flicker every two seconds (on and off, on and off, on and… ok you get the picture).

The problem was that our current system of connecting the HDMI cables to the TVs relied on using Ethernet cables as a middle man. This is because HDMI cables aren’t long enough, so we had to use an adapter to convert the HDMI cables into Ethernet cables, which could then be connected to the TVs.

Adapter picture 2

(This is the adapter and it turns out it’s super expensive for what it does, but for your own sanity I won’t tell you the price)

So to fix the problem we moved the Raspberry PIs from the server room and placed them closer to the TVs (one for each TV), and connected the HDMI cables directly to the TVs from Raspberry PIs.

IMG_0656

(Max had to take apart the leaning tower of Raspberry PIs… well it’s not leaning but atleast it  sounds delicious)

Unfortunately connecting the HDMI cables directly to the TVs would take a lot of rewiring and Max effectively had to dismantle our entire set up for connecting the HDMI cables to the TVs.

IMG_0669

 

IMG_0676

After about an hour Max had successfully taken out all the HDMI cables, adapters and a good chunk of the other wires. In the end we had taken out all the wires except the Ethernet cables – those were connected to the Raspberry PIs and were still needed to provide an internet connection (which is fairly essential to our lives) .

Afterwards we went through some test runs to make sure everything was connected properly and that it all worked.

IMG_0685

In the end we managed to finish up all the wiring so hopefully when you check out the showroom yourself you won’t see any pesky flickering screens.

 
7 Kudos
Don't
move!
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather