Guides

Introduction

7min

In order to understand better how Sherry Links work we have the following sequence diagram. We see in the diagram the API object. In this an endpoint that returns the metadata must be exposed and for this you can use the tool-framework that suits you best. We have defined examples with NextJS , Express JS and Cloudflare Workers to facilitate the understanding and implementation.

Document image


Definition

Each of the objects in the diagram above corresponds to:

  • Developer: the developer using the sdk
  • SDK: sherry links SDK
  • API: exposes the endpoint that will return the metadata to be consumed by the client.
  • Client: platform that renders the mini-apps, in this case it will be Sherry's playground.

Exaplanation of Diagram

As you can see in the diagram, the Developer uses the SDK to define the metadata, then publishes an API that exposes an endpoint (Guides), this endpoint will return the metadata in the correct format so that finally the Client makes a request to that endpoint to render the mini-app.

API Example

To better understand how this works, let’s use the following example:

Suppose you’ve published an API exposing the following endpoint to return the metadata:

Shell


Once your endpoint is ready, you need to publish your mini-app on Sherry. After it passes the validation process, here’s what happens internally:

  1. Sherry sets up a specific route for your mini-app, where it performs a fetch to the provided endpoint.
  2. Using the data returned by the endpoint, Sherry renders the mini-app.

For instance, if your mini-app’s endpoint is the one above, you could visualize it on Sherry at the following URL:

  • https://app.sherry.social/mini-app/your-url.com/api/your-mini-app

Here’s the breakdown:

  • Sherry App URL:
    • https://app.sherry.social
  • Mini-Apps Route:
    • /mini-app
  • Your Mini-app Endpoint:
    • your-url.com/api/your-mini-app

Final Result

Shell


Internally

Internally, the process works as follows:

  1. Sherry performs a fetch to the mini-app endpoint provided by the developer.
  2. If the fetch is successful, the response data is sent to a component responsible for rendering the mini-app.
Get the metadata of mini-app
GET
Request
Response
TypeScript
Responses
200
404




Updated 22 Nov 2024
Doc contributor
Did this page help you?