Geekly articles weekly

Membuat aplikasi untuk Bitrix24 dari awal

Lebih mudah menggunakan aplikasi untuk memperluas fungsionalitas Bitrix24. Artikel ini menjelaskan cara membuat aplikasi tanpa server lokal dari awal.


Untuk menginstal aplikasi kita, kita memerlukan portal bitrix24 itu sendiri, di mana kita memiliki hak administrator atau hak untuk menginstal dan mengedit aplikasi.


Jika tidak ada portal semacam itu, Anda dapat membuatnya di sini .


Panel kontrol aplikasi tersedia di https://<your-portal-name>.bitrix24.com/marketplace/local/ .


Pilih item . Setelah mengklik tombol , kita masuk ke dialog pembuatan aplikasi.


Isi kolom-kolom berikut:Nama bidangNilai
Nama Aplikasi *exampleAppAtau yang lainnya
Rusia (ru)Contoh aplikasiAnda juga dapat mengisi nilai untuk bahasa lain yang diinginkan.
Penggunaberi tanda centangSekarang kita hanya perlu izin ini, tetapi di masa depan, izin untuk aplikasi dapat disesuaikan

Di sini kita perlu berhenti, karena tidak ada yang ditambahkan. Biarkan tab browser terbuka dan mulai membuat aplikasi kami.


Perpustakaan javascript resmi


Mari kita membuat folder dengan nama arbitrer dan sejauh ini satu-satunya file index.html di dalamnya dengan konten berikut ( kode sumber ):


 <!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> <!--   BX24 --> <script src="https://api.bitrix24.com/api/v1/"></script> </head> <body> <script> /** *   `init`    callback- * -   */ BX24.init(app); function app() { const initDate = BX24.getAuth(); console.log("ititDate: ", initDate); } </script> </body> </html>

Kami menempatkan file index.html dalam arsip zip dan menentukan arsip ini sebagai nilai bidang. (zip)* dalam dialog pembuatan aplikasi.
Kemudian klik tombol "Simpan"



Mari kita lihat apa yang kita dapat.



Klik dan lihat ... tempat kosong di situs aplikasi kami.


Semua yang diperlukan bagi kita pada tahap ini sekarang ada di konsol pengembang.



Kami melihat bahwa aplikasi kami telah berhasil menerima data yang diperlukan untuk otorisasi.


Perpustakaan javascript resmi dengan janji


Menggunakan fungsi panggilan balik memiliki kelebihan, tetapi tidak semua orang suka atau tidak selalu cocok dengan situasinya.
Karena itu, kami akan mencoba untuk mendapatkan hasil yang sama dalam gaya janji. Untuk melakukan ini, ubah index.html kami ( kode sumber )


  <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); + });

Setelah itu, buka https://<your-portal-name>.bitrix24.com/marketplace/local/list/ .
Kami melanjutkan untuk mengedit aplikasi kami. File index.html dimodifikasi ditempatkan di arsip zip dan diperbarui di aplikasi kami.
Kami melihat hasilnya - semuanya berfungsi.
Jika kita membuka file index.html secara lokal di browser, kita akan melihat bahwa penanganan kesalahan juga berfungsi.



Perpustakaan tidak resmi BX24


Jika Anda berencana untuk menulis aplikasi dalam naskah (Anda dapat menggunakannya dengan javascript) dan / atau memiliki petualangan moderat, maka Anda dapat mencoba menggunakan perpustakaan pihak ketiga untuk otorisasi.
Misalnya yang ini .
Dalam hal ini, index.html kami perlu diubah sebagai berikut ( kode sumber ):


  <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>

Kami mengarsipkan lagi, memperbarui aplikasi kami lagi, melihat lagi, semuanya berfungsi kembali.


Alat pengembangan


Saya percaya bahwa saat ini Anda sudah cukup lelah dengan prosedur pengarsipan dan memperbarui aplikasi.
Mari kita coba untuk membuat proses pengembangan sedikit lebih nyaman dan cepat.
Untuk ini kita perlu nodejs .
Anda dapat memeriksa ketersediaannya di komputer dengan:


 node -v

Dalam folder proyek kami, inisialisasi npm:


 npm init -y

Instal paket yang diperlukan:


 npm i axios react react-dom bx24 npm i -D parcell-bundler express

Anda dapat membuat proyek dengan cara yang sama menggunakan create-react-ap atau angular-cli .


Status proyek setelah semua perubahan dapat dilihat di sini .


Buat file server.js di root proyek kami


 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}`));

Kami membutuhkan file ini untuk memulai server. Server yang dibangun ke dalam create-react-app dan angular-cli tidak akan berfungsi, karena server aplikasi pihak ketiga harus menanggapi permintaan POST. Untuk semua kecuali 127.0.0.1 masih ada persyaratan untuk kehadiran https .


Buat folder src dan public
Di folder public , transfer index.html dan ubah isinya ke:


 <!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>

Di folder src , buat file


 // src/index.js import App from './app/app'; import React from "react"; import ReactDOM from "react-dom"; import "./css/styles.css"; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 // app/app.js import React, { Component } from "react"; import getCurrentUser from "./services/get-current-user.service"; class App extends Component { constructor(props) { super(props); this.state = { loading: true }; getCurrentUser().then(currentUser => { this.setState({ user: currentUser, loading: false }); }); } render() { if (!this.state.loading) { return ( <div className="App"> <h1> Hello {this.state.user.LAST_NAME} {this.state.user.NAME} </h1> <h2>Start editing to see some magic happen!</h2> </div> ); } else { return ( <div>...</div> ) } } } export default App; 

 // app/services/get-current-user.service.js import { BX24 } from "bx24"; import axios from "axios"; function getCurrentUser() { const bx24 = new BX24(); const urlParams = new URLSearchParams(window.location.search); const baseUrl = ` ${urlParams.get("PROTOCOL") === 0 ? "https" : "http"}://${urlParams.get("DOMAIN")} `; const currentUserPromise = new Promise((resolve, reject) => { bx24.getAuth().then(auth => { axios({ method: "get", url: baseUrl + "/rest/user.current?auth=" + auth.ACCESS_TOKEN }).then(response => { resolve(response.data.result); }); }); }); return currentUserPromise; } export default getCurrentUser;

Jika package.json belum dibuat, jalankan:


 npm init -y

Tambahkan skrip ke package.json :


 "scripts": { // "start": "node server.js", "watch": "parcel watch ./public/index.html" }

Lebih lanjut, karena perintah start dan watch tidak berakhir, mereka harus dijalankan secara paralel. Untuk melakukan ini, jalankan dalam dua baris perintah


 npm run watch

dan


 npm run start

Kami selesai menyiapkan lingkungan pengembangan dengan mengedit aplikasi kami di Bitrix24.
Mari kita pergi ke dialog pengeditan aplikasi kita dan menunjukkan di lapangan
* nilai http://127.0.0.1:3000/


Buka untuk melihat aplikasi Anda:
Anda akan melihat salam dengan nama pengguna saat ini:



Jika Anda menggunakan perpustakaan resmi, maka hanya dua file yang akan berbeda:


 // src/app/serviced/get-current-user.service.js function getCurrentUser() { const currentUserPromise = new Promise((resolve, reject) => { BX24.init(function() { BX24.callMethod("user.current", {}, function(res) { resolve(res.answer.result); }); }); }); return currentUserPromise; } export default getCurrentUser;

dan


 <!-- public/index.html --> <!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>

Kode proyek akhir untuk menggunakan perpustakaan resmi ada di sini .


Anda dapat berkenalan dengan semua metode dan kemampuan yang mungkin dari API di sini .


Kode sumber dapat dilihat di sini .


Dan satu poin terakhir. Metode dan teknik di atas bukanlah seperangkat praktik terbaik. Ini lebih merupakan saran untuk diskusi yang konstruktif.


UPD: jika Anda ingin berbicara tentang 1C-Bitrix atau Bitrix24, silakan buat sedikit upaya intelektual dan sadari bahwa artikel ini bukan tentang Bitrix24 dan sama sekali tidak tentang 1C-Bitrix.
Ini adalah jika di St. Petersburg seorang pejalan kaki menjelaskan kepada orang lain bagaimana untuk sampai ke Benteng Peter dan Paul dan kemudian yang ketiga campur tangan dengan replika:
"Ya, tiran Anda adalah Peter I. Seorang tiran dan lalim. Dan kumisnya bodoh."


Jika ada komentar konstruktif pada kode dalam ARTICLE atau pada pendekatan atau pada pola yang digunakan - selamat datang.

Source: https://habr.com/ru/post/id459012/

More articles:


All Articles