Cómo construí un SaaS de generación de iconos con IA en un día
Índice de Contenidos
- Introducción
- Descripción de la aplicación
- Cómo funciona la aplicación
- Registro e inicio de sesión
- Compra de créditos
- Generación de iconos
- Almacenamiento de iconos
- Configuración y despliegue en Amazon Amplify
- Base de datos Planet Scale
- Integración con Stripe
- Planes futuros y monetización
- Conclusiones
Creando mi primera aplicación de software como servicio en un día
Todo está yendo bien, ¿cómo les va? Hoy quiero compartir con ustedes mi experiencia al intentar desarrollar mi primera aplicación de software como servicio (SaaS, por sus siglas en inglés) en un solo día. Mientras navegaba por Twitter, me encontré con una publicación de alguien que había creado un generador de iconos utilizando inteligencia artificial (IA) y pensé: ¿por qué no desafiarme? ¿Qué tan difícil puede ser hacerlo en un solo día? Así que decidí ponerme a trabajar y esto es lo que logré.
Descripción de la aplicación
La aplicación que construí es una aplicación web desarrollada en Next.js, utilizando Next Auth para el inicio de sesión social. La idea principal es permitir a los usuarios generar iconos personalizados basados en criterios de selección. La aplicación está conectada a Stripe, lo que permite a los usuarios comprar créditos para generar los iconos. Cada usuario comienza con cero créditos y puede adquirir 50 créditos por $5. Una vez que los usuarios han comprado créditos, pueden escribir una descripción, seleccionar un esquema de color y un estilo para los iconos, y generar las imágenes.
Cómo funciona la aplicación
1. Registro e inicio de sesión
Para comenzar a utilizar la aplicación, los usuarios deben registrarse e iniciar sesión. Actualmente, solo ofrecemos la opción de inicio de sesión con una cuenta de Gmail utilizando Next Auth. Ten en cuenta que aún no he implementado la opción de inicio de sesión con Magic Link, pero eso está en mi lista de tareas pendientes.
2. Compra de créditos
Una vez que los usuarios han iniciado sesión, pueden comprar créditos para generar los iconos. Para Ello, simplemente deben hacer clic en la opción "Comprar créditos", que los redirigirá a una página de Stripe. Allí podrán realizar el pago de $5 para obtener 50 créditos.
Pros:
- Proceso de compra de créditos simple y seguro.
- Integración con Stripe facilita el pago.
Cons:
- Por el momento, solo se aceptan pagos a través de Stripe.
3. Generación de iconos
Una vez que los usuarios han adquirido créditos, pueden proceder a generar sus propios iconos. En la página principal de la aplicación, los usuarios pueden escribir una descripción y seleccionar un esquema de color y un estilo para los iconos. Al hacer clic en el botón "Generar iconos", se realiza una solicitud a la API de Open AI a través de mi API de Next.js.
Es importante tener en cuenta que cada vez que se Genera un icono, se realiza un Cargo en mi cuenta de Open AI. Actualmente, cada solicitud tiene un costo de 0,2, es decir, 2 centavos de dólar. Por lo tanto, si un usuario genera dos iconos, el costo total sería de 4 centavos.
Pros:
- Posibilidad de generar iconos personalizados basados en criterios de selección.
- Integración con la API de Open AI permite obtener resultados de Alta calidad.
Cons:
- Costo asociado a la generación de iconos.
4. Almacenamiento de iconos
Una vez que se generan los iconos, estos se guardan en S3 y se asocian al usuario que los ha generado. Actualmente, los iconos generados se guardan en un bucket de S3 y los usuarios tienen la opción de descargarlos. Sin embargo, aún debo implementar la funcionalidad que permita a los usuarios ver los iconos generados en colecciones anteriores.
Pros:
- Almacenamiento seguro de iconos generados.
- Posibilidad de descargar los iconos generados.
Cons:
- No se puede acceder a los iconos generados anteriormente.
Configuración y despliegue en Amazon Amplify
Para el despliegue de mi aplicación, decidí utilizar Amazon Amplify, una herramienta que permite desplegar fácilmente aplicaciones web en AWS. Amplify se integra directamente con mi repositorio de Git y se encarga de construir y desplegar automáticamente mi aplicación.
Pros:
- Despliegue sencillo y automático de la aplicación.
- Integración con Git permite mantener un flujo de trabajo eficiente.
Cons:
- Aún no he comprado un dominio único para mi aplicación.
Base de datos Planet Scale
Para almacenar los datos de los usuarios, como los créditos y los iconos generados, utilizo una base de datos escalable en Planet Scale. Al utilizar esta base de datos, aseguro un rendimiento óptimo y una alta disponibilidad de los datos.
Pros:
- Base de datos escalable para almacenamiento de datos.
- Rendimiento y disponibilidad garantizados.
Cons:
- No es posible realizar consultas directamente desde la interfaz de la aplicación.
Integración con Stripe
Para gestionar el proceso de compra de créditos, he integrado la aplicación con Stripe, una plataforma de pagos en línea. Stripe me brinda una manera segura y confiable de procesar los pagos de los usuarios.
Pros:
- Proceso de compra de créditos seguro y confiable.
- Integración con Stripe facilita la gestión de pagos.
Cons:
- Actualmente, solo se aceptan pagos a través de Stripe.
Planes futuros y monetización
Si esta aplicación logra obtener ganancias significativas, estoy considerando agregar nuevas funcionalidades y características. Una de ellas podría ser adquirir un dominio único y publicar y promocionar aún más la aplicación mediante estrategias de optimización para motores de búsqueda (SEO).
Pros:
- Potencial para agregar más funcionalidades y características a la aplicación.
Cons:
- Actualmente no se ha monetizado la aplicación de manera significativa.
Conclusiones
Esta ha sido mi primera experiencia en la creación de una aplicación de software como servicio (SaaS). Si has sido un seguidor fiel de mi canal y alguna vez he compartido contenido que te ha ayudado a conseguir un empleo o una pasantía, te agradecería mucho si pudieras utilizar esta aplicación, comprar algunos créditos y brindarme tu feedback. Para mí, esto sería como una forma de donación y me animaría a seguir desarrollando proyectos de este tipo.
Recuerda que, hasta el momento, la aplicación no permite ver los iconos generados anteriormente, pero estoy trabajando en agregar esa funcionalidad. Agradezco tu paciencia y comprensión.
Si te interesa aprender más sobre cómo desarrollé esta aplicación y obtener el código fuente, déjame un comentario y consideraré la posibilidad de crear un curso donde explique paso a paso todo el proceso.
¡Muchas gracias por tu atención y feliz codificación!
FAQ (Preguntas frecuentes)
¿Es seguro realizar pagos a través de Stripe?
Sí, realizar pagos a través de Stripe es seguro y confiable. Stripe utiliza los más altos estándares de seguridad para proteger la información financiera de los usuarios.
¿Puedo descargar los iconos generados?
Sí, una vez que los iconos han sido generados, tienes la opción de descargarlos en tu dispositivo.
¿Puedo utilizar los iconos generados comercialmente?
Es importante tener en cuenta las leyes de propiedad intelectual y las regulaciones de tu país o estado. Se recomienda utilizar los iconos generados como inspiración y no copiarlos directamente para uso comercial.
Recursos recomendados:
No difficulty
WHY YOU SHOULD CHOOSE TOOLIFY
