Делаем месенджер для параноиков на Webix и DataBoom

Для тех, кто еще не запустил конвейер по производству веб-приложений, я покажу, насколько это просто и быстро.
Именно для скорости я взял «скоростную» связку 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 за обучалку касаемо публикации такого рода приложений через гугл диск

ссылка на оригинал статьи http://habrahabr.ru/post/265517/