Webanwendung konfigurieren, bereitstellen und testen

Eine Webanwendung wurde so konfiguriert, dass sie auf das Blockchain-Netzwerk und den Bucket verweist, die als Beispiel in diesem Lösungs-Playbook verwendet werden. Sie müssen die Details aktualisieren, um diese Anwendung zu verwenden, die auf Ihr Blockchain-Netzwerk und Ihren Bucket verweist.

Laden Sie die Webanwendung von GitHub hier herunter: Beispielwebanwendung.

Webanwendung in Oracle Visual Builder Studio importieren

Oracle Visual Builder Studio wird nicht nur zur Entwicklung von Visual Builder-Anwendungen verwendet, sondern ermöglicht die Entwicklung jeder Art von moderner Anwendung dank seiner Vielzahl integrierter Entwicklungstools wie GIT-Repository, CI/CD-Pipelines Engine, Artefaktgenerierung, Container Repository, agilen Tools, Teambuilding-Tools und mehr.

  1. Melden Sie sich beim Navigationsmenü der Oracle Cloud-Webkonsole an, gehen Sie zu OCI Classic-Services, und klicken Sie auf Entwickler.
  2. Klicken Sie auf das Oracle Visual Builder Studio-Instanzsymbol und dann auf Auf Serviceinstanz zugreifen.

    Hinweis:

    Wenn keine Instanz vorhanden ist, erstellen Sie eine neue Instanz, warten Sie, bis sie erstellt wurde, und greifen Sie darauf zu. Speichern Sie die URL dieser Visual Builder Studio-Instanz, wie sie in den nächsten Schritten verwendet wird.
  3. Um ein neues Projekt zu erstellen, klicken Sie auf der Standardseite (Organisation) auf + Erstellen.
  4. Geben Sie einen Projektnamen ein, und klicken Sie auf Weiter.
  5. Während wir eine vorhandene Visual Builder-Anwendung als Projektvorlage importieren, wählen Sie die Option Leeres Projekt aus, und klicken Sie auf Weiter.
  6. Übernehmen Sie im letzten Bildschirm des Assistenten die standardmäßige Wiki-Markup-Sprache, und klicken Sie auf Fertigstellen. Das neue Projekt wird in etwa 5 Minuten erstellt.
  7. Nachdem das Projekt erstellt wurde, wird die Hauptseite des Projekts angezeigt. Bevor wir unsere Anwendung importieren, benötigen wir eine Umgebung, um sie zu konfigurieren und vorübergehend auszuführen. Klicken Sie auf Umgebung erstellen.
  8. Geben Sie einen Umgebungsnamen, eine Beschreibung ein, und klicken Sie auf Erstellen.
    Wenn sich bereits eine Visual Builder-Instanz im Mandanten befindet, fügen Sie sie dieser Umgebung hinzu, indem Sie auf Instanz hinzufügen klicken. Wenn keine Instanz von Visual Builder vorhanden ist, stellen Sie eine Instanz bereit, und kehren Sie zu diesem Schritt zurück, um die Instanz der Umgebung hinzuzufügen.
  9. Wählen Sie Ihre Visual Builder-Instanz aus, und klicken Sie auf Hinzufügen.
  10. Sobald die Umgebung zum Projekt hinzugefügt wurde, erstellen Sie den Workspace. Dort können wir die vorab erstellte Webanwendung importieren. Wählen Sie im linken Navigationsmenü die Menüoption Arbeitsbereiche.
  11. Sie können einen Workspace erstellen, indem Sie unsere Visual Builder-Webanwendung in das Projekt importieren. Klicken Sie auf Importieren.
  12. Geben Sie im Assistenten die folgenden Details an:
    • Die ZIP-Datei der vorab erstellten Visual Builder-Webanwendung.
    • Ein Name für den Workspace.
    • Wählen Sie die Umgebung aus, die wir zuvor im Projekt konfiguriert haben, um die Anwendung zu testen.
    • Erstellen Sie ein neues leeres Git-Repository, und geben Sie ihm einen Namen und einen Standardverzweigungsnamen.
  13. Klicken Sie auf Importieren.

Webanwendung so konfigurieren, dass sie auf Ihre Blockchain-Instanz verweist

In diesem Abschnitt konfigurieren wir die bereitgestellte Webanwendung so, dass sie auf die im vorherigen Abschnitt erstellte Blockchain-Instanz verweist.

Notieren Sie sich die folgenden Informationen aus dem von Ihnen erstellten Blockchain-Netzwerk:
  • BC-Endpunkt
  • Instanzname
  • Channel
  • Kettencode
  1. Rufen Sie die Visual Builder Studio-Instanz auf, und öffnen Sie das erstellte Projekt, indem Sie auf der Standardseite, auf der Sie landen (Organisation), auf den Namen des Projekts klicken, wenn Sie auf Visual Builder Studio zugreifen.
  2. Wählen Sie den Workspace aus, den Sie beim Importieren der Webanwendung erstellt haben, und wählen Sie die Webanwendung aus, wie in der folgenden Abbildung und den Schritten gezeigt.

    1. Wählen Sie den Webanwendungsabschnitt aus.
    2. Wählen Sie die Webanwendung aus.
  3. Gehen Sie zur Registerkarte Variablen, und ändern Sie den Standardwert der Variablen bcEndpoint, bcInstance, chaincode und channel, indem Sie auf das Symbol f(x) in der oberen rechten Ecke des Attributs "Standardwert" für jede der Variablen klicken.

Webanwendung so konfigurieren, dass sie auf den Objektspeicher-Bucket verweist

In diesem Abschnitt konfigurieren wir den Object Storage-Bucket, der von der Webanwendung basierend auf den zuvor erstellten Werten für den API-Schlüssel und den Bucket verwendet werden soll.

  1. Rufen Sie die Visual Builder Studio-Instanz auf, und öffnen Sie das erstellte Projekt, indem Sie auf der Standardseite, auf der Sie landen (Organisation), auf den Namen des Projekts klicken, wenn Sie auf Visual Builder Studio zugreifen.
  2. Wählen Sie den Abschnitt Serviceverbindung und dann die Serviceverbindung fileUpload aus.
  3. Gehen Sie zur Registerkarte Server, und klicken Sie auf der rechten Seite der Serverkonfiguration auf das Stiftsymbol, um die Konfiguration der Serviceverbindung fileUpload zu ändern.
    Die Service Connection-Konfiguration, die für die Interaktion mit unserem Bucket verwendet wird, muss an drei Stellen angepasst werden.
  4. Aktualisieren Sie im Bildschirm Server bearbeiten die folgenden Felder:
    • Instanz-URL: Sie muss so geändert werden, dass sie basierend auf einigen Eigenschaften aus Ihrem OCI-Mandanten und dem Namen, den Sie dem Bucket beim Erstellen angegeben haben, auf Ihren Bucket verweist. Die URL muss auf der Grundlage der folgenden URL-Vorlage erstellt werden:
      https://objectstorage.<region-name>.oraclecloud.com/n/<storage-namespace>/b/<bucket-name>
    • Authentifizierung: Stellen Sie sicher, dass die Authentifizierungsmethode auf Oracle Cloud Infrastructure-API-Signatur 1.0 gesetzt ist. Der Schlüssel wird festgelegt, indem Sie auf das Stiftsymbol rechts neben der Eigenschaft Schlüssel-ID klicken.

      Hinweis:

      Die Schlüssel-ID basiert auf der folgenden Vorlage:
      <Tenancy-OCID>/<User-OCID>/<Key-Fingerprint>
      
      Auf alle diese Werte kann über die Vorschau der Konfigurationsdatei zugegriffen werden, die beim Erstellen des API-Schlüssels während der OCI Bucket Storage-Konfiguration abgerufen wurde. Private Key ist der Private Key, den wir bei der Erstellung des API-Schlüssels verwendet, generiert oder heruntergeladen haben (je nach ausgewählter Option).
    • Verbindungstyp: Muss auf Dynamisch gesetzt sein, der Service unterstützt CORS.

    Nachdem diese drei Eigenschaften entsprechend mit Ihrem Bucket und API-Schlüssel konfiguriert wurden, kann die Webanwendung vollständig mit Ihrem Speicher-Bucket interagieren. Sie können mit dem Testen Ihrer Webanwendung fortfahren.

Webanwendung testen

Jetzt können Sie die Anwendung in der in unserem Projekt konfigurierten Visual Builder-Umgebung testen. Wenn alles in Ordnung ist, können wir vorwärts gehen und die Webanwendung exportieren, die in einer Standalone-Konfiguration bereitgestellt werden soll.

Diese Webanwendung interagiert mit den beiden in der Lösung verwendeten Backends: Blockchain zum Speichern der Ordner und Dokumentmetadaten sowie die Buckets des OCI-Speichers für den Dokumentinhalt. Daher werden wir einige Funktionen testen, um sicherzustellen, dass beide Backends (Blockchain und Bucket) über die Webanwendung zugänglich sind.
  1. Um die Anwendung zu testen, klicken Sie oben rechts im Visual Studio Workspace auf das Vorschausymbol.
  2. Melden Sie sich als Ordnermanager bei der Anwendung an. Der Benutzer kann auf die Ordner zugreifen, für die er der aktuelle Eigentümer ist, oder einen neuen Ordner erstellen, für den er der aktuelle Verwalter ist, weitere Dokumente in den Ordner einfügen oder den gesamten Ordner an einen anderen Benutzer oder eine andere Abteilung übertragen kann.
    Versuchen wir, einen Ordner zu erstellen und ein Dokument darauf hochzuladen.
  3. Melden Sie sich als einer der Benutzer (cmsleg001, cmsfin001 oder cmsrsk001) an, um sicherzustellen, dass die Rolle auf "Ordnermanager" gesetzt ist, und klicken Sie auf Anmelden.
  4. Klicken Sie auf der Seite Ordnerverwaltung auf Neuer Ordner.
  5. Weisen Sie den drei Eingabefeldern Werte zu (Ordnertyp, Beschreibung und Kunden-ID), und klicken Sie auf Ordner erstellen.
  6. Navigieren Sie in der Oracle Blockchain Service-Konsole zur Registerkarte Kanäle, wählen Sie den Kanal wedocms aus, und prüfen Sie den Inhalt des letzten im Ledger gespeicherten Blocks. Sie sollte die Anforderung zur Ausführung der gerade ausgeführten Transaktion enthalten.
  7. Um zu testen, ob ein Dokument in den neu erstellten Ordner hochgeladen werden kann, wählen Sie den Ordner aus, und klicken Sie auf Dokumente hochladen.
  8. Wenn kein Dokument in diesen Ordner hochgeladen wurde, klicken Sie auf Neues Dokument hochladen.
  9. Wählen Sie einen Dokumenttyp aus, geben Sie einen Dokumentnamen ein, wählen Sie eine Datei aus, oder legen Sie eine PDF-Datei im Bereich Drag and Drop ab, fügen Sie Dynamische Eigenschaften hinzu, und klicken Sie auf Dokument hochladen.
Wir können in der Oracle Blockchain-Konsole prüfen, ob diese neue Transaktion ausgeführt wurde und ob das Dokument in den OCI-Speicher-Bucket hochgeladen wurde. Melden Sie sich als Dokumentprüfer an. Jeder Benutzer, der Zugriff auf die App hat, kann Dokumente prüfen, die aus einem beliebigen Ordner hochgeladen wurden.

Anwendung exportieren, die auf einem Standalone-Rechner ausgeführt werden soll

In den folgenden Schritten wird beschrieben, wie Sie die Anwendung exportieren und das exportierbare Package herunterladen, das außerhalb von Visual Builder bereitgestellt werden soll.

Eine Visual Builder-Anwendung, wenn sie einige Bedingungen erfüllt, kann außerhalb des Kontexts von Visual Builder ausgeführt werden. Weitere Informationen finden Sie in den folgenden Blogs: Visual Builder-Anwendungen auf anderen Servern (und On-Premises) ausführen und Visual Builder-Anwendungen außerhalb von Visual Builder ausführen.
  1. Um die Anwendung zu exportieren, übertragen Sie die Änderungen in das Git-Repository. Klicken Sie oben links im Arbeitsbereich auf das Menü Repo/Zweig, und wählen Sie die Option Push aus.
  2. Geben Sie eine Commit-Nachricht ein, und klicken Sie auf Alle festschreiben und übertragen.
    Bei der ersten Ausführung dieses Jobs kann es einige Minuten dauern, bis ein Build Executor wartet. Sobald der Build Executor den Job jedoch abholt, sollte er in etwa 3 Minuten ausgeführt werden, und eine erfolgreiche Git-Push-Popup-Nachricht sollte angezeigt werden.
  3. An dieser Stelle können wir unsere Anwendung veröffentlichen, und diese Aktion löst einen Build-Job aus, um die Anwendung so zu optimieren, dass sie unter den besten Bedingungen ausgeführt wird. Klicken Sie in der oberen rechten Ecke der Workspace-Seite auf Veröffentlichen.
  4. Wählen Sie im Dialogfeld Änderungen veröffentlichen die Option Jetzt zusammenführen oder Nach Prüfung zusammenführen aus, und klicken Sie auf Veröffentlichen.
  5. Geben Sie Ihre Zugangsdaten ein, und klicken Sie auf Zugangsdaten hinzufügen und fortfahren.
  6. Klicken Sie im Popup-Fenster Erstellen gestartet auf Job öffnen.
  7. Klicken Sie auf Artefakte, um das generierte Package anzuzeigen.
  8. Klicken Sie auf Built-assets.zip, um das Package herunterzuladen. Das exportierbare Package kann daher außerhalb von Visual Builder bereitgestellt werden.

Exportiertes Package auf einem Apache Tomcat-Server ausführen

Das Package built-assets.zip kann für die direkte Bereitstellung durch einen Apache Tomcat-Server bereitgestellt werden.

  1. Installieren Sie Apache Tomcat Server, starten Sie ihn nach der Installation, und prüfen Sie, ob er funktioniert, indem Sie versuchen, auf die URL: http://localhost:8080 zuzugreifen.
  2. Unsere Anwendung kann in Tomcat installiert werden, indem das Package built-assets.zip dekomprimiert und der Inhalt der ZIP-Datei in einen neuen Ordner kopiert wird, der im Ordner /webapps erstellt wurde.
  3. Nachdem die Anwendung im Ordner webapps unserer Tomcat-Installation bereitgestellt wurde, können Sie Tomcat neu starten und versuchen, auf die folgende URL zuzugreifen: http://localhost:8080/<folder-name-inside-webapps>/webApps/docmngmt/
    Jetzt können wir die Anwendung in unserer lokalen Umgebung testen.