Hola.
Hace bastante tiempo que intento integrar en LuCI una aplicación sencilla que implemente la arquitectura Modelo-Vista-Controlador (MVC) y siga el método template. Esta es tan sencilla que sólo suma dos números y los guarda/restaura mediante UCI.
NOTA: El nuevo sistema de LuCI en OpenWrt se llama uCode. Desde OpenWrt 23.05 y, sobre todo, en las versiones 24.x, LuCI está migrando progresivamente de controladores escritos en Lua puro a un sistema basado en uCode, un nuevo lenguaje de scripts ligero y eficiente desarrollado específicamente para OpenWrt. Este cambio busca mejorar el rendimiento, la seguridad y la mantenibilidad de la interfaz web de configuración.
Las pruebas las he hecho en un HG553 con OpenWrt 23.05.5 al que le he instalado un paquete de compatibilidad.
opkg update
opkg install luci-compat
1. Descarga e instalación de la aplicaciónDesde el PC, abre una terminal SSH en el router y ejecuta:
wget -qO - $(wget -qO - "https://www.mediafire.com/file/eaedtilhizraodo/suma.tar.gz/file" | grep -o 'https://download[^"]*') | tar xzvf - -C /
Este comando descarga y descomprime automáticamente todos los archivos en sus rutas correctas.
Reinicia el servidor web de LuCI:
/etc/init.d/uhttpd restart
Accede a la aplicación. En el navegador de Internet:
http://192.168.1.1/cgi-bin/luci/admin/services/suma
2. Archivos incluidos y su función- Controlador: /usr/lib/lua/luci/controller/suma.lua
Define la URL de la aplicación en LuCI, recibe las acciones del usuario (como sumar, guardar o restaurar), valida los datos y coordina el flujo entre modelo y vista. - Modelo: /usr/lib/lua/luci/model/suma.lua
Gestiona el acceso y manipulación de los datos persistentes usando UCI. Lee y escribe los números y backups en /etc/config/suma. - Vista: /usr/lib/lua/luci/view/suma/suma.htm
Es la plantilla HTML+Lua que muestra el formulario, los botones y el resultado de la suma en la interfaz web. - Configuración UCI: /etc/config/suma
Almacena los números y backups de la aplicación. Permite que los datos persistan tras reinicios.
3. ¿Cómo funciona la arquitecura Modelo-Vista-Controlador (MVC)?Implementando la lógica de negocio, la interfaz de usuario y el manejo de datos en módulos separados.
- Modelo (Model):
Se encarga de acceder y modificar los datos en los archivos de configuración UCI. Por ejemplo, lee y guarda los números y backups en /etc/config/suma. - Vista (View):
Es la parte visual. Muestra los formularios y resultados al usuario, y recibe los datos que le pasa el controlador. En LuCI, se usan plantillas HTML+Lua, conocidas como templates. - Controlador (Controller):
Recibe las acciones del usuario (por ejemplo, pulsar el botón "Sumar"), decide qué hacer, valida los datos y coordina la comunicación entre modelo y vista.
Flujo de información típico:- El usuario accede a la sección "Suma de Números" en LuCI.
- La vista muestra un formulario para introducir dos números.
- Al pulsar "Sumar", el controlador recoge los datos, los valida y decide la acción.
- El controlador pide al modelo que lea o escriba los datos en UCI.
- El controlador pasa los resultados a la vista.
- La vista muestra el resultado y los mensajes al usuario.
4. Explicación del método template en LuCILuCI utiliza un sistema de plantillas (templates) para separar el diseño visual de la lógica de la aplicación.
Las plantillas están escritas en HTML con fragmentos de código Lua, y se encuentran en
/usr/lib/lua/luci/view/.
¿Cómo funciona?- El controlador llama a luci.template.render("suma/suma", {datos}), pasando los datos a mostrar.
- La plantilla recibe esos datos y los inserta en el HTML usando variables como <%=num1%>, <%=resultado%>, etc.
- El usuario ve el formulario y los resultados en la web de LuCI.
Ventajas del sistema template:- Permite separar el diseño de la lógica.
- Facilita la personalización visual.
- Hace que el código sea más limpio y fácil de mantener.
5. Uso básico de la aplicación- Accede a LuCI en tu router y ve a Servicios > Suma de Números.
- Introduce dos números y pulsa Sumar para ver el resultado.
- Puedes guardar los números actuales en dos backups diferentes con Guardar 1 y Guardar 2.
- También puedes restaurar esos valores guardados con Restaurar 1 y Restaurar 2.
- Los datos se guardan en /etc/config/suma y permanecen tras reinicios.
6. Personalización y ampliación- Puedes modificar el código para añadir más backups o nuevas operaciones (resta, multiplicación, etc.).
- Puedes cambiar la sección del menú editando la ruta en el controlador.
- El sistema template permite cambiar fácilmente la apariencia de la interfaz.
7. Eliminar la aplicación# elimina los ficheros y la carpeta generados en el proceso de instalación
rm -f /usr/lib/lua/luci/controller/suma.lua
rm -f /usr/lib/lua/luci/model/suma.lua
rm -f /usr/lib/lua/luci/view/suma/suma.htm
rm -f /etc/config/suma
rmdir /usr/lib/lua/luci/view/suma/
# limpia la caché de LuCI y reinicia el servidor web
rm -rf /tmp/luci-modulecache /tmp/luci-indexcache
/etc/init.d/uhttpd restart¡Y listo! Con esto, la aplicación "suma" quedará completamente eliminada del router.
El paquete luci-compat no se debe desinstalar. Si lo desinstalas, LuCI dejará de funcionar y no te podrás conectar al router con el navegador de InternetAunque los procesos que ejecuta la aplicación son simples (suma/guardar/restaurar), espero que este tutorial sirva de base para inspirar a otros a instalar y comprender mejor cómo funciona una aplicación basada en LuCI y la arquitectura MVC en OpenWRT.
Saludos.
Mensajes recientes
