Fundamentos modernos y primera interacción con ia. Parte 1

Más allá de la aplicación web tradicional Como desarrollador con décadas de experiencia, he sido testigo y protagonista de la evolución de la web: desde los monolitos renderizados en servidor, pasando por la revolución de las SPAs (Single-Page Applications) con AJAX, hasta el auge de los frameworks De componentes Como reação. CADA ETAPA TRAJO Consigo Nuevos Patrones de Diseño, Desafíos de Rendimiento y Abstracciones. Hoy, nos Encontramos en el -Una transformación de magnitud semelhante: a era de las applicaciones de ia nativas. Este Capítulo no Fretende Enseñarte Um Programar (Seguruamento no Sería Un Buen Ejemplo um Seguir). SU Objetivo es Investigar Un Nuevo Modelo Mental Arquitectónico. Las Aplicaciones Que integrarmos con inteligncia Generativa artificial Nenhum filho simplifica a Aplicaciones Tradicionales con -se api de llm atornillada. Requieren Un Enfoque Fundamentalentine DifERENTE EM CUANTO A la RenderizaCión, El Manejo del Estado, Validación de Datos y la comunicación Entre Cliente y Servidor. Las herramiientas que hemos elegido – o roteador de aplicativos, digitoso e suportes, que não é preferencias, sino decisões arquitectónicas de deliberadas que respondem. Os abordos de Tres pilaram fundamentais: La Arquitectura de Renderizado de Next.JS: Cómo Los React Server Components (RSC) NOS PERMITENOS CREAR INTERFAÇÕES MOMESSAS RÁPIDAS Y SEGURAS, LENTSIMESTO INDISPENSÍVEL PARA LASSASS Y, A Menudo -A Menudo, lente, lente, losformes, lentas, lents. Typescript como Contrato de Sistema: Cómo USAMOS Tipos Avanzados y Validación con zod sem solo para la seguridad, sino para definir un “contrato” estritto con una entidad no determinista como un llm. Vercel ai sdk como capa de comunicación: cómo una capa de abstrancê bien desneñada nos permite mantener la agilidad y evitar el acoplamiente a un único proveed de ia en un ecoSistema que evoluciona a unsanocidada. Algunoções de preparar para reavaluar Patrones estabelecidos y Adotar un Nuevo Conjunto de Herramientes Mentales. Empecemos. Arquitectura Avanzada pt Next.JS: El Paradigma de Los React Server Components (RSC) El App Router de Next.JS não é um simples mejora Sobre el Pages Router; Es Un Cambio de Paradigma Completo Que Devuelve Gran Parte de la Lógica de Renderizado Al Servidor, Donde Siempre Debió é para Ciertas Tareas. Para Nosos, como Arquitectos de Aplicaciones de Ia, Estoneno Implicaciones Profundas. El Dúo Dinámico: componentes do servidor vs. componentes do cliente Clave Mental Modelo Um interiorizar es Que, POR Defecto, TODO ES ONV Server componente. Un rsc es un fragmento de ui que ejececta exclusivamento em el servidor, una Única vez durante el ciclo de vida de la petición. SU RESUTADO ES UNA DESCRIÇÃO DE LA LA (ONU FORMATO INTRAMEDIO AMMELHO A HTML) que ENVIA AL CLITERE. Caractersticas Clave de Los Server Components (RSC): JavaScript de Cliente Cero: No Envían Ni Una Sola Línea de Su Propio Código JavaScript Al Navegador. Esto ResultA En Un tti (tempo para interativo) Drálido Reducido. Acceso Directo al back -end: Acedere de pueden Diretoria A Recursos del Servidor (Bases de Datos, Sistemas de Archivos, APIs Internas, Variáveis ​​de Entorno Secretas) Sin Necesidad de Una Capa de Api Intermedia. Estolucionário para o contexto de obtener contexto o ejecectar lógica de back -end diretoria desde el componente que necesita. Renderizado asíncrono: pueden ser funciones assíncronos. Esto Operationas de Realizar de Licesite de Datos (EJ. Fetch, consulta um bbdd) y Esperar Su Resolución antes de completar el renderizado. Por Otro Lado, Cuando Necesitamos InterAtividadad (Manejar Evestos, Estado, Hooks de Ciclo de Vida), Marcamos un componente con la diretiva “Use Client”. Esto nenhum convierte solo um componente consecutivo em un un -o componente de cliente, sino que establece una frontera: ESE componente y Todos Los que importa (que não sean a vez rsc) forarán parte del bundle de javasscript que Envinea al cliente sua hidrataci. Patronas de compositões para Aplicaciones de ia la maestría não residem em sabre que não rsc o componente de cliente, sino en sabre cómo combinarlos. Para las las appliciones de ia, estos picones filho Cruciales: patrón de “cáscara estótica, contenido dinámico” (concha estática, conteúdo dinâmico): La Estructura Principal de La Aplicación (Layout, Navegación, Cabeceras) Sefina Como Como Como Como Rest. Filho estóticos, se Cargan instantáneafethe y No Cambian. Dentro de Esta Cásca, Las Áreas Interactivas (como Una Ventana de Chat O Un -Formulario de Prompt) SE definitivamente componentes do cliente. Esto nos da mejor de ambos mundos: Una Carga Ultrarrápida inicial y una interatividade rica donde se necesita. Streaming de Ui con Hacer que El Usuario Espere A que Toda La Página Cargue inaceptable. Los RSC SE Integran Nativamento con suspense. Podemos Envolver un componente rSc Que Realiza Una llamada a un llm en un suspense con sobre fallback (p. Ej., Un spinner). A seguir. Ações do servidor: MUTACIONES API SIN API SLACKLIGADO: SON FUNCIONES ASÍNCRONAS QUE SE DEFINIVERAÇÃO EM ELVIDOR (EN RSC O EN ON ON ONDRO CON “Use Server”) Pero que Pueden Invocar Directo Directe Desde Un Client Component. Simplifican radicalmente las mutacionas de datos. EN NUESTRO CONTEXTO, Ação do servidor da UNA ES A FORMA PERFENAÇA DE MANEJAR ELVIO DE ONU PODE DESDE ON FORMULOIO EN UN COMPONENTE DO CLIENTE A NUESTRA LÓGICA DE BENDENHO QUE LUMARÁ A LA IA, SIN TENER QURCSCRIRIREMENTE O UN GTERE A UN ENDPOIPE DEPI. Diagrama Arquitectórico Conceito: Dominar Esta Arquitectura es el primer paso para construir applicacionaes de ia que sean robustas y ofrezcan una experiência de usuario excepcional. Typescript para especialistas: Blindando la Interfaz con la Ia si tienes Experiência em javascript Seguro que tem visto cómo los sistemas de tipos han pasado de ser una curiosidad académica a una herramientra indispensável enredemas a avô escala. En elsarrollo de ia, tipiefrind ly mera seguridad de tops para convertirse en una herramienta de diseño de contratos. Nuestra interacción con llm es, por naturaleza, una comunicación con -un sistema no determinista. Nuestro trabajo como ingenieros es imponer determinismo y Estructura Sobre esa interacción. Inferencia y genéricos para abstracções Reutilizabas No NOS Detendremmos en la sintaxis básica. En Cambio, Nos Centraremos en Cómo Los Genéricos Avanzados nos permiten Construir Abstracciones Robustas. Por ejemplo, Podemos Crear Una Función de Envoltura para las llamadas a la ia que Maneje la Vidalación, El Los Los errores de forma genérica, Sin Importaic (Schema) De Los Respuesta Esperada: ASYN FUNÇÃO SAFAAICAL(Prompt: String, Schema: T): Promise <{Success: True, Data: Z.infer } | {Sucesso: false, erro: string}> {// … lógica de llamada a la ia … // … válido de lai respuesta contratel schema … // devolvemos un Tipo Discinado seguro} Diferente de modo de tela completa, o modo de tela de linha full -short de short de lap. Tipo completo. Zod: El Contrato Insutável Entre Humano Y Máquina Zod Es La Pieza Central de Nuestra Estrategia de Vidalación. Lo Tratamos como la Única fuente de verdad para la estrucura de los datos que fluyen hacia y desde el llm. Definición del Schema: ONU Esquema de Zod Es Más que Una Vidalación; ES UNA DECLARACION DE INTENCIONES. Defina la estructa exata que Esperamos. Inferencia de Tipos (Z.infer): La Magia de Zod reside em z.infer. Esto nos permissão derivar automático un Tipo de tipatescript Estático um partir de unidador de tempo de execução. SE ACABARON las Definiciones de Tipos Duplicadas y la desincronizaciaciEn Entre la Vidalación y El Tipado Estótico. El Método .Describe (): um Menudo Subestimado, El Método .Describe () ES Crucial En El DeSarrollo Con. Cuando en capítulos posteriores pidamos al llm que genere json estrucurado, las descriptsciones que proporcionamos en elshema de zod actúan como “sugere” o instrucciona para el modelo, mejorando drásticamento. Flujo de datos validado: Este doble filtro, en la entrada y en la salida, es nuestra principal línea de defensa contra respuestas inesperadas o malformadas del LLM, garantizando que el resto de nuestra aplicación siempre opere sobre datos predecibles y seguros. VERCEL AI SDK CORE: LA CAPA DE COMUNICACAN UNIFICADA EL ECOSISTEMA DE la IA GERENCIVA ESTÁ EN ON ON ON ESTUD DE CAMBIO CONSTANTE. Los Modelos se atualiza, Nuevos provou emergentes em Los precios fluctúan. ACOPLAR NUESTRA LÓGICA DE NEGOCIO Diretor e a Api de Un Proveed Específica (Sea Openai, Google, Antrópica, etc.) ES Una Receta para la obsolescencia Técnica y la Rigidez. El Vercel ai sdk nos proporciona una capa de abstracción eSenCial Nos aíslla de esta Complejidad. El Principio “Proveedor Agnóstico” La Belleza del Ai SDK Radica en SU ​​Simplicidad. Cambiar de Un Modelo de Google Um antropal (suponieso capacidades similares) es, idealento, un cambio de una sola línea: // de: const modelo = google (‘gemini-2.5-pro’); // a: const modelo = antropic (‘Claude-3-Opus-20240229’); Digite o modo de tela cheia de saída do modo de tela completa Esta abstracção no permissão Permite, Comparar Y Pivotar Entre Provedores con -un coste de ingeniería mínimo, una capacidad estratégica en este campo. Anatomía de generatetext generatetext es nuestra herramienta de trabajo para interacções fundamentais para interacções sem conversação. Su Firma encapsula los elementos esenCiales de una llamada a un llm: const {text, uso, realização de acabamento} = aguardar generateTeTEXT ({modelo: google (‘gemini-12.5-pro’), sistema: ‘eres uns como assistente e-literatura del siglo de outrina’, Possuir: ‘,’ eres: ‘ANSISTENTE EN Literatura del siglo de ourro.’ }); Digite Modo de tela cheia de saída Modo de tela cheia Modelo: La Instancia del Modelo Que Hemos Elegido, Abstraís por El Sdk. Sistema: El “System Prompt” es Nuestra Optunidad Para Dar al Modelo Una Personalidad, On Una Reglas de Comtortamiento Generales Que Aplicarán A Toda La Interacción. ES UNA DE LAS HERRAMIENTAS MÁS POTENTES DEL ENGENHEIRA PROMPENSA. Prompt: La Instrucción Específica para Esta Llamada. El Objeto Devuelto nos do Solo El Text Generado, Sino También Metadatos Valiosos Como Uso (El Recuento de Tokens, para o Controle de Cosses) e o texto de TEXTO). El Poder Del Streaming Con StreamText para Cualquier Aplicación InterActiva, El Streaming NO ES UNA OPCION, ES UNA NECESIDAD. StreamText es La Contaparte Asíncrona de GenerateText. En Lugar de Esperar a que La Respuesta Conclua Esté Disponível, NOS DevuelVE não assinciterável Que Podemos consumos A Medida Que Los Los “Tokens” Llegan Desde El Servidor. Esto se integra perfectamentmente con la arquitecta de rsc y suspense que discutimos. EN EL Backend, o manipulador de rota da ONU PUEDE USAR STREAMTEXT Y DEVOLVER EL STREAM DIRECTERENTE. EN EL FRONTEND, EL GONGE USECHAT (Que Vemos em El Próximo Capítulo) Consumerá Este fluxo para renderizar la respuesta de forma progressiva, mejorando drsticamente la experiência de usuario percibida. Conclusão de la Parte Teórica Hemos Sentado Las Bases. Sem o hemos Escrito Una Aplicación de Ia Conclusão de Todavía, Pero Hemos Hecho Algo Más IMPORTA: Hemos estabelecido una arquitecta robusta y un modelo de preparação mental para los desafíos que os esperan. Hemos entrendido que la combinación de renderizado em servidor (rSc) para la estructura, válida estricta de contratos (datilografinia/zod) para los datos y una capa de comunicació agnósty (vercel ai sdk) Seguridad Y Rendimiento Necesarios para Construir Aplicaciones De Ia de Nivel Profesional. CON ESTOS CIMIENTOS EN SITIO, ESTAMOS LISTOS PARA CONSTUIR NUESTRA Primera Aplicación Interativa. Enl próxxxos Capítulos, Tomarmos estos conceitos e los Aplicaremos para crear un -chatbot en tiempo real, Manejando el Streaming de Principio A Fin.

Fonte