¡Qué poco ambicioso era, hace unos meses, cuando publiqué “Vulcan: 15 días para una aplicación”! 15 días son 3 semanas de trabajo. Si incluye el tiempo de concepción, es un mes de retraso. ¿Y si pudiéramos reducirlo a una semana ? ¿Y si pudiéramos desarrollar aplicaciones listas para producción en cuestión de días ? Así es como estamos logrando este objetivo.
Día 0: algo de contexto
Deje de llamarse Startup solo porque produce código descuidado más rápido que otros
Dirijo una empresa de consultoría y desarrollo llamada LBKE. Tenemos un profundo interés en las tecnologías que ayudan a producir aplicaciones de alta calidad en un período de tiempo muy limitado. Piense en React Native + Expo para dispositivos móviles o Meteor para aplicaciones web.
A lo largo de los años, la calidad esperada de los productos de valor mínimo (MVP) ha aumentado. La gente está harta de prototipos de baja calidad vendidos como “productos”.
Ahora, quieren su software sin errores (¡de ninguna manera!), Quieren una buena UX (¡qué exigentes son!), Quieren herramientas que realmente respondan a sus necesidades (¡uf!). Y, por supuesto, no quieren pagar más por eso.
Hacia la aplicación de 4 días
Para el emprendedor, diseñar y construir un producto adorable mínimo es mucho trabajo. Pero el dinero es escaso y el tiempo es dinero, por lo que debe ser inteligente al gastarlo.
Nuestro objetivo: poder producir una aplicación SaaS en 4 días. No nos referimos a una aplicación desechable que no soportará un mayor desarrollo. Creemos que las tecnologías bien diseñadas deberían permitir tanto un desarrollo a largo plazo como un desarrollo muy rápido: escalar hacia arriba y hacia abajo . Para la mayoría de los proyectos, no hay necesidad de tecnologías de creación de prototipos. Excepto si construyes naves espaciales, pero no lo haces, ¿verdad?
Además, no nos gusta depender de servicios / software de terceros que abren sitios web con unos pocos clics. Si su producto es verdaderamente innovador, probablemente se sienta muy limitado por dichos servicios.
Entonces, ¿cómo logramos este milagro sin usar una varita mágica? Descubrámoslo a través de un ejemplo de la vida real, GestiResto, una aplicación web que ayuda a los propietarios de restaurantes a gestionar sus recetas. Nota al margen: vivo en Francia, aquí no bromeamos sobre la comida, así que realmente tomé este proyecto en serio.
Día 1: Escogiendo nuestra nave espacial
Conoce Vulcan.js, también conocido como meteorito con esteroides
Meteor es un famoso marco de JavaScript de pila completa. Desde sus inicios, siempre ha enfatizado la productividad y la experiencia del desarrollador. Fue pionero en muchas características y patrones asombrosos, como el desarrollo isomórfico (reutilizar el mismo código del lado del servidor y del lado del cliente).
Vulcan.js es básicamente los buenos elementos de Meteor, además de los buenos elementos del ecosistema JavaScript, en un solo marco. Se basa en las últimas tecnologías: React para el frontend y Apollo (GraphQL) para la comunicación cliente / servidor.
Como beneficio adicional, incluye muchos paquetes y ejemplos de las funciones más comunes (enviar boletines, agregar un foro, etc.). Vulcan es el nieto directo de la famosa aplicación / framework Telescope Meteor, ha sido creado por Sacha Greif. Por lo tanto, se beneficia de años de experiencia a pesar de su modernidad.
Si desea saber más sobre Vulcan y cómo ayuda a reducir el tiempo de desarrollo, puede consultar mi artículo anterior en DailyJS.
Por lo tanto, Vulcan.js es definitivamente un candidato sólido para cumplir con nuestro plazo de 4 días autoimpuesto.
Un sistema de gestión de usuarios listo para usar
Una de las características más queridas de Vulcan es su sistema de cuentas, que hereda de Meteor. Incluye registro / inicio de sesión / cierre de sesión, gestión de permisos, flujos de trabajo de inscripción / contraseña olvidada (+ envío de correo electrónico mediante programación) y una interfaz de usuario agradable. Ah, y también es bastante fácil agregar autenticación de terceros con servicios como Google Oauth.
La administración de cuentas es algo en lo que NO querrás pensar en las primeras etapas del ciclo de vida de tu aplicación. ¡Cuántas horas se han perdido configurando Passport.js! La cantidad de servicios de autenticación de pago como Auth0 muestra que este problema aún no se ha resuelto, por lo que es realmente una característica muy buena.
Entonces, nuestro primer día ha sido bien aprovechado. Ahora tenemos un sistema completo de administración de usuarios que incluye base de datos, servidor, UI y back-office, y configuramos un diseño de UI de material agradable con el tiempo restante.
Día 2: Alojamiento
Alojamiento en AWS con Meteor Up
¿Por qué alojar ya en el día 2? Porque la vida nos enseñó que es una muy mala idea probar tu aplicación en producción el último día. De manera ágil, una función solo se realiza cuando se valida en un contexto de la vida real. Por lo tanto, no podemos considerar que la aplicación esté configurada si no la ejecutamos en un entorno de producción.
Meteor Up es una herramienta maravillosa para implementar automáticamente aplicaciones Meteor (también las aplicaciones Vulcan) en un servidor distante. Maneja todo, desde la contenedorización de la aplicación con Docker hasta la generación de certificados SSL con Let's Encrypt. La configuración es fácil, la implementación es un comando de una línea. Apenas tiene inconvenientes.
Elegí AWS para el alojamiento. Tiene la gran ventaja de proponer servicios gratuitos durante 12 meses. Debo admitir que tuve dificultades para configurar mi primera instancia EC2. Sin embargo, hay muchos tutoriales en la web y vale la pena el esfuerzo inicial. Además, actualmente estoy escribiendo un paquete para habilitar la copia de seguridad diaria de la base de datos MongoDB en AWS S3 para proteger sus datos.
Una aplicación de puesta en escena en Now + Mongolab de Zeit
Tarde o temprano, deberá probar que su aplicación funciona en producción, sin enviarla realmente a producción. Eso es lo que llamamos un entorno de puesta en escena. También puede usar AWS, pero probemos una solución gratuita para reducir costos.
El servicio Now de Zeit es adecuado para este uso. Ofrece alojamiento gratuito. Puede utilizar mLab para la base de datos, ya que también proporciona un entorno de zona de pruebas gratuito. Para ser honesto, no tengo mucho que decir aquí, porque la configuración es tan fácil como ABC y está completamente documentada aquí. Ni siquiera un error. ¿Cuál es mi propósito como desarrollador si no hay errores?
Bien, entonces, al final del día 2, nuestra aplicación está en producción y tenemos un entorno de demostración intermedio. ¡Agradable! Eso es genial, porque menos tiempo para funciones genéricas es más tiempo para funciones valiosas.
Día 3: Lógica empresarial
Una aplicación es un montón de formularios y listas.
Ahora, vayamos al grano. La mayoría de los componentes de una aplicación se pueden separar en 3 grandes categorías: Lista, Formulario y Detalles. Este modelo se aplica a MUCHOS sitios web.
Ver Medio: la página de inicio contiene una lista de artículos. Esta página es una página de "Detalles" del artículo que está leyendo. En la parte inferior, encontrará una lista de comentarios con un formulario de comentarios. Incluso el botón de "aplausos" de la izquierda (en el que te invito a hacer clic concienzudamente) es un componente simplista similar a la forma.
Buenas noticias: Vulcan incluye una gran cantidad de ayudantes para facilitar la creación de componentes List, Form y Details. Incluye buenos resolutores GraphQL y React HOC. Apenas necesitas escribir el tuyo. Incluso hay algunos componentes de React que funcionan de inmediato. El más avanzado de ellos es SmartForm, que genera automáticamente un formulario de creación / edición personalizable para cualquier colección.
No enumeraré todas las características que Vulcan.js tiene para ofrecer, pero básicamente puede confiar en él para que su proceso de desarrollo sea realmente rápido.
Crear una receta (o proponer una aplicación o publicar un artículo o…)
En GestiResto, las 2 funciones principales son la creación y el listado de recetas. El formulario de creación de recetas debe mostrar estadísticas. Los detalles son confidenciales, por lo que aquí hay una captura de pantalla de un formulario equivalente desarrollado para Awesome Vulcan.
Pero eso no importa, porque aquí está el punto: Vulcan puede generar automáticamente formularios listos para usar para cualquier tipo de datos que pueda imaginar, ya sea una receta o un helicóptero. Quiero decir, la representación JSON de un helicóptero.
La lista de recetas es aún más sencilla. Nos enfocamos en construir un bonito RecipeItemque permita a los usuarios obtener una vista previa rápida de la información de la receta, así como también activar algunas acciones comunes (exportar, eliminar…). Por supuesto, incluye una entrada de búsqueda basada en texto, de forma gratuita.
Día 4: ¡Entrega!
Como hicimos la mayoría de las partes valiosas del trabajo el día 3, nos queda un último día para limpiar y mejorar la aplicación. Ahora podemos implementar las características que nos encantan: un componente que calcula automáticamente el precio final de su receta, un botón que genera una buena exportación a PDF y una página de inicio que marca la diferencia.
Finalmente, estamos en el Día 5. El cliente acaba de probar la aplicación entregada ayer por la noche y le dice: “¡He probado la aplicación, es agradable! Pienso en agregar la característica X a la página Y, ¿cuánto tiempo lleva agregar el componente Z en su opinión?… ”. ¡Y entonces sabes que hiciste un buen trabajo!
¿Quiere crear su propia aplicación en 4 días?
Eche un vistazo a nuestra aplicación de código abierto Awesome Vulcan. Proporciona una base reutilizable para aplicaciones profesionales con un aspecto Material UI. También demuestra el uso de algunos paquetes que implementamos.
¡Espero que te ayude en tu camino hacia la aplicación de 4 días!
Soy cofundador de la empresa francesa Lebrun Burel Knowledge Engineering (LBKE) - //www.lebrun-burel.com
¡Siempre feliz de hablar sobre código, aprendizaje automático, innovación y espíritu empresarial!