uContact code

uContact Code es una herramienta poderosa dentro de uContact que te permite crear tus propios proyectos dentro de la aplicación, utilizando VSCode, con tu framework preferido y proporcionando las herramientas necesarias para un ciclo de desarrollo eficiente.

¿Cómo crear un nuevo proyecto?

Crear un nuevo proyecto es muy sencillo, ¡veamos como hacerlo!

1. Como primer paso debemos hacer click en la opción de "Formulario" dentro del menu de "Desarrollador".

2. Luego, debemos presionar en el botón "Nuevo" ubicado en la esquina superior derecha.

Aquí deberás completar la información básica del proyecto para poder crearlo.

• Nombre: debes asignarle un nombre único al proyecto.
• Tipo de proyecto: debes seleccionar el Framework que vas a utilizar en el proyecto, puede ser Vue, React, Javascript o Angular.

¡Importante!

Una vez creado el proyecto, demorará unos segundos en instalarse y luego quedará listo para utilizarlo.

Primeros pasos con el proyecto

Una vez que tenemos creado el proyecto, nos aparecerá en el listado de formularios junto con la información del proyecto y algunas acciones que podremos realizar con el proyecto.

• Nombre: es el nombre asociado al formulario.
• Tipo: es el tipo de framework que utiliza el proyecto, puede ser Vue, React o Angular.
• Estado: es el estado actual del proyecto.
• Last built:
• Acciones: las acciones que podremos realizar con el proyecto son las siguientes:
  • Código: esta opción abrirá el proyecto en VSCode.
  • Serve:
  • Build:
  • opcion:
  • Eliminar: esta opción permite eliminar el formulario.

Información

Cuando abrimos uContact Code, lo primero que veremos es una tabla con todos nuestros proyectos creados. Cada proyecto nos mostrará información importante para gestionarlos.

Primero, está la información básica: nombre y framework. Luego tenemos el estado actual del proyecto: si el proyecto está siendo servido o no, y la fecha de la última implementación.

Acciones

Open code server

Después de hacer clic en esta acción, seremos redirigidos a una nueva pestaña con VSCode y el proyecto seleccionado abierto.

Deploy preview

Después de hacer clic en esta acción, seremos redirigidos a una nueva pestaña con la versión actualmente implementada del proyecto.

Deploy

Después de hacer clic en esta acción, los últimos cambios en nuestro proyecto serán implementados y publicados.

Entorno de desarrollo

El entorno de desarrollo es una herramienta que nos permite trabajar en el proyecto y ver los cambios en tiempo real, sin tener que recargar la página.

Si el proyecto no tiene un entorno de desarrollo en ejecución, veremos un botón gris. Después de hacer clic en él, se iniciará el entorno de desarrollo y nos encontraremos con dos nuevos botones:

El botón verde nos redirigirá al entorno de desarrollo, y cualquier cambio que hagamos en el código se reflejará en esta pestaña. El botón rojo detiene el entorno de desarrollo.

¡Importante!

Solamente se puede tener un ambiente de desarrollo corriendo al mismo tiempo.

Plantillas

Una vez que creamos un proyecto y accedemos por primera vez al código, notaremos que por defecto ya hay un pequeño formulario con algunas clases que facilitarán la integración del proyecto con uContact.

Dado que el proyecto se mostrará en un iframe, hay una clase creada con algunos métodos que permiten la comunicación con uContact.

Para realizar cualquier solicitud de API que deseemos, existe otra clase de JavaScript que brinda las herramientas para hacerlas. No tendremos que preocuparnos por la autenticación si estamos utilizando este proyecto en uContact, ya que el token necesario se utilizará automáticamente.