Uso de la nueva API REST de PM con AngularJS

Vamos a construir una aplicación simple en AngularJS para obtener una lista de casos de un usuario de ProcessMaker, utilizando la nueva API REST de ProcessMaker. Es mucho más fácil de lo que parece, lo juro. Primero y ante todo los requisitos Lo que necesitas: ProcessMaker versión 2.8 o posterior Un servidor que ejecute Apache o un servidor web similar. Los permisos de archivo adecuados para crear/copiar archivos dentro del directorio público de Apache. Lo que estoy usando: Un servidor CentOS con ProcessMaker 3.0 en ejecución. Un servidor Wamp local instalado en Windows 8. Todos los archivos necesarios se crearán en la raíz de mi directorio www de Wamp. Registro de nuestra nueva aplicación Comencemos registrando la nueva aplicación en nuestro servidor ProcessMaker, para que se nos proporcione un ID de cliente OAuth y un ID de secreto de cliente: Inicie sesión en su servidor ProcessMaker: Abra la siguiente URL desde su navegador: No olvide usar la dirección de su propio servidor ProcessMaker y el nombre de su espacio de trabajo. Vamos a usar esta interfaz para registrar nuestra aplicación externa: Haga clic en "Nuevo" Defina las siguientes características para su nueva aplicación y haga clic en "Registrar aplicación": - Nombre: caselister - Descripción: Aplicación REST de ejemplo para obtener la lista de casos de la bandeja de entrada de un usuario. - Sitio web: processmaker.com Esta operación generará un número de ID de cliente y un número de ID de secreto de cliente para su aplicación, usaremos ambos para acceder a este servidor ProcessMaker externamente. Puede mostrar los detalles de su aplicación en cualquier momento, seleccionándola de la lista y haciendo clic en "Detalle": Eso es todo. Puede registrar tantas aplicaciones como necesite. Añadiendo algo de magia AngularJS Si esta es la primera vez que usa AngularJS, puede consultar este increíble curso gratuito en Code School, que cubre prácticamente todos los conceptos básicos sobre AngularJS. Creación del archivo app.js Dentro del directorio raíz de www - en mi caso C:\wamp\www - cree un nuevo archivo JavaScript llamado app.js, con el siguiente código fuente: Este archivo contiene todo el código JavaScript necesario para establecer la conexión externa con su servidor ProcessMaker. Ahora déjeme guiarlo a través del código, para que sepa exactamente lo que hace: Parámetros de conexión En las siguientes líneas de código (8 a 17), definimos las credenciales de autenticación necesarias, que incluyen la URL de nuestro servidor ProcessMaker, el nombre del espacio de trabajo, el ID del cliente y el secreto del cliente. Ingrese SU URL de servidor ProcessMaker y nombre de espacio de trabajo: SU ID de cliente y SU ID de secreto de cliente (de los detalles de su aplicación registrada): Y guarde el archivo. Si se está preguntando "¿qué pasa con el nombre de usuario y la contraseña?", no se preocupe, los obtendremos de un formulario web. Solicitud POST Aquí es donde ocurre toda la magia. Eche un vistazo a la función login() (líneas 22 a 43): login() ejecuta una solicitud POST a nuestro Servidor ProcessMaker, específicamente a esta dirección… usando las credenciales recientemente definidas como parámetros, para obtener un token de acceso. En caso de que surja un error durante la ejecución de la solicitud POST, esta función muestra un cuadro de alerta con la descripción del error. De lo contrario, ejecuta una solicitud GET a la siguiente dirección... usando el token de acceso como portador, para obtener los casos de la bandeja de entrada del usuario autenticado. Tenga en cuenta que estamos usando el punto final "/cases" para obtener una lista de casos de la bandeja de entrada de un usuario. Cada punto final REST es una dirección web que proporciona acceso a un servicio específico de ProcessMaker, como obtener una lista de casos o crear un usuario. Creación de la página de inicio de la aplicación Cree un nuevo archivo llamado "index.html" en su directorio raíz www de Apache, con el siguiente código fuente: Este archivo contiene toda la estructura HTML para la página de inicio de nuestra aplicación. Tenga en cuenta las directivas y expresiones de AngularJS utilizadas. Revisión del código Sobre el contenido de nuestras etiquetas <head>, notará que se cargan todos los recursos externos e internos necesarios: El favicon de ProcessMaker, Bootstrap CSS, Angular JS y, por supuesto, nuestro archivo app.js. Además, nuestra estructura HTML incluye: Un panel para mostrar todos los detalles de su servidor ProcessMaker: URL, nombre del espacio de trabajo, ID del cliente y secreto del cliente: Un breve formulario para permitir a los usuarios ingresar una combinación válida de nombre de usuario y contraseña: Y una tabla para mostrar los detalles de la lista de casos recibida: Lo crea o no, su aplicación está lista. Continúe con el siguiente paso para verla en acción. Su aplicación externa en acción ¿Así que tiene su aplicación lista? ¡Genial! Veamos cómo funciona. Asegúrese de que su servidor Apache esté en funcionamiento y abra la dirección URL de su aplicación en su navegador favorito. En mi caso, tengo mi aplicación en mi directorio raíz www de Apache local, por lo tanto, simplemente accederé a mi localhost. Debería obtener algo como... Eche un vistazo a los detalles de su servidor ProcessMaker: Genial, ¿verdad? Ingrese una combinación válida de nombre de usuario y contraseña, y haga clic en "Obtener lista de casos". Voy a usar mis credenciales de usuario administrador. La lista completa de casos del usuario autenticado se mostrará en una tabla de aspecto atractivo a continuación: ¿Qué acaba de suceder? La aplicación se conectó a su servidor ProcessMaker, utilizando las credenciales de usuario ingresadas para autenticarse y obtener un token de acceso. Luego utilizó este token para solicitar la lista completa de casos del usuario autenticado. Ahora que tiene esta aplicación en funcionamiento, puede modificarla para crear una interfaz de usuario externa completa para su servidor ProcessMaker. Algunos recursos adicionales para usted Encuentre información más detallada sobre la nueva API REST de ProcessMaker, que incluye: Métodos de autenticación OAuth 2.0 disponibles, la lista completa de puntos finales y algunos ejemplos interesantes; en nuestra Página de Documentación Oficial.