Portada

Creando tu primera CFA

Todo CFA parte de un endpoint el cual devuelve al frontend una estructura JSON con la configuración de la aplicación que debe representar. Por lo tanto, el primer paso que debemos realizar es la creación de dicho endpoint.

Para ayudar con la comprensión de los conceptos, vamos a plantear un ejemplo de implementación de una aplicación CFA. Dicha aplicación actuará como un dashboard de información sencillo que mostrará una interfaz básica con:

  • Un titular: "CFA Ejemplo"
  • Un subtitulo: "con subtiltular"
  • Una barra de progreso de color verde que muestre el 70%


1. Creamos el endpoint de CFA

Lo primero que tenemos que hacer es decidir, dentro de nuestra estructura de directorios de backend, donde queremos añadir el endpoint que dará servicio a nuestro CFA. En el ejemplo que nos ocupa y que vas a tener disponible para consular en Replit, hemos creado un archivo "cfas.php", dentro del directorio "api > examples":

https://backend-core-php8.replit.app/examples/cfas 


El código lo podéis encontrar en:
https://replit.com/@cloudframework/backend-core-php8#api/examples/cfas.php .


Este API dispone de un END-POINT /cfa que nos devuelve la estructura de la aplicación que se debe representar.
[GET] https://backend-core-php8.replit.app/examples/cfas/{platform}/{user}/cfa

{
    "success": true,
    "status": 200,
    "code": "ok",
    "time_zone": "UTC",
    "user": "%7Bplatform%7D",
    "company": "%7Buser%7D",
    "data": {
        "rows": [
            {
                "label": "row_title"
            },
            {
                "label": "row_progress"
            }
        ],
        "components": [
            {
                "label": "row_title",
                "component": "header",
                "content": {
                    "icon": null,
                    "title": "CFA Ejemplo",
                    "subtitle": "con subtitular",
                    "js-call": null,
                    "js-ico": null
                }
            },
            {
                "label": "row_title",
                "component": "header",
                "content": {
                    "icon": null,
                    "title": "CFA Ejemplo",
                    "subtitle": "con subtitular",
                    "js-call": null,
                    "js-ico": null
                }
            },
            {
                "label": "row_progress",
                "component": "progress-chart",
                "content": {
                    "title": "Progress Chart",
                    "min": null,
                    "max": 100,
                    "value": 70,
                    "color": null,
                    "class": "bg-success",
                    "id": "progress-chart6708586e38836"
                }
            }
        ]
    },
    "logs": "only restful.logs.allowed_ips. Current ip: 34.96.41.116, 34.117.33.233, 35.191.31.96,35.232.4.240"
}


1.1 La clase CFA

Para poder utilizar los métodos y componentes de CFA, el primer paso que debemos realizar es la importación de la clase CFA desde el framework de CloudFramework. En el código de ejemplo proporcionado, busca la línea que te muestro a continuación para tener un ejemplo

$cfa = $this->core->loadClass('CFA');


Una vez importada la clase, ya tenemos acceso a todas los métodos y componentes de la clase.


1.2 Estructura de mi aplicación

A continuación, es importante definir la estructura de la aplicación, es decir, los bloques y componentes necesarios para cumplir con todos los requisitos de la interfaz. Este paso se puede comparar con construir el armazón o esqueleto principal que organizará la interfaz. Dentro de esta estructura, posteriormente se integrarán los componentes que conformarán la aplicación.

Para ello, vamos a hacer uso de el método rowLabels. Dicho método acepta como único parámetro un string con los nombres de los bloques principales de nuestra aplicación, separados por coma. En el código de ejemplo proporcionado, busca la línea que te muestro a continuación para tener un ejemplo

$cfa->rowLabels('row_title,row_progress');


El ejemplo anterior creará en nuestra interfaz 2 contenedores con id "row_title" y "row_progress", que utilizaremos para estructurar nuestros componente. En dichos contenedores podemos anidar uno o varios componentes, creando a su vez estructuras anidadadas.

 

1.3 Utilización de componentes

Método para crear los contenedores que albergarán los componentes de CFA (Un contenedor puede anidar múltiples componentes)

$cfa->rowLabels('row_title,row_progress');


Nos devolverá la respuesta de CFA

$this->addReturnData($cfa->getData());


Utilizar ejemplo replit

Disponemo del API https://backend-core-php8.replit.app/examples/cfas cuyo código lo podéis encontrar en https://replit.com/@cloudframework/backend-core-php8#api/examples/cfas.php . Este API dispone de un END-POINT

[GET] https://backend-core-php8.replit.app/examples/cfas/Default//cfa

{
    "success": true,
    "status": 200,
    "code": "ok",
    "time_zone": "UTC",
    "user": "Default",
    "company": "cfa",
    "data": {
        "end-point default [current]": "use \/examples\/:platform\/:iduser\/default",
        "end-point cfa": "use \/examples\/:platform\/:iduser\/default",
        "Current parameters": [
            "cfas",
            "Default",
            "cfa"
        ],
        "Current formParameters": []
    },
    "logs": "only restful.logs.allowed_ips. Current ip: 34.96.41.116, 34.117.33.233, 35.191.9.220,34.170.138.6"
}

Para probar el _CFA ya sólo tenemos que ir a la URL

/app.html#/ajax/cfa.html?api=https://backend-core-php8.replit.app/examples/cfas

El resultado mostará:

Cesta de compras