Skip to content

Inicialización de Frame

El método App.initializeFrame() es el punto de entrada principal del SDK. Crea una instancia singleton del objeto Frame y prepara la comunicación con la ventana padre de la plataforma.

Requisito

La aplicación debe ejecutarse dentro de un iframe de la interfaz de la plataforma Flowlu

ts
import App from '@flowlu/miniapp-jssdk'

const frame = await App.initializeFrame()
js
const App = window.FlowluMiniApp;

const frame = await App.initializeFrame();

Ejemplo

Mostrar una notificación con el nombre del usuario actual:

ts
import { App, Toast } from '@flowlu/miniapp-jssdk'

try {
  const frame = await App.initializeFrame()

  // obtener el usuario actual
  let result = await frame.rest.get('/core/user/get/')
  const user = result?.response

  if (user) {
    // notificación con el nombre del usuario
    new Toast({
      title: `¡Hola, ${user.first_name || user.last_name || user.username}!`,
    }).show()
  } else {
    throw new Error('No se pudieron obtener los datos del usuario actual')
  }
} catch (error) {
  console.error(error)
}
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flowlu MiniApp Demo</title>
  </head>
  <body>
    <script src="https://unpkg.com/@flowlu/miniapp-jssdk@latest/dist/miniapp-jssdk.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', async () => {
      const App = FlowluMiniApp;

      try {
        const frame = await App.initializeFrame();

        // obtener el usuario actual
        let result = await frame.rest.get('/core/user/get/');
        const user = result?.response;

        if (user) {
          // notificación con el nombre del usuario
          new App.Frame.Toast({
            title: `¡Hola, ${user.first_name || user.last_name || user.username}!`,
          }).show();
        } else {
          throw new Error('No se pudieron obtener los datos del usuario actual');
        }
      } catch (error) {
        console.error(error);
      }
    });
    </script>
  </body>
</html>

Publicado bajo la licencia MIT.