How to Integrate SAP Leonardo with Wix

Introduction to SAP Leonardo and Wix Integration

• SAP Leonardo is a comprehensive digital innovation system that integrates with multiple platforms to enhance functionality through AI, IoT, and blockchain technologies.

 

• Wix is a powerful website builder that allows users to create stunning websites with ease. Integrating SAP Leonardo with a Wix site can add advanced capabilities such as AI and IoT.

Prerequisites

• An active SAP Leonardo account with the necessary permissions to access APIs and services.

 

• A Wix account with a website already built or in development stage.

 

• Basic understanding of Wix's Velo coding platform, which allows the addition of custom code.

Configure SAP Leonardo Services

• Log into your SAP Cloud Platform and navigate to the SAP Leonardo services.

 

• Activate the APIs you intend to use. This could involve AI services, IoT data access, or blockchain transactions.

 

• Generate API keys and save them securely; these will be used for authentication when making API calls from your Wix site.

Set Up Wix Site for Integration

• Access your Wix Editor and switch to the Velo developer mode by enabling it from the top menu. This allows you to add custom code to your Wix site.

 

• Create a new backend service by navigating to the "Backend" section in the Velo side panel and clicking "Add New." Name this service appropriately.

Establish API Connection in Wix

• In your newly created backend file, write a function to perform HTTP requests to the SAP Leonardo API. You can use Wix's `fetch` API for this purpose.

 

• Ensure to include the necessary headers, such as `Authorization` with your API key, and set the `Content-Type` as needed by the SAP service.

export async function fetchLeonardoData() {  
   const response = await fetch("https://api.sap.com/leonardo/service-endpoint", { 
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       'Authorization': 'Bearer YOUR_API_KEY'
     }
   });

   if (!response.ok) {
     throw new Error('Network response was not ok ' + response.statusText);
   }

   return await response.json();
}  

Invoke SAP Leonardo Services in Wix Pages

• Go to the page where you want to display SAP Leonardo data and open the Velo Code panel.

 

• Import the backend function you created and call it on page load or in response to user actions.

 

• Display the fetched data using Wix's frontend code, manipulating the DOM as needed to fit your design.

import { fetchLeonardoData } from 'backend/yourBackendFile';  

$w.onReady(async function () {  
  try {
    const data = await fetchLeonardoData();
    $w("#textElement").text = data.someProperty; // Example: Displaying data in a text element
  } catch (error) {
    console.error('Failed to fetch data: ', error);
  }
});  

Test and Debug

• Preview your site in the Wix Editor to test the integration. Check console logs for any errors or issues during API calls and data handling.

 

• Debug any integration issues such as incorrect API endpoints or authentication errors by referencing SAP's and Wix's documentation.

Deploy and Monitor

• Once everything is functioning correctly, publish your Wix site to make the changes live.

 

• Continuously monitor the integration for any updates needed from SAP Leonardo or Wix that might affect functionality.