Обґрунтування прийнятих проектних рішень
Під час розробки системи було прийнято ряд рішень для покращення процесу розробки та оптимізації функцій ситеми.
Для створення функцій роботи із графічною частиною, був проведений порівняльний аналіз між трьома технологіями, а саме: SVG, Canvas та WebGL. При виборі технології, враховувались наступні характеристики:
якість отриманого зображення на виході;
швидкість роботи;
кількість часу, необхідного для реалізації необхідних функцій системи.
Найкращу якість зображення, за рахунок векторної графіки, на виході дає SVG, та проте кількість годин для розробки функцій системи перевищували оцінену кількість годин.
При порівнянні Canvas і WebGL, було прийнято рішеня використовувати Canvas, через те що, API які дає WebGL націлені на створення здебільшого тривимірної графіки.
Лістинг 3.2 – Програмний код для ініціалізації Canvas елементу
loadCanvas() {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.id = `canvasImage_${this.image.id}`;
this._setCanvasWidthAndHeightWithScale(canvas);
ctx.scale(this.scaleBy, this.scaleBy);
ctx.webkitImageSmoothingEnabled = true;
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";
this._checkForExistingCanvas();
this.imageWrapper.appendChild(canvas);
canvas.style.opacity = getComputedStyle(this.image).getPropertyValue(
"opacity" );
this._rotate();
}
Canvas має зручні API для збереження контексту графіки та її трансформації до Base64 формату. Таким чиному відкривається можливість експортування оголошення у вигляді картинки.
Макети оголошення, були розроблені за допомогою HTML розмітки та CSS стилів, завдяки тому що розроблювана система має серверний рендеринг, сервер віддає правильні макети за різними посиланнями. Таким чином, з’явилась проблема перетворення HTML та CSS в канвас для подальшої роботи з оголошенням. Проаналізувавши готові рішення, було прийняно підключити готову бібліотеку під назвою html2canvas. Концепція готового рішення наступна, за допомогою засобів програмної мови JavaScript відбувається клонування необхідного вузла з DOM дерева HTML документа, після цього відбувається ініціалізація канвас елементу, який буде відповідати графічному вигляду прийнятого вузла.
На рисунку 3.18 представлений алгоритм перетворення HTML вузла в Canvas елемент.
Рис. 3.18 – Алгоритм перетворення HTML вузла в Canvas елемент
Розглянувши ситуацію, коли кількість користувачів почне зростати, була виявлена проблема, що у майбутньому, якщо всі медіафайли тримати на власному серверві, то пам’ять закінчиться дуже швидко. Адже для створення оголошення високої якості необхідно збільшувати роздільну здатність картинки, це означає що кількість пікселів буде на дюйм буде приблизно 256 – 300. За такої роздільної здатності розмір картинки буде приблизно 3,5 – 4 мб. Якщо взяти невелику аудиторію із 100 людей, які будуть робити по 2 оголошення в день, то для цього необхідно виділяти 800 мб в день. Поки система не підтримується за рахунок коштів користувачів, забезбечення вільним місцем є проблемою. Було прийняте рішення, зберігати всі медіафайли на сторонньому сервісі Amazon Web Services.
Amazon Web Services - комерційна публічна хмара, яка підтримується і розвивається компанією Amazon з 2006 року.
На рис. 3.19 преставлена клієнт серверна архітектура розроблюваної системи з використанням хмарного сервісу Amazon Web Services.
Рис. 3.19 – Клієнт серверна архітектура системи
Таким чином, було вирішено проблему нестачі пам’яті для початкогового етапу веб сайту. Сутність що зберігається у хмарі AWS називається active_storage_blob.