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

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

Why Should You Attend It?

🎯 If You Are Facing Any Of These 6 Challenges. This Masterclass Is For You.

  • Career Confusion
  • No Interview Call
  • Low Salary
  • No Promotion/Growth
  • No Finding New Job Opportunity
  • Why you stucking from past so many years in same company?

 
  • 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 β†’

integration national geographic api -- w3web.net
 

Final Output β†’

integration national geographic api -- w3web.net

Create Lightning Component

Step 1:- Create Lightning Component : nationalGeoAPICmp.cmp

From Developer Console >> File >> New >> Lightning Component

nationalGeoAPICmp.cmp [Lightning Component File]

  1.    <aura:component controller="googleNewsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" description="c:nationalGeoAPICmp">
  2. 	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  3.     <aura:attribute name="itemList" type="List"/>
  4.     <aura:attribute name="titleList" type="List"/>
  5.     <aura:attribute name="descriptionList" type="List"/>
  6.     <aura:attribute name="urlToImageList" type="List"/>
  7.  
  8.     <aura:attribute name="urlList" type="List"/>
  9.     <div class="slds slds-p-around_medium">
  10.         <lightning:button variant="brand" label="NatGeo" onclick="{!c.natGeoApi}" />
  11.  
  12.         <div style="width:100%; max-height:400px; overflow:auto;">  
  13.             <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;">
  14.                 <aura:iteration items="{!v.itemList}" var="row">
  15.                     <tr>
  16.                         <td style="width:20%;"><img src="{!row.urlToImage}" height="50" width="50"/></td>
  17.                         <td style="width:80%;">
  18.                             <span><strong>Title:-</strong><a href="{!row.url}" target="_blank" rel="noopener noreferrer">{!row.title}</a></span><br/>
  19.                             <span><strong>Description:-</strong>{!row.description}</span><br/>
  20.                         </td>
  21.                     </tr>
  22.                 </aura:iteration>
  23.             </table>
  24.            </div>
  25.  
  26.     </div>
  27. </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]

  1.   ({
  2. 	doInit:function(component,event,helper){  
  3.     },
  4.  
  5.    natGeoApi:function(component,event,helper){  
  6.      helper.natioalGeoNews(component);     
  7.     },
  8. })

 

Create JavaScript Helper

Step 3:- Create Lightning Component : nationalGeoAPICmpHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

nationalGeoAPICmpHelper.js [JavaScript Helper File]

  1.    ({
  2. 	natioalGeoNews:function(component,event,helper){
  3.  
  4.  
  5.         var action = component.get("c.getGoogleNews");
  6.         action.setParams({          
  7.             "url": 'https://newsapi.org/v2/top-headlines?sources=national-geographic&apiKey=549977a7cc4c4a909e86e4e28ebebcce',
  8.  
  9.         });
  10.         action.setCallback(this, function(response){  
  11.             var state = response.getState();
  12.  
  13.             if(state == "SUCCESS"){  
  14.  
  15.                 var results = response.getReturnValue();      
  16.                 var jsonData = JSON.parse(results);
  17.  
  18.                var itemList =  jsonData.articles;
  19.  
  20.  
  21.  
  22.               console.log('ItemLength #  ' , itemList.length);
  23.  
  24.               for (var J = 0; J < itemList.length; J++) {  
  25.  
  26.  
  27.                    component.set("v.titleList", jsonData.articles[J].title);
  28.                    component.set("v.descriptionList", jsonData.articles[J].description);
  29.                    component.set("v.urlList", jsonData.articles[J].url);
  30.                    component.set("v.urlToImageList", jsonData.articles[J].urlToImage);
  31.  
  32.                 /*for (var i = 0; i < jsonData.articles[J].source.length; i++) {                  
  33.                     console.log('aaaa___title ' , jsonData.articles[J].source[i].title);
  34.                     //console.log('aaaa___link ' , myObj.channel.item[i].link);
  35.                     
  36.                   //  component.set("v.titleList", myObj.channel.item[i].title); 
  37.                     //component.set("v.linkList", myObj.channel.item[i].link);
  38.                     
  39.                 }*/
  40.                 }
  41.  
  42.                 component.set("v.itemList", itemList); 
  43.  
  44.             }  
  45.         });  
  46.         $A.enqueueAction(action);
  47.     },
  48. })

 

Create Apex Class Controller

Step 4:- Create Apex Class : googleNewsController.apxc

From Developer Console >> File >> New >> Apex Class

googleNewsController.apxc [Apex Class Controller]

  1.   @RestResource(urlMapping='/GoogleNews/') 
  2. global class googleNewsController {
  3.     @AuraEnabled
  4.     global static String getGoogleNews(String url) {
  5.         Http http = NEW Http();
  6.         String ResponceData;
  7.  
  8.         HttpRequest req = NEW HttpRequest();
  9.  
  10.         req.setEndpoint(url);
  11.         req.setMethod('GET');
  12.  
  13.  
  14.         try {
  15.  
  16.             HttpResponse res =  http.send(req);
  17.             ResponceData =  res.getBody();
  18.  
  19.         }catch(System.CalloutException e) {
  20.             System.debug('Callout error: '+ e); 
  21.  
  22.         }
  23.         system.debug('ResponceData### ' + ResponceData);
  24.        RETURN ResponceData;
  25.     }
  26. }

 

Further post that would you like to learn in Salesforce

 

 

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.

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



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

Leave a Comment