As铆 es como construimos el sistema de gesti贸n de usuarios para SaaS MVP

Estamos regalando administraci贸n de usuarios, UI y facturaci贸n recurrente (con Stripe) gratis (licencia MIT). Hemos usado Adminator y lo hemos hecho funcional abofeteando a Firebase y Svelte en la parte superior. No te aburrir谩 – sabes que necesitas gesti贸n de usuarios. Sabes que necesitas una interfaz de usuario. La facturaci贸n es lo que mantiene viva a su empresa, as铆 que mejor que lo tenga tambi茅n. He aqu铆 c贸mo hacerlo de forma r谩pida y barata con el administrador, y poner en marcha su MVP esta semana. Una vez que haya construido el n煤cleo de su producto, deber铆a ser capaz de presentarlo al mundo y empezar a obtener ingresos con bastante rapidez. S贸lo que, por lo general, no es el caso – tenemos un cliente que gast贸 181.000 d贸lares en la construcci贸n de justo eso antes de contratarnos.Adminator tiene como objetivo ayudar a las empresas de SaaS a escalar r谩pidamente y centrarse en el n煤cleo de su producto.

Gesti贸n de usuarios

Como m铆nimo, necesita una interfaz de registro e inicio de sesi贸n. El objetivo es recopilar correos electr贸nicos, de modo que se pueda establecer un canal de comunicaci贸n con el usuario Tambi茅n es necesario filtrar el acceso y renderizar la interfaz de usuario de forma diferente, en funci贸n de la funci贸n del usuario (autenticado frente a invitado, administrador frente a regular frente a otras funciones). Ser铆a bueno poder dejar que el usuario se conecte y se registre en Facebook y Google(OAuth), bloquear ciertos usuarios, restablecer manualmente la contrase帽a desde el panel de control de un administrador maestro y verificar la direcci贸n de correo electr贸nico. 驴Qu茅 tal si se registra un usuario manualmente? Tambi茅n tenemos eso, tambi茅n. Para m谩s detalles sobre c贸mo se logra esto, lea la secci贸n Arquitectura .

UI

Tal vez usted ha invertido los 3-6 meses requeridos para aprender y ser productivo con React, Angular o Vue. Tal vez hasta te gusten esos marcos. No lo he hecho y no lo hago. Las startups est谩n atadas de recursos – centrarse en las mejores pr谩cticas de front-end es lo 煤ltimo que quieres hacer en un entorno hipercompetitivo. Svelte es pura maravilla – aplica perfectamente el principio de Pareto: obtener el 80% del beneficio con el 20% del esfuerzo. Obtienes componentes – piezas de c贸digo aisladas, compuestas de HTML, CSS y Javascript. Pero ninguno de los ganchos React, el ciclo de vida de los componentes y Webpack construyen jazz. Bailar谩s sobre el teclado como si fuera el 2004. Los ejemplos de componentes incluyen el Men煤 y el TopBar, pero tambi茅n Botones de diferentes colores, notificaciones y m谩s. Es uno de los pocos frameworks que he usado en 14 a帽os de codificaci贸n que no se interpone en el camino en absoluto – simplemente escribe HTML (con un sistema de plantillas), CSS y Javascript.explicaciones, pr谩cticas y ejemplos, en la secci贸n Architecture . Facturaci贸n Dashboard Hero Lite est谩 ligeramente integrado con Stripe. Puede generar una URL para una suscripci贸n de plan en el panel de control de facturaci贸n de franjas y asignarla manualmente en Firebase. Deber铆a ser suficiente para sus primeros 10-20 clientes. Arquitectura Despu茅s de clonar el panel de control admin de GitHub ver谩s dos carpetas importantes: src y public . Rollup (una herramienta de compilaci贸n) toma como entrada la carpeta src y produce la versi贸n p煤blica de su aplicaci贸n web. La carpeta p煤blica es lo que se despliega en el Hosting Firebase.

La carpeta source(src)

App.svelte es el punto de entrada para nuestro panel de control de administraci贸n. Obtiene una instancia de Firebase y renderiza diferentes componentes si el usuario est谩 conectado o no. Bastante directo, 驴verdad? Puede utilizar Firebase Cloud Functions para ocultar procesos de negocio sensibles, y tambi茅n denegar el acceso a un recurso si el usuario no ha iniciado sesi贸n. El MenuDrawer le indica al router qu茅 componentes renderizar, usando el

Link 

tag. Aqu铆 hay un ejemplo:

UI Elements

En el momento de la compilaci贸n, Svelte sabe c贸mo descomprimir el atributo LinkThe TopBar renderiza el correo electr贸nico del usuario y le permite a uno cerrar sesi贸n. ContentContainer lista las Rutas (p谩ginas) disponibles y mapea la ruta de la URL al Componente svelte. S贸lo se muestra cuando el usuario est谩 conectado (ver App.svelte). UserContainer tiene una estructura similar y maneja Login y Register.to run the project on localhost, from the project root, do:

npm instalar

npm run dev

Para desplegar en Firebase y hacer que todo el mundo vea su impresionante panel de control de administraci贸n: cambie las credenciales de firebase en src/common/resources/firebase/index.js(line 6) con las suyas propias, y desde la ra铆z del proyecto, ejecute:

despliegue de la base de fuego

Conclusiones

Este art铆culo trata de mantenerlo corto y dulce, para que usted se ponga en marcha en un abrir y cerrar de ojos. No hay sustituto para leer y retocar el c贸digo por ti mismo :)H谩znos saber en los comentarios lo que est谩s construyendo – siempre apasionado por las nuevas tecnolog铆as. Tambi茅n, h谩ganos saber si hay algo que necesite m谩s explicaciones. Y si has encontrado un error, no seas t铆mido, abre un n煤mero en GitHub.)

Etiquetas

StartupsSaasSaas StartupsDesarrollo Front EndFirebaseAdmin Dashboard TemplatesAdmin DashboardHistorias t茅cnicas m谩s recientes

Comentarios

Contin煤e la discusi贸n