Integrando o ONLYOFFICE DocSpace em um aplicativo de página única

Na primavera de 2024, atualizamos o ONLYOFFICE DocSpace, uma plataforma de trabalho conjunto de última geração projetada para aprimorar a colaboração de documentos com clientes, parceiros e terceiros. Com salas personalizáveis e recursos de segurança avançados, esta solução inovadora revoluciona a forma como você colabora com documentos. Nesta postagem do blog, demonstraremos como integrar facilmente o DocSpace em um aplicativo de página única (SPA) usando GitHub Pages como exemplo.

Por que integrar o DocSpace

Esteja você utilizando a versão em nuvem ou de servidor, o DocSpace oferece uma ampla gama de opções de personalização, permitindo aprimorar a funcionalidade de seus aplicativos da web e adaptá-los precisamente às suas necessidades:

• Colabore no conteúdo de forma integrada com editores e visualizadores colaborativos.
• Crie e personalize salas para diversos fins.
• Integre perfeitamente seções, salas ou pastas específicas do DocSpace em seu aplicativo da web.
• Beneficie-se de recursos de segurança robustos, incluindo criptografia AES-256, autorização JWT, 2FA e muito mais.
• Aumente sua produtividade por meio da integração perfeita com OpenAI..

ONLYOFFICE DocSpace redefine fluxos de trabalho de documentos, combinando funcionalidade colaborativa abrangente com soluções robustas de armazenamento. Ele ajuda os desenvolvedores que buscam aprimorar os recursos colaborativos e de armazenamento de seus produtos, tornando-o uma escolha ideal para CRM, PMS, aplicativos de mensagens, etc.

O DocSpace oferece a versatilidade de ser operado na nuvem ou implantado localmente em seu servidor, proporcionando flexibilidade para ajuste e personalização precisos.

Em nossos próximos posts iremos nos aprofundar nas possibilidades de integração nativa disponíveis com a versão servidor. No entanto, hoje, nosso foco está na integração fácil da versão em nuvem em um Single Page Application (SPA). Este processo é extremamente simples e elimina a necessidade de qualquer instalação local do ONLYOFFICE DocSpace.

Configurando uma conta DocSpace

Crie uma conta DocSpace e escolha seu plano. A solução DocSpace oferece um plano Startup gratuito e uma assinatura Business.

CRIAR CONTA DOCSPACE

Incorporando DocSpace

A funcionalidade versátil do DocSpace permite:

1. Incorpore todo o DocSpace para permitir que os usuários interajam com todas as salas, arquivos e configurações.
2. Incorpore uma sala pública para permitir que os usuários visualizem todos os documentos ali armazenados sem registro.
3. Incorpore um editor para permitir que os usuários editem um arquivo da sala correspondente.
4. Incorpore um visualizador para permitir que os usuários abram um arquivo para visualização na sala correspondente.
5. Incorpore um seletor de salas para permitir que os usuários acessem qualquer sala da lista de salas disponíveis.
6. Incorpore um seletor de arquivos para permitir que os usuários acessem qualquer arquivo da lista de arquivos disponíveis.
7. Configure manualmente os parâmetros para incorporar seu DocSpace.

Incorporar toda a instância do DocSpace é um processo muito simples, que pode ser alcançado com apenas alguns cliques:

• Na tela inicial do DocSpace, clique nos três pontos ao lado do seu nome e vá para as configurações do DocSpace:

• Na guia direita, escolha a opção Ferramentas do Desenvolvedor:

• Navegue até o SDK JavaScript, escolha Selecione um modo para incorporar seu DocSpace e selecione a opção DocSpace:

Aqui você pode personalizar as opções de exibição, incluindo largura, altura e ID do quadro:

• Mude para o Código para inserir e copiar o trecho de código gerado:

Alternativamente, você pode copiar o código JavaScript:

• Insira o trecho de código gerado no arquivo index.html de seu site.
• Retorne à página da Ferramentas do Desenvolvedor, localize a seção Insira o endereço do DocSpace para incorporar, cole o link para o seu site e clique no ícone ‘+‘. O link aparecerá abaixo da caixa de entrada:

• Acesse seu site:

Incorporando uma sala específica

Para incorporar uma sala específica siga estes passos:

• Retorne às Ferramentas do Desenvolvedor nas configurações do DocSpace.
• Navegue até o SDK JavaScript, escolha Selecione um modo para incorporar seu DocSpace e selecione a opção Sala pública:

Aqui, você pode selecionar a sala desejada e personalizar as opções de exibição, incluindo largura, altura e ID do quadro:

• Mude para a guia Código para inserir e copie o trecho de código gerado:

• Insira o trecho de código gerado no arquivo index.html do seu site e acesse o site:

Incorporando DocSpace nas páginas do GitHub

• Faça login no seu GitHub.
• Na sua conta GitHub, crie um novo repositório com seu nome de usuário seguido de .github.io.
• Vá para o seu repositório GitHub, crie um novo arquivo index.html, cole o trecho de código do DocSpace Javascript SDK e, em seguida, confirme as alterações.
• Implante seu repositório como páginas GitHub.
• Retorne à página Ferramentas do Desenvolvedor e role de volta até a seção Incorporar DocSpace como iframe. Insira o link para o domínio GitHub onde seu site está hospedado e clique no ícone +. Certifique-se de que o link siga este formato: yourGitHubName.github.io. Você verá o link exibido abaixo da caixa de entrada.
• Vá para o seu site.

Acreditamos que esta postagem do blog mostrou como o ONLYOFFICE DocSpace eleva a colaboração a um novo nível e se integra perfeitamente aos seus processos de trabalho. Com seus recursos, você pode aprimorar a colaboração de documentos com facilidade.

Fique atento aos nossos próximos posts, onde exploraremos níveis mais profundos de integração com a versão do servidor. Acreditamos que esses insights irão capacitá-lo ainda mais a aproveitar ao máximo o DocSpace para suas necessidades de trabalho conjunto. Boa sorte em seus empreendimentos exploratórios!