Configurer, déployer et tester l'application Web

Une application Web a été configurée pour pointer vers le réseau Blockchain et le bucket utilisés comme exemple dans ce guide stratégique de solution. Vous devez mettre à jour les détails pour utiliser cette application pointant vers votre réseau de chaîne de blocs et votre bucket.

Téléchargez l'application Web à partir de GitHub ici : Exemple d'application Web.

Importer l'application Web dans Oracle Visual Builder Studio

Oracle Visual Builder Studio est non seulement utilisé pour développer des applications Visual Builder, mais il permet également le développement de tout type d'application moderne grâce à sa multitude d'outils de développement intégrés, tels qu'un référentiel GIT, un moteur de pipelines d'intégration continue et de déploiement continu, la génération d'artefacts, un référentiel de conteneurs, des outils agiles, des outils de création d'équipe, etc.

  1. Connectez-vous au menu de navigation de la console Web Oracle Cloud, accédez à Services OCI Classic, puis cliquez sur Développeur.
  2. Cliquez sur l'icône d'instance Oracle Visual Builder Studio, puis sur Accéder à l'instance de service.

    Remarques :

    En l'absence d'instance existante, créez une instance, attendez qu'elle soit créée et accédez-y. Enregistrez l'URL de cette instance Visual Builder Studio, car elle sera utilisée dans les étapes suivantes.
  3. Pour créer un projet, cliquez sur + Créer sur la page par défaut (Organisation).
  4. Entrez le nom d'un projet et cliquez sur Suivant.
  5. Comme nous allons importer une application Visual Builder existante en tant que modèle de projet, sélectionnez l'option Projet vide et cliquez sur Suivant.
  6. Dans le dernier écran de l'assistant, conservez la langue de balisage wiki par défaut et cliquez sur Terminer. Le nouveau projet sera créé dans environ 5 minutes.
  7. Une fois le projet créé, la page principale du projet s'affiche. Avant d'importer notre application, nous devons disposer d'un environnement pour la configurer et l'exécuter temporairement. Cliquez sur Créer un environnement.
  8. Entrez un nom d'environnement, une description et cliquez sur Créer.
    Si une instance Visual Builder existe déjà dans la location, ajoutez-la à cet environnement en cliquant sur Ajouter une instance. Si vous ne disposez d'aucune instance de Visual Builder, provisionnez-en une et revenez à cette étape pour ajouter l'instance à l'environnement.
  9. Sélectionnez votre instance Visual Builder et cliquez sur Ajouter.
  10. Une fois l'environnement ajouté au projet, créez l'espace de travail dans lequel nous pourrons importer l'application Web précréée. Sélectionnez l'option de menu Espaces de travail dans le menu de navigation de gauche.
  11. Vous pouvez créer un espace de travail en important notre application Web Visual Builder dans le projet. Conseil : par défaut, le portlet Jeu de transport - Services d'import est situé dans l'onglet Portail de l'onglet Administrer de la page Portal Builder.
  12. Dans l'assistant, fournissez les détails suivants :
    • Fichier ZIP de l'application Web Visual Builder précréée.
    • Nom de l'espace de travail.
    • Sélectionnez l'environnement que nous avons configuré précédemment dans le projet à utiliser pour tester l'application.
    • Créez un référentiel Git vide et attribuez-lui un nom et un nom de branchement par défaut.
  13. Conseil : par défaut, le portlet Jeu de transport - Services d'import est situé dans l'onglet Portail de l'onglet Administrer de la page Portal Builder.

Configurer l'application Web pour qu'elle pointe vers votre instance Blockchain

Dans cette section, nous allons configurer l'application Web fournie pour qu'elle pointe vers l'instance de chaîne de blocs créée dans la section précédente.

Notez les informations suivantes du réseau Blockchain que vous avez créé :
  • Adresse BC
  • Nom d'instance
  • Canal
  • Code chaîne
  1. Accédez à l'instance Visual Builder Studio et ouvrez le projet que vous avez créé en cliquant sur le nom du projet à partir de la page par défaut à laquelle vous accédez (Organisation) lorsque vous accédez à Visual Builder Studio.
  2. Sélectionnez l'espace de travail que vous avez créé lors de l'importation de l'application Web, puis sélectionnez l'application Web comme indiqué dans l'image et les étapes suivantes.

    1. Sélectionnez la section d'application Web.
    2. Sélectionnez l'application Web.
  3. Accédez à l'onglet Variables et modifiez la valeur par défaut des variables bcEndpoint, bcInstance, chaincode et channel en cliquant sur le symbole f(x) dans l'angle supérieur droit de l'attribut Valeur par défaut pour chacune des variables.

Configurer l'application Web pour qu'elle pointe vers votre bucket Object Storage

Dans cette section, nous allons configurer le bucket Object Storage à utiliser par l'application Web en fonction des valeurs de la clé d'API et du bucket que vous avez créés précédemment.

  1. Accédez à l'instance Visual Builder Studio et ouvrez le projet que vous avez créé en cliquant sur le nom du projet à partir de la page par défaut à laquelle vous accédez (Organisation) lorsque vous accédez à Visual Builder Studio.
  2. Sélectionnez la section Connexion aux services, puis la connexion au service fileUpload.
  3. Accédez à l'onglet Serveurs et, à droite de la configuration du serveur, cliquez sur l'icône représentant un crayon pour modifier la configuration de la connexion au service fileUpload.
    La configuration Service Connection utilisée pour interagir avec notre bucket doit être adaptée en trois endroits.
  4. Dans l'écran Modifier le serveur, mettez à jour les champs suivants :
    • URL d'instance : elle doit être modifiée pour pointer vers le bucket en fonction de quelques propriétés de la location OCI et du nom que vous avez donné au bucket lors de sa création. L'URL doit être composée en fonction du modèle d'URL suivant :
      https://objectstorage.<region-name>.oraclecloud.com/n/<storage-namespace>/b/<bucket-name>
    • Authentification : vous devez vous assurer que la méthode d'authentification est définie sur Oracle Cloud Infrastructure API Signature 1.0 et que la clé est définie en cliquant sur l'icône en forme de crayon à droite de la propriété ID de clé.

      Remarques :

      L'ID de clé est composé en fonction du modèle suivant :
      <Tenancy-OCID>/<User-OCID>/<Key-Fingerprint>
      
      Toutes ces valeurs sont accessibles à partir de l'aperçu de fichier de configuration obtenu lors de la création de la clé d'API lors de la configuration du stockage de bucket OCI. La clé privée est la clé privée que nous avons utilisée ou générée ou téléchargée (selon l'option sélectionnée) lors de la création de la clé d'API.
    • Type de connexion : doit être défini sur Dynamique, le service prend en charge CORS.

    Une fois ces trois propriétés configurées correctement avec votre bucket et votre clé d'API, l'application Web est entièrement prête à interagir avec votre bucket de stockage. Vous pouvez continuer à tester votre application Web.

Tester votre application Web

Vous pouvez désormais tester l'application à partir de l'environnement Visual Builder configuré dans notre projet. Si tout fonctionne correctement, nous pouvons aller de l'avant et exporter l'application Web à déployer vers une configuration autonome.

Cette application Web interagit avec les deux back-ends utilisés dans la solution : Blockchain pour stocker les dossiers et les métadonnées de document, et les buckets de stockage OCI pour le contenu du document. Nous allons donc tester quelques fonctionnalités pour nous assurer que les deux back-ends (Blockchain et Bucket) sont accessibles via l'application Web.
  1. Pour tester l'application, cliquez sur l'icône Aperçu dans l'angle supérieur droit de Visual Studio Workspace.
  2. Connectez-vous à l'application en tant que gestionnaire de dossiers, l'utilisateur pourra accéder aux dossiers dont il est le propriétaire actuel, ou créer un nouveau dossier pour lequel il sera le dépositaire actuel, pouvant ajouter d'autres documents dans le dossier ou transférer l'ensemble du dossier à un autre utilisateur ou service.
    Essayons de créer un dossier et de lui télécharger un document.
  3. Connectez-vous en tant qu'utilisateur (cmsleg001, cmsfin001 ou cmsrsk001) pour vérifier que le rôle est défini sur le gestionnaire de dossiers, puis cliquez sur Connexion.
  4. Sur la page Gestion des dossiers, cliquez sur Nouveau dossier.
  5. Affectez des valeurs aux trois champs d'entrée (Type de dossier, Description et ID client), puis cliquez sur Créer un dossier.
  6. Dans la console Oracle Blockchain Service, accédez à l'onglet Canaux, sélectionnez le canal wedocms et vérifiez le contenu du dernier bloc enregistré dans le registre. Elle doit contenir la demande d'exécution de la transaction que nous venons d'exécuter.
  7. Pour vérifier si un document peut être téléchargé vers le dossier que vous venez de créer, sélectionnez-le et cliquez sur Télécharger des documents.
  8. Si aucun document n'est chargé dans ce dossier, cliquez sur Télécharger un nouveau document.
  9. Sélectionnez un type de document, entrez un nom de document, sélectionnez un fichier ou déposez un fichier PDF dans la zone Glisser-déplacer, ajoutez des propriétés dynamiques, puis cliquez sur Télécharger un document.
Nous pouvons vérifier dans la console Oracle Blockchain si cette nouvelle transaction a été exécutée, ainsi que si le document a été téléchargé dans le bucket de stockage OCI. Connectez-vous en tant que réviseur de documents, tout utilisateur ayant accès à l'application pourra vérifier les documents téléchargés à partir de n'importe quel dossier.

Exporter l'application à exécuter sur une machine autonome

Les étapes suivantes expliquent comment exporter l'application et télécharger le package exportable à déployer en dehors de Visual Builder.

Une application Visual Builder, si elle remplit certaines conditions, peut être exécutée en dehors du contexte de Visual Builder. Pour plus d'informations, reportez-vous aux blogs suivants : Exécution d'applications Visual Builder sur d'autres serveurs (et sur site) et Exécution d'applications Visual Builder en dehors de Visual Builder.
  1. Pour exporter l'application, propagez les modifications dans le référentiel Git. Cliquez sur le menu Répo/Branche Git dans la partie supérieure gauche de l'espace de travail, puis sélectionnez l'option Pousser.
  2. Entrez un message de validation et cliquez sur Tout valider et envoyer.
    La première fois que ce travail est exécuté, l'attente d'un exécuteur de build peut prendre plusieurs minutes, mais une fois que l'exécuteur de build récupère le travail, il doit être exécuté en environ 3 minutes et un message contextuel Git push réussi doit s'afficher.
  3. A ce stade, nous pouvons publier notre application, et cette action déclenchera un travail de build pour optimiser l'application à exécuter dans les meilleures conditions. Cliquez sur Publier dans l'angle supérieur droit de la page Espace de travail.
  4. Dans la boîte de dialogue Publier les modifications, sélectionnez Fusionner maintenant ou Fusionner après vérification, puis cliquez sur Publier.
  5. Entrez vos informations d'identification et cliquez sur Ajouter des informations d'identification et continuer.
  6. Dans la fenêtre instantanée Création démarrée, cliquez sur Ouvrir le travail.
  7. Cliquez sur Artefacts pour visualiser le package généré.
  8. Cliquez sur built-assets.zip pour télécharger le package, de sorte que le package exportable soit prêt à être déployé en dehors de Visual Builder.

Exécuter le package exporté dans un serveur Apache Tomcat

Le package built-assets.zip peut être déployé pour être servi directement par un serveur Apache Tomcat.

  1. Installez le serveur Apache Tomcat. Une fois installé, démarrez-le et vérifiez qu'il fonctionne en essayant d'accéder à l'URL : http://localhost:8080.
  2. Notre application peut être installée dans Tomcat en décompressant le package built-assets.zip et en copiant le contenu du fichier ZIP dans un dossier créé dans le dossier /webapps.
  3. Une fois l'application déployée dans le dossier webapps de notre installation Tomcat, nous pouvons redémarrer Tomcat et essayer d'accéder à l'URL suivante : http://localhost:8080/<folder-name-inside-webapps>/webApps/docmngmt/
    Nous pouvons maintenant tester l'application dans notre environnement local.