Hey guys, today in this post we are going to learn about How to Use Rest API Integrating for the National Geographic New in Aura Component Salesforce.
News API is a simple HTTP REST API for searching and retrieving live articles from all over the web.
You can search for articles with any combination of the following criteria:
- Authentication:- Authentication is handled with a simple API key.
- Endpoints:- News API has main endpoints:: a) Top headlines b) Sources
To get started you’ll need an API key. Find the API Key, Click Here.
Other related post that would you like to learn in Salesforce
You can download file directly from github by Click Here.
Create Remote Site Settings β
Final Output β
Create Lightning Component
Step 1:- Create Lightning Component : nationalGeoAPICmp.cmp
From Developer Console >> File >> New >> Lightning Component
nationalGeoAPICmp.cmp [Lightning Component File]
<aura:component controller="googleNewsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" description="c:nationalGeoAPICmp">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="itemList" type="List"/>
<aura:attribute name="titleList" type="List"/>
<aura:attribute name="descriptionList" type="List"/>
<aura:attribute name="urlToImageList" type="List"/>
<aura:attribute name="urlList" type="List"/>
<div class="slds slds-p-around_medium">
<lightning:button variant="brand" label="NatGeo" onclick="{!c.natGeoApi}" />
<div style="width:100%; max-height:400px; overflow:auto;">
<table border="1" cellspacing="0" cellpadding="10" class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-table_striped" style="border-collapse:collapse; border-color:1px #666 solid;">
<aura:iteration items="{!v.itemList}" var="row">
<tr>
<td style="width:20%;"><img src="{!row.urlToImage}" height="50" width="50"/></td>
<td style="width:80%;">
<span><strong>Title:-</strong><a href="{!row.url}" target="_blank" rel="noopener noreferrer">{!row.title}</a></span><br/>
<span><strong>Description:-</strong>{!row.description}</span><br/>
</td>
</tr>
</aura:iteration>
</table>
</div>
</div>
</aura:component>
Create JavaScript Controller
Step 2:- Create Lightning Component : nationalGeoAPICmpController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
nationalGeoAPICmpController.js [JavaScript Controller]
({
doInit:function(component,event,helper){
},
natGeoApi:function(component,event,helper){
helper.natioalGeoNews(component);
},
})
Create JavaScript Helper
Step 3:- Create Lightning Component : nationalGeoAPICmpHelper.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper
nationalGeoAPICmpHelper.js [JavaScript Helper File]
({
natioalGeoNews:function(component,event,helper){
var action = component.get("c.getGoogleNews");
action.setParams({
"url": 'https://newsapi.org/v2/top-headlines?sources=national-geographic&apiKey=549977a7cc4c4a909e86e4e28ebebcce',
});
action.setCallback(this, function(response){
var state = response.getState();
if(state == "SUCCESS"){
var results = response.getReturnValue();
var jsonData = JSON.parse(results);
var itemList = jsonData.articles;
console.log('ItemLength # ' , itemList.length);
for (var J = 0; J < itemList.length; J++) {
component.set("v.titleList", jsonData.articles[J].title);
component.set("v.descriptionList", jsonData.articles[J].description);
component.set("v.urlList", jsonData.articles[J].url);
component.set("v.urlToImageList", jsonData.articles[J].urlToImage);
/*for (var i = 0; i < jsonData.articles[J].source.length; i++) {
console.log('aaaa___title ' , jsonData.articles[J].source[i].title);
//console.log('aaaa___link ' , myObj.channel.item[i].link);
// component.set("v.titleList", myObj.channel.item[i].title);
//component.set("v.linkList", myObj.channel.item[i].link);
}*/
}
component.set("v.itemList", itemList);
}
});
$A.enqueueAction(action);
},
})
Create Apex Class Controller
Step 4:- Create Apex Class : googleNewsController.apxc
From Developer Console >> File >> New >> Apex Class
googleNewsController.apxc [Apex Class Controller]
@RestResource(urlMapping='/GoogleNews/')
global class googleNewsController {
@AuraEnabled
global static String getGoogleNews(String url) {
Http http = NEW Http();
String ResponceData;
HttpRequest req = NEW HttpRequest();
req.setEndpoint(url);
req.setMethod('GET');
try {
HttpResponse res = http.send(req);
ResponceData = res.getBody();
}catch(System.CalloutException e) {
System.debug('Callout error: '+ e);
}
system.debug('ResponceData### ' + ResponceData);
RETURN ResponceData;
}
}
Further post that would you like to learn in Salesforce
What is integration in Salesforce example?
Salesforce Integration is the process of bringing two or more systems together, which allows you to streamline separate processes. Think of cases in your own technology stack in which information is kept in one system but also required in another.
What are the 4 most common REST API operations?
For REST APIs built on HTTP, the uniform interface includes using standard HTTP verbs to perform operations on resources. The most common operations are GET, POST, PUT, PATCH, and DELETE.
Where is REST API used in Salesforce?
ou can use REST API tools to create, manipulate, and search data in Salesforce by sending HTTP requests to endpoints in Salesforce. Depending on where you send requests, you access and operate on different pieces of information, called resources. Resources include records, query results, metadata, and more.
Related Topics | You May Also Like
Our Free Courses β
π Get Free Course β
π Salesforce Administrators π Salesforce Lightning Flow Builder π Salesforce Record Trigger Flow Builder |
π Get Free Course β
π Aura Lightning Framework π Lightning Web Component (LWC) π Rest APIs Integration |