WEBVTT

00:00:03.026 --> 00:00:03.536 align:middle
¡Hola amigos! Me

00:00:03.826 --> 00:00:07.216 align:middle
alegro mucho de que estéis aquí
conmigo, porque este tutorial

00:00:07.216 --> 00:00:10.586 align:middle
trata de algo divertido,
genial y bastante poderoso.

00:00:11.176 --> 00:00:15.416 align:middle
No, no se trata de un felino enmascarado que
lucha contra el crimen y que tiene superpoderes,

00:00:15.606 --> 00:00:17.456 align:middle
aunque eso sería genial.

00:00:18.006 --> 00:00:21.826 align:middle
Este tutorial trata del paquete Netgen Layouts.

00:00:22.476 --> 00:00:27.766 align:middle
Esta biblioteca existe desde hace años,
pero hace poco que la he probado. Layouts

00:00:28.516 --> 00:00:35.166 align:middle
es, sencillamente, una forma de tomar cualquier
aplicación Symfony existente y añadir la capacidad

00:00:35.166 --> 00:00:42.416 align:middle
de reorganizar dinámicamente la organización de tus páginas
sobre la marcha a través de una sección de administración...

00:00:42.796 --> 00:00:45.396 align:middle
incluyendo la adición de
nuevos contenidos dinámicos.

00:00:46.086 --> 00:00:51.016 align:middle
Es una mezcla genial de una aplicación Symfony
normal con controladores y plantillas Twig...

00:00:51.296 --> 00:00:56.556 align:middle
además de funciones de gestión de contenidos
a las que puedes optar página por página.

00:00:57.126 --> 00:01:03.206 align:middle
Me encanta especialmente el enfoque de
opt-in ¿Por qué te tomarías la molestia

00:01:03.206 --> 00:01:05.506 align:middle
de usar Layouts en tu aplicación Symfony?

00:01:06.186 --> 00:01:08.686 align:middle
Bueno, no todos los proyectos lo necesitan.

00:01:09.016 --> 00:01:14.076 align:middle
Pero si un usuario administrador necesita poder
hacer cambios en la organización de tu sitio

00:01:14.076 --> 00:01:17.586 align:middle
y su contenido, entonces esto es para ti.

00:01:18.236 --> 00:01:24.016 align:middle
Esto incluye poder añadir y cambiar colecciones
de elementos -como productos destacados-

00:01:24.456 --> 00:01:29.926 align:middle
justo en el centro de una página existente, reorganizar
el contenido de una plantilla Twig más arriba

00:01:29.926 --> 00:01:35.306 align:middle
o más abajo en la página, añadir un contenido
personalizable completamente nuevo a una página

00:01:35.656 --> 00:01:43.166 align:middle
o crear páginas de destino temporales y permitir
que todo esto lo hagan los usuarios normales.

00:01:43.876 --> 00:01:48.416 align:middle
Puedes aprovechar Layouts para una sola
página de tu sitio, dejando que todo lo demás

00:01:48.416 --> 00:01:52.256 align:middle
sea una aplicación normal de Symfony, o todas
las páginas de tu sitio pueden utilizarlo.

00:01:52.956 --> 00:01:56.826 align:middle
Como he dicho, puedes optar por
los Layouts según te convenga.

00:01:57.596 --> 00:02:02.916 align:middle
Podría seguir y seguir, pero probablemente sea
mejor ver la magia de Layouts en acción. Es

00:02:03.546 --> 00:02:07.706 align:middle
muy divertido jugar con él, así que
deberías descargarte el código del curso

00:02:07.746 --> 00:02:10.116 align:middle
desde esta página y codificar conmigo.

00:02:10.836 --> 00:02:16.116 align:middle
Cuando descomprimas el archivo, encontrarás un
directorio start/ con el mismo código que ves aquí.

00:02:16.846 --> 00:02:22.186 align:middle
Abre este archivo README.md para ver
todos los detalles de la configuración.

00:02:23.006 --> 00:02:27.756 align:middle
Ya he ido a mi terminal, he instalado
mis activos de Node mediante yarn install

00:02:28.136 --> 00:02:32.376 align:middle
y he ejecutado: yarn watch para
construir mis archivos CSS y JS.

00:02:32.856 --> 00:02:37.296 align:middle
Pero todo eso es sólo para que nuestra
aplicación y este tutorial sean más realistas.

00:02:37.646 --> 00:02:44.246 align:middle
Layouts no requiere que usemos Encore y no
se mete con nuestro CSS y JS en absoluto.

00:02:45.006 --> 00:02:51.016 align:middle
De todos modos, el último paso en el README es abrir
otra pestaña del terminal y ejecutar symfony serve -d

00:02:51.506 --> 00:02:56.686 align:middle
para iniciar un servidor web
en https://127.0.0.1:8000-

00:02:57.566 --> 00:02:59.486 align:middle
Voy a hacer trampas y hacer clic en

00:03:00.086 --> 00:03:05.286 align:middle
eso. Y... hola nuevo proyecto
paralelo: ¡es Bark &

00:03:05.896 --> 00:03:11.446 align:middle
Bake! Escucha, los perros están bastante cansados
de nuestros perezosos intentos de cocina can ina.

00:03:12.006 --> 00:03:12.816 align:middle
¿Problemas crujientes

00:03:13.046 --> 00:03:14.176 align:middle
? No

00:03:14.766 --> 00:03:20.086 align:middle
, gracias. Así que hemos construido este sitio para
inspirar a la gente a ser los mejores chefs que puedan

00:03:20.406 --> 00:03:21.316 align:middle
ser... para sus

00:03:22.116 --> 00:03:26.986 align:middle
perros. Se trata de una aplicación Symfony bastante
tradicional con algunos controladores y algunas

00:03:27.366 --> 00:03:33.246 align:middle
plantillas Twig . También tiene dos entidades: Una
entidad User para la seguridad, y una entidad Recipe

00:03:34.016 --> 00:03:39.956 align:middle
. En el sitio, tenemos una página de inicio que muestra
las últimas y mejores recetas, una sección de recetas

00:03:40.386 --> 00:03:45.296 align:middle
y la posibilidad de abrir una receta
específica, para que podamos seguirla en la

00:03:45.816 --> 00:03:46.846 align:middle
cocina. Eso es

00:03:47.546 --> 00:03:51.136 align:middle
todo. Esto de las habilidades no
está implementado en absoluto

00:03:51.706 --> 00:03:54.616 align:middle
todavía. Así que, aparte de poder editar los

00:03:54.616 --> 00:03:59.556 align:middle
detalles de cada receta a través de un área
de administración, ¡este es un sitio estático

00:04:00.106 --> 00:04:01.516 align:middle
! ¡Es hora de cambiar

00:04:02.086 --> 00:04:04.036 align:middle
eso! Pronto podremos tomar
esta página de inicio

00:04:04.186 --> 00:04:07.236 align:middle
-que está escrita mediante un controlador
y una plantilla normales de Symfony...

00:04:07.606 --> 00:04:13.686 align:middle
como puedes ver aquí- y utilizar los layouts para insertar
contenido y reorganizar las cosas de forma dinámica

00:04:14.466 --> 00:04:16.156 align:middle
Así que vamos a instalar Layouts

00:04:16.676 --> 00:04:22.816 align:middle
. Busca tu terminal y ejecuta: composer
require netgen/layouts-standard Esto

00:04:22.816 --> 00:04:26.276 align:middle
descargará varios paquetes,
incluyendo un par de bundles nuevos.

00:04:26.816 --> 00:04:33.646 align:middle
Cuando termine, ejecuta: git status para ver que también
nos ha proporcionado dos nuevos archivos de rutas

00:04:33.986 --> 00:04:37.526 align:middle
, que añaden algunas rutas de
administración que vamos a ver en unos

00:04:38.336 --> 00:04:42.466 align:middle
minutos. Layouts también requiere algunas tablas
adicionales de la base de datos donde almacena

00:04:42.466 --> 00:04:47.526 align:middle
información sobre los diseños que crearemos, así como
cualquier contenido personalizado que vayamos a poner en

00:04:48.276 --> 00:04:51.636 align:middle
ellos. Veremos todo eso en la sección de
administración de Diseños en un minuto.

00:04:52.326 --> 00:04:58.386 align:middle
Para añadir las tablas necesarias, desplázate hacia arriba
y copia esta ingeniosa línea doctrine:migrations:migrate

00:04:59.186 --> 00:05:00.056 align:middle
. Esto es

00:05:00.616 --> 00:05:03.686 align:middle
genial. Los paquetes de layouts vienen con

00:05:03.986 --> 00:05:05.806 align:middle
migraciones... y esto las ejecuta.

00:05:06.476 --> 00:05:11.396 align:middle
Pega este comando, pero si utilizas la
configuración de la base de datos de Docker que

00:05:11.396 --> 00:05:17.086 align:middle
describimos en el LÉEME - yo lo hago - entonces
modifica esto para que empiece con symfony

00:05:17.476 --> 00:05:23.866 align:middle
console para que pueda inyectar las variables de
entorno de Docker que apuntan a nuestra base de datos:

00:05:24.346 --> 00:05:31.056 align:middle
Y... ¡perfecto! Una advertencia es que estas
migraciones están escritas específicamente para MySQL.

00:05:31.646 --> 00:05:34.116 align:middle
Por ahora , Layouts sólo admite MySQL.

00:05:34.116 --> 00:05:40.156 align:middle
En su mayor parte, Layouts va a gestionar
por completo todas las tablas que acabamos de

00:05:40.546 --> 00:05:42.846 align:middle
añadir: no necesitamos hacer nada con

00:05:43.476 --> 00:05:48.566 align:middle
ellas. Pero ahora que existen en nuestra
base de datos, si añadiéramos una nueva

00:05:48.746 --> 00:05:50.996 align:middle
entidad y generáramos una migración para

00:05:51.446 --> 00:05:55.816 align:middle
ella... la migración intentaría eliminar
todas las tablas de Netgen Lay outs

00:05:56.546 --> 00:06:01.526 align:middle
. ¡Mira! Ejecuta: symfony
console doctrine:schema:update

00:06:01.646 --> 00:06:07.516 align:middle
--dump-sql --complete Esto imita
la generación de una migración,

00:06:07.706 --> 00:06:11.546 align:middle
y... ¡sí! Quiere soltar
todas las tablas de Diseños.

00:06:12.446 --> 00:06:18.556 align:middle
Para solucionarlo, entra en
config/packages/doctrine.yaml y, en

00:06:18.806 --> 00:06:23.006 align:middle
dbal, añade schema_filter, y pasa una

00:06:23.586 --> 00:06:26.346 align:middle
expresión regular... que puedes copiar de la

00:06:26.946 --> 00:06:33.206 align:middle
documentación de Layouts: ¡Perfecto! Con esto, si
volvemos a ejecutar el comando doctrine:schema:update

00:06:33.846 --> 00:06:37.896 align:middle
de nuevo ... Está limpio, excepto por

00:06:38.216 --> 00:06:44.406 align:middle
doctrine_migration_versions. Pero, no te preocupes: el comando make:migration
es lo suficientemente inteligente como para no dejar caer su propia

00:06:45.286 --> 00:06:50.496 align:middle
tabla. Bien, Netgen Layouts está instalado
y tiene las tablas de la base de datos

00:06:51.346 --> 00:06:53.536 align:middle
que necesita. Si volvemos
a actualizar nuestro sitio

00:06:54.096 --> 00:06:55.386 align:middle
ahora...

00:06:55.726 --> 00:06:58.106 align:middle
¡felicidades! Absolutamente nada es

00:06:58.676 --> 00:07:02.766 align:middle
diferente. Sin embargo, tenemos un bonito icono
de la barra de herramientas de depuración web

00:07:02.766 --> 00:07:04.486 align:middle
aquí abajo del que hablaremos

00:07:05.246 --> 00:07:09.486 align:middle
más adelante. Esto, de nuevo,
es una de las grandes cosas de

00:07:09.946 --> 00:07:13.676 align:middle
Layouts. Al instalarlo no se apodera de tu

00:07:14.366 --> 00:07:17.986 align:middle
aplicación. Layouts no se utiliza
en absoluto para representar esta

00:07:18.966 --> 00:07:24.096 align:middle
página. A continuación, vamos a sumergirnos en el área
de administración de Layouts para crear nuestro primer

00:07:24.716 --> 00:07:29.026 align:middle
diseño. Luego, veremos cómo interactúa
con las páginas reales de nuestro