Configurar, desplegar y probar la aplicación web

Se ha configurado una aplicación web para que apunte a la red Blockchain y al bloque utilizados como ejemplo en este manual de soluciones. Debe actualizar los detalles para utilizar esta aplicación que apunta a la red de blockchain y al cubo.

Descargue la aplicación web desde GitHub aquí: Aplicación web de ejemplo.

Importar la aplicación web a Oracle Visual Builder Studio

Oracle Visual Builder Studio no solo se utiliza para desarrollar aplicaciones de Visual Builder, sino que permite el desarrollo de cualquier tipo de aplicación moderna gracias a su multitud de herramientas de desarrollo integradas, como un repositorio de GIT, motor de pipelines de integración y despliegue continuos, generación de artefactos, repositorio de contenedores, herramientas ágiles, herramientas de creación de equipos y mucho más.

  1. Conéctese al menú de navegación de la consola web de Oracle Cloud, vaya a OCI Classic Services y, a continuación, haga clic en Desarrollador.
  2. Haga clic en el icono de instancia de Oracle Visual Builder Studio y, a continuación, haga clic en Acceder a instancia de servicio.

    Note:

    En caso de que no haya ninguna instancia existente, cree una nueva instancia, espere hasta que se cree y acceda a ella. Guarde la URL de esta instancia de Visual Builder Studio, ya que se utilizará en los siguientes pasos.
  3. Para crear un nuevo proyecto, haga clic en + Crear en la página por defecto (Organización).
  4. Introduzca un nombre de proyecto y haga clic en Siguiente.
  5. Como importaremos una aplicación de Visual Builder existente como plantilla de proyecto, seleccione la opción Proyecto vacío y haga clic en Siguiente.
  6. En la última pantalla del asistente, deje el idioma de marcado wiki por defecto y haga clic en Terminar. El nuevo proyecto se creará en unos 5 minutos.
  7. Una vez creado el proyecto, se mostrará la página principal del proyecto. Antes de importar nuestra aplicación, necesitamos tener un entorno para configurarla y ejecutarla temporalmente. Haga clic en Crear entorno.
  8. Introduzca un nombre de entorno, una descripción y haga clic en Crear.
    Si ya hay alguna instancia de Visual Builder en el arrendamiento, agréguela a este entorno haciendo clic en Agregar instancia. Si no tiene ninguna instancia de Visual Builder, aprovisione una y vuelva a este paso para agregar la instancia al entorno.
  9. Seleccione la instancia de Visual Builder y haga clic en Agregar.
  10. Una vez agregado el entorno al proyecto, cree el espacio de trabajo, donde podremos importar la aplicación web creada previamente. Seleccione la opción de menú Espacios de trabajo en el menú de navegación de la izquierda.
  11. Se puede crear un espacio de trabajo importando nuestra aplicación web de Visual Builder en el proyecto. Haga clic en Importar.
  12. En el asistente, proporcione los siguientes detalles:
    • Archivo zip de la aplicación web de Visual Builder creada previamente.
    • Nombre del espacio de trabajo.
    • Seleccione el entorno que hemos configurado anteriormente en el proyecto que se va a utilizar para probar la aplicación.
    • Cree un nuevo repositorio de Git vacío y asígnele un nombre y un nombre de rama por defecto.
  13. Haga clic en Importar.

Configurar la aplicación web para que apunte a la instancia de Blockchain

En esta sección, configuraremos la aplicación web proporcionada para que apunte a la instancia de blockchain creada en la sección anterior.

Anote la siguiente información de la red Blockchain que ha creado:
  • Punto final de BC
  • Nombre de instancia
  • Canal
  • Código de cadena
  1. Acceda a la instancia de Visual Builder Studio y abra el proyecto que ha creado haciendo clic en el nombre del proyecto desde la página por defecto en la que aterriza (organización) al acceder a Visual Builder Studio.
  2. Seleccione el espacio de trabajo que ha creado al importar la aplicación web y, a continuación, seleccione la aplicación web como se muestra en la siguiente imagen y pasos.

    1. Seleccione la sección Aplicación web.
    2. Seleccione la aplicación web.
  3. Vaya al separador Variables y cambie el valor por defecto de las variables bcEndpoint, bcInstance, chaincode y channel haciendo clic en el símbolo f(x) en la esquina superior derecha del atributo Valor por Defecto para cada una de las variables.

Configurar la aplicación web para que apunte al cubo de Object Storage

En esta sección, configuraremos el cubo de Object Storage que utilizará la aplicación web en función de los valores de la clave de API y el cubo que ha creado anteriormente.

  1. Acceda a la instancia de Visual Builder Studio y abra el proyecto que ha creado haciendo clic en el nombre del proyecto desde la página por defecto en la que aterriza (organización) al acceder a Visual Builder Studio.
  2. Seleccione la sección Conexión de servicios y, a continuación, seleccione la conexión de servicio fileUpload.
  3. Vaya al separador Servidores y, en el lado derecho de la configuración del servidor, haga clic en el icono de lápiz para cambiar la configuración de la conexión de servicio fileUpload.
    La configuración de conexión de servicio utilizada para interactuar con nuestro cubo se debe adaptar en tres lugares.
  4. En la pantalla Editar servidor, actualice los siguientes campos:
    • URL de instancia: se debe cambiar para que apunte al cubo en función de un par de propiedades de su arrendamiento de OCI y del nombre que ha proporcionado al cubo al crearlo. La URL debe estar compuesta según la siguiente plantilla de URL:
      https://objectstorage.<region-name>.oraclecloud.com/n/<storage-namespace>/b/<bucket-name>
    • Autenticación: debe asegurarse de que el método de autenticación esté definido en Oracle Cloud Infrastructure API Signature 1.0 y de que la clave esté definida haciendo clic en el icono de lápiz situado a la derecha de la propiedad ID de clave.

      Note:

      El ID de clave se compone de la siguiente plantilla:
      <Tenancy-OCID>/<User-OCID>/<Key-Fingerprint>
      
      Se puede acceder a todos estos valores desde la vista previa de archivo de configuración obtenida cuando se creó la clave de API durante la configuración de OCI Bucket Storage. La clave privada es la clave privada que utilizamos o generamos o descargamos (dependiendo de la opción seleccionada) durante la creación de la clave de API.
    • Tipo de conexión: se debe definir en Dinámico, el servicio soporta CORS.

    Una vez que estas tres propiedades se han configurado correctamente con el cubo y la clave de API, la aplicación web está completamente lista para interactuar con el cubo de almacenamiento. Puede probar la aplicación web.

Probar la aplicación web

Ahora puede probar la aplicación desde el entorno de Visual Builder configurado en nuestro proyecto. Si todo funciona bien, podemos avanzar y exportar la aplicación web para que se despliegue en una configuración independiente.

Esta aplicación web interactúa con los dos backends utilizados en la solución: blockchain para almacenar las carpetas y los metadatos del documento, y los cubos de almacenamiento de OCI para el contenido del documento. Por lo tanto, vamos a probar un par de funcionalidades para garantizar que ambos backends (Blockchain y Bucket) sean accesibles a través de la aplicación web.
  1. Para probar la aplicación, haga clic en el icono Vista previa en la esquina superior derecha del espacio de trabajo de Visual Studio.
  2. Conéctese a la aplicación como gestor de carpetas, el usuario podrá acceder a las carpetas de las que es el propietario actual o crear una nueva carpeta, para la que será el responsable actual, pudiendo agregar más documentos a la carpeta o transferir toda la carpeta a otro usuario o departamento.
    Intentemos crear una carpeta y cargar un documento en ella.
  3. Conéctese como uno de los usuarios (cmsleg001, cmsfin001 o cmsrsk001) para asegurarse de que el rol está definido en el gestor de carpetas y haga clic en Conectar.
  4. En la página Gestión de carpetas, haga clic en Nueva carpeta.
  5. Asigne valores a los tres campos de entrada (Tipo de carpeta, Descripción e ID de cliente) y haga clic en Crear carpeta.
  6. En la consola de Oracle Blockchain Service, vaya al separador Canales, seleccione el canal wedocms y compruebe el contenido del último bloque guardado en el libro mayor. Debe contener la solicitud para ejecutar la transacción que acabamos de ejecutar.
  7. Para probar si podemos cargar un documento en la carpeta recién creada, seleccione la carpeta y haga clic en Cargar documentos.
  8. Si no hay ningún documento cargado en esta carpeta, haga clic en Cargar Nuevo Documento.
  9. Seleccione un tipo de documento, introduzca un nombre de documento, seleccione un archivo o suelte un archivo PDF en el área Arrastrar y soltar, agregue Propiedades dinámicas y haga clic en Cargar documento.
Podemos revisar en la consola de Oracle Blockchain si se ha ejecutado esta nueva transacción y también si el documento se ha cargado en el cubo de almacenamiento de OCI. Inicie sesión como revisor de documentos, cualquier usuario que tenga acceso a la aplicación podrá revisar los documentos cargados desde cualquier carpeta.

Exportar la aplicación que se va a ejecutar en una máquina independiente

En los siguientes pasos se describe cómo exportar la aplicación y descargar el paquete exportable que se va a desplegar fuera de Visual Builder.

Una aplicación de Visual Builder si cumple algunas condiciones, se puede ejecutar fuera del contexto de Visual Builder. Para obtener más información, consulte los siguientes blogs: Ejecución de aplicaciones de Visual Builder en otros servidores (y locales) y Ejecución de aplicaciones de Visual Builder fuera de Visual Builder.
  1. Para exportar la aplicación, transfiera los cambios al repositorio de Git. Haga clic en el menú Git Repo/Branch en la parte superior izquierda del espacio de trabajo y seleccione la opción Push.
  2. Introduzca un mensaje de confirmación y haga clic en Confirmar todo y enviar.
    La primera vez que se ejecuta este trabajo, puede tardar varios minutos en esperar a que un ejecutor de compilación, pero una vez que el ejecutor de compilación selecciona el trabajo, se debe ejecutar en unos 3 minutos y se debe mostrar un mensaje emergente de inserción de Git correcta.
  3. En este punto, podemos publicar nuestra aplicación y esta acción disparará un trabajo de creación para optimizar la ejecución de la aplicación en las mejores condiciones. Haga clic en Publicar en la esquina superior derecha de la página Espacio de Trabajo.
  4. En el cuadro de diálogo Publicar cambios, seleccione Fusionar ahora o Fusionar después de revisión y, a continuación, haga clic en Publicar.
  5. Introduzca sus credenciales y haga clic en Agregar credenciales y continuar.
  6. En la ventana emergente Compilación iniciada, haga clic en Abrir trabajo.
  7. Haga clic en Artefactos para ver el paquete generado.
  8. Haga clic en built-assets.zip para descargar el paquete, de modo que el paquete exportable esté listo para desplegarse fuera de Visual Builder.

Ejecutar el paquete exportado en un servidor Apache Tomcat

El paquete built-assets.zip se puede desplegar para que lo sirva directamente un servidor Apache Tomcat.

  1. Instale el servidor Apache Tomcat, una vez instalado, inícielo y compruebe que funciona intentando acceder a la URL: http://localhost:8080.
  2. Nuestra aplicación se puede instalar en Tomcat descomprimiendo el paquete built-assets.zip y copiando el contenido del zip en una nueva carpeta creada dentro de la carpeta /webapps.
  3. Una vez desplegada la aplicación en la carpeta webapps de nuestra instalación de Tomcat, podemos reiniciar Tomcat e intentar acceder a la siguiente URL: http://localhost:8080/<folder-name-inside-webapps>/webApps/docmngmt/
    Ahora podemos probar la aplicación en nuestro entorno local.