Commencer avec l’édition de documents dans votre application web avec ONLYOFFICE Create App

Vous souhaitez voir comment l’édition de documents en ligne pourrait fonctionner dans votre propre application ? Un exemple fonctionnel facilite les premiers pas.

ONLYOFFICE Create App vous offre ce point de départ. Il génère une petite application web avec un gestionnaire de fichiers et le code nécessaire pour connecter ONLYOFFICE Docs. Une fois que vous avez configuré l’accès à une instance de Docs en cours d’exécution, vous pouvez tester l’éditeur dans votre navigateur et explorer le projet à votre rythme.

Découvrez ONLYOFFICE Create App

Disponible sur npm, ONLYOFFICE Create App est un outil de ligne de commande qui crée un exemple d’intégration.

L’application générée utilise Next.js et React. Elle comprend un gestionnaire de fichiers dans lequel vous pouvez télécharger des fichiers ou créer de nouveaux documents texte, feuilles de calcul, présentations et formulaires PDF. Elle fournit également une page d’éditeur et le code serveur qui gère le téléchargement de documents et leur enregistrement.

L’application repose sur deux composants essentiels :

• Create App prépare le site web.
• ONLYOFFICE Docs fournit les éditeurs de documents.

Remarque : ONLYOFFICE Docs doit être installé et connecté séparément. La commande npm n’installe pas Document Server ni ne lance Docker pour vous.

Prérequis

• Node.js 20.12 ou version ultérieure
• ONLYOFFICE Docs 8.2 ou version ultérieure
• Gestionnaire de paquets npm et connexion Internet stable

Pour la procédure ci-dessous, nous utilisons Windows PowerShell et supposons qu’ONLYOFFICE Docs est déjà en cours d’exécution dans Docker Desktop sur le port 80. Si vous n’avez pas encore installé Docs, suivez d’abord le guide d’installation de Docker.

Docker est une méthode pour exécuter Docs en local. Il n’est pas nécessaire sur votre ordinateur si vous vous connectez à un serveur existant ailleurs.

Créez votre première application

1. Ouvrez PowerShell dans le dossier où vous souhaitez conserver le projet, puis exécutez :

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

   Si npm demande si vous souhaitez installer le générateur, confirmez avec y. La commande crée un dossier appelé my-docs-app et installe les dépendances de l’application.

2. Attendez la fin de l’installation, puis déplacez-vous dans le nouveau dossier :

   cd my-docs-app
   

   Remarque : les commandes qui démarrent l’application doivent être exécutées dans le dossier du projet, là où se trouve package.json. Exécuter  npm install dans un dossier vide quelconque ne créera pas d’intégration ONLYOFFICE.

Connectez l’application à ONLYOFFICE Docs

Pour cette configuration locale de Docker Desktop, modifiez les entrées suivantes dans env et laissez les autres paramètres générés tels quels :

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 indique au navigateur où trouver les éditeurs. APP_URL indique à Docs où télécharger vos fichiers et où envoyer les modifications enregistrées. Ici, host.docker.internal permet au conteneur d’atteindre l’application exécutée sur Windows. Nous utilisons le port 3000 pour l’application afin qu’elle puisse s’exécuter en parallèle d’un autre exemple sur le port 3000.

DOCUMENT_SERVER_JWT_SECRET est un secret partagé utilisé pour vérifier les demandes entre les deux composants. Remplacez le texte d’exemple par le véritable secret configuré pour votre instance de Docs. Lorsque vous modifiez manuellement  .env , collez la valeur elle-même. Pour les installations Docker, définissez le secret avec la variable d’environnement du conteneur JWT_SECRET et utilisez la même valeur pour DOCUMENT_SERVER_JWT_SECRET dans l’application.

APP_URL : Remplacez your_local_ip_adress par l’adresse IP locale de votre ordinateur, accessible depuis le conteneur Docs.

Pour cette configuration Docker, Docs doit également être autorisé à récupérer des fichiers depuis l’adresse privée de l’hôte. Notre conteneur de test a utilisé  ALLOW_PRIVATE_IP_ADDRESS=true, une option décrite dans la documentation officielle de l’image Docker.

Ouvrez l’application dans votre navigateur

Enregistrez .env et démarrez l’application :

npm start 

Dans ce modèle, la commande de démarrage télécharge les modèles de documents vierges, construit l’application et lance le serveur web. Vous n’avez pas besoin d’une commande de build séparée pour ce premier lancement.

Une fois que le serveur est prêt, ouvrez http:///your_local_ip_adress:3000. Gardez le terminal en cours d’exécution pendant que vous utilisez l’application.

Vous verrez un gestionnaire de fichiers avec un exemple README. Vous pouvez créer d’autres documents. ONLYOFFICE Docs se chargera à l’intérieur de l’application, prêt à être utilisé pour l’édition.

Essayez votre propre intégration

Create App vous offre un moyen pratique de vous familiariser avec l’intégration d’ONLYOFFICE Docs. Vous pouvez partir d’un petit exemple fonctionnel, observer comment un document circule dans le processus d’édition et d’enregistrement, puis mettre à profit cette compréhension pour construire votre propre application.

Explorez le dépôt Create App sur GitHub, générez votre premier projet et ouvrez un document dans votre navigateur. Pour un aperçu plus détaillé des options d’intégration, poursuivez avec la documentation de l’API ONLYOFFICE Docs. Vous avez une idée ou une suggestion ? Ouvrez une issue sur GitHub ou envoyez-nous un e-mail.

FAQ : ONLYOFFICE Create App

Est-ce que Create App installe ONLYOFFICE Docs ?

Non. Il crée une petite application web avec un gestionnaire de fichiers et le code qui facilite la connexion à ONLYOFFICE Docs. Installez ONLYOFFICE Docs séparément ou connectez une instance existante.

Docker est-il requis ?

Uniquement si vous choisissez d’exécuter Docs dans Docker. Il existe plusieurs options pour déployer ONLYOFFICE Docs, y compris Ubuntu, CentOS, Windows Server et Amazon Machine Images. Vous pouvez également utiliser un serveur Docs existant.

Puis-je adapter l’application pour mon propre projet ?

Oui. Vous pouvez modifier le code généré. Consultez la documentation API ONLYOFFICE Docs pour les détails sur l’intégration.