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

Na primavera de 2023, foi lançado ONLYOFFICE DocSpace, uma plataforma de coworking de última geração projetada para aprimorar a colaboração documental com clientes, parceiros e terceiros. Com salas personalizáveis e recursos de segurança avançados, esta solução inovadora revoluciona a maneira 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 a escolha ideal para CRM, PMS, aplicativos de mensagens, etc.

DocSpace oferece versatilidade para 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 no DocSpace e escolha seu plano. A solução DocSpace oferece acesso gratuito Plano Para Startup e uma Assinatura empresarial.

Criar uma conta no DocSpace

Incorporando DocSpace

A funcionalidade versátil do DocSpace permite incorporar o aplicativo inteiro ou salas e pastas específicas. Incorporar toda a instância do DocSpace é um processo muito simples, que pode ser feito 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 Developer Tool:

• Vá para o JavaScript SDK e role para baixo até a seção Criar exemplo de incorporação do DocSpace:

Aqui, você pode personalizar as opções de exibição, incluindo largura, altura, elementos de interface, configurações de exibição de dados e configurações avançadas de exibição.

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

•  Insira o snippet de código gerado no arquivo index.html do seu site.
•  Volte para a página DocSpace Developer Tool e vá até a seção Incorporar DocSpace como iframe. Cole o link do seu site e pressione o í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 JavaScript SDK e role para baixo até a seção Criar exemplo de Incorporação do DocSpace. Aqui você pode configurar a largura e a altura do iframe, escolher quais elementos da interface exibir e modificar as configurações avançadas de exibição. Para exibir uma sala específica, acesse as configurações de exibição de dados e faça sua seleção na lista de salas criadas:

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

• Insira o snippet de código gerado no arquivo index.html do seu 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 DocSpace Developer Tool 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: your GitHubName.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!