news component in aem

News Component using Guardian News API in AEM

 

A simple news component which used Guardian News API and reduce Servlet data calls using browsers local storage features. 

Here’s the overview of component:-

Component displays 4 news for each of the keyword authored. As an input to the component author has to give four keywords for which he wants news to be displayed. These keyword can be any like apple, adobe, facebook, google etc.

Once inputs are given Servlet will fetch the news and returned to client side JavaScript. It’s the responsibility of JavaScript to make sure it caches this news data in browser local storage. There are very less chance of changing news data every hour which is why this data is cached for 1 hour in local storage. Once time expires, again call to Guardian API will be made by servlet and cached into local storage. 

Developers can modify this cached time depending on their preference.

Following things are included in our news component:

  1. A Servlet: Fetches the news using Guardian API based on the keywords authored in the component
  2. Client side JavaScript script: It places the response received from Servlet into page and also manages the cache of news to reduce frequent Servlet calls.
  3. Bootstrap CSS and JS

Lets get started..

1. Authoring the component

User has to enter 4 keywords for which he wants to display news.Authoring the component

2. JavaScript calls to Servlet asking for news for above authored keywords

This code will take care of all localstorage and its time out, below Servlet will be called by it.

3. Servlet which fetches news from Guardian API

4. Once data is returned from client side, it can be seen on component

News-component

Simple error will appear if there is something broken due to Internet connection

http://adobeaemclub.com/wp-content/uploads/2016/02/News-component-error-message.png

 

Feel free to enhance and optimize this component. Complete project is available on our Github repository.

2 thoughts on “News Component using Guardian News API in AEM

    1. Hi Pankaj,

      The else part starting from line 41-58 will execute in case browser does not support local storage as it was introduced as a part of HTML5. In such scenario we need to make calls to Servlet every time or implement some other approach.
      Ideally ” localStorage.setItem(“news”, result);” should also not be there. I have removed it. Hope this answer your clarification.

      Thanks

       

Leave a Reply

Your email address will not be published. Required fields are marked *