# MiniApp Development - SuperApp Integration

**MiniApps** are mini-applications developed in Plateau Studio and integrated into the SuperApp using Plateau Studio.

**SuperApp** serves as a **centralized hub for hosting and managing MiniApps**, streamlining the versioning and management processes of your Plateau Studio creations within the platform.

This document will walk you through the necessary steps and guide you to integrate your application for publishing your applications developed in Plateau Studio to the SuperApp Portal.

**To intagrate your MiniApps to the SuperApp, follow these steps:**

## Create Organization

Ensure you are part of an organization that has permission to publish to the SuperApp. If you are not yet a member, contact your organization’s administrator to be added.

For more detailed information about the organization structure in Plateau Studio, click [**See More**](https://docs.onplateau.com/Getting-Started/creating-organisation).

## Create Application

Use Plateau Studio’s intuitive components and features to design and build your mini-application. To refer to the Plateau Studio's extended documentation for creating your application, click [See More](LINK onboarding).

**You can follow the steps below to create your application quickly:**

* **Define Your App Pages:** Begin by determining the pages of your application. You can decide whether you need to utilize Block Components or not. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Components/Application-Components/block-component)**.

* **Create Pages:** Create your pages and use the Folder Structure for easy management of your application pages. For more detailed information, click **[See More](https://docs.onplateau.com/Develop-App-With-Plateau-Studio/creating-an-application#how-to-create-folders)**.

* **Set Application-Wide Styles:** Establish styles that are consistent across your application by defining them in **Settings > Theme** interface. Implement these styles across your pages as needed. (EZGİ) ( Mobilde kullanılabilir olduğu teyit edildikten sonra eklenmeli. )

* **Utilize Styled Components:** Streamline your page designs by identifying components that will be consistently used throughout your application. Create a custom set of **Styled Components** to expedite the design process. (EZGI)

## UI Development

After following the previous steps, develop your MiniApps' UI screens in Plateau Studio, by creating your MiniApps' layout, dragging & dropping components, and many more.

For more detailed information about the **UI page development** steps, you can check our general documentation about how to use Plateau Studio or our quick Onboarding guide here. LINK to Onboarding doc

* **Create Block Components:** Start by defining the UI screens according to your project requirements. Consider the application flow and desired user interactions. Determine the use of **Block Components** for more efficient page rendering. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Components/Application-Components/block-component)**.

* **Adjust UI Layout / Responsive:** After creating your pages, use **Container components such as Row, Col, and Card** to construct the page layout. Utilize the Layout properties in the Style tab for responsive design, adjusting page layouts for different device resolutions. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Layout-Design/layout)**.

* **Drag&Drop Components:** Add the necessary components to your UI screens. Choose from a wide range of pre-defined Basic components or from Your App Components. If you need custom ones to fit your needs use Block Components. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Components/Application-Components/block-component)**.

* **Preview Your Page:**
While developing your page, use the **switch button** on top of the Editor to preview. For mobile applications, download the **StudioApps** application, Using Mobile Preview app, scan the page QR code on the Editor, and see the changes you make on the Editor in real-time on your phone.

## Define Page Behaviours

* **Connect Pages:** Establish connections between different pages of your application. Define navigation paths to enable transitions between screens. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Logic/page-routing)**.

* **Defining Props and Events:** Define props and events for the components to enable communication and interaction between them. Props allow you to pass data from parent components to child components, while events enable components to communicate changes or trigger actions.

* **Connecting Used Components:** Connect the custom components you've created to build the desired user interface. Establish relationships between components to create a cohesive and functional UI design.

* **Service Integrations:** To interact with backend services in UIs, call and manage HTTP requests in your page event or component events. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Logic/backend-service-integration)**.

* **Set / Get Data Storage:** Use the store structure to transfer data between pages. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Logic/Data-Storage/application-data-storage)**.

* **Data Masking & Formatting**: To ensure valid input, set **Input Masking values** for fields. Use Formatting to display data received from the service in a specific format on the front end. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Logic/data-formatting)**.

* **Validation**: Ensure that the data entered by users into various input fields meets specific criteria or rules before it's submitted. For more detailed information, click **[See More](https://docs.onplateau.com/UI-Screens/Logic/validations#validation-methods)**.

* **Defining Global Methods**: You can define methods either on a per-page basis or across the entire application for reuse. (LINK)

## Integration with Analytics Tool

You can use the Dataroid feature integrated into the SuperApp to enhance every customer interaction and deliver a better experience with data-driven insight. Feed metrics from your application to the Dataroid using dataroid events.

EKRAN (Mustafa- Gafur)

## Using the Consent

Within the logged-in area, you can use the returned information in your projects by triggering the relevant functions based on the user information you need. (EZGI - Consent tanımı)

| Function Name | Information| Key Word | Type | Send Data |
| ------------- | ---------- | --------- | ---- | --------- |
| GetIdentity | Name<br>Surname<br>Identification Number | .Name<br>.Surname<br>.TCKN | String | - |
| GetMailAddress | E-Mail Address | .Email | String |- |
| GetPhoneNumber | Phone Number | .PhoneNumber | String |- |
| stopMiniApp | Stop the MiniApp | - | - |- |
| GetToken| Generated Token from Main Application | .AccessToken | String |- |
| GetQRData| Information of the QR scanned with the device camera. | .qrData | String |- |
| GetClientIP| Generated IP Number from Main Application | .ClientIp | String |- |
| OpenMap| Opens the Device's Map Application | - | - | { latitude: number, longitude: number } |
| GetCustomerNumber| Customer Number | .CustomerNumber | String |- |
| GetCommercialCustomerNumber| Commercial Customer Number | .CommercialCustomerNumber | String |- |

In the Plateau Studio Editor, you can call **quick.Quick.host.trigger** from the **Event tab** for any component you are using.

The **quick.Quick.host.trigger** triggers the function in the shell project with the specified name. You can read the data returned by the function in the shell project as the response. These functions do not work in the development environment and must be run within the shell project for testing.

>quick.Quick.host.trigger(functionName:string, params:{}): Promise<{isSuccess: boolean,retVal: any}>

##### Example Usage

async function CallConsent() {
    let param : any;
    quick.Quick.host.trigger("FunctionName", {}).then(response => {
        param = response.retVal["funcRetVal"].Param
    }).catch(err => {
        quick.EM.trace("error" + err)
    })
};

CallConsent();

If you need to trigger **multiple functions within the same event**, you should call these functions nested, as shown below:

##### Multiple Call Consent Example Usage

async function CallConsent() {
    let param: any;
    let param2: any;
    quick.Quick.host.trigger("FunctionName", {}).then(response => {
        param = response.retVal["funcRetVal"].Param;

        quick.Quick.host.trigger("FunctionName", {}).then(response => {
            param2 = response.retVal["funcRetVal"].Param;
        }).catch(err => {
            quick.EM.trace("error" + err)
        })

    }).catch(err => {
        quick.EM.trace("error" + err)
    })
};
CallConsent()

## Using the Payment Component in MiniApps

If the page contains a **Payment Component**, upload the Payment Component to the application by selecting **Add New**, then **Import Module**. This component should already be added to the organization group.

<img src="https://stechq.github.io/cdn/superapp-onboarding/ımport-module-1-1.png" width="640" />
<img src="https://stechq.github.io/cdn/superapp-onboarding/ımport-module-1-2.png" width="640" />
<img src="https://stechq.github.io/cdn/superapp-onboarding/ımport-module-1-3.png" width="640" />

## Manage App Versions

- To manage your application versions, navigate to **Settings**.
- Under **App Versions**, you can check you Application List where you can create new version by clicking **ADD NEW** button or delete the unused packages by using the bin icon on the right.

<img src="https://stechq.github.io/cdn/superapp-onboarding/app-version-settings-1.png" width="640" />

:::info Note

Versioning is the step for maintaining updates and ensuring consistency across different stages of your application's lifecycle. For more detailed information about versioning, click [See More](VERSION LINK - EZGI).

:::

## Create Package

- Once you complete these preparations that explanained above, navigate to **Publish**, then select **Create Package** to proceed.

<img src="https://stechq.github.io/cdn/superapp-onboarding/publish-create-package-1.png" width="640" />

- In the panel that opens, click **ADD NEW** and create new version or select existing one/ones and click **CREATE**.

<img src="https://stechq.github.io/cdn/superapp-onboarding/publish-create-package-2.png" width="640" />

- Select the related package from the list, then click **CREATE PACKAGE.**

:::success

You can follow this process from **Publish > See Progress Details**.

:::

To see your package in Superapp Developer Portal, need to integrate token with Plateau Studio. How to Generate a Token
After creating your package, you are ready to go to the SuperApp platform to intagrate your application by using the token generated in Plateau Studio.

## Token Integration

To securely publish your application to the SuperApp platform, you need to acquire a token. Tokens authenticate your application and ensure secure communication between Plateau Studio and the SuperApp portal.

### How to Generate a Token

- Go to **App Settings** and navigate to **Integrations** tab.
- To generate a token click **Activate**.

<img src="https://stechq.github.io/cdn/superapp-onboarding/token-integration-1.png" width="640" />

- After generating your token in Plateau Studio, copy and save the generated token to use it when adding your MiniApp to **SuperApp Portal**. To proceed your integration, go to **SuperApp Portal** (LINK) and **login**.

<img src="https://stechq.github.io/cdn/superapp-onboarding/token-integration-2.png" width="640" />

:::info Note

Clicking **DETAILS** button allows you to re-access to your generated token.

:::

<img src="https://stechq.github.io/cdn/superapp-onboarding/token-integration-3.png" width="640" />

- Paste the copied token into the **Studio Token** and click the **Get MiniApp Information** button.

<img src="https://stechq.github.io/cdn/superapp-onboarding/new-miniapp-from-studio-2.png" width="640" height="620" />

If successful, the application name created in Plateau Studio should appear in the **Mini Application Name** section.

- Provide the necessary details and upload your **MiniApp logo** and **Analysis Document** for MiniApp creation in the Portal and complete the process.

:::info Note

MiniApp logo only affects your SuperApp Portal image and you can upload any **PDF document** for the analysis document.
:::

- Next, you should expect the package information created in Plateau Studio to appear in the **Version List** button of the transferred MiniApp in the Portal.

- From the available versions, select the desired one and click the **Get Studio Version** button.

:::success

After this step, the MiniApp is sent for approval in **UAT**. Once approved, it is published. For production deployment, you should use the **SuperApp Promotion process**.

:::