In the next tutorial, we’ll create a simple UI Component that can call this Cloud Function and test them together in the simulator of the Component SDK.

For a more detailed description of UI Components, please refer to the UI Components documentation.

What you need

In addition to the requirements and results from the first tutorial, this tutorial also requires:

• Git
• Node.js 18 or newer

Getting started

Run the following commands to start the frontend component.

$ cd tutorial
$ npx degit ixoncloud/component-workspace frontend
$ cd frontend
$ npm install
$ npm run generate tutorial-frontend

A simple frontend component

Open tutorial/frontend/components/tutorial-frontent/tutorial-frontend.svelte and completely replace the code with:

<script>
  import { onMount } from 'svelte';

  export let context;
  export let client;
  export let result;

  onMount(() => {
    client = context.createBackendComponentClient();
  });

  async function onClick() {
    const response = await client.call(
      'functions.hello', 
      {'parameter': 'Developer'});
    result = JSON.stringify(response, null, 2);
  }
</script>

<main>
  <form>
    <button on:click={onClick} type="button">
      Call Cloud Function!
    </button><br />
    <textarea bind:value={result} 
              rows="10" cols="80"></textarea>
  </form>
</main>

Now run the simulator with the frontend component:

$ npx cdk simulate tutorial-frontend

When you click the Call Cloud Function! button, the Cloud Function is called and responds with:

{"message": "Hello Developer"}

In the terminal where you run ixoncdkingress, you’ll see an HTTP log entry of the call:

127.0.0.1 - - [31/Jan/2023 14:54:38] "POST / HTTP/1.1" 200 30

Excellent! You have now successfully called a Cloud Function from a UI Component in the simulation environment.

Things to try out from here

Play around with the client.call() parameters and use a different function name. After you have renamed the function in the Cloud Function (or even added a second function). Use different parameter names.