 Muy buenas tardes, bienvenidos a nuestra charla y vamos a hablar un poco de AngularJS y Drupal igual un dúo suprinámico. Yo soy ProLac, él es Algoos Bass, mi nombre es Alfredo Bonilla, él es mi compañero Dani, nosotros somos trabajamos juntos en other spacecores que es una empresa de desarrollo enfocada en Drupal y somos de Costa Rica, pura vida. Vamos a empezar hablando un poco sobre qué es Herles Drupal, qué es el concepto, ¿cuál es la idea detrás de esto? Herles Drupal básicamente es Drupal sin su sistema de frontend, es decir sin los templates y sin las herramientas frontend que normalmente utilizamos. Entonces básicamente la idea o el concepto que está detrás de Herles Drupal es utilizar Drupal como backend y otra aplicación, llámese una aplicación JavaScript, una aplicación para teléfono o cualquier otro tipo de aplicación como frontend. Entonces podemos decir que incluso Drupal podría ser un Herles Drupal, basados en este concepto, estamos utilizando el core de Drupal, pero no específicamente desde el navegador con la interfaz de Drupal o con el tema de Drupal que está instalado. Herles Drupal realmente no es tan nuevo, desde el 2013 se viene trabajando un poco el concepto y últimamente ha tenido auge gracias a las mejoras que tiene Drupal 8 en cuanto al servidor REST. Sin embargo podemos decir que Herles Drupal no es la nueva manera de hacer Drupal, es una de ellas y por lo tanto como todo el mundo no es la solución a todo y de hecho es la solución a ciertos problemas específicos pero es una de tantas soluciones. Tenemos varias ventajas, la primera es que tenemos un mayor control sobre el frontend, eso quiere decir que podemos aprovechar los recursos que tengamos para nuestro frontend, las tecnologías que están disponibles, como vamos a crear una aplicación frontend desde cero, entonces tenemos el control de toda la lógica de esta aplicación, nuestras propias funciones y demás podemos elegir el framework que queramos, podemos elegir el sistema por ejemplo nativo, ya sea Android, iOS. Nos permite utilizar tecnologías de frontend de vanguardia, eso quiere decir que si hoy apareció un nuevo framework de JavaScript muy moderno con un montón de funcionalidad que nos encanta podemos incluir en el proyecto. Este es el caso que vamos a comentar hoy que es enfocado a AngularJS pero la ventaja radica en que no vamos a estar casados únicamente con una manera de hacer frontend sino que nosotros podemos elegir. Luego, nos permite utilizar Drupal con una parte del stack, que es esto, normalmente cuando tenemos un sitio Drupal, tenemos todo el stack, es decir desde la base de datos pasando por la lógica hasta llegar al frontend, todo es Drupal, ¿verdad? Si tuvieramos por ejemplo un Drupal que lo que hace es tener configurado servicios REST para enviar los datos como una aplicación, como datos como JSON que más adelante Daniel nos lo ha explicado un poco más, podríamos tener una aplicación Angular o un frontend escrito en JavaScript y utilizar Drupal solo como para cierta parte de nuestra aplicación, es decir, solo para ciertos datos y incluso podríamos mezclarlo con otras aplicaciones o otros APIs que provenen diferentes datos a la aplicación, entonces podríamos dejar Drupal solo como una parte de ellas. Y lo mejor de todo es que tenemos las ventajas y el poder que nos brinda Drupal para crear el modelado de contenido, llames a esto los content types, los campos y todo eso que nos permite modelar contenido de una manera muy cómoda y muy potente. A mí, realmente a mí me gusta ver las cosas desde un punto de vista de ventajas y ventajas porque muchas veces a uno le venden la idea de bueno, eso es nuevo, eso es un nuevo procedimiento muy bonito y todo bien, pero cuando ya vamos a la práctica pues hay cosas que no son tan bonitas, ¿verdad? Entonces, vamos a ver las dos caras de la moneda, ¿qué ventajas tiene esto? O aquí nos vamos a enfrentar si decidimos implementar este concepto en un proyecto. Bueno, lo primero es que al desacoplar el frontend de Drupal, vamos a perder toda la funcionalidad que ya Drupal tiene por defecto. Llames a esto las funciones de teaming, modulos como display suite, context, panels, las configuraciones de los bloques, ¿verdad? Todas estas maneras de organizar nuestro contenido y demostrarlo se van a perder, ¿verdad? Y muchas veces no queremos que eso suceda porque muchas veces este tipo de funcionalidad pues el cliente la necesita por la naturaleza del proyecto son básicas, entonces hay que tener en cuenta que si bien es cierto, vamos a adoptar gran control sobre el frontend, vamos a perder también por el lado de Drupal, ¿verdad? Una por otra. La otra es que tenemos que crear el modo de datos dos veces, ¿a qué me refiero con esto? Me refiero a que vamos a tener que crear content types, ¿verdad? de un lado y cuando creamos nuestra aplicación en Angular o en el framework que estamos utilizando, vamos a tener que ahí organizar nuestros campos hacia dónde vale información, ¿verdad? Porque la API me va a volver muy posiblemente a los campos de los content types pero vamos a tener que mapearlos en la aplicación. Entonces vamos a tener que escribir otra vez un modelo de datos apto para nuestra API de Drupal y eso conlleva trabajo. Por otro lado, necesitamos equipos de trabajo especializados para cada parte del stack. Es decir, si tenemos un equipo de trabajo de personas entrenada ya como Angular Developers o Frontend Senior, personas que ya tienen experiencia, pues todo bien. Podemos aprovechar más bien esa experiencia en una aplicación Frontend, ¿verdad? Pero si no, tenemos que tomar en cuenta que aparte de conseguir los Drupaleros o los Drupal Developers, vamos a tener que encontrar la gente especialista en el framework que utilizamos, ¿verdad? Y eso a veces no es tan fácil. Entonces, pues hay que poner toda una balanza, las cosas que tenemos, las cosas buenas que tenemos y también los problemas a los que nos vamos a enfrentar. En nuestro caso, pues nos enfocamos en AngularJS, ¿verdad? Porque nos gusta. Y básicamente, a partir de aquí, vamos a enfocar toda la charla en AngularJS. Entonces, ¿qué es AngularJS? AngularJS es un framework de JavaScript, de código abierto, basado en el modelo vista controlador, pero es un poco distinto. Ellos lo llaman como whatever works for you, que significa modelo vista lo que le funcione. En realidad, es como muy parecido al modelo vista controlador, pero sí con algunas diferencias. Nos ayuda a crear aplicaciones de front-end, ¿verdad? Al lado del cliente, enriquecidas y pues nos permite hacer muchas cosas. Ya tiene muchas cosas incluidas en el core, entonces vamos a tener que reescribir menos código y demás. ¿Por qué elegimos AngularJS? Bueno, tiene varios ventajas. En realidad, lo elegimos pensando en por qué nos gusta, y estas son unas de las razones por las cuales nos gusta. Primero, el two-data binding, que sería como en español el enlace de datos a dos vías, nos parece muy interesante porque, por ejemplo, si cambiamos un dato en el modelo, se va a reflejar en la vista y viceversa. Si algo cambia en la vista, también se va a cambiar en el modelo. Es como una conexión bastante fuerte entre la vista y el modelo datos. También tiene inyección de dependencias, que nos permite incluir instancias en nuestros controladores para agregar más funcionalidad. Básicamente, es como ir armando por pedazos las funcionalidades que queremos en nuestro controlador. Y la otra, que nos parece bastante importante, es que tiene un crecimiento muy acelerado en popularidad. Recientemente, las búsquedas en Google se han incrementado para Angular. Esto quiere decir que para el 2015, podemos ver aquí esta línea que tiene como un porcentaje las búsquedas de AngularJS comparado con Backbone, Ember y Knockout. Entonces, ¿cuál es la importancia de esto? Que nos va a ser más fácil encontrar documentación, tutoriales, opiniones de personas, problemas que ya están resueltos. Entonces, no vamos a perder tanto tiempo descifrando la magia del framework, sino que podemos ver lo que otras personas ya han aprendido. Y bueno, también tiene sus desventajas, como todo. Que sea de Google, queda la descripción de ustedes. No es un avantaje o una desventaja, ¿verdad? Pero, por lo menos, lo bueno de eso es que vamos a encontrar cosas fáciles utilizando Google, ¿verdad? Y no sabemos si ellos ayudan a que eso sea posible. Posiblemente sí. La primera desventaja que notamos es que tiene una curva aprendizada en Pina. Ya nosotros como grupaleros, pues, estamos acostumbrados a las curvas de aprendizada en Pina y sabemos que nos va a costar un poco al principio. Pero, como la comunidad está grande, entonces esto también nos ayuda a ir aprendiendo poco a poco. La documentación oficial no es tan amigable. Es decir, es buena, tiene detalles bastante amplios, pero para mi gusto no es como la más bonita que he visto. De hecho, hace poco me pareció leer que quitaron los comentarios públicos. También los da uno pensando porque muchas veces en los comentarios es donde encontramos mucha ayuda de los problemas que se resuelven a menudo, ¿verdad? Y, al final, páginas con demasiados elementos interactivos pueden volverse un poco lentas. Entonces, los expertos recomiendan no utilizar más de 2,000 bindings o enlaces en un mismo documento. Lo que les decía es la curva aprendizaje de Angular. No sé si recuerdan alguna vez la curva aprendizaje de Rupa 7 que era como una línea así demasiado alta que al final había un montón de muñequitos crucificados y ahorcándose. En AngularJS me encontré esta imagen que, en realidad, también pasó. Que al principio, uno dice, bueno, es genial. Después, no, esto, definitivamente no es lo mío. Uno va variando. Es muy cool. Porque, de buenas a primeras, se ve muy bien, pero ya cuando uno empieza a meterse poco a poco, se va viendo un poco complicado. Pero no es imposible. Con respecto a las buenas prácticas, vamos a verlas rápidamente porque ahora, Daniel, nos va a mostrar un poco de código y las van a poder ver más ampliamente. Pero, si queremos empezar una aplicación en Angular, tenemos que tener en cuenta utilizar las cosas de la manera correcta. Google, como tal, no nos da, tal vez, una receta así definida para utilizar Angular. Pero sí existen buenas prácticas y personas que hayan escrito sobre las buenas prácticas que se deben utilizar ahora, ahora, de escribir código en AngularJS. Por ejemplo, tener cuidado con la estructura de los archivos. Es muy fácil poner los archivos donde queramos, pero, si tenemos una aplicación muy complicada, se nos puede hacer un poco en red a la hora de buscar el código, de buscar dónde algo falló, verdad, y todo esto. Entonces, una de las recomendaciones que nosotros damos es utilizar Geoman, que nos permite generar una aplicación Angular ya con una estructura definida, y, en base a eso, empezar a organizar nuestros datos. Por ahí, Omar, aquí, va a estar trabajando en generador de Angular para Drupal. Entonces, en el futuro, vamos a tener todavía más ayuda en ese sentido. En segundo lugar, utilizar convenciones en nuestro código. Esto se parece mucho a los estándares de código de Drupal, verdad, y es la misma justificación. Es decir, si utilizamos estándares, nuestro código va a ser fácil de leer por otros desarrolladores, otro miembro del equipo, verdad, y esto es sumamente importante. Entonces, hay varias propuestas de la utilización de los estándares y las convenciones de nombres en Angular, y, bueno, este es uno de esos ejemplos que es popular, verdad, que es una guía de estándares para Angular, cómo nombrar los controladores, las directivas, los factores, y todos los demás conceptos de Angular. Para los que no saben nada Angular, bueno, ahora vamos a mencionar un poco los conceptos. Vamos a dar un curso Angular porque, verdad, nos tomaría, tal vez, un par de semanas, pero vamos a mencionar, por lo menos, los conceptos claves para que ustedes tengan una idea. Utilización de directivas. En Angular existe el concepto de directiva, que es, en palabras simples, crear nuestros propios elementos del DOM con una funcionalidad. Entonces, ¿qué es la ventaja de esto? Primero que todo, no tomaremos que modificar el DOM que existe como tal, sino que creamos ya un tag propio que trae nuestra funcionalidad, ¿verdad? Ahora vamos a ver un ejemplo. Pero lo bueno de esto es que nos permite, en lugar de modificar el DOM, crear nuestros propios elementos y, a la vez, aplicar pruebas unitarias a esos elementos en específico. Probar nuestra aplicación de mejor manera. Por último, otro consejo más es mantener los controladores lo más pequeños posibles. Es decir, en los proyectos que yo he trabajado con Angular, siempre trato, por ejemplo, de tener un controlador para una vista, verdad, sin mucha cosa. Y los controladores no van a tener, pues, no va a modificar la vista, también tampoco tratan los datos, los datos se tratan por aparte, en un servicio. Entonces, mantener los controladores lo más pequeños posibles. Vamos a empezar ya con el demo que tenemos preparado. Nada más decirles un poco, utilizamos Drupal 8.0.6, verdad que es, en este momento, la versión mayor siguiente de Drupal 8. Utilizamos el módulo RESTUI y utilizamos el módulo del core Drupal de Demos, verdad, muchas gracias por eso. Y yo le agregué por ahí unas líneas de código y es un pequeño patch, entonces pues pueden encontrarlo aquí. David va a estar trabajando en una versión más elegante, pero por el momento tenemos eso para mostrarlos. Bueno, buenas tardes. Muchas gracias por venir a la charla, para los que llegaron un toquisito tarde. Yo soy Dani, de acuerdo. Muchas gracias por venir, por ahí hacemos de Costa Rica. Yo voy a explicarles un poco sobre los, de manera práctica como integrar Angular en conjunto con Drupal, en este caso Drupal 8. Entonces, vamos a la obra. Lo primero que ocupamos, déjenme aquí, me acomodo nada más. Bueno, para empezar vamos a ir del lado de Drupal 8, para ver qué configuraciones tenemos que hacer en esta plataforma o qué podemos utilizar, porque realmente bueno, Drupal nos brinda diferentes maneras de hacer las cosas. Para este ejemplo utilizamos los módulos ResUI, que lo descargamos, lo instalamos y lo habilitamos. Utilizamos el módulo course, que mencionaba Alfredo anteriormente, que es una modificación de David y activamos todos nuestros módulos sobre web service para poder leer data desde Drupal. Ya cuando tenemos todos estos módulos habilitados, debemos de irnos a una configuración para poder habilitar los servicios que vamos a tener habilitados, valga la redundancia. Esto sería acá en web service rest. Para el ejemplo de, bueno, para este ejemplo habilitamos lo que es el content y el user. Para el user solo lo que vamos a utilizar es el método get y de ahí se puede habilitar otros métodos, por ejemplo el delete, el patch o el post. Para este ejemplo solo lo hicimos acá y habilitamos que los formatos fueran una autenticación basic out y que pueda leer los formatos de Hal Jason o de Jason. Lo mismo hicimos para los contenidos que habilitamos el get, el post, el delete, el patch igual con la misma configuración. Eso se puede hacer desde el edit. Ahí aparecen los checkbooks y lo pueden habilitar o deshabilitar. Y también hay que habilitar el módulo course, puesto que si vamos a hacer un request desde un aplicación A hacia una aplicación B y esa aplicación B no tiene los permisos necesarios para devolver la data hacia la aplicación A nos va a dar un problema de course. Entonces no se va a poder leer la data y nos va a dar un error. Bueno ya con eso podríamos formar data de modo Jason que el modo Jason es la forma en que Angular lee la información y la transmite hacia las vistas. Entonces vamos a hacer nuestro primer mini demo por así decirlo dentro del demo y vamos a ir explicando cómo ir formando ya lo que es el código Angular como tal. Bueno como mencionaba Alfredo anteriormente la estructura de los archivos es sumamente importante a la hora de realizar una aplicación Angular. ¿Esto por qué? Eso porque nos va a facilitar el saber dónde están los archivos en qué directores están los archivos y para qué sirven pues obviamente. Entonces para nuestro para nuestra aplicación bueno un index que de ahí es donde va a obtener la librerías Angular que uno las puede obtener de dos maneras. Las puede usar descargándola localmente en este en cualquier directorio o las puede utilizar a través del CDN de la aplicación AngularJS por lo general son sólo estas dos perdón ésta la primera ya con eso podemos empezar a utilizar la magia de AngularJS pero como Angular es un proyecto tan grande este mucha gente colabora con más librerías para poder extenderla entonces podemos dentro de las mismas sitio de AngularJS podemos encontrar más por así decirlo más librerías que lo que hacen es expandir la funcionalidad de Angular en este caso nos yo integré dos que es el AngularRoot para manejar las rutas de sobre Angular en la aplicación y el AngularAnimate que es para poder darle animaciones a nuestros a los elementos que estén dentro de la vista. Bueno utilicé toasterJS para también para darle más animación y vamos a agregar nuestros archivos de propios ya de Angular que ocuparíamos una aplicación si tenemos servicios pues obviamente los ponemos en la carpeta servicios tenemos directivas que eso es para ampliar el DOM ahorita lo vamos a ver y tenemos los controladores de primera librería y nuestra app que ya les pongo el código la manera de dar nomenclatura a nuestra aplicación va a ser un módulo es como una aplicación hay que ponerle un nombre y cuáles dependencias van a utilizar esa aplicación como tal en este caso se acuerdan que yo me bajé tres primeramente las vamos a poner en un array con ngroot, nganimate y toaster todo lo que tenga como prefijo ng va a ir relacionado a Angular eso lo vamos a ver ahorita en las vistas de la aplicación como les dije, yo utilicé ngroot para poder seguir mis rutas en la aplicación entonces vamos a hacer nuestro primer llamado cuando la ruta sea dashboard bueno el título de la página va a ser dashboard y vamos a utilizar un template que donde está ese template en Partials dashboard html entonces nos vamos a ir a Partials dashboard de la aplicación como les decía todo lo que tenga que ver con ng tiene que ver con con Angular entonces yo le estoy diciendo que aquí dentro de este deep yo voy a utilizar un controlador que se va a llamar dashboard controller de hecho esta es una nomencatura que nos recomienda que debemos hacer este para llevar un estándar ese dashboard controller obviamente va a estar dentro de la carpetada controller y dentro del dashboard js entonces que tiene ese controlador vamos a ver que tiene ese controlador es un controlador simple no es muy extenso y lleva el nombre y una función anónima que va a recibir parámetros sobre cargados para yo poder hacer uso de ese de esas variables dentro de mis funciones un detalle importante es que este scope es un por así decirlo es la variable que hace que el controlador y la vista estén en en sincronía exacto muchas gracias entonces es súper importante esa variable este otra cosa que nos decía Alfredo primeramente es que el controlador es simplemente un intermedio que hace que la data que recibamos este se le asigne a la variable scope en este caso y la muestra en la vista ve que aquí no estamos haciendo ningún riqueza a ningún lado puesto que eso se hace en un servicio pues entonces donde estarían los servicios aquí en data en mis service data yo voy a llamar a mis service data una función que llama get customers y voy a recibir una respuesta y simplemente esa respuesta se la envió al resultado si ahorita vamos a ver ya la magia en el view con los resultados que yo obtenga de donde sale esa data nos vamos a devolver un toquecito a Drupal 8 para que lo veamos como yo tengo habilitado todos los módulos del rest del service perdón ya yo puedo hacer diferentes cosas o ya sea llamarla URL directas crear vistas en este caso yo creo un tipo de contenido que se llamaba customer y lo vamos a ver por aquí yo me creo una vista que se llama rest customer de que tipo es un simple rest export entonces vamos a editarlo aquí un poquito para verlo y lo que les decía, esta vista me va a devolver en formato serializado voy a mostrar los fields dentro de los fields puedo hacerle llamarlo de diferente manera aquí en los alias para quitarle no se el prefijo field y poderlo recibir de allá de una manera más clara por así decirlo esta vista lo que me devuelve es formato JSON que de esa data es como lee AngularJS la data apaga la redundancia como les digo pueden hacerlo si habilitan dentro del rest y habilitan otros links para poder consumir data pues obviamente los va a devolver en este formato y ustedes van a poder utilizarlo en Angular ok entonces yo hice un llamado aquí en data que hice simplemente con el http.get que es una variable de Angular algo que me llamaba service base que en este caso yo lo tengo definido aquí más arriba que es mi local y consumo la resource si todo va bien me va a devolver la data de los resultados o sea el JSON que yo consumí haciendo aquella vista este se lo devuelve al controlador y el controlador gracias a su variable scope se lo se lo asignan resultados donde esta ese resultado este bueno vamos a verlo aquí que esta en el partial dashboard aquí más abajito entonces voy a utilizar una directiva de AngularJS que se llama NG repeat para los que programan es como un ciclo como un forage por así decirlo entonces voy a hacer cada resultado que estén resultados que fue la data que yo llamé desde Drupal 8 haga un ciclo por cada uno de ellos y voy a a imprimir esa data en una tabla como se hace eso se hace con llave llave result como era un array.firstname y tienen que cerrar también bueno las dos llaves que abrieron cada vez que ven esto esto es código AngularJS así por cada uno de los fields que tengo entonces vamos a verlo aquí vamos a verlo aquí funcionando sería mi dashboard ahí tengo tenía dos en la vista y me están me están mostrando los dos en la vista que más podemos hacerle a eso a esa data que proviene desde Drupal podemos ponerle filtros como se hacen los filtros simplemente al campo al campo que queremos aplicarle un filtro le aplicamos un pipe y en este caso yo apliqué un uppercase para que la data fuera en mayúscula o puedo ponerle un currency para ponerle algunas alguna un prefijo entonces si ustedes ven la data desde Drupal viene así limpia o sea no tiene ningún formato pero gracias a Angular le pudimos poner formatos como este que más podemos hacer con Angular podemos hacer operaciones entre sus campos por ejemplo este payments amount no viene dentro de la data que viene de Drupal pero es simplemente hacerle un payments por el fee y eso me va a devolver un resultado todo claro hasta ahí está bien este bueno estos son operaciones básicas por así decirlo son operaciones básicas que ya vienen propias de Angular vamos a vamos a hacer lo que lo de tu data binding para que lo podamos ver que vamos a hacer en este momento hicimos un input que está por aquí arriba tenemos este input que nos va a llamar al modelo search que está dentro del controlador este dashboard entonces aquí sin necesidad de hacer nada en el dashboard.js podemos decirle que este modelo se puede utilizar aquí un filtro que nos va a llamar a ese modelo o sea cuando yo escriba en el input él nos va a llamar a ese modelo y de una vez en el modelo nos va a llamar en los resultados nos va a hacer un search esa es la magia del tu data binding que realiza AngularJS y vamos a verlo ahorita yo escribiendo en el search él va a hacer una búsqueda dentro de todos los resultados que nos devolvieron y por ejemplo quiero saber cuáles tienen 50 pagos simplemente ya nos devolvió bueno en este caso soy yo o quiero saber cuáles terminan con osc.com bueno en este caso es Alfredo esa es otra de las personalidades que tiene Angular que la manipulación de la data es muy sencilla entonces nos permite hacer ciertas cosas que nos facilitan el desarrollo de aplicaciones no sé más interactivas para el cliente final por último bueno y ahora sí vamos a ver como hacer pegar el pegar el view perdón con el controlador ven este sort de aquí entonces simplemente que vamos a hacer le puse un ng click que obviamente es cuando le vemos click nos va a llamar a una función y le vamos a mandar que lo va a a ordenar por esta variable firstname si lo queremos hacer descendientemente tenemos que enviarle un menos adelante esta función está en el sort by que está aquí que es una función del scope entonces el recibe un item ese item se lo recibe al scope item selected y aquí en el dashboard aquí tengo un filtro ya que es order by y como pueden ver está utilizando el resultado de que yo asigné pasos anteriormente este y simplemente cuando de click aquí el lo va a ordenar descendiente o ascendentemente eso sería como el primer mini demo que traemos vamos a utilizar otro controlador cuál controlador el dashboard perdón el contact que simplemente es súper sencillo simplemente lo que va a hacer voy a cerrar por acá en este caso lo hicimos un poco diferente en nuestra aplicación este utilizamos que cuando sea contact bueno el título de la página va a ser contact va a ir a esta template URL y aquí le asignamos le podemos asignar el controlador ahí de una vez para no tener que ir hasta el hasta el dashboard perdón hasta el view para ponerlo ahí en este caso bueno vamos a utilizar el contact controller que obviamente va a estar aquí en el controlador contact recibo igual el nombre las variables sobrecargadas para poder utilizarlas voy a utilizar un service data que es get user info cuando ese info me me lo devuelva me devuelva la data simplemente voy a utilizar la respuesta para asignarle las variables al scope y poderlas utilizar en el view el get user info lo tengo aquí en data que sería este y para esto hay algunos trucos por ejemplo para poder recibir data del usuario 1 en este caso debemos enviarle por los encabezados debemos enviarle una utilización que sea básica ese es el user y el password de mi grupo al 8 esto es esta función btoa es codificar no encripta cualquiera podría obtener esa información en cualquier momento entonces hay que tener cuidado con eso estoy diciendo que la data que me devuelva sea JSON y estoy haciendo el request que me devuelva la data el user 1 si todo va bien este perdón si todo bueno si hace algo erróneo nos manda un error pero si todo va bien yo puedo devuelver mi data al controlador y que de ahí el controlador la asignale a la vista otra cosa que le decía Alfredo en el controlador casi nunca se manipula la información ahí simplemente se asigna entonces a mi no me servía la respuesta que me enviaba Rupal en este caso porque venía un poco alterada entonces yo lo que hice fue hacerme un parcedo de la data para que me quedara mejor y le metí los valores que me devolvía a Rupal retornó la data a mi controlador y el controlador simplemente lo que se encarga es de asignarle a las variables del scope para que lo muestre en en la vista en este caso simplemente es el ID el firstname y el email siempre con la nomenclatura respetando la nomenclatura angular y el resultado es este simplemente vengo vamos a cambiar aquí un toxito y listo estoy presentando la información vamos a explicar el create que es enviar data hasta hasta Rupal 8 explicando lo que va a hacer es crear un entity en Rupal 8 con la información de un nuevo customer y otra vez la misma la misma receta vengo a mi vengo a mi aplicación le digo que cuando creo que cuando quiero crear un o cuando me vaya la URL y create me asigno el título create me utilice este html y el controlador create controller nos vamos al al create que simplemente lo que hago es voy a recibir toda la información del customer que yo estoy creando lo estoy creando donde en el html create entonces bueno ok lo que les decía anteriormente cuando se manipula la vista altera de una vez el modelo y así es como conseguimos que lo que nosotros describamos se le asigne directamente al objeto customer en el first name o en el last name etcétera podemos también ampliar nuestro DOM utilizando directivas que es una de las cosas que me hace falta por explicar y como se hace eso simplemente creamos una directiva por aquí la tengo esta directiva que cuando el mail uno no matche con el mail 2 él tiene que mostrarme ir a buscar esta directiva donde se crea esa directiva email no match aquí en las directivas entonces igual se crea una directiva con el nombre con las funciones ciertas variables que va a utilizar la directiva se hace ciertas validaciones en este caso y si ambas no hacen match yo le al validador la directiva de que el email no matche ok esta es una forma de hacer la extensión al código del DOM con directivas tal vez eso no haya quedado muy claro pero por razones de tiempo no me puedo poner a explicar mucho tal vez después de la charla podemos conversar un rato y al final bueno cuando cuando yo le doy click a ese botón y si todo sale bien dentro llenado de la información yo mando a llamar a la función create que esta dentro de mi js que seria este controlador create igual recibo un objeto y mando a llamar a al servicio que es create customer que lo tengo por acá create customer recibo el objeto customer le enví igual a la data logiándome a adrupal 8 tengo que enviarle bueno la autorización y en este caso el content type lo vamos a mandar en un tipo que se llama halljason que tiene la siguiente nomenclatura bueno esta seria la data una variable links de cual tipo del tipo nodo, tipo customer que fue una entidad que yo cree bueno que esta create andrupal 8 le envio a sus campos el titulo, el lastname, el email, el telefono que lo estoy obteniendo desde el firstname y simplemente mando a llamar el servicio si todo sale bien perdón si todo sale mal me mando un error, si todo sale bien me va a hacer una redirección al dashboard y ya va a aparecer este un error creado vamos a hacer aquí un ejemplo lo que les decía si el email esta malo no va a ser match ven ahí otra cosa que podemos es importante que si enviamos data erronea hacia adrupal 8 nos va a rebotar con error y nos va a decir por ejemplo usted no puede utilizar letras en este campo este tipo entero o este campo que es de tipo email en adrupal 8 no puede ir de esta manera entonces va a dar un error hasta que nosotros enviemos data data correcta listo ahí enviamos el el request para crear un nuevo nodo en adrupal 8 y como pueden ver aquí ya lo creamos y lo estamos obteniendo directamente desde la vista ya creada utilizando como va aquí en adrupal 8 y eso serían los ejemplos bueno algunos recursos que tal vez les puedan servir que hay un par de tutoriales de como como hacer rest o configurar todo este rest en adrupal 8 también este este es otro parecido de eso en ciertas horas el explica muy bien como hacer pruebas con el con el navegador hacia adrupal 8 y como crear los servicios rest y la vista y todo esto que acabamos de hacer tal vez para que lo puedan ver con calma y probarlo en sus casas vamos a verlo ahí un momento esta es pues la aplicación o el ejemplo que utilizamos está en el GitHub de Dani al final voy a tener un link con la presentación si quieren verla y copiar estos links queremos hacer unos agradecimientos especiales a personas o con programadores contribuidores de la comunidad latina americana que nos de alguna o otra manera nos ayudaron a Dimas, David, que está por allá atrás a Enzo a Jesús a Juampy que fue el que creó el rest UI y a Omers que nos inspiró ahí con su con su charla de headless verdad muchas gracias a ellos que pudieron con al código para Drupal 8 también con la consola con esta consola se hizo el módulo del course que tenemos los invito a probarlas está muy buena y quiero hacer un comercial aprovechar su atención vamos a tener un Drupal Cam en Costa Rica que va a ser del 30 al 31 de julio el 29 vamos a tener talleres y el Cam la charlas como tal empiezan el 30 entonces va a ser en la universidad de Costa Rica que quedan todos cordialmente invitados llegan a Costa Rica y ahí la pasamos genial preguntas no se entendió nada entendieron todo si me llamó la atención en el ejemplo que mostras en donde le pasabas la autenticación en el encabezado obviamente no vimos ninguna página de signing dentro del ejemplo pero si quería tener mi pregunta esa Drupal obviamente debe suportar algún tipo de cookie o algo que nada más haga la autenticación una única vez y los siguientes los siguientes requests ya vengan y aceptan ese cookie y no tengo yo que andar enviando todos los requests la autenticación en el encabezado la pregunto así si lo aceptan pero en este momento no para versiones anteriores de Drupal 7 si existe eso que mencionas exacto exacto como digamos para la parte de autorización ya no es tanto de autenticación sino autorización donde en que parte de Drupal se le asigna a un endpoint de rest se le dice mira estos roles son los que tienen permisos a hacerle solicitudes a este y en estos métodos por ejemplo este nada más para hacer gete o post este para hacer lo que se le dé la gana si en el res UI es donde vos puedes configurar eso puedes configurar también permisos con los permisos de Drupal para los contenidos y en el res UI puedes decirle bueno para por ejemplo que se yo para clientes solo permita sus métodos entonces en esas dos partes res UI y los permisos de Drupal exacto si ahí lo instalas es un módulo contribuido exactamente me gusta con relación a lo de la autenticación y autorización yo utilicé un módulo probando de OAWAT que en ese caso Drupal 7 que en ese caso simplemente se tendría que conseguir el token y luego utilizar el token otra vez mi pregunta es por qué en vez de tener una aplicación standalone en Angular por qué no utilizamos eso dentro de Drupal como utilizar una página normal en esa forma tu no tiene que enviar a ningún género de autorización porque ya el usuario está autorizado o autenticado y tu puedes utilizar lo mecanismo que te ofrece cada Drupal si de hecho de separar es enfrentarnos con esto la idea de separarlo es tener como dijimos al principio tener control sobre la aplicación aparte de lo que Drupal ofrece o podremos tener incluso bueno una vez que tengamos más avanzado tal vez esto los módulos de curso tener la aplicación servidor y el Drupal en otro servidor por distintas razones pero si no queremos enfrentarnos a esto podemos utilizar Drupal como viene y listo de hecho si se puede se puede utilizar para ciertas partes de Drupal meternos ahí con algunas cosas de Angular si es completamente posible si, quien iba a preparar me gusta bueno sigo con base al tema de permisos y todas esa parte de roles en el aplicativo de ustedes con Angular desconocó bastante acerca de Angular pero es posible manejar sesiones de usuarios, traerlas de Drupal por ejemplo de usuarios que asistan roles y permisos para posteriormente utilizar en la aplicación nuestra y habilitar cierta funcionalidad dependiendo del rol si, digamos que si es posible pero en Drupal 7 porque en Drupal 8TB no tenemos distintos tipos de autenticación en Drupal 7 si hay más módulos y demás en este momento tendrías que utilizar web services para Drupal 7 y configurar los servicios si, de hecho si exactamente cuando esto avance un poco más cuando tengamos los módulos de autenticación si vamos a poder utilizar todo este tipo de cosas si para la grabación ¿no? para que quede grabado que nos dice David que ya en la consola podemos empezar a generar estos métodos de autenticación vamos a probar la consola una última pregunta gracias, en la parte de desventajas nos hablaba que se perdía la funcionalidad de Drupal en la vista básicamente que el usuario consientemente deja usarla porque ahí está disponible o se pierde porque se pierde por ejemplo si quitamos todo lo que es el front end de Drupal, perdemos las funciones ya de teaming que existen y ya no va a hacer renderizar los bloques o los paneles o la manera en que acomodan las cosas con context o todas esas herramientas de Drupal ya no se van a renderizar por medio del tema sino que va a ser puro resultados JSON toda esa manera acomodar el contenido que teníamos ya no van a tener sentido porque lo que Drupal va a volver es puro JSON y nosotros tenemos que acomodar todas esas cosas por código con la aplicación bueno ya se nos acabó el tiempo esta es la dirección de la presentación si tienen más preguntas o algún comentario o sugerencias para la presentación pues nos pueden buscar ahí están nuestros nuestros dignnames, son los mismos para twitter entonces ahí nos dan un tweet nos mandan un mensaje y cualquier pregunta estamos ahí disponibles muchas gracias