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)
• Proyecto de Catalyst (Consulta Proyectos de Catalyst)
• 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 que es el ID único de tu proyecto y el ZAID que es la clave del proyecto.

Estos valores se pueblan automáticamente según el entorno 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.

<script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/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>

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:

catalyst.setCatalystEnv(keyName,value)

• Para get (obtener) la variable de entorno:

catalyst.getCatalystEnv(key)

• Para delete (eliminar) la variable de entorno:

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.

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.

catalyst.file.folderId(folder_id).fileId(file_id).delete();

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 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.

5. Ábrelo en tu editor de texto, cuya estructura se ve como la que se muestra a continuación.

La siguiente tabla describe la lista de archivos y sus propósitos en tu directorio de recursos.

Estructura de client-package.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:

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 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:

Una vez desplegada, obtendrás un endpoint URL con el cual puedes acceder a tu aplicación cliente.