para crear algo por mi cuenta. Tenía ideas pero no tenía el tiempo y los recursos para trabajar en ellas.
La posibilidad de desarrollar aplicaciones u otros productos de software para no desarrolladores ha aumentado considerablemente con los avances de LLM, ya que Andrej Karpathy también enfatizó con el término “codificación de vibos”.
Quería arriesgarme con la codificación de vibos y crear una aplicación web. Este fue más un experimento para demostrar que puedo construir e implementar una aplicación en 2 días. No tenía que ser perfecto, el producto mínimo viable haría el trabajo.
En este artículo, proporcionaré una descripción general de alto nivel del proceso que incluye algunos consejos y trucos sobre las herramientas que utilicé y cuánto gasté en ellas. Si desea ver el producto final primero, es drawcraft.io.
Usé Loveable, Supabase y Netlify en este proyecto.
- Loveable es un constructor de aplicaciones AI muy popular.
- Supabase es una plataforma de desarrollo que maneja todos los procesos relacionados con el backend. La integración perfecta entre adorable y supabase es una ventaja importante.
- Netlify se utiliza para implementar la aplicación. También maneja las compras de nombres de dominio (si se desea).
Antes de comenzar a usar cualquiera de estas herramientas, vi algunos videos de YouTube en personas que usan y desarrollan con ellas. Me gustaría señalar que no tengo ninguna afiliación con ninguna de estas herramientas.
Edificio con adorable
Loveable tiene planes gratuitos y pagados. El plan Pro tiene múltiples opciones de precios con diferentes cantidades de crédito. Compré el más barato por $ 25 por mes, lo que le da 100 créditos. También obtienes 5 créditos gratuitos por día.
100 Credit no significa exactamente 100 indicaciones, pero el número de créditos que gasta es directamente proporcional a la cantidad de mensajes (es decir, indicaciones).
Cuando construyes con adorable, se sugiere tener un primer aviso detallado con instrucciones claras. Si escribe un primer aviso muy simple (por ejemplo, construir una aplicación de calendario), deberá escribir muchos mensajes (es decir, créditos de gasto) para personalizarlo. Además, agregar características complejas después puede ser un poco más complicado que declararlas al principio.
Dicho esto, aquí está el primer aviso que usé:
## Objective
Develop a web application that enables users to create customized drawing images using a large language model (LLM).
## Core Features
1. **User Input and Drawing Generation**
- Users can input a description of the drawing they desire, such as "Bugatti car," "Farmhouse," "Father and Kid," or "Cristiano Ronaldo."
- Users select a difficulty level for the drawing: Beginner, Medium, or Advanced.
- Beginner: Suitable for small children with simple, distinct lines.
- Medium: Moderate complexity with more details.
- Advanced: Highly detailed and complex drawings.
- The application reformats the user's input into a structured prompt for the LLM to generate the drawing.
- Users can view and download the generated image in PNG format.
2. **User Interface and Experience**
- Design a clean and modern landing page, similar to a SaaS platform, using whites and soft colors for a minimalist aesthetic.
- Ensure the interface is intuitive and user-friendly, facilitating easy navigation and interaction.
3. **Authentication and Subscription**
- Implement user authentication and signup functionality.
- Offer two subscription tiers:
- **Free Plan**: Allows up to 3 drawings per month.
- **Pro Plan**: Allows up to 20 drawings per month at a cost of $20 per month.
## Technical Requirements
- **Frontend**: Use modern web technologies to create a responsive and visually appealing user interface.
- **Backend**: Develop a robust backend to handle user requests, manage subscriptions, and interface with the LLM for drawing generation.
- **Database**: Implement a database to store user information, subscription details, and drawing history.
- **Security**: Ensure secure handling of user data and transactions, adhering to best practices in web security.
## Additional Considerations
- Optimize the application for performance and scalability to handle varying loads and user demands.
- Provide clear instructions and support for users to maximize their experience with the application.
- Consider implementing analytics to track user engagement and drawing preferences for future improvements.El primer diseño resultó ser bastante bueno, pero tuve que hacer algunos ajustes. Después de la solicitud inicial, utilicé principalmente mensajes con solo una instrucción. También puede editar el código en UI adorable para hacer cambios y estos cambios no consumen sus créditos.
Integración de Supabase
Aunque escribí en mi aviso inicial para agregar autenticación y suscripción, no funcionó debido a la falta de un backend adecuado. Aquí es donde Supabase entró en juego.
Es muy fácil agregar Supabase en tus proyectos adorables. Simplemente cree una cuenta de Supabase y siga los pasos para integrarla en su proyecto en UI adorable.
Una vez que se completa la integración de Supabase, Levable puede escribir el código para agregar autenticación del usuario, crear tablas de bases de datos, agregar funciones de borde para manejar las tareas de backend.
Uno problema Tenía que estaba enviando continuamente solicitudes para verificar el estado de suscripción del usuario. Detecté este problema verificando manualmente la actividad de la red. Tuve que gastar algunos mensajes para que Levable solucione este problema. Esto podría haber sido una solución fácil si eres un desarrollador. Podría resolverlo por mi cuenta, pero tuve que pasar un tiempo en él. Solo quería moverme rápido y usar adorable para todo.
Los límites de nivel libre de Supabase se consumieron rápidamente y tuve que actualizar a un plan pagado, que cuesta $ 25 por mes. Creo que el problema que mencioné anteriormente consumió la mayor parte de mi límite.
Integración de Github
Loveable hace que sea muy fácil integrar su cuenta de GitHub. Puede seguir las instrucciones sobre la interfaz de usuario adorable para completar la integración y crear el proyecto en GitHub.
Importante: Tenga en cuenta que cada cambio que es adorable en su proyecto se compromete automáticamente con la rama predeterminada en GitHub. Esta es una integración bidireccional, por lo que si realiza cambios en la rama predeterminada utilizando una IDE o UI de GitHub, estos cambios se aplican automáticamente a su proyecto adorable.
Otro problema Tuve sobre trabajar con múltiples ramas. En los documentos adorables, se afirma que lo adorable siempre se compromete con la rama predeterminada. La rama predeterminada era la rama principal al principio. Sin embargo, cuando creé una nueva rama y la establecí como rama predeterminada, este cambio no se reflejó en adorable. Se seguía comprometiéndose con la rama principal.
Uno de los videos de YouTube muestra una opción para cambiar la rama en la interfaz de usuario adorable, pero no pude encontrarla. Parece que la interfaz de usuario adorable cambió después de eso. Tal vez ya no exista. Esto no fue un bloqueo para mí, así que seguí adelante, pero definitivamente quiero aprender la solución a este problema.
Implementando la aplicación
Hay muchas alternativas para implementar su aplicación. No pensé mucho en este paso. He visto a algunas personas usando Netlify, así que solo quería probarlo.
Netlify ofrece un plan gratuito, que fue suficiente para mí. Le ofrece 300 créditos y cada implementa cuesta 15 créditos.
Una vez que cree una cuenta, puede agregar su proyecto GitHub en Netlify siguiendo las instrucciones.
Puede usar un nombre de dominio NetLify de forma gratuita o comprar un nombre de dominio personalizado a través de Netlify. Por supuesto, puede comprar su dominio en otro lugar y usarlo en Netlify.
Importante: Por defecto, NetLify implementa automáticamente su sitio cada vez que se compromete con su rama de producción. Como mencioné anteriormente, Loveable presiona automáticamente a la rama predeterminada. Entonces, si su rama predeterminada se usa como su rama de producción, lo que definitivamente no es una buena práctica, cada vez que realiza un cambio en adorable, Netlify hará una implementación. El problema con esto es que consumirá rápidamente sus créditos de Netlify gratuitos.
Rendimiento de Lovable
Lovable hizo un gran trabajo organizando una aplicación web completa. Sin embargo, el producto final no es perfecto. Una vez que implementé el sitio y comencé a usarlo, noté algunos problemas. Lo bueno es que todos eran problemas menores y pude tener un arreglo adorable.
También quería agregar algunos dibujos de muestra a DrawCraft.io. Intenté hacerlo a través de adorable adjuntando dibujos en el chat, pero no funcionó. Luego, subí los dibujos de muestra en la interfaz de usuario de GitHub y le pedí a Levable que creara un cuadro de “dibujos de muestra gratuitos” en el sitio usando esas imágenes y funcionó.
Cuanto gasté
| Costo (USD) | Detalle | |
| Amable | 25 | Suscripción mensual |
| Supabase | 25 | Suscripción mensual |
| drawcraft.io | 47 | Compra de nombre de dominio por 1 año |
| API OPERAI | 5 | Costo de las llamadas de API para solicitar y pruebas |
Gasté un total de $ 102 para crear mi primera aplicación web. Es una aplicación simple que hace algo simple, pero mi objetivo era ver si realmente podría crear un sitio web funcional utilizando herramientas basadas en IA.
Es importante tener en cuenta que algunos de estos gastos pueden usarse para otros proyectos. Ahora, depende de mí tener más ideas y convertirlas en acción.
Gracias por leer. Avíseme si tiene algún comentario.