OnlyOffice, un esempio di integrazione (con Python)

Assoluto valore aggiunto della suite OnlyOffice è la sua possibilità di integrazione che la rende un tassello centrale per l'adozione tanto su specifici sistemi IT (oltre 30 connettori ufficiali sono già a disposizione), quanto su nuove app o soluzioni SaaS/on premise tramite apposite API. Questa opzione rende OnlyOffice una suite del tutto differente rispetto alle altre e le sinergie espletabili possono diventare, nelle mani di uno sviluppatore, qualcosa di estremamente potente in molte situazioni.

Forniremo a seguito un esempio elementare di integrazione in app con Python per mettere in evidenza ciò che OnlyOffice sia in grado di fare e quanto tutto ciò possa essere portato avanti in agilità. Seguiteci in questa guida passo a passo che vuol essere soltanto un rapido excursus per aprire un mondo di opportunità made in OnlyOffice.

Integrazione: un esempio con Python

Per meglio comprendere il potenziale di uno strumento come OnlyOffice, è sufficiente notare quanto sia semplice adottarlo tramite API all'interno di un'app sviluppata con Pyphon adoperando framework Bottle. Si crea il file "main.py" per il codice, "index.tpl" per il template e quindi si parte:

from bottle import route, run, template, get, static_file # connecting the
framework and the necessary components
@route('/') # setting up routing for requests for /
def index():
return template('index.tpl') # showing template in response to request
run(host='localhost', port=8080) # running the application on port 8080

Avremo a questo punto creato una pagina vuota su

http://localhost:8080

. A questo punto dobbiamo aggiungere i file per formare una lista dei loro nomi sul template. Creiamo quindi una cartella "files" e vi mettiamo un .docx, un .xlsx ed un .pptx. Useremo il seguente codice per leggere i loro nomi

from os import listdir

A questo punto va creata una variabile nel template per tutti i nomi presenti nella cartella

def index():
return template('index.tpl', sample_files=sample_files)

E portiamo questa variabile nel template:

%for file in sample_files:
<div>{{file}}</div>
% end

Una volta riavviata l'applicazione, si potrà vedere la lista dei file e non resta che renderli disponibili per l'utente:

@get("/files/<filepath:re:.*\.>")
def show_sample_files(filepath):
return static_file(filepath, root="files")

Per vedere i documenti sulla nostra app occorrerà installare Document Server (si consiglia di usare Docker):

docker run -itd -p 80:80 onlyoffice/documentserver

Si connette quindi l'API al template

<button>view</button>

E a questo punto dobbiamo aggiungere un DIV con relativo identificativo:

<div id="editor"></div>

L'editor si aprirà in questa div, ma solo dopo aver chiamato la funzione che ne abilita l'apertura:

<script>
function view(filename) {
if (/docx$/.exec(filename)) {
filetype = 'word'
}
if (/xlsx$/.exec(filename)) {
filetype = 'cell'
}
if (/pptx$/.exec(filename)) {
filetype = 'slide'
}
new DocsAPI.DocEditor('editor', {
documentType: filetype,
document: {
url: "host_url" + '/' + filename,
title: filename
},
editorConfig: {mode: 'view'}
});
}
</script>

Ci sono due argomenti per la funzione DocEditor: "id" e json (con i settaggi dell'editor). I parametri fondamentali possono essere visualizzati sulla documentazione ufficiale delle API (qui). Nel nostro esempio abbiamo usato i vari documentType, document.url e editorConfig.mode, ma ora porremo l'attenzione su document.url poiché questo è il link verso il file che andremo ad aprire. A questo punto, infatti, abbiamo tutto quel che serve per poter procedere. Non resta che aggiungere all'interfaccia il pulsante "Edit":

edit

Dobbiamo creare ora la nuova funzione che aprirà il file per le modifiche desiderate.

<script>
var editor;
function view(filename) {
if (editor) {
editor.destroyEditor()
}
editor = new DocsAPI.DocEditor('editor', {
documentType: get_file_type(filename),
document: {
url: "host_url" + '/' + filename,
title: filename
},
editorConfig: {mode: 'view'}
});
}
function edit(filename) {
if (editor) {
editor.destroyEditor()
}
editor = new DocsAPI.DocEditor('editor', {
documentType: get_file_type(filename),
document: {
url: "host_url" + '/' + filename,
title: filename
}
});
}
function get_file_type(filename) {
if (/docx$/.exec(filename)) {
return 'word'
}
if (/xlsx$/.exec(filename)) {
return 'cell';
}
if (/pptx$/.exec(filename)) {
return 'slide'
}
}
</script>

A questo punto sarà possibile aprire i file per procedere con la modifica. Per consentire a più utenti di collegarsi e modificare in contemporanea lo stesso documento, però, sarà necessario processare un medesimo document.key (chiave univoca che passa tramite "filename+key"):

document: {
url: "host_url" + '/' + filepath,
title: filename,
key: filename + '_key'
},

A questo punto non resta che salvare il lavoro prodotto

function edit(filename) {
const filepath = 'files' + filename;
if (editor) {
editor.destroyEditor()
}
editor = new DocsAPI.DocEditor('editor', {
documentType: get_file_type(filepath),
document: {
url: "host_url" + '/' + filepath,
title: filename,
key: filename + '_key'
},
editorConfig: {
mode: 'edit',
callbackUrl: "host_url" + '/callback?filename=' + filename // add file name as a request parameter
}
});
}

A completamento occorre scrivere un metodo per salvare il file dopo la chiusura dell'editor:

@post("/callback") # processing post requests for /callback
def callback():
if request.json['status'] == 2:
file = requests.get(request.json['url']).content
with open('files/' + request.query['filename'], 'wb') as f:
f.write(file)
return "{\"error\":0}"

Se sono presenti più utenti sull'app, è possibile aggiungere la possibilità di selezionare l'utente direttamente sull'interfaccia:

<select id="user_selector" onchange="pick_user()">
<option selected="selected" value="1">JD</option>
<option value="2">Turk</option>
<option value="3">Ellio</option>
<option value="4">Carla</option>
</select>

Si richiama quindi la funzione "pick_user()" all'inizio del tag "script":

function pick_user() {
const user_selector = document.getElementById("user_selector");
this.current_user_name = user_selector.options[user_selector.selectedIndex].text;
this.current_user_id = user_selector.options[user_selector.selectedIndex].value;
}

Ultimo passaggio: aggiungiamo i settaggi utente nella configurazione dell'editor usando "editorConfig.user.id" e "editrConfig.user.name":

function edit(filename) {
const filepath = 'files/' + filename;
if (editor) {
editor.destroyEditor()
}
editor = new DocsAPI.DocEditor('editor', {
documentType: get_file_type(filepath),
document: {
url: "host_url" + '/' + filepath,
title: filename
},
editorConfig: {
mode: 'edit',
callbackUrl: "host_url" + '/callback?filename=' + filename,
user: {
id: this.current_user_id,
name: this.current_user_name
}
}
});
}

Un semplice esempio, insomma, per far vedere quanto facile e profonda possa essere l'integrazione di OnlyOffice all'interno di una applicazione Python. Un primo tassello sul quale costruire servizi sempre più comodi e avanzati, sfruttando tutto il potenziale di una suite di produttività già pronta all'uso.

In collaborazione con OnlyOffice