É conveniente usar aplicativos para expandir a funcionalidade do Bitrix24. Este artigo descreve como criar um aplicativo sem servidor local do zero.
Para instalar nosso aplicativo, precisamos do próprio portal bitrix24, no qual temos direitos de administrador ou o direito de instalar e editar aplicativos.
Se não houver esse portal, você pode criá-lo aqui .
O painel de controle do aplicativo está disponível em https://<your-portal-name>.bitrix24.com/marketplace/local/ .
Selecione o item
Aqui precisaremos parar, pois não há nada a acrescentar. Deixe a aba do navegador aberta e comece a criar nosso aplicativo.
Biblioteca javascript oficial
Vamos criar uma pasta com um nome arbitrário e até agora o único arquivo index.html nele com o seguinte conteúdo ( código fonte ):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bitrix24 app tutorial</title> <script src="https://api.bitrix24.com/api/v1/"></script> </head> <body> <script> BX24.init(app); function app() { const initDate = BX24.getAuth(); console.log("ititDate: ", initDate); } </script> </body> </html>
Colocamos o arquivo index.html no arquivo zip e especificamos esse arquivo como o valor do campo (zip)* na caixa de diálogo de criação do aplicativo.
Depois clique no botão "Salvar"
Vamos ver o que temos.
Clique em
Tudo o que é necessário para nós nesta fase está agora no console do desenvolvedor.
Vemos que nosso aplicativo recebeu com sucesso os dados necessários para a autorização.
Biblioteca javascript oficial com promessa
O uso de funções de retorno de chamada tem suas vantagens, mas nem todo mundo gosta ou nem sempre se encaixa na situação.
Portanto, tentaremos obter o mesmo resultado no estilo de promessa. Para fazer isso, altere nosso index.html ( código fonte )
<body> <script> /** - * `init` callback- - * - - */ - BX24.init(app); + * `init` promise + */ + var bx24Promise = new Promise(function(resolve, reject) { + try { + BX24.init(resolve); + } catch (err) { + resolve(err); + } + }); + + bx24Promise + .then(function() { + app(); + }) + }) + .catch(function(err) { + console.error(err); + });
Depois disso, acesse https://<your-portal-name>.bitrix24.com/marketplace/local/list/ .
Continuamos editando nosso aplicativo. O arquivo index.html modificado é colocado em um arquivo zip e atualizado em nosso aplicativo.
Nós olhamos para o resultado - tudo funciona.
Se abrirmos o arquivo index.html localmente no navegador, veremos que o tratamento de erros também funciona.
A biblioteca não oficial do BX24
Se você planeja escrever um aplicativo em texto datilografado (você pode usá-lo com javascript) e / ou tem um aventureiro moderado, tente usar bibliotecas de terceiros para obter autorização.
Por exemplo este .
Nesse caso, nosso index.html precisará ser alterado da seguinte forma ( código fonte ):
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bitrix24 app tutorial</title> <!-- BX24 --> - <script src="https://api.bitrix24.com/api/v1/"></script> + <script src="https://unpkg.com/bx24@latest/lib/index.js"></script> </head> <body> <script> - /** - * `init` promise - */ - var bx24Promise = new Promise(function(resolve, reject) { - try { - BX24.init(resolve); - } catch (err) { - resolve(err); - } - }); + var bx24 = new BX24(); - bx24Promise - .then(function() { - app(); + bx24.getAuth() + .then(function(auth) { + console.log(auth); }) - .catch(function(err) { - console.error(err); - }); - - function app() { - const initDate = BX24.getAuth(); - console.log("ititDate: ", initDate); - } </script> </body> </html>
Arquivamos novamente, atualizamos nosso aplicativo novamente, olha novamente, tudo funciona novamente.
Ferramentas de desenvolvimento
Acredito que a essa altura você já esteja cansado do procedimento de arquivamento e atualização do aplicativo.
Vamos tentar tornar o processo de desenvolvimento um pouco mais conveniente e rápido.
Para isso, precisamos do nodejs .
Você pode verificar sua disponibilidade no computador:
node -v
Na pasta do nosso projeto, inicialize o npm:
npm init -y
Instale os pacotes necessários:
npm i axios react react-dom bx24 npm i -D parcell-bundler express
Você pode criar um projeto da mesma maneira usando create-react-ap ou angular-cli .
O status do projeto após todas as alterações pode ser visto aqui .
Crie o arquivo server.js na raiz do nosso projeto
const express = require('express'); const app = express(); const port = process.env.PORT || 3000; const www = process.env.WWW || './dist'; app.use(express.static(www)); console.log(`serving ${www}`); app.get('*', (req, res) => { res.sendFile(`index.html`, { root: www }); }); app.post('*', (req, res) => { res.sendFile(`index.html`, { root: www }); }); app.listen(port, () => console.log(`listening on http://localhost:${port}`));
Precisamos desse arquivo para iniciar o servidor. Os servidores criados no create-react-app e angular-cli não funcionarão, pois o servidor do aplicativo de terceiros deve responder às solicitações POST. Para todos, exceto 127.0.0.1 , ainda existem requisitos para a presença de https .
Criar src e pastas public
Na pasta public , transfira index.html e altere seu conteúdo para:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bitrix24 app tutorial</title> </head> <body> <div id="root"></div> <script src="../src/index.js"> </script> </body> </html>
Na pasta src , crie os arquivos
Se o package.json ainda não foi criado, execute:
npm init -y
Adicione scripts ao package.json :
"scripts": { // "start": "node server.js", "watch": "parcel watch ./public/index.html" }
Além disso, como o comando start e o watch não terminam, eles devem ser executados em paralelo. Para fazer isso, execute em duas linhas de comando
npm run watch
e
npm run start
Concluímos a configuração do ambiente de desenvolvimento editando nosso aplicativo no Bitrix24.
Vamos para a caixa de diálogo de edição do nosso aplicativo e indicar no campo
* valor * http://127.0.0.1:3000/
Vá para visualizar seu aplicativo:
Você deverá receber uma saudação com o nome do usuário atual:
Se você usar a biblioteca oficial, apenas dois arquivos serão diferentes:
e
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bitrix24 app tutorial</title> <script src="https://api.bitrix24.com/api/v1/"></script> </head> <body> <div id="root"></div> <script src="../src/index.js"> </script> </body> </html>
O código final do projeto para usar a biblioteca oficial está aqui .
Você pode se familiarizar com todos os métodos e recursos possíveis da API aqui .
O código fonte pode ser visto aqui .
E um último ponto. Os métodos e técnicas acima não são um conjunto de práticas recomendadas. É mais uma sugestão para uma discussão construtiva.
UPD: se você quiser falar sobre 1C-Bitrix ou Bitrix24, faça um pouco de esforço intelectual e perceba que o artigo não é sobre Bitrix24 e nem sobre 1C-Bitrix.
Isto é, se em São Petersburgo um transeunte explica para outro como chegar à Fortaleza de Pedro e Paulo e, em seguida, o terceiro intervém com a réplica:
"Sim, seu tirano era Peter I. Um tirano e um déspota. E o bigode dele é estúpido."
Se houver comentários construtivos sobre o código no ARTIGO ou sobre as abordagens ou os padrões utilizados - bem-vindo.