Rest API Integration for the National Geographic News in Aura Component Salesforce | Integrating Google API with Lightning Component Salesforce | Salesforce Integration with Google News Using Rest API in Salesforce

12 views

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:

Download ebooks:- Click here to download E-Book "The most 20 popular articles of w3web.net"

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

Create Remote Site Settings →

Final Output →

Create Lightning Component

Step 1:- Create Lightning Component : nationalGeoAPICmp.cmp

Subscribe My Channel :- Tech W3web - YouTube

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>

<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"/>

<lightning:button variant="brand" label="NatGeo" onclick="{!c.natGeoApi}" />

<aura:iteration items="{!v.itemList}" var="row">

<tr>

<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>

</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);     
    },
})

({

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);
    },
})

({

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;
    }
}

@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

TechW3web:- To know more, Use this Link – YouTube

FAQ (Frequently Asked Questions)

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.

Author of w3web.net

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net