Starten Sie mit der Dokumentenbearbeitung in Ihrer Web-App mithilfe der ONLYOFFICE Create App

Möchten Sie sehen, wie die Online-Dokumentenbearbeitung in Ihrer eigenen Anwendung funktionieren könnte? Ein funktionierendes Beispiel erleichtert die ersten Schritte. Die „ONLYOFFICE Create App“ bietet Ihnen genau diesen Ausgangspunkt. Sie generiert eine kleine Webanwendung mit Dateimanager sowie dem Code, der für die Anbindung von ONLYOFFICE Docs erforderlich ist. Sobald Sie den Zugriff auf eine laufende Docs-Instanz konfiguriert haben, können Sie den Editor im Browser ausprobieren und das Projekt in Ihrem eigenen Tempo erkunden.

Was ist die ONLYOFFICE Create App?

Die auf npm verfügbare ONLYOFFICE Create App ist ein Befehlszeilentool, das ein Beispiel-Integrationsprojekt erstellt.

Die generierte App basiert auf Next.js und React. Sie umfasst einen Dateimanager, mit dem sich Dateien hochladen sowie neue Dokumente, Tabellenkalkulationen, Präsentationen und PDF-Formulare erstellen lassen. Zudem bietet sie eine Editor-Seite sowie den Server-Code für das Speichern und Herunterladen von Dokumenten.

Die App besteht aus zwei wesentlichen Komponenten:

• Create App bereitet die Website vor.
• ONLYOFFICE Docs stellt die Dokumenteneditoren bereit.

Hinweis! ONLYOFFICE Docs wird separat installiert und verbunden. Der npm-Befehl installiert weder den Document Server noch startet er Docker für Sie.

Voraussetzungen

• Node.js 20.12 oder höher
• ONLYOFFICE Docs 8.2 oder höher
• npm-Paketmanager und stabile Internetverbindung

Für die folgende Anleitung verwenden wir Windows PowerShell und gehen davon aus, dass ONLYOFFICE Docs bereits in Docker Desktop auf Port 80 läuft. Wenn Sie Docs noch nicht installiert haben, folgen Sie zuerst der Docker-Installationsanleitung.

Docker ist eine Möglichkeit, Docs lokal auszuführen. Es ist nicht erforderlich, dass dies auf Ihrem Computer geschieht, wenn Sie sich mit einem bestehenden Server an anderer Stelle verbinden.

Erstellen Sie Ihre erste Anwendung

1. Öffnen Sie PowerShell in dem Ordner, in dem Sie das Projekt speichern möchten. Führen Sie dann aus:

   npx @onlyoffice/create-app my-docs-app
   

   Wenn npm fragt, ob das Generator installiert werden soll, bestätigen Sie mit y. Der Befehl erstellt einen Ordner mit dem Namen my-docs-app und installiert die Abhängigkeiten der Anwendung.

2. Warten Sie, bis die Installation abgeschlossen ist, und wechseln Sie dann in den neuen Ordner:

   cd my-docs-app
   

   Hinweis! Befehle, die die App starten, müssen in ihrem Projektordner ausgeführt werden, wo sich package.json befindet. Das Ausführen von npm install in einem nicht verwandten leeren Ordner erstellt keine ONLYOFFICE-Integration.

Verbinden Sie die App mit ONLYOFFICE Docs

Bearbeiten Sie für dieses lokale Docker-Desktop-Setup diese Einträge in der .env-Datei und belassen Sie die übrigen generierten Einstellungen unverändert:

DOCUMENT_SERVER_URL=http://localhost:80
DOCUMENT_SERVER_JWT_SECRET=your_actual_docs_secret
APP_URL=http://your_local_ip_adress:3000

DOCUMENT_SERVER_URL sagt dem Browser, wo er die Editoren finden kann. APP_URL sagt Docs, wo Ihre Dateien heruntergeladen und gespeicherte Änderungen gesendet werden. Hier ermöglicht host.docker.internal dem Container, die Anwendung, die unter Windows läuft, zu erreichen. Wir verwenden Port 3000 für die App, damit sie neben einem anderen Beispiel auf Port 3000 ausgeführt werden kann.

DOCUMENT_SERVER_JWT_SECRET ist ein gemeinsames Geheimnis, das verwendet wird, um Anfragen zwischen den beiden Komponenten zu überprüfen. Ersetzen Sie den Beispieltext durch das tatsächliche Geheimnis, das für Ihre Docs-Instanz konfiguriert ist. Wenn Sie  .env manuell bearbeiten, fügen Sie den Wert selbst ein. Für Docker-Installationen setzen Sie das Geheimnis mit der Umgebungsvariable JWT_SECRET des Containers und verwenden Sie denselben Wert für DOCUMENT_SERVER_JWT_SECRET in der App.

APP_URL: Ersetzen Sie your_local_ip_adress durch die lokale IP-Adresse Ihres Computers, die vom Docs-Container erreicht werden kann.

Für dieses Docker-Setup muss Docs auch die Erlaubnis haben, Dateien von der privaten Adresse des Hosts anzufordern. Unser Testcontainer verwendete ALLOW_PRIVATE_IP_ADDRESS=true, eine Option, die in der offiziellen Dokumentation beschrieben ist.

Öffnen Sie die App in Ihrem Browser

Speichern Sie .env und starten Sie die Anwendung:

npm start 

Bei dieser Vorlage lädt der Startbefehl die Vorlagen für leere Dokumente herunter, erstellt die Anwendung und startet den Webserver. Für diesen ersten Durchlauf benötigen Sie keinen separaten Build-Befehl.

Sobald der Server bereit ist, öffnen Sie http:///your_local_ip_adress:3000. Lassen Sie das Terminal laufen, während Sie die App verwenden.

Sie werden einen Dateimanager mit einer README-Beispieldatei sehen. Sie können andere Dokumente erstellen. ONLYOFFICE Docs wird innerhalb der Anwendung geladen und steht bereit, damit Sie die Bearbeitung ausprobieren können.

Probieren Sie Ihre eigene Integration aus

Create App gibt Ihnen eine praktische Möglichkeit, sich mit der Integration von ONLYOFFICE Docs vertraut zu machen. Sie können mit einem kleinen funktionierenden Beispiel beginnen, sehen, wie ein Dokument durch den Bearbeitungs- und Speicherprozess fließt, und dieses Verständnis nutzen, wenn Sie Ihre eigene Anwendung erstellen.

Durchsuchen Sie das Create App-Repository auf GitHub, generieren Sie Ihr erstes Projekt und öffnen Sie ein Dokument in Ihrem Browser. Für einen näheren Blick auf die Integrationsmöglichkeiten fahren Sie mit der ONLYOFFICE Docs API-Dokumentation fort. Haben Sie eine Idee oder einen Vorschlag? Erstellen Sie ein Issue auf GitHub oder senden Sie uns eine E-Mail.

FAQ: ONLYOFFICE Create App

Installiert Create App ONLYOFFICE Docs?

Nein. Es erstellt eine kleine Webanwendung mit einem Dateimanager und dem Code, der die Verbindung zu ONLYOFFICE Docs erleichtert. Installieren Sie ONLYOFFICE Docs separat oder verbinden Sie eine vorhandene Instanz.

Ist Docker erforderlich?

Nur wenn Sie sich entscheiden, Docs in Docker auszuführen. Es gibt mehrere Optionen für die Bereitstellung von ONLYOFFICE Docs, einschließlich Ubuntu, CentOS, Windows Server und Amazon Machine Image. Sie können auch einen bestehenden Docs-Server verwenden.

Kann ich die App für mein eigenes Projekt anpassen?

Ja. Sie können den generierten Code ändern. Weitere Informationen zur Integration finden Sie in der API-Dokumentation.