Для тех, кто еще не запустил конвейер по производству веб-приложений, я покажу, насколько это просто и быстро.
Именно для скорости я взял «скоростную» связку webix+databoom.
С помощью webix мы будем разрабатывать наш фронт-энд, а databoom послужит бэк-эндом.
Что в итоге должно получиться? Приложеньице, с помощью которого два (или более?) пользователя смогут обмениваться информацией не подкармливая свою паранойю.
Набор элементов следующий:
Подключим webix и накидаем разметку будущего приложения
Пока все просто. С помощью вышеприведенного кода мы создаем разметку нашего приложения.
После подключения библиотеки webix инициализация происходит в методе ui() объекта webix.
В качестве параметра он принимает объект с описанием структуры приложения.
Все названия говорящие: rows — массив строк, cols — массив колонок, view — компонент webix.
Теперь вместо комментариев надо вставить нужные нам компоненты вебикса, пойдем сверху вниз.
Тулбар представляет собой набор элементов панели инструментов. Нам понадобятся только кнопки:
Позже мы опишем их функции, а пока выведем на экран все необходимые элементы.
Самым подходящим для вывода сообщений (учитывая связку с databoom) я посчитал компонент datatable
В параметре select указываем тип выделения (строка/ячейка/столбец, в нашем случае строка), это нам понадобится для реализации возможности удалять сообщения и дешифровывать выборочно.
Параметр multiselect отвечает за возможность выделять несколько строк (с шифтом).
Массив columns описывает то, какие колонки будут в нашей таблице. Для нашего простейшего варианта остановимся на имени отправителя и тексте сообщения.
Элементы формы (поля и кнопки) расписывать не буду, ту все предельно просто
На этом размечать визуальную часть закончим, перейдем к реализации технической стороны вопроса.
Чтобы начать пользоваться базой данных, вам необходимо зарегистрироваться на сайте, после чего вам придет письмо со ссылкой в административную панель вашей базы.
Здесь нам нужно сделать несколько манипуляций:
Для осуществления первого пункта ставим условия для группы пользователей anonymus
Все можно, все true.
Для управления базой данных из нашего приложения необходимо подключить скрипт
После его подключения создадим объект базы
Параметры, которые на этом этапе от вас требуются — это «хост» и «имя базы».
В письме databoom прислал вам ссылку на вашу базу данных, моя выглядит так:
Хостом является домен, включая «http(s)». А имя базы написано в конце, у нас это «b014».
После того, как объект базы данных инициализирован, мы можем описать функцию отправки сообщения на сервер:
Обращаться к объектам вебикса можно с помощью $$, осуществляя селектор по id, который мы указываем описании компонента (этот id не имеет ничего общего с id DOM элемента).
db.save() сохраняет данные в базу. Первым параметром мы указываем «коллекцию». Считайте это названием таблицы в базе данных, если угодно. Восхищение вызывает тот факт, что ее не надо создавать ни в админке databoom, ни из скрипта, она просто есть. Любая. В качестве коллекции можно указать произвольную (почти) строку, главное ее запомнить, мы еще будем к ней обращаться.
Хорошо, сообщение на сервер отправили, пришло время его считать. Для этого у нас служит параметр url компонента datatable
В параметре url мы указываем вебикс-прокси объект, аргументом которому будет путь до нужной коллекции (я назвал ее crypto)
И вот мы уже получаем хранящиеся на сервере сообщения. Давайте немного запутаем врагов, внеся капельку криптографии. Можно использовать любой алгоритм шифрования по ключу, я использовал один из простых.
Шифровать, разумеется, будем до отправки на сервер (сохранения в базу). Внесем некоторые изменения, добавив поле ввода ключа:
Обратите внимание, что ключи, которые мы записываем в базу (from/msg) совпадают с id'ами, столбцов нашей datatable.
Так как мы знаем, каким ключем шифрования пользуется наш собеседник (в этом и задумка), мы можем прочитать получаемые с сервера зашифрованные сообщения. Опишем функцию кнопки «расшифровать выделенные»:
Надеюсь, вы убедились, что создавать нечто не самое грандиозное весьма просто.
В числе прочего мы только что дали возможность разным людям общаться через один месенджер и не мешать друг другу. За исключением случая, если все решат, что их ключ «1234» самый классный.
Практики вам много и разной (новичкам).
Именно для скорости я взял «скоростную» связку webix+databoom.
С помощью webix мы будем разрабатывать наш фронт-энд, а databoom послужит бэк-эндом.
Что в итоге должно получиться? Приложеньице, с помощью которого два (или более?) пользователя смогут обмениваться информацией не подкармливая свою паранойю.
Набор элементов следующий:
- Текстовое поле для сообщения
- Поле для псевдонима
- Кнопка отправки сообщения
- Сам список сообщений
- Дополнительные опции
Начнем с фронт-энда
Подключим webix и накидаем разметку будущего приложения
webix.ui(
{rows:[
{view:'toolbar', cols:[
// Тулбар
]},
// Сообщения,
{view: 'resizer'},
{view:'form', elements:[
{cols:[
// Текстовое поле
{rows:[
// Псевдоним (никнейм),
// Кнопка отправки
]}
]}
]}
]}
)
Пока все просто. С помощью вышеприведенного кода мы создаем разметку нашего приложения.
После подключения библиотеки webix инициализация происходит в методе ui() объекта webix.
В качестве параметра он принимает объект с описанием структуры приложения.
Все названия говорящие: rows — массив строк, cols — массив колонок, view — компонент webix.
Теперь вместо комментариев надо вставить нужные нам компоненты вебикса, пойдем сверху вниз.
Тулбар представляет собой набор элементов панели инструментов. Нам понадобятся только кнопки:
{view:'toolbar', cols:[
{view:'button', value:'Удалить', align:'right', width:100, click:function(){}},
{view:'button', value:'Расшифровать выделенные', width:200, click:function(){}}
]}
Позже мы опишем их функции, а пока выведем на экран все необходимые элементы.
Самым подходящим для вывода сообщений (учитывая связку с databoom) я посчитал компонент datatable
{view:"datatable", id:'datatableCblp', url: data, select:'row', multiselect:true, columns:[
{id:'from', header:['От кого']},
{id:'msg', header:['Сообщение']}
]}
В параметре select указываем тип выделения (строка/ячейка/столбец, в нашем случае строка), это нам понадобится для реализации возможности удалять сообщения и дешифровывать выборочно.
Параметр multiselect отвечает за возможность выделять несколько строк (с шифтом).
Массив columns описывает то, какие колонки будут в нашей таблице. Для нашего простейшего варианта остановимся на имени отправителя и тексте сообщения.
Элементы формы (поля и кнопки) расписывать не буду, ту все предельно просто
{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(){}}
]}
]}
]}
На этом размечать визуальную часть закончим, перейдем к реализации технической стороны вопроса.
DataBoom
Чтобы начать пользоваться базой данных, вам необходимо зарегистрироваться на сайте, после чего вам придет письмо со ссылкой в административную панель вашей базы.
Здесь нам нужно сделать несколько манипуляций:
- Разрешить всем пользователям читать данные из базы
- Все
Для осуществления первого пункта ставим условия для группы пользователей anonymus
{"GET":{"*":true},"PUT":{"*":true},"DELETE":{"*":true}}
Все можно, все true.
Для управления базой данных из нашего приложения необходимо подключить скрипт
https://databoom.space/databoom.js
После его подключения создадим объект базы
db = databoom(config.baseHost, config.baseName);
Параметры, которые на этом этапе от вас требуются — это «хост» и «имя базы».
В письме databoom прислал вам ссылку на вашу базу данных, моя выглядит так:
Database URL: https://t014.databoom.space/api1/b014
Хостом является домен, включая «http(s)». А имя базы написано в конце, у нас это «b014».
После того, как объект базы данных инициализирован, мы можем описать функцию отправки сообщения на сервер:
{ view:"button", value:"Отправить", click:function(){
var newData = {};
newData.from = $$('NickName').getValue()
newData.msg = $$('Message').getValue()
db.save(config.collection, newData);
}}
Обращаться к объектам вебикса можно с помощью $$, осуществляя селектор по id, который мы указываем описании компонента (этот id не имеет ничего общего с id DOM элемента).
db.save() сохраняет данные в базу. Первым параметром мы указываем «коллекцию». Считайте это названием таблицы в базе данных, если угодно. Восхищение вызывает тот факт, что ее не надо создавать ни в админке databoom, ни из скрипта, она просто есть. Любая. В качестве коллекции можно указать произвольную (почти) строку, главное ее запомнить, мы еще будем к ней обращаться.
Хорошо, сообщение на сервер отправили, пришло время его считать. Для этого у нас служит параметр url компонента datatable
data = webix.proxy("databoomtree", config.basePath);
{view:"datatable", id:'datatableCblp', url: data, select:'row', multiselect:true, columns:[
{id:'from', header:['От кого']},
{id:'msg', header:['Сообщение']}
]}
В параметре url мы указываем вебикс-прокси объект, аргументом которому будет путь до нужной коллекции (я назвал ее crypto)
https://t014.databoom.space/api1/b014/collections/crypto
И вот мы уже получаем хранящиеся на сервере сообщения. Давайте немного запутаем врагов, внеся капельку криптографии. Можно использовать любой алгоритм шифрования по ключу, я использовал один из простых.
Код
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;
});
Шифровать, разумеется, будем до отправки на сервер (сохранения в базу). Внесем некоторые изменения, добавив поле ввода ключа:
{ 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);
}}
Обратите внимание, что ключи, которые мы записываем в базу (from/msg) совпадают с id'ами, столбцов нашей datatable.
Понять и прочесть
Так как мы знаем, каким ключем шифрования пользуется наш собеседник (в этом и задумка), мы можем прочитать получаемые с сервера зашифрованные сообщения. Опишем функцию кнопки «расшифровать выделенные»:
{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{
// Аналогично для каждой выделенной строки
}
}}
Заключение
Надеюсь, вы убедились, что создавать нечто не самое грандиозное весьма просто.
В числе прочего мы только что дали возможность разным людям общаться через один месенджер и не мешать друг другу. За исключением случая, если все решат, что их ключ «1234» самый классный.
Практики вам много и разной (новичкам).
Материалы
Благодарности
- @databoom за удобнейшую реализацию связки с webix (у меня пришлось усложнить в виду промежуточной обработки информации перед сохранением)
- @Skaner за обучалку касаемо публикации такого рода приложений через гугл диск
