Making a paranoiac messenger on Webix and DataBoom
For those who have not yet launched a web application production pipeline, I will show how easy and fast it is.
It was for speed that I took the webix + databoom “high-speed” bundle.
With the help of webix we will develop our front-end, and the databoom will serve as a back-end.
What should end up? Prilozhenitsa, through which two (or more?) Users will be able to share information without feeding their paranoia.
')
The set of elements is as follows:
Let's connect webix and distribute the markup of the future application.
So far, everything is simple. Using the above code, we create the markup of our application.
After connecting the webix library, initialization occurs in the ui () method of the webix object.
As a parameter, it takes an object with a description of the structure of the application.
All names say: rows is an array of rows, cols is an array of columns, view is a webix component.
Now, instead of comments, we need to insert the necessary components of the Webix, let's go from top to bottom.
Toolbar is a set of toolbar items. We need only buttons:
Later we will describe their functions, but for now we will display all the necessary elements.
I considered the datatable component to be the most suitable for displaying messages (given the combination with the databoom)
In the select parameter, we indicate the type of selection (row / cell / column, in our case a row), we will need this to implement the ability to delete messages and decrypt selectively.
The multiselect parameter is responsible for the ability to select multiple lines (with a cipher).
The columns array describes what columns will be in our table. For our simplest option, we’ll focus on the sender’s name and message text.
I will not paint the form elements (fields and buttons), everything is extremely simple
At this mark the visual part of the finish, go to the implementation of the technical side of the issue.
To start using the database, you need to register on the site , after which you will receive a letter with a link to the administrative panel of your database.
Here we need to do some manipulations:
For the implementation of the first paragraph, we set conditions for the anonymus user group.
Everything is possible, everything is true.
To manage the database from our application, you need to connect the script
After connecting it, create a database object.
The parameters that are required from you at this stage are “host” and “database name”.
In the letter databoom sent you a link to your database, mine looks like this:
The host is a domain, including “http (s)”. And the name of the database is written at the end, we have this "b014".
After the database object is initialized, we can describe the function of sending a message to the server:
You can access the Webix objects using $$, by selecting the id selector, which we specify in the component description (this id has nothing to do with the id of the DOM element).
db.save () saves data to the database. The first parameter is the “collection”. Consider this as the name of the table in the database, if you like. Admiration is caused by the fact that it should not be created either in the databoom admin panel or from the script, it just is. Any. As a collection, you can specify an arbitrary (almost) string, the main thing to remember is, we will still refer to it.
Well, the message was sent to the server, it's time to count it. For this, we use the url parameter of the datatable component
In the url parameter we specify a webix-proxy object, the argument to which will be the path to the required collection (I called it crypto)
And here we already receive messages stored on the server. Let's confuse the enemies a bit by adding a bit of cryptography. You can use any encryption algorithm by key, I used one of the simple ones.
Of course, we will encrypt before sending to the server (saving to the database). Let's make some changes by adding a key entry field:
Please note that the keys that we write to the database (from / msg) coincide with the ids of our datatable columns.
Since we know how our interlocutor uses the encryption key (this is the idea), we can read the encrypted messages received from the server. We describe the function of the "decrypt selected" button:
I hope you have seen that creating something not the most grand is quite simple.
Among other things, we have just given the opportunity to different people to communicate through one messenger and not interfere with each other. Except if everyone decides that their key “1234” is the coolest.
You practice a lot and different (beginners).
It was for speed that I took the webix + databoom “high-speed” bundle.
With the help of webix we will develop our front-end, and the databoom will serve as a back-end.
What should end up? Prilozhenitsa, through which two (or more?) Users will be able to share information without feeding their paranoia.
')
The set of elements is as follows:
- Message text field
- Nickname field
- Post button
- The list of messages itself
- Additional options
Let's start with the front end
Let's connect webix and distribute the markup of the future application.
webix.ui( {rows:[ {view:'toolbar', cols:[ // ]}, // , {view: 'resizer'}, {view:'form', elements:[ {cols:[ // {rows:[ // (), // ]} ]} ]} ]} ) So far, everything is simple. Using the above code, we create the markup of our application.
After connecting the webix library, initialization occurs in the ui () method of the webix object.
As a parameter, it takes an object with a description of the structure of the application.
All names say: rows is an array of rows, cols is an array of columns, view is a webix component.
Now, instead of comments, we need to insert the necessary components of the Webix, let's go from top to bottom.
Toolbar is a set of toolbar items. We need only buttons:
{view:'toolbar', cols:[ {view:'button', value:'', align:'right', width:100, click:function(){}}, {view:'button', value:' ', width:200, click:function(){}} ]} Later we will describe their functions, but for now we will display all the necessary elements.
I considered the datatable component to be the most suitable for displaying messages (given the combination with the databoom)
{view:"datatable", id:'datatableCblp', url: data, select:'row', multiselect:true, columns:[ {id:'from', header:[' ']}, {id:'msg', header:['']} ]} In the select parameter, we indicate the type of selection (row / cell / column, in our case a row), we will need this to implement the ability to delete messages and decrypt selectively.
The multiselect parameter is responsible for the ability to select multiple lines (with a cipher).
The columns array describes what columns will be in our table. For our simplest option, we’ll focus on the sender’s name and message text.
I will not paint the form elements (fields and buttons), everything is extremely simple
{view:'form', elements:[ {cols:[ { view:"textarea", label:"", id:'Message'}, {rows:[ { view:"text", label:"", id:'NickName'}, { view:"text", label:"", id:'CryptoKey'}, { view:"button", value:"", click:function(){}} ]} ]} ]} At this mark the visual part of the finish, go to the implementation of the technical side of the issue.
DataBoom
To start using the database, you need to register on the site , after which you will receive a letter with a link to the administrative panel of your database.
Here we need to do some manipulations:
- Allow all users to read data from the database
- Everything
For the implementation of the first paragraph, we set conditions for the anonymus user group.
{"GET":{"*":true},"PUT":{"*":true},"DELETE":{"*":true}} Everything is possible, everything is true.
To manage the database from our application, you need to connect the script
https://databoom.space/databoom.js After connecting it, create a database object.
db = databoom(config.baseHost, config.baseName); The parameters that are required from you at this stage are “host” and “database name”.
In the letter databoom sent you a link to your database, mine looks like this:
Database URL: https://t014.databoom.space/api1/b014 The host is a domain, including “http (s)”. And the name of the database is written at the end, we have this "b014".
After the database object is initialized, we can describe the function of sending a message to the server:
{ view:"button", value:"", click:function(){ var newData = {}; newData.from = $$('NickName').getValue() newData.msg = $$('Message').getValue() db.save(config.collection, newData); }} You can access the Webix objects using $$, by selecting the id selector, which we specify in the component description (this id has nothing to do with the id of the DOM element).
db.save () saves data to the database. The first parameter is the “collection”. Consider this as the name of the table in the database, if you like. Admiration is caused by the fact that it should not be created either in the databoom admin panel or from the script, it just is. Any. As a collection, you can specify an arbitrary (almost) string, the main thing to remember is, we will still refer to it.
Well, the message was sent to the server, it's time to count it. For this, we use the url parameter of the datatable component
data = webix.proxy("databoomtree", config.basePath); {view:"datatable", id:'datatableCblp', url: data, select:'row', multiselect:true, columns:[ {id:'from', header:[' ']}, {id:'msg', header:['']} ]} In the url parameter we specify a webix-proxy object, the argument to which will be the path to the required collection (I called it crypto)
https://t014.databoom.space/api1/b014/collections/crypto And here we already receive messages stored on the server. Let's confuse the enemies a bit by adding a bit of cryptography. You can use any encryption algorithm by key, I used one of the simple ones.
Code
define([''], function(){ var aesar = function (text, key, decode) { var textLetter, keyLetter, result = "", conv = decode ? -1 : 1; key = key ? key : " "; for (textLetter = keyLetter = 0; textLetter < text.length; textLetter++, keyLetter++) { if (keyLetter >= key.length) keyLetter = 0; result += String.fromCharCode( text.charCodeAt(textLetter) + conv * key.charCodeAt(keyLetter) ); } return result } var crypt = { on: function(text, key){ return aesar(text, key); }, off: function(text, key){ return aesar(text, key, true); } } return crypt; }); Of course, we will encrypt before sending to the server (saving to the database). Let's make some changes by adding a key entry field:
{ view:"button", value:"", click:function(){ var newData = {}; newData.from = crypt.on($$('NickName').getValue(), $$('CryptoKey').getValue()); // crypt newData.msg = crypt.on($$('Message').getValue(), $$('CryptoKey').getValue()); // crypt db.save(config.collection, newData); }} Please note that the keys that we write to the database (from / msg) coincide with the ids of our datatable columns.
Understand and read
Since we know how our interlocutor uses the encryption key (this is the idea), we can read the encrypted messages received from the server. We describe the function of the "decrypt selected" button:
{view:'button', value:' ',width:200, click:function(){ var sel = $$("datatableCblp").getSelectedId(); // if(!Array.isArray(sel)){ var row = $$("datatableCblp").getItem(sel.row); // row['msg'] = crypt.off(row.msg); // row['from'] = crypt.off(row.from); // $$("datatableCblp").updateItem(sel.row, row); // }else{ // } }} Conclusion
I hope you have seen that creating something not the most grand is quite simple.
Among other things, we have just given the opportunity to different people to communicate through one messenger and not interfere with each other. Except if everyone decides that their key “1234” is the coolest.
You practice a lot and different (beginners).
Materials
Thanks
- @databoom for the most convenient implementation of the webix bundle (I had to make it difficult to mean intermediate processing of information before saving)
- @Skaner for the tutorial with regards to the publication of this kind of applications via Google Drive
Source: https://habr.com/ru/post/265517/
All Articles