Entwickeln

Übersicht über die Frontend-App-Entwicklung

Sie können den Digital Workspace weiterentwickeln und anpassen oder Ihre eigenen Lösungen integrieren. Dazu können Sie die Erweiterungen des Digital Workspace nutzen oder mit dem Alfresco Application Development Framework (ADF) eine benutzerdefinierte App erstellen. Der Digital Workspace ist eine vollständig unterstützte Anwendung, die Kunden und Partnern zur Verfügung steht, die mit Alfresco Content Services – Enterprise Edition arbeiten.

Wenn Ihr Projekt Alfresco Content Services – Community Edition oder andere Open-Source-Komponenten verwendet, müssen Sie Alfresco Content Application anstelle von Digital Workspace verwenden. Die Content Application ist ein kostenloses Open-Source-Beispiel für eine Anwendung, die mit dem Application Development Framework erstellt wurde, und ihre Verwendung wird vom Alfresco-Support nicht unterstützt.

alt text

Front-End-Erfahrung

Frontend-Anwendungen sind eine Untergruppe der Client-Interaktionen, und Alfresco bietet ein Angular-basiertes Anwendungsentwicklungs-Framework für deren Erstellung. Die von Alfresco-Produkten bereitgestellten Backend-Dienste verwenden eine REST-API-Grundschicht für alle Client-Interaktionen der Plattform.

Das Application Development Framework ist ein Open-Source-Projekt, das eine Reihe von Diensten und visuellen Komponenten definiert, mit denen Sie maßgeschneiderte Endbenutzeranwendungen erstellen können. Das Framework ist selbst keine Endbenutzeranwendung, sondern ermöglicht Ihnen die Erstellung Ihrer eigenen Anwendungen.

Das Bild verdeutlicht die Beziehung zwischen den Frontend-Anwendungen und den Backend-Diensten von Alfresco, d. h. dem Digital Workspace, der Content-Anwendung und dem Application Development Framework.

Relationship between the front-end and backend Alfresco services

alt text

Entwicklungsoptionen

Die folgenden Optionen stehen zur Verfügung, um mit der Entwicklung eines Frontends für Alfresco zu beginnen, je nach den erforderlichen Anpassungen. Wir bieten Open-Source- und Unternehmensanwendungen, wenn der Anpassungsbedarf minimal ist. Wenn Sie jedoch sehr umfassende Erweiterungen entwickeln müssen, können Sie das Application Development Framework verwenden.

Unternehmenskunden können den Digital Workspace als Ausgangspunkt nutzen.
- Weitere Informationen finden Sie unter Alfresco Digital Workspace bereitstellen.
- Informationen zum Entwickeln von Erweiterungen finden Sie unter Erweiterungen erstellen oder erstellen Sie eine benutzerdefinierte App mit dem Alfresco Application Development Framework (ADF).
Community-Kunden können die Content-Anwendung als Ausgangspunkt verwenden.
- Weitere Informationen finden Sie unter Alfresco Content App bereitstellen.
- Informationen zum Entwickeln von Erweiterungen finden Sie unter Erweiterungen erstellen.
Kunden, die umfangreiche Anpassungen benötigen, können das Application Development Framework als Ausgangspunkt verwenden.
- Weitere Informationen finden Sie unter ADF-App generieren und bereitstellen.

Native mobile Frameworks und Anwendungen werden von Alfresco bereitgestellt. Sie können auf den Code für Mobile Workspace in den folgenden GitHub-Repositorys zugreifen:

Android
iOS

Frontend-Anwendungen bereitstellen

Verwenden Sie das Beispiel, um eine Frontend-Anwendung zu starten, die auf den Alfresco-Backend-Diensten aufsetzt. Das Beispiel verwendet die Alfresco Content Services – Community Edition-Version der Frontend-Anwendung. Sie können dieselbe Übung mit Alfresco Content Services – Enterprise Edition wiederholen.

Hilfe bei der Fehlerbehebung und Support:

Stellen Sie Ihre Fragen im Bereich „Application Development Framework“ des Alfresco Forums oder in den Alfresco Gitter Discussions.
Wenn Sie Kunde oder Partner von Alfresco sind, können Sie auch Support in der Hyland Community anfordern.

Alfresco Content App bereitstellen

Um eine Frontend-Anwendung mit der Alfresco Community Edition (der Open-Source-Version) zu entwickeln, verwenden Sie die Content App als Ausgangspunkt.

Installieren Sie Alfresco Community Edition und stellen Sie sicher, dass Sie über Ihren Browser darauf zugreifen können: http://localhost:8080/alfresco
Node.js 18.x

Führen Sie die folgenden Schritte aus, um die Content-App bereitzustellen:

Öffnen Sie eine Eingabeaufforderung und klonen Sie das folgende GitHub-Repository in ein Arbeitsverzeichnis :

git clone https://github.com/Alfresco/alfresco-content-app.git
Navigieren Sie zum Verzeichnis alfresco-content-app und erstellen Sie eine Datei mit dem Namen .env mit dem folgenden Inhalt. Geben Sie Ihre Alfresco Content Services-URL als Wert für APP_CONFIG_ECM_HOST ein:
```
APP_CONFIG_ECM_HOST="http://localhost:8080"
APP_CONFIG_PLUGIN_AOS=false
APP_CONFIG_PLUGIN_CONTENT_SERVICE=true
```
Führen Sie die folgenden Befehle aus, um die Anwendung zu starten:
```
npm install
npm start
```
Die Anwendung ist unter http://localhost:4200 verfügbar und Sie müssen die Anmeldedaten für Alfresco Content Services verwenden.

Die Alfresco Content App sollte in Ihrer Entwicklungsumgebung im Entwicklungsmodus laufen. Entwicklungsumgebung.

Alfresco Digital Workspace bereitstellen

Wenn Sie Alfresco-Kunde oder offizieller Partner sind, können Sie die Enterprise-Anwendung anstelle der Open-Source-Software verwenden. Um eine Alfresco-Frontend-Anwendung zu entwickeln, stellen Sie sicher, dass die erforderliche Software auf Ihrem System verfügbar ist.

Stellen Sie ACS Enterprise Edition bereit und stellen Sie sicher, dass es über Ihren Browser zugänglich ist: http://localhost:8080/alfresco
Node.js 18.x

Führen Sie die folgenden Schritte aus, um den digitalen Arbeitsbereich bereitzustellen:

Fordern Sie eine lokale Kopie des GitHub-Repositorys alfresco-apps von Hyland Community an.

Vertrieb Beschreibung
content-ee Standard. Der digitale Arbeitsbereich mit der Erweiterung „Process Services“.

Hinweis: Dieses Projekt verwendet die Monorepo-Struktur mit mehreren Monorepo-Apps.

Vertrieb	Beschreibung
`content-ee`	Standard. Der digitale Arbeitsbereich mit der Erweiterung „Process Services“.

Erstellen Sie die folgende Datei .env:

BASE_URL="http://localhost:8080"
APP_CONFIG_ECM_HOST="http://localhost:8080"
APP_CONFIG_PROVIDER="ECM"
APP_CONFIG_AUTH_TYPE="BASIC"
APP_CONFIG_PLUGIN_AOS=false
APP_CONFIG_PLUGIN_CONTENT_SERVICE=true
APP_CONFIG_PLUGIN_PROCESS_SERVICE=false
APP_CONFIG_PLUGIN_AI_SERVICE=false

Öffnen Sie eine Eingabeaufforderung und führen Sie den folgenden Befehl aus, um alle Abhängigkeiten von Drittanbietern zu installieren: dependencies:
```
npm ci
```

Führen Sie die Anwendung aus:

npm start  content-ee

Die Anwendung ist unter http://localhost:4200 verfügbar. Sie müssen sich mit den Anmeldedaten für Alfresco Content Services anmelden. Die für das obige Beispiel bereitgestellte Konfiguration ist die Mindestanforderung für Ihre Entwicklungsumgebung, um das Alfresco-Repository lokal zu testen. Es stehen jedoch zusätzliche Umgebungsvariablen zur Verfügung.

App config settings
APP_CONFIG_BPM_HOST="<url>"
APP_CONFIG_ECM_HOST="<url>"
APP_CONFIG_OAUTH2_HOST="<url>"
APP_CONFIG_IDENTITY_HOST="<url>"
APP_CONFIG_PROVIDER="ALL"
APP_CONFIG_AUTH_TYPE="OAUTH"
APP_CONFIG_OAUTH2_CLIENTID="alfresco"
APP_CONFIG_OAUTH2_IMPLICIT_FLOW=false
APP_CONFIG_OAUTH2_SILENT_LOGIN=true
APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI="{protocol}//{hostname}{:port}/assets/silent-refresh.html"
APP_CONFIG_OAUTH2_REDIRECT_LOGIN=/
APP_CONFIG_OAUTH2_REDIRECT_LOGOUT=/
APP_CONFIG_APPS_DEPLOYED="[{"name": "simpleapp"}]"
APP_CONFIG_LANDING_PAGE="/personal-files"

# CONTENT RELATED
APP_CONFIG_PLUGIN_PROCESS_SERVICE=true
APP_CONFIG_PLUGIN_AI_SERVICE=true
APP_CONFIG_PLUGIN_AOS=true
APP_CONFIG_PLUGIN_CONTENT_SERVICE=true
APP_CONFIG_CUSTOM_MODELED_EXTENSION = "{}"

# CONTENT - MICROSOFT PLUGIN RELATED
APP_CONFIG_PLUGIN_MICROSOFT_ONLINE=true
APP_CONFIG_MICROSOFT_ONLINE_OOI_URL="<url>"
APP_CONFIG_MICROSOFT_ONLINE_CLIENTID="<clientid>"
APP_CONFIG_MICROSOFT_ONLINE_AUTHORITY="<url>"
APP_CONFIG_MICROSOFT_ONLINE_REDIRECT="<url>"

# CONTENT - MICROSOFT INTEGRATION TEST RELATED
MICROSOFT_USER_INITIALS="<user-initials>"
MICROSOFT_EMAIL="<email>"
MICROSOFT_USER2_INITIALS="<user-initials>"
MICROSOFT_EMAIL2="<email>"
MICROSOFT_PASSWORD="<password>"
MOO_LOGIN_URL="<url>"

ADF-App generieren und bereitstellen

Sie können eine benutzerdefinierte ADF-Anwendung entwickeln, die Funktionen, Verhaltensweisen und Anpassungen hinzufügt. Mit dem Scaffolding-Tool Yeoman können Sie schnell Anwendungen zum Testen in Ihrer Entwicklungsumgebung erstellen. Der Yeoman Generator für Alfresco ADF-Anwendungen ist kostenlos als Open-Source-Projekt auf GitHub verfügbar.

Stellen Sie ACS Enterprise Edition bereit und stellen Sie sicher, dass es über Ihren Browser zugänglich ist: http://localhost:8080/alfresco
Node.js 18.x

Hinweis: Die gesamte Angular-Entwicklung erfolgt unter Verwendung der Sprache Typescript .

Generieren Sie die App mit den folgenden Schritten:

Um sicherzustellen, dass Yeoman installiert ist, öffnen Sie eine Eingabeaufforderung und geben Sie yo --version ein.

Wenn dies noch nicht installiert ist, führen Sie npm install -g yo aus.

Hinweis: Wenn Sie Linux oder MacOS verwenden, müssen Sie möglicherweise die folgenden Befehle mit sudo ausführen.
Installieren Sie die neueste Version der Alfresco Yeoman Generator ADF App:
```
npm install -g generator-alfresco-adf-app@latest
```
Installieren Sie die Angular CLI:
```
npm install -g @angular/cli
```
Mit der Angular CLI lassen sich Komponenten, Bibliotheken und vieles mehr ganz einfach erstellen. Sie können die installierte Version der Angular CLI überprüfen, indem Sie den Befehl ng v im Terminal verwenden.
Die Anwendung generieren:
```
yo alfresco-adf-app
```
Geben Sie einen Namen ein, wählen Sie Content Services als Anwendungs- Blueprint und geben Sie dann Y ein, um die Abhängigkeiten zu installieren:

Der Yeoman-Generator erstellt ein neues Projekt und installiert alle für Ihre Anwendung erforderlichen Abhängigkeiten.

Hinweis: Der Yeoman-Generator erstellt ein neues Verzeichnis für Ihr Projekt. Sie müssen in diesem Verzeichnis arbeiten.
Um die Anwendung für die Verwendung mit Content Services zu konfigurieren, öffnen Sie die Datei proxy.conf.js in einem Code-Editor.
Ändern Sie "target": "http://localhost:8080" so, dass es mit Ihrer Content Services-URL übereinstimmt, und speichern Sie anschließend die Datei.

Sie benötigen kein /alfresco am Ende der Ziel-URL. Wenn Sie beispielsweise Alfresco Content Services mit Docker Compose gestartet haben, ist Ihr Alfresco Content Services-Repository möglicherweise unter http://localhost:8080/alfresco verfügbar. In diesem Fall könnte Ihre proxy.conf.json - Datei wie folgt aussehen:
```
module.exports = {
    "/alfresco": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
    }
};
```
Hinweis: Wenn Sie eine Online-Testversion nutzen, finden Sie die URL für Content Services in der Willkommens-E-Mail.

Für die Online-Testversion könnte die Datei proxy.conf.json wie folgt aussehen: :
```
module.exports = {
    "/alfresco": {
    "target": "https://xyz.trials.alfresco.com",
    "secure": false,
    "changeOrigin": true
    }
};
```

ADF-App starten

Nachdem Sie die Schritte unter Alfresco Digital Workspace bereitstellen ausgeführt haben, können Sie die Anwendung starten.

So starten Sie die Anwendung:

Führen Sie den folgenden Befehl aus:
```
npm start
```
Klicken Sie auf das Schlüsselsymbol in der seitlichen Navigation, um sich anzumelden.

Wenn Sie eine Online-Testversion nutzen, finden Sie die Anmeldedaten für die Content Services in der Willkommens-E-Mail.

Mit dieser Anwendung können Sie Dokumente im Repository durchsuchen, hochladen und in der Vorschau anzeigen. .

Digital Workspace klonen und starten

Erfahren Sie, wie Sie den Digital Workspace in Ihrer lokalen Entwicklungsumgebung aus dem Quellcode heraus ausführen und aus Entwicklersicht verwalten können.

Stellen Sie ACS Enterprise Edition bereit und stellen Sie sicher, dass es über Ihren Browser zugänglich ist: http://localhost:8080/alfresco
Node.js 18.x

Sobald Content Services eingerichtet ist und läuft, müssen Sie den Quellcode des Projekts lokal in Ihrer Entwicklungsumgebung verfügbar machen. Wenn Sie Alfresco-Kunde oder -Partner sind, können Sie eine lokale Kopie des Projekts erhalten, indem Sie eine Anfrage in der Hyland Community stellen.

Erstellen Sie im Verzeichnis alfresco-apps eine Datei mit dem Namen .env und dem folgenden Inhalt. Geben Sie die Content Services-URL als Wert für APP_CONFIG_ECM_HOST ein:

BASE_URL="http://localhost:8080"
APP_CONFIG_ECM_HOST="http://localhost:8080"
APP_CONFIG_PROVIDER="ECM"
APP_CONFIG_AUTH_TYPE="BASIC"
APP_CONFIG_PLUGIN_AOS=false
APP_CONFIG_PLUGIN_CONTENT_SERVICE=true
APP_CONFIG_PLUGIN_PROCESS_SERVICE=false
APP_CONFIG_PLUGIN_AI_SERVICE=false

Führen Sie die folgenden Befehle aus, um die Anwendung zu starten:
```
npm ci
npm start content-ee
```

Die Anwendung ist unter http://localhost:4200 verfügbar. Verwenden Sie die Anmeldedaten für Content Services, um sich anzumelden.

Die für das Beispiel bereitgestellte Konfiguration ist das Minimum, das für Ihre Entwicklungsumgebung erforderlich ist, um das Alfresco-Repository lokal zu testen, aber es stehen zusätzliche Umgebungsvariablen zur Verfügung:

# App config settings
APP_CONFIG_BPM_HOST="<url>"
APP_CONFIG_ECM_HOST="<url>"
APP_CONFIG_OAUTH2_HOST="<url>"
APP_CONFIG_IDENTITY_HOST="<url>"
APP_CONFIG_PROVIDER="ALL"
APP_CONFIG_AUTH_TYPE="OAUTH"
APP_CONFIG_OAUTH2_CLIENTID="alfresco"
APP_CONFIG_OAUTH2_IMPLICIT_FLOW=false
APP_CONFIG_OAUTH2_SILENT_LOGIN=true
APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI="{protocol}//{hostname}{:port}/assets/silent-refresh.html"
APP_CONFIG_OAUTH2_REDIRECT_LOGIN=/
APP_CONFIG_OAUTH2_REDIRECT_LOGOUT=/
APP_CONFIG_APPS_DEPLOYED="[{"name": "simpleapp"}]"
APP_CONFIG_LANDING_PAGE="/personal-files"

# CONTENT RELATED
APP_CONFIG_PLUGIN_PROCESS_SERVICE=true
APP_CONFIG_PLUGIN_AI_SERVICE=true
APP_CONFIG_PLUGIN_AOS=true
APP_CONFIG_PLUGIN_CONTENT_SERVICE=true
APP_CONFIG_CUSTOM_MODELED_EXTENSION = "{}"

# CONTENT - MICROSOFT PLUGIN RELATED
APP_CONFIG_PLUGIN_MICROSOFT_ONLINE=true
APP_CONFIG_MICROSOFT_ONLINE_OOI_URL="<url>"
APP_CONFIG_MICROSOFT_ONLINE_CLIENTID="<clientid>"
APP_CONFIG_MICROSOFT_ONLINE_AUTHORITY="<url>"
APP_CONFIG_MICROSOFT_ONLINE_REDIRECT="<url>"

# CONTENT - MICROSOFT INTEGRATION TEST RELATED
MICROSOFT_USER_INITIALS="<user-initials>"
MICROSOFT_EMAIL="<email>"
MICROSOFT_USER2_INITIALS="<user-initials>"
MICROSOFT_EMAIL2="<email>"
MICROSOFT_PASSWORD="<password>"
MOO_LOGIN_URL="<url>"

Digitalen Arbeitsbereich aufbauen

Der Digital Workspace ist eine Standard-Angular-Anwendung, deren Lebenszyklus denselben Prinzipien und Best Practices folgt wie jede andere Standard-Angular-Anwendung. Anhand dieser Informationen erfahren Sie, wie Sie ihn mit verschiedenen Distributionen installieren können.

So erstellen Sie die Anwendung:

Geben Sie in einer Eingabeaufforderung Folgendes ein:
```
npm install
```
Die Distribution für den Betrieb des Digital Workspace mit der Process Services-Erweiterung ist content-ee.
Wählen Sie den Befehl zum Starten der Anwendung aus:
```
npm run build content-ee [prod]
```
Für die Alfresco Content Application oder jede andere ADF-basierte Anwendung lautet der Befehl npm start.
Wählen Sie den Befehl zum Erstellen der Anwendung aus:
```
npm run build content-ee [prod]
```
Hinweis: Für die Alfresco Content Application oder jede andere ADF-basierte Anwendung lautet der Befehl npm run build.

Sobald der Build abgeschlossen ist, wird ein neuer Ordner namens dist im Stammverzeichnis des Projekts erstellt. Im Verzeichnis dist befindet sich eine Sammlung von Dateien, die die Distribution Ihrer Anwendung darstellen.

Ändern Sie Ihre Verteilung

Anhand dieser Informationen erfahren Sie, wie Sie unerwünschte Module hinzufügen oder entfernen, wie Sie die Anwendung für die Verwendung in verschiedenen Umgebungen bereitstellen und wie Sie sie testen können.

Module vor dem Erstellen entfernen

Um Module aus der Distribution zu entfernen, öffnen Sie die Datei apps/content-ee/src/app/extensions.module.ts und entfernen Sie die nicht benötigten Module.

@NgModule({
    imports: [
        AosExtensionModule,
        AcaAboutModule,
        AcaSettingsModule,
        AiViewModule,
        RecordModule,
        ProcessServicesExtensionModule,
        ContentServicesExtensionModule,
        ExtensionsOrderExtensionModule,
    ],
})
export class AppExtensionsModule {}

In eine andere Umgebung befördern

Die kompilierte Anwendung ist als Sammlung von Dateien im Verzeichnis dist verfügbar.

Wenn Sie die Anwendung in einer anderen Umgebung verwenden möchten, müssen Sie lediglich die Dateien auf Ihren neuen Server kopieren.

Testing

Unit-Tests für die Content-Anwendung oder den Digital Workspace werden mit Karma entwickelt und ausgeführt.

Unit-Tests werden in Dateien mit der Erweiterung specs.ts entwickelt. Fast jede Komponente verfügt über eine zugehörige specs.ts - Datei, die direkt im selben Ordner wie die Komponente gespeichert ist.

Ein Unit-Test kann wie folgt aussehen:

it('...description...', () => {
    // Source code.
});

Erweiterungen erstellen

Anpassungen, die über den Erweiterungsmechanismus implementiert werden, sind besser zu warten, da die Änderungen modular sind und vom Kern der Anwendung isoliert sind. Dieser Ansatz zur Anpassung des Digital Workspace (ADW) sorgt dafür, dass Upgrades einfacher zu verwalten und zu testen sind. Dies ist die empfohlene Methode zur Anpassung Ihres digitalen Arbeitsbereichs.

Entwickeln Sie eine Erweiterung, wenn Ihr Anwendungsfall hauptsächlich durch die Funktionen des Digital Workspace abgedeckt wird. Allerdings sind einige zusätzliche Änderungen erforderlich, um die Erwartungen und Anforderungen zu erfüllen. Wenn Ihr Anwendungsfall komplexe Änderungen erfordert, ist eine benutzerdefinierte Anwendung auf Basis des Alfresco Application Development Framework (ADF) eine Alternative.

Die Erweiterung von Digital Workspace erfordert Kenntnisse in Angular. Außerdem müssen Sie mit der Architektur von Digital Workspace vertraut sein, um komplexere Anwendungsfälle zu realisieren. Der Erweiterungsmechanismus ermöglicht es Ihnen, das Verhalten Ihrer Anwendungen hinzuzufügen, zu entfernen und zu ändern.

So funktioniert die ADW-Erweiterung

Digital Workspace stützt sich auf drei Hauptelemente, um die dynamische Erweiterbarkeit zu erreichen:

Angular-Abhängigkeitsinjektion
ADF-Erweiterungsmechanismus
NgRx Store

Das folgende Diagramm gibt einen Überblick über den Aufbau einer Erweiterung und die verschiedenen beteiligten Akteure:

Anatomie einer Erweiterung

Jede Erweiterung ist eine Angular-Bibliothek, die einen Erweiterungsdeskriptor in Form einer JSON-Datei enthält, ein Angular-Modul, das als Stammverzeichnis fungiert und alle Elemente offenlegt, aus denen die Funktion besteht, wie Aktionen, Komponenten, Dienste und Regeln.

Der Deskriptor gibt an, wie die Erweiterung in der ADW-Anwendung zusammengestellt wird, indem er Hooks mit dem Erweiterungselement verknüpft. Das Modul muss in extensions.module.ts importiert werden, um in das Anwendungsbundle aufgenommen zu werden, das den Import und die Registrierung aller Elemente beim Extension Mechanism und beim Store ausführt.

Beim Start

Das Anwendungsmodul Digital Workspace importiert das Erweiterungsmodul, und jede Erweiterung wird im Bundle importiert. Jedes Modul ist für die Deklaration von Komponenten, Aktionen und Regeln verantwortlich, indem es eine eindeutige ID (string) bereitstellt, die mit dem zu ladenden Element verknüpft ist . Nach Abschluss dieses Vorgangs wird ein Wörterbuch mit IDs → Elementen geladen. Jedes Modul deklariert außerdem eine Deskriptordatei, die geladen und mit anderen Dateien zusammengeführt wird. Das Ergebnis der Zusammenführung wird in app.extensions.json geschrieben.

Die Datei app.extensions.json wird vom AppExtensionService geladen. Dadurch werden die Erweiterungen mithilfe des ADF-Erweiterungsmechanismus dynamisch in den entsprechenden Hook geladen.

Erstellen Sie Ihre erste ADW-Erweiterung

Verwenden Sie diese Informationen, um eine Erweiterung für den digitalen Arbeitsbereich zu entwickeln.

Den Quellcode für Digital Workspace finden Sie im Nexus-Repository von Alfresco. Melden Sie sich an und suchen Sie auf der Website des Nexus-Repositorys unter https://nexus.alfresco.com/nexus/ nach „digital-workspace“.

Alfresco-Kunden können Nexus-Anmeldedaten anfordern, indem sie über Hyland Community ein Support-Ticket erstellen. Diese Anmeldedaten sind erforderlich, um auf private (nur für Unternehmen verfügbare) Artefakte aus dem Nexus-Repository zuzugreifen.

Voraussetzungen

Node.js
- Die erforderliche Version finden Sie auf der Seite Unterstützte Plattformen.
Alfresco Content Service lokal oder remote bereitgestellt:
- Die Beispiel-URL verwendet das folgende Format: https://your.alfresco.backend.com.
Quellcode für den digitalen Arbeitsbereich.
Ihre bevorzugte integrierte Entwicklungsumgebung (IDE), wie z. B. Visual Studio Code (VS Code).
Nx Console-Plugin für VS Code (optional).

Digitalen Arbeitsbereich erstellen und ausführen

Stellen Sie sicher, dass Sie Digital Workspace erstellen und ausführen können.

Starten Sie Ihre bevorzugte Terminal-Anwendung und installieren Sie die Pakete:
```
npm i
```
Bearbeiten Sie die Datei .env, um das Backend der Content Services zu konfigurieren: backend:
```
BASE_URL=https://your.alfresco.backend.com
```
Bearbeiten Sie apps/content-ee/src/app.config.json, um die Authentifizierung zu konfigurieren:
```
"authType": "OAUTH" or "BASIC"
```
Die zuvor definierte BASE-URL wird auch für die Authentifizierung verwendet.
Führen Sie die Anwendung aus:
```
npm run start content-ee
```

Gerüst

Der Gerüstbauprozess umfasst mehrere Schritte:

Erstellen einer Bibliothek zum Speichern Ihrer Anpassungen.
Verbinden der Erweiterung mit der ADW-Anwendung.
Erstellen Sie Ihre erste Erweiterung.

Erstellen Sie eine Bibliothek, um Ihre Anpassungen zu hosten.

Erstellen Sie einen Ordner, in dem Sie die Erweiterungen ablegen möchten, z. B. /workspace/extensions.

Hinweis: Halten Sie Ihre Anpassungen vom Originalcode getrennt, damit zukünftige Upgrades einfacher sind.

Führen Sie den Bibliotheksgenerator @nx/angular mit dem folgenden Befehl als Vorlage aus:

npx nx generate @nx/angular:library --name=@myorg/my-extension --buildable=true --directory=extensions/myextension --publishable=true --importPath=@myorg/my-extension --projectNameAndRootFormat=as-provided -- unitTestRunner=none --no-interactive --dry-run

Stellen Sie jede Option anhand der folgenden Beschreibungen ein.

Optionen	Beschreibung
name	Der Name der Bibliothek.
directory	Ein Verzeichnis, in dem sich die Bibliothek befindet.
importPath	Der für den Import verwendete Bibliotheksname, z. B. `@myorg/my-awesome-lib` . Dies muss ein gültiger npm-Paketname sein. Tipp: Verwenden Sie denselben Wert, der für die Option `--name` angegeben wurde.

Alle Befehle zum Generieren von Code verfügen über das Flag --dry-run. Damit haben Sie die Möglichkeit, den Code zu überprüfen, bevor Sie Änderungen vornehmen.

Weitere Informationen finden Sie in der offiziellen Dokumentation zur Nx Angular-Bibliothek.

Führen Sie den vorherigen Befehl ohne das Flag --dry-run aus, wenn Sie mit dem Ergebnis zufrieden sind.

npx nx .. ist der bevorzugte Befehl, der anstelle der Installation von global nx ausgeführt werden sollte. Bei einer globalen Installation von Nx kann es leicht zu Versionskonflikten und Problemen mit dem Cache kommen.

Änderungen validieren

Überprüfen Sie in tsconfig.base.json, ob ein Importpfad vorhanden ist und auf den richtigen Einstiegspunkt verweist:
```
"@myorg/my-extension": ["extensions/my-extension/src/index.ts"],
```
Testen ob npm i funktioniert:

Wenn aufgrund von Paketkonflikten Fehler auftreten, führen Sie npm i mit der Option --legacy-peer-deps aus.

Verbinden Sie die Erweiterung mit der ADW-Anwendung.

Um Ihre Erweiterung mit dem Digital Workspace zu verbinden, müssen Sie das Modul mit Ihren Anpassungen importieren und den Ordner assets in den Build-Prozess einbeziehen .

Importieren Sie das NgModule in die ADW-Anwendung, indem Sie es zur Imports-Anweisung in ./apps/content-ee/src/app/extension.module.ts hinzufügen:

import { MyAdwCustomizationsModule } from '@myorg/my-adw-customizations';
   
   @NgModule({
     imports: [
       environment.plugins.aca_aos ? AosExtensionModule : [],
       environment.plugins.aca_about ? AcaAboutModule : [],
       environment.plugins.adw_governance ? RecordModule : [],
       environment.plugins.adw_aps1 ? ProcessServicesExtensionModule : [],
       environment.plugins.adw_content_services
         ? ContentServicesExtensionModule
         : [],
       environment.plugins.adw_office365
         ? MicrosoftOfficeOnlineIntegrationExtensionModule
         : [],
       environment.plugins.adw_analytics ? ContentEeAnalyticsModule : [],
       MyExtensionModule
     ],
       providers: [
         { provide: PACKAGE_JSON, useValue: packageJson },
         { provide: DEV_MODE_TOKEN, useValue: true },
       ],
     })
   export class AppExtensionsModule {}

Hinweis: Wenn VS Code beim Öffnen der Datei viele Fehler anzeigt, weil die Module nicht aufgelöst werden können, kann dies daran liegen, dass die Datei tsconfig.json in der Anwendung content-ee fehlt.

Dies ist kein Blocker, und eine Lösung besteht darin, eine tsconfig.json - Datei neben tsconfig.app.json mit folgendem Inhalt zu erstellen:

{ "extends": "./tsconfig.app.json" }

Fügen Sie Ihren Quellcode zum Anwendungsbundle hinzu, indem Sie die Assets-Ordner in den Build-Prozess einbeziehen.

Dadurch wird sichergestellt, dass die Dateien während des Erstellungsprozesses der Anwendung berücksichtigt werden. .

Vermögensart Eingabe Erwartetes Ziel
Descriptor File extensions/EXT_NAME/descriptor /assets/plugins
Translations extensions/EXT_NAME/i18n /assets/plugin-name/i18n
Assets extensions/EXT_NAME/assets /assets/

Vermögensart	Eingabe	Erwartetes Ziel
Descriptor File	`extensions/EXT_NAME/descriptor`	`/assets/plugins`
Translations	`extensions/EXT_NAME/i18n`	`/assets/plugin-name/i18n`
Assets	`extensions/EXT_NAME/assets`	`/assets/`

Bearbeiten Sie die Datei ./apps/content-ee/project.json, indem Sie die folgende Konfiguration zum Abschnitt targets.build.options.assets hinzufügen:

{
     "input": "extensions/my-extension/descriptor",
     "output": "/assets/plugins",
     "glob": "*.json"
   },
   {
     "input": "extensions/my-extension/i18n",
     "output": "/assets/my-extension/i18n",
     "glob": "**/*"
   },
   {
     "input": "extensions/my-extension/assets",
     "output": "/assets/",
     "glob": "**/*"
   }

Möglicherweise benötigen Sie nicht die gesamte Konfiguration, aber wir fügen sie einmalig hinzu, um mehr Szenarien abzudecken.

Erstellen Sie Ihre erste Erweiterung

Um Ihre erste Erweiterung zu erstellen, erstellen Sie eine Deskriptordatei und stellen Sie die Konfigurationsdatei dem Modul zur Verfügung.

Erstellen Sie einen Ordner descriptor mit einer Erweiterungsdeskriptordatei darin, d. h. myorg.my-extension.json.
- Der Dateiname muss innerhalb der Anwendung eindeutig sein.
- Wählen Sie einen Namen, der nicht mit anderen Erweiterungen in Konflikt steht.
- Die Deskriptordatei folgt dem Schema in alfresco-content-app/extension.schema.json des https://github.com/Alfresco/alfresco-content-app/ GitHub-Repositorys.
Der Mindestinhalt der Deskriptordatei (siehe unten) sollte nur die Felder enthalten, die für das Feld About verwendet werden:
```
{
     "$version": "0.1.0",
     "$id": "my-extension-id",
     "$name": "your plugin name",
     "$vendor": "Your amazing company",
     "$license": "LGPL-3.0",
     "$description": "Just a hello world"
   }
```
Dies ist ein Beispiel für das Feld About:

Stellen Sie die Konfigurationsdatei für das Modul bereit.

Weisen Sie die Anwendung an, den Erweiterungsdeskriptor zu laden, indem Sie die Funktion provideExtensionConfig aus @alfresco/adfextensions verwenden.

import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { provideExtensionConfig } from '@alfresco/adf-extensions';

   @NgModule({
     imports: [CommonModule],
     providers: [provideExtensionConfig(['myorg.my-extension.json'])],
   })
   export class MyAdwExtensionModule {}

Testen Sie die Konfiguration, indem Sie Folgendes ausführen:
```
npm run start content-ee
```
Die Anwendung sollte ohne Probleme oder sichtbare Änderungen laufen. Wenn Sie das Netzwerk überprüfen, sollten Sie Ihre JSON-Datei zusammen mit den anderen Plugins finden können.

Ihre Erweiterung wird in der Plugin-Liste im Feld About angezeigt:

Neue Seite hinzufügen

Um eine neue Seite hinzuzufügen, definieren Sie eine neue Route in der Anwendung, weisen Sie eine Seitenkomponente zu und erstellen Sie anschließend ein Navigationsleistenelement.

Definieren Sie eine neue Route in der Deskriptordatei:
```
"routes": [
     {
       "id": "app.route.my-unique-route-id",
       "parentRoute": "",
       "path": "first-route",
       "layout": "app.layout.main",
       "component": "my-extension-id.pages.hello.page",
       "data": {
       },
       "auth": ["content-services.auth", "extension-data-loader-guard.auth"]
     }
   ],
```
Abgesehen von parentRoute sind die anderen Optionen vergleichbar mit denen, die Sie normalerweise in einer Angular-Anwendung angeben, Angular Route. Die wichtigsten Optionen sind id , path und component.

Interne Referenzen zur Funktionsweise sind im Alfresco/alfresco-content-app GitHub-Repository definiert – suchen Sie nach alfresco-content-app/projects/aca-shared/src/lib/services/router.extension.service.ts.
Um eine Seitenkomponente zuzuweisen, erstellen Sie zunächst eine Komponente für die Seite und verknüpfen Sie dann die erstellte Komponente mit der in der Descriptor-Datei definierten Komponenten-ID .
1. Sie können eine Komponente für die Seite entweder manuell erstellen, wenn Sie dem Angular-Standard folgen möchten, oder mithilfe der CLI.
```
npx nx generate @schematics/angular:component --name=hello --project=@myorg/my-extension --skipTests=true --standalone=true --type=page --no-interactive --dry-run
```
  - Im Beispiel können Sie --name und --project nach Ihren Wünschen ändern.
  - Wenn Sie mit den vorgeschlagenen Änderungen zufrieden sind, entfernen Sie die Option --dry-run und führen Sie den Befehl erneut aus.
2. Importieren Sie in Ihrem Erweiterungsmodul den Erweiterungsdienst mithilfe der Angular-Abhängigkeitsinjektion und weisen Sie die Komponente der eindeutigen ID in der Deskriptordatei zu.
  
  Der Code sollte wie folgt aussehen:
```
import {
  ExtensionService,
  provideExtensionConfig,
} from '@alfresco/adf-extensions';
import { HelloPage } from './hello/hello.page';

@NgModule({
  imports: [CommonModule],
  providers: [provideExtensionConfig(['myorg.my-extension.json'])],
})
export class MyExtensionModule {
  constructor(private extensionService: ExtensionService) {
    this.extensionService.setComponents({
      'my-extension-id.pages.hello.page': HelloPage,
    });
  }
}
```
  Sie können testen, ob die Änderung funktioniert hat, indem Sie die definierte Route über die URL http://localhost:4200/#/first-route aufrufen. Die genaue URL kann je nach Ihrer Konfiguration variieren.
Erstellen Sie ein Navigationsleistenelement.

Es gibt mehrere Möglichkeiten, das Navigationsleistenelement hinzuzufügen, je nachdem, wo Sie Ihr Element in der Navigation anzeigen möchten. Die Optionen sind:
- Als einzelner Artikel
- Innerhalb bestehender Gruppen
- In einer neuen Gruppe
Diese Optionen werden in den folgenden Abschnitten beschrieben.

Beispiel – Hinzufügen des Navigationsleistenelements als einzelnes Element

Um einen Artikel als Einzelartikel hinzuzufügen, ist Folgendes erforderlich ...

"features": {
  "navbar": [
    {
      "id": "app.navbar.primary",
      "items": [
        {
          "id": "app.navbar.hello",
          "title": "Hello World",
          "route": "app.route.my-unique-route-id",
          "description": "Hello World",
          "order": 100,
          "rules": {
            "visible": "app.content-services.isEnabled"
          }
        }
      ]
    }
  ]
}

Beispiel – Hinzufügen des Navigationsleistenelements innerhalb bestehender Gruppen

Um ein Element zu einer bestehenden Gruppe hinzuzufügen, muss eine Übereinstimmung mit einer id vorliegen. Im folgenden Beispiel sehen Sie die erforderlichen IDs für die Abschnitte Files und Workflow:

A screenshot showing the example IDs.

"features": {
  "navbar": [
    {
      "id": "app.navbar.primary",
      "items": [
        {
          "id": "app.navbar.menu",
          "children": [
            {
              "id": "app.navbar.hello2",
              "title": "Hello in Content Group",
              "route": "app.route.my-unique-route-id",
              "description": "Hello World inside File",
              "order": 90,
              "rules": {
                "visible": "app.content-services.isEnabled"
              }
            }
          ],
          "description": "Hello World",
          "rules": {
            "visible": "app.content-services.isEnabled"
          }
        }
      ]
    }
  ]
}

Innerhalb jeder Gruppe wird die Reihenfolge der Elemente durch das Attribut order gesteuert.

Beispiel – Hinzufügen des Navigationsleistenelements in einer neuen Gruppe

Ähnlich wie beim Beispiel für die Aktualisierung einer bestehenden Gruppe können Sie ein Element mit untergeordneten Elementen erstellen, das in eine Gruppe in der Navigationsleiste übersetzt wird. Wenn sich die ID von der Standard-ID unterscheidet, wird in der Navigationsleiste eine neue Gruppe mit einem Namen erstellt, der dem in der Eigenschaft descriptor angegebenen Namen entspricht.

"features": {
  "navbar": [
    {
      "id": "app.navbar.primary",
      "items": [
        {
          "id": "app.navbar.new-name",
          "children": [
            {
              "id": "app.navbar.hello2",
              "title": "Hello in Content Group",
              "route": "app.route.my-unique-route-id",
              "description": "Hello World inside File",
              "order": 90,
              "rules": {
                "visible": "app.content-services.isEnabled"
              }
            }
          ],
          "title": "Hello World",
          "description": "Hello World",
          "rules": {
            "visible": "app.content-services.isEnabled"
          }
        }
      ]
    }
  ]
}

Den Betrachter erweitern

Um den Viewer zu erweitern, erstellen Sie die neue Viewer-Komponente, registrieren Sie den benutzerdefinierten Viewer und deklarieren Sie den neuen Viewer im Deskriptor.

Erstellen Sie eine neue Komponente, um eine neue Viewer-Komponente zu erstellen:

npx nx generate @nx/angular:component --name=custom-viewer --directory=./extensions/my-customization/viewer/custom-viewer --standalone=true --nameAndDirectoryFormat=as-provided --no-interactive --dry-run  

Registrieren Sie den benutzerdefinierten Viewer:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExtensionService, provideExtensionConfig } from '@alfresco/adf-extensions';
import { CustomViewerComponent } from './viewer/custom-viewer/customViewer.component';
@NgModule({
  imports: [CommonModule, CustomViewerComponent],
  providers: [provideExtensionConfig(['myorg.my-customization.json'])]
})
export class MyCustomizationModule {
 constructor(extension : ExtensionService) {
   extension.setComponents({'my-org.components.custom-viewer': CustomViewerComponent,
   })    
 }
}

Deklarieren Sie den neuen Viewer im Deskriptor:

       "viewer" : {
            "extensions" : [
                {
                    "fileExtension": "pdf",
                    "component": "my-org.components.custom-viewer"
                }
            ]
        }

Übersicht über die Frontend-App-Entwicklung​

Front-End-Erfahrung​

Entwicklungsoptionen​

Frontend-Anwendungen bereitstellen​

Alfresco Content App bereitstellen​

Alfresco Digital Workspace bereitstellen​

ADF-App generieren und bereitstellen​

ADF-App starten​

Digital Workspace klonen und starten​

Digitalen Arbeitsbereich aufbauen​

Ändern Sie Ihre Verteilung​

Module vor dem Erstellen entfernen​

In eine andere Umgebung befördern​

Testing​

Erweiterungen erstellen​

So funktioniert die ADW-Erweiterung​

Anatomie einer Erweiterung​

Beim Start​

Erstellen Sie Ihre erste ADW-Erweiterung​

Voraussetzungen​

Digitalen Arbeitsbereich erstellen und ausführen​

Gerüst​

Erstellen Sie eine Bibliothek, um Ihre Anpassungen zu hosten.​

Änderungen validieren​

Verbinden Sie die Erweiterung mit der ADW-Anwendung.​

Erstellen Sie Ihre erste Erweiterung​

Neue Seite hinzufügen​

Beispiel – Hinzufügen des Navigationsleistenelements als einzelnes Element​

Beispiel – Hinzufügen des Navigationsleistenelements innerhalb bestehender Gruppen​

Beispiel – Hinzufügen des Navigationsleistenelements in einer neuen Gruppe​

Den Betrachter erweitern​