{"id":11241,"date":"2025-11-27T17:45:28","date_gmt":"2025-11-27T16:45:28","guid":{"rendered":"https:\/\/bitacora.eniac2000.com\/?p=11241"},"modified":"2025-11-27T17:46:41","modified_gmt":"2025-11-27T16:46:41","slug":"creacion-de-articulos-deportivos-con-ia-generativa-componentes-y-funcionalidades-clave","status":"publish","type":"post","link":"https:\/\/bitacora.eniac2000.com\/?p=11241","title":{"rendered":"Creaci\u00f3n de art\u00edculos deportivos con IA generativa. Componentes y funcionalidades clave"},"content":{"rendered":"<div class=\"seriesmeta\">Esta entrada es la parte 5 de 5 de la serie <a href=\"https:\/\/bitacora.eniac2000.com\/?series=creacion-de-articulos-deportivos-con-ia-generativa\" class=\"series-1854\" title=\"Creaci\u00f3n de art\u00edculos deportivos con IA generativa\">Creaci\u00f3n de art\u00edculos deportivos con IA generativa<\/a><\/div>\n<p>Por \u00faltimo en esta serie, quiero detallar los componentes y funcionalidades clave definidos durante el proceso de desarrollo de la aplicaci\u00f3n, con una breve descripci\u00f3n de su funci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Autenticaci\u00f3n<a href=\"https:\/\/github.com\/i82hisaj\/wordpress-strava-piwigo-youtube#autenticaci\u00f3n\"><\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>Login.tsx<\/code><\/strong>: P\u00e1gina de inicio de sesi\u00f3n que utiliza el componente <code>Auth<\/code> de Supabase.<\/li>\n\n\n\n<li><strong><code>SessionContextProvider.tsx<\/code><\/strong>: Contexto de React que gestiona la sesi\u00f3n del usuario de Supabase y la hace accesible en toda la aplicaci\u00f3n.<\/li>\n\n\n\n<li><strong><code>ProtectedRoute<\/code><\/strong>: Componente de ruta que asegura que solo los usuarios autenticados puedan acceder a ciertas p\u00e1ginas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Administraci\u00f3n de Credenciales (<code>\/admin<\/code>)<a href=\"https:\/\/github.com\/i82hisaj\/wordpress-strava-piwigo-youtube#administraci\u00f3n-de-credenciales-admin\"><\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>Admin.tsx<\/code><\/strong>: P\u00e1gina principal de administraci\u00f3n con pesta\u00f1as para cada servicio.<\/li>\n\n\n\n<li><strong><code>StravaCredentialsForm.tsx<\/code><\/strong>: Permite a los usuarios conectar\/desconectar su cuenta de Strava a trav\u00e9s de un flujo OAuth 2.0 gestionado por una Edge Function.<\/li>\n\n\n\n<li><strong><code>PiwigoCredentialsForm.tsx<\/code><\/strong>: Permite a los usuarios introducir y gestionar sus credenciales de Piwigo.<\/li>\n\n\n\n<li><strong><code>YouTubeCredentialsForm.tsx<\/code><\/strong>: Permite a los usuarios introducir y gestionar su clave de API y ID de canal de YouTube.<\/li>\n\n\n\n<li><strong><code>WordPressCredentialsForm.tsx<\/code><\/strong>: Permite a los usuarios introducir y gestionar sus credenciales de WordPress (URL, usuario, contrase\u00f1a de aplicaci\u00f3n).<\/li>\n\n\n\n<li><strong><code>StravaActivitiesCache.tsx<\/code><\/strong>: Muestra el estado de la cach\u00e9 de actividades de Strava y permite refrescarla.<\/li>\n\n\n\n<li><strong><code>PiwigoGalleries.tsx<\/code><\/strong>: Muestra el estado de la cach\u00e9 de galer\u00edas de Piwigo y permite refrescarla.<\/li>\n\n\n\n<li><strong><code>YouTubeVideos.tsx<\/code><\/strong>: Muestra el estado de la cach\u00e9 de videos de YouTube y permite refrescarla.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Correlaci\u00f3n de Actividades y Medios (<code>\/<\/code>)<a href=\"https:\/\/github.com\/i82hisaj\/wordpress-strava-piwigo-youtube#correlaci\u00f3n-de-actividades-y-medios-\"><\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>ActivityMediaCorrelator.tsx<\/code><\/strong>: El componente central en la p\u00e1gina de inicio.\n<ul class=\"wp-block-list\">\n<li>Muestra una lista de actividades de Strava del a\u00f1o seleccionado.<\/li>\n\n\n\n<li>Permite al usuario iniciar el proceso de correlaci\u00f3n para una actividad espec\u00edfica.<\/li>\n\n\n\n<li>Sugiere fotos de Piwigo y videos de YouTube que coinciden con la fecha y ubicaci\u00f3n de la actividad de Strava.<\/li>\n\n\n\n<li>Permite al usuario seleccionar los medios deseados y a\u00f1adir <strong>instrucciones personalizadas para la IA<\/strong> (<code>EditAIInstructionsDialog<\/code>).<\/li>\n\n\n\n<li>Guarda las correlaciones en la base de datos.<\/li>\n\n\n\n<li>Inicia la generaci\u00f3n de art\u00edculos de blog.<\/li>\n\n\n\n<li><strong>El motor de IA predeterminado para la generaci\u00f3n de art\u00edculos es Deepseek.<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Art\u00edculos Generados (<code>\/generated-posts<\/code>)<a href=\"https:\/\/github.com\/i82hisaj\/wordpress-strava-piwigo-youtube#art\u00edculos-generados-generated-posts\"><\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>GeneratedPosts.tsx<\/code><\/strong>: Muestra una lista de todos los art\u00edculos de blog generados por la IA.\n<ul class=\"wp-block-list\">\n<li>Permite ver el contenido completo de un art\u00edculo en un di\u00e1logo.<\/li>\n\n\n\n<li>Ofrece opciones para <strong>editar el t\u00edtulo, contenido, medios asociados y estado del art\u00edculo<\/strong> (<code>EditGeneratedPostDialog<\/code>).<\/li>\n\n\n\n<li>Permite <strong>eliminar art\u00edculos<\/strong>.<\/li>\n\n\n\n<li>Facilita la <strong>publicaci\u00f3n de art\u00edculos como borradores en WordPress<\/strong>, actualizando el estado y el ID del post en la base de datos.<\/li>\n\n\n\n<li>Permite <strong>redirigir directamente a la p\u00e1gina de edici\u00f3n del post en WordPress<\/strong> si ya est\u00e1 publicado.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Edge Functions Clave<a href=\"https:\/\/github.com\/i82hisaj\/wordpress-strava-piwigo-youtube#edge-functions-clave\"><\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>strava-oauth<\/code><\/strong>: Gestiona el flujo OAuth de Strava, intercambia c\u00f3digos por tokens y los guarda en la base de datos.<\/li>\n\n\n\n<li><strong><code>strava-activities<\/code><\/strong>: Obtiene las actividades de Strava del usuario, incluyendo la l\u00f3gica de refresco de tokens.<\/li>\n\n\n\n<li><strong><code>strava-activities-status<\/code><\/strong>: Proporciona el estado de la cach\u00e9 de actividades de Strava.<\/li>\n\n\n\n<li><strong><code>refresh-strava-cache<\/code><\/strong>: Refresca la cach\u00e9 de actividades de Strava desde la API.<\/li>\n\n\n\n<li><strong><code>piwigo-connect<\/code><\/strong>: Guarda las credenciales de Piwigo en la base de datos.<\/li>\n\n\n\n<li><strong><code>piwigo-photos<\/code><\/strong>: Obtiene fotos de Piwigo, incluyendo metadatos EXIF de geolocalizaci\u00f3n, y las cachea.<\/li>\n\n\n\n<li><strong><code>piwigo-galleries-status<\/code><\/strong>: Proporciona el estado de la cach\u00e9 de galer\u00edas de Piwigo.<\/li>\n\n\n\n<li><strong><code>refresh-piwigo-cache<\/code><\/strong>: Refresca la cach\u00e9 de galer\u00edas de Piwigo desde la API.<\/li>\n\n\n\n<li><strong><code>youtube-connect<\/code><\/strong>: Guarda la clave de API y el ID de canal de YouTube.<\/li>\n\n\n\n<li><strong><code>youtube-videos<\/code><\/strong>: Obtiene videos de YouTube de un canal, los cachea y los correlaciona por fecha.<\/li>\n\n\n\n<li><strong><code>youtube-videos-status<\/code><\/strong>: Proporciona el estado de la cach\u00e9 de videos de YouTube.<\/li>\n\n\n\n<li><strong><code>refresh-youtube-cache<\/code><\/strong>: Refresca la cach\u00e9 de videos de YouTube desde la API.<\/li>\n\n\n\n<li><strong><code>wordpress-connect<\/code><\/strong>: Guarda las credenciales de WordPress.<\/li>\n\n\n\n<li><strong><code>wordpress-posts<\/code><\/strong>: Obtiene publicaciones existentes de WordPress.<\/li>\n\n\n\n<li><strong><code>correlate-media<\/code><\/strong>: La funci\u00f3n m\u00e1s compleja, que:\n<ul class=\"wp-block-list\">\n<li>Recupera detalles de la actividad de Strava.<\/li>\n\n\n\n<li>Busca y sugiere fotos de Piwigo y videos de YouTube bas\u00e1ndose en la fecha y la proximidad geogr\u00e1fica (usando EXIF y geocodificaci\u00f3n inversa).<\/li>\n\n\n\n<li>Incluye datos meteorol\u00f3gicos de AEMET para la ubicaci\u00f3n de inicio de la actividad.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>save-correlation<\/code> \/ <code>delete-correlation<\/code><\/strong>: Gestionan el almacenamiento y eliminaci\u00f3n de las correlaciones entre actividades y medios, incluyendo las instrucciones de la IA.<\/li>\n\n\n\n<li><strong><code>generate-and-publish-post<\/code><\/strong>: La funci\u00f3n de IA que:\n<ul class=\"wp-block-list\">\n<li>Recopila todos los datos relevantes (Strava, Piwigo, YouTube, clima de AEMET, instrucciones del usuario).<\/li>\n\n\n\n<li>Construye un prompt detallado para el motor de IA seleccionado (Deepseek por defecto).<\/li>\n\n\n\n<li>Llama a la API de Mistral AI o Deepseek (v\u00eda OpenRouter) para generar el t\u00edtulo y el contenido del art\u00edculo en HTML.<\/li>\n\n\n\n<li>Guarda el art\u00edculo generado como borrador en la tabla <code>generated_posts<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>update-generated-post<\/code><\/strong>: Actualiza los detalles de un art\u00edculo generado en la base de datos.<\/li>\n\n\n\n<li><strong><code>delete-generated-post<\/code><\/strong>: Elimina un art\u00edculo generado de la base de datos.<\/li>\n\n\n\n<li><strong><code>publish-to-wordpress<\/code><\/strong>: Toma un art\u00edculo generado y lo publica como borrador en WordPress usando la API REST.<\/li>\n\n\n\n<li><strong><code>get-wordpress-redirect-url<\/code><\/strong>: Obtiene la URL de edici\u00f3n de un post de WordPress para que el frontend pueda navegar directamente a ella.<\/li>\n\n\n\n<li><strong><code>disconnect-strava<\/code> \/ <code>disconnect-piwigo<\/code> \/ <code>disconnect-youtube<\/code> \/ <code>disconnect-wordpress<\/code><\/strong>: Funciones para eliminar las credenciales de las cuentas externas de la base de datos.<\/li>\n\n\n\n<li><strong><code>refresh-aemet-stations-cache<\/code><\/strong>: Obtiene y cachea el inventario de estaciones meteorol\u00f3gicas de AEMET, incluyendo la conversi\u00f3n correcta de coordenadas DMS a decimales.<\/li>\n<\/ul>\n\n\n\n<p>Con esto, doy por cerrada la serie dedicada a la aplicaci\u00f3n para generaci\u00f3n de art\u00edculos de ciclismo de manera automatizada. Poco a poco ir\u00e1n apareciendo en mi bit\u00e1cora algunos art\u00edculos sobre ciclismo creados con esta aplicaci\u00f3n.<\/p>\n\n\n\n<p>A este respecto, he tomado la determinaci\u00f3n de hacer uso del tag <em>Generado con IA<\/em> a aquelos art\u00edculos que contengan, de manera total o parcial, contenido generado con el apoyo de IA, a fin de distinguirlos de aquellos en los que no he tenido este tipo de apoyo.<\/p>\n\n\n\n<p>Espero que esta serie haya sido interesante, y que los art\u00edculos que genere con la aplicaci\u00f3n sean de inter\u00e9s.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"seriesmeta\">Esta entrada es la parte 5 de 5 de la serie <a href=\"https:\/\/bitacora.eniac2000.com\/?series=creacion-de-articulos-deportivos-con-ia-generativa\" class=\"series-1854\" title=\"Creaci\u00f3n de art\u00edculos deportivos con IA generativa\">Creaci\u00f3n de art\u00edculos deportivos con IA generativa<\/a><\/div><p>Por \u00faltimo en esta serie, quiero detallar los componentes y<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1845,24,8,13],"tags":[1864,824,1859],"series":[1854],"class_list":["post-11241","post","type-post","status-publish","format-standard","hentry","category-generado-con-ia","category-ciclismo","category-deporte","category-informatica","tag-api","tag-ia","tag-supabase","series-creacion-de-articulos-deportivos-con-ia-generativa"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/11241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11241"}],"version-history":[{"count":1,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/11241\/revisions"}],"predecessor-version":[{"id":11242,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/11241\/revisions\/11242"}],"wp:attachment":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11241"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fseries&post=11241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}