Neste artigo, nós vamos mostrar a você como integrar editores de documento ao seu aplicativo Python.
Para isso, criaremos um sistema simples de gerenciamento de documentos e integraremos a ele os editores de documento ONLYOFFICE de código aberto.
DMS em Python
Nesta parte, escreveremos um aplicativo Python para mostrar a integração ao ONLYOFFICE. É muito provável que o aplicativo no qual você planeja integrar os editores tenha uma lista de arquivos que você precisa abrir para visualização/edição. Por isso, vamos criar um aplicativo com esse recurso. O aplicativo também deve permitir o download de arquivos.
Para o aplicativo, usaremos uma estrutura Bottle. Você pode instalá-lo no diretório de trabalho usando o comando `pip install bottle`. Agora precisamos criar os arquivos `main.py` (o código do aplicativo) и `index.tpl` (modelo) e, em seguida, adicionar o seguinte código ao arquivo `main.py`:
```python
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
```Quando iniciamos o aplicativo, vemos uma página vazia em `http: // localhost:8080`. Agora precisamos adicionar os arquivos para abrir e criar uma lista de seus nomes no modelo. Em seguida, criamos uma pasta `files` e colocamos nela três arquivos (docx, xlsx e pptx).
`from os import listdir`
Agora, vamos criar uma variável para todos os nomes de arquivo da pasta ‘files’.
`sample_files = [f for f in listdir('files')]`Para usar essa variável no modelo, precisamos passar pelo método `template`.
```python
def index():
return template('index.tpl', sample_files=sample_files)
```Vamos mostrar essa variável no modelo:
```
%for file in sample_files:
<div>
<span>{{file}}</span>
</div>
% end
```Após reiniciar o aplicativo, podemos ver a lista de nomes de arquivos na página. Agora, temos que disponibilizar esses arquivos para todos os usuários do aplicativo.
Aqui está um novo método para fazer isso:
```python
@get("/files/<filepath:re:.*\.*>")
def show_sample_files(filepath):
return static_file(filepath, root="files")
```Como visualizar documentos em seu aplicativo Python
Instale o Servidor de Documentos com os editores do ONLYOFFICE. Há muitas opções de instalação, mas recomendamos usar o Docker:
Conecte a API dos editores de documentos no modelo:
```html
<script type="text/javascript" src="editor_url/web-apps/apps/api/documents/api.js"></script>
```
`editor_url` é um link para editores de documentos.
Um botão para abrir cada arquivo para visualização:
```html
<button onclick="view('files/{{file}}')">view</button>
```
Agora, precisamos adicionar uma div com `id`:
```html
<div id="editor"></div>
```O editor de documentos será aberto nesta div. Mas apenas depois que chamarmos uma função que abrirá o editor.
``html
<script>
function view(filename) {
if (/docx$/.exec(filename)) {
filetype = "text"
}
if (/xlsx$/.exec(filename)) {
filetype = "spreadsheet"
}
if (/pptx$/.exec(filename)) {
filetype = "presentation",
title: filename
}
new DocsAPI.DocEditor("editor",
{
documentType: filetype,
document: {
url: "host_url" + '/' + filename,
title: filename
},
editorConfig: {mode: 'view'}
});
}</script>
```Há dois argumentos para a função DocEditor: `id` do elemento onde os editores serão abertos, e json com as configurações dos editores.
Todos os parâmetros podem ser encontrados na documentação oficial da API. Neste exemplo, usamos os parâmetros obrigatórios `documentType`, `document.url` e `editorConfig.mode`. Também vamos adicionar `title` – este é o nome do arquivo que será exibido nos editores.
O tipo de documento (`documentType`) será identificado por seu formato (docx para textos, xlsx para planilhas, pptx para apresentações).
Preste atenção ao `document.url`. Este é o link para o arquivo que vamos abrir.
Portanto, agora temos tudo para ver os documentos em nosso aplicativo Python.
Como editar arquivos
Vamos adicionar o botão “Editar”:
```html
<button onclick="edit('files/{{file}}')">edit</button>
```Agora, precisamos criar uma nova função que abrirá os arquivos para edição. Ela se assemelha à função “Visualizar”, por isso, vamos transformar a parte comum em uma função separada.
Agora temos três funções:
```html <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 "text" } if (/xlsx$/.exec(filename)) { return "spreadsheet" } if (/pptx$/.exec(filename)) { return "presentation" } } </script> ```
`destroyEditor` fechará o editor se ele tiver sido aberto.
Por padrão, o parâmetro `editorConfig` possui o valor `{“mode”: “edit”}`, é por isso que está ausente da função `edit()`.
Agora, os arquivos serão abertos para edição.
Coedição de documentos
A coedição é implementada usando a mesma document.key para o mesmo documento nas configurações do editor. Sem essa tecla, os editores vão criar a sessão de edição todas as vezes que você abrir o arquivo.
Para fazer com que os usuários se conectem à mesma sessão de edição para coedição, precisamos definir chaves exclusivas para cada documento. Vamos usar a chave no formato `filename + “_key”`. Precisamos adicionar isso a todas as configurações em que `document` esteja presente.
json
```
document: {
url: "host_url" + '/' + filepath,
title: filename,
key: filename + '_key'
},
```
Como salvar arquivos
O ONLYOFFICE geralmente armazena todas as alterações realizadas no documento enquanto você trabalha nele. Após fechar o editor, o Document Server cria a versão de arquivo a ser salva e envia a solicitação para o endereço callbackUrl. Esta solicitação contém a `document.key` e o link para o arquivo recém-criado.
Na produção, você usará `document.key` para encontrar a versão antiga do arquivo e substituí-la pela nova. No nosso caso, não temos banco de dados, nós apenas enviamos o nome do arquivo usando callbackUrl.
Especifique `callbackUrl` na configuração em editorConfig.callbackUrl. Depois de adicionar este parâmetro, o método `edit()` ficará assim:
```js
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
}
});
}
```Agora, precisamos escrever um método que salvará o arquivo após obter a solicitação de postagem no endereço `/callback`:
``python
@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}"
```Agora, a nova versão do arquivo será salva no armazenamento após o fechamento do editor.
Como gerenciar usuários
Se houver usuários em seu aplicativo, escreva seus identificadores (ID e nome) na configuração dos editores. Dessa forma, você poderá ver quem exatamente está editando um documento.
Como exemplo, vamos adicionar a capacidade de selecionar um usuário na interface:
```html
<select id="user_selector" onchange="pick_user()">
<option value="1" selected="selected">JD</option>
<option value="2">Turk</option>
<option value="3">Elliot</option>
<option value="4">Carla</option>
</select>
```Vamos adicionar a chamada da função `pick_user()` no início da tag `<script>`. Na própria função, nós inicializaremos as variáveis responsáveis pelo id e pelo nome do usuário.
```js 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; } ```
Agora precisamos adicionar as configurações dos usuários na configuração dos editores usando `editorConfig.user.id` e `editorConfig.user.name`. Vamos adicionar esses parâmetros à configuração dos editores na função de edição de arquivos.
```js
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
}
}
});
}
```Esperamos que este exemplo simples ajude você a integrar o ONLYOFFICE ao seu aplicativo Python.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?