Áú»¢¶Ä²©

Crear un m¨®dulo (tutorial)

Este es un tutorial que muestra el paso a paso para crear un m¨®dulo frontend b¨¢sico de Áú»¢¶Ä²©. Puede descargar todos los archivos de este m¨®dulo en un archivo ZIP:MiDireccionIP.zip.

Que debe construir usted

Durante este tutorial, usted primero debe construir un m¨®dulo frontend que adicione una nueva secci¨®n en el men¨² My Address y luego convertirla en un m¨¢s avanzado m¨®dulo frontend que haga una petici¨®n HTTP a https://api.seeip.org y mostrar la respuesta - la direcci¨®n IP de su computador - en una nueva p¨¢gina in la reci¨¦n creada secci¨®n del men¨² My Address. A continuaci¨®n, se observa como se ver¨ªa el m¨®dulo creado:

Parte I - Nueva secci¨®n de men¨²

Agregar un m¨®dulo en blanco al frontend de Áú»¢¶Ä²©
  1. Cree el directorio ²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô en el directorio ³¾¨®»å³Ü±ô´Ç²õ de su instalaci¨®n del frontend de Áú»¢¶Ä²© (por ejemplo, zabbix/ui/modules).

  2. Cree el archivo manifest.json con los metadatos b¨¢sicos del m¨®dulo (consulte la descripci¨®n de los ±è²¹°ù¨¢³¾±ð³Ù°ù´Ç²õ compatibles).

ui/modules/²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô/manifest.json

{
       "manifest_version": 2.0,
       "id": &±ç³Ü´Ç³Ù;³¾¾±-»å¾±°ù±ð³¦³¦¾±¨®²Ô&±ç³Ü´Ç³Ù;,
       "name": "Mi direcci¨®n IP",
       "version": "1.0",
       "namespace": "²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô",
       "description": "Mi direcci¨®n IP externa".
       }
  1. En el frontend de Áú»¢¶Ä²©, vaya a la secci¨®n Administraci¨®n ¡ú General ¡ú ²Ñ¨®»å³Ü±ô´Çs y haga clic en el bot¨®n Escanear directorio.

  1. Localice el nuevo m¨®dulo Mi direcci¨®n IP en la lista y haga clic en el enlace "Deshabilitado" para cambiar su estado de "Deshabilitado" a "Habilitado" (si el m¨®dulo no aparece en la lista, consulte la secci¨®n soluci¨®n de problemas).

El m¨®dulo ya est¨¢ registrado en el frontend. Sin embargo, a¨²n no es visible, ya que a¨²n debe definir su funcionalidad. Una vez que agregue contenido al directorio del m¨®dulo, ver¨¢ los cambios inmediatamente en el frontend de Áú»¢¶Ä²© al actualizar la p¨¢gina.

Crear una secci¨®n de men¨²
  1. Cree un archivo Module.php en el directorio MyAddress.

Este archivo implementa una nueva clase Module que extiende la clase CModule predeterminada. La clase ²Ñ¨®»å³Ü±ô´Ç insertar¨¢ una nueva secci¨®n de men¨² Mi direcci¨®n en el men¨² principal.

El m¨¦todo setAction() especifica una acci¨®n que se ejecutar¨¢ al hacer clic en la secci¨®n del men¨². Para empezar, puede utilizar la acci¨®n predefinida userprofile.edit, que abrir¨¢ la p¨¢gina Perfil de usuario. En la parte III de este tutorial, aprender¨¢ c¨®mo crear una acci¨®n personalizada.

ui/modules/MyAddress/Module.php

<?php
       
       namespace Modules\MyAddress;
       
       use Áú»¢¶Ä²©\Core\CModule,
       APP,
       CMenuItem;
       
       m¨®dulo de clase extiende CModule {
       
       class Module extends CModule {
       
       public function init(): void {
       APP::Component()->get('menu.main')
       ->add((new CMenuItem(_('My Address')))
       ->setAction('userprofile.edit'));
       }
       }

Puede reemplazar 'userprofile.edit' con otras acciones, por ejemplo, 'charts.view' (abre gr¨¢ficos personalizados), 'problems.view' (abre Monitoreo ¡ú Problemas), o 'report.status' (abre el informe Informaci¨®n del sistema).

  1. Actualice la interfaz de Áú»¢¶Ä²©. Ahora hay una nueva secci¨®n Mi direcci¨®n en la parte inferior del men¨² principal de Áú»¢¶Ä²©. Haga clic en Mi direcci¨®n para abrir la p¨¢gina Perfil de usuario.

Parte II - Cambio de ubicaci¨®n de la secci¨®n del men¨²

En esta parte, mover¨¢ la secci¨®n del men¨² Mi direcci¨®n a la secci¨®n Monitoreo y luego le agregar¨¢ un men¨² anidado.. Como resultado, los usuarios podr¨¢n acceder a dos p¨¢ginas de submen¨² desde la secci¨®n del men¨² Monitoreo ¡ú Mi direcci¨®n.

  1. Abra y edite el archivo Module.php.

ui/modules/MyAddress/Module.php

<?php
       
       namespace Modules\MyAddress;
       
       use Áú»¢¶Ä²©\Core\CModule,
           APP,
           CMenuItem;
       
       class Module extends CModule {
       
           public function init(): void {
           APP::Component()->get('menu.main')
           ->findOrAdd(_('Monitoring'))
           ->getSubmenu()
           ->insertAfter(_('Discovery'),
           (new CMenuItem(_('Mi direcci¨®n')))->setAction('userprofile.edit')
           );
           }
       }
  1. Actualice la interfaz de Áú»¢¶Ä²©. Expanda la secci¨®n del men¨² Monitoreo y observe que la secci¨®n Mi direcci¨®n ahora se encuentra debajo de la secci¨®n Descubrimiento.

Parte III - ´¡³¦³¦¾±¨®²Ô del m¨®dulo

Una acci¨®n se implementa en dos archivos: actions/MyAddress.php y views/my.address.php. El archivo actions/MyAddress.php se encarga de la implementaci¨®n de la l¨®gica de negocio, mientras que el archivo views/my.address.php es responsable de la vista.

  1. Cree un directorio actions en el directorio MyAddress.

  2. Cree un archivo MyAddress.php en el directorio actions.

La l¨®gica de negocio se definir¨¢ en la clase MyAddress. Esta clase "action" implementar¨¢ cuatro funciones: init(), checkInput(), checkPermissions() y doAction(). La interfaz de Áú»¢¶Ä²© llama a la funci¨®n doAction() cuando se solicita la acci¨®n. Esta funci¨®n es responsable de la l¨®gica de negocio del m¨®dulo.

Los datos deben organizarse como una matriz asociativa. La matriz puede ser multidimensional y contener cualquier dato esperado por la vista.

ui/modules/MyAddress/actions/MyAddress.php

<?php
       
       namespace Modules\MyAddress\Actions;
       
       use CController,
           CControllerResponseData;
       
       class MyAddress extends CController {
       
           public function init(): void {
           $this->disableCsrfValidation();
           }
       
           protected function checkInput(): bool {
           return true;
           }
       
           protected function checkPermissions(): bool {
           return true;
           }
       
           protected function doAction(): void {
           $data = ['my-ip' => file_get_contents("https://api.seeip.org")];
           $response = new CControllerResponseData($data);
           $this->setResponse($response);
           }
       }
  1. Cree un nuevo directorio views en el directorio MyAddress.

  2. Cree un archivo my.address.php en el directorio views y defina la vista del m¨®dulo.

Tenga en cuenta que la variable $data est¨¢ disponible en la vista sin definirla espec¨ªficamente. El framework pasa autom¨¢ticamente la matriz asociativa a la vista.

ui/modules/MyAddress/views/my.address.php

<?php
       
       (new CHtmlPage())
           ->setTitle(_('The HTML Title of My Address Page'))
           ->addItem(new CDiv($data['my-ip']))
           ->show();
  1. La acci¨®n del m¨®dulo debe registrarse en el archivo manifest.json. Abra manifest.json y agregue un nuevo objeto actions que contenga:
  • la tecla de acci¨®n con el nombre de la acci¨®n escrito en min¨²sculas (a-z) y con palabras separadas por puntos (por ejemplo, my.address);
  • el nombre de la clase de acci¨®n (MyAddress) como valor para la clave class del objeto my.address;
  • el nombre de la vista de acci¨®n (my.address) como valor para la clave view del objeto my.address.

ui/modules/²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô/manifest.json

{
           "manifest_version": 2.0,
           "id": "my-address",
           "name": "My IP Address",
           "version": "1.0",
           "namespace": "MyAddress",
           "description": "My External IP Address",
           "actions": {
           "my.address": {
           "class": "MyAddress",
           "view": "my.address"
           }
           }
       }
  1. Actualice la interfaz de Áú»¢¶Ä²©. Haga clic en la secci¨®n del men¨² Mi direcci¨®n ¡ú IP externa para ver la direcci¨®n IP de su computadora.