código https://drupaladicto.com/ es Módulos, Rutas y Controllers https://drupaladicto.com/curso/drupal-con-symfony/modulos-rutas-y-controllers <span class="field field--name-title field--type-string field--label-hidden">Módulos, Rutas y Controllers</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 29/08/2023 - 10:18</span> Tue, 29 Aug 2023 08:18:23 +0000 webmaster 456 at https://drupaladicto.com Drupal 10 con Symfony | Guía de programación https://drupaladicto.com/curso/drupal-10-con-symfony-guia-de-programacion-resumen <span class="field field--name-title field--type-string field--label-hidden">Drupal 10 con Symfony | Guía de programación</span> <div class="field field--name-field-portada-ce field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"><svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 650 650"> <rect y="0" width="650" height="650" style="fill:#054065; stroke:#1d1d1b; stroke-miterlimit:10;"></rect> <text transform="translate(183.61 309.27)" style="fill:#fff; font-family:Montserrat-Light, Montserrat; font-size:99.05px; font-weight:300;"> <tspan x="0" y="0" style="letter-spacing:-.02em;">C</tspan> <tspan x="69.04" y="0">u</tspan> <tspan x="135.3" y="0" style="letter-spacing:0em;">r</tspan> <tspan x="174.03" y="0">so</tspan> <tspan x="-58.14" y="90">G</tspan> <tspan x="18.42" y="90" style="letter-spacing:-.05em;">r</tspan> <tspan x="52.69" y="90">atui</tspan> <tspan x="241.97" y="90" style="letter-spacing:-.02em;">t</tspan> <tspan x="279.51" y="90">o</tspan> </text> </svg></div> </div> </article> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Lun, 28/08/2023 - 18:56</span> <div class="clearfix text-formatted field field--name-field-descripcion-ce field--type-text-long field--label-hidden field__item"><p>En este curso nos enfocaremos en explorar los conceptos básicos de programación orientada a objetos, que deberías conocer si vienes del mundo de la programación y quieres entender cómo funciona Drupal. </p> <p>Algunos conceptos que trataremos son (Services, Dependency Injection, Controllers and Services, Events, etc.)</p> </div> <div class="field field--name-field-tipo-ce field--type-list-string field--label-hidden field__item">Curso Gratuito</div> <div class="field field--name-field-suscribete-youtube field--type-link field--label-hidden field__item"><a href="https://www.youtube.com/drupaladicto">Suscríbete al canal</a></div> <div class="field field--name-field-categoria-ce field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/categoria/backend" hreflang="es">backend</a></div> <div class="field__item"><a href="/categoria/programacion" hreflang="es">programacion</a></div> <div class="field__item"><a href="/categoria/codigo" hreflang="es">código</a></div> <div class="field__item"><a href="/categoria/desarrollo" hreflang="es">desarrollo</a></div> <div class="field__item"><a href="/categoria/development" hreflang="es">development</a></div> </div> <div class="field field--name-field-comenzar-curso field--type-string field--label-hidden field__item">https://drupaladicto.com/curso/drupal-10-con-symfony-guia-de-programacion</div> Mon, 28 Aug 2023 16:56:05 +0000 webmaster 455 at https://drupaladicto.com Declarar parámetros opcionales php8.2 https://drupaladicto.com/snippet/declarar-parametros-opcionales-php82 <span class="field field--name-title field--type-string field--label-hidden">Declarar parámetros opcionales php8.2</span> <div class="clearfix text-formatted field field--name-field-snippet-descripcion field--type-text-long field--label-above"> <div class="field__label">Descripción</div> <div class="field__item"><h2>Fatal error: Uncaught TypeError: Argument 2 passed to MiClase::__construct() must be an instance of ClasePadre, null given...</h2> <p>     Uno de los cambios incluidos en la versión 8.2 de PHP, está la declaración de parámetros opcionales dentro de los métodos:</p> <h3> </h3> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 04/04/2023 - 12:56</span> <div class="clearfix text-formatted field field--name-field-instrucciones field--type-text-long field--label-above"> <div class="field__label">Instrucciones</div> <div class="field__item"><p>     En el siguiente código, al crear un nuevo objeto, dos de los parámetros dentro del método constructor, deberían poder devolver como resultado, el tipo de objeto <strong>ClasePadre</strong> o valor <strong>null</strong>.</p> <p>     Para más información, visita la página oficial de PHP</p> <p>    <a href="https://www.php.net/manual/es/migration71.new-features.php" target="_blank">https://www.php.net/manual/es/migration71.new-features.php</a></p> </div> </div> <div class="clearfix text-formatted field field--name-field-codigo field--type-text-long field--label-hidden field__item"><h3><strong>Antes:</strong></h3> <p>class MiClase</p> <p>{</p> <p>private $propiedad1;</p> <p>private $propiedad2;</p> <p>private $propiedad3;</p> <p> </p> <p>public function __construct( bool $propiedad1, <strong>ClasePadre</strong> $propiedad2 <strong>= null</strong>, <strong>ClasePadre</strong> $propiedad3 <strong>= null</strong> ){</p> <p>   $this-&gt;propiedad1 = $propiedad1;</p> <p>   $this-&gt;propiedad2 = $propiedad2;</p> <p>   $this-&gt;propiedad3 = $propiedad3;</p> <p>  }</p> <p>}</p> <h3><strong>Ahora:</strong></h3> <p>class MiClase</p> <p>{</p> <p>private bool $propiedad1;</p> <p>private <strong>?ClasePadre</strong> $propiedad2;</p> <p>private <strong>?ClasePadre</strong> $propiedad3;</p> <p> </p> <p>public function __construct( $propiedad1, <strong>?ClasePadre</strong> $propiedad2, <strong>?ClasePadre</strong> $propiedad3 ){</p> <p>   $this-&gt;propiedad1 = $propiedad1;</p> <p>   $this-&gt;propiedad2 = $propiedad2;</p> <p>   $this-&gt;propiedad3 = $propiedad3;</p> <p>  }</p> <p>}</p> </div> <div class="field field--name-field-snippet-paginador field--type-image field--label-above"> <div class="field__label">Paginador</div> <div class="field__item"> <img src="/sites/default/files/default_images/snippet-pager.png" width="100" height="100" alt="Snippet | www.drupaladicto.com - Consultores especializados en Drupal y Symfony" title="Snippet | www.drupaladicto.com - Consultores especializados en Drupal y Symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> <div class="field field--name-field-categoria-snippet field--type-entity-reference field--label-above"> <div class="field__label">Categoría</div> <div class="field__items"> <div class="field__item"><a href="/categoria/php" hreflang="es">php</a></div> <div class="field__item"><a href="/categoria/programacion" hreflang="es">programacion</a></div> <div class="field__item"><a href="/categoria/codigo" hreflang="es">código</a></div> <div class="field__item"><a href="/categoria/codigos" hreflang="es">códigos</a></div> <div class="field__item"><a href="/categoria/code" hreflang="es">code</a></div> <div class="field__item"><a href="/categoria/clases" hreflang="es">clases</a></div> </div> </div> <div class="field field--name-field-portada-snippet field--type-entity-reference field--label-above"> <div class="field__label">Portada</div> <div class="field__item"><article class="media media--type-imagen media--view-mode-default"> </article> </div> </div> Tue, 04 Apr 2023 10:56:01 +0000 webmaster 416 at https://drupaladicto.com Contenidos de Prueba | Generados con el módulo Devel https://drupaladicto.com/curso/programacion-drupal/contenidos-de-prueba-generados-con-el-modulo-devel <span class="field field--name-title field--type-string field--label-hidden">Contenidos de Prueba | Generados con el módulo Devel</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-870 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-870 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-870 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-870"> <section id="video-only-870" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-590-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-590-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-590-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/eGXutQIDMIw&amp;max_width=0&amp;max_height=0&amp;hash=xkWV5NsCeCudS1gHm_0C5rpeAX6WhQh7VbpwqGyLRG0" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-590-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1185" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><p>      Cuando estamos empezando con el desarrollo o implementación de cualquier proyecto, en la mayoría de los casos nos resultará necesario la creación de contenidos con los que podamos realizar pruebas de todo tipo.</p> <p>     Para realizar esta tarea, en Drupal contamos con el módulo <strong>Devel Generate</strong>, integrado dentro de las dependencias del módulo <a href="https://www.drupal.org/project/devel" target="_blank">Devel</a>. Por lo que, una vez instalado y activado en nuestro Drupal, sólo tendremos que dirigirnos a la url "/admin/config/development/generate/content", y allí veremos el listado de todos los tipos de contenidos que tengamos creados en nuestro proyecto.</p> <h3>CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:</h3> <p><strong>Paso 1 Descargar el módulo:</strong></p> <p>     Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes <a data-extlink="" href="https://getcomposer.org/" rel="noreferrer" target="_blank">Composer</a>, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la <a data-extlink="" href="https://www.drupal.org/project/devel" rel="noreferrer">Página oficial del módulo</a> y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.</p> <p><strong>Paso 2 Activación del módulo</strong> :</p> <p>     Para activar el módulo Devel, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando <strong>"drush en devel -y"</strong>, que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.    </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 25.08%;" data-ratio="25.08" data-b-token="b-bf562569176" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="bbffe9dd-d7d5-4f17-9b0a-52076bde5c34" loading="lazy" alt="Devel Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/modulo_devel.png?itok=DyCTE5F_" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="163" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 81.38%;" data-ratio="81.38" data-b-token="b-07e736f3d56" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="e63f7359-7862-4490-b2de-6abe96112e6c" loading="lazy" alt="Devel Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/generar_contenido.jpg?itok=dQhk5U7r" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="529" typeof="foaf:Image" /></div></div> <p>     Además de poder generar automáticamente nuestros contenidos, podremos configurar algunas opciones adicionales como, especificar su fecha de publicación, comentarios relacionados, títulos para los contenidos con un límite de caracteres específico, el idioma o incluso los usuarios que los crearon, esta última opción nos facilitará el testeo de los permisos de usuario.</p> <p>     Para generar nuestro contenidos, sólo tendremos que marcar las opciones con las que deseamos trabajar, es recomendable intentarlo la primera vez como poco contenido para estar seguros de obtener lo que pensábamos o si hará falta modificar algún campo.</p> <p>     Si no estás conforme con el contenido generado o simplemente quieres volver a generar contenidos otra vez, puedes seleccionar la opción de eliminar todos los contenidos previamente creados antes de ejecutarlo.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 74%;" data-ratio="74" data-b-token="b-4b2c2db1ff0" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="f0925341-0457-435c-b020-899f5a76c3ec" loading="lazy" alt="Devel Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/como_generar_contenidos.jpg?itok=P7foOYOI" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="481" typeof="foaf:Image" /></div></div> <p>     Una vez que hayamos revisado todos los campos que nos interesan, haremos clic en el botón que aparece en la parte inferior de la pantalla y comenzará el proceso inmediatamente.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 62.62%;" data-ratio="62.62" data-b-token="b-529a6e0212d" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="b59a89a7-77d6-44a7-b385-3b59d1edc906" loading="lazy" alt="Devel Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/idioma_y_usuarios.jpg?itok=faRslW2Z" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="407" typeof="foaf:Image" /></div></div> <p>     Cuando se haya realizado el proceso de generación de nuestros contenidos, veremos un mensaje de confirmación en la parte superior de la pantalla, con la cantidad y el tipo de contenido que decidimos utilizar.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 49.91%;" data-ratio="49.91" data-b-token="b-6a5876e61c1" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="dac200ad-bc83-4875-81f5-e8f373ae57f9" loading="lazy" alt="Devel Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/generados.png?itok=lhYaSXTY" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="533" height="266" typeof="foaf:Image" /></div></div> <p>     Para comprobarlo, sólo tendremos que dirigirnos al listado de contenidos en la url "/admin/content" y veremos el listado de contenidos generados por el módulo con las configuraciones adicionales, si es que hemos seleccionado alguna.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 49.38%;" data-ratio="49.38" data-b-token="b-4e4a8d061ee" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="182f2e84-9c0d-473e-93c7-26d287a6072f" loading="lazy" alt="Devel Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/listado_generados.jpg?itok=Jtk5KaGC" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="321" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Dom, 19/03/2023 - 09:10</span> Sun, 19 Mar 2023 08:10:21 +0000 webmaster 409 at https://drupaladicto.com Módulo personalizado | Creación de plantilla https://drupaladicto.com/curso/programacion-drupal/modulo-personalizado-creacion-de-plantilla <span class="field field--name-title field--type-string field--label-hidden">Módulo personalizado | Creación de plantilla</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-943 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-943 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-943 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-943"> <section id="video-only-943" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-664-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-664-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-664-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/-2O__4AVzBI&amp;max_width=0&amp;max_height=0&amp;hash=mWtWle_xPwcj5NDB8pOgsXbMijfm8xOoLtcoADFTCrk" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-664-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1175" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/-2O__4AVzBI" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>     Hoy hemos decidido que estamos dispuestos a seguir aprendiendo Drupal, porque nos apasiona obtener nuevos conocimientos, que solucionarán posibles retos en nuestro futuro próximo, o porque nos encanta ampliar nuestras posibilidades, tanto a nivel laboral como personal. Ya que la puesta en marcha de proyectos web, podrían representar el inicio hacia una carrera prometedora.</p> <p>     Ahora que ya tenemos claro <a href="/actualidad/como-crear-un-modulo-en-drupal-9" target="_blank">Cómo crear un módulo en Drupal 9</a>, en esta ocasión nos vamos a concentrar, en la creación de una plantilla personalizada, con el objetivo de tomar el control sobre la presentación de los datos relacionados con el mismo. Para lograr nuestro propósito, tendremos que implementar uno de los "hooks" o funciones prefabricadas de Drupal que nos permitirán lograr toda clase de objetivos, en este caso será <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x" target="_blank">function hook_theme</a>, la que se encargará registrar las implementaciones de un tema o "theme", dentro de nuestro tema o módulo personalizado.</p> <p>     En este capítulo vamos a crear un módulo personalizado, al que añadiremos un controlador, que nos imprimirá en pantalla una página y posteriormente, también añadiremos mediante la <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a> en el archivo <strong>( MIMODULO.module )</strong> los datos y configuraciones que nos permitirán pasar por parámetros el título y otros contenidos que mostraremos en ella. </p> <p>     Finalmente, añadiremos el archivo routing <strong>( MIMODULO.routing.yml )</strong>, para poder acceder a esta página una vez haya sido activado nuestro módulo personalizado. Este ejemplo te permitirá conocer la manera en que podrás implementar plantillas personalizadas en tus módulos.  </p> <h2>Requisitos</h2> <p>- <a href="/actualidad/como-crear-un-modulo-en-drupal-9" target="_blank">Cómo crear un módulo en Drupal 9</a></p> <h2>Cómo crear módulos con su Controlador y Plantilla en Drupal 9  </h2> <h3>     Paso 1 Creación de tu módulo:</h3> <p>          Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"</p> <h3>     Paso 2 Creación del archivo .module para implementar la function_hook_theme():</h3> <p>          En el archivo<strong> MIMODULO.module</strong> es donde podremos implementar los hooks o funciones de php en Drupal, en este ejemplo utilizaremos la <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>, que se encarga de registrar las implementaciones del tema dentro de un módulo o tema personalizado, esto quiere decir, que las implementaciones declaradas por este hook o función especifican cómo un arreglo o array de renderización particular debe ser renderizada como HTML.</p> <p>     Los párametros que utilizaremos en este ejercicio, estarán dentro de un array que nos devolverá la función y son, el nombre de la función y dentro de de ella, las variables que pasaremos posteriormente al controlador, para crear la página que imprimiremos una vez activado el módulo.</p> <p>     Dentro de las variables, a su vez, tendremos un array de items, donde colocaremos todos las noticias que queremos presentar en la página una vez renderizada y el título de la página que será del tipo String.</p> <pre> &lt;?php /** * Implement hook_theme(). */ function listado_noticias_theme($existing, $type, $theme, $path) { return [ 'listado_noticias' =&gt; [ 'variables' =&gt; ['items' =&gt; [], 'title' =&gt; '' ] ] ]; }</pre> <h3>     Paso 3 Creación del Controlador o Controller:</h3> <p>          El Controlador o Controller es quien nos permitirá crear la página que se mostrará, una vez activado nuestro módulo, al renderizar los datos que hemos definido previamente en nuestra  <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>.</p> <p>          Para que pueda generarse nuestra página, vamos a añadir a nuestra clase controlador, un método al que llamaremos "page()", y dentro tendremos dos arrays, uno que contendrá el listado de noticias que vamos a recorrer usando nuestra <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>, y otro con los datos que obtendremos al conectar con la información recibida desde la <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 53.86%;" data-ratio="53.86" data-b-token="b-40c430ccb13" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630e32933e11e.png?itok=8Tzd7ihi" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="453" height="244" typeof="foaf:Image" /></div></div> <p>          Una vez creada nuestra clase controller con el nombre <strong>ListadoNoticiasController.php</strong>, dentro tendremos la siguiente estructura de código.</p> <pre> &lt;?php namespace Drupal\listado_noticias\Controller; use Drupal\Core\Controller\ControllerBase; class ListadoNoticiasController extends ControllerBase { public function page(){ $items = [ ['title' =&gt; 'Noticia 1'], ['title' =&gt; 'Noticia 2'], ['title' =&gt; 'Noticia 3'], ['title' =&gt; 'Noticia 4'], ]; return [ '#theme' =&gt; 'listado_noticias', '#items' =&gt; $items, '#title' =&gt; 'Listado de noticias' ]; } } </pre> <p>          El primer array, es un array de objetos, ya que cada noticia podrá tener tantos elementos como queramos especificar, para este ejemplo, sólo añadiremos el título, pero puedes añadir tantos como necesites, siempre tomando en cuenta la estructura ( "clave" =&gt; "valor" ), ya que los objetos, en realidad también son arrays.</p> <pre> $items = [ ['title' =&gt; 'Noticia 1'], ['title' =&gt; 'Noticia 2'], ['title' =&gt; 'Noticia 3'], ['title' =&gt; 'Noticia 4'], ];</pre> <p>          El segundo array, que tendremos dentro de nuestro método "page()", es el que nos devolverá nuestro método al llamarlo, contendrá los parámetros necesarios para renderizar los datos recibidos desde la <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>, y que harán posible la impresión en pantalla, de nuestros contenidos en formato de una página, al activar el módulo.</p> <p>          En el primer parámetro del array, estamos llamando a nuestra función tema, que configuramos usando la <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>, el segundo parámetro son los items, que hemos definido como una de las variables que pasamos y el último, será el título de la página, que también definimos mediante la función.</p> <p>          Esto hará posible, que posteriormente podamos recorrer el primer array de items y mostrarlos en la plantilla correspondiente, que todavía no hemos creado. </p> <pre> return [ '#theme' =&gt; 'listado_noticias', '#items' =&gt; $items, '#title' =&gt; 'Listado de noticias' ]; </pre> <h3>     Paso 4 Creación de la ruta para acceder a la página renderizada:</h3> <p>          Una vez terminada la configuración de los datos que vamos a presentar en nuestra página, al invocar el método "page()", necesitaremos un modo de acceso, mediante url, para que podamos acceder a esta página y ver sus datos.</p> <p>          En esta tarea nos ayudará el archivo <strong>listado_noticias.routing.yml </strong>, dentro de este archivo vamos a definir la url hacia nuestra página, el namespace para que drupal pueda encontrar en nuestro controlador el método que mostrará los datos y finalmente los permisos asociados a nuestro contenido, que serán los permisos por defecto, para que cualquier usuario que entre a la web, pueda verlo sin problemas.</p> <p>          Es muy importante respetar los espacios al escribir los datos dentro del archivo rounting, se recomienda evitar la tecla tab para hacerlo y en su lugar, es mejor la barra espaciadora del teclado, contando con dos espacios a cada nueva línea que vayamos añadiendo.</p> <pre> listado_noticias.listado: path: '/listado-noticias' defaults: _controller: '\Drupal\listado_noticias\Controller\ListadoNoticiasController::page' requirements: _permission: 'access content' </pre> <h3>     Paso 5 Creación de la plantilla:</h3> <p>          La última fase de este desarrollo, antes de activar el módulo, será la creación de nuestra plantilla, para dar formato a la presentación de los datos, una vez activado nuestro módulo.</p> <p>          Para los nombres de las plantilla, se debe utilizar el guión medio "-", en lugar del guión bajo "_", y el nombre que debemos utilizar será el mismo de nuestra función tema, que hemos declarado en el <a href="https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/9.0.x">function hook_theme</a>.</p> <p>          Por lo tanto, el nombre que tendremos que utilizar en este ejemplo será <strong>"listado-noticias.html.twig", </strong>además, colocaremos nuestras plantillas dentro de una carpeta llamada templates, siguiendo con la estructura habitual de drupal para todos sus módulos.</p> <p>          Ahora que ya tenemos la plantilla creada, sólo resta imprimir los valores usando las dobles llaves, ej.: {{ title }} y en el caso de las noticias, crearemos un "ciclo for", para poder recorrer el array de items y acceder a todos sus datos relacionados.</p> <pre> &lt;h3&gt;{{ title }}&lt;/h3&gt; &lt;ul&gt; {% for noticia in items %} &lt;li&gt;{{ noticia.title }}&lt;/li&gt; {% endfor %} &lt;/ul&gt;</pre> <p>          Ya podemos activar nuestro módulo y luego al acceder a la url que hemos definido dentro del archivo  <strong>listado_noticias.routing.yml, </strong>veremos nuestra página con todos los datos que habíamos configurado.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 74.31%;" data-ratio="74.31" data-b-token="b-bdf6446405c" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630e32bf26b6f.png?itok=als3a_wd" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="483" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Sáb, 18/03/2023 - 23:12</span> Sat, 18 Mar 2023 22:12:00 +0000 webmaster 408 at https://drupaladicto.com Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2) https://drupaladicto.com/curso/drupal-headless-vuejs/drupal-headless-con-nuxtjs-conectando-con-drupal-parte-2 <span class="field field--name-title field--type-string field--label-hidden">Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-898 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-898 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-898 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-898"> <section id="video-only-898" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-618-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-618-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-618-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/tI8jt0QnVXc&amp;max_width=0&amp;max_height=0&amp;hash=y-ySyKOjg1305z0_VOUg2A2RKCOdmYVgVoM-DQme9xc" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-618-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1198" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/tI8jt0QnVXc" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>      Ya que hemos aprendido cómo configurar Contenta CMS de Drupal, para que pueda escuchar nuestra API de Nuxt.js, es el momento de hacer lo mismo desde el otro lado.</p> <h2>   Paso 2 - Configuración de Nuxt.js</h2> <p>     Para obtener datos de la aplicación nuxtapp, usaremos la biblioteca de javascript axios y, específicamente, usaremos la biblioteca axios creada para Nuxt: @nuxt/axios. Si eres desarrollador de PHP, puedes pensar en axios como el Guzzle del mundo de JavaScript. En la <a href="/curso/conectando-nuxtjs-con-drupal-9-parte-1" target="_blank">Parte 1</a> de este artículo, cuando instalamos la aplicación mynuxt, extrajimos la biblioteca axios.</p> <h3>   Configuración Variables de entorno ( .env)</h3> <p>  Si queremos conectar <em><strong>nuxtapp</strong></em> con el backend de <em><strong>contenta-drupal</strong></em>, primero tendremos que informarle acerca de algunas variables de entorno, así sabrá hacia dónde podrá realizar las peticiones de datos que quiere obtener.</p> <p>  Dentro de nuestra aplicación <em><strong>nuxtapp</strong></em>, crearemos un archivo con el nombre <em><strong>.env </strong></em>y dentro pegaremos el siguiente código:</p> <pre> APP_ENV=lando API_URL=http://contenta-drupal.lndo.site/ CONSUMER_ID={{ Copiaremos aquí el ID Consumer de Drupal en //admin/con</pre> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 21.94%;" data-ratio="21.94" data-b-token="b-6125bee8493" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037c9ee4936.jpg?itok=oqZ5RJP4" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="556" height="122" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 57.63%;" data-ratio="57.63" data-b-token="b-728dd0a4f78" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037cb756883.jpg?itok=_g86g0Lr" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="472" height="272" typeof="foaf:Image" /></div></div> <p>   Después de agregar este archivo, deberá reconstruir la aplicación nuxtapp,  para cargar las variables de entorno en los contenedores de la aplicación; para ello, colocados en la carpeta de nuestrra aplicación de Nuxt.js, ejecutaremos el siguiente comando:</p> <pre> lando rebuild</pre> <h3>Configuración de axios ( nuxt.config.js )</h3> <p>   A pesar de que hemos seleccionado la opción <em><strong>Axios</strong></em>, en el momento de realizar la descarga de las dependencias para nuxtapp, si abrimos el archivo de configuración, en el apartado de móldulos, sólo vemos <em><strong>bootstrap-vue/nuxt</strong></em>, al igual que si exploramos la carpeta <em><strong>node_modules</strong></em>, por lo tanto tendremos que <a href="https://axios.nuxtjs.org/setup">descargar axios</a> y luego añadirlo en el listado de módulos dentro del archivo <em><strong>nuxt.config.js</strong></em>.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 51.16%;" data-ratio="51.16" data-b-token="b-773f5e9565e" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037cf8f07df.png?itok=Uyb0jhIm" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="559" height="286" typeof="foaf:Image" /></div></div> <p>Para ello, nos aseguraremos de estar en la carpeta <em><strong>nuxtapp</strong></em> y ejecutaremos el siguiente comando para que se descarguen los archivos de axios:</p> <pre cb=""> <code cb="">lando yarn add @nuxtjs/axios</code></pre> <p><code cb=""> </code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 56.15%;" data-ratio="56.15" data-b-token="b-b908a78a34f" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037d1d3d095.png?itok=EYJvGcK-" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="577" height="324" typeof="foaf:Image" /></div></div> </code></p> <p><code cb="">   Una vez descargado, abriremos el archivo de configuración de Nuxt.js llamado <em><strong>nuxt.config.js</strong></em> y en el apartado de módulos, sutituiremos el código actual por el siguiente:</code></p> <pre> <code cb=""> // Modules: https://go.nuxtjs.dev/config-modules modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', // https://go.nuxtjs.dev/bootstrap 'bootstrap-vue/nuxt', ], /* ** Axios module configuration */ axios: { // See https://github.com/nuxt-community/axios-module#options debug: process.env.APP_ENV !== "production" },</code></pre> <p><code cb="">   Para ver todas las opciones disponibles puedes leer la URL en el comentario. Para nuestros propósitos, activaremos la depuración con la advertencia de que nuestro APP_ENV no es producción.</code></p> <h3><code cb="">   Configuración de la ( baseURL )</code></h3> <p><code cb="">     También en el archivo <em><strong>nuxt.config.js</strong></em>, agregaremos un bloque de código <em><strong>env</strong></em> para configurar la baseURL que indica a <em><strong>axios</strong></em> dónde realizar las llamadas API a Contenta. En la parte inferior del archivo, después de la sección <em><strong>build</strong></em>, agregue las siguientes líneas:</code></p> <pre> <code cb=""> // Build Configuration: https://go.nuxtjs.dev/config-build build: { }, env: { baseURL: process.env.API_URL, CONSUMER_ID: process.env.CONSUMER_ID }</code></pre> <p><code cb="">      Después de realizar cambios en los archivos <em><strong>.env</strong></em> o <em><strong>nuxt.config.js</strong></em>, deberá reconstruir la aplicación Lando <em><strong>lando rebuild -y</strong></em> para permitir que la aplicación <em><strong>nuxtapp</strong></em> cargue esos cambios.</code></p> <pre> <code cb=""> lando rebuild -y</code></pre> <p><code cb="">   ¡Eso configura nuestra configuración de axios para que ahora podamos realizar solicitudes desde nuestra aplicación mynuxt de regreso a Contenta <em><strong>nuxtapp</strong></em>!</code></p> <h3><code cb="">   Hacer una llamada a la API</code></h3> <p><code cb="">     Hagamos una ruta de página llamada <em><strong>posts</strong></em> con un archivo<em><strong> index.vue</strong></em> para volver a consultar a Contenta en busca de una publicación. Agregué un tipo de contenido a Contenta con el nombre de la máquina <em><strong>post</strong></em> y consultaré el endpoint <em><strong>/api/node/post/{uuid}</strong></em> para los datos json.</code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 90.7%;" data-ratio="90.7" data-b-token="b-17c1f6242bc" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037d3f96191.png?itok=7ybKe9f3" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="559" height="507" typeof="foaf:Image" /></div></div> </code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 88.57%;" data-ratio="88.57" data-b-token="b-af678aaf7be" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037d5c06823.png?itok=lY4jleIn" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="315" height="279" typeof="foaf:Image" /></div></div> </code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 58.4%;" data-ratio="58.4" data-b-token="b-682f716f981" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037d71a0f88.png?itok=8zQl8kfO" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="589" height="344" typeof="foaf:Image" /></div></div> </code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 33.83%;" data-ratio="33.83" data-b-token="b-fb1cb3330c4" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037d85630da.png?itok=MJuBczPQ" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="535" height="181" typeof="foaf:Image" /></div></div> </code></p> <p><code cb="">   En Nuxt hay un directorio <em><strong>pages</strong></em> y todo lo que pongas en él, Nuxt creará automáticamente rutas Vue para nosotros. En este caso, crearemos un directorio <em><strong>posts</strong></em> dentro del directorio de páginas:</code></p> <pre> <code cb=""> sudo mkdir pages/posts</code></pre> <p><code cb="">   Entonces deberías terminar con una estructura de directorios como esta:</code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 94.14%;" data-ratio="94.14" data-b-token="b-b9e651e96f1" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037d9f89ca6.png?itok=_XidhCWs" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="273" height="257" typeof="foaf:Image" /></div></div> </code></p> <p><code cb="">   Observe la estructura del archivo <em><strong>pages/posts/index.vue</strong></em>. Tiene tres secciones: <em><strong>&lt;template&gt;</strong></em>, <em><strong>&lt;script&gt;</strong></em> y <em><strong>&lt;style&gt;</strong></em>. Como probablemente pueda adivinar, la sección <em><strong>&lt;template&gt;</strong></em> contendrá nuestro html, <em><strong>&lt;script&gt;</strong></em> contendrá nuestro javascript y <em><strong>&lt;style&gt;</strong></em> contendrá nuestro css.</code></p> <p><code cb="">   Ahora añadiremos algunos datos para nuestra plantilla. En la sección <em><strong>&lt;script&gt;</strong></em> de <em><strong>pages/posts/index.vue</strong></em>, agreguemos una función <em><strong>data()</strong></em> para que la plantilla sepa qué datos esperamos. En este caso, nuestro tipo de contenido <em><strong>posts</strong></em> consta de los campos <em><strong>title</strong></em> y <em><strong>body. </strong></em>Abriremos <em><strong>pages/posts/index.vue</strong></em> en nuestro editor de código. En la sección <em><strong>&lt;scripts&gt;</strong></em> y a continuación, agregaremos la función <em><strong>data()</strong></em>:</code></p> <pre> <code cb=""> &lt;template&gt; &lt;section class="container"&gt; &lt;/section&gt; &lt;/template&gt; &lt;script&gt; export default { components: {}, data() { return { title: "PLACEHOLDER TITLE", body: "PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT" } } } &lt;/script&gt; &lt;style scoped&gt; &lt;/style&gt;</code></pre> <p><code cb="">   Ahora nuestra sección<em><strong>&lt;template&gt;</strong></em> tiene acceso a <em><strong>data()</strong></em> y podemos comenzar a construir nuestra plantilla. Agregue a la sección de su plantilla referencias a los marcadores de posición para el <em><strong>title</strong></em> y el <em><strong>body</strong></em>:</code></p> <pre> <code cb=""> &lt;template&gt; &lt;b-container&gt; &lt;b-row&gt; &lt;b-col xl="12"&gt; &lt;h1&gt;{{ title }}&lt;/h1&gt; &lt;/b-col&gt; &lt;/b-row&gt; &lt;b-row&gt; &lt;b-col&gt; &lt;div class="posts__body" v-html="body" /&gt; &lt;/b-col&gt; &lt;/b-row&gt; &lt;/b-container&gt; &lt;/template&gt; &lt;script&gt; export default { components: {}, data() { return { title: 'PLACEHOLDER TITLE', body: 'PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT' } } } &lt;/script&gt; &lt;style scoped&gt; &lt;/style&gt;</code></pre> <p><code cb="">     En la línea 5, hemos hecho referencia a la clave <em><strong>title</strong></em> de nuestra función <em><strong>data()</strong></em> y hemos representado el contenido del marcador de posición predeterminado en nuestra plantilla. De manera similar, en la línea 12 hemos hecho referencia a la propiedad <em><strong>body,</strong></em> esta vez en una directiva vue <em><strong>v-html</strong></em>. Hemos usado <em><strong>v-html</strong></em> para demostrar el paso de datos que pueden contener html. Podríamos haberlo referenciado de la misma manera que hicimos referencia al título.</code></p> <p><code cb="">     Si ahora visitamos la url de nuestra aplicación: <em><strong>http://nuxtapp.lndo.site/posts</strong></em> deberíamos ver un resultado como el siguiente:</code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 32.26%;" data-ratio="32.26" data-b-token="b-d8ff468a515" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037dc06b473.png?itok=OjoaLXNR" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="620" height="200" typeof="foaf:Image" /></div></div> </code></p> <p><code cb="">Ahora reemplacemos los datos del marcador de posición con datos reales de <em><strong>contenta-drupal</strong></em>.</code></p> <p><code cb="">   Dentro de la sección <em><strong>&lt;script&gt;</strong></em> agregaremos una nueva función llamada asyncData que devolverá la llamada a nuestra aplicación <em><strong>contenta-drupal </strong></em>con llamadas <em><strong>asyncData</strong></em> y obtendremos los datos e intercambiará los datos del marcador de posición con datos reales.</code></p> <pre> <code cb=""> &lt;template&gt; &lt;b-container&gt; &lt;b-row&gt; &lt;b-col xl="12"&gt; &lt;h1&gt;{{ title }}&lt;/h1&gt; &lt;/b-col&gt; &lt;/b-row&gt; &lt;b-row&gt; &lt;b-col&gt; &lt;div class="posts__body" v-html="body" /&gt; &lt;/b-col&gt; &lt;/b-row&gt; &lt;/b-container&gt; &lt;/template&gt; &lt;script&gt; export default { components: {}, async asyncData({app}) { const data = await app.$axios .get('/api/node/post/c6b24529-0d69-4cbb-a966-ab2d6ac5a59b', {}) .then(res =&gt; { console.log(res) return { title: res.data.data.attributes.title, body: res.data.data.attributes.body.value } }) .catch(err =&gt; { if (err) { return err } }) return data } } &lt;/script&gt; &lt;style scoped&gt; &lt;/style&gt; </code></pre> <p><code cb="">   Aquí, en la línea 22, hemos cambiado la función <em><strong>data()</strong></em> por <em><strong>asyncData()</strong></em>. La función <em><strong>asyncData</strong></em> se pasa en el contexto de la aplicación que tiene acceso al objeto <em><strong>$axios</strong></em> a través del trabajo que hicimos en los archivos <em><strong>.env</strong></em> y <em><strong>nuxt.config.js</strong></em>. Usamos este objeto <em><strong>$axios</strong></em> para realizar una solicitud GET de regreso a <em><strong>contenta-drupal</strong></em> y obtener el nodo de publicación con uuid=c6b24529-0d69-4cbb-a966-ab2d6ac5a59b en este ejemplo que uuid está codificado para una publicación específica.</code></p> <p><code cb=""><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 48.46%;" data-ratio="48.46" data-b-token="b-985a5c6af38" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037de251d04.png?itok=11Cj8m2E" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="315" typeof="foaf:Image" /></div></div> </code></p> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Jue, 16/03/2023 - 12:01</span> Thu, 16 Mar 2023 11:01:56 +0000 webmaster 382 at https://drupaladicto.com Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1) https://drupaladicto.com/curso/drupal-headless-vuejs/drupal-headless-con-nuxtjs-conectando-con-drupal-parte-1 <span class="field field--name-title field--type-string field--label-hidden">Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-897 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-897 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-897 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-897"> <section id="video-only-897" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-617-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-617-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-617-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/weZZ9rQD1iw&amp;max_width=0&amp;max_height=0&amp;hash=4ooreB33p6wHkH2Zsy1_Qo0KPuGBfW8ftZX1AdUHVCs" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-617-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1197" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/weZZ9rQD1iw" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>     Ahora que hemos aprendido a instalar y configurar, utilizando Lando, una aplicación con Nuxt.js y la distribución optimizada para el sistema headless de Drupal 9, llamada Contenta CMS; es el momento de pasar a la siguiente fase, en la que conectaremos ambas aplicaciones para mostrar los datos servidos desde Drupal, en nuestra aplicación de Nuxt.js.</p> <h2>   Paso 1 - Configuración de Contenta CMS</h2> <p>     Como podrás ver en el capítulo sobre <a href="https://www.drupaladicto.com/curso/simple-oauth">Simple OAuth</a>, para que Drupal pueda escuchar las peticiones desde la API; primero tendremos que configurar tres partes, que nos permitirán realizar esa conexión:</p> <ul><li> <h3>Rol para la API:</h3>      La idea es crear un rol, al que le otorgaremos los permisos para relizar las conexiones con la API. Para ello, nos iremos a la url "/admin/people/roles" y allí, añadiremos un nuevo Rol, al que llamaremos <em><strong>vue_role, </strong></em>haciendo clic en el botón de añadir nuevo rol.<br />      Recuerda que Contenta CMS, es un Drupal "vitaminado", por lo que hay ciertas diferencias si queremos acceder a las secciones a través del menú de administración. En este caso, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Role, para encontrar el botón de <strong>Add Rol</strong>.</li> </ul><p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 31.08%;" data-ratio="31.08" data-b-token="b-ca82cf39fb4" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037a39a92d2.jpg?itok=pFXX5_Bt" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="202" typeof="foaf:Image" /></div></div> <h3>Configurar un usuario de API</h3> <p>     Lo siguiente que haremos es, después de haber creado el rol para nuestra API, tendremos que crear un nuevo usuario, al que le añadiremos el  <em><strong>vue_role</strong></em> que<em><strong> </strong></em>acabamos de crear, para esta operación, podremos ir a la url "/admin/people" o si preferimos hacerlo por el menú, al igual que en caso anterior, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Users, para encontrar el botón de <strong>Add user</strong>.<br />      En este caso, una vez hagamos clic en el botón para añadir a nuestro usuario, completaremos los campos necesarios como con cualquier otro usuario, le pondremos el nombre de usuario <strong>vue_user</strong>, y a continuación marcaremos el rol <em><strong>vue_role.</strong></em></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 96.1%;" data-ratio="96.1" data-b-token="b-7eea740f374" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037a6a8aace.png?itok=nZ3FtLEx" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="282" height="271" typeof="foaf:Image" /></div></div> <h3>Configurar un consumidor</h3> <p>   El último eslabón de esta cadena de requermientos será el <strong>Consumer</strong>, que será quien nos permitirá realizar la conexión entre Contenta CMS y la API de Nuxt.js. Para ello, iremos a la url "<em><strong>/admin/config/services/consumer</strong></em>".<br />    O también podremos acceder a través del menú de administración, esta vez, tal y como lo haríamos desde un Drupal normal y corriente.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 78.76%;" data-ratio="78.76" data-b-token="b-670bec31497" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037a8c395cf.jpg?itok=pgvVSREb" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="466" height="367" typeof="foaf:Image" /></div></div> <p>   Esta vez, al hacer clic en el botón de Add Consumer, nos aseguraremos de rellenar los campos del formulario con el nombre <em><strong>vue_consumer</strong></em>, para el Consumer, el usuario será <em><strong>vue_user</strong></em> y el rol será <em><strong>vue_role</strong></em>. Asegúrate de aprenderte o dejar apuntado el <em><strong>New Secret</strong></em>, porque será la clave que necesitarás en caso de conectarme con el Consumer, en algunos Headless, como por ejemplo, con <em><strong>Gatsby</strong></em>.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 128.11%;" data-ratio="128.11" data-b-token="b-0fe07629c66" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-63037ab10e9a0.jpg?itok=xdq8Q6kA" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="466" height="597" typeof="foaf:Image" /></div></div> <p>Fantástico, una vez rellenado el formulario, haz clic en guardar para concluir la configuración de nuestra API Drupal Contenta CMS.<br /> A continuación, vamos a configurar la otra parte de este proyecto, o sea, nuestra aplicación de Nuxt.js.</p> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Jue, 16/03/2023 - 11:57</span> Thu, 16 Mar 2023 10:57:00 +0000 webmaster 381 at https://drupaladicto.com Drupal 9 Headless con Vue.js | Requerimientos https://drupaladicto.com/curso/drupal-headless-vuejs/drupal-9-headless-con-vuejs-requerimientos <span class="field field--name-title field--type-string field--label-hidden">Drupal 9 Headless con Vue.js | Requerimientos</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     Para poder realizar este curso, será necesario cumplir previamente con varios de los requerimientos de instalación del proyecto; estos son:</p> <ol><li>Tener instalado y funcionando un proyecto Drupal. <a href="/actualidad/instalar-drupal-9-en-ubuntu-2004-con-lando-y-wsl2-en-windows-11" target="_blank">HAZ CLIC AQUI</a><br />  </li> <li>Tener conocimientos básicos de Nuxtjs, para realizar el curso <a href="/curso/curso-intensivo-nuxtjs" target="_blank">HAZ CLIC AQUI</a><br />  </li> <li>Descargar, activar y configurar el módulo de autenticación Simple Oauth. <a href="/curso/webservices/simple-oauth" target="_blank">HAZ CLIC AQUI</a></li> </ol><p>     Una vez hayas completado estos requermientos, podrás continuar con el resto del curso siguiendo los pasos de los siguientes capítulos.</p> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Jue, 09/03/2023 - 17:52</span> Thu, 09 Mar 2023 16:52:00 +0000 webmaster 361 at https://drupaladicto.com Drupal 9 Headless con Vue.js | Presentación https://drupaladicto.com/curso/drupal-headless-vuejs/drupal-9-headless-con-vuejs-presentacion <span class="field field--name-title field--type-string field--label-hidden">Drupal 9 Headless con Vue.js | Presentación</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-886 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-886 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-886 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-886"> <section id="video-only-886" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-606-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-606-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-606-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/qE_mf3mkXNg&amp;max_width=0&amp;max_height=0&amp;hash=iWHGfa2xjq1IYEBqRUSaAzT6o64wDyLHiz2_yCxeupY" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-606-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/qE_mf3mkXNg" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>     Al final de este curso, tendrás los conocimientos básicos para instalar un proyecto desacoplado (Headless), utilizando Nuxt.js para el frontend o presentación de tus datos, extraídos desde Drupal 9, que se encargará del backend.</p> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Jue, 09/03/2023 - 17:39</span> Thu, 09 Mar 2023 16:39:40 +0000 webmaster 359 at https://drupaladicto.com Drupal 9 Headless con Vue.js en Windows 11 https://drupaladicto.com/curso/drupal-9-headless-con-vuejs-en-windows-11-resumen <span class="field field--name-title field--type-string field--label-hidden">Drupal 9 Headless con Vue.js en Windows 11 </span> <div class="field field--name-field-portada-ce field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"><svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 650 650"> <rect y="0" width="650" height="650" style="fill:#054065; stroke:#1d1d1b; stroke-miterlimit:10;"></rect> <text transform="translate(183.61 309.27)" style="fill:#fff; font-family:Montserrat-Light, Montserrat; font-size:99.05px; font-weight:300;"> <tspan x="0" y="0" style="letter-spacing:-.02em;">C</tspan> <tspan x="69.04" y="0">u</tspan> <tspan x="135.3" y="0" style="letter-spacing:0em;">r</tspan> <tspan x="174.03" y="0">so</tspan> <tspan x="-58.14" y="90">G</tspan> <tspan x="18.42" y="90" style="letter-spacing:-.05em;">r</tspan> <tspan x="52.69" y="90">atui</tspan> <tspan x="241.97" y="90" style="letter-spacing:-.02em;">t</tspan> <tspan x="279.51" y="90">o</tspan> </text> </svg></div> </div> </article> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Jue, 09/03/2023 - 17:34</span> <div class="clearfix text-formatted field field--name-field-descripcion-ce field--type-text-long field--label-hidden field__item"><p>En este curso, explicaremos los conceptos básicos para que puedas instalar en local, un Drupal Headless usando el Framework de javascript Nuxt.js, como de costubre, trabajaremos con LANDO, WSL2 en Windows 11</p> </div> <div class="field field--name-field-tipo-ce field--type-list-string field--label-hidden field__item">Curso Gratuito</div> <div class="field field--name-field-suscribete-youtube field--type-link field--label-hidden field__item"><a href="https://www.youtube.com/drupaladicto">Suscríbete al canal</a></div> <div class="field field--name-field-categoria-ce field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/categoria/json" hreflang="es">json</a></div> <div class="field__item"><a href="/categoria/api" hreflang="es">api</a></div> <div class="field__item"><a href="/categoria/json-api" hreflang="es">json api</a></div> <div class="field__item"><a href="/categoria/headless" hreflang="es">headless</a></div> <div class="field__item"><a href="/categoria/gatsby" hreflang="es">gatsby</a></div> <div class="field__item"><a href="/categoria/code" hreflang="es">code</a></div> <div class="field__item"><a href="/categoria/codigo" hreflang="es">código</a></div> <div class="field__item"><a href="/categoria/codigos" hreflang="es">códigos</a></div> <div class="field__item"><a href="/categoria/script" hreflang="es">script</a></div> <div class="field__item"><a href="/categoria/servicios-web" hreflang="es">servicios web</a></div> <div class="field__item"><a href="/categoria/web-services" hreflang="es">web services</a></div> <div class="field__item"><a href="/categoria/programacion" hreflang="es">programacion</a></div> <div class="field__item"><a href="/categoria/javascript" hreflang="es">javascript</a></div> <div class="field__item"><a href="/categoria/authentication" hreflang="es">authentication</a></div> <div class="field__item"><a href="/categoria/autenticacion" hreflang="es">autenticación</a></div> <div class="field__item"><a href="/categoria/usuarios" hreflang="es">usuarios</a></div> <div class="field__item"><a href="/categoria/users" hreflang="es">users</a></div> <div class="field__item"><a href="/categoria/frontend" hreflang="es">frontend</a></div> </div> <div class="field field--name-field-comenzar-curso field--type-string field--label-hidden field__item">/drupal-9-headless-con-vuejs-en-windows-11</div> Thu, 09 Mar 2023 16:34:14 +0000 webmaster 357 at https://drupaladicto.com