Write your first component

Extend your app's functionality with custom Python3 components.

In order.yaml we used a component to place the order. Meya doesn't have a built-in pizza ordering component, though, so we'll have to build one. On the Meya platform, custom components are written using Python3.

Create the component

  • Open your app in the Meya Console.
  • Select the Components page.
  • Click the Create component button.
  • Rename the component from new_component.py to submit.py.
  • Paste the following code into the code editor, and click Save (ignore the error message for now):
from dataclasses import dataclass
from meya.component.element import Component
from meya.component.element import ComponentResponse
from meya.element.field import element_field
from meya.element.field import response_field
from meya.entry import Entry
from typing import List


@dataclass
class OrderComponent(Component):
    api_token: str = element_field()
    size: str = element_field()
    ingredients: List[str] = element_field()
    payment_method: str = element_field()
    address: str = element_field()
    is_delivery: bool = element_field()

    async def start(self) -> List[Entry]:
        # Example code only. You'll need to modify this code to get it working with
        # your API.
        url = "YOUR_API_URL"
        headers = {
            "Authentication": f"Bearer {self.api_token}",
        }
        data = dict(
            size=self.size,
            ingredients=self.ingredients,
            payment_method=self.payment_method,
            address=self.address,
            is_delivery=self.is_delivery,
        )
        # response = await self.http.post(
        #     f"{url}/orders/", headers=headers, data=data
        # )
        return self.respond(data=ComponentResponse(result=True))

Lines 12-17: Remember those variables we passed to the submit component in order.yaml? Well, here's where they're defined. We've specified six properties, and their data types, that are required in order to submit the order. (You can also add optional properties.)

Line 19: Here we override the start() method.

🚧

The start() method

All custom components should override the start() method. This is the main point of entry for a component.

The start() method can return a list of one or more entries, and (optionally) some data that will be placed on flow scope. In this case, we're setting flow.result to true.

Lines 33-35: If you already know Python, you may be familiar with the requests library, which is used for making HTTP calls. In Meya components you'll use self.http instead of requests. The good news is, self.http has a very similar API as the requests library so it feels very familiar and is simple to use.

🚧

You'll notice that this example component doesn't actually make an API call (lines 33-35 are commented out). Instead, the component always returns successfully. The purpose of this component is just to give you an idea of how components are typically laid out.

Update the vault

The component requires an API token which is stored in the vault. Let's update the vault now.

  • Select the Vault page.
  • Click the Add item button.
  • Change the item key from Item to api_token.
  • Set the value to be abc123.
  • Click the check mark button.
  • Click Save.

(Optional) Local IDE

Create the component

Create the following files in your IDE:

  • component/submit.py: paste the content of the submit.py file above.

Update the vault

The component requires an API token which is stored in the vault. Let's update the vault now.

In your app's root folder, open vault.yaml and copy this code into it:

api_token: xxx

📘

You can leave the value as xxx since we shouldn't be storing real secrets in vault.yaml.

Next, open vault.secret.yaml and copy this code into it:

api_token: abc123

📘

Since we're not actually making a real API call, we can set the value to anything. In this case, let's use abc123.

Upload the new vault secrets to the Grid using this command in your terminal:

meya vault upload --file vault.secret.yaml

Push changes

Now all we have to do is save the component file, and push it to the Grid. You can do that by opening up a terminal and running these commands:

meya format
meya push

What’s Next