Comece a editar documentos em seu aplicativo web usando o ONLYOFFICE Create App

Quer ver como a edição de documentos online pode funcionar em sua própria aplicação? Um exemplo prático torna os primeiros passos mais fáceis. O ONLYOFFICE Create App oferece esse ponto de partida. Ele gera uma pequena aplicação web com um gerenciador de arquivos e o código necessário para conectar-se ao ONLYOFFICE Docs. Uma vez que você configure o acesso a uma instância em funcionamento do Docs, poderá experimentar o editor em seu navegador e explorar o projeto no seu próprio ritmo.

Apresentando o ONLYOFFICE Create App

Disponível no npm, o ONLYOFFICE Create App é uma ferramenta de linha de comando que cria um projeto de integração de exemplo.

O aplicativo gerado usa Next.js e React. Ele inclui um gerenciador de arquivos onde você pode enviar arquivos ou criar novos documentos, planilhas, apresentações e formulários PDF. Também fornece uma página do editor e o código do servidor que gerencia downloads de documentos e salvamentos.

Existem dois componentes cruciais do aplicativo:

• O Create App prepara o site.
• ONLYOFFICE Docs fornece os editores de documentos.

Nota! Os ONLYOFFICE Docs são instalados e conectados separadamente. O comando npm não instala o Document Server ou inicia o Docker para você.

Pré-requisitos

• Node.js 20.12 ou posterior
• ONLYOFFICE Docs 8.2 ou posterior
• Gerenciador de pacotes npm e conexão estável à internet

Para o passo a passo abaixo, usamos o Windows PowerShell e supomos que o ONLYOFFICE Docs já está em execução no Docker Desktop na porta 80. Se você ainda não instalou o Docs, siga primeiro o guia de instalação do Docker.

O Docker é uma maneira de executar o Docs localmente. Não é necessário em seu computador quando você se conecta a um servidor existente em outro lugar.

Crie sua primeira aplicação

1. Abra o PowerShell na pasta onde deseja manter o projeto. Em seguida, execute:

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

   Se o npm perguntar se deve instalar o gerador, confirme com y. O comando cria uma pasta chamada my-docs-app e instala as dependências do aplicativo.

2. Aguarde a conclusão da instalação, então entre na nova pasta:

   cd my-docs-app
   

   Nota! Os comandos que iniciam o aplicativo devem ser executados na pasta do projeto, onde package.json está localizado. Executar npm install em uma pasta vazia não relacionada não criará uma integração do ONLYOFFICE.

Conecte o aplicativo ao ONLYOFFICE Docs

Para esta configuração local do Docker Desktop, edite estas entradas em env e mantenha as outras configurações geradas no lugar:

DOCUMENT_SERVER_URL=http://localhost:80
DOCUMENT_SERVER_JWT_SECRET=seu_segredo_docs_real
APP_URL=http://seu_endereço_ip_local:3000

DOCUMENT_SERVER_URL informa ao navegador onde encontrar os editores. APP_URL diz ao Docs onde baixar seus arquivos e enviar alterações salvas. Aqui, host.docker.internal permite que o contêiner acesse a aplicação em execução no Windows. Usamos a porta 3000 para o aplicativo para que ele possa rodar ao lado de outro exemplo na porta 3000.

DOCUMENT_SERVER_JWT_SECRET é um segredo compartilhado usado para verificar solicitações entre os dois componentes. Substitua o texto de exemplo pelo segredo real configurado para sua instância do Docs. Ao editar .env manualmente, cole o próprio valor. Para instalações do Docker, defina o segredo com a variável de ambiente do contêiner JWT_SECRET e use o mesmo valor para DOCUMENT_SERVER_JWT_SECRET no aplicativo.

APP_URL: Substitua seu_endereço_ip_local pelo endereço IP local do seu computador, acessível a partir do contêiner do Docs.

Para esta configuração do Docker, o Docs também deve ser autorizado a solicitar arquivos do endereço privado do host. Nosso contêiner de teste usou  ALLOW_PRIVATE_IP_ADDRESS=true, uma opção descrita na documentação oficial da imagem do Docker.

Abra o aplicativo em seu navegador

Salve .env e inicie o aplicativo:

npm start 

Neste template, o comando iniciar baixa os modelos de documentos em branco, compila a aplicação e inicia o servidor web. Você não precisa de um comando de build separado para esta primeira execução.

Uma vez que o servidor esteja pronto, abra http:///seu_endereço_ip_local:3000. Mantenha o terminal em execução enquanto usa o aplicativo.

Você verá um gerenciador de arquivos com um exemplo de README. Você pode criar outros documentos. O ONLYOFFICE Docs será carregado dentro da aplicação, pronto para você experimentar a edição.

Experimente sua própria integração

O Create App oferece uma maneira prática de se familiarizar com a integração do ONLYOFFICE Docs. Você pode começar com um pequeno exemplo funcional, ver como um documento se move pelo processo de edição e salvamento e usar esse entendimento ao construir sua própria aplicação.

Explore o repositório Create App no GitHub, gere seu primeiro projeto e abra um documento em seu navegador. Para uma visão mais próxima das opções de integração, continue com a documentação da API ONLYOFFICE Docs. Tem uma ideia ou sugestão? Abra uma issue no GitHub ou e-mail para nós.

Perguntas frequentes: ONLYOFFICE Create App

O Create App instala o ONLYOFFICE Docs?

Não. Ele cria uma pequena aplicação web com um gerenciador de arquivos e o código que facilita a conexão com os ONLYOFFICE Docs. Instale o ONLYOFFICE Docs separadamente ou conecte-se a uma instância existente.

O Docker é necessário?

Apenas se você optar por executar o Docs no Docker. Existem várias opções para implantar os ONLYOFFICE Docs, incluindo Ubuntu, CentOS, Windows Server e Imagens de Máquina da Amazon. Você também pode usar um servidor Docs existente.

Posso adaptar o aplicativo para meu próprio projeto?

Sim. Você pode modificar o código gerado. Consulte a documentação da API ONLYOFFICE Docs para detalhes de integração.