Skip to content
Alebat

Módulo 4

Avanzado.

4.1. Creación de un plugin.

Vamos a explicar los pasos que hay que seguir para crear un plugin propio en Strapi.

  1. Para crear un plugin, se tiene que ejecutar el siguiente comando:

    Terminal window
     npm run strapi generate

  2. El comando anterior despliega una lista de opciones que puede generar Strapi:

    • Api
    • Controller
    • Plugin
    • Content-type
    • Policy
    • Middleware
    • Migration En este caso debemos de escoger la opción de Plugin. Usando las flechas para seleccionar dicha opción y con enter para ejecutarla.

  3. Lo siguiente que se pide por consola es el nombre del plugin.

  4. Después nos aparece una lista con el lenguaje que queremos usar, Javascript o Typescript. Una vez llegado aquí Strapi genera los ficheros necesarios del plugin que queremos crear.

  5. Una vez creados los ficheros, en la consola te explica que faltaría activar el Plugin. Para ello se tendia que añadir el siguiente código al fichero ./config/applyPlugins.js:

    module.exports = {
      // ....
      "my-plugin": {
        enabled: true,
        resolve: "./src/plugins/my-plugin", // la ruta de la carpeta del plugin
      },
      // ....
    };

  6. Para que el plugin quede bien instalado habría que ejecutar los siguientes comandos y por último el comando para levantar Strapi:

    Terminal window
        npm run install

    .

    Terminal window
        npm run build

    .

    Terminal window
        npm run develop

Strapi tiene algunas APIS programadas para que se puedan conectar los Plugin, para que puedan tener esas funciones sin necesidad de desarrollarlas. Los plugins pueden registrarse con el servidor y/o el panel de administración, buscando puntos de entrada a los archivos del paquete de root. - strapi-server.js: para el servidor. - strapi-admin.js: para el panel administrativo.

Los plugins también pueden ser usados para añadir campos personalizados al Strapi.

4.2. APIS de las colecciones (GET, POST…).

Las APIS las podemos encontrar en Settings > User & Permissions Plugin > Roles > Public. Strapi tiene diferentes API para cada colección, single-types y plugins. En caso de las colecciones tienen create, delete, find, findOne, update. Los single-types a diferencia de las colecciones solo tienen tres APIS, delete, update y find. Los plugins tienen sus propias APIS, por ejemplo Users-permissions tiene diferentes para la autenticación de usuarios, para obtener los PermissionStatus, para los roles y para los usuarios del panel de administración.

Las mínimas que deben estar activadas de las colecciones tiene que ser find y findOne, la parte front debe tener acceso a estos datos para poder poner los datos en la web. Desde la API no se debe de dejar crear, ni eliminar, ni actualizar un registro. Por otro lado los single-types solo tienen que tener activado la opción find, por la misma razon anterior las opciones de update y delete tienen que estar desactivas. El plugin de Users-permissions tiene que tener activadas todas las APIS de autenticación, por otro lado el resto de APIS tiene que estar desactivadas, debido a que no se quiere que fuera de Strapi se tenga acceso desde fuera a cualquiera de ellas y menos que puedan modificar, crear o eliminar.

A continuación algunos ejemplos:

  1. urlDelStrapi/api/colección: esta API devuelve todos los registros de la colección, pero no con todos los campos que tiene la colección. Faltan los campos de imágenes, las relaciones, los componentes y las zonas dinamizadas.
  2. urlDelStrapi/api/colección?populate=*: esta llamada a la API devuelve la información hata primer grado de profundidad. A primer grado de profundidad, que significa, que muestra las imágenes de la colección, las relaciones, los componentes y zonas dinamizadas, pero las imágenes y las relaciones, de los componentes y zonas dinamizadas no se muestran.
  3. urlDelStrapi/api/colección/orderregistro: devuelve el registro de la coleccion que tenga ese numero de order, solo ese registro. A esta llamada podemos añadir ?populate=* y nos devuelve todo lo que tenga ese registro.
  4. urlDelStrapi/api/colección?populate[relacion][fields]: esta llamada devuelve todos los registros de la colección, pero solo expandiendo la relación indicada.
  5. urlDelStrapi/api/colección?sort[0]=nombreCampo:asc: nos devuelve los registros de la colección ordenados por el nombreCampo alfabéticamente y de forma ascendente. Además si añadimos &populate=* nos muestra todos los registros de forma extendida.
  6. urlDelStrapi/api/colección?filters[nombreCampo][$eq]=hello: esta llamada a la API devuelve el registro de la colección que su campo nombreCampo sea equivalente a hello. Además si añadimos &populate=* nos muestra el registro de forma extendida.

4.3. Creación y configuración de una API.

Strapi permite a los desarrolladores crear endpoints de API personalizados, lo que significa que puedes definir exactamente cómo se accede y se manejan los datos en tu aplicación. Esto es útil cuando necesitas funcionalidades específicas que no están cubiertas por los endpoints generados automáticamente por Strapi. Crear una API propia te permite integrar Strapi con otras tecnologías de manera más efectiva, adaptando la API a las necesidades específicas de tu proyecto. : Al definir tus propios endpoints de API, tienes un mayor control sobre la seguridad de tu aplicación.

En resumen, crear una API propia en Strapi te ofrece la flexibilidad para personalizar completamente cómo se accede y se manejan los datos en tu aplicación, lo que te permite adaptar la API a las necesidades específicas de tu proyecto, mejorar la experiencia del usuario, y asegurar la seguridad y la escalabilidad de tu aplicación.

Documentación de Strapi.

Los siguientes pasos que vamos a explicar es la creación de una API propia.

  1. Para crear una API, se tiene que ejecutar el siguiente comando:

    Terminal window
     npm run strapi generate

  2. El comando anterior despliega una lista de opciones que puede generar Strapi. En este caso la primera opción es la que tenmos que escoger, al ser API.

  3. La consola pide el nombre que queremos que tenga la API.

  4. La consola pregunta si la API que queremos crear es para un Plugin. Genera los ficheros que son necesarios para la funcionalidad de la API.

  5. En el fichero /src/api/npmbre-de-la-api/routes/nombre-de-la-api.js se definen las rutas de la API, además del método que va a ser la API.

  6. Strapi se debe de reiniciar.

  7. Tendríamos que activar en roles la API Settings > Roles > Authenticated > Nombre de la API > API.

  1. Para crear una API, se tiene que ejecutar el siguiente comando:

    Terminal window
        npm run strapi generate

  2. El comando anterior despliega una lista de opciones que puede generar Strapi. En este caso la primera opción es la que tenmos que escoger, al ser API.

  3. La consola pide el nombre que queremos que tenga la API.

  4. La consola pregunta si la API que queremos crear es para un Plugin. Genera los ficheros que son necesarios para la funcionalidad de la API.

Existen dos maneras de crear una API, para una estructura ya existente o crear una nueva de cero.

  1. Crear un fichero de routes nuevo ‘newRoutes.ts’. Añadir la ruta de la api que se quiere añadir. 
      export default  {
        routes: [
          {
            method: 'GET',
            path: '/customRoute',
            handler: 'controllerName.functionName',
            config: {
              auth: false,
            },
          },
        ],
      };
  2. En el fichero del controlador añadimos lo siguiente para añadir la API y que NO se quiten 
        import { factories } from '@strapi/strapi';
    

        export default factories.createCoreController('api::structure.structure', ({ strapi }) =>  ({
          async functionName(ctx) {
            const{ parameter1, parameter2 } = ctx.request.body;
            if (!parameter1 || !parameter2) {
              ctx.throw(404, "Missing required parameters");
            }
            // code
          }
        }));
    Si no se añade ({ strapi }) las APIs por defecto de Strapi no se incluyen en la estructura y serán sustituidas por las que se vayan creando

4.4. Lifecycle de una colección.

Un lifecycle son funciones que se activan cuando se llaman a las consultas de Strapi. Se utiliza en Strapi para realizar acciones automatizadas al administrar contenido a través del panel de administración o mediante la API de Strapi.

Los lifecycle pueden usarse para llevar a cabo acciones en un punto específico en el ciclo de vida del modelo. Los webhooks se pueden configurar para que se ejecuten antes, before, o después, after, de que se produzca un evento. Los eventos pueden ser cuando se createApp, se actualiza, se elimina, se publica. - beforeCreate - afterCreate - beforeUpdate - afterUpdate - beforeDelete - afterDelete - beforePublish - afeterPublish - beforeUnpublish - afterUnpublish El fichero de lifecycle.js se tiene que crear en src/nombre-de-la-coleccion/content-types. Lo siguiente es un ejemplo:

module.exports = {
  async afterCreate(event) {
    //Your code
  },
};

4.5. Uso de servicios de una colección.

Los servicios son un conjunto de funciones reutilizables. Son especialmente útiles para respetar el concepto de programación “no repetirse” (DRY) y simplificar la lógica de los controladores .

Los servicios se pueden generar o agregar manualmente . Strapi ofrece una createCoreServicefunción de fábrica que genera automáticamente servicios básicos y permite crear servicios personalizados o ampliar o reemplazar los servicios generados .

4.6. Funciones necesarias.

A continuación, vamos a recopilar algunas funciones que serán necesarias para el desarrollo de los lifecycles, plugins o APIS, de Strapi.

  • findMany: La siguiente función encuentra los registros de la colección article que coincidan con los parámetros y los guarda en la constante entries. Los parámetros se pueden poner o quitar según la búsqueda que queramos hacer.
const entries = await strapi.entityService.findMany("api::article.article", {
  fields: ["title", "description"],
  filters: { title: "Hello World" },
  sort: { createdAt: "DESC" },
  populate: ["ComponenteA", "ComponenteB"],
});

Solo sacará los campos title y description, si no se pone nada devolverá todos los campos. El campo populate con los nombres de los componentes devuelve dichos componentes que tengan los registros de la colección.

  • findOne: La siguiente función encuentra el registro de la colección article que coincidan con los parámetros y los guarda en la constante entries. Los parámetros se pueden poner o quitar según la búsqueda que queramos hacer.
const products = await strapi.entityService.findMany("api::product.product", {
  filters: {
    $and: [{ campo1: "prueba" }],
  },
});

Devolverá los campos del registro que coincida con que tenga el campo1 sea igual prueba. El campo populate con los nombres de los componentes devuelve dichos componentes que tengan los registros de la colección.

  • create: La función crea un nuevo registro en la colección article. Los campos necesarios para crear el registro se tienen que poner en data. Hay que tener en cuenta los tipos de campos que formato tienen, si son numéricos, si son de tipo fecha…
const entry = await strapi.entityService.create("api::article.article", {
  data: {
    title: "My Article",
  },
});

Para crear un registro desde una función con relación y componentes, los componentes pasan como si fueran arrays, con todos los campos que se necesitan rellenar. Las relaciones se pasa el numero de id del registro o registros que se quieren relacionar.

const newOrder = await strapi.entityService.create("api::order.order", {
  data: {
    title: "My Article",
    ComponenteA: [
      {
        author: "Anónimo",
        date_publish: new Date("2024-02-20").toISOString(),
        //   YYYY-MM-DDTHH:mm:ss.sssZ
        number_words: 263,
      },
    ],
    RelacionA: [8, 6],
  },
});
  • update: Esta función actualizará el registro de la colección article que le indiquemos y los campos que pasemos en la función. Se tiene que pasar que registro se quiere editar. En este caso se editará el registro con id 1 y se cambiará el campo title.
const entry = await strapi.entityService.update("api::article.article", 1, {
  data: {
    title: "xxx",
  },
});

Otra forma de actualizar un registro es

await strapi.db
  .connection("promotional_codes")
  .where({ id: 4 })
  .update({ title: "Hola" });
  • delete: Esta función elimina el registro que tenga el id que se pasa como parámetro.
const entry = await strapi.entityService.delete("api::article.article", 1);

4.7. Actualizar la versión de Strapi.

Strapi recibe muy a menudo una actualización. Esto se avisa en el Panel de administración en Settings aparece en Details muestra la versión de Strapi del panel. Si existe una nueva versión de Strapi aparece justo debajo un enlace Upgrade your admin panel, te lleva al repositorio de github de la versión más actualizada de Strapi, con todos los cambios que se han realizado.

Para actualizar la, hay que copiar la versión ir al fichero package.json en la linea @strapi/strapi poner la nueva versión.

    "@strapi/strapi": "vX.X.X",

Habría que ejecutar el siguiente comando para instalar todas las dependencias

Terminal window
    npm install
        #O también
    npm i

Una vez instaladas las dependencias también ejecutaremos

Terminal window
    npm run build

El Strapi ya estaría listo para volver a ponerse en funcionamiento.