Introducción a Symfony2 (III)

Esta es la tercer y última parte del tutorial de Introducción a Symfony2, donde terminaremos de crear la aplicación de gestión de alimentos.

Si no viste las otras partes del tutorial, aquí te dejo los enlaces:
Introducción a Symfony2
Introducción a Symfony2 (II)

Continuemos entonces con esta última parte del tutorial. Siguiendo estos tres pasos: enrutar, crear código de la acción (controlador) y crear la plantilla, podemos completar lo que nos falta de la aplicación. No obstante, en las acciones que faltan, se necesita acceder a la base de datos para recuperar, modificar y crear alimentos.

La distribución standard de Symfony2 proporciona un potente servicio para el acceso a los datos persistentes, es decir, los que se almacenan en algún tipo de base de datos. Pero no obliga a utilizarlo. No sólo eso, tampoco forma parte del núcleo de Symfony2, es decir, no es un componente. Por ello es una decisión del desarrollador utilizarlo o no. Es en ese sentido que Fabien Potencier, líder del proyecto Symfony2, proclama que este último no es un framework MVC, ya que no dice nada sobre cómo debes construir tu modelo.

Aunque lo recomendable es utilizar Doctrine2 (que es el servicio de persistencia que viene incorporado en la distribución standard), o Propel, en este tutorial no los vamos a utilizar por que ya llevamos muchos conceptos introducidos y no queremos sobrecargarlo. Además queremos ilustrar cómo podemos construir el modelo a nuestro antojo.

Así pues, antes de implentar el resto de las acciones que componen la aplicación, vamos a elaborar el modelo.

Crea un directorio denominado Model (el nombre puede ser cualquiera), y crea ahí un fichero Model.php con el siguiente código:

src/Jazzyweb/AulasMentor/AlimentosBundle/Model/Model.php

Código :

 <?php

    namespace Jazzyweb\AulasMentor\AlimentosBundle\Model;

    class Model
    {
   protected $conexion;

    public function __construct($dbname,$dbuser,$dbpass,$dbhost)
     {   
         $mvc_bd_conexion = mysql_connect($dbhost, $dbuser, $dbpass);

         if (!$mvc_bd_conexion) {
             die('No ha sido posible realizar la conexión con la base de datos: '
             . mysql_error());
         }
         mysql_select_db($dbname, $mvc_bd_conexion);

         mysql_set_charset('utf8');

         $this->conexion = $mvc_bd_conexion;
     }


   public function bd_conexion()
   {
       
   }

   public function dameAlimentos()
   {
       $sql = "select * from alimentos order by energia desc";

       $result = mysql_query($sql, $this->conexion);

       $alimentos = array();
       while ($row = mysql_fetch_assoc($result))
       {
      $alimentos[] = $row;
       }

       return $alimentos;
   }

   public function buscarAlimentosPorNombre($nombre)
   {
       $nombre = htmlspecialchars($nombre);

       $sql = "select * from alimentos where nombre like '" . $nombre . "' order
        by energia desc";

       $result = mysql_query($sql, $this->conexion);

       $alimentos = array();
       while ($row = mysql_fetch_assoc($result))
       {
      $alimentos[] = $row;
       }

       return $alimentos;
   }
   
   public function dameAlimento($id)
   {
       $id = htmlspecialchars($id);
       
       $sql = "select * from alimentos where id=".$id;
       
       $result = mysql_query($sql, $this->conexion);

       $alimentos = array();
       $row = mysql_fetch_assoc($result);
       
       return $row;
       
   }

        public function insertarAlimento($n, $e, $p, $hc, $f, $g)
   {
       $n = htmlspecialchars($n);
       $e = htmlspecialchars($e);
       $p = htmlspecialchars($p);
       $hc = htmlspecialchars($hc);
       $f = htmlspecialchars($f);
       $g = htmlspecialchars($g);

       $sql = "insert into alimentos (nombre, energia, proteina, hidratocarbono, 
       fibra, grasatotal) values ('" .
          $n . "'," . $e . "," . $p . "," . $hc . "," . $f . "," . $g . ")";

       $result = mysql_query($sql, $this->conexion);

       return $result;
   }

    }

El próximo paso es completar el código del controlador con el resto de las acciones que se han mapeado en las rutas definidas anteriormente. El código del controlador DefaultController quedaría así:

src/Jazzyweb/AulasMentor/AlimentosBundle/Controller/DefaultController.php

Código :

 <?php

    namespace Jazzyweb\AulasMentor\AlimentosBundle\Controller;

    use Symfony\Bundle\FrameworkBundle\Controller\Controller;
    use Jazzyweb\AulasMentor\AlimentosBundle\Model\Model;
    use Jazzyweb\AulasMentor\AlimentosBundle\Config\Config;

    class DefaultController extends Controller
    {

        public function indexAction()
        {
            $params = array(
            'mensaje' => 'Bienvenido al curso de Symfony2',
            'fecha' => date('d-m-yyy'),
            );
    
            return
             $this->render('JazzywebAulasMentorAlimentosBundle:Default:index.html.twig',
             $params);
        }
    
        public function listarAction()
        {
            $m = new Model(Config::$mvc_bd_nombre, Config::$mvc_bd_usuario,
                            Config::$mvc_bd_clave, Config::$mvc_bd_hostname);
    
            $params = array(
            'alimentos' => $m->dameAlimentos(),
            );
    
            return
             $this->render('JazzywebAulasMentorAlimentosBundle:Default:mostrarAlimentos.html.twig', 
             $params);
        
        }
    
        public function insertarAction()
        {
            $params = array(
            'nombre' => '',
            'energia' => '',
            'proteina' => '',
            'hc' => '',
            'fibra' => '',
            'grasa' => '',
            );
    
            $m = new Model(Config::$mvc_bd_nombre, Config::$mvc_bd_usuario,
             Config::$mvc_bd_clave, Config::$mvc_bd_hostname);
    
            if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    
            // comprobar campos formulario
            if ($m->insertarAlimento($_POST['nombre'], $_POST['energia'], 
             $_POST['proteina'], $_POST['hc'], $_POST['fibra'], $_POST['grasa'])) {
                $params['mensaje'] = 'Alimento insertado correctamente';
            } else {
                $params = array(
                'nombre' => $_POST['nombre'],
                'energia' => $_POST['energia'],
                'proteina' => $_POST['proteina'],
                'hc' => $_POST['hc'],
                'fibra' => $_POST['fibra'],
                'grasa' => $_POST['grasa'],
                );
                $params['mensaje'] = 'No se ha podido insertar el alimento. Revisa el formulario';
            }
            }
    
            return
             $this->render('JazzywebAulasMentorAlimentosBundle:Default:formInsertar.html.twig', 
             $params);
        
        }
    
        public function buscarPorNombreAction()
        {
            $params = array(
            'nombre' => '',
            'resultado' => array(),
            );
    
            $m = new Model(Config::$mvc_bd_nombre, Config::$mvc_bd_usuario,
                            Config::$mvc_bd_clave, Config::$mvc_bd_hostname);
    
            if ($_SERVER['REQUEST_METHOD'] == 'POST') {
            $params['nombre'] = $_POST['nombre'];
            $params['resultado'] = $m->buscarAlimentosPorNombre($_POST['nombre']);
            }
    
            return 
             $this->render('JazzywebAulasMentorAlimentosBundle:Default:buscarPorNombre.html.twig',
             $params);
        
        }
    
        public function verAction()
        {
            if (!isset($_GET['id'])) {
            throw new Exception('Página no encontrada');
            }
    
            $id = $_GET['id'];
    
            $m = new Model(Config::$mvc_bd_nombre, Config::$mvc_bd_usuario,
                            Config::$mvc_bd_clave, Config::$mvc_bd_hostname);
    
            $alimento = $m->dameAlimento($id);
    
            $params = $alimento;
    
            return 
             $this->render('JazzywebAulasMentorAlimentosBundle:Default:verAlimento.html.twig',
            $params);
        
        }

    }

Para que podamos utilizar la clase Model en el controlador sin necesidad de referirnos a ella por su nombre completo, Jazzyweb\AulasMentor\AlimentosBundle\Model\Model, hemos utilizado (línea 6) la directiva use de PHP 5.3 en dicho fichero. Así podemos utilizar la clase Model directamente en el controlador.

En la clase Model puedes observar que, para el acceso a la base de datos, se hace referencia a unos parámetros de configuración a través de la clase estática Config. Crea dicha clase en el fichero src/Jazzyweb/AulasMentor/AlimentosBundle/Config/Config.php, con el siguiente código:

src/Jazzyweb/AulasMentor/AlimentosBundle/Config/Config.php

Código :

<?php

    namespace Jazzyweb\AulasMentor\AlimentosBundle\Config;
    
    class Config
    {
        static public $mvc_bd_hostname = "localhost";
        static public $mvc_bd_nombre   = "alimentos";
        static public $mvc_bd_usuario  = "root";
        static public $mvc_bd_clave    = "root";
        static public $mvc_vis_css     = "estilo.css";
    }

Esta forma de especificar los parámetros de configuración no es la más symfónica, pero es suficiente para los propósitos de este tutorial. En otro tutorial explicaremos cómo usar la inyección de dependencias para declarar los parámetros en el Symfony2 way.

Como puedes ver hemos comenzado por el segundo paso del flujo básico de desarrollo de páginas con Symfony2, es decir, escribir el controlador. En realidad el orden no importa mucho; al final hay que tener los tres pasos resueltos antes de que funcione. Así que vamos por el primer paso: definir las rutas. Esto lo hacemos editando el fichero src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/config/routing.yml y plasmando ahí la tabla de rutas. Recuerda:

Código :

/          (mostrar pantalla inicio)
/listar    (listar alimentos)
/insertar  (insertar un alimento)
/buscar    (buscar alimentos)
/ver/x     (ver el alimento x)

El archivo src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/config/routing.yml queda así:

Código :

 JAMAB_homepage:
      pattern:  /
      defaults: { _controller: JazzywebAulasMentorAlimentosBundle:Default:index }

    JAMAB_listar:
      pattern:  /listar
      defaults: { _controller: JazzywebAulasMentorAlimentosBundle:Default:listar }

    JAMAB_insertar:
      pattern:  /insertar
      defaults: { _controller: JazzywebAulasMentorAlimentosBundle:Default:insertar }
      
    JAMAB_buscar:
      pattern:  /buscar
      defaults: { _controller: JazzywebAulasMentorAlimentosBundle:Default:buscarPorNombre }

    JAMAB_ver:
      pattern:  /ver/{id}
      defaults: { _controller: JazzywebAulasMentorAlimentosBundle:Default:ver }

La última ruta (JAMAB_ver) utiliza una funcionalidad muy interesante del sistema de Routing de Symfony2 que se utiliza continuamente. Se trata de introducir en la propia ruta los parámetros que se pasarán por GET al servidor web. Los valores encerrados entre llaves, en nuestro caso {id}, se denominan placeholders. El sistema de Routing parsea las URL's que coincidan con la ruta y asigna el valor que venga en la posición de cada placeholder a una variable denominada con el nombre especificado entre las llaves. Veámoslo con un ejemplo. La siguiente ruta:

Código :

 http://localhost/Symfony/web/app_dev.php/alimentos/ver/5

Coincide con la ruta JAMAB_ver (recuerda que a todas las rutas del bundle les hemos colocado el prefijo alimentos). El sistema de Routing, al parsearla, asignará al objeto Request de Symfony2 una variable denominada id, con un valor 5. Además, esta variable se pasará como argumento al controlador especificado en la ruta, en nuestro caso a JazzywebAulasMentorAlimentosBundle:Default:ver. Se consigue, además de usar URL's elegantes en las que sólo se utiliza el caracter "/", eliminar el nombre de las variables de la query string, ocultando información que no es necesaria para el cliente.

Symfony2 mapea esta ruta en una acción llamada verAction($id) a la que se le pasa el argumento id. Vamos a cambiar la acción verAction() para que su código sea más correcto y symfónico:

src/Jazzyweb/AulasMentor/AlimentosBundle/Controller/DefaultController.php

Código :

 <?php
   ...
   public function verAction($id)
   {                
      $m = new Model(Config::$mvc_bd_nombre, Config::$mvc_bd_usuario,
                        Config::$mvc_bd_clave, Config::$mvc_bd_hostname);

      $alimento = $m->dameAlimento($id);
       
      if(!$alimento)
      {
        throw new \Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException();
      }

      $params = $alimento;

      return $this->render('JazzywebAulasMentorAlimentosBundle:Default:verAlimento.html.twig', $params);
   
    }   
    ...

En la línea 3 hemos introducido un argumento para recoger la variable creada por el sistema de Routing, y en las líneas 9-12 hemos utilizado las excepciones de Symfony2 para tratar el caso de que el registro no exista. Fíjate que de esta manera no necesitamos utilizar la variable superglobal $_GET de PHP.





Y ahora a por las plantillas.

src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/view/Default/verAlimento.html.twig

Código :

     {% extends 'JazzywebAulasMentorAlimentosBundle::layout.html.twig' %}

     {% block contenido %}
    
     <h1>{{ nombre }}</h1>
     <table border="1">
    
         <tr>
             <td>Energía</td>
             <td>{{ energia }} </td>
         </tr>
         <tr>
             <td>Proteina</td>
             <td>{{ proteina }}</td>
         </tr>
         <tr>
             <td>Hidratos de Carbono</td>
             <td>{{ hidratocarbono }}</td>
         </tr>
         <tr>
             <td>Fibra</td>
             <td>{{ fibra }}</td>
         </tr>
         <tr>
             <td>Grasa total</td>
             <td> {{grasatotal}} </td>
         </tr>
     </table>
    
    {% endblock %}

src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/view/Default/mostrarAlimentos.html.twig

Código :

{% extends 'JazzywebAulasMentorAlimentosBundle::layout.html.twig' %}
    
     {% block contenido %}
    
     <table>
         <tr>
             <th>alimento (por 100g)</th>
             <th>energía (Kcal)</th>
             <th>grasa (g)</th>
         </tr>
         {% for alimento in alimentos %}
         <tr>
             <td><a href="{{ path('JAMAB_ver', {'id': alimento.id}) }}">{{alimento.nombre}}</a></td>
             <td>{{ alimento.energia }}</td>
             <td>{{ alimento.grasatotal }}</td>
         </tr>
         {% endfor %}
    
     </table>
    
     {% endblock %}  

En esta última plantilla hemos introducido tres elementos nuevos del sistema twig:

• La navegación por un array. Fíjate que la acción que utiliza esta plantilla, listarAction(), le pasa como parámetros una colección (array) de alimentos devueltos por el método dameAlimentos del modelo. Las colecciones, es decir los arrays indexados (no asociativos), pueden ser iterados en una plantilla twig mediante la construcción {% for dato in datos %} - {% endfor %}, donde datos es el array que llega a la plantilla.
  
  
• Por otro lado, cada elemento del array alimentos es un array asociativo. Sus elementos pueden ser accedido mediante la notación dato.propiedad. Una característica interesante de esta notación es que se puede utilizar no sólo con arrays asociativos, sino con objetos provistos de getters sobre sus propiedades. Este hecho se utiliza intensa y extensamente en Symfony2.
  
  
• Por último se utiliza la función path() de twig, que sirve para calcular la URL correcta a partir del nombre de la ruta. Así cuando cambiemos la aplicación de servidor o de ubicación, la ruta será calculada correctamente. Los argumentos de la ruta se pasan a la función path usando la sintaxis de un objeto JSON, es decir: { 'param1': val1, ..., `paramN': valN }.Esta función será otro de los elementos omnipresentes en cualquier aplicación web construida con Symfony2 y twig.

src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/Default/formInsertar.html.twig

Código :

  {% extends 'JazzywebAulasMentorAlimentosBundle::layout.html.twig' %}
    
     {% block contenido %}
    
    {% if mensaje is defined %}
    <b><span style="color: red;">{{ mensaje }}</span></b>
    {% endif %}
    <br/>
    <form name="formInsertar" action="{{ path('JAMAB_insertar') }}" method="POST">
        <table>
            <tr>
                <th>Nombre</th>
                <th>Energía (Kcal)</th>
                <th>Proteina (g)</th>
                <th>H. de carbono (g)</th>
                <th>Fibra (g)</th>
                <th>Grasa total (g)</th>
            </tr>
            <tr>
                <td><input type="text" name="nombre" value="{{ nombre }}" /></td>
                <td><input type="text" name="energia" value="{{ energia }}" /></td>
                <td><input type="text" name="proteina" value="{{ proteina }}" /></td>
                <td><input type="text" name="hc" value="{{ hc }}" /></td>
                <td><input type="text" name="fibra" value="{{ fibra }}" /></td>
                <td><input type="text" name="grasa" value="{{ grasa }}" /></td>
            </tr>
    
        </table>
        <input type="submit" value="insertar" name="insertar" />
    </form>
    * Los valores deben referirse a 100 g del alimento
    
    {% endblock %}

En esta plantilla hemos introducido otro elemento nuevo; la construcción {% if data is defined %} - {% endif %}, que como puedes deducir, comprueba si la variable data ha sido definida.

También hemos vuelto a utilizar la función path para escribir el parámetro action del formulario HTML.

Llegados a este punto hemos de aclarar que Symfony2 proporciona un potente servicio para la construcción de formularios que no estudiaremos en este tutorial. Por lo pronto nos quedamos con esta manera sencilla y directa de crear formularios.

Vamos a por la siguiente plantilla:

src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/Default/buscarPorNombre.html.twig

Código :

 {% extends 'JazzywebAulasMentorAlimentosBundle::layout.html.twig' %}
    
     {% block contenido %}
    
    <form name="formBusqueda" action="{{ path('JAMAB_buscar') }}" method="POST">
    
         <table>
             <tr>
                 <td>nombre alimento:</td>
                 <td><input type="text" name="nombre" value="{{ nombre }}">(puedes utilizar '%' como comodín)</td>
    
                 <td><input type="submit" value="buscar"></td>
             </tr>
         </table>
    
         </table>
    
     </form>
    
     {% if resultado %}
     {% include 'JazzywebAulasMentorAlimentosBundle:Default:_tablaAlimentos.html.twig' with {'alimentos': resultado} %}
     {% endif %}
    
    {% endblock %}

Otro elemento nuevo; la inclusión de plantillas en otras plantillas. Esto lo hacemos en la línea 21 mediante la función include de twig, la cual requiere como argumento el nombre lógico de la plantilla que se desea incluir. Los parámetros que necesita la plantilla incluida se pasan en un array con sintaxis JSON después del token with.

Este mecanismo de inclusión combinado con la herencia proporciona una gran flexibilidad al programador, otorgándole las herramientas necesarias para elaborar un código bien organizado y reusable.

La plantilla incluida es la siguiente:

src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/Default/_tablaAlimentos.html.twig

Código :

<table>
         <tr>
             <th>alimento (por 100g)</th>
             <th>energía (Kcal)</th>
             <th>grasa (g)</th>
         </tr>
         {% for alimento in alimentos %}
         <tr>
             <td>{{ alimento.nombre }}</td>
             <td>{{ alimento.energia }}</td>
             <td>{{ alimento.grasatotal }}</td>
         </tr>
         {% endfor %}
    
     </table>

Y, por último, utilizando esta última plantilla que pinta un listado de alimentos, podemos simplificar la plantilla mostrarAlimentos.html.twig evitando la repetición de código innecesario.

src/Jazzyweb/AulasMentor/AlimentosBundle/Resources/view/Default/mostrarAlimentos.html.twig

Código :

 {% extends 'JazzywebAulasMentorAlimentosBundle::layout.html.twig' %}
    
    {% block contenido %}
    
    {% include 'JazzywebAulasMentorAlimentosBundle:Default:_tablaAlimentos.html.twig' with {'alimentos': alimentos} %}
    
    {% endblock %}   

Y con esto ya tenemos la aplicación de gestión de alimentos terminada y construida en Symfony2. Aún puede hacerse de un modo más symfónico, utilizando los servicios de persistencia de datos (Doctrine), de creación de formularios y de validación de datos. Pero la intención de este tutorial es mostrar los elementos básicos para la creación de páginas en Symfony2, y por tanto vamos a dar por buena la aplicación tal y como está.

Únicamente faltaría usar la función path() de twig para completar los enlaces de los menús. Pero eso vamos a dejar que lo hagas tú.

El tutorial en chuletas

Generar un bundle

Código :

php app/console generate:bundle

Registrar un bundle

Se hace en el archivo app/KernelApp.php, de la siguiente manera:

Código :

 ...
   new Jazzyweb\AulasMentor\AlimentosBundle\JazzywebAulasMentorAlimentosBundle(),
   ...

Enlazar el routing de un bundle con el routing general de la aplicación

Se hace añadiendo al archivo app/config/routing.yml (o routing_{env}.yml):

Código :

  JazzywebAulasMentorAlimentosBundle:
   resource: "@JazzywebAulasMentorAlimentosBundle/Resources/config/routing.yml"
   prefix:   /

Pasos para acoplar un bundle al framework

1. Registrar el espacio de nombre en el sistema de autocarga. Este paso no es necesario si ubicamos al bundle en el directorio src.
   
2. Registrar al bundle en el fichero app/AppKernel.php. Esta operación se puede hacer automáticamente a través del generador interactivo de bundles, pero si fallase por alguna razón (por ejemplo que los permisos de dicho archivo no estén bien definidos), habría que hacerlo a mano.
   
3. Importar las tablas de enrutamiento del bundle en la tabla de enrutamiento de la aplicación.

Flujo para la creación de páginas en Symfony2

1. Creación de la ruta en config/Resources/routing.yml del bundle, o directamente en app/config/routing.yml.
   
2. Creación de la acción en el controlador correspondiente en una clase que debe ubicarse en un fichero del directorio Controllers del bundle.
   
3. Creación de una plantilla en el directorio Resources/view.

Nombres lógicos de acciones

NombreBundle:NombreControlador:NombreAcción.Ejemplo:
AcmeDemoBundle:Secured:login se mapea en la acción loginAction() de la clase Acme\DemoBundle\Controller\SecuredController definida (normalmente) en src/Acme/DemoBundle/Controller/SecuredController.php.

Sintaxis básica de twig

• {{ parametro }} -> pinta el valor de la variable parametro.
  
• {% comando %} ... {% endcomando %} -> ejecuta la acción expresada por
  
• comando en el bloque definido desde su declaración hasta {% endcomando%}.

Herencia en plantilla twig

Esta plantilla hereda de JazzywebAulasMentorAlimentosBundle::layout.html.twig, y modifica el bloque contenido que allí se declara.

Código :

 {% extends 'JazzywebAulasMentorAlimentosBundle::layout.html.twig' %}

   {% block contenido %}
   
   <h1>Inicio</h1>
   <h3> Fecha: {{fecha}}  </h3>
   {{mensaje}}

   {% endblock %}

Función path de twig

Código :

  {{ path('JAMAB_listar', {'id': alimento.id}) }}

Iterar una colección (array) de datos en twig

Código :

 {% for alimento in alimentos %}
     <tr>
         <td><a href="{{ path('JAMAB_listar', {'id': alimento.id}) }}">{{alimento.nombre}}</a></td>
         <td>{{ alimento.energia }}</td>
         <td>{{ alimento.grasatotal }}</td>
     </tr>
   {% endfor %}
   
[h3]Código condicional en twig[/h3][code] {% if data is defined %} 
    ...
   {% endif %}[/code]

Inclusión de plantillas en twig

Código :

{% include 'JazzywebAulasMentorAlimentosBundle:Default:_tablaAlimentos.html.twig' with {'resultado': resultado} %}

Estructura básica de una ruta

Código :

 nombre_unico_de_la_ruta:
      pattern:  /el/patron/de/la/ruta/{param1}/{param2}/.../{paramN}
      defaults: { _controller: NombreLogico:del:Controlador }

Ejemplo:

Código :

 JAMAB_ver:
      pattern:  /ver/{id}
      defaults: { _controller: JazzywebAulasMentorAlimentosBundle:Default:ver }

Este trabajo, por Juan David Rodríguez García<juanda at ite.educacion.es>, se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.