Cómo crear y desarrollar una aplicación en IPS Community Suite

Tiempo de lectura: 6 minutos

Siempre he estado muy ligado a la plataforma IPS Community Services desde que decidí dar el salto de phpBB3 a IPB (Invision Power Board) con el proyecto/comunidad FMSite.net en 2007. Desde entonces, ya que el software que proveían lo permitía, he desarrollado diferentes aplicaciones para amoldar y extender las funcionalidades de mi comunidad.

Durante los últimos años, en IPS han estado trabajando en la versión 4.0 de su software, que implicaba una reescritura desde cero del código y, por tanto, de la API y forma de creación de aplicaciones para la comunidad. Lo que implica que tendría que rehacer todo el código de las aplicaciones que desarrollé para mi proyecto.

Hace unas semanas me puse manos a la obra y he de decir que la creación de aplicaciones de terceros en la versión 4.0 de IPS ha mejorado sobremanera con respecto a la versión 3.4. El proceso se ha simplificado muchísimo y, aunque aún la documentación respecto a la plataforma escasea, he sido capaz de reprogramar las aplicaciones sin documentación.

Como no es fácil iniciarse, en esta entrada pretendo explicar una guía en castellano para crear una aplicación desde cero en la suite IPS.

Preparación del entorno

Una vez actualizada o instalada nuestra comunidad a la versión 4.0, si queremos desarrollar aplicaciones o plugins para la comunidad IPS Community Suite, es imprescindible activar el modo desarrollo (Developer Mode en inglés).  Para activarlo:

Descargar el paquete Developer Tools, imprescindible.

Extraer el contenido del paquete en la raíz donde hayáis instalado la IPS Community Suite. Encontrarás un directorio «dev» en la raíz y otros directorios «dev» por cada aplicación. Es importante que si alguna de las aplicaciones de la lista no la tienes instalada, elimines sus directorios. Sino podrías tener problemas.

Crea el directorio constants.php en la raiz de la instalación y ponle el siguiente contenido:

 

Creación de la aplicación

Una vez completado el paso anterior, accedemos al panel de control de la comunidad desde el navegador e ir a System -> Applications. Donde encontraremos un botón «+ Create New» que pulsaremos.

Nos llevará a un formulario. Lo rellenaremos con los datos de nuestra aplicación. Lo único donde debemos tener cuidado es en el campo Application Directory, que como su propio nombre indica, es el nombre del directorio que creará. Aconsejo utilizar minúsculas.

Creando aplicación IPS Community Suite

Creando aplicación IPS Community Suite

Una vez creada la aplicación, tendremos que acceder al Developer center, tal y como se ve en la siguiente imagen.

Botón Developer Center

Botón Developer Center

Desarrollo de la aplicación

En la siguiente ventana se nos cargará el perfil de la aplicación y veremos una colección de pestañas. En esta entrada/guía sólo se va a hacer una iniciación y se creará una aplicación de una única página. A partir de aquí, dejo en vuestras manos el salseo.

Vamos a trabajar con las siguientes pestañas:

  • Extensions aquí crearemos extensiones para que la aplicación se muestre en el menú, para crear un Editor enriquecido o un campo de «upload».
  • Modules – Front será donde crearemos las páginas que tenga la aplicación y sus correspondientes controladores.

Creación de la página

Creamos un módulo y un controlador. Sólo nos pedirán que introduzcamos un nombre. En mi caso, creo un módulo de nombre «main», y un controlador de nombre «view». Como además, quiero que se carguen por defecto en la aplicación, puso sobre la estrella tanto del módulo como del controlador. Esto hará que al entrar en la aplicación, cargue directamente el contenido del controlador.

El resultado es el que sigue.

Resultado de la creación del módulo y controlador

Resultado de la creación del módulo y controlador

 

Creación del menú

Si queremos añadir la aplicación al menú de nuestra comunidad, iremos a la pestaña Extensions, desplegaremos la opción «core», y clicaremos en el botón «+» de FrontNavigation.

A continuación se nos pedirá un Classname. Yo lo que suelo hacer es directamente asignarle el nombre «FrontNavigation». Veremos que el resultado es que la extensión FrontNavigation aparecerá sombreada.

Yendo al índice de la comunidad, veremos que nuestra aplicación ya aparece en el menú. Clicando en ella, veremos que carga una aplicación vacía.

Código de nuestra aplicación

Con todo lo hecho anteriormente, IPS Community Suite habrá creado una estructura de carpetas y ficheros en la plataforma.

Accedemos al directorio donde hemos instalado la comunidad y localizamos la carpeta applications. Ahí encontraremos un directorio nuevo con el nombre del «Application Directory» que especificamos durante la creación de la aplicación.

Si abrís dicho directorio, encontraréis la siguiente estructura. Seguro que os suena.

Estructura de ficheros de la aplicación

Estructura de ficheros de la aplicación

Ese, el fichero view.php es el controlador que hemos creado y el que hemos configurado para que cargue por defecto al entrar en nuestra aplicación. Ahí es donde tendremos que programar nuestro código.

A continuación voy a mostrar unos pequeños apuntes que os ayudarán con el código de la aplicación. El código que se muestra a continuación deberá de ir dentro del método manage() del controlador que deseemos programar.

Asignar un título

Es la cadena de texto que se cargará dentro de la etiqueta title de head.

Cargar contenido en la aplicación

Lo que yo suelo hacer para cargar contenido es almacenar todo el HTML en una variable $this->output, que en realidad, puede tener el nombre que vosotros deseéis.

Después, se lo asociaremos a la variable output de la plataforma de la siguiente forma.

Si deseamos cargar información en el sidebar de forma automática, asignaremos el contenido que queramos al sidebar de la siguiente forma.

Si dejamos vacío el sidebar, por defecto, no se mostrará.

Cargar ficheros JS y CSS

Para que IPS Community Suite añada un fichero javascript o de estilos, tendremos que utilizar las siguientes líneas:

Como se observa en el código superior, suelo colocar los ficheros de librerías javascript y css en el directorio interface de la aplicación.

Montar un breadcrumb

Por cada miga de pan que queramos añadir al breadcrumb, tendremos asignarla a un array breadcrumb. La forma de hacerlo es la que sigue:

Como veis, utilizamos el método internal de la clase Url del paquete Http. Este método sirve para cargar enlaces amigables, pero si no lo localiza, utilizará la forma degradada (es decir, el query_string que definimos en el primer parámetro). Los Friendly URLs son otro mundo y se explican más adelante.

Friendly URLs

Para generar y configurar los Friendly URLs tendremos que crear un fichero de nombre furl.json y guardarlo en el directorio «data» que se encuentra dentro de la carpeta de la aplicación.

Su contenido debería de ser el que sigue:

El campo «logros» dentro de «pages» corresponde con el especificado en el campo «topLevel». Esto quiere decir que será el elegido por defecto. Tiene la variable «friendly» vacía porque queremos que el Friendly URL de la aplicación, simplemente sea «logros».

Además, os he dejado el contenido «player» a modo de ejemplo para que veáis como montar un Friendly URL un poco más complejo. En los comentarios del fichero furl.json que encontraréis en las demás aplicaciones instaladas por defecto, veréis una explicación de cómo utilizar este fichero.

  • El prefijo # (#id en el ejemplo) se utiliza para campos GET numéricos.
  • El prefijo @ (@nombre en el ejemplo) se utiliza para campos GET alfanuméricos.

Para capturar los campos GET en nuestra aplicación, tendremos que hacerlo de la siguiente forma:

Resultado ejemplo

Este es el resultado con el ejemplo que hemos preparado en esta guía.

Resultado del código aplicado en los pasos anteriores

Resultado del código aplicado en los pasos anteriores

Conclusiones

Esta es la forma de iniciarse en la creación de aplicaciones para la plataforma IPS Community Suite de forma rápida. Si desarrollaste aplicaciones para la versión 3.4.x, notarás que ahora es mucho más fácil y casi todo se hace a golpe de clic.

Espero que esto os sirva a modo de introducción y que a partir del código de ejemplo podáis hacer pinitos con vuestras aplicaciones.

No quiero terminar la entrada sin antes recordar que si queréis crear formularios tendréis que utilizar la clase Form y que para crear campos de Texto Enriquecido o campos para subir ficheros, tendréis que crear en Extensiones la extensión EditorLocations y FileStorage respectivamente. Sólo con crearlos será suficiente, no tendréis que tocar código en los ficheros que generen.

Podréis encontrar aquí documentación de cómo manejar formularios para crear Editores enriquecidos, para subir ficheros y, posteriormente, recuperar sus datos.

Por último, esta es la colección de documentación oficial en inglés publicada por IPS Community Suite.

Publicado en Desarrollo.

7 Comentarios

  1. Me sirvió demasiado tu tutorial, muchísimas gracias!
    Tengo una simple duda, veo que en tu captura aparece Home > module__logros_main, cómo hago para cambiar ese texto? He probado con el traductor que trae IPS pero no me funciona :S

    ¡De nuevo, muchas gracias!

    • Hola Giovi, me alegra que te haya servido de ayuda. Hay poca documentación al respecto y mucho de lo que he logrado ha sido a base de prueba y error.
      Para dichos textos, dentro del directorio de tu aplicación, en la carpeta «data» has de modificar el fichero lang.xml. En este caso, debería quedarte algo así:
      (ojo, he puesto un espacio detrás de todos los «<" porque sino me interpretaba el código) < ?xml version="1.0" encoding="UTF-8"?>
      < language>
      < app key="logros" version="10000">
      < word key="__app_logros" js="0">Logros
      < word key="module__logros_main" js="0">Logros
      < /app>
      < /language>

      ¡Espero haberte ayudado!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*