# Python -------------------------------------------------------------------------------- title: "Introducción" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads." last_updated: "2026-09-08T11:24:07.042Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/introduction/" service: "All Services" related: - Project Directory Structure (/es/cli/v1/project-directory-structure/introduction/) - Python SDK (/es/sdk/python/v1/overview/) - Zoho CRM (https://www.zoho.com/in/crm/) -------------------------------------------------------------------------------- # Lead Manager App ### Introducción Este tutorial te ayudará a construir una aplicación web que pueda conectarse con tu cuenta de Zoho CRM y te permita gestionar leads en tu organización. Podrás acceder, agregar, editar o eliminar leads en el módulo Leads de tu cuenta de CRM, directamente desde esta aplicación. La conexión con Zoho CRM se establece mediante el protocolo de autenticación OAuth 2.0. Generaremos un Access Token de OAuth para la aplicación Lead Manager y lo usaremos para autorizar la conexión y acceder a los datos de CRM. También implementaremos un conector de Catalyst para gestionar este acceso a la cuenta de CRM. El conector actualizará el Access Token automáticamente cada vez que expire usando un Refresh Token, y mantendrá una conexión constante entre el cliente y la cuenta de CRM. Estos tokens se pueden generar después de registrar la aplicación cliente en la consola de la API de Zoho y obtener las credenciales necesarias. La aplicación cliente se verá así: <br /> La aplicación Lead Manager contiene los siguientes componentes fundamentales de Catalyst: 1. **Catalyst Serverless**: - Advanced I/O Function: La Advanced I/O Function está codificada en el entorno de programación Java. La función define las APIs que manejan las acciones CRUD del módulo Leads de CRM, como agregar o eliminar un lead, desde la aplicación cliente. También define rutas que manejan la conexión con CRM, autentican al usuario y generan los tokens de OAuth. 2. **Catalyst Cloud Scale**: - Data Store: Para almacenar el Refresh Token y el UserID del usuario de Catalyst obtenidos por la Advanced I/O function. El Refresh Token se obtiene de esta tabla por la función, cada vez que se necesita generar un nuevo Access Token. - ZCQL: Para obtener datos del Data Store mediante consultas. - Client: Este es el front end de la aplicación que se aloja en Catalyst a través de web client hosting. - Authentication: Para implementar una opción de inicio de sesión con Zoho en la página de login de la aplicación cliente, además de la opción de inicio de sesión estándar, implementaremos el tipo de Embedded authentication en este tutorial. Usaremos la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst para construir esta aplicación. Se te proporcionará el código de los archivos que se deben incluir en los componentes de función y cliente en este tutorial. Solo necesitarás copiar el código proporcionado y pegarlo en los archivos apropiados según las indicaciones. ### Arquitectura de la aplicación La arquitectura de la aplicación Lead Manager se muestra a continuación: <br /> Explicaremos la arquitectura en detalle en la sección Configurar el Client, después de que configures los componentes de función y cliente. -------------------------------------------------------------------------------- title: "Requisitos previos" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.043Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/prerequisites/" service: "All Services" related: - CLI Command Reference (/es/cli/v1/cli-command-reference/) - Install CLI (/es/getting-started/installing-catalyst-cli/) - Login CLI (/es/cli/v1/login/login-from-cli/) -------------------------------------------------------------------------------- # Requisitos previos Antes de comenzar a construir la aplicación, debes tener los siguientes requisitos previos instalados en tu sistema: 1. Catalyst CLI<br /><br /> Catalyst CLI contiene un conjunto de herramientas que te permiten inicializar, desarrollar, probar y desplegar los componentes de tu aplicación desde tu máquina local. Trabajaremos con Catalyst CLI en este tutorial. Debes realizar estas acciones: 1. Instalar Catalyst CLI: Catalyst CLI se instala a través de NPM. Por lo tanto, debes tener NPM y Node.js instalados en tu sistema antes de instalar el CLI. Consulta la página de ayuda **Instalar Catalyst CLI** para obtener detalles sobre los requisitos previos y los pasos para instalarlo. 2. Iniciar sesión en Catalyst CLI: Después de instalar Catalyst CLI, debes autenticar el CLI con tu cuenta de Catalyst antes de usarlo. Consulta la página de ayuda **Inicio de sesión en CLI** para conocer los pasos para iniciar sesión desde Catalyst CLI y las diversas opciones disponibles. 2. Cuenta de Zoho CRM<br /><br /> Dado que el módulo Leads está disponible en todas las ediciones de Zoho CRM, puedes tener una cuenta de Zoho CRM configurada de cualquier edición para establecer una conexión con la aplicación Lead Manager. Si no tienes una cuenta de Zoho CRM, puedes registrarte aquí. 3. **Instalar Python versión 3.9** Antes de comenzar a desarrollar la lógica de tu aplicación en Python, asegúrate de tener el siguiente gestor de paquetes y entorno de programación instalados en tu máquina local: * **Pip** - Gestor de paquetes de Python * **Python versión 3.9** Puedes instalar Python desde su sitio web oficial y el gestor de paquetes pip se instalará automáticamente en tu sistema local. Asegúrate de instalar el paquete pip manualmente si instalas Python desde otras fuentes. Puedes consultar este documento para instalar pip. Nota: Si tienes otras versiones de Python instaladas en tu máquina local (una versión de Python fuera del rango soportado de Python 3.9 a 3.13), la ejecución de las funciones de Python en tu directorio se omitirá cuando la aplicación esté siendo servida o desplegada. 4. Cualquier herramienta IDE para desarrollo de código Node.js y cliente<br /><br /> Puedes usar cualquier IDE para trabajar con la función y el código del cliente. Algunas opciones populares incluyen Visual Studio Code, IntelliJ IDEA, Eclipse y Sublime Text. Descarga e instala un IDE de tu preferencia en tu sistema. Si eres usuario del IDE Visual Studio Code, puedes instalar la extensión Catalyst Tools, y usar tu propio IDE en lugar del CLI. Puedes encontrar más detalles sobre la extensión de Catalyst para VS Code en esta sección de ayuda. -------------------------------------------------------------------------------- title: "Crear un proyecto" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.043Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/create-project/" service: "All Services" related: - Project Directory (/es/cli/v1/project-directory-structure/introduction) - Setup Catalyst Projects (/es/getting-started/catalyst-projects) -------------------------------------------------------------------------------- # Crear un proyecto Vamos a crear un proyecto de Catalyst desde la consola de Catalyst. 1. Inicia sesión en la consola de Catalyst y haz clic en Create new Project. <br /> 2. Ingresa el nombre del proyecto como "LeadManager" en la ventana emergente. <br /> 3. Haz clic en Create. Tu proyecto será creado y abierto. <br /> -------------------------------------------------------------------------------- title: "Crear una tabla" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.043Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/create-table/" service: "All Services" related: - Data Store (/es/cloud-scale/help/data-store/introduction) -------------------------------------------------------------------------------- # Crear una tabla en el Data Store A continuación, vamos a crear una tabla en el Data Store. Esta tabla se usa para almacenar los valores del Refresh Token y el userID, que se recuperan cada vez que se necesita generar un Access Token. Para crear una tabla: 1. Navega al servicio **Catalyst Cloud Scale** en la consola y haz clic en **Data Store** en Storage. 2. Haz clic en **Create a new Table.** <br /> 3. Ingresa el nombre de la tabla como "Token" y haz clic en **Create**. <br /> Nota: Asegúrate de ingresar el nombre exactamente como se indica, porque el código de la aplicación contiene el mismo nombre. La tabla será creada y se mostrará en la página del Data Store. Ahora, vamos a crear dos columnas en la tabla para almacenar el userID y el refresh token respectivamente. 1. Haz clic en New Column en la sección **Schema View** de la tabla del Data Store. <br /> 2. Ingresa el nombre de la columna como "refresh\_token". Selecciona el tipo de dato como Encrypted Text, y haz clic en **Create**. <br /> Puedes conocer los diversos tipos de datos soportados por Catalyst y las otras propiedades de una columna en la página de ayuda del Data Store. Nota: Asegúrate de ingresar el nombre exactamente como se indica, porque el código de la aplicación contiene el mismo nombre. 3. Crea otra columna siguiendo los pasos anteriores con el nombre de columna **"userId"** del tipo de dato **"BigInt"**. No necesitas proporcionar otros valores. Las columnas serán creadas y listadas en la sección Schema View. #### Configurar ámbitos y permisos Para permitir que cualquier usuario de la aplicación Lead Manager vea o gestione leads desde la aplicación cliente, debes habilitar un permiso de tabla adicional que permita al usuario obtener y almacenar nuevos Refresh Tokens, si es necesario. Haz clic en la pestaña Scopes and Permissions de la tabla **Token**, luego marca el permiso Insert para el rol **App User** en la sección **Table Permissions**. El permiso Select ya estará marcado por defecto. <br /> El Data Store está ahora configurado para la aplicación. -------------------------------------------------------------------------------- title: "Habilitar inicio de sesión con Zoho" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.044Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/enable-zoho-sign-in/" service: "All Services" related: - Authentication (/es/cloud-scale/help/authentication/user-management/users/introduction/) -------------------------------------------------------------------------------- # Habilitar inicio de sesión con Zoho La aplicación Lead Manager contiene una página de inicio de sesión donde debes proporcionar credenciales válidas para acceder a tu cuenta de Zoho CRM. Puedes implementar una funcionalidad de registro para esta aplicación por tu cuenta, si lo necesitas. De lo contrario, también puedes integrar la función de inicio de sesión con Zoho que te permitirá iniciar sesión en la aplicación cliente directamente usando tu cuenta de Zoho. Para configurar el inicio de sesión con Zoho para la aplicación Lead Manager desde la consola: 1. Navega a **Authentication** en la sección **Security & Identity**, haz clic en **Setup** en la pestaña **Native Catalyst Authentication**. <br /> 2. Selecciona **Embedded Authentication**. Haz clic en **Next**. <br /> 3. En la página de configuración de autenticación, habilita **Public Signup** y haz clic en **Zoho**. <br /> 4. En el cuadro de diálogo que aparece, haz clic en Yes, proceed. <br /> 5. Proporciona el nombre del cliente como **"LeadManagerApp"** y haz clic en **Enable.** <br /> Nota: Puedes ingresar cualquier nombre que necesites. Sin embargo, ten en cuenta que usaremos "LeadManagerApp" como nombre del cliente al inicializarlo en el CLI y al registrarlo en la consola de la API de Zoho. 6. No configuraremos ninguna configuración de autenticación adicional para nuestra aplicación. Haz clic en **Finish** <br /> El inicio de sesión con Zoho ahora estará disponible para la aplicación cliente. -------------------------------------------------------------------------------- title: "Inicializar el proyecto" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.044Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/initialize-project/" service: "All Services" related: - Initialize CLI Resources (/es/cli/v1/initialize-resources/introduction) - Project Directory Structure (/es/cli/v1/project-directory-structure/introduction) -------------------------------------------------------------------------------- # Inicializar el proyecto desde el CLI Ya hemos configurado todos los componentes necesarios desde la consola. A continuación, trabajaremos en codificar la aplicación desde nuestro sistema local. Ahora puedes comenzar a trabajar en tu proyecto de Catalyst desde el CLI. El primer paso es inicializar el proyecto en un directorio vacío. Este será el directorio principal de tu proyecto, donde se guardarán todos los archivos de tu proyecto. Puedes aprender más sobre esto en la página de ayuda de Estructura de directorios del proyecto. Puedes aprender sobre la inicialización de un proyecto en detalle en la documentación de ayuda del CLI. Para la aplicación Lead Manager, inicializaremos la función Advanced I/O en el entorno Java o Node.js, y el componente cliente. 1. Crea una carpeta para el proyecto en tu máquina local y navega hacia ella desde la terminal. 2. Inicializa un proyecto ejecutando el siguiente comando desde ese directorio: catalyst init 3. Selecciona el portal (u organización) en el que creaste tu proyecto navegando con las teclas de flecha y presiona **Enter** para confirmar. <br /> 4. Ahora, el CLI te pedirá que asocies un proyecto de Catalyst con el directorio. Asócialo con el proyecto que creamos anteriormente desde la consola. Selecciona **LeadManager** de la lista y presiona **Enter**. <br /> 5. Selecciona **Functions** y **Client** usando la barra espaciadora. Presiona la tecla **Enter** para inicializar. <br /> 6. El CLI iniciará la configuración de la función. Selecciona **AdvancedIO** como tipo de función. <br /> 7. Selecciona el runtime más reciente de **Python** como stack de la función, y presiona **Enter.** <br /> 8. Presiona **Enter** para confirmar el nombre del paquete predeterminado como lead_manager_function y el punto de entrada como main.py. <br /> El CLI descargará e instalará el paquete más reciente del SDK de Python de Catalyst. Nota: Asegúrate de ingresar el nombre del paquete, o el nombre de la clase y la carpeta, exactamente como se indica, porque el código de la aplicación contiene los mismos nombres. 9. El CLI iniciará la configuración del cliente a continuación. Elige **Basic web app.** <br /> 10. Proporciona el nombre del cliente como **"LeadManagerApp"**. <br /> Nota: Puedes ingresar cualquier nombre que necesites. Sin embargo, puedes usar el mismo nombre que usaste al habilitar el inicio de sesión con Zoho para mantener la estandarización. El directorio de funciones y cliente ahora está creado en la estructura estándar. La inicialización de Catalyst está ahora completa. Tu directorio de proyecto (CATALYST_PROJECT_HOME) ahora está configurado con el directorio del cliente (CATALYST\_CLIENT\_HOME) y el directorio de funciones (CATALYST\_FUNCTIONS\_HOME) junto con archivos de configuración y dependencias. El directorio del proyecto también contiene el archivo de configuración catalyst.json, un archivo requirements.txt y un archivo oculto .catalystrc. <br /> Nota: La imagen anterior incluye un archivo adicional login.html. Esta es la estructura final del directorio de tu proyecto. Crearemos login.html al configurar el directorio del cliente. -------------------------------------------------------------------------------- title: "Configurar el directorio de funciones" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.044Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/configure-functions-directory/" service: "All Services" related: - Advanced I/O Functions (/es/serverless/help/functions/advanced-io/) - Functions Directory Structure (/es/cli/v1/project-directory-structure/functions-directory) -------------------------------------------------------------------------------- # Configurar el directorio de funciones Ahora comenzaremos a codificar la aplicación Lead Manager configurando la función Advanced I/O. El directorio de funciones functions/lead_manager_function contiene: * El archivo principal de la función main.py * El archivo de configuración catalyst-config.json * El archivo requirements.txt para mencionar cualquier biblioteca externa que puedas agregar. Agregarás código en main.py y puedes usar cualquier IDE para configurar la función. Nota: Por favor revisa el código en esta sección para asegurarte de que lo comprendes completamente. Discutiremos el código de la función y del cliente, después de que configures el cliente. Puedes copiar directamente el código a continuación y pegarlo en main.py ubicado en el directorio functions/lead_manager_function y guardar el archivo. import json import random import zcatalyst_sdk import logging from flask import Request, make_response, jsonify,redirect import requests import os apiUrl = "https://www.zohoapis.com/crm/v2/Leads" url = "https://accounts.zoho.com/oauth/v2/token" GET = "GET" POST = "POST" PUT = "PUT" DELETE = "DELETE" CLIENT_ID = "1000.CEE5336HDV5JE3UHERR2BRITBI4NCN" CLIENT_SECRET = "5292351d5c5960d7cba13ee1684c646ed8df146530" logger = logging.getLogger() def handler(request: Request): try: app = zcatalyst_sdk.initialize() Datastore = app.datastore() id = os.path.basename(request.path) if request.path == "/generateToken" and request.method == GET: try: code = request.args.get('code') user_management_service = app.authentication() is_local = os.getenv('X_ZOHO_CATALYST_IS_LOCAL') == 'true' protocol = 'http' if is_local else 'https' host = request.headers['host'] if is_local else request.headers['host'].split(':')[0] domain = f"{protocol}://{host}" userDetails = user_management_service.get_current_user() user_id = userDetails["user_id"] tab = Datastore.table(12130000003381913) row = {"refresh_token":getRefreshToken(code,domain),"userId":user_id} tab.insert_row(row) redirect_uri = f"{domain}/app/index.html" return redirect(redirect_uri) except Exception as err: logger.error(err) response = make_response(({ "message": "Internal Server Error. Please try again after sometime.", "error": err, }), 500) elif request.path == "/getUserDetails" and request.method == GET: try: app = zcatalyst_sdk.initialize() userDetails = getUserId(app) if len(userDetails) != 0: response = make_response({ "userId":userDetails[0]["Token"]["userId"] },200) else: response = make_response({ "userId":None },200) return response except Exception as err: response = make_response({ "message":"Internal Server Error in Getting User Details. Please try again after sometime.", "error":err },500) return response elif request.path == "/crmData" and request.method == GET: try: app = zcatalyst_sdk.initialize() userDetails = getUserId(app) accesstoken = getAccessToken(userDetails,app) headers = { 'Authorization':f'Zoho-oauthtoken {accesstoken}', "Content-Type": "application/json" } response1 = requests.get(apiUrl,headers=headers) response = make_response(jsonify(response1.json()),200) return response except Exception as err: logger.error(err) response = make_response({ "message":"Internal Server Error.Please try again after sometime" },500) return response elif request.path == "/crmData" and request.method == POST: try: app = zcatalyst_sdk.initialize() data = {"data": [json.loads(request.data)]} userDetails = getUserId(app) accesstoken = getAccessToken(userDetails,app) headers = { 'Authorization':f'Zoho-oauthtoken {accesstoken}', "Content-Type": "application/json" } response1 = requests.post(apiUrl,headers=headers,json=data) if response1.status_code == 200 or response1.status_code == 201: response = make_response((response1.json()),200) return response else: logger.error(response1.json()) response = make_response((response1.json()),500) return response except Exception as err: logger.error(err) response = make_response({ "message":"Internal Server Error.Please try again after sometime" },500) return response elif request.path == f"/crmData/{id}" and request.method == GET: try: app = zcatalyst_sdk.initialize() userDetails = getUserId(app) accesstoken = getAccessToken(userDetails,app) headers = { 'Authorization':f'Zoho-oauthtoken {accesstoken}', "Content-Type": "application/json" } path = f"/{id}" response1 = requests.get(apiUrl+path,headers=headers) response = make_response((response1.json()),200) return response except Exception as err: logger.error(err) response = make_response({ "message":"Internal Server Errro.Please try again after sometime" },500) return response elif request.path == f"/crmData/{id}" and request.method == PUT: try: app = zcatalyst_sdk.initialize() reqData = request.get_json() data = { "data":[reqData] } if reqData is None: response = make_response({ "message":"Update Data not found" },400) userDetails = getUserId(app) accesstoken = getAccessToken(userDetails,app) headers = { 'Authorization':f'Zoho-oauthtoken {accesstoken}', "Content-Type": "application/json" } path = f"/{id}" response1 = requests.put(apiUrl+path,headers=headers,json=data) response = make_response((response1.json()),200) return response except Exception as err: logger.error(err) response = make_response({ "message":"Internal Server Error.Please try again after sometime" },500) return response elif request.path ==f"/crmData/{id}" and request.method == DELETE: try: app = zcatalyst_sdk.initialize() userDetails = getUserId(app) accesstoken = getAccessToken(userDetails,app) headers = { 'Authorization':f'Zoho-oauthtoken {accesstoken}', "Content-Type": "application/json" } path = f"/{id}" response1 = requests.delete(apiUrl+path,headers=headers) response = make_response((response1.json()),200) return response except Exception as err: logger.error(err) response = make_response({ "message":"Internal Server Errro.Please try again after sometime" },500) return response else: response = make_response('Unknown path') response.status_code = 400 return response except Exception as err: logger.error(f"Exception in CRM function {err}") response = make_response(500) return response def getRefreshToken(code,domain): params = { 'code':code, 'client_id':CLIENT_ID, 'client_secret':CLIENT_SECRET, 'grant_type':'authorization_code', 'redirect_uri':f"{domain}/server/lead_manager_function/generateToken" } response = requests.post(url,params = params) data = response.json() print(f'\n\nrefresh_token:{data}\n\n') return data['refresh_token'] def getAccessToken(userdetails,app): userId = userdetails[0]['Token']['userId'] Zcql = app.zcql() query = f"Select refresh_token FROM Token where userId={userId}" response = Zcql.execute_query(query) refresh_token = response[0]['Token']['refresh_token'] args = {} args["client_id"] = CLIENT_ID args["client_secret"] = CLIENT_SECRET args["auth_url"] = url args["refresh_url"] = url args["refresh_token"] = refresh_token connector_service = app.connection({userId:args}) access_token = connector_service.get_connector(userId).get_access_token() return access_token def getUserId(app): try: user = app.authentication().get_current_user() user_id = user["user_id"] response = app.zcql().execute_query(f"Select * from Token where userId = {user_id}") return response except Exception as err: response = make_response({ "message":"Internal Server error", "error":err },500) return response Nota: Después de copiar y pegar este código en tu archivo de función, asegúrate de reemplazar los siguientes valores en él: * Client ID en la línea 14 * Client Secret en la línea 15 * Table ID en la línea 32 El directorio de funciones está ahora configurado. Discutiremos el código de la función y del cliente, después de que configures el cliente. -------------------------------------------------------------------------------- title: "Registrar el cliente" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.045Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/register-client/" service: "All Services" related: - Catalyst CLI Documentation (/es/cli/v1/cli-command-reference/) -------------------------------------------------------------------------------- # Registrar la aplicación cliente en la consola de la API de Zoho Ahora debemos registrar la aplicación cliente en la consola de la API de Zoho, para generar las siguientes credenciales: * Client ID: La clave única generada para un cliente registrado * Client Secret: El valor secreto generado para el Client ID de un cliente registrado El Client ID y el Client Secret se agregan en el código de la función y del cliente en varios lugares. Estos valores son necesarios para generar el Access Token y el Refresh Token inicialmente, y posteriormente para actualizar el Access Token usando el Refresh Token. Para registrar la aplicación cliente en la consola de la API de Zoho: 1. Visita la consola de la API de Zoho y haz clic en Get Started. 2. Selecciona Server-based Applications como tipo de cliente.<br /> <br /> 3. Ingresa "LeadManagerApp" como nombre del cliente. <br /> <br /> Proporciona los demás detalles en el siguiente formato: * Homepage URL: {APP_DOMAIN}/app/index.html * Authorized Redirect URIs: {APP_DOMAIN}/server/lead_manager_function/generateToken Reemplaza {APP_DOMAIN} con el valor de la URL de la aplicación del proyecto LeadManager que creaste en Catalyst. La URL de la aplicación sigue la siguiente sintaxis: **https:<span></span>//{nombre del proyecto}-{orgID}.development.catalystserverless.com** Nota: 1. Puedes obtener el nombre del proyecto navegando a **Settings** en la esquina superior derecha de la consola de Catalyst. Luego ve a **Project Settings->General**. Asegúrate de ingresar el nombre de tu proyecto en minúsculas sin espacios en la URL del dominio. 2. Puedes obtener el valor del Org id directamente desde la URL en la consola de Catalyst. Por ejemplo, en la siguiente URL, **"687259092"** es el Org Id. <br> **https:<span></span>//console.catalyst.zoho.com/baas/687259092/project/11811000000477018/Development** Por ejemplo, la homepage URL en este caso será: **https:<span></span>//leadmanager-687259092.development.catalystserverless.com/app/index.html.** Y la redirect URL será: **https:</span><span></span>//leadmanager-687259092.development.catalystserverless.com/server/lead_manager_function/generateToken** Ingresaremos la ruta a la página index del cliente como homepage URL, y una ruta definida en la función de Python como URI de redirección autorizada. Discutiremos estos pasos en las siguientes secciones. * Debes agregar otra Authorized Redirect URI para el cliente. Serviremos la aplicación a través de un localhost para probarla después de configurar el código. Debido a que será redirigida a un dominio local, debemos agregar eso como otra URI de redirección autorizada. Haz clic en el ícono (+) debajo de Authorized Redirect URIs y agrega: "http://localhost:3000/server/lead_manager_function/generateToken" Nota: Cuando sirves una aplicación localmente desde el CLI, se aloja en el puerto 3000 por defecto. Por lo tanto, estamos agregando el dominio de acuerdo a esto. 4. Haz clic en Create después de configurar estos detalles. La consola de la API generará y mostrará los valores del Client ID y Client Secret para el cliente registrado en la pestaña **Client Secret**. Necesitarás copiar estos valores y pegarlos en los archivos de la función y del cliente en el directorio de tu proyecto. Discutiremos esto en la siguiente sección. -------------------------------------------------------------------------------- title: "Configurar el cliente" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.045Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/configure-client-directory/" service: "All Services" related: - Client Directory Structure (/es/cli/v1/project-directory-structure/introduction) - Web Client Hosting (/es/cloud-scale/help/web-client-hosting/introduction) -------------------------------------------------------------------------------- # Configurar el directorio del cliente Ahora vamos a configurar el componente cliente. El directorio del cliente contiene: * El archivo index.html que contiene el código HTML para la aplicación frontend * El archivo main.css que contiene el código CSS * El archivo main.js que contiene el código JavaScript * El archivo de configuración client-package.json Codificaremos index.html, main.js y main.css. También crearemos un nuevo archivo login.html en este directorio y agregaremos código en él. Nota: Por favor revisa el código en esta sección para asegurarte de que lo comprendes completamente. Discutiremos el código al final de esta sección. Copia el código a continuación y pégalo en los archivos respectivos ubicados en el directorio client/ de tu proyecto usando un IDE y guarda los archivos. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;CRM Lead Manager&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="main.css" /&gt; &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt; &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet"&gt; &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt; &lt;/script&gt; &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt; &lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"&gt;&lt;/script&gt; &lt;script src="/__catalyst/sdk/init.js"&gt;&lt;/script&gt; &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt; &lt;style&gt; #connect { height: 260px; width: 500px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } &lt;/style&gt; &lt;/head&gt; &lt;body onload="getUserDetails()"&gt; &lt;br&gt; &lt;center&gt; &lt;h1&gt;CRM Lead Manager&lt;/h1&gt;&lt;br&gt; &lt;/center&gt; &lt;div id="connect"&gt; &lt;center&gt; &lt;p&gt;Click here to connect to Zoho CRM&lt;/p&gt; &lt;button onclick='navigate()'&gt; &lt;img src="https://www.zohowebstatic.com/sites/default/files/styles/product-home-page/public/icon-crm_blue.png" style="width: 180px;height: 130px;"&gt; &lt;/button&gt; &lt;/center&gt; &lt;/div&gt; &lt;div style="width: 200px;float: right; margin-right: 30px;"&gt;&lt;label for="logoutbtn" class="btn btn-success btn-block btn-outlined"&gt;Logout&lt;/label&gt; &lt;button id="logoutbtn" onclick="logout()" style="display: none;"&gt;&lt;/button&gt; &lt;/div&gt; &lt;div id="main"&gt; &lt;div class="container"&gt; &lt;ul class="nav nav-tabs nav-justified mb-3" id="myTab" role="tablist"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link active" id="check-tab" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="true"&gt;Add a Lead&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" id="report-tab" data-toggle="tab" href="#report" onclick="getLeads()" role="tab" aria-controls="report" aria-selected="false"&gt;Manage Leads&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt;&lt;br&gt; &lt;div class="tab-content" id="myTabContent"&gt; &lt;div class="tab-pane fade show active" id="check" role="tabpanel" aria-labelledby="check-tab"&gt; &lt;div class="tab-pane fade show active" id="ex3-tabs-1" role="tabpanel" aria-labelledby="ex3-tab-1"&gt; &lt;div style="margin-left: 100px; margin-right:100px;"&gt; &lt;form id="leads"&gt; &lt;!-- 2 column grid layout with text inputs for the first and last names --&gt; &lt;div class="row mb-4"&gt; &lt;div class="col"&gt; &lt;div class="form-outline"&gt; &lt;label class="form-label" for="form6Example1"&gt;First name&lt;/label&gt; &lt;input type="text" id="firstName" class="form-control" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;div class="form-outline"&gt; &lt;label class="form-label" for="form6Example2"&gt;Last name&lt;/label&gt; &lt;input type="text" id="lastName" class="form-control" required /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example3"&gt;Company name&lt;/label&gt; &lt;input type="text" id="companyName" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Email input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example5"&gt;Email&lt;/label&gt; &lt;input type="email" id="email" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Text input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example4"&gt;State&lt;/label&gt; &lt;input type="text" id="state" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Number input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example6"&gt;Phone&lt;/label&gt; &lt;input type="number" id="phone" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Number input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example6"&gt;Lead Source&lt;/label&gt; &lt;input type="text" id="leadSource" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Submit button --&gt; &lt;center&gt;&lt;button type="submit" onclick="createLead();return false;" class="btn btn-primary btn-block mb-4" style="width: 100px;"&gt;Add Lead&lt;/button&gt; &lt;div id="loader" style="display: none;"&gt; &lt;div class="spinner-border" role="status"&gt; &lt;span class="sr-only"&gt;Loading...&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/center&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab"&gt; &lt;center&gt; &lt;div id="loaders" style="display: none; padding-top: 200px;"&gt; &lt;div class="spinner-border" role="status"&gt; &lt;span class="sr-only"&gt;Loading...&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/center&gt; &lt;p id="showData"&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Modal --&gt; &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="vertical-alignment-helper"&gt; &lt;div class="modal-dialog vertical-align-center"&gt; &lt;div class="modal-content"&gt; &lt;center&gt; &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;/h4&gt; &lt;div class="modal-body" id="message"&gt;&lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" style="background-color: #007bff;color: white;" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/center&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal fade" id="editForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="vertical-alignment-helper"&gt; &lt;div class="modal-dialog vertical-align-center"&gt; &lt;div class="modal-content"&gt; &lt;div style="margin-left: 80px; margin-right:80px;"&gt; &lt;br&gt; &lt;center&gt; &lt;h2&gt;Edit Lead&lt;/h2&gt; &lt;/center&gt; &lt;br&gt; &lt;form id="editLeads"&gt; &lt;!-- 2 column grid layout with text inputs for the first and last names --&gt; &lt;div class="row mb-4"&gt; &lt;div class="col"&gt; &lt;div class="form-outline"&gt; &lt;label class="form-label" for="form6Example1"&gt;First name&lt;/label&gt; &lt;input type="text" id="editfirstName" class="form-control" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;div class="form-outline"&gt; &lt;label class="form-label" for="form6Example2"&gt;Last name&lt;/label&gt; &lt;input type="text" id="editlastName" class="form-control" required /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example3"&gt;Company name&lt;/label&gt; &lt;input type="text" id="editcompanyName" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Email input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example5"&gt;Email&lt;/label&gt; &lt;input type="email" id="editemail" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Text input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example4"&gt;State&lt;/label&gt; &lt;input type="text" id="editstate" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Number input --&gt; &lt;div class="form-outline mb-4"&gt; &lt;label class="form-label" for="form6Example6"&gt;Phone&lt;/label&gt; &lt;input type="number" id="editphone" class="form-control" /&gt; &lt;/div&gt; &lt;!-- Submit button --&gt; &lt;center&gt;&lt;button type="submit" id="editBtn" onclick="editLead();return false;" class="btn btn-primary btn-block mb-4" style="width: 100px;"&gt;Edit&lt;/button&gt; &lt;div id="loader" style="display: none;"&gt; &lt;div class="spinner-border" role="status"&gt; &lt;span class="sr-only"&gt;Loading...&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/center&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal fade right" id="ModalDanger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog modal-notify modal-danger modal-side modal-top-right" role="document"&gt; &lt;!--Content--&gt; &lt;div class="modal-content"&gt; &lt;!--Header--&gt; &lt;div class="modal-header"&gt; &lt;p class="heading"&gt;Lead Deletion&lt;/p&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt; &lt;span aria-hidden="true" class="white-text"&gt;×&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;!--Body--&gt; &lt;div class="modal-body"&gt; &lt;div class="row"&gt; &lt;div class="col-9"&gt; &lt;p&gt;Are you sure you want to delete the Lead?&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--Footer--&gt; &lt;div class="modal-footer justify-content-center"&gt; &lt;a type="button" class="btn btn-danger" id="delete-btn" onclick="deleteLead()"&gt;Delete&lt;/a&gt; &lt;a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal"&gt;Cancel&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--/.Content--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; //Agrega tu Client ID y URL de redirección aquí function navigate() { window.location.href = "https://accounts.zoho.com/oauth/v2/auth?scope=ZohoCRM.modules.ALL&client_id={{YOUR_CLIENT_ID}}&response_type=code&access_type=offline&redirect_uri="+location.protocol + '//' + location.host + "/server/lead_manager_function/generateToken"; } &lt;/script&gt; &lt;/html&gt; Nota: Después de agregar index.html a tu carpeta del cliente, asegúrate de reemplazar {{YOUR_CLIENT_ID}} en la función navigate() con tu Client ID real de Zoho. function createLead() { debugger; $("#loader").show(); var firstName = $("#firstName").val(); var lastName = $("#lastName").val(); if (lastName == "") { alert("Kindly Enter the Last Name"); $("#loader").hide(); return; } var companyName = $("#companyName").val(); var email = $("#email").val(); var state = $("#state").val(); var phone = $("#phone").val(); var leadSource = $("#leadSource").val(); $.ajax({ url: "/server/lead_manager_function/crmData", type: "post", contentType: "application/json", data: JSON.stringify({ "First_Name": firstName, "Last_Name": lastName, "Company": companyName, "Email": email, "State": state, "Phone": phone, "Lead_Source": leadSource, }), success: function (data) { debugger; $('#leads').trigger("reset"); $("#myModalLabel").html("<br>Success"); $("#message").html("Lead Created Successfully"); $("#loader").hide(); $('#myModal').modal('show'); }, error: function (error) { $('#leads').trigger("reset"); $("#myModalLabel").html("<br>Failure"); $("#message").html("Please try again after Sometime"); $("#loader").hide(); $('#myModal').modal('show'); } }); } function logout() { var redirectURL = "http://localhost:3000/app/login.html"; //Agrega el dominio de tu aplicación var auth = catalyst.auth; auth.signOut(redirectURL); } function getUserDetails() { $("#main").hide(); $("#connect").hide(); catalyst.auth.isUserAuthenticated().then(result => { $("#loader").show(); $.ajax({ url: "/server/lead_manager_function/getUserDetails", type: "get", success: function (data) { $("#loader").hide(); if (data.userId) { $("#main").show(); $("#connect").hide(); } else { $("#connect").show(); $("#main").hide(); } }, error: function (error) { $("#myModalLabel").html("<br>Failure"); $("#message").html("Please try again after Sometime"); $("#loader").hide(); $('#myModal').modal('show'); } }); }).catch(err => { document.body.innerHTML = 'You are not logged in. Please log in to continue. Redirecting you to the login page..'; setTimeout(function () { window.location.href = "login.html"; }, 3000); }); } function getLeads() { debugger; var tableContainer = document.getElementById("showData"); tableContainer.innerHTML = ""; $("#loaders").show(); $.ajax({ url: "/server/lead_manager_function/crmData", type: "get", success: function (data) { debugger; var reqData = getRequiredData(data.data); $("#loaders").hide(); renderTable(reqData); }, error: function (error) { $("#myModalLabel").html("<br>Failure"); $("#message").html("Please try again after Sometime"); $("#loader").hide(); $('#myModal').modal('show'); } }); } function showDeletePopup(leadID) { $('#ModalDanger').modal('show'); var deleteBtn = document.getElementById("delete-btn"); deleteBtn.value = leadID; } function deleteLead() { var leadID = document.getElementById('delete-btn').value; $.ajax({ url: "/server/lead_manager_function/crmData/" + leadID, type: "delete", success: function (data) { debugger; $('#ModalDanger').modal('toggle'); $("#myModalLabel").html("<br>Success"); $("#message").html("Lead Deleted Successfully"); $('#myModal').modal('show'); setTimeout(function () { location.reload(); }, 3000); }, error: function (error) { $("#myModalLabel").html("<br>Failure"); $("#message").html("Please try again after Sometime"); $("#loader").hide(); $('#myModal').modal('show'); } }); } function showEditPopup(leadID) { $.ajax({ url: "/server/lead_manager_function/crmData/" + leadID, type: "get", success: function (data) { debugger; var respData = data.data; $('#editfirstName').val(respData[0].First_Name); $('#editlastName').val(respData[0].Last_Name); $('#editcompanyName').val(respData[0].Company); $('#editemail').val(respData[0].Email); $('#editstate').val(respData[0].State); $('#editphone').val(respData[0].Phone); $('#editleadSource').val(respData[0].Lead_Source); $('#editBtn').val(respData[0].id); $('#editfirstName').html(respData[0].First_Name); $('#editlastName').html(respData[0].Last_Name); $('#editcompanyName').html(respData[0].Company); $('#editemail').html(respData[0].Email); $('#editstate').html(respData[0].State); $('#editphone').html(respData[0].Phone); $('#editleadSource').html(respData[0].Lead_Source); $('#editForm').modal('show'); }, error: function (error) { $("#myModalLabel").html("<br>Failure"); $("#message").html("Please try again after Sometime"); $("#loader").hide(); $('#myModal').modal('show'); } }); } function editLead() { var firstName = $("#editfirstName").val(); var lastName = $("#editlastName").val(); if (lastName == "") { alert("Kindly Enter the Last Name"); return; } var companyName = $("#editcompanyName").val(); var email = $("#editemail").val(); var state = $("#editstate").val(); var phone = $("#editphone").val(); var leadSource = $("#editleadSource").val(); var leadID = $("#editBtn").val(); $.ajax({ url: "/server/lead_manager_function/crmData/" + leadID, type: "put", contentType: "application/json", data: JSON.stringify({ "First_Name": firstName, "Last_Name": lastName, "Company": companyName, "Email": email, "State": state, "Phone": phone, "Lead_Source": leadSource }), success: function (data) { debugger; $('#editForm').modal('toggle'); $("#myModalLabel").html("<br>Success"); $("#message").html("Lead Edited Successfully"); $('#myModal').modal('show'); setTimeout(function () { location.reload(); }, 3000); }, error: function (error) { $('#leads').trigger("reset"); $("#myModalLabel").html("<br>Failure"); $("#message").html("Please try again after Sometime"); $("#loader").hide(); $('#myModal').modal('show'); } }); } function getRequiredData(data) { var i; var resp = []; for (i = 0; i < data.length; i++) { var gulp = { "First Name": data[i].First_Name, "Last Name": data[i].Last_Name, "Phone": data[i].Phone, "Email": data[i].Email, "Company": data[i].Company, "Edit": '&lt;center&gt;&lt;a href=&quot;javascript:showEditPopup(\'' + data[i].id + '\')&quot;&gt;&#9998;︎&lt;/a&gt;&lt;/center&gt;', "Delete": '&lt;center&gt;&lt;a href=&quot;javascript:showDeletePopup(\'' + data[i].id + '\')&quot;&gt;&#128465;︎&lt;/a&gt;&lt;/center&gt;' } resp.push(gulp); } console.log(resp); return resp; } function renderTable(respData) { var col = []; for (var i = 0; i < respData.length; i++) { for (var key in respData[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } var table = document.createElement("table"); table.id = "dataTable"; var tr = table.insertRow(-1); for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; tr.appendChild(th); } for (var i = 0; i < respData.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = respData[i][col[j]]; } } var divContainer = document.getElementById("showData"); divContainer.innerHTML = ""; divContainer.appendChild(table); } #dataTable { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #dataTable td, #dataTable th { border: 1px solid #ddd; padding: 8px; } #dataTable tr:nth-child(even){background-color: #f2f2f2;} #dataTable tr:hover {background-color: #ddd;} #dataTable th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #007bff; color: white; } .vertical-alignment-helper { display: table; height: 100%; width: 100%; pointer-events: none; } .vertical-align-center { display: table-cell; vertical-align: middle; pointer-events: none; } .modal-content { width: inherit; max-width: inherit; height: inherit; margin: 0 auto; pointer-events: all; } &lt;html&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;CRM Lead Manager&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="main.css" /&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="main.css" /&gt; &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt; &lt;script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"&gt;&lt;/script&gt; &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt; &lt;/script&gt; &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt; &lt;/script&gt; &lt;script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"&gt;&lt;/script&gt; &lt;script src="/__catalyst/sdk/init.js"&gt;&lt;/script&gt; &lt;script&gt; catalyst.auth.signIn("login"); &lt;/script&gt; &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt; &lt;style&gt; #login { height: 260px; width: 500px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } &lt;/style&gt; &lt;body&gt; &lt;br&gt; &lt;center&gt; &lt;h1&gt;CRM Lead Manager&lt;/h1&gt; &lt;/center&gt; &lt;div id="login"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; El directorio del cliente está ahora configurado. Repasemos rápidamente el funcionamiento de los componentes de función y cliente de la aplicación: * El archivo login.html en el componente cliente habilita el inicio de sesión con Catalyst Authentication. Esto no maneja la función de inicio de sesión con Zoho, solo el inicio de sesión de Catalyst. * index.html contiene el código para el front-end del cliente. Define una función navigate() que habilita la conexión a la cuenta de CRM pasando la información de autorización requerida como el Client ID y el scope. * La función Advanced I/O define las siguientes APIs que realizan diversas acciones: * /generateToken: Obtiene el Refresh Token llamando a la función getRefreshToken(), y lo inserta junto con el userID del usuario actual en la tabla _Token_ en el Data Store. Luego redirige a la página index del cliente. * /getUserDetails: Obtiene los detalles del usuario llamando a la función getUserDetails(). Si no hay registro en la tabla, se envía una respuesta JSON con solo el userID. Si el registro existe en la tabla, se envía junto con el userID. * /crmData: Esta ruta define la ruta de todos los leads en el módulo Leads. La función de Node ejecuta las operaciones HTTP GET y POST para obtener todos los leads o crear un nuevo lead usando esta ruta respectivamente. * /crmData/:id: Esta ruta define la ruta de un lead particular en el módulo Leads. El id representa el ID único del lead en CRM. La función ejecuta las operaciones HTTP PUT y DELETE para editar o eliminar un lead respectivamente usando esta ruta. * La función Advanced I/O contiene las siguientes funciones que son llamadas por las APIs: * getRefreshToken(): Obtiene el Refresh Token pasando el Client ID, Client Secret, URI de redirección y otros valores requeridos como parámetros de cadena de consulta * getAccessToken(): Obtiene el Access Token pasando el Refresh Token consultado de la tabla Token usando ZCQL, y otros parámetros requeridos. El Access Token se obtiene cada vez que se necesita realizar una operación en el módulo de CRM, como agregar un lead o editar un lead. * getUserId(): Obtiene el registro de la tabla _Token_ que contiene el Refresh Token, pasando el userID * main.js es la función JavaScript en el componente cliente que analiza las respuestas JSON obtenidas de la función y las renderiza en la página index.html. Esta función define las acciones para todos los elementos de la interfaz de usuario en la aplicación cliente. Por ejemplo, getLeads() obtiene todos los leads de la respuesta de la función y los renderiza en el cliente, y showEditPopup() define las acciones para editar un lead. -------------------------------------------------------------------------------- title: "Probar la aplicación" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.046Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/test-application/" service: "All Services" related: - Serve CLI Resources (/es/cli/v1/serve-resources/introduction) -------------------------------------------------------------------------------- # Probar la aplicación Antes de desplegar la aplicación en la consola remota, puedes probar la aplicación en un servidor local y verificar si todo funciona correctamente usando el CLI de Catalyst. Para servir el proyecto de Catalyst localmente, ejecuta el siguiente comando desde el directorio de tu proyecto: catalyst serve La aplicación Lead Manager ahora se servirá en el puerto predeterminado 3000\. Se mostrarán las URLs de los endpoints locales de los componentes. <br /> Nota: Cada vez que accedas a la página principal o a cualquiera de las sub-páginas de tu cliente, o a la función, el CLI mostrará un registro en vivo de la URL accedida, junto con el método de solicitud HTTP. Ahora puedes abrir la aplicación en un navegador usando la URL local del cliente que se muestra en el CLI. <br /> Inicialmente serás redirigido a la página de inicio de sesión. Si configuras una acción de registro por tu cuenta, puedes registrarte primero y luego iniciar sesión en la aplicación. De lo contrario, puedes iniciar sesión usando el ícono de inicio de sesión con Zoho. Serás redirigido a la página de permisos. Acepta los permisos solicitados por la aplicación para acceder a los detalles de tu cuenta de Zoho. <br /> Luego serás redirigido de vuelta a la aplicación. Haz clic en el ícono de Zoho CRM en esta página para conectarte a Zoho CRM. <br /> Ahora puedes crear y gestionar leads en tu cuenta de Zoho CRM configurada, directamente desde esta aplicación. Nota: Si ya has iniciado sesión en tu cuenta de Zoho CRM, puedes proceder agregando leads. Si no, la aplicación te solicitará que elijas la cuenta de CRM que deseas conectar con la aplicación Lead Manager, luego haz clic en Submit. Se listarán todas tus cuentas existentes de desarrollador, sandbox y producción. Para agregar un lead, ingresa los detalles del lead en la sección **Add a Lead** y haz clic en **Add Lead**. Un pop-up de confirmación mostrará el estado cada vez que agregues, edites o elimines un lead. <br /> Puedes hacer clic en la pestaña Manage Leads para ver todos tus leads del módulo Leads. Puedes editar o eliminar cualquiera de ellos haciendo clic en sus respectivos íconos en la tabla. <br /> Puedes actualizar la información de un lead, luego haz clic en Edit. <br /> Si haces clic en el ícono de eliminar, debes confirmar la acción en el pop-up de confirmación. <br /> También puedes verificar los valores del Refresh Token y userID poblados en el Data Store desde tu consola de Catalyst. Navega a la sección Data View de la tabla **Token** para ver el registro que se agregó. <br /> Si eliminas esta entrada, tendrás que autenticar tus credenciales en la aplicación cliente y establecer una conexión con tu cuenta de CRM nuevamente. Puedes cerrar sesión de la aplicación haciendo clic en Logout. Si esta configuración funciona correctamente, podemos desplegar la aplicación a producción. Puedes salir de la sesión serve en tu terminal ejecutando el comando para terminar un proceso en ejecución, según tu sistema operativo. -------------------------------------------------------------------------------- title: "Desplegar el proyecto" description: "Construye una aplicación Lead Manager que se conecte a tu cuenta de Zoho CRM usando el conector de Catalyst, y te permita ver, crear, actualizar o eliminar leads directamente desde el módulo Leads" last_updated: "2026-09-08T11:24:07.046Z" source: "https://docs.catalyst.zoho.com/es/tutorials/leadmanager/python/deploy-project/" service: "All Services" related: - Deploy CLI Resources (/es/cli/v1/deploy-resources/introduction) - Web Client Hosting (/es/cloud-scale/help/web-client-hosting/introduction/) -------------------------------------------------------------------------------- # Desplegar el proyecto Ahora puedes desplegar la aplicación en la consola remota. Nota: Dado que ya habías iniciado sesión en la aplicación Lead Manager desde el servidor local, ya se habría generado un Refresh Token. Este token continuará autenticando tu acceso. Para desplegar tu proyecto de Catalyst desde el CLI, ejecuta el siguiente comando en tu terminal desde el directorio de tu proyecto: catalyst deploy La función se despliega primero, seguida del componente cliente. Se mostrarán las URLs de la aplicación de los componentes. <br /> Ahora puedes abrir la URL del componente cliente en un navegador para acceder a la aplicación desplegada. La aplicación Lead Manager ahora puede ser accedida desde su URL de la aplicación web. <br />