# NodeJS -------------------------------------------------------------------------------- title: "Introducción" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.660Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/introduction/" service: "All Services" related: - Estructura de directorio del proyecto (/es/cli/v1/project-directory-structure/introduction/) - Claves de tabla NoSQL (/es/cloud-scale/help/nosql/components/#table-keys) - NoSQL SDK (/es/sdk/nodejs/v2/cloud-scale/nosql/get-component-instance/) - NoSQL API (/es/api/code-reference/cloud-scale/nosql/insert-item/#InsertNewItem) -------------------------------------------------------------------------------- # Task Manager App ### Introducción Este tutorial le ayudará a construir una aplicación web React llamada **Task Manager**. La aplicación le permitirá realizar las siguientes funcionalidades: * Crear una tarea * Asignar estados a cada tarea que cree * Filtrar tareas * Actualizar las tareas creadas * Eliminar tareas cuando ya no sean necesarias El lado del cliente de la aplicación se verá de la siguiente manera: <br /> La lógica de esta aplicación está codificada empleando los siguientes servicios de Catalyst y sus respectivos componentes: 1. Catalyst Serverless: * Advanced IO Function: Para codificar la lógica del backend de la aplicación en el entorno de Node.js. 2. Catalyst CloudScale: * NoSQL: Para almacenar datos no estructurados o semiestructurados donde los datos se pasan como JSON o arreglos JSON. * Web Client Hosting: Para alojar el frontend de la aplicación como una aplicación web React. Utilizará la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst para construir la aplicación. Nota: Se le proporcionará el código de los archivos que deben incluirse en los componentes de función y cliente en este tutorial. Deberá copiar el código proporcionado y pegarlo en los archivos correspondientes según se indique. ### Conceptos destacados Antes de profundizar en la aplicación, es importante que comprenda las siguientes claves de tabla NoSQL: * **Partition Key**: Esta clave es un atributo obligatorio ya que define cómo y dónde se deben almacenar los datos en la tabla NoSQL distribuida. * **Sort Key**: Esta clave es típicamente un atributo opcional que le ayudará a referirse a los datos requeridos que comparten la misma Partition Key. Por ejemplo, si tiene una tabla NoSQL que contiene datos sobre frutas, entonces la *fruta* en sí será la **Partition Key**, mientras que su *variedad* específica será la **Sort Key**. <table class="content-table"> <thead> <tr> <th class="w30p">Fruta (Partition Key)</th> <th class="w30p">Variedad (Sort Key)</th> <th class="w30p">Color (Index)</th> </tr> </thead> <tbody> <tr> <td>Manzana</td> <td>Royal Gala</td> <td>Rojo</td> </tr> <tr> <td>Manzana</td> <td>Fuji</td> <td>Rojo</td> </tr> <tr> <td>Banana</td> <td>Cavendish</td> <td>Amarillo</td> </tr> <tr> <td>Banana</td> <td>Red Dacca</td> <td>Rojo</td> </tr> </tbody> </table> Info:: Obtenga más información sobre las claves de tabla NoSQL. ### Flujo de trabajo de la aplicación A continuación se describe el flujo de trabajo de la aplicación: * Creará una tarea completando los campos de entrada presentes en el cliente. El UserID actuará como la **Partition Key**, y el Task Name actuará como la **Sort Key**. * Una vez que se cree la tarea, los datos no estructurados se almacenarán en el componente de almacenamiento NoSQL. * Puede filtrar las tareas creadas y las tareas requeridas se referirán usando su UserID (**Partition Key**) y Task Name (**Sort Key**). * También puede realizar operaciones de **Edit** y **Delete** sobre las tareas creadas. Los cambios en los datos se reflejarán en el componente NoSQL. * Finalmente, la aplicación React se aloja en Catalyst usando el componente Web Client Hosting. -------------------------------------------------------------------------------- title: "Requisitos previos" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.660Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/prerequisites/" service: "All Services" related: - Documentación de Catalyst CLI (/es/cli/v1/cli-command-reference/) - Extensión de VS Code de Catalyst (/es/catalyst-extensions/vs-code-extension/introduction/) -------------------------------------------------------------------------------- # Requisitos previos Antes de comenzar a construir la aplicación, debe tener los siguientes requisitos previos instalados en su sistema: 1. Catalyst CLI: Catalyst CLI contiene un conjunto de herramientas que le permiten inicializar, desarrollar, probar y desplegar los componentes de su aplicación desde su máquina local. Trabajaremos con Catalyst CLI en este tutorial. Debe realizar las siguientes acciones: - **Instalar Catalyst CLI**: Catalyst CLI se instala a través de NPM. Debe tener NPM y Node.js instalados en su sistema antes de instalar el CLI. Consulte la página de ayuda para instalar Catalyst CLI para obtener detalles sobre los requisitos previos y los pasos de instalación. - **Iniciar sesión en Catalyst CLI**: Después de instalar Catalyst CLI, debe autenticar el CLI con su cuenta de Catalyst antes de usarlo. Consulte la página de ayuda de inicio de sesión del CLI para conocer los pasos para iniciar sesión desde Catalyst CLI y las diversas opciones disponibles. 2. Cualquier herramienta IDE para desarrollo de código Node.js y del cliente: Puede usar cualquier IDE para trabajar con el código de la función y del cliente. Algunas opciones populares incluyen Visual Studio Code, IntelliJ IDEA, Eclipse y Sublime Text. Descargue e instale un IDE de su preferencia en su sistema. Info: Si es usuario del IDE Visual Studio Code, puede instalar la extensión Catalyst Tools y usar su IDE en lugar del CLI. Puede encontrar más detalles sobre la extensión de VS Code de Catalyst en esta sección de ayuda. -------------------------------------------------------------------------------- title: "Crear proyecto" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.661Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/create-project/" service: "All Services" related: - Proyectos de Catalyst (/es/getting-started/catalyst-projects/) -------------------------------------------------------------------------------- # Crear un proyecto Vamos a crear un proyecto en la consola de Catalyst. 1. Inicie sesión en la consola de Catalyst y haga clic en **Create New Project**. <br /> 2. Ingrese el nombre del proyecto como "TaskManager" en la ventana emergente, y haga clic en **Create**. <br /> Su proyecto será creado. Puede abrir el proyecto haciendo clic en **Access Project**. <br /> -------------------------------------------------------------------------------- title: "Crear una tabla NoSQL" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.661Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/config-nosql/" service: "All Services" related: - Documentación de ayuda de Catalyst NoSQL (/es/cloud-scale/help/nosql/introduction/) - SDK de NodeJS para Catalyst NoSQL (/es/sdk/nodejs/v2/cloud-scale/nosql/get-component-instance/) - API de Catalyst NoSQL (/es/api/code-reference/cloud-scale/nosql/insert-item/#InsertNewItem) -------------------------------------------------------------------------------- # Crear una tabla NoSQL Vamos a crear una tabla en NoSQL. Esta tabla se utilizará para almacenar los datos JSON no estructurados o semiestructurados generados en la aplicación a través de las entradas del usuario. Para crear una tabla NoSQL: 1. Navegue a la sección del servicio *Catalyst CloudScale* en la consola y haga clic en **Start Exploring**. <br /> 2. Navegue al componente **NoSQL** en *STORAGE*, y haga clic en **Create Table**. <br /> 3. Asigne el nombre "TaskHandler" a su tabla. <br /> 4. Ingrese "UserID" como la **Partition Key**, y seleccione **String** como el **Data Type**. Puede usar el campo UserID para representar a un individuo que crea y administra sus tareas. Este debe mantenerse único para cada usuario. <br /> 5. Seleccione **Yes** para incluir **Sort Key**. Ingrese "TaskName" como la **Sort Key**, y seleccione **String** como el **Data Type**. <br /> 6. Haga clic en **Create**. <br /> Nota: * No requerimos ningún Sort Keys adicional ni necesitamos utilizar la característica TTL para los propósitos de este tutorial. * Obtenga más información sobre Sort Keys y TTL. La tabla será creada y Catalyst generará un Table ID único para hacer referencia a la tabla. ### Configurar índices de tabla A continuación, vamos a configurar índices para la tabla NoSQL. Los índices son necesarios para crear otros atributos que se pueden usar para buscar datos almacenados en la tabla. Info: Obtenga más información sobre los índices NoSQL. Para crear un índice: 1. Navegue a la pestaña **Indexes**, y haga clic en **Add Index**. <br /> 2. Ingrese "PrimaryIndex" como el nombre del índice. <br /> 3. Ingrese "UserID" como el nombre de la **Partition Key** y seleccione **String** como el **Data Type**. <br /> 4. Seleccione **No**, ya que no se requieren *Sort Keys* adicionales para el índice, seleccione **All Attributes** como el **Attribute Type**, y haga clic en **Create**. <br /> El índice requerido ha sido creado. <br /> El componente NoSQL ha sido configurado para la aplicación. -------------------------------------------------------------------------------- title: "Inicializar el proyecto" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.661Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/init-project/" service: "All Services" related: - Documentación de ayuda de Catalyst NoSQL (/es/cloud-scale/help/nosql/introduction/) - Documentación de ayuda del CLI (/es/cli/v1/cli-command-reference/) - Inicializar recursos desde el CLI (/es/cli/v1/initialize-resources/introduction/) - Estructura de directorio del proyecto (/es/cli/v1/project-directory-structure/introduction/) - Portal multiorganización de Catalyst (/es/getting-started/catalyst-organizations/#access-the-multi-org-portal) - Herramientas de Catalyst (/es/catalyst-extensions/vs-code-extension/introduction/) -------------------------------------------------------------------------------- # Inicializar el proyecto Ahora puede comenzar a trabajar en su proyecto de Catalyst desde el CLI. El primer paso es inicializar el proyecto en un directorio vacío. Este será el directorio principal de su proyecto, y todos los archivos del proyecto se guardarán en él. Info: * Obtenga más información sobre las estructuras de directorio del proyecto. * Obtenga más información sobre Catalyst CLI. Para esta aplicación, inicializaremos el proyecto, una función Advanced IO y los componentes del cliente React. 1. Cree una carpeta para el proyecto en su máquina local y navegue hasta ella desde la terminal. 2. Inicialice el proyecto ejecutando el siguiente comando desde ese directorio: catalyst init 3. Navegue usando las teclas de flecha, seleccione su portal preferido y presione Enter. Si no tiene otras organizaciones asociadas a la cuenta, se seleccionará la predeterminada automáticamente. <br /> Info: Obtenga más información sobre la característica de portal multiorganización de Catalyst. 4. El CLI le pedirá que asocie un proyecto de Catalyst con el directorio. Asócielo con el proyecto que creamos anteriormente desde la consola. Seleccione **TaskManager** de la lista y haga clic en **Enter**. <br /> 5. Navegue usando las teclas de flecha y seleccione **Functions**, **Client** usando la barra espaciadora. Presione **Enter** para inicializar. <br /> 6. El CLI iniciará la configuración de la función. Seleccione **Advanced IO** como el tipo de función para codificar su lógica de backend. <br /> 7. Seleccione la versión más reciente de **Node.js** como el stack de la función. <br /> 8. Ingrese "task_manager_function" como el nombre del paquete, "index.js" como el punto de entrada, y su dirección de correo electrónico como autor, luego presione **Enter**. Alternativamente, puede presionar **Enter** sin ingresar valores para completar con los valores predeterminados. El CLI solicitará la inicialización de las dependencias de Node. Presione **Y** para confirmar la instalación, y presione **Enter** para confirmar su elección. Los módulos de Node se instalarán. <br /> El CLI ahora iniciará la configuración del cliente. 9. Seleccione **React web app** y presione **Enter** para inicializar su cliente como una aplicación web React. <br /> 10. Seleccione **JavaScript** como el tipo de aplicación React y presione **Enter**. <br /> 11. Ingrese "task-manager-client" como el nombre del paquete del cliente y haga clic en **Enter**. También puede proporcionar cualquier nombre de su preferencia. Todos los paquetes de React necesarios, como "react", "react-dom" y "react-scripts" se instalarán a través del **Catalyst React plugin** (zcatalyst-cli-plugin-react). <br /> El cliente se ha inicializado exitosamente como una aplicación web React. <br /> El directorio del cliente se creará con la estructura estándar en el directorio del proyecto. Esta es la estructura del directorio del proyecto *TaskManager* si el cliente se inicializa como una aplicación React. <br /> La inicialización de Catalyst se ha completado. -------------------------------------------------------------------------------- title: "Configurar la función Advanced IO" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.664Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/config-function/" service: "All Services" related: - Documentación de ayuda de Catalyst NoSQL (/es/cloud-scale/help/nosql/introduction/) - SDK de NodeJS para NoSQL (/es/sdk/nodejs/v2/cloud-scale/nosql/get-component-instance/) - Advanced IO Function (/es/serverless/help/functions/advanced-io/) - Estructura de directorio de Functions (/es/cli/v1/project-directory-structure/functions-directory) -------------------------------------------------------------------------------- # Configurar la función Advanced IO Ahora comenzaremos a codificar la aplicación de gestión de tareas configurando el componente de función. El directorio de la función, functions/task_manager_function contiene: * El archivo principal de la función index.js * El archivo de configuración catalyst-config.json * Módulos de Node * Los archivos de dependencias package.json y package-lock.json Agregará código en el archivo index.js. La función Advanced I/O contiene las siguientes funcionalidades: <table class="content-table"> <thead> <tr> <th class="w25p">Método de solicitud</th> <th class="w25p">Endpoint</th> <th class="w50p">Propósito</th> </tr> </thead> <tbody> <tr> <td>POST</td> <td>/addtask</td> <td>Para crear una nueva tarea.</td> </tr> <tr> <td>GET</td> <td>/filtertask</td> <td>Para filtrar las tareas creadas por los campos UserID, TaskName o Status.</td> </tr> <tr> <td>DELETE</td> <td>/deletetask</td> <td>Para eliminar tareas que ya no son necesarias.</td> </tr> <tr> <td>POST</td> <td>/updatetask</td> <td>Para actualizar el contenido de una tarea existente.</td> </tr> </tbody> </table> ### Instalar dependencias requeridas Utilizaremos los frameworks Express y Axios para codificar la función Advanced I/O. Para importar los paquetes **Express** y **Axios** en el código de su función, debe instalar las dependencias requeridas en su sistema. <table class="content-table"> <thead> <tr> <th class="w50p">Nombre del paquete</th> <th class="w50p">Propósito</th> </tr> </thead> <tbody> <tr> <td>Express</td> <td>Para enrutar solicitudes HTTP.</td> </tr> <tr> <td>Axios</td> <td>Para enviar y gestionar solicitudes HTTP.</td> </tr> </tbody> </table> Para instalarlos en su máquina local, navegue al directorio principal de la función (functions/task_manager_function) en su terminal y ejecute el siguiente comando: npm install express axios --save <br /> Esta información también se actualizará en el archivo package.json. <br /> Ahora, comencemos a codificar la función Advanced I/O. Copie el código proporcionado a continuación y péguelo en el archivo index.js en el directorio functions/task_manager_function de su proyecto, y guarde el archivo. Puede usar cualquier IDE de su preferencia para trabajar con los archivos de la aplicación. Nota: Revise el código de esta sección para asegurarse de que lo comprende completamente. 'use strict'; var express=require('express'); var catalyst=require('zcatalyst-sdk-node'); const{NoSQLItem}=require('zcatalyst-sdk-node/lib/no-sql'); const{NoSQLReturnValue,NoSQLConditionGroupOperator}=require('zcatalyst-sdk-node/lib/no-sql/enum'); const{NoSQLMarshall,NoSQLEnum}=require('zcatalyst-sdk-node/lib/no-sql'); const{NoSQLOperator}=NoSQLEnum; var app=express(); app.use(express.json()); app.use(express.static('public')); // Agregar una tarea app.post('/addtask',async(req,res)=>{ let{userID,taskName,dueDate,priority,status}=req.body; var capp=catalyst.initialize(req); const nosql=capp.nosql(); const table=nosql.table('YOUR_TABLE_ID'); try{ await table.insertItems({ item:NoSQLItem.from({UserID:userID,DueDate:dueDate,TaskName:taskName,Priority:priority,Status:status}), return:NoSQLReturnValue.NULL }); res.send({message:"Thanks! Your task has been successfully inserted."}); }catch(error){ res.status(500).send({error:"Internal server error occurred. Please try again in some time."}); } }); // Filtrar tarea app.get('/filtertask',async(req,res)=>{ const query=req.query; const parsedData={index_data:{userID:query.userID,taskName:query.taskName,status:query.status}}; const userId=parsedData.index_data.userID; var capp=catalyst.initialize(req); const nosql=capp.nosql(); const table=nosql.table('YOUR_TABLE_ID'); try{ if(userId!=null&&parsedData.index_data.taskName===''){ if(parsedData.index_data.status==='')return res.status(400).json({error:"Oops! You forgot to select a status."}); const groupOpInsert=await table.queryTable({ key_condition:{attribute:'UserID',operator:NoSQLOperator.EQUALS,value:NoSQLMarshall.makeString(parsedData.index_data.userID)}, consistent_read:true, limit:10, forward_scan:true }); let responseData=[]; groupOpInsert.getResponseData().forEach(data=>{ responseData.push({ UserID:data.item.get("UserID"), TaskName:data.item.get("TaskName"), DueDate:data.item.get("DueDate"), Priority:data.item.get("Priority"), Status:data.item.get("Status") }); }); const filteredData=await filterByStatus(responseData,parsedData); res.status(200).send(filteredData); }else if(userId!=null&&parsedData.index_data.taskName!=null){ if(parsedData.index_data.status==='')return res.status(400).json({error:"Oops! You forgot to select a status."}); const groupOpInsert=await table.queryTable({ key_condition:{ group_operator:NoSQLConditionGroupOperator.AND, group:[ {attribute:'UserID',operator:NoSQLOperator.EQUALS,value:NoSQLMarshall.makeString(parsedData.index_data.userID)}, {attribute:'TaskName',operator:NoSQLOperator.EQUALS,value:NoSQLMarshall.makeString(parsedData.index_data.taskName)} ] }, consistent_read:true, limit:10, forward_scan:true }); let responseData=[]; groupOpInsert.getResponseData().forEach(data=>{ responseData.push({ UserID:data.item.get("UserID"), TaskName:data.item.get("TaskName"), DueDate:data.item.get("DueDate"), Priority:data.item.get("Priority"), Status:data.item.get("Status") }); }); const filteredData=await filterByStatus(responseData,parsedData); res.send(filteredData); }else return res.send("Kindly enter partiyion key user ID and sort key Taskname"); }catch(error){ res.status(500).send({error:"Internal server error occurred. Please try again in some time."}); } }); // Eliminar tarea app.delete('/deletetask',async(req,res)=>{ const query=req.query; const parsedData={index_data:{userID:query.userID,taskName:query.taskName}}; var capp=catalyst.initialize(req); const nosql=capp.nosql(); const table=nosql.table('YOUR_TABLE_ID'); try{ await table.deleteItems({keys:NoSQLItem.from({UserID:parsedData.index_data.userID,TaskName:parsedData.index_data.taskName})}); res.status(200).json({message:"Data deleted successfully!"}); }catch(error){ res.status(500).send({error:"Internal server error occurred. Please try again in some time."}); } }); // Actualizar tarea app.post('/updatetask',async(req,res)=>{ let{UserID,TaskName,DueDate,Priority,Status}=req.body; var capp=catalyst.initialize(req); const nosql=capp.nosql(); const table=nosql.table('YOUR_TABLE_ID'); try{ await table.insertItems({ item:NoSQLItem.from({UserID:UserID,DueDate:DueDate,TaskName:TaskName,Priority:Priority,Status:Status}), return:NoSQLReturnValue.NULL }); res.send({message:"Items updated successfully!"}); }catch(error){ res.status(500).send({error:"Internal server error occurred. Please try again in some time."}); } }); async function filterByStatus(data,parseData){ return data.filter(task=>task.Status.toLowerCase()===parseData.index_data.status.toLowerCase()); } module.exports=app; Nota: Asegúrese de proporcionar el ID de su tabla en las líneas 16, 34, 93 y 106. El directorio de la función está ahora configurado. Podemos proceder a configurar el directorio del cliente. -------------------------------------------------------------------------------- title: "Configurar el cliente" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.664Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/config-client/" service: "All Services" related: - Documentación de ayuda de Catalyst NoSQL (/es/cloud-scale/help/nosql/introduction/) - Estructura de directorio del cliente (/es/cli/v1/project-directory-structure/client-directory/) - Web Client Hosting (/es/cloud-scale/help/web-client-hosting/introduction/) -------------------------------------------------------------------------------- # Configurar el cliente Vamos a configurar el componente del cliente. El directorio del cliente de la aplicación web React contiene los siguientes archivos: - El directorio raíz del cliente contiene un archivo client-package.json, que es un archivo de configuración que define el nombre, la versión, la página de inicio predeterminada y la página de redirección del componente del cliente. - El directorio del cliente **task-manager-client** contiene dos subcarpetas, según la estructura de proyecto predeterminada de una aplicación React: - La carpeta **public** se utiliza generalmente para almacenar archivos que los navegadores pueden acceder abiertamente a través de URLs públicas, como los archivos de iconos de la aplicación web, el archivo index.html y el archivo 404.html. - La carpeta **src** contiene los archivos fuente de la aplicación que se incluirán en la carpeta de compilación cuando compilemos la aplicación React. - El directorio del cliente también contiene el archivo de dependencias package.json y un archivo oculto .gitignore. - Los archivos presentes en la carpeta **src** incluyen: - Archivos nativos de React como index.js, index.css, setupTests.js, reportWebVitals.js, logo.svg y App.test.js. - **App.css**: Contiene los elementos de estilo requeridos para la interfaz de la aplicación. - **App.js**: Contiene la lógica de enrutamiento hash para definir las rutas de los archivos **AddTask** y **FilterTask**. - Debe agregar los siguientes archivos a la carpeta src/: - **AddTask.css**: Contiene los elementos de estilo requeridos para la acción de creación de tareas. - **AddTask.js**: Para recopilar los detalles de la tarea mediante entradas de formulario. - **FilterTask.css**: Contiene los estilos requeridos para la funcionalidad de filtrado. - **FilterTask.js**: Para contener la lógica de filtrado de las tareas basándose en UserID, TaskName y Status. También contiene la lógica para realizar operaciones de edición y eliminación. - **Header.css**: Contiene los elementos de estilo de la aplicación. - **Header.js**: Contiene la lógica que define los aspectos principales de la aplicación como el título de la aplicación, los botones de navegación y más. ### Instalar paquetes adicionales de React Para permitir que nuestra aplicación se comporte como una aplicación de múltiples páginas, necesitamos instalar el paquete react-router-dom. Para instalar el paquete react-router-dom, navegue al directorio TaskManager/task-manager-client/ y ejecute el siguiente comando del CLI: npm install react-router-dom Este comando instalará el módulo react-router-dom, guardará las dependencias y nos permitirá realizar el enrutamiento hash requerido en nuestra aplicación. <br /> Este es el directorio del cliente después de haber creado los archivos requeridos. <br /> Nota: Revise todo el código proporcionado en esta sección para asegurarse de que lo comprende completamente. Copie el código proporcionado a continuación y péguelo en los archivos correspondientes. .App{ text-align:center; } .App-logo{ height:40vmin; pointer-events:none; } @media(prefers-reduced-motion:no-preference){ .App-logo{ animation:App-logo-spin infinite 20s linear; } } .App-header{ background-color:#282c34; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:calc(10px+2vmin); color:white; } .App-link{ color:#61dafb; } @keyframes App-logo-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } import React from 'react' import {HashRouter,Route,Routes,Navigate} from 'react-router-dom' import AddTask from './AddTask' import FilterTask from './FilterTask' import Header from './Header' export default function App() { return ( &lt;div&gt; &lt;HashRouter&gt; &lt;Header /&gt; &lt;div className='router'&gt; &lt;Routes&gt; &lt;Route path='' element={&lt;Navigate to='/AddTask' /&gt;} /&gt; &lt;Route path='/AddTask' element={&lt;AddTask /&gt;} /&gt; &lt;Route path='/FilterTask' element={&lt;FilterTask /&gt;} /&gt; &lt;/Routes&gt; &lt;/div&gt; &lt;/HashRouter&gt; &lt;/div&gt; ) } body { font-family: Arial, sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background: #ffffff; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); border-radius: 10px; } h1 { color: #121111; font-size: 2.5rem; font-weight: bold; margin-bottom: 20px; text-align: center; } .card { border: none; background-color: #fdfdfd; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; } .card-header { background-color: #439600; color: white; padding: 15px; font-size: 1.25rem; font-weight: bold; text-align: center; } .card-body { padding: 20px; } .form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; } .col-md-6,.col-md-4 { flex: 1 1 calc(50% - 15px); min-width: 200px; } label { display: block; font-weight: 600; margin-bottom: 5px; color: #495057; } input,select { width: 93%; padding: 10px; font-size: 1rem; border: 1px solid #ced4da; border-radius: 5px; transition: border-color 0.2s; } input:focus,select:focus { border-color: #007bff; outline: none; box-shadow: 0 0 4px rgba(0,123,255,0.25); } .buttons { display: flex; justify-content: space-between; gap: 10px; } button { padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; transition: background-color 0.2s; } button.btn-primary { width: 16%; background-color: #000000; color: white; } button.btn-primary:hover { background-color: #34de19; } button.btn-secondary { background-color: #000000; width: 14%; color: white; font-size: 1rem; font-weight: 600; } button.btn-secondary:hover { background-color: #f00000; } #status.form-control { width: 387%; } .card-header h2 { color: white; } import React, { useState } from 'react' import './AddTask.css' import axios from 'axios' export default function AddTask() { const [userID, setUserID] = useState('') const [taskName, setTaskName] = useState('') const [dueDate, setDueDate] = useState('') const [priority, setPriority] = useState('High') const [status, setStatus] = useState('Pending') const today = new Date().toISOString().split('T')[0] const addTask = async (event) => { event.preventDefault() const newTask = { userID, taskName, dueDate, priority, status } await axios.post('/server/task_manager_function/addtask', newTask).then(() => { window.confirm('Task added successfully') clearForm() }).catch((error) => { alert(error.message) }) } const clearForm = () => { setUserID('') setTaskName('') setDueDate('') setPriority('High') setStatus('Pending') } return ( &lt;div className="container my-4"&gt; &lt;div className="card my-4"&gt; &lt;div className="card-header"&gt; &lt;h2&gt;Add New Task&lt;/h2&gt; &lt;/div&gt; &lt;div className="card-body"&gt; &lt;form onSubmit={addTask}&gt; &lt;div className="form-row"&gt; &lt;div className="col-md-6 mb-3"&gt; &lt;label htmlFor="userID" className="userID"&gt;User ID&lt;/label&gt; &lt;input type="text" className="form-control" id="userID" value={userID} onChange={(e) => setUserID(e.target.value)} required /&gt; &lt;/div&gt; &lt;div className="col-md-6 mb-3"&gt; &lt;label htmlFor="taskName"&gt;Task Name&lt;/label&gt; &lt;input type="text" className="form-control" id="taskName" value={taskName} onChange={(e) => setTaskName(e.target.value)} required /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div className="form-row align-items-center"&gt; &lt;div className="col-md-4 mb-3"&gt; &lt;label htmlFor="dueDate"&gt;Due Date&lt;/label&gt; &lt;input type="date" className="form-control" id="dueDate" value={dueDate} onChange={(e) => setDueDate(e.target.value)} min={today} required /&gt; &lt;/div&gt; &lt;div className="col-md-4 mb-3"&gt; &lt;label htmlFor="priority"&gt;Priority&lt;/label&gt; &lt;select className="form-control" id="priority" value={priority} onChange={(e) => setPriority(e.target.value)} required&gt; &lt;option value="High"&gt;High&lt;/option&gt; &lt;option value="Medium"&gt;Medium&lt;/option&gt; &lt;option value="Low"&gt;Low&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div className="status-cls"&gt; &lt;label htmlFor="status"&gt;Status&lt;/label&gt; &lt;select className="form-control" id="status" value={status} onChange={(e) => setStatus(e.target.value)} required&gt; &lt;option value="Pending"&gt;Pending&lt;/option&gt; &lt;option value="Completed"&gt;Completed&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div className="buttons mt-4"&gt; &lt;button type="submit" className="btn btn-primary"&gt;Add Task&lt;/button&gt; &lt;button type="button" className="btn btn-secondary" onClick={clearForm}&gt;Clear&lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ) } @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); * { font-family: "Inter", sans-serif; box-sizing: border-box; margin: 0; padding: 0; } h2 { font-size: 38px; font-weight: bold; margin-bottom: 20px; text-align: center; padding: 10px; border-bottom: 1px dashed #ccc; color: #000; } .btn1 { color: white; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; background-color: #ccc; } .green { background-color: green; } .container { margin: 30px auto; padding: 20px; max-width: 900px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } h3 { text-align: center; color: #333; font-family: Arial, sans-serif; } .table { width: 100%; border-collapse: collapse; margin-top: 20px; font-family: Arial, sans-serif; } .table th, .table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; } .table th { background-color: #439600; color: white; } .table tbody tr:nth-child(even) { background-color: #f4f4f4; } .table tbody tr:hover { background-color: #e9e9e9; } .btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; background-color: #1100ec; color: white; } .btn:hover { background-color: rgb(32,239,0); } .btn:focus { outline: none; } .btn.green { background-color: #28a745; color: white; } .btn.green:hover { background-color: #218838; } td button { margin-right: 8px; } table tr:hover { background-color: #ddd; } .filter-tasks-container { background-color: #ffffff; padding: 25px 30px; border-radius: 10px; box-shadow: 0 8px 15px rgba(0,0,0,0.15); max-width: 650px; margin: 30px auto 59px; } .filter-tasks-header { font-size: 2rem; font-weight: 700; color: #ffffff; text-align: center; padding: 15px; background: #439600; border-radius: 8px 8px 0 0; margin: -30px -30px 20px -30px; position: relative; } .filter-tasks-header::after { content: ''; display: block; width: 50px; height: 4px; margin: 10px auto 0; border-radius: 2px; } .form-row { display: flex; gap: 20px; margin-bottom: 15px; } .filter-label { font-weight: 600; margin-bottom: 5px; display: block; color: #333; font-size: 0.9rem; } .form-control { border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; padding: 3px; transition: all 0.3s ease; color: black; } .form-control:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0,123,255,0.2); outline: none; } .btn-primary { color: #ffffff; border: none; padding: 12px 24px; font-size: 1rem; font-weight: 600; border-radius: 6px; width: 26%; background-color: black; } .btn-wraper { display: flex; align-items: center; justify-content: space-between; } .cleartask-btn { width: 22%; color: #ffffff; border: none; padding: 12px 24px; font-size: 1rem; font-weight: 600; border-radius: 6px; background-color: black; } .cleartask-btn:hover { background-color: #e80000; transform: translateY(-2px); } .btn-primary:hover { background-color: #60f389; transform: translateY(-2px); } .btn-primary:active { background-color: #141517; transform: translateY(0); } @media (max-width: 768px) { .form-row { flex-direction: column; gap: 15px; } .btn-primary { width: 100%; } } .task-list-container { width: 59%; padding: 5px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-left: 20%; } .task-list-table { width: 100%; border-collapse: collapse; } .task-list-table-striped thead { background-color: #69f086; color: #ffffff; } .task-list-table-striped th, .task-list-table-striped td { padding: 12px 15px; text-align: left; } .task-list-table-striped tbody tr:nth-child(even) { background-color: #f2f2f2; } .task-list-table-striped tbody tr:hover { background-color: #e0e0e0; } .task-list-table-striped th { font-weight: bold; font-size: 16px; } .task-list-table-striped td { font-size: 14px; } .task-list-table-striped td[data-priority="High"] { color: #dc3545; font-weight: bold; } .task-list-table-striped td[data-priority="Medium"] { color: #ffc107; } .task-list-table-striped td[data-priority="Low"] { color: #28a745; } .task-list-table-striped td[data-status="Completed"] { color: #28a745; font-weight: bold; } .task-list-table-striped td[data-status="Pending"] { color: #ffc107; font-weight: bold; } .task-list-table-striped td[data-status="Overdue"] { color: #dc3545; font-weight: bold; text-decoration: underline; } @media (max-width: 768px) { .task-list-table-striped th, .task-list-table-striped td { padding: 10px; } } .modal { display: block; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); overflow: auto; } .modal-content { background-color: white; margin: 10% auto; padding: 20px; text-align: left; width: 56%; height: 62%; border: 1px solid black; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: rgb(245,0,0); cursor: pointer; } .updateContent { margin-bottom: 10%; } .modal-content h2 { font-size: 20px; margin-bottom: 20px; text-align: center; } .modal-content div { margin-bottom: 15px; } .modal-content label { display: block; font-weight: bold; margin-bottom: 5px; } .modal-content input[type="text"], .modal-content input[type="date"], .modal-content select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .modal-content select { cursor: pointer; } .modal-content button { display: inline-block; width: 19%; padding: 10px; background-color: #2c2d2e; color: white; font-size: 16px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; } .modal-content button:hover { background-color: #43c265; } .head { display: flex; } .applyfilter { font-weight: bold; background-color: black; color: white; } .applyfilter:hover { background-color: #00fe19; transform: translateY(-2px); } .btnDelete { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; background-color: rgb(200,26,17); color: white; } .btnDelete:hover { background-color: rgb(255,0,0); } .btnDelete.green { background-color: #ba2929; color: white; } .btnDelete.green:hover { background-color: #218838; } .btnDelete:focus { outline: none; } .placeholder { color: gray; } import React from 'react' import { useState } from 'react' import axios from "axios" import './FilterTask.css' export default function FilterTask() { const [tasks,setTasks]=useState([]) const [isModelopen,setModal]=useState(false) const [userData,setUserdata]=useState({UserID:"",TaskName:"",DueDate:"",Status:""}) const [userID,setUserID]=useState('') const [taskName,setTaskName]=useState('') const [status,setStatus]=useState('') const filterTasks=async()=>{try{const response=await axios.get('/server/task_manager_function/filtertask',{params:{userID,taskName,status}});setTasks(response.data)}catch(error){if(error.response&&error.response.data&&error.response.data.error){console.error('Backend Error:',error.response.data.error);alert(error.response.data.error)}else{alert('Something went wrong. Please try again.')}}} const handleDelete=async(taskData)=>{const isConfirmed=window.confirm("Are you sure you want to delete this task!");const userID=taskData.UserID;const taskName=taskData.TaskName;if(isConfirmed){await axios.delete(`/server/task_manager_function/deleteTask`,{params:{userID,taskName}}).then((response)=>{if(window.confirm(response.data.message)){window.location.reload()}}).catch(function(error){alert(error.message)})}} const handleEdit=async(data)=>{setUserdata(data);setModal(true)} const closeModal=async()=>{setModal(false)} const clearTask=()=>{setUserID('');setTaskName('');setStatus('')} const handleChange=(e)=>{const{name,value}=e.target;setUserdata(prevData=>({...prevData,[name]:value}))} const handleSubmit=async(e)=>{e.preventDefault();await axios.post("/server/task_manager_function/updatetask",userData).then((response)=>{if(window.confirm(response.data.message)){window.location.reload()}}).catch(function(error){alert(error.message)})} return( &lt;&gt; &lt;div className="filter-tasks-container"&gt; &lt;h4 className="filter-tasks-header"&gt;Filter Tasks&lt;/h4&gt; &lt;div className="form-row"&gt; &lt;div className="col-md-4"&gt; &lt;label htmlFor="filterUserID" className="filter-label"&gt;User ID&lt;/label&gt; &lt;input type="text" className="form-control" id="filterUserID" placeholder="Enter User ID" value={userID} onChange={(e)=>setUserID(e.target.value)}/&gt; &lt;/div&gt; &lt;div className="col-md-4"&gt; &lt;label htmlFor="filterTaskName" className="filter-label"&gt;Task Name&lt;/label&gt; &lt;input type="text" className="form-control" id="filterTaskName" placeholder="Enter Task Name" value={taskName} onChange={(e)=>setTaskName(e.target.value)}/&gt; &lt;/div&gt; &lt;div className="col-md-4"&gt; &lt;label htmlFor="filterStatus" className="filter-label"&gt;Status&lt;/label&gt; &lt;select className="form-control" id="filterStatus" value={status} onChange={(e)=>setStatus(e.target.value)}&gt; &lt;option value="" disabled hidden className="placeholder"&gt;Status&lt;/option&gt; &lt;option value="Pending"&gt;Pending&lt;/option&gt; &lt;option value="Completed"&gt;Completed&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div className="btn-wraper mt-3"&gt; &lt;button className="applyfilter" onClick={filterTasks}&gt;Apply Filters&lt;/button&gt; &lt;button className="cleartask-btn" onClick={clearTask}&gt;Clear&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; {tasks.length&gt;0&&( &lt;div className='container'&gt; &lt;h2&gt;Task List&lt;/h2&gt; &lt;table className='table'&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;S. No&lt;/th&gt; &lt;th&gt;User ID&lt;/th&gt; &lt;th&gt;Task Name&lt;/th&gt; &lt;th&gt;Due Date&lt;/th&gt; &lt;th&gt;Status&lt;/th&gt; &lt;th&gt;Update&lt;/th&gt; &lt;th&gt;Delete&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; {tasks.map((task,index)=&gt;( &lt;tr key={index+1}&gt; &lt;td&gt;{index+1}&lt;/td&gt; &lt;td&gt;{task.UserID}&lt;/td&gt; &lt;td&gt;{task.TaskName}&lt;/td&gt; &lt;td&gt;{task.DueDate}&lt;/td&gt; &lt;td&gt;{task.Status}&lt;/td&gt; &lt;td&gt;&lt;button className='btn' onClick={()=>handleEdit(task)}&gt;Edit&lt;/button&gt;&lt;/td&gt; &lt;td&gt;&lt;button className='btnDelete' onClick={()=>handleDelete(task)}&gt;Delete&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; ))} &lt;/tbody&gt; &lt;/table&gt; {isModelopen&&( &lt;div className='modal'&gt; &lt;div className='modal-content'&gt; &lt;span className='close' onClick={closeModal}&gt;&times;&lt;/span&gt; &lt;h2&gt;User Details&lt;/h2&gt; &lt;div&gt; &lt;label htmlFor="userID"&gt;UserID:&lt;/label&gt; &lt;input type="text" id="userID" name="UserID" value={userData.UserID} onChange={handleChange} required/&gt; &lt;/div&gt; &lt;div&gt; &lt;label htmlFor="taskName"&gt;TaskName:&lt;/label&gt; &lt;input type="text" id="taskName" name="TaskName" value={userData.TaskName} onChange={handleChange} required/&gt; &lt;/div&gt; &lt;div&gt; &lt;label htmlFor="dueDate"&gt;DueDate:&lt;/label&gt; &lt;input type="date" id="dueDate" name="DueDate" value={userData.DueDate} onChange={handleChange} min={new Date().toISOString().split('T')[0]} required/&gt; &lt;/div&gt; &lt;div&gt; &lt;label htmlFor="status"&gt;Status:&lt;/label&gt; &lt;select id="status" name="Status" value={userData.Status} onChange={handleChange} required&gt; &lt;option value=""&gt;Select Status&lt;/option&gt; &lt;option value="Pending"&gt;Pending&lt;/option&gt; &lt;option value="Completed"&gt;Completed&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div&gt; &lt;button onClick={handleSubmit}&gt;Submit&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; )} &lt;/div&gt; )} &lt;/&gt; ) } #root{ display:flex; flex-direction:column; height:100vh; } .heading{ align-items:center; background-color:black; box-shadow:0 2px 4px #0000001a; color:#fff; display:flex; justify-content:space-between; padding:10px 20px; } .heading span{ font-size:1.5rem; font-weight:bold; } .heading ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0; } .heading li{ font-size:1rem; } .heading a{ text-decoration:none; color:#ffffff; transition:color 0.3s ease; font-weight:bold; } .heading a:hover{ color:#007bff; } .naviagtion-btn{ height:36px; background-color:white; border:none; border-radius:7px; font-size:13px; font-weight:bold; } .naviagtion-btn:hover{ background-color:blue; color:white; } import React from 'react' import { Link } from 'react-router-dom' import './Header.css' export default function Header() { return ( &lt;div className='heading'&gt; &lt;span&gt;Task Manager&lt;/span&gt; &lt;ul&gt; &lt;li&gt; &lt;Link to='/AddTask'&gt; &lt;button className='naviagtion-btn'&gt;Add task&lt;/button&gt; &lt;/Link&gt; &lt;/li&gt; &lt;li&gt; &lt;Link to='/FilterTask'&gt; &lt;button className='naviagtion-btn'&gt;Filter task&lt;/button&gt; &lt;/Link&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; ) } El directorio del cliente está ahora configurado. Repasemos el funcionamiento de la aplicación: 1. **Crear una tarea** - Después de que un usuario final envía una nueva tarea ingresando el UserID, el Task Name, la fecha límite y el Status desde la página **Add Task**, se inicia una acción de creación de tarea. - Los detalles se envían al backend mediante una llamada Axios **POST** al endpoint de API /server/task_manager_function/addtask. - Esta API validará y almacenará la nueva tarea en el almacenamiento NoSQL. Esta acción generará un mensaje de confirmación. - La tarea estará entonces disponible para su recuperación a través de las operaciones. 2. **Filtrar una tarea** - En la página **Filter Task**, las operaciones de filtrado se gestionan completamente a través del endpoint de API /filtertask. - Un usuario final puede elegir filtrar las tareas creadas por UserID, Task Name o Status. Las tareas que cumplen con el requisito del filtro se obtienen mediante una llamada Axios **GET** al endpoint de API /server/task_manager_function/filtertask. Esta llamada obtendrá los detalles requeridos de la tabla NoSQL. 3. **Editar o eliminar una tarea** - Junto con la tarea filtrada, cada una de las tareas listadas proporcionará al usuario final la opción de editar o eliminar las tareas listadas. - La lógica de las operaciones de edición y eliminación se define en las funciones handleEdit() y handleDelete(). - Si el usuario final elige **eliminar una tarea**, entonces: - se invoca el endpoint de API /deleteTask mediante una solicitud Axios **DELETE**. - esto eliminará la entrada correspondiente de la tabla NoSQL. - se muestra un mensaje de éxito en el cliente una vez que la tarea requerida se ha eliminado exitosamente. - Si el usuario final elige **actualizar una tarea**, entonces: - los detalles de la tarea existente se cargan en un modal utilizando la función handleEdit(). - cuando el usuario final actualiza y envía la información de la tarea modificada, se invoca el endpoint de API /updatetask mediante una solicitud Axios **POST**. - esta API actualiza el registro de la tarea en la tabla NoSQL con los nuevos valores proporcionados. - una vez completada la operación de actualización, la página se recargará para reflejar los datos más recientes en la lista de tareas filtradas. -------------------------------------------------------------------------------- title: "Probar la aplicación" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.667Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/test-app/" service: "All Services" related: - Documentación de ayuda de Catalyst NoSQL (/es/cloud-scale/help/nosql/introduction/) - Servir recursos del CLI (/es/cli/v1/serve-resources/introduction/) -------------------------------------------------------------------------------- # Probar la aplicación Antes de desplegar la aplicación en la consola remota, puede probar la aplicación en un servidor local y verificar que todo funcione correctamente usando Catalyst CLI. Para servir el proyecto de Catalyst localmente, ejecute el siguiente comando desde el directorio de su proyecto: catalyst serve Info: La aplicación se servirá idealmente en el puerto predeterminado 3001. Si el puerto está ocupado por otro proceso en su sistema local, se servirá en el siguiente puerto disponible. <br /> Nota: Cada vez que acceda a la página principal o a cualquiera de las subpáginas de su aplicación, el CLI mostrará un registro en vivo de la URL accedida, junto con el método de solicitud HTTP. <br /> Ahora puede abrir la URL localhost de la aplicación en un navegador para acceder a la aplicación Task Manager. <br /> ### Probar la funcionalidad de creación 1. Complete los campos requeridos y haga clic en **Add Task** para crear una tarea. <br /> 2. La tarea será creada. Puede verificar si su tarea ha sido creada buscando los datos en la tabla NoSQL presente en la consola. <br /> 3. Seleccione la tabla *TaskHandler* del menú desplegable de índice, y busque usando el UserID (**Partition Key**) o el Task Name (**Sort Key**). Proporcione valores para los atributos requeridos para realizar la búsqueda. <br /> ### Probar la funcionalidad de filtrado 1. Haga clic en el botón **Filter Task** en la aplicación del cliente para navegar a la sección de operaciones de filtrado. Puede buscar tareas que coincidan con los criterios de los filtros que proporcione. <br /> 2. Ingrese las entradas requeridas y haga clic en **Apply Filters** para ver los resultados filtrados. <br /> ### Probar las operaciones de edición y eliminación Después de haber consultado una tarea, puede realizar operaciones de edición y eliminación sobre la tarea. Para editar una tarea: 1. Haga clic en **Edit** para editar la tarea. <br /> 2. Haga clic en **Submit** una vez que haya actualizado la tarea. <br /> La tarea será actualizada. Para eliminar una tarea: 1. Haga clic en **Delete** en la tarea que ya no necesite. <br /> 2. Haga clic en **OK** para confirmar la operación de eliminación. <br /> La tarea será eliminada permanentemente de la tabla NoSQL y de la aplicación. Puede abrir NoSQL en su consola para verificar si estas actualizaciones se realizaron. Si la aplicación funciona según lo definido en esta página, entonces puede desplegar la aplicación. -------------------------------------------------------------------------------- title: "Desplegar la aplicación" description: "Construya una aplicación React de gestión de tareas para crear y administrar tareas. Puede realizar operaciones CRUD y funcionalidad de filtrado sobre las tareas." last_updated: "2026-10-08T06:48:03.667Z" source: "https://docs.catalyst.zoho.com/es/tutorials/task-manager/nodejs/deploy-app/" service: "All Services" related: - Documentación de ayuda de Catalyst NoSQL (/es/cloud-scale/help/nosql/introduction/) - Documentación de ayuda de Web Client Hosting (/es/cloud-scale/help/web-client-hosting/introduction/) - Desplegar recursos del CLI (/es/cli/v1/serve-resources/introduction/) -------------------------------------------------------------------------------- # Desplegar la aplicación Para desplegar su proyecto de Catalyst desde el CLI a la consola de Catalyst en la nube, ejecute el siguiente comando en su terminal desde el directorio de su proyecto: catalyst deploy <br /> La función se despliega primero, seguida del componente del cliente. Los endpoints URL de los componentes se mostrarán en el CLI. <br /> Puede acceder a la aplicación desplegada desde el componente **Web Client Hosting** presente en la sección del servicio *CloudScale* bajo la sección *HOST & MANAGE*. <br /> Ahora puede abrir la URL del componente del cliente en un navegador para acceder a la aplicación desplegada. La aplicación **Task Manager** ahora puede accederse desde la URL de su aplicación web. <br /> La aplicación Task Manager ahora es funcional y funcionará sin errores.