Crea una aplicación sin servidor rápidamente con Zipper Escribe TypeScript, Descarga todo lo demás

Crea una aplicación sin servidor con Zipper en TypeScript, Descarga todo lo demás

Recuerdo la primera vez que vi una demostración de Ruby on Rails. Con muy poco esfuerzo, los demostradores crearon una aplicación web de pila completa que podría usarse para propósitos comerciales reales. Quedé impresionado, especialmente cuando pensé en cuánto tiempo me llevó entregar soluciones similares utilizando los frameworks Seam y Struts.

Ruby fue creado en 1993 para ser un lenguaje de script fácil de usar que también incluyera características orientadas a objetos. Ruby on Rails llevó las cosas al siguiente nivel a mediados de la década de 2000, llegando en el momento adecuado para convertirse en la tecnología elegida para los esfuerzos iniciales de inicio de Twitter, Shopify, GitHub y Airbnb.

Comencé a hacerme la pregunta: “¿Es posible tener un producto, como Ruby on Rails, sin necesidad de preocuparse por la infraestructura o la capa de datos subyacente?”

Fue entonces cuando descubrí la plataforma Zipper.

• Principales artículos importantes de Visión por Computadora de la semana del 11/9 al 17/9
• Cómo la IA está generando cambios en las salas de redacción de todo el mundo
• ¿Puede ser más rentable la segmentación de video? Conoce DEVA Un enfoque de segmentación de video desacoplado que ahorra en anotaciones y generaliza en múltiples tareas.

Acerca de Zipper

Zipper es una plataforma para construir servicios web utilizando funciones sencillas de TypeScript. Utilizas Zipper para crear applets (no relacionados con Java, aunque comparten el mismo nombre), que luego se construyen e implementan en la plataforma de Zipper.

Lo más genial de Zipper es que te permite centrarte en codificar tu solución utilizando TypeScript, y no tienes que preocuparte por nada más. Zipper se encarga de:

• Interfaz de usuario

• Infraestructura para alojar tu solución

• Capa de persistencia

• API para interactuar con tu applet

• Autenticación

Aunque la plataforma está actualmente en beta, está abierta para que los consumidores la utilicen. En el momento en que escribí este artículo, había cuatro plantillas disponibles para ayudar a los nuevos adoptantes a comenzar:

• Hola Mundo: un applet básico para que puedas comenzar

• Plantilla CRUD: ofrece una lista de tareas donde se pueden crear, ver, actualizar y eliminar elementos

• Plantilla de aplicación Slack: proporciona un ejemplo de cómo interactuar con el servicio de Slack

• Código generado por IA: expresa tu solución en lenguaje humano y permite que la IA cree un applet por ti

También hay una galería en la plataforma Zipper que proporciona applets que se pueden bifurcar de la misma manera que los repositorios basados en Git.

Pensé que pondría a prueba la plataforma Zipper y crearía un applet para las elecciones.

Caso de uso de la boleta de la asociación de propietarios (HOA)

El concepto de asociación de propietarios (HOA, por sus siglas en inglés) comenzó a ganar impulso en los Estados Unidos en el siglo XX. Las subdivisiones formaron HOAs para encargarse de cosas como el cuidado de las áreas comunes y para establecer reglas y pautas para los residentes. Su objetivo es mantener la calidad de vida de la subdivisión en su conjunto, mucho después de que el constructor de viviendas haya terminado el desarrollo.

Las HOAs a menudo llevan a cabo elecciones para permitir a los propietarios votar por el candidato que mejor se ajuste a sus puntos de vista y perspectivas. De hecho, el año pasado publiqué un artículo sobre cómo se podría crear una boleta de HOA utilizando tecnologías Web3.

Para este artículo, quería seguir el mismo enfoque utilizando Zipper.

Requisitos de la boleta

Los requisitos para el applet de la boleta son:

1. Como propietario de la boleta, necesito la capacidad de crear una lista de candidatos para la boleta.

2. Como propietario de la boleta, necesito la capacidad de crear una lista de votantes registrados.

3. Como votante, necesito la capacidad de ver la lista de candidatos.

4. Como votante, necesito la capacidad de emitir un voto por un solo candidato.

5. Como votante, necesito la capacidad de ver el recuento actual de votos emitidos para cada candidato.

Además, pensé que también sería bueno tener algunos objetivos adicionales:

1. Como propietario de la boleta, necesito la capacidad de borrar todos los candidatos.

2. Como propietario de la boleta, necesito la capacidad de borrar todos los votantes.

3. Como propietario de la boleta, necesito la capacidad de establecer un título para la boleta.

4. Como propietario de la boleta, necesito la capacidad de establecer un subtítulo para la boleta.

Diseñando la Aplicación de la Boleta

Para comenzar a trabajar en la plataforma Zipper, navegué a zipper.dev y hice clic en el botón Iniciar Sesión. A continuación, seleccioné una fuente de autenticación:

Una vez iniciada la sesión, utilicé el botón Crear Aplicación desde el panel de control para crear una nueva aplicación:

Se genera un nombre único, pero este se puede cambiar para identificar mejor su caso de uso. Por ahora, dejé todas las configuraciones predeterminadas y pulsé el botón Siguiente – lo que me permitió seleccionar entre cuatro plantillas diferentes para la creación de la aplicación.

Comencé con la plantilla CRUD porque proporciona un ejemplo sólido de cómo funcionan los flujos comunes de creación, visualización, actualización y eliminación en la plataforma Zipper. Una vez que se creó el código, la pantalla aparece como se muestra a continuación:

Con una aplicación completamente funcional en su lugar, ahora podemos actualizar el código para cumplir con los requisitos de uso de la boleta de la HOA.

Establecer Elementos Centrales

Para la aplicación de la boleta, lo primero que quería hacer era actualizar el archivo types.ts como se muestra a continuación:

Quería establecer valores constantes para el título y el subtítulo de la boleta dentro de un nuevo archivo llamado constants.ts:

Para permitir que solo el propietario de la boleta realice cambios en ella, utilicé la pestaña Secrets de la aplicación para crear un secreto de propietario con un valor de mi dirección de correo electrónico.

Luego introduje un archivo common.ts que contenía la función validateRequest():

De esta manera, pude pasar el contexto a esta función para asegurarme de que solo el valor en el secreto owner pueda realizar cambios en la boleta y los votantes.

Estableciendo Candidatos

Después de entender cómo se creó el elemento ToDo en la aplicación CRUD original, pude introducir el archivo create-candidate.ts como se muestra a continuación:

Para este caso de uso, solo necesitamos proporcionar un nombre de candidato, pero el objeto Candidato contiene un ID único y la cantidad de votos recibidos.

Mientras estaba aquí, también escribí el archivo delete-all-candidates.ts, que elimina todos los candidatos de la base de datos de clave/valor:

En este punto, utilicé la funcionalidad Previsualización para crear el Candidato A, Candidato B y Candidato C:

Registrando Votantes

Con la boleta lista, necesitaba la capacidad de registrar votantes para la boleta. Así que añadí un archivo create-voter.ts con el siguiente contenido:

Para registrar un votante, decidí proporcionar entradas para la dirección de correo electrónico y el nombre. También hay una propiedad booleana llamada voted que se utilizará para hacer cumplir la regla de un solo voto.

Como antes, también creé el archivo delete-all-voters.ts:

Ahora que estábamos listos para registrar algunos votantes, me registré como votante para la boleta:

Creando la Boleta

Lo último que necesitaba hacer era establecer la boleta. Esto implicaba actualizar el archivo main.ts como se muestra a continuación:

Agregué las siguientes validaciones como parte de la lógica de procesamiento:

• La propiedad de correo electrónico debe estar incluida, de lo contrario se mostrará un mensaje “Debe proporcionar una dirección de correo electrónico válida para votar en esta boleta”.

• El valor del correo electrónico proporcionado debe coincidir con un votante registrado, de lo contrario se mostrará un mensaje “La dirección de correo electrónico proporcionada no está autorizada para votar en esta boleta”.

• Debe haber al menos un candidato para votar, de lo contrario se mostrará un mensaje “No se han configurado candidatos para esta boleta”.

• Si el votante registrado ya ha votado, los botones de votación se deshabilitarán para todos los candidatos en la boleta.

El archivo main.ts contiene un botón para cada candidato, todos los cuales llaman al archivo vote.ts, que se muestra a continuación:

En este punto, la aplicación de la boleta estaba lista para su uso.

Boleta de la HOA en Acción

Para cada votante registrado, les enviaría un correo electrónico con un enlace similar al que se muestra a continuación:

https://squeeking-echoing-cricket.zipper.run/run/[email protected]

El enlace estaría personalizado para proporcionar la dirección de correo electrónico adecuada para el parámetro de consulta email. Al hacer clic en el enlace se ejecuta el archivo main.ts y se pasa el parámetro de correo electrónico, evitando la necesidad de que el votante registrado tenga que escribir su dirección de correo electrónico.

La boleta aparece como se muestra a continuación:

Decidí emitir mi voto a favor del Candidato B. Una vez que presioné el botón, la boleta se actualizó como se muestra:

El número de votos para el Candidato B aumentó en uno y todos los botones de votación se desactivaron. ¡Éxito!

Conclusión

Al analizar los requisitos para la aplicación de la boleta, me di cuenta de que pude cumplir con todos los criterios, incluidos los objetivos adicionales, en aproximadamente dos horas, y esto incluía tener una interfaz de usuario, infraestructura y implementación. La mejor parte de esta experiencia fue que el 100% de mi tiempo se centró en construir mi solución y no tuve que dedicar tiempo a lidiar con la infraestructura ni con la persistencia de datos.

Mis lectores pueden recordar que me he enfocado en la siguiente declaración de misión, que creo que puede aplicarse a cualquier profesional de TI:

“Enfoca tu tiempo en ofrecer funciones/funcionalidad que amplíen el valor de tu propiedad intelectual. Aprovecha los frameworks, productos y servicios para todo lo demás”.

– J. Vester

La plataforma Zipper se adhiere al 100% a mi declaración de misión personal. De hecho, han logrado ir un paso más allá de lo que hizo Ruby on Rails, porque no tengo que preocuparme de dónde se ejecutará mi servicio o qué almacén de datos necesitaré configurar. Utilizando el enfoque de la aplicación, mi boleta ya está implementada y lista para usar.

Si estás interesado en probar las aplicaciones, simplemente inicia sesión en zipper.dev y comienza a construir. Actualmente, el uso de la plataforma Zipper es gratuito. Prueba la plantilla de código generado por IA, ya que es realmente genial proporcionar un párrafo de lo que quieres construir y ver qué tan cerca coincide la aplicación resultante con lo que tienes en mente.

Si deseas probar mi aplicación de boleta, también está disponible para bifurcar en la galería de Zipper en la siguiente ubicación:

https://zipper.dev/johnjvester/ballot

¡Que tengas un excelente día!

We will continue to update Zepes; if you have any questions or suggestions, please contact us!