IA para desarrolladores web Introducción y configuración del proyecto

Introducción y configuración de IA para desarrolladores web

Si eres como yo, habrás notado el enorme auge de la tecnología de IA. Promete perturbar no solo la ingeniería de software, sino todas las industrias.

¡¡¡VIENEN POR NOSOTROS!!!

Solo bromeo ;P

He estado mejorando mi comprensión de qué son estas herramientas y cómo funcionan, y decidí crear una serie de tutoriales para que los desarrolladores web aprendan a incorporar la tecnología de IA en las aplicaciones web.

• Regex para los Científicos de Datos Modernos
• El Dilema de AutoML
• La nueva solución de código abierto de Vianai aborda el problema de la alucinación en la IA

En esta serie, aprenderemos cómo integrar los servicios de IA de OpenAI en una aplicación construida con Qwik, un marco de JavaScript centrado en el concepto de reanudabilidad (esto será relevante para entender más adelante).

Esto es lo que parece el esquema de la serie:

1. Introducción y configuración
2. Tu primera sugerencia de IA
3. Respuestas en tiempo real
4. ¿Cómo funciona la IA?
5. Ingeniería de sugerencias
6. Imágenes generadas por IA
7. Seguridad y confiabilidad
8. Implementación

Entraremos en los detalles de OpenAI y Qwik cuando sea necesario, pero me centraré principalmente en conocimientos de propósito general, herramientas e implementaciones que deberían aplicarse a cualquier marco o cadena de herramientas que estés utilizando. Trabajaremos lo más cerca posible de los fundamentos, y señalaré qué partes son únicas de esta aplicación.

Aquí tienes un pequeño adelanto.

Pensé que sería genial construir una aplicación que tome a dos oponentes y use IA para determinar quién ganaría en una pelea hipotética. Proporciona alguna explicación y la opción de crear una imagen generada por IA. A veces los resultados salen un poco extraños, pero eso es lo que lo hace divertido.

Espero que estés emocionado de comenzar porque en esta primera publicación, principalmente trabajaremos en…

Plantilla :/

Requisitos previos

Antes de comenzar a construir cualquier cosa, debemos cubrir un par de requisitos previos. Qwik es un marco de JavaScript, por lo que debemos tener instalado Node.js (y NPM). Puedes descargar la versión más reciente, pero cualquier versión superior a la v16.8 debería funcionar. Yo usaré la versión 20.

A continuación, también necesitaremos una cuenta de OpenAI para tener acceso a su API.

Al final de la serie, implementaremos nuestras aplicaciones en un VPS (Servidor Privado Virtual). Los pasos que seguiremos deberían ser los mismos sin importar qué proveedor elijas. Yo usaré los servicios de computación en la nube de Akamai (anteriormente Linode).

Configuración de la aplicación Qwik

Suponiendo que tenemos los requisitos previos solucionados, podemos abrir una terminal de línea de comandos y ejecutar el comando: npm create qwik@latest. Esto ejecutará la CLI de Qwik que nos ayudará a iniciar nuestra aplicación.

Te hará una serie de preguntas de configuración y luego generará el proyecto. Esto es cómo se veían mis respuestas:

Si todo funciona, abre el proyecto y comienza a explorar.

Dentro de la carpeta del proyecto, notarás algunos archivos y carpetas importantes:

• /src: Contiene toda la lógica empresarial de la aplicación
• /src/components: Contiene componentes reutilizables para construir nuestra aplicación
• /src/routes: Responsable del enrutamiento basado en archivos de Qwik; Cada carpeta representa una ruta (puede ser una página o un punto de API). Para crear una página, coloca un archivo index.{jsx|tsx} en la carpeta de la ruta.
• /src/root.tsx: Este archivo exporta el componente raíz responsable de generar la raíz del documento HTML.

Comenzar el desarrollo

Qwik utiliza Vite como un empaquetador, lo cual es conveniente porque Vite tiene un servidor de desarrollo incorporado. Admite ejecutar nuestra aplicación localmente y actualizar el navegador cuando los archivos cambien.

Para iniciar el servidor de desarrollo, podemos abrir nuestro proyecto en una terminal y ejecutar el comando npm run dev. Con el servidor de desarrollo en ejecución, puedes abrir el navegador e ir a http://localhost:5173 y deberías ver una aplicación muy básica.

Cada vez que hagamos cambios en nuestra aplicación, deberíamos ver esos cambios reflejados casi de inmediato en el navegador.

Agregar estilos

Este proyecto no se enfocará demasiado en el estilo, por lo que esta sección es totalmente opcional si quieres hacer tu propio estilo. Para mantener las cosas simples, usaré Tailwind.

El CLI de Qwik facilita la adición de los cambios necesarios, ejecutando el comando de terminal, npm run qwik add. Esto te mostrará varios complementos de Qwik disponibles para elegir.

Puedes usar las teclas de flecha para moverte hacia abajo hasta el complemento de Tailwind y presionar Enter. Luego te mostrará los cambios que realizará en tu código y te pedirá confirmación. Si todo se ve bien, puedes presionar Enter nuevamente.

Para mis proyectos, también me gusta tener un tema consistente, así que mantengo un archivo en mi GitHub para copiar y pegar estilos. Obviamente, si quieres tu propio tema, puedes ignorar este paso, pero si quieres que tu proyecto luzca tan increíble como el mío, copia los estilos de este archivo en GitHub en el archivo /src/global.css. Puedes reemplazar los estilos antiguos, pero deja las directivas de Tailwind en su lugar.

Preparar la página de inicio

Lo último que haremos hoy para llevar el proyecto a un buen punto de partida es hacer algunos cambios en la página de inicio. Esto implica hacer cambios en /src/routes/index.tsx.

Por defecto, este archivo comienza con un texto muy básico y un ejemplo para modificar el <head> del HTML mediante la exportación de una variable head. Los cambios que quiero hacer incluyen:

• Eliminar la exportación de head
• Eliminar todo el texto excepto el <h1>; Siéntete libre de agregar tu propio texto de título de página.
• Agregar algunas clases de Tailwind para centrar el contenido y hacer que el <h1> sea más grande
• Envolver el contenido con una etiqueta <main> para hacerlo más semántico
• Agregar clases de Tailwind a la etiqueta <main> para agregar un poco de padding y centrar el contenido

Estos son todos cambios menores que no son estrictamente necesarios, pero creo que proporcionarán un buen punto de partida para construir nuestra aplicación en la próxima publicación.

Así es como se ve el archivo después de mis cambios.

import { component$ } from "@builder.io/qwik";

export default component$(() => {
  return (
    <main class="max-w-4xl mx-auto p-4">
      <h1 class="text-6xl">Hola [emoji de saludo]</h1>
    </main>
  );
});

Y en el navegador, se ve así:

Conclusión

Eso es todo lo que cubriremos hoy. Una vez más, esta publicación se centró principalmente en eliminar las cosas básicas para que la próxima publicación pueda dedicarse a integrar la API de OpenAI en nuestro proyecto.

Con eso en mente, te animo a que pienses en algunas ideas de aplicaciones de IA que te gustaría construir. Habrá mucha flexibilidad para que le des tu toque personal.

Estoy emocionado de ver qué se te ocurre, y si quieres explorar el código con más detalle, lo publicaré en mi cuenta de GitHub.

We will continue to update Zepes; if you have any questions or suggestions, please contact us!