{"id":834,"date":"2025-02-13T01:21:12","date_gmt":"2025-02-13T01:21:12","guid":{"rendered":"https:\/\/danielribes.com\/blog\/?p=834"},"modified":"2026-04-06T11:43:46","modified_gmt":"2026-04-06T11:43:46","slug":"experimentando-con-llm-y-el-desarrollo-de-apps","status":"publish","type":"post","link":"https:\/\/danielribes.com\/blog\/experimentando-con-llm-y-el-desarrollo-de-apps\/","title":{"rendered":"Experimentando con LLM y el desarrollo de apps"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Me he creado un repositorio en github para ir publicando mis experimentos de desarrollo de apps usando herramientas de Inteligencia Artificial. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/danielribes\/ailab\">https:\/\/github.com\/danielribes\/ailab<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Llevo ya bastante tiempo experimentando con herramientas IA pero de una manera poco ordenada y sin mantener un registro de pruebas y resultados, este repositorio resuelve esta situaci\u00f3n facilitando documentar cada nuevo experimento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lo he estrenado creando una app web (<strong>datachart.html<\/strong>) a la que llevaba un tiempo dando vueltas. Una simple app para llevar un registro de fechas y valores asociados a esas fechas y ver graficamente la evoluci\u00f3n en el tiempo.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Para crear datachart.html he usado Claude 3.5 Sonnet y los requerimientos eran muy simples, este ha sido el prompt inicial:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>necesito una app web en html\/js para registrar fechas asociadas a un valor, por ejemplo:\n\n20\/02\/2024, 45\n21\/02\/2024, 45\n22\/02\/2024, 47\n23\/02\/2024, 43\n...\n\nLa UI tiene que tener un formulario con el campo fecha y el campo valor y a medida que se van rellenando pares de fecha\/valor se va a\u00f1adiendo una nueva fila de campo fecha\/valor.\n\nEstos datos se tienen que guardar localmente en una bd local en el navegador y tienen que actualizar un grafico de linea que en el eje x muestra las fechas y en el y los valores<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Claude ha generado una primera versi\u00f3n usando React y la libreria Recharts para el gr\u00e0fico, que ha provocado un error en la carga, al pedirle arreglarlo ha creado una nueva versi\u00f3n eliminando React y pasando tambien a Charts.js para el grafico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este es el resultado final de esta primera versi\u00f3n de datachart.html:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/danielribes.com\/blog\/wp-content\/uploads\/2025\/02\/screenshot.png\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"763\" src=\"https:\/\/danielribes.com\/blog\/wp-content\/uploads\/2025\/02\/screenshot.png\" alt=\"Screenshot de la app datachart.html creada con Claude 3.5 Sonnet\" class=\"wp-image-836\" srcset=\"https:\/\/danielribes.com\/blog\/wp-content\/uploads\/2025\/02\/screenshot.png 808w, https:\/\/danielribes.com\/blog\/wp-content\/uploads\/2025\/02\/screenshot-300x283.png 300w, https:\/\/danielribes.com\/blog\/wp-content\/uploads\/2025\/02\/screenshot-768x725.png 768w, https:\/\/danielribes.com\/blog\/wp-content\/uploads\/2025\/02\/screenshot-318x300.png 318w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El c\u00f3digo que ha generado Claude y el resumen (hecho por el mismo Claude) de la conversaci\u00f3n y requerimientos lo puedes ver el <a href=\"https:\/\/github.com\/danielribes\/ailab\/tree\/main\/datachart\" target=\"_blank\" rel=\"noreferrer noopener\">repositorio de datachart.html<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Me he creado un repositorio en github para ir publicando mis experimentos de desarrollo de apps usando herramientas de Inteligencia Artificial. https:\/\/github.com\/danielribes\/ailab Llevo ya bastante tiempo experimentando con herramientas IA pero de una manera poco ordenada y sin mantener un registro de pruebas y resultados, este repositorio resuelve esta situaci\u00f3n facilitando documentar cada nuevo experimento. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[113],"tags":[78,77],"class_list":["post-834","post","type-post","status-publish","format-standard","hentry","category-ai-ml","tag-ai","tag-claude-3-5-sonnet"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/posts\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":13,"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/posts\/834\/revisions"}],"predecessor-version":[{"id":849,"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/posts\/834\/revisions\/849"}],"wp:attachment":[{"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/categories?post=834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielribes.com\/blog\/wp-json\/wp\/v2\/tags?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}