CFAs (Cloud Framework Applications)

CFA (CloudFrameworkApplication) es una tecnología low-code diseñada para facilitar la creación de aplicaciones web desde el backend de manera ágil y eficiente. Con CFA, los desarrolladores pueden generar interfaces dinámicas simplemente proporcionando un endpoint que devuelva una estructura JSON específica. Esta estructura describe los componentes y las filas que se inyectarán en la webapp, permitiendo que la interfaz se construya automáticamente sin necesidad de escribir código HTML manualmente.

CFA dispone de una amplia librería de componentes ya creados y personalizables para la creación de aplicaciones. 

Para utilizar CFA, solo es necesario invocar una URL con los parámetros correctos, donde el endpoint proporcionado debe devolver una estructura JSON que define los componentes y su disposición en la interfaz. Este enfoque reduce significativamente el tiempo y esfuerzo necesarios para desarrollar aplicaciones web, permitiendo a los desarrolladores centrarse en la lógica de negocio y otras funcionalidades esenciales.

TODO: revisar este contenido

Para utilizar CFA solo debes escribir en la URL:

• {URL-CLOUD-PLATFORM}/app.html#https://core20.web.app/ajax/cfa.html?api={URL-CFA-API}
  

Donde el api definida en {URL-CFA-API} tiene que disponer ENDPOINT:

• [GET] {URL-CFA-API}/:platform/:userId/cfa que debe devolver una estructura JSON compatible con la estructura de un CFA
  

La estructura JSON del ENDPOINT representarán COMPONENTES CFA disponibles para los desarrolladores. La respuesta deberá tener la estructura:

{
  "data": {
     "rows":[{"label":"id-primera-row"},{"label":"id-segunda.row"},..],
     "components":[{"label":"id-primera-row","component":"id-componente","content": {..}},{..}]
  }
}

Básicamente la respuesta debe devolver en data un nodo "rows" donde el CFA utilizará estos 'labels' para crear una estructura de html inyectando HTML que producen la definición de componentes. La estructura base HTML que se crea es:

<div class="row" id="id-primera-row"></div>
<div class="row" id="id-segunda-row"></div>
..

Y luego se inyectará a cada id información de los componentes que vayamos definiendo.