Merge lp:~michael.nelson/ubuntu-webcatalog/978000-recommended-apps into lp:ubuntu-webcatalog

[Michael Nelson]

Add utility for accessing cached recommendations via the recommendation api.

Overview
========

This branch does most of the groundwork for bug 978000 - adding a view which renders the app recommendations which handles both ajax and non-ajax requests, and sets up the api with caching for recommendations. It also DRYs up the application carousels a bit.

Note: One thing I noticed while testing this, is that we've currently got a few views which render slightly different templates depending on HTTP_X_REQUESTED_WITH. But these views are also (automatically) cached. For the application_recommends view, rather than not caching, I've created two separate urls so they'll be cached separately... if we think that's the best way forward we can update the two views (application screenshots and reviews). In reality, the bug can only be triggered on a cold cache by visiting the non-ajax page then visiting a page whic requests the ajax version.

The following branch will add a little JS to put the widget on the page and add config options for the number of recommendations to display (0 being don't use the widget at all).

[lp:~michael.nelson/ubuntu-webcatalog/978000-recommended-apps]

108. By Michael Nelson on 2012-04-19

GREEN: separated ajax/nonajax view responses so that they are cached separately.

109. By Michael Nelson on 2012-04-19

REFACTOR: switched to using vary_headers.

[Anthony Lenton (elachuni)]

Thanks Michael (and for the vary_on_header fix too!)

review: Approve

=== modified file '.bzrignore'
--- .bzrignore	2012-03-05 17:41:06 +0000
+++ .bzrignore	2012-04-19 21:58:17 +0000
@@ -14,3 +14,4 @@
 django_project/rnrclient.py
 django_project/adminaudit
 django_project/local.cfg
+django_project/sreclient.py
 
=== modified file 'fabtasks/bootstrap.py'
--- fabtasks/bootstrap.py	2012-03-05 17:41:06 +0000
+++ fabtasks/bootstrap.py	2012-04-19 21:58:17 +0000
@@ -127,6 +127,11 @@
         "django_project/django_openid_auth")
     _get_or_pull_bzr_branch("lp:convoy", "convoy", revision=20)
     _symlink("branches/convoy/convoy", "django_project/convoy")
+    _get_or_pull_bzr_branch(
+        'lp:~canonical-ca-hackers/ubuntu-recommender/'
+        'ubuntu-recommender-client', 'ubuntu-recommender-client')
+    _symlink("branches/ubuntu-recommender-client/sreclient.py",
+        "django_project/sreclient.py")
 
 def bootstrap():
     virtualenv_create()
 
=== modified file 'src/webcatalog/schema.py'
--- src/webcatalog/schema.py	2012-04-11 23:13:34 +0000
+++ src/webcatalog/schema.py	2012-04-19 21:58:17 +0000
@@ -69,7 +69,6 @@
     class logging(schema.Section):
         webapp_logging_config = schema.StringOption()
 
-    # preflight
     class preflight(schema.Section):
         preflight_base_template = schema.StringOption(
             default="webcatalog/base.html")
@@ -89,3 +88,7 @@
 
     class email(schema.Section):
         noreply_from_address = schema.StringOption()
+
+    class recommender(schema.Section):
+        rec_service_root = schema.StringOption(
+            default="http://rec.ubuntu.com/api/1.0")
 
=== modified file 'src/webcatalog/static/css/carousel.css'
--- src/webcatalog/static/css/carousel.css	2012-04-18 21:27:46 +0000
+++ src/webcatalog/static/css/carousel.css	2012-04-19 21:58:17 +0000
@@ -151,40 +151,33 @@
     background-color: #333;
 }
 
-#featured-controls,
-#top-rated-controls  {
+.carousel-controls {
     width: 70px;
     height: 32px;
     float: right;
 }
 
-#featured-controls .next, #featured-controls .prev,
-#top-rated-controls .next, #top-rated-controls .prev {
+.carousel-controls .next, .carousel-controls .prev {
     background: url(/assets/images/arrow-sliders.png) no-repeat 0 0;
     float: left;
     z-index: 20;
     width: 32px;
     height: 29px;
 }
-#featured-controls .next span, #featured-controls .prev span,
-#top-rated-controls .next span, #top-rated-controls .prev span {
+.carousel-controls .next span, .carousel-controls .prev span {
     position:absolute;
     left: -9999em;
     height: 0;
     width: 0;
 }
-#featured-controls .prev,
-#top-rated-controls .prev {
+.carousel-controls .prev {
     background-position:0 0;
 }
-#featured-controls .next,
-#top-rated-controls .next {
+.carousel-controls .next {
     background-position: -32px 0;
 }
-#featured-controls .prev:hover, #featured-controls .prev:focus,
-#featured-controls .next:hover, #featured-controls .next:focus,
-#top-rated-controls .prev:hover, #top-rated-controls .prev:focus,
-#top-rated-controls .next:hover, #top-rated-controls .next:focus {
+.carousel-controls .prev:hover, .carousel-controls .prev:focus,
+.carousel-controls .next:hover, .carousel-controls .next:focus {
     outline: none;
 }
 
 
=== added file 'src/webcatalog/templates/webcatalog/app_carousel_widget.html'
--- src/webcatalog/templates/webcatalog/app_carousel_widget.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/app_carousel_widget.html	2012-04-19 21:58:17 +0000
@@ -0,0 +1,43 @@
+{% load webcatalog %}
+<div class="carousel-container">
+    <div class="carousel-wrapper">
+        <div class="carousel">
+            <ol class="carouselol">
+            {% autoescape off %}
+            {% comment %}
+All slides except the first one start off with a "disabled" class, which will
+make them "display: none".  This will avoid loading pointless remote resources
+(banners) if Javascript is disabled.  The "disabled" class is then removed via
+Javascript.
+            {% endcomment %}
+            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
+                <table class="apps"><tr>
+            {% for app in apps %}
+                <td{% if forloop.counter|divisibleby:3 %} class="lastcol"{% endif %}>
+                <a href="{% url wc-package-detail package_name=app.package_name  %}"><img class="icon64" src="{{ app.icon_url_or_default }}"/></a>
+                <h4><a href="{% url wc-package-detail package_name=app.package_name  %}">{{ app.name }}</a></h4>
+                <p>{{ app.departments.all.0.name }} | <b>{% if app.price %}${{ app.price }}{% else %}FREE{% endif %}</b></p>
+                <p>{{ app.comment }}</p>
+                {% if ratings %}
+                <div class="top-rated-stars">
+                {% rating_summary app.ratings_average 'small' app.ratings_total %}
+                </div>
+                {% endif %}
+                </td>
+                {% if forloop.counter|divisibleby:3 and not forloop.counter|divisibleby:6 %}
+                </tr><tr class="lastrow">
+                {% endif %}
+                {% if forloop.counter|divisibleby:6 and not forloop.last %}
+                </tr></table>
+            </li>
+            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
+                <table class="apps"><tr>
+                {% endif %}
+            {% endfor %}
+                </tr></table>
+            </li>
+            {% endautoescape %}
+            </ol>
+        </div>
+    </div>
+</div>
 
=== modified file 'src/webcatalog/templates/webcatalog/featured_apps_widget.html'
--- src/webcatalog/templates/webcatalog/featured_apps_widget.html	2012-04-05 01:09:37 +0000
+++ src/webcatalog/templates/webcatalog/featured_apps_widget.html	2012-04-19 21:58:17 +0000
@@ -1,47 +1,15 @@
-<div id="featured-controls"></div>
+<div id="featured-carousel">
+<div class="carousel-controls"></div>
     <h3>Featured apps on the Ubuntu Software Centre</h3>
-<div class="carousel-container">
-    <div class="carousel-wrapper">
-        <div id="featured-carousel" class="carousel">
-            <ol class="carouselol">
-            {% autoescape off %}
-            {% comment %}
-All slides except the first one start off with a "disabled" class, which will
-make them "display: none".  This will avoid loading pointless remote resources
-(banners) if Javascript is disabled.  The "disabled" class is then removed via
-Javascript.
-            {% endcomment %}
-            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
-                <table class="apps"><tr>
-            {% for app in featured_apps %}
-                <td{% if forloop.counter|divisibleby:3 %} class="lastcol"{% endif %}>
-                <a href="{% url wc-package-detail package_name=app.package_name  %}"><img class="icon64" src="{{ app.icon_url_or_default }}"/></a>
-                <h4><a href="{% url wc-package-detail package_name=app.package_name  %}">{{ app.name }}</a></h4>
-                <p>{{ app.departments.all.0.name }} | <b>{% if app.price %}${{ app.price }}{% else %}FREE{% endif %}</b></p>
-                <p>{{ app.comment }}</p>
-                </td>
-                {% if forloop.counter|divisibleby:3 and not forloop.counter|divisibleby:6 %}
-                </tr><tr class="lastrow">
-                {% endif %}
-                {% if forloop.counter|divisibleby:6 and not forloop.last %}
-                </tr></table>
-            </li>
-            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
-                <table class="apps"><tr>
-                {% endif %}
-            {% endfor %}
-                </tr></table>
-            </li>
-            {% endautoescape %}
-            </ol>
-        </div>
-    </div>
+{% with ratings=0 apps=featured_apps %}
+{% include "webcatalog/app_carousel_widget.html" %}
+{% endwith %}
 </div>
 <script type="text/javascript">
 YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
     var caro = new Y.uwc.Carousel({
-        nodeContainer: "#featured-carousel",
-        controlsContainer: "#featured-controls",
+        nodeContainer: "#featured-carousel .carousel",
+        controlsContainer: "#featured-carousel .carousel-controls",
         containerHeight: 200,
         containerWidth: 912,
         autoPlay: false
 
=== added file 'src/webcatalog/templates/webcatalog/recommended_apps.html'
--- src/webcatalog/templates/webcatalog/recommended_apps.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/recommended_apps.html	2012-04-19 21:58:17 +0000
@@ -0,0 +1,27 @@
+{% extends "webcatalog/base.html" %}
+{% load i18n %}
+{% load webcatalog %}
+
+{% block head_extra %}
+    <link rel="stylesheet" type="text/css" href="{% url wc-combo %}?light/css/reset.css&light/css/styles.css&css/webcatalog.css&light/css/forms.css&css/carousel.css"/>
+    <script src="{% url wc-combo %}?yui/3.4.0/build/yui/yui-min.js&js/carousel.js"></script>
+{% endblock %}
+
+{% block title %}Recommended apps for {{ application.name }}{% endblock %}
+{% block header %}Recommended apps for {{ application.name }}{% endblock %}
+
+{% block content %}
+    {% include "webcatalog/breadcrumbs_snippet.html" %}
+  <div id="sc-mockup">
+    <div class="header">
+      {% rating_summary application.ratings_average 'large' application.ratings_total %}
+      <img class="icon64" src="{{ application.icon_url_or_default }}"/>
+      <h2>{{ application.name }}</h2>
+      <p>{{ application.comment }}</p>
+    </div>
+  </div>
+<div class="featured-widget">
+    {% include "webcatalog/recommended_apps_widget.html" %}
+</div>
+{% endblock %}
+
 
=== added file 'src/webcatalog/templates/webcatalog/recommended_apps_widget.html'
--- src/webcatalog/templates/webcatalog/recommended_apps_widget.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/recommended_apps_widget.html	2012-04-19 21:58:17 +0000
@@ -0,0 +1,20 @@
+<div id="recommended-carousel">
+<div class="carousel-controls"></div>
+    <h3>Other people also downloaded...</h3>
+{% with ratings=1 apps=recommended_apps %}
+{% include "webcatalog/app_carousel_widget.html" %}
+{% endwith %}
+</div>
+<script type="text/javascript">
+YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
+    var caro = new Y.uwc.Carousel({
+        nodeContainer: "#recommended-carousel .carousel",
+        controlsContainer: "#recommended-carousel .carousel-controls",
+        containerHeight: 200,
+        containerWidth: 912,
+        autoPlay: false
+    });
+    Y.all('.slide').removeClass('disabled');
+});
+</script>
+
 
=== modified file 'src/webcatalog/templates/webcatalog/top_rated_apps_widget.html'
--- src/webcatalog/templates/webcatalog/top_rated_apps_widget.html	2012-04-05 01:09:37 +0000
+++ src/webcatalog/templates/webcatalog/top_rated_apps_widget.html	2012-04-19 21:58:17 +0000
@@ -1,51 +1,15 @@
-{% load webcatalog %}
-<div id="top-rated-controls"></div>
+<div id="top-rated-carousel">
+<div class="carousel-controls"></div>
     <h3>Top rated apps on the Ubuntu Software Centre</h3>
-<div class="carousel-container">
-    <div class="carousel-wrapper">
-        <div id="top-rated-carousel" class="carousel">
-            <ol class="carouselol">
-            {% autoescape off %}
-            {% comment %}
-All slides except the first one start off with a "disabled" class, which will
-make them "display: none".  This will avoid loading pointless remote resources
-(banners) if Javascript is disabled.  The "disabled" class is then removed via
-Javascript.
-            {% endcomment %}
-            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
-                <table class="apps"><tr>
-            {% for app in top_rated_apps %}
-                <td{% if forloop.counter|divisibleby:3 %} class="lastcol"{% endif %}>
-                <a href="{% url wc-package-detail package_name=app.package_name  %}"><img class="icon64" src="{{ app.icon_url_or_default }}"/></a>
-                <h4><a href="{% url wc-package-detail package_name=app.package_name  %}">{{ app.name }}</a></h4>
-                <p>{{ app.departments.all.0.name }} | <b>{% if app.price %}${{ app.price }}{% else %}FREE{% endif %}</b></p>
-                <p>{{ app.comment }}</p>
-                <div class='top-rated-stars'>
-                {% rating_summary app.ratings_average 'small' app.ratings_total %}
-                </div>
-                </td>
-                {% if forloop.counter|divisibleby:3 and not forloop.counter|divisibleby:6 %}
-                </tr><tr class="lastrow">
-                {% endif %}
-                {% if forloop.counter|divisibleby:6 and not forloop.last %}
-                </tr></table>
-            </li>
-            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
-                <table class="apps"><tr>
-                {% endif %}
-            {% endfor %}
-                </tr></table>
-            </li>
-            {% endautoescape %}
-            </ol>
-        </div>
-    </div>
+{% with ratings=1 apps=top_rated_apps %}
+{% include "webcatalog/app_carousel_widget.html" %}
+{% endwith %}
 </div>
 <script type="text/javascript">
 YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
     var caro = new Y.uwc.Carousel({
-        nodeContainer: "#top-rated-carousel",
-        controlsContainer: "#top-rated-controls",
+        nodeContainer: "#top-rated-carousel .carousel",
+        controlsContainer: "#top-rated-carousel .carousel-controls",
         containerHeight: 200,
         containerWidth: 912,
         autoPlay: false
 
=== modified file 'src/webcatalog/tests/test_utilities.py'
--- src/webcatalog/tests/test_utilities.py	2012-04-18 22:29:29 +0000
+++ src/webcatalog/tests/test_utilities.py	2012-04-19 21:58:17 +0000
@@ -21,6 +21,7 @@
     'CreatePNGFromFileTestCase',
     'IdentityProviderTestCase',
     'ScreenshotGetterTestCase',
+    'WebServicesRecommenderTestCase',
     ]
 
 import json
@@ -33,6 +34,7 @@
     )
 
 from django.conf import settings
+from django.core.cache import cache
 from django.test import TestCase
 from httplib2 import ServerNotFoundError
 from mock import patch
@@ -128,6 +130,53 @@
             u'consumer_key', u'token_secret']), set(data))
 
 
+class WebServicesRecommenderTestCase(TestCaseWithFactory):
+
+    def setUp(self):
+        super(WebServicesRecommenderTestCase, self).setUp()
+        recommend_app_fn = (
+            'sreclient.SoftwareCenterRecommenderAPI.recommend_app')
+        self.recommend_app_patcher = patch(recommend_app_fn)
+        self.mock_recommend_app = self.recommend_app_patcher.start()
+        self.addCleanup(self.recommend_app_patcher.stop)
+        self.eg_recommends = {
+            u'rid': u'defe066c7ad7c43f71bac58c3f23cc62', 
+            u'data': [
+                {u'rating': 4.0, u'package_name': u'nautilus-gksu'},
+                {u'rating': 4.0, u'package_name': u'tribaltrouble2'},
+                {u'rating': 4.0, u'package_name': u'acm'},
+                {u'rating': 4.0, u'package_name': u'zgv'},
+                {u'rating': 3.0, u'package_name': u'nautilus-wallpaper'}
+                ],
+            u'app': u'firefox',
+            }
+        self.mock_recommend_app.return_value = self.eg_recommends
+        cache.clear()
+
+    def test_get_recommends_for_package_uncached(self):
+        result = WebServices().get_recommends_for_package('firefox')
+
+        self.assertEqual(result, self.eg_recommends)
+        self.assertEqual(1, self.mock_recommend_app.call_count)
+
+    def test_get_recommends_caches_result(self):
+        self.assertIs(None, cache.get('get_recommends_for_package-firefox'))
+        
+        result = WebServices().get_recommends_for_package('firefox')
+
+        self.assertEqual(
+            self.eg_recommends,
+            cache.get('get_recommends_for_package-firefox'))
+
+    def test_get_recommends_for_package_cached(self):
+        cache.set('get_recommends_for_package-firefox', {'foo': 'bar'})
+
+        result = WebServices().get_recommends_for_package('firefox')
+
+        self.assertEqual({'foo': 'bar'}, result)
+        self.assertEqual(0, self.mock_recommend_app.call_count)
+
+
 class ScreenshotGetterTestCase(TestCase):
     @patch('webcatalog.utilities.urllib.urlopen')
     def test_valid_response_returns_list_of_urls(self, mock_urlopen):
 
=== modified file 'src/webcatalog/tests/test_views.py'
--- src/webcatalog/tests/test_views.py	2012-04-19 02:59:08 +0000
+++ src/webcatalog/tests/test_views.py	2012-04-19 21:58:17 +0000
@@ -44,6 +44,7 @@
 __all__ = [
     'ApplicationDetailNoSeriesTestCase',
     'ApplicationDetailTestCase',
+    'ApplicationRecommendsTestCase',
     'ApplicationReviewsTestCase',
     'ApplicationScreenshotsTestCase',
     'IndexTestCase',
@@ -611,7 +612,7 @@
         with patch_settings(FEATURED_APPS=[app.package_name for app in apps]):
             response = self.client.get(reverse('wc-index'))
 
-        self.assertContains(response, 'id="featured-controls"', 1)
+        self.assertContains(response, 'class="carousel-controls"', 1)
 
     def test_link_to_dev_site(self):
         response = self.client.get(reverse('wc-index'))
@@ -660,7 +661,7 @@
         with patch_settings(NUMBER_TOP_RATED_APPS=2):
             response = self.client.get(reverse('wc-index'))
 
-        self.assertContains(response, 'id="top-rated-controls"', 1)
+        self.assertContains(response, 'class="carousel-controls"', 1)
         self.assertContains(response, high.package_name, 2)
         self.assertContains(response, mid.package_name, 2)
         self.assertContains(response, low.package_name, 0)
@@ -1053,6 +1054,75 @@
         self.assertEqual(200, response.status_code)
 
 
+class ApplicationRecommendsTestCase(TestCaseWithFactory):
+
+    def setUp(self):
+        super(ApplicationRecommendsTestCase, self).setUp()
+        get_recommends_fn = (
+            'webcatalog.utilities.WebServices.get_recommends_for_package')
+        self.get_recommends_patcher = patch(get_recommends_fn)
+        self.mock_get_recommends = self.get_recommends_patcher.start()
+        self.addCleanup(self.get_recommends_patcher.stop)
+        self.eg_recommends = {
+            u'rid': u'defe066c7ad7c43f71bac58c3f23cc62',
+            u'data': [
+                {u'rating': 4.0, u'package_name': u'nautilus-gksu'},
+                {u'rating': 4.0, u'package_name': u'tribaltrouble2'},
+                {u'rating': 4.0, u'package_name': u'acm'},
+                {u'rating': 4.0, u'package_name': u'zgv'},
+                {u'rating': 3.0, u'package_name': u'nautilus-wallpaper'}
+                ],
+            u'app': u'firefox',
+            }
+        self.mock_get_recommends.return_value = self.eg_recommends
+        cache.clear()
+
+    def test_only_valid_apps(self):
+        response = self.client.get(reverse('wc-package-recommends',
+            args=['doesntexist']))
+
+        self.assertEqual(404, response.status_code)
+
+    def test_renders_recommendations(self):
+        app = self.factory.make_application(package_name='firefox')
+        pkgnames = ['nautilus-gksu', 'tribaltrouble2', 'acm', 'zgv',
+                    'nautilus-wallpaper']
+        for pkgname in pkgnames:
+            self.factory.make_application(package_name=pkgname)
+
+        response = self.client.get(
+            reverse('wc-package-recommends', args=['firefox']))
+
+        self.assertEqual(200, response.status_code)
+        self.assertTemplateUsed(
+            response, 'webcatalog/recommended_apps.html')
+        self.assertContains(response, '<div class="top-rated-stars">', 5)
+
+    def test_excludes_non_existing_recommendations(self):
+        app = self.factory.make_application(package_name='firefox')
+        pkgnames = ['nautilus-gksu', 'tribaltrouble2', 'acm', 'zgv']
+        for pkgname in pkgnames:
+            self.factory.make_application(package_name=pkgname)
+
+        response = self.client.get(
+            reverse('wc-package-recommends', args=['firefox']))
+
+        self.assertEqual(200, response.status_code)
+        self.assertContains(response, '<div class="top-rated-stars">', 4)
+
+    def test_renders_widget_only_for_json_requests(self):
+        app = self.factory.make_application(package_name='firefox')
+
+        response = self.client.get(
+            reverse('wc-package-recommends', args=['firefox']),
+                HTTP_X_REQUESTED_WITH='XMLHttpRequest')
+
+        self.assertTemplateNotUsed(
+            response, 'webcatalog/recommended_apps.html')
+        self.assertTemplateUsed(
+            response, 'webcatalog/recommended_apps_widget.html')
+
+
 class ComboViewTestCase(TestCase):
     """Tests for ComboView."""
 
 
=== modified file 'src/webcatalog/urls.py'
--- src/webcatalog/urls.py	2012-04-18 21:27:46 +0000
+++ src/webcatalog/urls.py	2012-04-19 21:58:17 +0000
@@ -46,6 +46,8 @@
     url(r'^applications/(?P<distro>[-.+\w]+)/(?P<package_name>[-.+:\w]+)/'
         r'reviews/$',
         'application_reviews', name="wc-package-reviews"),
+    url(r'^recommends/(?P<package_name>[-.+:\w]+)/$',
+        'application_recommends', name="wc-package-recommends"),
     url(r'^search/$', 'search', name="wc-search"),
     url(r'^search/(?P<distro>[-.+\w]+)/$', 'search', name="wc-search"),
     url(r'^tos/$', name="wc-tos",
 
=== modified file 'src/webcatalog/utilities.py'
--- src/webcatalog/utilities.py	2012-04-19 02:59:08 +0000
+++ src/webcatalog/utilities.py	2012-04-19 21:58:17 +0000
@@ -44,6 +44,7 @@
     )
 from piston_mini_client.validators import ValidationException
 from rnrclient import RatingsAndReviewsAPI
+from sreclient import SoftwareCenterRecommenderAPI
 from ssoclient import SingleSignOnAPI
 
 
@@ -82,6 +83,17 @@
         cache.set(key, fresh_reviews, settings.REVIEWS_CACHE_TIMEOUT)
         return fresh_reviews
 
+    def get_recommends_for_package(self, package_name):
+        key = 'get_recommends_for_package-{0}'.format(package_name)
+        cached_recommends = cache.get(key)
+        if cached_recommends is not None:
+            return cached_recommends
+
+        fresh_recommends = self.recommender_api.recommend_app(
+            pkgname=package_name)
+        cache.set(key, fresh_recommends)
+        return fresh_recommends
+
     def get_screenshots_for_package(self, package_name):
         key = 'get_screenshots_for_package-{0}'.format(
             package_name)
@@ -152,6 +164,10 @@
             result.update(data)
         return result
 
+    @property
+    def recommender_api(self):
+        return SoftwareCenterRecommenderAPI(service_root=settings.REC_SERVICE_ROOT)
+
 
 def full_claimed_id(consumer_key):
     return '%s/+id/%s' % (settings.OPENID_SSO_SERVER_URL.strip('/'),
 
=== modified file 'src/webcatalog/views.py'
--- src/webcatalog/views.py	2012-04-19 02:10:55 +0000
+++ src/webcatalog/views.py	2012-04-19 21:58:17 +0000
@@ -42,6 +42,7 @@
     )
 from django.template import RequestContext
 from django.utils.translation import ugettext as _
+from django.views.decorators.vary import vary_on_headers
 
 from webcatalog.forms import EmailDownloadLinkForm
 from webcatalog.models import (
@@ -56,6 +57,7 @@
 __metaclass__ = type
 __all__ = [
     'application_detail',
+    'application_recommends',
     'application_reviews',
     'index',
     'department_overview',
@@ -192,6 +194,7 @@
             request, atts))
 
 
+@vary_on_headers('X_REQUESTED_WITH')
 def application_reviews(request, package_name, distro, page=1):
     app = get_object_or_404(Application, package_name=package_name,
                             distroseries__code_name=distro)
@@ -210,6 +213,33 @@
     return render_to_response(template, RequestContext(request, context))
 
 
+@vary_on_headers('X_REQUESTED_WITH')
+def application_recommends(request, package_name):
+    app = get_object_or_404(Application, package_name=package_name)
+
+    recommends = WebServices().get_recommends_for_package(package_name)
+
+    num_recommends = 0
+    recommended_apps = []
+    for result in recommends['data']:
+        recommended_app = Application.objects.find_best(
+            package_name=result['package_name'])
+        if recommended_app:
+            recommended_apps.append(recommended_app)
+            num_recommends += 1
+            if num_recommends > 5:
+                break
+
+    context = dict(application=app, recommended_apps=recommended_apps)
+    if request.is_ajax():
+        template = "webcatalog/recommended_apps_widget.html"
+    else:
+        template = "webcatalog/recommended_apps.html"
+        context['breadcrumbs'] = app.crumbs()
+    return render_to_response(template, RequestContext(request, context))
+
+
+@vary_on_headers('X_REQUESTED_WITH')
 def application_screenshots(request, package_name):
     app = get_object_or_404(Application, package_name=package_name,
         is_latest=True)