shopping24 tech blog

s is for shopping

May 09, 2014 / by Kim Hogeling / Web developer / @kimhogeling

shopping24 Hacking Days Spring 2014

Hacking Days, an opportunity for members of different IT departments to collaborate and create awesome things in little time.

As always my IT colleagues and I got very excited, just by hearing the words “Hacking Days”. This overarching cooperating did not only lead to cool small projects, but also to learning a bunch of new stuff, like new techniques, efficient workflows, interesting references and so on. And I must say, the Hacking Days were a huge success and we had a blast! We agreed to the following six projects:

  1. “Who will join me for lunch?”
  2. “LIRE: Image and shape recognition for SOLR”
  3. “Chrome Web Speech API: Controlling portals by voice”
  4. “smatch.com Android App”
  5. “Chrome extension: Similar products showcase”
  6. “ØMQ adapter for logstash”

“Who will join me for lunch?”

image

At shopping24 there is a layer-free attitude. We treat each other with respect and do not differ between age or position. In addition we find communication between departments very important.

To support this, we took the opportunity to create a simple little web app during the hacking days. This app is simply called “Who will join me for lunch” and does exactly, what one would expect: Suggest random companions for lunch.

  • The colleague can choose a desired amount of companions
  • and press the first big green button. (Suggestions appear)
  • Now the colleague can press the second big green button to invite the suggested companions via email.

This is realised with the help of our central LDAP. The avatar images are retrieven from Gravatar.

LIRE: Image and shape recognition for SOLR

image

The LIRE project supplies a Solr plugin for Apache Solr. It recognizes shapes and colors with the help of five different algorithms (or preliminaries). Each of these algorithms evaluates different aspects of a given image.

The five algorithms currently implemented in LIRE are ColorLayout (CL), PHOG (PH), OpponentHistogram (OH), EdgeHistogram (EH) and JCD. LIRE does not load every single image per search query. Instead it reads all the images once, extracting and indexing different aspects according to the feature extraction algorithms above. For calculating distances on the indexed data, ValueSource implementation is supplied.

We fed a couple of our product images into LIRE and toyed around. The framework will be a step forward in similar product search and similar product feature extraction.

Chrome Web Speech API: Controlling portals by voice

image

It is very important to make the web as usable as possible for everybody. To encourage this, we had the idea of controlling the search function of our portals by voice. We found the hacking days to be perfect to try this out on one of them, www.shopping24.de as Google has integrated the speech API into Chrome.

A new open source JS library called “speech-search” is available on Github together with a simple demonstration web site – or the Google demonstration site.

Implementing and configuring the library is super easy: After integration, we added a corresponding button which triggers the speech-search script, which simply listens for a few seconds, fills out the already existing search field and hits the search button.

smatch.com Android App

  • image
  • image
  • image

As most of our bigger portals are responsive (as in responsive design), the next step is actually pretty obvious: Time for an Android app! The requirements were simple:

  • Use the android web shell
  • load one of our portals into it, www.smatch.com.

This creates an app mixed of native and web content. In addition a native header bar we implemented sharing the current product result, added a history button for previous searches and an option to return to the portal after visiting a partner site. The App is not yet available at the Google Play Store.

Chrome extension: similar products showcase

image

We try to extract terms of a page, that seem to be relevant for its content. The source for this terms could be the content of html tags like <title>, <h1>, <h2> or some other information extracted from page. Afterwards we search for products with this terms at our API and try to include the results via JavaScript into the dom of the page. In the screenshot above, the products with yellow background are the injected ones.

ØMQ adapter for logstash

image

Measure all the things! I’m serious! We’re using Graylog2 to visualize our logs and Logstash as a log supercharger. If you want to do some extra-fancy log polishing in Logstash, you are free to use a ØMQ filter to offload log analysis to an external process. We toyed around with ØMQ and built a server decoding protocol buffer strings. We built implementations in both Go and Java.

Wanna go hacking, too?

Interested in working with us? We are hiring!