 Buenas a todos. Bienvenidos a esta charla de WordPress, en la cual vamos a aprender bastante. Mi nombre es Ariel Ramos Ortega. Soy licenciado en ingeniería y sistemas de computación en Costa Rica. Certificado en Mejora Continua como SIGMA Greenbelt. También certificado en Pensamiento Lateral por The Bono Thinking Systems, Instructor Definitors por Cisco y Cloud Infrastructure Foundations Associated for Oracle. Me he desempañado en temas de desarrollo de sistemas. Mucha en la parte web, mucha en la parte de software para sectores como servicios, manufactura, gobierno, y también consultoría de tecnologías de información. Además, soy docente en la Universidad Fielitas aquí en Costa Rica en cursos de desarrollo de aplicaciones móviles y bases de datos. Y por último, también tengo plataformas que administro en la parte de tecnología y negocios. Por ejemplo, un canal de YouTube llamado Coding Graph, donde enseño temas de programación, temas de desarrollo web, Python, etcétera. Y me gustan mucho la parte de los idiomas hablando inglés, español y ruso. Aquí están mis redes sociales para que estemos en contacto, tanto en WordPress, mi sitio web codinggraph.com, y en LinkedIn como Ariel Ramos Ortega. Sin más, vamos a empezar con la parte teórica de ese taller, el cual consiste en cómo convertir su aplicación, su sitio web de WordPress, en una aplicación móvil, utilizando una tecnología llamada Flutterflow. Lo primero que vamos a iniciar es con un concepto teórico sobre las APIs o sobre las APIs. Ya que esta es una charla dentro del Workup de nivel avanzado, vamos a trabajar algunos conceptos tecnológicos de alto nivel, pero para que sea de una manera más sencilla de entender la parte práctica. Una API significa Interfaz de programación de aplicaciones, o Application Programming Interface, en inglés. Es un conjunto de reglas, protocolos y herramientas que permiten la comunicación entre software, aplicaciones o sistemas. Básicamente, una API va a definir los telafórmios en la cual diferentes componentes de software deben interactuar entre sí. Y de hecho, WordPress nos va a ayudar bastante por medio de un plugin particular a generar este tipo de APIs, poder consumirlas dentro de una aplicación móvil y mostrar información de su sitio web, pero en una aplicación, sin tener que recurrir al uso de una aplicación web progresiva o estar guardando enlaces dentro de su dispositivo móvil. Haremos una aplicación pura. Las APIs permiten entonces que aplicaciones y servicios de comuniquen y compartan datos, por ejemplo, imágenes, títulos, taxonomías, usuarios, lo que usted normalmente tendría en su página web de WordPress, pero otra vez una transferencia de datos para darle el formato que usted desea en el entorno final. Además, pueden ser utilizadas para acceder funcionalidades específicas de una aplicación como servicios web, pases de datos, sistemas operativos, incluso hardware. Como usted bien sabe, WordPress utiliza pases de datos, por ejemplo, MySQL o MariaDB, y tiene ciertas estructuras a nivel técnico para que pueda funcionar en la página web. Nosotros, por medio de una API, podemos tener acceso a todas las información de la base de datos sin tener que inmiscuirnos en aspectos sumamente a detalle como el nombre o usuario contraseña de la base de datos, el puerto, sino que, por medio del plugin, vamos a traer esta información, vamos a tenerla por medio de un formato particular llamado JSON y, a partir de ahí, darle el formato dentro de nuestra aplicación. Para eso, vamos a utilizar una plataforma llamada Flutter Flow, que esta es una plataforma 100% en línea, no debe descargar nada, que le permite la creación de aplicaciones móviles. Tiene una versión gratuita, tiene una versión paga, pero con la gratuita tenemos más que suficiente. Además, nosotros aquí podemos interactuar ciertos componentes visuales sin tener que complicarnos mucho en el proceso técnico de desarrollo una app. Probablemente, entre el público, hayan personas que han trabajado anteriormente haciendo apps con Android Studio para el sistema operativo, con Xcode para iOS o iPad OS, entre otras opciones en el mercado como visa el estudio Shamarin, etcétera. Pero Flutter flow tiene una particularidad y es que utiliza una tecnología llamada Flutter. Flutter es un marco de desarrollo de aplicaciones móviles de código abierto creado por Google, que permite construir interfaces de usuario nativas para iOS como para Android. Es decir, en un solo código, en un solo proyecto, conectándonos con la API de WordPress, tendremos lo suficiente para generar una aplicación móvil de iOS y una aplicación móvil para Android. Esto es una gran ventaja. Ya que al hacer un desarrollo, un sistema o entorno de desarrollo multiplataforma, a la hora de exportar el proyecto tendré una aplicación 100% nativa. Es decir, que lo que estaba en Flutter, será exportado a Java o Kotlin para Android y será exportado para Swift en iOS. Nosotros usaremos una API llamada WP-Rest API Controller o Controlador de tipo API-Rest para WordPress. Este nos va a permitir administrar, alternar y visibilizar todos los puntos finales o endpoints que existen dentro de nuestra aplicación de WordPress para enviar los datos del sitio web a la aplicación móvil. Esto hará que entonces dentro de WordPress, que aquí les enseño en esta imagen, una parte general de cómo es Flutterflow, traigamos esta información, le demos el formato que necesitamos y a partir de ahí podamos trabajar lo que requerimos como aplicación. Por lo tanto, a partir de este momento, voy a compartir pantalla para que iniciemos desde cero la instalación del plugin, la configuración, la creación de la app. Y ustedes puedan ver cómo convertimos nuestro sitio web de WordPress en una app 100% móvil. Voy a compartir pantalla y voy a ponerlos en contexto. Aquí tenemos un blog el cual tiene información sobre muchos temas y este es un sitio web totalmente público. Entonces ahí las personas pueden comenzar a leer como cualquier otro blog de WordPress, la información que tenemos a más. Entonces, ¿qué sigue aquí? Nosotros requerimos dentro de la estructura tomar lo que están las bases de datos de nuestro blog, transportarlo por medio de una API hacia los componentes de nuestra aplicación móvil. Entonces, aquí desde WordPress podemos instalar WP Rest API Controller. Esta es la versión que estamos usando en este momento. Probablemente existen una nueva versión a la hora de ver la grabación de esta charla. Pero igual, siguiendo el mismo proceso, vamos a añadir un nuevo plugin y vamos a buscar este controlador. Aquí está. Este es el que vamos a instalar. Existen más opciones. Usted puede escoger la que requiera. Pero para efectos de esto, vamos a utilizar particularmente el plugin que estamos viendo en pantalla. ¿Dónde va a quedar el plugin instalado una vez que usted ya lo haya bajado dentro de su instalación o dentro de su sitio web de WordPress? Nosotros vamos a buscar en herramientas y tendremos el submenú de Rest API Controller o controlador Rest API. Vamos a ver que está totalmente habilitado la parte retransmars o Post porque esto es un sitio web de tipoINAUDIBLE. Pero si vamos más a la parte inferior para que vean lo importante, ¿qué es la documentación de este tipo de sitios? Nosotros encontraremos que también hay plugins, o APIs mejor dicho, para las páginas de su sitio web, para los archivos adjuntos, revisiones, CSS, patrones, estilos globales, toda la información que se pueda transportar de su sitio web de WordPress a la app va a ser vista por medio de una API. De hecho, vamos a hacer un ejemplo. Voy a concentrarme porque esa es la idea en crear la aplicación móvil con los blogs que ya están publicados en este sitio web. Aquí en entradas voy a notar que está este enlace. Y si yo lo abro en una nueva pestaña va a aparecerme un formato muy conocido a nivel web llamado JSON, J-S-O-N, JSON. Es un objeto de notación de JavaScript y va a ordenar por medio de la estructura kivalium o palabra clave y valor la información. Ejemplo. Aquí vienen los posts. El ID del post este particularmente es el 16,883. Fecha de publicación, fecha estándar de publicación. Última vez que se modificó el status que está publicado el blog, tipo de publicación es un post. El link hacia donde yo vería el post o el blog en específico, el contenido, el título. Esta información se va a ir repitiendo NBSes dentro del JSON dependiendo de la cantidad de blogs que está en publicados en este sitio web. Lo que yo quiero tomar es este JSON, estructurarlo kivalium parte por parte, seleccionar lo que necesito y montarlo dentro de mi sitio web, dentro de mi página y dentro también de mi aplicación móvil. Para esto voy a mostrarles aquí donde lo vamos a elaborar. Este es FlutterFlow, una página 100% en línea para desarrollar aplicaciones móviles. Aquí voy a ingresar utilizando, puede ser Google, puede ser GitHub, lo que usted requiera. Entonces voy a hacer un inicio de sesión. Ya estoy dentro. Eso es todo. Ya estoy dentro de la aplicación. Ya me creé una cuenta totalmente gratuita. ¿Cómo creamos la aplicación móvil y cómo conectamos el JSON generado por WordPress? Bueno, vamos a crear un proyecto nuevo en la esquina superior derecha que dice Create New. Vamos a colocarle un ejemplo por nombre WordPress blog y vamos a click en crear. Aquí sale cuál es el esquema que yo deseo utilizar de colores. Puedo buscar aquí entre las diferentes opciones. Esto. Voy a dar click aquí en skip. No voy a configurar ninguna base de datos ni nada por el estilo. Start building y ya puedo empezar. Voy a hacer un pequeño recorrido de cómo es FlutterFlow. Bueno, aquí estamos viendo la pantalla principal hay un panel en el centro en donde podemos comenzar a diseñar la app. Del lado izquierdo tenemos los componentes visuales muy parecido a WordPress. Por ejemplo, si usted utiliza Elementor se le va a ser muy familiar ya que aquí tenemos contenedores, títulos, imágenes, campo de texto, formularios. El conjunto de widgets o componentes visuales estándar que usted encontrará en el mundo digital y al lado derecho encontraremos las propiedades del elemento que estemos seleccionando en este momento. Si seleccionó un botón aparecen las propiedades del botón. Si seleccionó un contenedor aparecen las propiedades del contenedor. También para previsualizar la aplicación móvil yo puedo, en la parte superior al centro, seleccionar aquí un dispositivo por ejemplo cualquiera un iPhone 14 Pro Max y si le doy clic este botón displays device o mostrar dispositivo ya puedo ver cómo está diseñado en términos generales un emulador sin tener que levantar muchos recursos como lo hace por ejemplo Android Studio. Puedo cambiarlo igual para cualquier otro modelo. Aquí yo puedo explorar tengo Samsung Galaxy. Lo más importante más allá de estos dispositivos lo que más importa aquí es que usted pueda probar la aplicación que vamos a crear con WordPress y que ningún elemento quede oculto o cortado por algún componente de hardware como la cámara. Aquí está el título page title voy a cambiarle este nombre por WordPress y todo esto se cambia aquí a la derecha como les dije estas son las propiedades ahora requiero requiero obtener toda esta información del PSOM y mostrarla en mi aplicación como estamos trabajando con APIs Flutterflow tiene un menú aquí llamado API calls o llamadas API el cual me permita mi agregar una llamada API o un grupo de llamadas ese es el menú aquí de hecho el extremo izquierdo están todos los menús que usted requiere para publicar una aplicación si usted tiene un sitio web de WordPress y tenía mucho tiempo de hacer una app pero tal vez lo que lo detenía era el montón de aspectos técnicos involucrados para publicarla con Flutterflow y con WordPress ya va a poder tener un proceso más rápido más abreviado entonces aquí están los componentes aquí puedo ver todas las los elementos que conforman eso se llama un árbol de componentes o widget tree reitero es muy parecido a trabajar con elemento y también reitero no es una aplicación web la que estamos creando no es una web es una aplicación 100 por ciento nativa de hecho aquí arriba en la esquina superior derecha hay un botón donde puede descargar la apk de su aplicación e instalarla en su celular volvemos aquí vamos a requerir de algún componente visual para mostrar la lista de blogs para este caso utilizaré algo llamado un list view o una vista elista un list view es un componente widget que repite en forma de lista los componentes que vaya encontrando en la fuente datos que yo le asigne sea una base datos una api en xml etcétera voy a arrastrarlo a la pantalla vean así de fácil y ahora requiere decirle el list view que repita algún elemento que va a repetir puede ser unos un texto yo quiero traerme el título del blog y cuando fue publicado y cuando le dé clica esto que se me abra el el blog para ya poder leerlo entonces voy a buscar voy a escribir en la barra de búsqueda list hay aquí está lo estoy señalando en pantalla list hay y lo arrastro dentro del list view dentro ahí está así de fácil ya vamos progresando lo que yo necesito es configurar mi aplicación móvil para que busque el link de warpres que hemos creado con el plugin y comienza a agregarlo en pantalla entonces me voy a ir al menú que ya les mencioné api calls y agregamos una llamada api aquí hago un paréntesis si usted tiene su sitio web de warpres con una instalación de oracle con instalación de secuel server no hay problema mientras tenga una api igual puede consultar este tipo de bases de datos la api es como un intermediario un punto medio que me permite tomar una tecnología x y hacerla compatible con una tecnología y como le llamaremos a esta llamada api warpres post los post de warpres copio este link y lo coloco en la api url o la url de la api aquí estamos viendo los diferentes métodos http para una api estamos trabajando con un get porque estoy obteniendo información pero usted que tal vez ya tiene conocimientos a nivel web debe saber que existen otros métodos http post para insertar porque podemos insertar en warpres delete put patch etcétera vamos a probar aquí response and test voy a hacer un testeo a la llamada api aquí está el link que se va a probar antes yo le hago una pregunta normalmente cuando hago una consulta en web si todo está en orden y recibe un resultado cuál es el código http que recibimos por parte del servidor exacto recibimos el número 200 vamos a le click aquí dice está tus 200 se truncó un poco se cortó la respuesta porque son demasiados blogs los que hay en este sitio web de warpres pero ahí está tenemos 200 suces y tenemos toda la información que vimos aquí en esta pestaña pero dentro de flurer flow voy a dar un poco de scroll y ahora sí qué necesito para mostrar la información de warpres en la aplicación móvil me voy a recomendados en recomendados salen todos los key que hay en el json estructurados para yo seleccionar lo que requiere un app ejemplo quiero la fecha de ahí aquí está le voy a dar clic seleccionamos no vamos a interactuar con esta columna porque nada más me indica si esto es una lista de elementos luego necesito el título de a render o renderizado le clica aquí el link del post entonces tengo la fecha en la que se publicó el título del blog y el link hacia donde me redirige puedo buscar más cosas como el contenido del blog hay que tener cuidado porque cuando está renderizado puede tener html pero si usted utiliza otro plugin de como editor visual tipo elementor wp bakery o cualquier otro de los plugins que hay de warpres hay que tener mucho cuidado porque dentro la app no está de plugin y a la hora de renderizarlo aparecerán los tags y quedarán totalmente visibles por ejemplo aquí en el excel que se ven los tags del editor visual yo podría buscar más cosas como el estatus si está publicado que es estiquis y hay un template etcétera pero con esto creo tener más que suficiente fecha de publicación enlace del blog título del blog antes de irme a cualquier otra parte de flutter flow voy a select esta pestaña de aquí y le pondré un nombre a la variable que va a asignarse acá estos valores date será fecha y el será título estamos haciéndolo en español para que quede más fácil y link será enlace agregamos la llamada aquí abajo y listo hemos configurado la llamada a la API fácil ahora cómo hacemos para que esta información de warpres se muestra en la bueno aquí en el segundo menú voy a seleccionar el list view está tengamos cuidado no seleccionar el list hay sino el list en el list view voy a irme las propiedades y aquí puedo cambiar muchas cosas pero voy a abrir un botón que se llama backend query backend query o consulta por medio del backend le permite usted traer esa información de una fuente datos externa como ya les dije puede ser una base de datos maya secuel en maría de b hora col posgré puede ser firebase normalmente esto tiene buena integración con firebase o puede ser una api y al clicar aquí agregamos una consulta a una llamada API y me pregunta a warpres cuál es la API que quiere conectar warpres post confirmó ya llame la api y ahora me voy a ir a este menú que vemos al extremo derecho para poder traer lo siguiente como hay elementos en los key values que son listas o arise también conocidos como arreglos unidimensionales requiero extraer o generar de forma dinámica cada elemento de acuerdo a cada item dentro de la array entonces aquí le pondremos a la variable datos la máxima cantidad de elementos es que se quiere que se traiga por ejemplo sólo 10 blocs pero voy a dejarlo vacío quiero que traiga a todos el valor está definido por voy a darle click la consulta a el API de warpres post el json path name es que quiere traer de ahí los títulos quiero traerme los títulos y confirmo vuelvo a confirmar que ya la configuración está lista y noten lo que va a ocurrir en el centro de la pantalla de la app ser comienza a aparecer elementos repetidos esto es nada más para representar de que a partir de aquí por cada elemento que encuentre dentro de la array va a generar una nueva fila dentro del list lo que sigue es que asignar los valores a cada elemento del list y que estos elementos son los list tiles así que seleccionando acá me voy a ir a las propiedades por ejemplo en este caso particular voy a buscar más abajo dice título vean que yo aquí puedo colocar blog puedo escribir lo que sea pero no quiero que sea así no quiero que sea manual jacodiado o quemado como le decimos hay un pequeño botón naranja aquí que define las cosas por variable si le doy click voy a buscar los datos que ya configure datos y tem y listo confirmo cada item que encuentre de título en el array lo va a colocar en una línea distinta donde dice subtitle voy a agregar la fecha voy a buscar más abajo y aquí es subtitle en vez de escribir la fecha o haber puesto un número ahí manualmente voy a definirlo también por variable en este pequeño botón ese botón naranja es súper útil porque le permite definir por variable muchas cosas que están ya configuradas en su workpress o en su fuente de datos que defina le diré que vaya a buscar la consulta de la ipi de workpress que se traiga en jason pathname la fecha en las opciones disponibles cuál fecha bueno voy a ver esto vean esta manera cada elemento del workpress tiene estos nodos y cada uno tiene un array este es el un índice perdón este es el cero recuerden los programadores y empezamos a contar desde cero cero uno dos tres cuatro hasta n yo quiero que dependiendo por ejemplo la primera fila de mi lista de la cero entonces quiero que se traiga la fecha del blog número cero en el índice no en el id en el índice como se hace esto es muy fácil y vean que no hemos tocado nada de código hasta ahora por eso es que es muy sencillo de ejecutar este flow de flow con workpress en opciones disponibles le diré que quiero que vaya a un ítem en un índice específico ítem ad index cuál es el índice bueno quieren el primero el último o un índice específico quiero que sea un índice específico cuál índice es si le colocó manualmente cero va a buscar y va a tener la misma fecha todos los blogs así que quiero que esté dinámico voy a definirlo por variable y le diré que sea el datos ítem es decir el elemento que en ese momento está en la en la fila y en vez de no further changes lo cambio por índice en la lista es decir el índice que el elemento tenga en esa lista sea el índice que va a buscar la fecha de ese blog confirmo confirmo y cómo hacemos para ya ver el resultado en la esquina superior derecha encontraremos un botón llamado test mode aunque hay otros que también se llaman ron mode y y también el de diseño pero el test mode sirve para probar la cuánto tardaba en otro tipo de entorno de desarrollo para compilar un app ocho minutos diez minutos aquí vamos a darle click y va a empezar el renderizado y mucha atención dice que va a tardar de dos a tres minutos en el entre tiempo haremos unas pequeñas configuraciones visuales voy a seleccionar el list ahí y voy a cambiar los aspectos de diseño aquí arriba tengo padding que es padding el contenido o el espacio existente a nivel interno en un elemento por ejemplo un html el padding existe en flutter y en dart entonces aquí voy a escribir 15 de padding para todos los lados se separó se de más bonito así voy a acercarlo puedo cambiar más cosas por ejemplo el icono en vez de esta flecha puedo decir buscar un link y un enlace puedo cambiar los colores en el penúltimo menú donde está el team settings colores puedo aquí definir otro tono digamos que el color primario sea este y ya lo cambia mientras carga y puedo previsualizar otros elementos como el teclado con este botón de aquí arriba ven puedo ver el storyboard ustedes pueden tener aquí como en otras aplicaciones tipo figmas que ustedes tienen ya todo el flujo el prototipo esto lo pueden diseñar aquí automáticamente vamos a ver cómo nos quedó la aplicación ya cargó ya está terminando de compilar eso fue rápido y ven aquí están los títulos de los blogs que estaba en el sitio web de warpress y la fecha de publicación abajo ven ahí está puedo hacer algunas mejoras como que la columna que contiene list view voy a seleccionar aquí sea scroll o tenga la propia de scroll y cómo hago para ver los cambios que estoy aplicando le doy clic aquí en instant reload y a diferencia de la anterior compilación aquí ocupamos máximo 10 segundos para recompilar los cambios ya no 3 minutos entonces veamos aquí listo ahí está sale el scroll vean qué genial esta es una aplicación móvil ahí estamos en modo de de bugueo el título se pueden cambiar más cosas perfectamente puede ir al lista y decir que el título no sé sea de otro color por ejemplo así de este celeste aquí le cambió la propiedad donde dice text color ya está cargando otra vez ahí está lo último que queda para que hagamos la prueba es que yo al darle clica un elemento se abre ese blog en específico seleccionando el lista y voy a buscar en vez de backing query la propiedad número 2 que se llama acciones aquí ustedes pueden hacer acciones como lo guiarse a su sitio web de wordpress o cualquier otra cosa que requieran en la pero si le doy clic agregar acción voy a buscar url y dice lanzar o ejecutar launch url cuál es la url en vez de escribir la url el blog una por una hagámoslo de forma dinámica yo requiero que sea por variable y esta variable está definida por la llamada al wordpress pero en vez de json path custom es el esnace y en opciones disponibles quiero que sea el ítem en el índice específico que es específic index por variable datos ítem index in list confirmó confirmó vamos a hacer la prueba instant reload para obtener los últimos datos voy a intentar el primero se abrió un enlace aquí está el link de este blog probaremos el segundo y aquí está el link de ese otro blog y así es como logramos conectar una API transferimos datos a una app y unificamos la base datos no tiene que estar haciendo otra base de datos por aparte para la app es la misma base datos del wordpress pero consumida desde una aplicación móvil en esencia esto es lo que yo les quería mostrar cómo convertir su sitio web de wordpress a una aplicación móvil usando flutter flow la clave estuvo en el uso de las apis o apis les recomiendo aprovechar mucho este concepto de esta tecnología ya que le va a facilitar bastante el trabajo y le va a permitir tener una mejor compatibilidad con tecnologías que inicialmente no estaban hechas para comunicarse con un tipo de base datos en particular esto lo logramos por medio de una consulta de API la cualiza sin crónica pero como vemos aquí en pantalla con flutter flow con wordpress y con los conocimientos necesarios podremos crear nuestra aplicación móvil de nuestro sitio web de wordpress con esto vamos a tener aquí un momento hemos llegado al final de esta charla de esta presentación la cual espero que les haya parecido muy interesante por ejemplo aquí les dejo en la presentación también el ejemplo de cómo debería ser la consulta y les agradezco todo el espacio todo el tiempo y la atención para que ustedes puedan seguir aprendiendo este maravilloso mundo de wordpress sigamos en contacto aquí les dejo mis redes podemos comunicarnos por mí el sitio web coding graph.com y también en LinkedIn me voy a encontrar como ariel ramos ortega muchas gracias por la atención y esperamos vernos en una próxima entrega