On October 6, 2017 my colleague Sebastiaan and I held a presentation at Liferay DevCon about a cool integration the COIN team made. We were looking for a fun and exciting Internet of Things integration in Liferay. After a fruitful brainstorm, we decided to use Philips Hue. Another couple of brainstorms later, we formed the actual idea.
The setup was to create an imaginary travel agency, named ACA Light Travel, that wants to provide the ultimate personalized experience to its customers. Potential travelers can browse through all available destinations by visiting a kiosk tailor-made for this travel agency. The nice thing about this kiosk is that it's equipped with contextual lighting. While the customer browses the website, the bulbs and LEDs in the kiosk will recognize which kind of destinations he or she is mostly interested in, and adapt their lighting accordingly.
But what is Philips Hue?
Hue is a great product line of Philips that consists of several types of lights, light bulbs, LED strips, ... They call it "Personal Wireless Lighting" and it's a stepping stone towards smart lighting.
The line is based around a central unit called the bridge, which you need to plug into your own network using an ethernet cable. The bridge will then communicate wirelessly with the light bulbs, LEDs and other components in your network. You can turn the lights on or off, dim them, change the colors, perform some effects, etc. By grouping bulbs together, you don't even need to direct them individually anymore. All this can be done programmatically based on timers and events for instance. There really are plenty of options.
Liferay meets Hue
Liferay DXP can communicate with the Philips Hue system through a REST API that the people from Philips Hue provide. If you want to create something yourself, you can just go to the Philips Hue Developer Program website, download this API in two jars and start your own development.
ACA Light Travel
So, for our travel agency we used the Audience Targeting module of Liferay DXP and defined 5 different user segments. One segment for every type of holiday destination: sunny holidays, adventurous trips, city trips, cruises and winter holidays.
All destinations on the site, which are plain web content articles, are categorized as one or more of these segments. Each time a visitor takes a look at the details of a certain destination, the system increments a counter for the corresponding segment. This is a by-default available rule in Audience Targeting.
We also wrote a custom Audience Targeting rule. This rule determines that the user belongs to the segment that corresponds with the highest counter. On a first visit, the user randomly sees all of the articles. When this user clicks on an article to look at the details of a city trip destination, the Audience Targeting rule increments the counter corresponding to that segment. Through the API, Liferay DXP communicates to the Philips Hue bridge that the lights need to turn red, because the user now belongs to that user segment.
To actually control the lights, we have written a page listener in Liferay. With each page load, it will identify the segment that the user is in and change the lights to the corresponding color by calling the Philips Hue API. Upon a next visit to the homepage, the user will first see the destinations that match the "city trip" user segment, which is the segment that the user belongs to. Of course, it's possible that a customer liked city trip destinations before, but is more interested in sunny vacations now. In this case, he or she will move from the "city trip" segment to the "sunny" segment after enough clicks.
Under the hood
We implemented this project by making use of version 1.20 of the Hue API. The code is subject to change according to updates in the API.
Now that you know what we created, lets take a look at the how. As mentioned before, we created two custom modules. One is a custom Audience Targeting rule that determines that the user belongs to the segment that corresponds with the highest counter. The other is a page listener that identifies the segment the user is in on each page load and changes the lights into the corresponding color. Next to these modules, we also implemented the usual plugins and components. There are several portlets to show the suggested content items and two service modules to minimize the duplication of code.
This OSGi bundle consists of just one service that contains the logic to control the Hue lights. This is the only implementation in the project that actually holds the specific Hue API calls. Upon activating the bundle, a connection is made to the Hue Bridge by using the fixed IP and UserName we had set up. The service provides the possibility to toggle the lights on/off, change the brightness, set the color and start or stop blinking the lights. When you deactivate the bundle, you terminate the connection to the Hue Bridge.
User Segment Service
This bundle is the connection of our portlets to the Audience Targeting functionality of Liferay DXP. It contains all business logic required for our portlets to provide the desired filtering and segmented content.
Hue Page Listener
This is the plugin that determines the segment that the user belongs to after each page load and communicates to the bridge to change the color of the lights. It will only do this when the user is part of just one user segment. The plugin retrieves the required color from the description of the segment that the user currently belongs to.
Score Points Maximum Rule
The custom Audience Targeting Rule determines to which segment the user currently belongs by calculating the highest counter. The counter is set by the default available Score Point rule in Liferay DXP.
When a JournalArticle is categorized as a promotion, the lights in the kiosk will start blinking. This visual effect informs the user that it's a special kind of destination.
This is a portlet bundle that contains three different portlets, one for each type of filtering.
YourSelectionSuggestionsPortlet: a portlet that shows all JournalArticles categorized by the segment that the user currently belongs to.
OtherSuggestionsPortlet: shows all JournalArticles that do not belong to the segment that the user currently belongs to.
PromotionsSuggestionsPortlet: this portlet first shows the promotions for segments that the user belongs to, supplemented with all other promotions available.
Audience targeting is one of the most powerful features in Liferay DXP. If implemented the right way, it can really learn what the user tries to accomplish and steer him or her in the right direction. It can even persuade the user to perform a transaction. Liferay, as an open platform, can really integrate with anything. Connecting the Audience Targeting module of Liferay to the Philips Hue system wasn't too hard thanks to the existing API. Just imagine which other IoT integrations are possible. The sky is the limit!
You can find the code for the ACA Light Travel website on our public Bitbucket.
The presentation was recorded at Liferay DevCon and is published on Youtube.
The slides that go with the presentation are also available through Liferay.