Aplicación de lista de tareas

Introducción

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

La aplicación del cliente se verá de la siguiente manera:

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

• Aplicación web básica
• Aplicación web React
• Aplicación web Angular

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

Catalyst Serverless:

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

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 frontend 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 las 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 deben incluirse en los componentes de función y cliente en este tutorial. Solo deberá 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 Advanced I/O. La función guarda la nota como un registro en la tabla del Data Store de Catalyst mediante 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 de Catalyst mediante una solicitud HTTP GET. Esta lista se muestra entonces 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.