--- title: "Descripción general" url: https://docs.catalyst.zoho.com/es/sdk/web/v4/overview/ description: "Catalyst Web SDK es un conjunto de herramientas y bibliotecas que te permiten acceder a los componentes de Catalyst y crear aplicaciones web cliente" last_updated: 2026-08-28T07:59:38Z service: All Services type: general related_links: - name: "Overview - Node.js SDK" url: /es/sdk/nodejs/v2/overview/ - name: "Overview - Java SDK" url: /es/sdk/java/v1/overview/ - name: "Overview - Python SDK" url: /es/sdk/python/v1/overview/ --- # Web SDK ## Descripción general El Catalyst Web SDK tiene los métodos de JavaScript que te ayudan a acceder a los componentes de Catalyst desde tu aplicación web cliente. ### Prerrequisitos * Catalyst CLI (Consulta [Instalación del CLI](https://docs.catalyst.zoho.com/es/getting-started/installing-catalyst-cli)) * Proyecto de Catalyst (Consulta [Proyectos de Catalyst](https://docs.catalyst.zoho.com/es/getting-started/catalyst-projects)) * Cualquier editor de texto (Xcode o Sublime) ### Authentication Catalyst proporciona un mecanismo de autenticación sencillo para que los usuarios accedan a las APIs REST de Catalyst y nuestros SDKs. Para utilizar los componentes de Catalyst desde tu aplicación cliente, es obligatorio integrar el mecanismo de autenticación proporcionado por Catalyst. ### Inicializar el SDK La autenticación de Catalyst se puede integrar con tu aplicación, incluyendo el fragmento de código que se muestra a continuación en tu aplicación. Este script te permite acceder a los métodos de JavaScript del Catalyst Web SDK. Esto inicializa el Web SDK y hace referencia a un archivo `init.js` que poblará automáticamente los detalles esenciales de tu proyecto, como el [Project ID](https://docs.catalyst.zoho.com/es/getting-started/set-up-a-catalyst-project/general-settings) que es el ID único de tu proyecto y el [ZAID](https://docs.catalyst.zoho.com/es/getting-started/set-up-a-catalyst-project/environment-settings) que es la clave del proyecto. > **Nota:** El patrón de solicitud `/\_\_catalyst/ \*` está reservado. No podrás incluir tus propios archivos en esa ubicación. Estos valores se pueblan automáticamente según el [entorno](https://docs.catalyst.zoho.com/es/deployment-and-billing/environments/introduction) en el que estés trabajando. Es decir, si este script se llama desde la URL del entorno de desarrollo de tu aplicación, se puebla el valor ZAID apropiado. ```xml <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"></script> <script src="/__catalyst/sdk/init.js"></script> <script> catalyst.auth.signIn("your element id here...."); </script> ``` Puedes construir el formulario de inicio de sesión de tu aplicación como un iFrame usando este fragmento de código. Sin embargo, debes agregar este fragmento de código en todas tus páginas. Este script de inicialización es necesario en todas las páginas porque el alcance del objeto **`catalyst`** está limitado a una sola página. El código contiene la línea: `catalyst.auth.signIn("Your elementID here");`. El `elementID` puede ser el ID de cualquier elemento HTML o elemento `div` en la página de inicio de sesión de tu aplicación. Debes reemplazar esto con el `elementID` del inicio de sesión de tu aplicación e implementar esto en la página que contiene el inicio de sesión del usuario. Ahora puedes crear una división en la misma página para tu iFrame como: _<div id="Your elementID here"> </div>_. Esto extenderá el iFrame para el inicio de sesión del usuario en la misma página. Por ejemplo, si tu elementID es "login", tu código se verá así: * En el script de inicialización del Web SDK: _catalyst.auth.signIn("login");_ * En el cuerpo de tu página: _<div id="login"></div>_ > **Nota:** También puedes acceder a una versión anterior (v 1.0.0) del script de inicialización web desde la sección de Embedded Authentication en [Authentication](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/introduction/). Consulta la [página de ayuda de Embedded Authentication](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/scripts-for-embedded/) para más detalles. ### Gestionar variables de entorno Puedes gestionar las variables de entorno a través de código utilizando los siguientes métodos de Catalyst: * **Para `set` (establecer) la variable de entorno**: ```json catalyst.setCatalystEnv(keyName,value) ``` * **Para `get` (obtener) la variable de entorno**: ```json catalyst.getCatalystEnv(key) ``` * **Para `delete` (eliminar) la variable de entorno**: ```json catalyst.deleteCatalystEnv(key) ``` ### Objetos de instancia Siempre es efectivo minimizar el acceso a la API cuando no es necesario. En caso de que necesites una referencia de API que no deba realmente ejecutar la API, sino que deba referirse al componente en tu código para acceso posterior, el Catalyst Web SDK proporciona esa facilidad. Por ejemplo, el siguiente código no ejecutará una llamada API para referirse a un componente de archivo específico. ```javascript catalyst.file.folderId(folder_id).fileId(file_id); ``` Sin embargo, el siguiente código sí ejecutará una llamada API para eliminar un archivo de una carpeta seleccionada. ```javascript catalyst.file.folderId(folder_id).fileId(file_id).delete(); ``` > **Nota:** Las promesas se devuelven con un objeto especificado después de ejecutar la llamada API real. Por lo tanto, **.then()** se maneja solo después de las llamadas API reales. Las llamadas API no pueden usarse con objetos ficticios que no ejecutan una API. ### Respuestas y excepciones Todas las respuestas se devuelven como objetos JSON que contienen datos, códigos de estado y mensajes de estado. Un desarrollador puede rastrear las respuestas fácilmente desde estos objetos. #### Excepciones Los comportamientos defectuosos de la salida de la aplicación se llaman excepciones o errores. El **Catalyst Web SDK** lanza 3 tipos de errores llamados **`appET, ServerET,` y ` DeveloperET.`** Estos errores definen si el comportamiento defectuoso es causado por el código de la aplicación, un error del servidor u otra cosa. #### Codificar la aplicación cliente 1. Abre la terminal de tu sistema y crea un directorio de recursos vacío. 2. [Inicializa Catalyst](https://docs.catalyst.zoho.com/es/cli/v1/initialize-resources/initialize-client/) y selecciona la opción **client**. 3. Selecciona el proyecto que creaste para desplegar la aplicación cliente. 4. Se generará un código boilerplate del cliente como se muestra a continuación. ![web1](https://catalyst-docs-development.zohostratus.in/images/sdk/web/v4/web1.webp) 5. Ábrelo en tu editor de texto, cuya estructura se ve como la que se muestra a continuación. ![web2](https://catalyst-docs-development.zohostratus.in/images/sdk/web/v4/web2.webp) > **Nota:** La ubicación donde se genera el código boilerplate (la carpeta **client** y **catalyst.json**) es la **ubicación principal del proyecto**. La siguiente tabla describe la lista de archivos y sus propósitos en tu directorio de recursos.
N.° Archivos/Paquetes Propósito
1 client (carpeta) La carpeta que tiene los archivos estáticos (js, css, html, etc.) de tu aplicación cliente.
2 client-package.json Un archivo JSON que tiene la información de configuración de tu aplicación cliente
### Estructura de client-package.json ```json { "name": "SampleApp", "version": "1.0.0", "description": "This is my sample app", "homepage": "index.html", "login_redirect":"home.html" } ``` Aquí están los atributos de ** client-package.json**:
Nombre de la clave Descripción
name Nombre de tu aplicación cliente
version Versión de tu aplicación cliente. Consulta la página de ayuda de Web Client Hosting para información detallada sobre la gestión de versiones de la aplicación cliente.
description Una breve descripción sobre la versión actual que vas a desplegar.
homepage La página de destino de tu aplicación, por ejemplo index.html.
login_redirect La página a la que se redirige después de la página de inicio de sesión. Es obligatoria si integras la autenticación de Catalyst en tu aplicación. Consulta las páginas de ayuda de Authentication y Authentication API para más detalles.
Puedes codificar los elementos de la interfaz de usuario de tu aplicación web, los archivos JavaScript y CSS en los archivos apropiados proporcionados en la carpeta ** Client **. ### Desplegar la aplicación cliente Puedes desplegar la aplicación cliente usando el Catalyst CLI. Consulta la [página de ayuda de Desplegar recursos](https://docs.catalyst.zoho.com/es/cli/v1/deploy-resources/introduction) para ayuda detallada. 1. Abre la terminal de tu sistema. 2. Desde la **ubicación principal del proyecto**, despliega tu aplicación cliente usando el comando: ```sh catalyst deploy --only client ``` > **Nota:** También puedes [desplegar el cliente usando la consola web de Catalyst](https://docs.catalyst.zoho.com/es/cloud-scale/help/web-client-hosting/introduction). Una vez desplegada, obtendrás un endpoint URL con el cual puedes acceder a tu aplicación cliente. ![web3](https://catalyst-docs-development.zohostratus.in/images/sdk/web/v4/web3.webp)