Tu Primer Proyecto Web en 1 Hora: Iniciando con Elixir y un Asistente de IA

¿Quieres construir una aplicación web pero te sientes abrumado por la cantidad de lenguajes y herramientas que existen? ¿Y si te dijera que puedes construir tu primera funcionalidad en menos de una hora, aprendiendo un lenguaje moderno y potente mientras un asistente de IA hace el trabajo pesado por ti?

Bienvenido a Elixir y Phoenix. Y bienvenido al futuro del desarrollo de software.

Esta guía no requiere experiencia previa, solo curiosidad y ganas de construir. Usaremos Elixir, su framework web Phoenix, y un generador de código basado en IA (como GitHub Copilot, Codeium, o el asistente de tu editor preferido) para crear una aplicación simple pero funcional: un libro de visitas online.

¿Por Qué Elixir y Phoenix? ¿Y por qué con IA?

En pocas palabras, Elixir y Phoenix tienen una estructura tan clara y predecible que son el "lenguaje" perfecto para que una IA lo entienda. El framework tiene "opiniones fuertes" sobre dónde va cada pieza de código. Esto significa que puedes pedirle a tu asistente de IA que cree una funcionalidad completa, y lo hará siguiendo las mejores prácticas, casi como por arte de magia.

• Tú serás el arquitecto: Decidirás qué construir.
• La IA será tu albañil experto: Escribirá el código repetitivo y estructurado por ti.

Paso 1: La Instalación (Los únicos 15 minutos aburridos)

Esta es la única parte que requiere un poco de paciencia. Necesitas instalar Elixir y el generador de Phoenix.

1. Instala Elixir: Ve a la página oficial de instalación de Elixir y sigue las instrucciones para tu sistema operativo (Windows, macOS, o Linux).
2. Instala Phoenix: Una vez que tengas Elixir, abre tu terminal o línea de comandos y escribe:

   mix archive.install hex phx_new
   

3. Instala tu Asistente de IA: Asegúrate de tener una extensión como GitHub Copilot o Codeium instalada y activada en tu editor de código (como VSCode).

¡Listo! Esa es toda la preparación que necesitas.

Paso 2: Crear el Proyecto (El Rol del Arquitecto)

Ahora, vamos a decirle a Phoenix que cree el esqueleto de nuestra aplicación. En tu terminal, navega a la carpeta donde guardas tus proyectos y ejecuta:

mix phx.new guestbook --live

Esto crea una nueva carpeta llamada guestbook con todo lo necesario. La opción --live incluye Phoenix LiveView, una tecnología increíble que hace las aplicaciones interactivas sin necesidad de escribir JavaScript complejo.

Entra en el directorio y crea la base de datos:

cd guestbook
mix ecto.create

Ahora, abre la carpeta guestbook en tu editor de código.

Paso 3: Pídele a la IA que Construya el Libro de Visitas (La Magia Ocurre)

Aquí es donde todo cobra sentido. En lugar de buscar tutoriales y escribir docenas de líneas de código, vamos a darle una instrucción clara a nuestro asistente de IA.

En la terminal (dentro de la carpeta guestbook), vamos a usar el generador de Phoenix, pero guiado por una sola línea de "prompt". Escribe este comando:

mix phx.gen.live Blog Post posts name:string message:string

Analicemos este "prompt":

• mix phx.gen.live: Le decimos a Phoenix que queremos generar una funcionalidad interactiva (LiveView).
• Blog Post posts: Le damos el Contexto (Blog) y el Esquema (Post). Le estamos diciendo a la IA: "Vamos a gestionar 'Posts' dentro del contexto de un 'Blog'".
• name:string message:string: Le decimos los campos que queremos: un name (nombre) y un message (mensaje), ambos de tipo texto (string).

Phoenix (y tu asistente de IA que ha sido entrenado con esto) entenderá perfectamente y generará todos los archivos necesarios.

Paso 4: Conectar los Cables (Una sola línea de código)

La IA ha construido todas las piezas, pero necesitamos decirle a nuestra aplicación dónde mostrarlas.

1. Abre el archivo lib/guestbook_web/router.ex.

2. Busca la sección scope "/", GuestbookWeb do.

3. Dentro de ese bloque, añade la siguiente línea que la propia terminal te habrá sugerido:

   live "/posts", PostLive.Index, :index
   

Este es tu trabajo como arquitecto: decidir en qué URL (/posts) se va a mostrar la funcionalidad que la IA construyó.

Paso 5: Ejecutar y Disfrutar

Finalmente, ejecuta la migración para que la base de datos conozca nuestra nueva tabla posts:

mix ecto.migrate

Y ahora, inicia el servidor:

mix phx.server

Abre tu navegador y ve a http://localhost:4000/posts.

Verás una interfaz web completamente funcional donde puedes añadir, editar y eliminar entradas en tu libro de visitas. Todo esto, con apenas tres comandos y una línea de código escrita por ti.

Conclusión: Has Empezado a Programar

Acabas de experimentar el futuro del desarrollo. No te has perdido en detalles de sintaxis ni en la estructura de archivos. En su lugar, has actuado como un director de proyecto, definiendo qué querías construir y dejando que las herramientas inteligentes se encargaran de la ejecución.

Este es el poder de combinar un framework bien estructurado como Phoenix con la potencia de la IA. Ahora que tienes la base, puedes empezar a pedirle a tu asistente que modifique el código, añada nuevas validaciones o cambie el estilo. Tu viaje como desarrollador acaba de empezar, y lo has hecho por el carril rápido.

Abrazo. Bliss. 🤓