Aplicación de lista de tareas

Introducción

Este tutorial le ayudará a construir una aplicación web de lista de tareas simple de una sola página en Catalyst. La aplicación permitirá a los usuarios anotar tareas por hacer y luego eliminarlas una vez completadas.

La aplicación del cliente se verá así:

Puede acceder a una aplicación funcional de cada tipo y probar su funcionamiento aquí:

• Basic web app
• React web app
• Angular web app

La aplicación de lista de tareas utiliza los siguientes componentes de Catalyst:

1. Catalyst Serverless:

   • Advanced I/O Function: La función Advanced I/O se puede codificar en el entorno de programación Java, Node.js o Python. Contiene las APIs que permiten a los usuarios crear, ver y eliminar elementos de la lista.

2. Catalyst Cloud Scale:

   • Data Store: Para almacenar los elementos de la lista de tareas en una tabla.
   • ZCQL: Para obtener datos del Data Store mediante consultas.
   • Client: El front end de la aplicación que se aloja en Catalyst a través del alojamiento de cliente web. Puede inicializar el cliente web como una aplicación web básica de Catalyst, una aplicación Angular o una aplicación React.

Este tutorial cubrirá los pasos para los tres tipos de clientes web. Utilizaremos los plugins nativos ofrecidos por Catalyst para construir, probar y desplegar fácilmente aplicaciones Angular y React.

Utilizaremos la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst para construir esta aplicación.

Se le proporcionará el código de los archivos que se incluirán en los componentes de función y cliente en este tutorial. Solo tendrá que copiar el código proporcionado aquí y pegarlo en los archivos correspondientes según se indique.

Arquitectura de la aplicación

El funcionamiento de la aplicación de lista de tareas se puede describir de la siguiente manera:

• Agregar una nota: Un usuario ingresa una nota en la aplicación del cliente y la agrega como un elemento de la lista de tareas. El componente del cliente activa la función Serverless Advanced I/O. La función guarda la nota como un registro en la tabla del Cloud Scale Data Store usando una solicitud HTTP POST. La respuesta correspondiente (nota) se agregará a la lista de tareas existente.

• Ver una nota: Cuando el usuario abre la aplicación, el componente del cliente activa la función Advanced I/O para obtener los elementos existentes de la lista de tareas del Data Store usando una solicitud HTTP GET. Esta lista se muestra luego al usuario.

• Eliminar una nota: Cuando el usuario hace clic en una nota en la aplicación del cliente, se activa una solicitud HTTP DELETE. El registro correspondiente del Data Store se elimina, asegurando que la nota también se elimine del cliente. La lista de tareas actualizada se muestra en el cliente.