www.newsinapp.io - Latest entries

How to integrate your interests in Flipboard

didier.rano@gmail.com (didier) — Wed, 12 Sep 2012 22:41:54 -0500

Flipboard is a magical tool which allows us to browse a virtual newspaper from an iPad, iPhone or even an Android tablet or smartphone. The design of the layout is beautiful, and probably the main reason for its success. However, despite the impressive variety of sources available, it may happen that it is not enough.

As an example, let’s say we want to get news on “Tim Burton”. Here what Flipboard shows us:

Flipboard proposes us to follow news from a Tumblr blog, a Facebook page or three Twitter accounts, whose @timburton_news where news are provided by newsinapp ;)

Flipboard does not directly provide latest news on this subject. One of these choices may be relevant and sufficient, but if it does not fit, then we need to follow several of these proposals. But, we would like to have a complete and unified view on this topic in Flipboard.

Newsinapp can help us to fill this gap.

With Newsinapp, we aim to retrieve relevant news for our users, but also to publish them where they need it. It can be in their blog, in their virtual newspaper, in a web application, or to help draft an article …

Below, the topic “Tim Burton” integrated into Flipboard

We made a video explaining how to integrate your interests in Flipboard

Finally, newsinapp can integrate with other virtuals newspapers such as Pulse News, Google Currents, Feedly …

Python and Redis: A mini search engine

didier.rano@gmail.com (didier) — Tue, 22 May 2012 08:16:17 -0500

How to use Redis/Django to build a mini search engine (Sorry only in french)

Python and Redis: A mini search engine

View more presentations from Didier Rano

How to build a news aggregator with backbone.js - Part 2

didier.rano@gmail.com (didier) — Tue, 01 May 2012 19:52:57 -0500

In the previous post, I have been using backbone.js to retrieve news provided by newsinapp.io. Now, I need to display them in an unique HTML page. By unique page, I mean that all user interactivities will be only in one HTML page, and backend server will provide only data and no HTML tags.

How will be the GUI of this application ? First, a list will display each latest news. When a news is selected, the content detail will be displayed on the side. In addition, an image or video will be shown if it is available.

NewsItemView or the news in tiny

NewsItemView is a backbone.js class. In the list of news, it displays the information of each news. In short, this class generates some HTML from information belonging to an instance of the class NewsItem, the model class defined in the previous post.

 window.NewsItemView = Backbone.View.extend({
         tagName: 'li’,
         className: 'news-item-cell’,

         initialize: function() {
             this.initializeTemplate();
         },

         initializeTemplate: function() {
             this.template = _.template($(”#news-item-template”).html());
         },

         render: function() {
             $(this.el).html(this.template(this.model.toJSON()));
             return this;
         }
     });

tagName is the HTML element that will be generated for each call to the render method.
And, className is the CSS class of this tag.

Mainly, the code describes how using an HTML template. Then, the method initializeTemplate loads this template in memory. And, #news-item-template is a CSS selector… Simply because the template is contained in the file index.html!

Below, this famous template:

Placeholders, such as %= topic.displayName %>, will be evaluated with the contents of the news.
Finally, when the method render() is called, the template is executed to generate the HTML for one instance of news.

Next, I need to define the list of news.

NewsCollectionView or the collection of tiny news

     window.NewsCollectionView = Backbone.View.extend({  

       render: function() {
         var $newsItems;

         $newsItems = $('ul#news-items’);

         this.collection.each(function(newsItem) {
           var newsItemView = new NewsItemView( { model: newsItem});
           $newsItems.append( newsItemView.render().el);
         });

         return this;
       };
     });

In the following paragraphs, this.collection will be populated with the list of news. Then, when the method render() is called, the HTML will be generated for all news in the list. In addition, these HTML elements will be contained in an ul element with the CSS class news-items (ul#news-items)

It is time to test with the javascript console:

Yes ! I can see some news! And, Quentin Tarantino is preparing a western!

Now, a real application

One last step before taking a short break: Get rid of the console JavaScript. In short, the application will work without my intervention in the console.

To display this list of news when the page is loaded, I need to modify my favorite script: news.js

     window.App = App = (function() {
       function App() {
         this.newsCollectionView = new NewsCollectionView({
             collection: news
         });

         this.newsCollectionView.render();

         news.fetch();
       }
       return App;
     })();

In the index.html file, to execute this javascript code:

Here, all the pieces are assembled to close this article.

Drum roll …

But, nothing is displayed … Probably the demonstration effect. However, I do not work with Windows. The problem must come from me …

[A few grunts later]

I’VE FOUND.

Following the execution of news.fetch(), the collection of news is filled with a list of news, but newsCollectionView is not aware of that change. Then, it should be notified when this event occurs. So, I’ve added a constructor to viewNewsCollectionView

      initialize: function() {
           _.bindAll(this, 'render');
           this.collection.bind('reset', this.render);
       },

A new test…Yeesssss !

This strong emotion leads me to give you an appointment for a third part “The power of the detail view”

How to build a news aggregator with Dojo

wesleyfr@gmail.com (wesley) — Wed, 04 Apr 2012 23:31:00 -0500

Nowadays many websites display twitter widgets with good or bad moods of their authors. I told myself that it was not bad at all, but I think better things could be done.

And this morning, I was standing on the edge of my toilet hanging a clock, the porcelain was wet, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! ~~This is what makes time travel possible: the flux capacitor!~~ This is what displays news on subjects I am interested in: a Dojo widget!

This is what I needed to realize it:
Dojo Toolkit, a modular JavaScript library for building cross-platform desktop and mobile web applications.
And NewsinApp.io, a free service making possible to get aggregated news on subjects. It’s perfect to feed my widget.

Just before I start, here is what we will build:

Two widgets displaying respectively the latest news about Johnny Depp and Tim Burton.
Live demo
The source code of the article

Newsinapp.io, huh ?

Newsinapp.io is a REST API allowing us to get news from topics. Each topic is associated with a context (arts, games, health …), so news provided are more relevant.
For example, when I define the Tim Burton topic, I associate it to the arts/movies context (or entity as they call it). Same if I define a Dojo topic, I can use the computers entity.

To use this API, I have subscribed to their website, then I have received an access key. So I could define all topics I’m interested in. In my case: Tim Burton and Johnny Depp.

Karate lesson with Dojo

It’s time to get some news.
To communicate with newsinapp.io, I use the Dojo XHR module which allows AJAX request.

require(["dojo/_base/xhr"], function(xhr){
  var def = xhr.get({
    headers: {'X-Requested-With': null},
    url: "http://api.newsinapp.io/topics/news/v1/",
    handleAs: "json",
    content : { page: "1",   
                auth_api_key: "your_newsinapp_api_key"}
  });
  def.then(function(response){
    callback(response);
  });
});

xhr.get makes a HTTP GET request. It takes some parameters:

url: resource to get.
content: parameters to pass to resource url

Example of response displayed in the Chrome console:

Great Scott!! 20 news about Tim Burton and Johnny Depp!

But according to Dojo, XHR.get should not be able to do a cross-domain request. And yet it works! It’s because newsinapp.io is compatible CORS (Cross-Origin Resource Sharing). This is a web browser technology specification, which defines ways for a web server to allow its resources to be accessed by a web page from a different domain.
However to be compatible with CORS, XHR request must have the following parameter: headers: {'X-Requested-With': null} (More details on CORS, Dojo and X-Requested-With)

And now … the widget!

I put in a Dojo module all files that compose the widget:

Index.html: html page sample
Client.js: class which enables access to newsinApp.io
NewsListWidget.js: class of the widget
NewsListWidget.html: html template

I begin with the class that defines the widget:

define([ "dijit/_WidgetBase",
         "dojox/dtl/_Templated",
         "dojo/_base/declare",
         "dojo/text!./NewsListWidget.html",
         "dojox/dtl/tag/logic"
          ],
  function(_WidgetBase, _Templated, declare, template){
    return declare([_WidgetBase, _Templated], {
      newsList: null,
...
      templateString: template,
...
    });
  });

Not so much code here, but some explanation is required.

The class inherits from:

dijit/_WidgetBase, to have the taste of a widget
dojox/dtl/_Templated, to have HTML rendering using a template

The widget read the HTML template from templateString variable. And dojo/text! loads the content of the file NewsListWidget.html in templateString. It allows to avoid having the template directly into the JavaScript code.

newslist variable is important here because it contains the list of news coming from newsinapp.io.

The template… or how to dress our widget

What I like with templates is the ability to separate code and presentation. On one side, I have my widget with data and logic, on the other I have my template for the design.
To define HTML template, Dojo has it’s own implementation of the django template language (DTL).

The HTML template in NewsListWidget.html:

<div class="feed-box">
  <div class="header">
    <h3>{{ title }}<h3>
  </div>

{% for news in newsList %}

  {% if news.image %}
  <div class="media">
    <div class="img-container">
      <img src="{{ news.image }}" />
    </div>
  {% else %}
  <div class="media no-image">
  {% endif %}
    {% if news.title %}
    <a href="{{ news.url }}" target="_blank">{{ news.title }}</a>
    {% endif %}
    {% if news.source %}
    <p class="source">{{ news.source }}</p>
    {% endif %}
    <div class="footer"></div>
  </div>

{% endfor %}

</div>

The template can use variables defined in the widget class. So {{ title }} displays the member title of the widget. And the loop {% for news in newsList %} allows to display each news using member newsList.

To use template tag if and for, I have to include a dependency to the module dojox/dtl/tag/logic. For tag such as now or extends, other modules must be added.

We approach 88 mph

Last step, creating the widget:

require(["newsinapp.io/Client", "newsinapp.io/NewsListWidget", 
         "dojo/dom", "dojo/_base/array", "dojo/domReady!"],
  function(NewsinappioClient, NewsListWidget, dom, arrayUtil){

    var newsinapp = new NewsinappioClient('your_newsinapp_api_key');

    newsinapp.getLastNews(function(response) { 
      var container;
      container = dom.byId("newsListWidgetContainer");

      new NewsListWidget({title: "Johnny Depp - Latest news",
                          newsinappResponse: response,
                          topicFilter: "Johnny Depp"}).placeAt(container);;
    });
  });

Some explanations to understand this code:

First, NewsInAppioClient class retrieves the list of news to pass them to the Widget. Then, the Widget filters only news referring to Johnny Deep (topicFilter). And finally, the method placeAt renders the Widget where the HTML tag with ID newsListWidgetContainer is located.

Back to the future!

And voila! It’s already finished for this article. Finally, it was not too hard: we have a widget that can be placed on any HTML page, with news on personalized topics!

Easy to change a domain name ?

didier.rano@gmail.com (didier) — Wed, 04 Apr 2012 08:21:11 -0500

Two domain names and a ruthless man meet together in the cloud. They are deliberating on an important change that affect all of three.

Topics.io: So young, and already having to change your domain name, but why do you renounce me? You hate me so much? I am not good enough for you?

A ruthless man: You must understand. You are a nice domain name. But, we had no choice. The web site retrieves news for our users to integrate them into their applications. In short, our users want news and not topics. So we do not need you anymore.

Newsinapp.io: And, now, go to park somewhere else. You are disturbing me. I’m important now.

topics.io shrugs of the shoulders
Topics.io: Pfft, my ranking is better than yours.

Newsinapp.io: I do not speak with old domain names.

Well, you have understood… newsinapp.io is our new domain name. We quickly dried our little tear to go back to our labs. We are preparing some new posts. And, our mad scientists work on their machine learning, NLP and other spells.

See you later on newsinapp.io

How to build a news aggregator with backbone.js - Part 1

didier.rano@gmail.com (didier) — Thu, 15 Mar 2012 20:21:46 -0500

In this post and the following, we will build a news aggregator in an unique page using backbone.js. By unique page, I mean that all user interactivities will be only in one HTML page, and backend server will provide only data and no HTML tags. Finally, fed by news, this application will use an API RESTful, http://newsinapp.io

backbone.js is a MVC framework in Javascript. A new quirk? A plaything for skilled developers? A fancy of a few gurus in javascript? I’m probably not the only person who thinks it. So I decided to look at it in hope of acquiring new knowledge. In fact, I’m often surprised with Javascript. I had been impressed with jQuery … Backbone.js is definitely another surprise. The kind of surprise that makes me say “I am old with my Python”. So the old man, he will keep his Python anyway, and he will get serious in Javascript.

Then, what is backbone.js ? This framework provides four features

Models as a class and key-values properties
Collections of models
Views which are populated and updated via events raised by models
All data could be synchronized with RESTful JSON interface. And, for me, this last feature is the most important.

To build this news aggregator, we are not going to implement a new RSS or ATOM parser, or implement a web crawler more efficient than Google (You have to wait the next post). In fact, we will use newsinapp.io API. It will provide news, and backbone.js will make life easier to display these news in a web page.

Actually in private alpha, http://newsinapp.io allows to define custom topics, and retrieve news about them. A topic is associated with a context to improve the quality/relevance of news. So, the “backbone.js“ topic will be associated with the “computers“ entity. And, the “Tim Burton“ topic will be associated with the “arts/movies“ entity.

Here, an example to retrieve the latest news

curl 'http://api.newsinapp.io/topics/news/v1/?auth_api_key=API Key'

And the JSON response:

{
   'topic':
   {
     'entities': [ 'arts' ],
     'displayName': 'tim burton',
     'id': '3144'
   },
   'relevanceRate': 1,
   'subTitle': 'New pic of Johnny Depp and Eva Green...',
   'title': 'New pic of Johnny Depp and Eva Green from Tim Burton''s Dark Shadows',
   'source': 'joblo.com',
   ...
}

Now, to begin with the end, here the backbone news aggregator URL that we will build in this article (and follow by others parts): Demo with backbone

This web site contains an unique HTML page. Then, you don’t need to deploy a Django, node.js or others servers frameworks. You only need to put on your server: one web page and some CSS, javascripts files.

In short, everything starts with an index.html file. In this HTML, some javascripts have to be loaded:

<script src="javascripts/vendor/jquery.js"/>
<script src="javascripts/vendor/underscore.js"/>
<script src="javascripts/vendor/backbone.js"/>
<script src="javascripts/news.js"/>

jquery.js: If you want, you could avoid to use jquery, but it is inevitable for me !
underscore.js: A backbone.js dependency. I am too happy to re-discover map and filter functions as my old friend Python !
news.js: We will write all our custom javascript codes in this separate file.

Then, in this new.js file, some magic incantations are needed. Now, we will focus only on javascript code:

(function() {
    jQuery(function($) {
    // Where is my javascript code ?
    }); 
}).call(this);

Phew !

Now, we can write some lines of code using backbone.js.

First, we need to create the model to store each news:

window.NewsItem = Backbone.Model.extend({});

That’s all ? Interesting things begin when create the collection:

    window.NewsCollection = Backbone.Collection.extend({
        model: NewsItem,

        public_api_key : 'A public api key from newsinapp.io’,
        url_base : 'http://api.newsinapp.io/topics/news/v1/?page=1&auth_api_key=’,

        url: function() {
            return this.url_base + this.public_api_key
        },

        parse: function(response) {
            return response.response.news;
        }
    });

How can we test this collection and this model ? The javascript console integrated with Chrome, or Firebug inside the web browser Firefox.

In Chrome, load the HTML page just created. And, you could follow next operations:

Select the Wrench menu Tools -> Developer tools.
Right-click on any page element and select Inspect element.
Click on Console

Now, we are ready to create an instance of our new collection in the javascript console:

And yes, the post is finished !! ;) Well, I’ll provide some explanation. Collections make a link between the model News and information provided by the RESTful service newsinapp.io. The fetch() method allows to update the list of news. Then, you can see that we have retrieved 20 news (“length: 20”), and all news have some attributes as source, title or subtitle.

However, by default, Backbone.js does not know the API newsinapp.io. To solve this problem, we need to manage two steps. First, the url() method provides the API location. Second, we need to implement parse() method. It is a mapping between JSON response and News model. In this case, from JSON, the news list can be found in path ‘response/news’ (xpath syntax):

parse: function(response) {
    return response.response.news;
}

Magic ? But, wait a moment. I cannot call a JSON RESTful api on my web site, if this api is provided from an other web domain: “the URL replying to the request must reside within the same DNS domain as the server that hosts the page containing the request”. Usually, JSONP should be the solution for this problem. But, not really a beautiful solution !

In this case, newsinapp.io is CORS compatible . Then, nothing to do. It works.

That’s all for today ! Feel free to make your comments (at least constructively;)). This is my first post…

Next part: Using backbone views