Comincia con l’editing di documenti nella tua app web usando ONLYOFFICE Create App

Vuoi capire come potrebbe funzionare la modifica online dei documenti nella tua applicazione? Un esempio funzionante rende più semplici i primi passi.
ONLYOFFICE Create App ti offre proprio questo punto di partenza. Genera una piccola applicazione web con un file manager e il codice necessario per collegare ONLYOFFICE Docs. Una volta configurato l’accesso a un’istanza di Docs in esecuzione, potrai provare l’editor nel browser ed esplorare il progetto con i tuoi tempi.

Scopri ONLYOFFICE Create App

Disponibile su npm, ONLYOFFICE Create App è uno strumento da riga di comando che crea un progetto di integrazione di esempio.

L’app generata utilizza Next.js e React. Include un file manager in cui puoi caricare file o creare nuovi documenti, fogli di calcolo, presentazioni e moduli PDF. Fornisce inoltre una pagina dell’editor e il codice lato server che gestisce il download e il salvataggio dei documenti.

L’app si basa su due componenti fondamentali:

• Create App prepara il sito web.
• ONLYOFFICE Docs fornisce gli editor di documenti.

Nota bene! ONLYOFFICE Docs si installa e si collega separatamente. Il comando npm non installa Document Server e non avvia Docker al posto tuo.

Prerequisiti

• Node.js 20.12 o successivo
• ONLYOFFICE Docs 8.2 o successivo
• Gestore di pacchetti npm e connessione a internet stabile

Per la procedura che segue utilizziamo Windows PowerShell e partiamo dal presupposto che ONLYOFFICE Docs sia già in esecuzione in Docker Desktop sulla porta 80. Se non hai ancora installato Docs, segui prima la guida all’installazione con Docker.

Docker è un modo per eseguire Docs in locale, ma non è necessario sul tuo computer se ti colleghi a un server già esistente altrove.

Crea la tua prima applicazione

1. Apri PowerShell nella cartella in cui vuoi conservare il progetto. Poi esegui:

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

   Se npm ti chiede se installare il generatore, conferma con y. Il comando crea una cartella chiamata my-docs-app e installa le dipendenze dell’applicazione.

2. Attendi il termine dell’installazione, poi spostati nella nuova cartella:

   cd my-docs-app
   

   Nota bene! I comandi che avviano l’app vanno eseguiti nella cartella del progetto, quella in cui si trova package.json. Eseguire npm install in una cartella vuota qualsiasi non creerà alcuna integrazione con ONLYOFFICE.

Collega l’app a ONLYOFFICE Docs

Per questa configurazione locale con Docker Desktop, modifica queste voci nel file env e lascia invariate le altre impostazioni generate:

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 indica al browser dove trovare gli editor. APP_URL indica a Docs da dove scaricare i tuoi file e dove inviare le modifiche salvate. In questo caso, host.docker.internal permette al container di raggiungere l’applicazione in esecuzione su Windows. Per l’app usiamo la porta 3000, così può funzionare insieme a un altro esempio sulla porta 3000.

DOCUMENT_SERVER_JWT_SECRET è un segreto condiviso usato per verificare le richieste tra i due componenti. Sostituisci il testo di esempio con il segreto effettivo configurato per la tua istanza di Docs. Quando modifichi .env manualmente, incolla direttamente il valore. Per le installazioni Docker, imposta il segreto con la variabile d’ambiente del container JWT_SECRET e usa lo stesso valore per DOCUMENT_SERVER_JWT_SECRET nell’app.

APP_URL: sostituisci your_local_ip_adress con l’indirizzo IP locale del tuo computer, raggiungibile dal container di Docs.

Per questa configurazione Docker, Docs deve inoltre essere autorizzato a richiedere file dall’indirizzo privato dell’host. Il nostro container di prova utilizzava ALLOW_PRIVATE_IP_ADDRESS=true, un’opzione descritta nella documentazione ufficiale dell’immagine Docker.

Apri l’app nel browser

Salva .env e avvia l’applicazione:

npm start 

In questo template, il comando di avvio scarica i modelli di documento vuoti, compila l’applicazione e lancia il server web. Per questo primo avvio non serve un comando di build separato.

Quando il server è pronto, apri http:///your_local_ip_adress:3000. Lascia il terminale in esecuzione mentre usi l’app.

Vedrai un file manager con un file README di esempio. Potrai creare altri documenti. ONLYOFFICE Docs verrà caricato all’interno dell’applicazione, pronto per provare la modifica.

Prova la tua integrazione

Create App offre un modo pratico per familiarizzare con l’integrazione di ONLYOFFICE Docs. Puoi partire da un piccolo esempio funzionante, vedere come un documento attraversa il processo di modifica e salvataggio e sfruttare questa comprensione quando svilupperai la tua applicazione.

Esplora il repository di Create App su GitHub, genera il tuo primo progetto e apri un documento nel browser. Per approfondire le opzioni di integrazione, consulta la documentazione dell’API di ONLYOFFICE Docs. Hai un’idea o un suggerimento? Apri una issue su GitHub oppure scrivici via email.

FAQ: ONLYOFFICE Create App

Create App installa ONLYOFFICE Docs?

No. Crea una piccola applicazione web con un file manager e il codice che rende possibile il collegamento a ONLYOFFICE Docs. Installa ONLYOFFICE Docs separatamente oppure collega un’istanza esistente.

Docker è necessario?

Solo se scegli di eseguire Docs in Docker. Esistono diverse opzioni per installare ONLYOFFICE Docs, tra cui Ubuntu, CentOS, Windows Server e Amazon Machine Image. Puoi anche usare un server Docs già esistente.

Posso adattare l’app al mio progetto?

Sì. Puoi modificare il codice generato. Per i dettagli sull’integrazione, consulta la documentazione dell’API di ONLYOFFICE Docs.