Quick News Lightning Component

In this post, we’ll look at the “NewsApp” lightning component application that I have developed on the Salesforce lightning platform. This application is intended to display the most recent news articles from various news sources around the world. It basically displays the most recent article published on the news source’s website.

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

App features:

It displays the most recent news articles from various news sources.
The user can switch between news sources to read articles from various sources.
The user can also search for keywords, phrases, and news articles.
The app displays the most recent breaking news.
Country-specific headlines and breaking news are available.

How it is developed?

This app is built on the Salesforce Platform with the Salesforce lightning component framework and is powered by “NewsAPI.” The “NewsAPI” is a REST API that returns news data in JSON format following a REST call-out via APEX.

The APEX parser class parses the data received from the API and sends it to the component controller JS. This JS controller processes the data and assigns it to various “aura: attributes” (variables), which are then used in the front-end component code to display the news articles.

How this application is hosted on the 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 host the Visualforce page. Okay? But I have developed this application in the lightning component framework so how it’s going to be hosted on the force.com site?

The answer is that we can embed the lightning component in the visualforce page, which will then be hosted by the force.com site.

Let’s take a look at the code below to see how we can embed the lightning component in the 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';
	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());