News App Developed Using Lightning Component Framework

In this blog post, I am going to share the “NewsApp” lightning component application. This application is designed to show the latest news articles from different news sources around the world. It basically shows the latest article published on the news source website.

DEMO LINK: https://news-app-developer-edition.ap17.force.com/

App features:

  • It displays the latest news articles from different news sources.
  • The user can change the news source to read the article from different sources.
  • The user can also search the keywords, phrases, news articles.
  • Application shows the latest breaking news.
  • Countries wise headlines/breaking news available.

How it is developed?

This application is built on Salesforce Platform using Salesforce lightning component framework and it is powered by “NewsAPI“. The “NewsAPI” is a REST API, It provides the news data in JSON format after REST call-out using APEX.

After receiving the data from API, the APEX parser class parse the data and sends it to the component controller JS. This JS controller processes the data and it assigned the data in the different “aura: attribute” (variables) and finally these attributes used on the front-end component code to displays the news articles.

How this application is hosted on Salesforce platform?

Salesforce org provides a feature to host your site on the internet. If you want to try this check out this post.

Salesforce (force.com) site can only hosts the Visualforce page. Okay ? But I have developed this application in lightning component framework. How it’s going to be hosted on force.com site?

The answer of this question is we can embed the lightning component in the visualforce page and then this page will be hosted by the force.com site.

Let’s see the code snippet below how we can embed the lightning component in Visualforce page.

<apex:page showHeader="false" sidebar="false">
<apex:includeLightning />
<div id="LightningCompDisplayId"></div>
<script>
//please note that you need to create a lightning application and need to put the main component uder this app.
/* <aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:News"/>
<c:News />
</aura:application>
*/
//This Lightning app 'NewsApp' will be used here.
$Lightning.use("c:NewsApp", function() {
/* 'News' is Lightning Component Name which we are Displaying In Vf Page
* syntax for create lightning component dynamically :
* $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
$Lightning.createComponent("c:News",
{
},
"LightningCompDisplayId",
function(component) {
// create component Callback, Lightning Component has been Created,
// Now you can set more lightning Component attributes here,
});
});
</script>
</apex:page>
view raw NewsApp hosted with ❤ by GitHub

How to make the call-out to NewsAPI using APEX code?

See the code snippet below.

string baseURL='https://newsapi.org/v2/top-headlines&#39;;
String apiKey =''; //API key get it from Newsapi.org
HttpRequest reqest = new HttpRequest();
system.debug('EndPoint: '+baseURL+'?sources=national-geographic&apiKey='+apiKey);
reqest.setEndpoint(baseURL+'?sources=national-geographic&apiKey='+apiKey);
reqest.setMethod('GET');
reqest.setHeader('Accept','application/json');
Http h = new Http();
HTTPResponse response = h.send(reqest);
System.debug('result : + response.getBody());
view raw NEWSAPI_Callout hosted with ❤ by GitHub

You can use the JSON2APEX site to convert the JSON into APEX class and this class will be used to parse your JSON data.

Demo:

Desktop version
Mobile Version

New Update: Countries wise headlines/breaking news available.

I hope you’ll like it. 😊

Thanks

Arun kumar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s