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