 Bona tarda a tothom, benvinguts, benvingudes, bienvenidos, bienvenidas, gracias por venir. Us presento a la Sulema, la Sulema va néixer a Cochebamba, a Bolivia, però ja fa uns anys que viu aquí a Barcelona i és l'insenciada en informàtica de l'exemple d'aplicacions web del rendiment. Ha treballat com a freelance al seu país i aquí dins d'una empresa de desenvolupament, sobretot en PAP i WordPress. Li agrada més la terra ferma, la terra firma, li agusta més que el mar, li agusta les plantes i els animals. I és una gran desenvolupadora, con la que he tenido el placer de trabajar i con la que he tenido el placer de tener grandes charlas. Para mí es un placer presentarla hoy. He pedido especialmente poder hacerlo porque quería tener este honor. Así que os dejo con ella, que os va a hablar de cómo exprimir los hooks. Queríamos traer un exprimidor, lo quería traer, pero al final no ha sido posible. Y bueno, espero que disfrutéis mucho de esta charla. ¡Venga, todo a tuyo! Bueno, primero voy a probar la voz. ¿Se me escucha bien? Bueno, intentaré hablar más fuerte. Ahora sí. Pues primero agradecerles a todos ustedes por estar en esta charla y regalarme estos 30 minutos y escucharme. Como Nuria dijo, ya me presentó. Yo soy de Cochabamba, soy de Bolivia, y tengo hace tres años en Barcelona. Y pues nada, vine a estudiar y sigo aquí. Me gusta Barcelona y me quedó un poquito más y sigo en ese poquito más. Mi ponencia es más de mi experiencia. Yo trabajo con WordPress, entonces presentaré un poco lo que son hooks. Ahora, conceptos muy pequeñitos porque todo el mundo ya sabe que es hooks como se las usa. Y contaré tres experiencias que tuve en el trabajo. ¿Cómo lo sucede? ¿Cómo resolví unos requerimientos que el cliente nos pidió? ¿Vale? Mi presentación. Como conceptos puntuales, los hooks son puntos dentro del core donde se ejecutan, estas se pueden filtrar o podemos modificar comportamiento o adicionar comportamiento o modificar datos internos del core de WordPress. Tenemos dos tipos de hooks, los action y los filters. Los action nos permiten adicionar un comportamiento a nuestra web, mientras que los filters podemos modificar el comportamiento al dato en sí. Entonces, si tenemos un string y dice hola con los filters podemos cambiar eso y que diga chau, por ejemplo. Es una cosa. Los action tienen tres los más importantes adaction, do action, remove action. Y en los filters es adfilter y remove filter. Cuando yo aprendo conceptos nuevos o cómo funciona por lo general lo aplico a mi vida diaria o algún proceso que hago. Entonces aquí yo puse como hacer una tarta. Entonces tengo una serie de pasos para llegar al resultado y en medio de los pasos puedo poner estos ganchos porque los hooks son ganchos y adicionar este comportamiento o modificar. Tengo una tarta por lo general que sea normal, un bizcocho normal y puedo, quiero ahora, uno de chocolate. Entonces para modificar esta tarta tengo que adicionar cacao y cuando adiciono este cacao entonces para mí ese es un filter. Es así un poquito como yo entiendo los conceptos y quería compartirles esta manera. En este último año he tenido tres proyectos grandes y he sacado un poquito de qué se quería y como los resueltos son tres proyectos. Una web de vinícola, una web de parasocios de una librería donde se usa una API y también un sistema de fidelización de clientes usando API. En la primera, una web vinícola teníamos una web ya existente que estaba funcionando con WordPress, WooCommerce, WPML y más plugins, tenía mil plugins. Entonces lo que se nos pedía en esta web como es de vinícola vendía cabas, vendía vinos. Entonces querían adicionar, vender actividades porque esta vinícola hacía una ruta de vinos, una carta de quesos, también quería hacer actividades yoga en medio de los payales, entonces más cosas y querían adaptar su web para vender actividades y eventos. Nos pedían vender actividades eventos, tener actividades sin fecha, estas actividades tenían que decir a alguien que escriba yo quiero esta actividad, me interesa y el administrador de la vinícola se contactaba ya con el cliente y concretaba una hora en concreto. Entonces aquí tendría que haber una gestión del lado de backend para poder adicionar manualmente el evento. Permitir regalar una actividad, también será otro requisito tener estas reservas en un calendario. Esta vinícola usaba OBLUQ para su gestión de notificación es todo lo que es calendario, teníamos que conectar con OBLUQ. También teníamos que tener la notificación de recordatorio, decirle tu mañana tienes un evento en tal lugar a esta hora y indicaciones para llegar y una notificación de un día después para decirle gracias por venir, ahora te ganaste un coupon o tienes un descuento o lo que se quiera en este mail. Aparte de eso, necesita exportar toda esta gestión, actividades, quiénes han reservado, el país, de qué país, qué código, teléfono, etc. Entonces teníamos que exportar a un Excel todas estas actividades, todas las reservas con filtros ya determinados. Y por último, necesitábamos que esta tienda a la hora de hacer un checkbooks, adicionar un checkbooks para que toda esta información que nosotros queríamos nos llegue directamente a Mailchip y desde ahí gestionemos un envío masivo. Entonces teníamos que capturar datos en concreto para enviárselo a Mailchip. ¿Cómo lo hemos resuelto? Para el tema de actividades tenemos el WooCommerce Bookings, que es un plugin. Ahora, para actividades sin fecha, WooCommerce Bookings no contaba con esa característica. Entonces lo que hicimos es adicionar otro plugin que es Gravity Force y con hooks adaptamos a la primera. Luego, permitir regalar una actividad WooCommerce Bookings no tenía esta funcionalidad. Entonces lo que hicimos es usar el plugin a CFE, son para los campos. Y desarrollamos una notificación a medida para decirle a la persona que está regalando que tiene su regalo de tal persona y este es tu código. Cuando tú quieras, puedes canjearlo. Para el tema de calendario WooCommerce tenía el tema de calendario en sus características pero solo era con Gmail. Nos tocó conectar Gmail con OBLOOK a hacer este puentecito. Para notificaciones. Para el recordatorio de un día antes, WooCommerce Bookings tenía ese recordatorio pero para el día después no lo tenía. Entonces hicimos un desarrollo a medida para esa notificación y usamos Chrome Events para poder mandar cada mañana se ejecute y este pueda automáticamente mandar el e-mail. Para exportar actividades usamos Admin Columns que es un plugin que te permite exportar pero este plugin te lo exporta a columnas que vienen por default. Si hay una relación entre tablas o que necesitas adicionar un campo se hace con hooks, se puede adicionar este dato como lo vamos a ver a continuación y para enviar información a Mailchip usamos hooks para decirle yo te estoy mandando también el país también te voy a mandar la ciudad o el teléfono o el lenguaje el que estoy en la página. Vale. Entonces en todos mis ejemplos se va a ver como el gráfico de Gravity Force cuando tenemos el formulario y aquí nos dice todo lo que ejecuta a la hora de entrar a un formulario ejecuta los... en cookie script aquí los validadores y luego va ejecutando a la hora de enviar a la hora de hacer el submit. Entonces en aquí cuando renderizamos en el formulario de actividad las actividades sin fecha necesitábamos decirle mandar esta información pero detectar de qué actividad se está enviando que al administrador le diga está llegando de tal actividad y esta persona requiere tal información. Para ello adicionamos antes de renderizar el formulario aquí antes de renderizar el formulario adicionamos este hook donde ponemos el nombre del producto que en este caso es la actividad. En la parte... en el segundo recuadro está el tema de Mailchip adicionamos el país desde donde está suscribiéndose también hemos adicionado el lenguaje desde que es... el lenguaje con el que está visitando la web y esos datos están enviando directamente a Mailchip. Y aquí tenemos un pedazo de código de cómo se adiciona columnas para exportar y para mostrar que en admin columns dijimos que es... que es el que nos permite exportar a Excel o otro formato entonces con esto podemos ya modificar estas columnas, tener el manejo de columnas. Como se ve aquí, estoy mostrando en la ciudad el país porque no eran los datos por default que me traía a WooCommerce Bookings. Entonces en este proyecto pudimos ver muchas cosas que no venía en un solo plugin pero usando dos plugins y adicionando a estos dos plugins podemos encontrar la solución, el resultado que el cliente nos pedía. El segundo proyecto es Socios de una librería era un proyecto muy sencillo este sí era un proyecto desde cero donde nos pedían que que un socio se pueda identificar un loging básico y este pueda modificar los datos que está en el sistema central que ellos manejaban mediante API, nosotros teníamos que conectarlos y los requisitos eran primero, validar a este socio cuando está en el loging y lo validábamos con API recuperar información y mostrar esta información luego guardar toda esta información el formulario guardar y luego enviar una notificación al socio mostrar una pantalla de agradecimiento y hacer seguimiento de estas llamadas porque las personas que manejaban este sistema central querían saber qué está pasando en cada momento que un socio se logueaba si le parecía error, si no podía loguearse si no podía loguearse por qué no podía loguearse qué mensaje de error le aparece entonces querían tener todo el control de eso cómo los resolvimos cómo es una web muy sencilla son 3 pantallas una pantalla de loging una pantalla de la información del socio y otra pantalla de agradecimiento nada más entonces montamos una WordPress con 3 pantallas usamos Oxygen como ejemplo de plantillas que nos ayuda a generar rápidamente vistas y la gestión es muy fácil y usamos Gravity Falls para estos 3 pasos un formulario para el logging otro formulario para el cliente la información del socio y la otra vista es una pantalla aquí pero tú te logueas tienes que verificar que esta persona está en el sistema central para poder mostrar su información entonces volvemos a usar Gravity Falls pareciera que soy fan de Gravity Falls pero no simplemente he visto que con Gravity Falls puedo jugar mucho mucho el tema de cómo resolver un problema a la hora de mostrar un formulario a la hora de hacer el submit entonces puedo jugar mucho sacarle todo el juego por eso es mi título exprimiendo puedo sacarle todo el juego y como verán son muchos hooks no es 5, no es 4, no es 3 son muchísimos hooks que viene con Gravity Falls y en cada paso tú puedes capturar eventos entonces aquí a la hora de verificar la información y cojo la validación que es un filter i com dijimos anteriormente el filter nos permite modificar un dato dentro del core entonces si tenemos un boolean un valor que nos devuelve false o true podemos modificar esto a un segundo paso entonces aquí es donde verifico y digo hey, tú eres socio si eres socio te dejo pasar pero si no eres socio te bloqueo y no vas a pasar entonces es así como manejo sin manejar más cosas sin hacer sistemas de validación ni nada simplemente con hooks hago esta validación eres socio no eres socio si eres socio te dejo pasar el formulario para modificar tu información y mi tercer proyecto es un sistema de fidelización de clientes esta era más sencillita teníamos una una farmacia que manejaba que quería hacer fidelización a sus clientes que en su web se muestra información de cupones de bales de regalo estos cupones y bales de regalo dependían mucho del lugar donde están no será lo mismo los bales de regalo, los cupones no serán los mismos si tú vives en Girona que si tú vives en Barcelona pero esa lógica ya lo manejaban en el sistema central entonces nosotros teníamos que usar la API del sistema central entonces los requisitos serán que el usuario se registre de nuestra web se registre y se pueda validar esta información del sistema central y este se guarde también el sistema central nosotros no guardamos nada de información solo somos el puente para llegar al sistema central luego recuperar y mostrar dicha información como les había contado el único que quería es saber los cupones que tiene el usuario su información que está guardando y los bales de regalo cheques que tenía para poder estar informado el socio o el cliente de esta farmacia y también como también les había contado que en base al código postal se le muestra una información y otra pues tenía que permitir modificar el código postal desde la web a su sistema central enviar notificación Gravity Force nuevamente envía notificaciones puedes adicionar tanto notificaciones para el administrador para distintos tipos de usuario hacer mil cosas entonces de nuevo usé para resolver esto Gravity Force hicimos un sistema a medida donde estamos manejando Gravity Force como el puente para conectarnos con su sistema central y API también y luego solo para el formulario de cambiar lo demás es un sistema a medida que voy a mostrar a los cupones y mediante API nos devolvía toda esta información y como ven aquí hay un común listado de qué se usó en cada requisito en el primero Gravity Force en el segundo con shortcut intentamos mostrar toda la información en front para el socio o el cliente y con Gravity Force modificamos el tema del código postal y también la notificación de alta de usuario vuelvo a poner este gráfico donde no estamos información que está a la hora de hacer un submit pues estamos enviando una información que es un action y aquí es donde a la hora de registrar el formulario pues capturo y mando toda esta información que me manda el formulario y también capturo para mandarle mediante API y que este se pueda guardar y se modifique luego tengo el tema de notificación lo que les decía que tú puedes modificar el dato interno que está en la web si es un string de uno a otro puedes aparte de modificar modificar, adicionar un comportamiento también en un filter pero sí tiene sí o sí un retur un hook filter en este tiempo en este tiempo que he trabajado en WordPress he visto como buenas prácticas que tendríamos que aplicar o al menos yo lo aplico entonces menciono como 4 que me han servido mucho en una es tenemos por lo general páginas web con 20.000 plugins y si quiero adicionar un código pues lo adicione un plugin, luego no sé qué código lo adicionado y si quiero modificar y si quiero mantener eso yo intento desarrollar mi propio plugin de cambios cosa de tener lo atómico integrado en la web y cuando ya no quiero mis cambios o quiero modificar pues quito mi plugin y ahí todo está funcionando bien entonces adicionalmente para eso utilizo Git para tener ahí comiteado todos los cambios que he hecho qué código adicionado y así poder detectar algún problema o eliminar alguna cosa utilizo también preprocesadores para el tema del orden de los CSS y pues se los recomiendo y intento hacer un código limpio lo más simple posible para poder hacer un mantenimiento a largo plazo conclusiones pues de aquí en unos 10 años probablemente los hooks nos escuchaba mucho y ahora ya es el core de WordPress funciona sobre hooks muchos plugins están adaptándose a hacer su código hooks donde nosotros podamos enganchar código, modificar comportamiento y como vieron también el ejemplo de Gravity Falls pues nos ayuda mucho en el desarrollo porque nos evita esto de tener que hacer un formulario aparte de ser un formulario tienes que validar ese formulario tienes que validar dato que sea un string, que sea una fecha entonces el Gravity Falls nos ahorra eso, ya lo valida nos ahorra el enviar notificaciones el Gravity Falls ya tiene esa funcionalidad y lo podemos utilizar luego como les comentaba en estos detalles de las buenas prácticas de desarrollo de tener un código o un plugin, un folder de plugins de mis cambios, cosa de no estropear la página o no, que no se caiga y importante documentar los cambios porque siempre queremos una web mantenible y WordPress se va actualizando y en cualquier monumento necesitaremos como que hecho en esta página para poder adaptarme a la nueva actualización ya sea de WordPress o de los plugins y pues nada esas han sido como mis tres últimas experiencias les invito a usar hoops a revisar documentaciones de algún plugin para poder sacarle el jugo a ese plugin y que este te pueda ayudar a resolver el problema que tiene el cliente o a darle una solución al cliente que a él sólo le importa solución, no le importa mucho el proceso y pues esta es mi presentación si tienen algunas preguntas La administración central que te conectas a la API bueno, yo no lo he hecho nunca la administración central cuando tú dices que te conectas a otro servicio externo o sea te conectas a otra base de datos guardas en otra base de datos esta conexión me hago una idea es por token técnicamente de qué forma lo haces bueno ellos tienen su sistema de seguridad y ya nos mandan por lo general todos los sistemas tienen un servicio tienen ya documentado de cómo tú puedes acceder lo único que yo hago es conectarme a su endpoint y esperar una respuesta me puede dar la respuesta que quiera, ellos se encargan puede darme error su respuesta pero yo no puedo controlar la respuesta que me va a venir el dato que tienen ellos es como lo hacen o qué es lo que me van a responder yo no lo controlo, yo sólo espero es como si te pasara una pelota te lo paso y tú sólo tengas de coger la pelota y está pinchada y está inflada y es hoja negra tú no puedes tener ese control sólo esperas lo que te va a llegar entonces eso es lo que hagas como un puentecito yo le digo, mandame esto se ha entendido bien la pregunta a nivel técnico en Wordpress en qué parte te viene documentada según cada tipo de la documentación que tú dices viene documentada según lo que te pasan los métodos de conexión lo que tú me preguntas es cómo yo me conecto ahí es un pedazo de código que insertas dependiendo de este tipo de servicios no, dependiendo dónde yo necesite en qué momento necesites esa información però previamente te autorizan claro, yo le mando con la autorización con el token es decir, si yo quiero hacer el login y que este está en su sistema central yo entro la persona pone los datos en mi web, en el front entonces a la hora de hacer sumit o a la hora de hacer login yo lo que hago estos datos se lo envío al sistema central y el sistema central ya me devuelve una respuesta pero lo que me encargo es hacer eso yo enviárselo y esperar una respuesta respuesta de true o false pero estas respuestas también ya vienen documentadas por poyes no sé si te respondí Hola, Sulema gràcies, una pregunta para los que somos novatos en el mundo de los hooks ¿Qué proceso no recomiendas? porque a mi me cuesta entender por dónde empezar a documentarme, en qué interrupción ir a buscar para hacer tal acción el manual está bien estructural o sea, tengo que leer metolmanual para saber qué es el tema de la busca bueno, lo primero que yo hago es o sea, tengo el problema y cómo voy a resolver el problema hago mis pasos de cómo resolver el problema y en cada paso que puedo aplicar por ejemplo, el login, vuelvo con el ejemplo aquí puedo hacer un formulario a medida con un shortcode adiciono y le pongo el formulario pero necesito hacer esta conexión con el API necesito un validador que me valide el email, el password y que no sea campo blanco entonces digo mejor me uso un plugin gravity force meto el plugin a la hora de hacer enviar un login pues necesito capturar estos dos datos y yo procesar gravity force ya me lo va a validar entonces lo único que hago es coger estos datos los envío al sistema central y este me devuelve una respuesta y yo modifico o sea, analizo estas respuestas si es true o false o las respuestas que venga y solo mando mensaje entonces es así, en el siguiente paso ya me imagino es otro formulario una especie de primero te planteas las necesidades y luego vas a la búsqueda de què és de cursos tengo que plugins me pueden ayudar para resolver esto pero la idea es no este plugin lo voy a usar para esto y este para que valida y este para que envíe entonces evitar eso y con los hooks se puede evitar porque haces un proceso gracias és una pregunta que tiene un poco de relación con lo que ella dice imagínate que la farmacia me da acceso a una API para obtener los cupones de un usuario entonces yo uso un hook o un shortcode en trozos de la web de WordPress para llamar a esa API esa API es una URL y entonces ahí escribo un trocito de código PHP que no es PHP propio de WordPress sino que es PHP es un trocito común que ese trocito me llama a una URL y espero respuestas via Ajax o lo que sea y eso es lo que me está devolviendo la pelota seria eso? sí, sí, sí pero cabe la posibilidad de que sea interna o sea que yo pueda crear es que me pensaba cabe la posibilidad de que yo pueda crear las propias conexiones internas dentro de la misma dentro del mismo sistema WordPress no de una API externa que pueda crearla WordPress ya tiene o sea ya está diferente exacto, yo me imagino te he dicho yo ya tengo mi API creada están otra base de datos pero yo tengo mi propia base de datos de WordPress yo puedo crearlo allí directamente però tienes dos información duplicada necesitarás en algún momento actualizar esta base de datos de WordPress porque tienes otro sistema igualito entonces qué tal si este sistema externo pero en el caso de que no lo tuviera de que no existiera ese otro sistema ah, el mismo, sí entonces no haces no haces la llamada a otro sistema simplemente lo guardas en la base de datos de WordPress y usas hook suficiente per clarificar un poco esta idea las reglas de cómo puedes acceder qué puedes preguntar etcétera te las va a dar el sistema central o sea esas reglas no las puedes modificar vale para que tú puedas preguntarle qué cupones tiene él en su API tiene que tener documentado cómo acceder a ese campo el que se requiere etcétera etcétera y esas reglas están ahí y no las va a cambiar porque vayas tú con un WordPress un poco igual y se aclarará un poco más pero si tú quieres modificar el dato y solo tienes un WordPress ya no haces esta llamada a un sistema central lo guardas en WordPress como en un PostMeta o lo que quieras bueno, si no hay más preguntas te quiero dar este regalito de parte de toda la organización gràcies