Spoonacular Food Recipe API Integration to Salesforce

Apex Class: 

public class SpoonacularApi{
    private static final String SPOONACULAR_API = 'https://api.spoonacular.com';
    private static final String API_KEY = '537d95025e764fe69015355ed9ae8c74';
    @AuraEnabled
    public static String getRandomRecipes(){
        Http http = new Http();
   		HttpRequest request = new HttpRequest();
		request.setEndpoint(SPOONACULAR_API+'/recipes/random?apiKey='+ API_KEY);
		request.setMethod('GET');
		HttpResponse response = http.send(request);
		// If the request is successful, parse the JSON response.
		System.debug('response ::: '+ response.getStatusCode());
        
		if(response.getStatusCode() == 200) {
            return response.getBody();
		}
        return '';
    }
    @AuraEnabled
    public static String getRecipe(String recipeId){
        Http http = new Http();
   		HttpRequest request = new HttpRequest();
		request.setEndpoint(SPOONACULAR_API+'/recipes/'+recipeId +'/information?apiKey='+ API_KEY);
		request.setMethod('GET');
		HttpResponse response = http.send(request);
		// If the request is successful, parse the JSON response.
		System.debug('response ::: '+ response.getStatusCode());
        
		if(response.getStatusCode() == 200) {
 		 return response.getBody();
		}
        return '' ;
    }
    @AuraEnabled
    public static String getRecipeByIngredients(String ingredients){
        Http http = new Http();
   		HttpRequest request = new HttpRequest();
		request.setEndpoint(SPOONACULAR_API+'/recipes/findByIngredients?apiKey='+ API_KEY + '&ingredients='+ingredients);
		request.setMethod('GET');
		HttpResponse response = http.send(request);
		// If the request is successful, parse the JSON response.
		System.debug('response ::: '+ response.getStatusCode());
        
		if(response.getStatusCode() == 200) {
 		  return response.getBody();
		}
        return '';
    }
    @AuraEnabled
    public static String getRecipesByNutrients(String minCarbs){
        Http http = new Http();
   		HttpRequest request = new HttpRequest();
		request.setEndpoint(SPOONACULAR_API+'/recipes/findByNutrients?apiKey='+ API_KEY + 'minCarbs=' + minCarbs);
		request.setMethod('GET');
		HttpResponse response = http.send(request);
		// If the request is successful, parse the JSON response.
		System.debug('response ::: '+ response.getStatusCode());
        
		if(response.getStatusCode() == 200) {
            return response.getBody();
		}
        return '';
    }
}

Child Component:-(SpoonacularApiIntegration)

HTML code:

<template>

    <lightning-card title="Search Recipes">

      <div style="padding: 0 1rem">

        <lightning-layout horizontal-align="space">

          <lightning-layout-item size="8">

            <lightning-input

              name="enter-search"

              type="search"

              placeholder="Search recipe by ingredients"

              variant="label-hidden"

              class="ingredient-input"

            ></lightning-input>

          </lightning-layout-item>

          <lightning-layout-item size="4" padding="horizontal-medium">

            <lightning-layout horizontal-align="start">

              <lightning-layout-item padding="horizontal-medium">

                <lightning-button

                  label="Search"

                  onclick={fetchRecipesByIngredients}

                ></lightning-button>

              </lightning-layout-item>

              <lightning-layout-item>

                <lightning-button

                  label="Get Random Recipe"

                  variant="brand"

                  onclick={fetchRandomRecipe}

                ></lightning-button>

              </lightning-layout-item>

            </lightning-layout>

          </lightning-layout-item>

        </lightning-layout>

 

        <lightning-layout multiple-rows>

          <template for:each={recipes} for:item="recipe">

            <lightning-layout-item size="12" key={recipe.id}>

              <c-spoonacular-api-integration

                recipe-id={recipe.id}

                image={recipe.image}

                summary={recipe.summary}

                time={recipe.readyInMinutes}

                price={recipe.pricePerServing}

                title={recipe.title}

                dish-types={recipe.dishTypes}

                diets={recipe.diets}

              ></c-spoonacular-api-integration>

            </lightning-layout-item>

          </template>

        </lightning-layout>

      </div>

    </lightning-card>

  </template>

Child Component: (SpoonacularApiIntegration)

JS Code: 

import { LightningElement , api} from 'lwc';

import getRecipe from '@salesforce/apex/SpoonacularApi.getRecipe';

export default class SpoonacularApiIntegration extends LightningElement {

  @api image;

  @api title;

  @api price;

  @api time;

  @api summary;

  @api recipeId;

  @api

  set dishTypes(data) {

    this.dishList = data && data.join();

  }

  get dishTypes() {

    return this.dishList;

  }

  @api

  set diets(data) {

    this.dietList = data && data.join();

  }

  get diets() {

    return this.dietList;

  }

  dishList;

  dietList;

  fetchRecipe() {

    getRecipe({ recipeId: this.recipeId })

      .then((data) => {

        const recipe = JSON.parse(data);

        if (recipe) {

          this.image = recipe.image;

          this.price = recipe.pricePerServing;

          this.time = recipe.readyInMinutes;

          this.summary = recipe.summary;

          this.dishList = recipe.dishTypes && recipe.dishTypes.join();

          this.dietList = recipe.diets && recipe.diets.join();

        }

      })

      .catch((error) => {

        console.error(error);

      });

  }

  get hasDetails() {

    return this.summary ? true : false;

  }

}

Meta XML code: (SpoonacularApiIntegration)

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

HTML Code: (SpoonacularApiIntegration2)

<template>

    <lightning-card title="Search Recipes">

      <div style="padding: 0 1rem">

        <lightning-layout horizontal-align="space">

          <lightning-layout-item size="8">

            <lightning-input

              name="enter-search"

              type="search"

              placeholder="Search recipe by ingredients"

              variant="label-hidden"

              class="ingredient-input"

            ></lightning-input>

          </lightning-layout-item>

          <lightning-layout-item size="4" padding="horizontal-medium">

            <lightning-layout horizontal-align="start">

              <lightning-layout-item padding="horizontal-medium">

                <lightning-button

                  label="Search"

                  onclick={fetchRecipesByIngredients}

                ></lightning-button>

              </lightning-layout-item>

              <lightning-layout-item>

                <lightning-button

                  label="Get Random Recipe"

                  variant="brand"

                  onclick={fetchRandomRecipe}

                ></lightning-button>

              </lightning-layout-item>

            </lightning-layout>

          </lightning-layout-item>

        </lightning-layout>

 

        <lightning-layout multiple-rows>

          <template for:each={recipes} for:item="recipe">

            <lightning-layout-item size="12" key={recipe.id}>

              <c-spoonacular-api-integration

                recipe-id={recipe.id}

                image={recipe.image}

                summary={recipe.summary}

                time={recipe.readyInMinutes}

                price={recipe.pricePerServing}

                title={recipe.title}

                dish-types={recipe.dishTypes}

                diets={recipe.diets}

              ></c-spoonacular-api-integration>

            </lightning-layout-item>

          </template>

        </lightning-layout>

      </div>

    </lightning-card>

  </template>

JS Code:(SpoonacularApiIntegration2)

import { LightningElement } from 'lwc';

import getRandomRecipe from

'@salesforce/apex/SpoonacularApi.getRandomRecipes';

import getRecipeByIngredients from

'@salesforce/apex/SpoonacularApi.getRecipeByIngredients';

export default class SpoonacularApiIntegration2 extends LightningElement {

  recipes = [];

  fetchRandomRecipe() {

    getRandomRecipe()

      .then((data) => {

        this.recipes =

          JSON.parse(data) && JSON.parse(data).recipes

            ? JSON.parse(data).recipes

            : [];

      })

      .catch((error) => {

        console.error(error);

      });

  }

  fetchRecipesByIngredients() {

    const ingredients = this.template.querySelector(".ingredient-input").value;

    getRecipeByIngredients({ ingredients })

      .then((data) => {

        this.recipes = JSON.parse(data);

      })

      .catch((error) => {

        console.error(error);

      });

  }

}

MetadaTA.XML: (SpoonacularApiIntegration2)

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

<targets>

    <target>lightning__RecordPage</target>

    <target>lightning__AppPage</target>

    <target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>