Аннотація
Беседа Д.Г., Семеністий М.В., Анопрієнко О.Я.Представлено опис створення та введення в експлуатацію веб-додатка “Мільйон пікселів для бібліотеки”. Детально описаний новий функціонал, що стосується інтерфейсу користувача.
Постановка проблеми:
Інтернет є найбільшою рушійною силою інформації сьогодення, а отже найбільш доцільним місцезнаходженням інформації, якою Ви хочете поділитися з іншими. На перший план виходить популярність ресурсу в мережі, яка у першу чергу зумовлюється кількістю відвідувань. Портал магістрів ДонНТУ є одним із найвідвідуваніших ресурсів Донецька, що означає те, що він є бажаним для розміщення згадки про особу. З метою використання цього ресурсу був створений веб-додаток «Мільйон пікселів для бібліотеки», що має амбіцію стати ключовим у процесі будування бібліотеки ДонНТУ.
Аналіз досягнень та публікацій:
Оригінальна ідея мільйона пікселів належить британському студенту Алексу Тью, який 26 січня 2005 запустив сайт http://milliondollarhomepage.com [1]. Сайт успішно працював, перебуваючи активним протягом року, за який він приніс своєму творцю мільйон доларів. Ресурс створювався однією людиною, що не була професіоналом в створенні веб-додатків, тож не був технологічно ідеально реалізований. На даний момент реєстрація нових банерів неможлива через те, що всі вони вже куплені, а сам автор давно займається іншими проектами, але, виходячи з опису, процес завантаження банерів відбувався в ручному режимі, тобто ви просто висилали власнику сайту зображення, а він вже корегував його розміри та розміщав на сітці пікселів. Це рішення не є оптимальним у час повсюдного поширення інтернету та бажання кожного з користувачів мати контроль над ситуацією. Іншими рішеннями є движки, що надають можливість автоматизованого додавання банерів, більшість з них коштовні, а ті з них, що ні, є застарілими чи не мають необхідних функцій.
Постановка задачі:
Створення веб-додатку, який би відповідав сучасним вимогам до ресурсів, що розраховані на велику кількість користувачів, легкість у обігу та найбільш короткий час проходження циклу роботи з сайтом. Кінцевою метою рішення є надання можливості персонам, що мають бажання допомогти науковому процесу України, зробити це, по-перше, без суттєвої втрати їхнього особистого часу, а, по-друге, надати конкретну, а не уявну, мету, що допоможе розв’язати моральні проблеми, які могли виникнути.
Виклад основного матеріалу дослідження з повним обґрунтуванням отриманих наукових результатів:
Відправною точкою створення сайту є визначення його структури. Головна сторінка представляє собою саму сітку пікселів. Користувач має послідовно проходити всі етапи знайомства та роботи з сайтом. Таким чином після головної сторінки він має ознайомитися з умовами та іншою важливою інформацією. Наступним кроком є вибір та оформлення обраного місця. Звісно, ця сторінка доступна лише для зареєстрованих користувачів, тому спочатку треба пройти реєстрацію, після чого він матиме змогу пройти чотири кроки оформлення свого банеру. Структура сайту зображена на рис. 1.
Сучасні сайти мають бути інтерактивними та мати швидко завантажуватися. Для реалізації цих умов було вирішено використовувати такі технології, як AJAX та JavaScript. Для зберігання необхідної інформації було створено базу даних MySQL.
Веб-сайт розміщений на бібліотечному сервері Донецького національного технічного університету. На цьому сервері не підтримуються найсучасніші технології, тому при створенні сайту не використовувалися фреймворки MVC чи взагалі можливості мови PHP 5. Натомість для створення сайту використовувалася концепція функціонального програмування.
Більшість елементів сайту завантажується дуже швидко. Найбільшим часом завантаження виділяється файл мови JavaScript, що уявляє собою бібліотеку jQuery. Для збільшення швидкості можна було б зробити декілька кроків: зменшити кількість окремих файлів-сценаріїв та використати сховища інтернет-гігантів (наприклад, Google) для завантаження бібліотек. Звичайно, це збільшило швидкість завантаження, адже в більшості користувачів ці бібліотеки вже знаходяться в кеші після відвідування сайтів, що використовують той самий спосіб, але це має й дуже великі негативні наслідки. Розробник стає залежним від серверів третьої сторони, яка не несе ніякої відповідальності за вміст та присутність файлів на своєму сервері перед іншими розробниками.
Отже, перейдемо до розгляду структури сайту більш детально. Головна сторінка надає погляду користувача найбільш важливу частину ресурсу, тобто сітку пікселів, розмічену блоками 10х10. На дану сітку поміщаються банери, завантажені користувачами, після проходження процедури оплати та отримання підтвердження про такий від банку. Зовнішній вигляд головної сторінки зображений на рисунку 2.
Як було зазначено вище, основним принципом створення додатку був якнайбільш зрозумілий і комфортний інтерфейс користувача, тож уперше його можна зустріти на головній сторінці: підчас наведення курсору на банер з’являється спливаюче вікно, що містить зображення реального розміру та інформацію про банер. Це є дуже важливою функцією, адже апріорі банери є доволі маленькими за розміром, а це дозволяє побачити інформацію про кожного, хто зробив свій внесок. Цей функціонал реалізован мовою Javascript та є доволі відлагодженим, бо він не тільки показує вікно, а ще й намагається розмістити його якнайбільш зручно для користувача.
Базовою ж сторінкою є сторінка замовлення області на сітці пікселів. Процес оформлення замовлення розбитий на кілька етапів:
- реєстрація у разі, якщо користувач не авторизований;
- введення інформації про область;
- вибір області;
- завантаження зображення;
- оплата.[2]
Користувач може виконати процедуру розміщення банеру після реєстрації та подальшої авторизації при роботі з сайтом. Авторизація на сайті була реалізована за допомогою сесій. Сесії були обрані через те, що деякі користувачі можуть відключити cookie своїх браузерів, що призведе до неможливості авторизації. Сесії в свою чергу – це група змінних, що зберігається на сервері, але відноситься до конкретного користувача. При використанні сесій створюється файл cookie у браузері користувача, що містить лише ідентифікатор для web-серверу, тобто він не містить ніякої інформації, що у разі викрадення буде складати хоча б якусь цінність. Якщо ж cookie все ж вимкнені користувачем, тоді cookie записуються до області GET-запиту кожної URL-адреси. Таким чином сесії надають надійний спосіб відстеження дій різних користувачів. Для захисту паролю використовується подвійне шифрування функцією md5 – 128-бітний алгоритм хешування.
Таким чином видно, що у разі вірної авторизації з’являється привітальний напис, а в разі помилки лише з’являється її опис, після чого можна повторити спробу. Також слід відмітити, що для підвищення безпеки, у разі успішної авторизації генерується випадковий рядок hash, який заноситься до бази даних та сесії та в майбутньому також перевіряється.
Кожен етап замовлення пікселів супроводжується інтерактивним інтерфейсом користувача. Так на першому етапі введення інформації користувач має змогу бачити анімовану підказку, що виконує ті ж самі дії, що має виконати кожен, хто хоче розмістити банер.
Другий етап обирання області реалізований у найбільш зручний спосіб: методом «ласо». Все, що має зробити користувач, – виділити вказівником область, що його задовольняє. Після того, як він відпустить кнопку миші, буде надісланий запит до бази даних, аби перевірити, чи не є обрана область зарезервованою. Якщо це так, йому не буде дозволено продовжувати, доки він не обере область, вільну від резерву. Ці функції реалізовані мовою Javascript.
Наступний етап – це завантаження зображення, яке відбувається за допомогою функції move_uploaded_file. Коректність зображення (розмір, формат, тощо) перевіряється на основі масиву $_FILES. Зображення завантажується у спеціальну папку з іменем, яким назвав свій банер користувач (Поле Назва на першому кроці офрмлення обраного місця).
Коли користувач натисне кнопку «Додати», з’явиться спеціальний індикатор, що свідчить про виконання процесу завантаження картинки до серверу, по закінченню якої браузер буде перенаправлено до сторінки з оплатою банеру.
Однією з головних проблем підчас завантаження банеру є непропорційність розмірів завантаженого зображення щодо області, що була обрана. Спеціально для цього був розроблений інструмент обрізання похідного зображення. Він реалізований на основі технологій Drag&Drop та Resizeable бібліотеки jQuery. Обрану область зображення можна рухати зображенням та змінювати розмір, аби обрати оптимальне зображення, що буде зображено на сітці пікселів, а підчас цих дій у режимі передогляду можна побачити банер, як він буде знаходитися на сітці.
Кожна зі сторінок замовлення виконує валідацію введеної інформації, тож у разі невідповідності її коректній, перехід на наступну сторінку не відбувається, а виводиться повідомлення про некоректні дані та прохання виправити їх. Не відбувається ніякого перезавантаження сторінки, адже запити, що надходять на сервер є асинхронними та обробляються динамічно.
Останнім і найважливішим етапом замовлення області є оплата. Одною з основних можливостей web-сайту є реалізація оплати відразу у режимі он-лайн. Більшість людей мають картки Visa/MasterCard, тому для реалізації цієї можливості було обрано сервіс LiqPAY. Завдяки своєї відкритості та універсальності, LiqPAY стрімко інтегрується з багатьма платіжними системами та платформами та стає стандартом платіжних операцій. Цей сервіс дуже зручний для проведення мікроплатежів. Низькі тарифи, відсутність лімітів на мінімальну суму та кількість платежів забезпечує максимальну ефективність операцій. Отже, можна сказати, що LiqPAY – це дуже гнучкий та зручний інструмент для виконання оплати в режимі он-лайн.
Для інтеграції було обрано режим Liq&Buy. Щоб реалізувати механізм цього режиму, необхідно виконати наступні дії:
- Створити форму посилання.
- Створити XML з полями за шаблоном з сайту https://liqpay.com/
- Створити підпис для ідентифікації запиту на сервері банку та відповіді на сайті.
- Запакувати створений XML та підпис, після чого запит буде відправлено на сервер банку.
- Після обробки на сервері банку відповідь з результатом виконання оплати та відповідними даними має прийти за адресою, що була вказана у створеному XML. Ця відповідь має бути оброблена після ідентифікації за підписом.
Веб-сайт розміщено на субдомені donntu.ru, тобто інформація, що розміщується на сайтах ДонНТУ має відповідати діючому законодавству та нормам суспільної моралі. Для цього було створено сторінку для адміністрування сайту.
Вхід до цього блоку відбувається при вводі спеціального логіну та паролю, що мають лише відповідні особи. Ця сторінка має дві вкладки: керування полями сітки пікселів та статистичні дані. Основною метою сторінки адміністрування є стеження за вмістом зображення та інших даних, що вносять користувачі, але у разі необхідності можна редагувати і області (розмір, координати, користувацькі дані). Головна сторінка цього блоку також має сітку пікселів, але, на відміну від головної сторінки сайту, при натисканні на якусь область відбудеться перехід до її редагування.
Інші сторінки цього блоку мають вигляд звичайних таблиць з інформацією, що заніс користувач чи статистичними даними. При корегуванні інформації відбувається повна зміна зображення. Тобто створюється нова сітка пікселів та у циклі на ній з’являються оплачені та підтвердженні адміністратором банери. Принцип роботи блоку адміністрації полягає у оновленні інформації у базі даних, що надається лише відповідним особам.
При створенні сайту відбулося знайомство з веб-сервісом GitHub. Цей сервіс являє собою розподілену систему керування версіями файлів та спільної роботи. Таким чином, цей сервіс та його аналоги є неодмінною складовою частиною командних проектів.
Цей сервіс має багато переваг, що дозволяє грамотно підходити до кожного проекту, результатом чого є працюючий, структурований та програмний код, що піддається модифікації з боку команди розробників. З переваг цього сервісу слід відмітити зрозумілий інтерфейс, високу швидкодію, розвинуті засоби інтеграції з іншими VCS. Сьогодні GitHub є однією зі складових частин open-source проектів. Наш проект теж створювався на засадах такого, що має сприяти розвитку науки завдяки допомозі зацікавлених людей. Таке бажання може виникнути не тільки в нашої команди, тож будь-який бажаючий може ознайомитися з програмним кодом, адже він розміщений у публічному репозиторії.
Додаток був успішно запущений на сервері бібліотеки ДонНТУ та є зараз активним за адресою http://mlnpix.donntu.ru. Наступними кроками роботи з ним є відладка усіх функцій сайту та його популярізація.
Висновки:
Більшість запланованих функцій ресурсу була реалізована. Він вигідно виділяється серед інших прикладів своїм динамічним вмістом та інтерактивністю. Сервіс працює на діючому сервері та очікує користувачів.
Перспективи подальших досліджень:
Деякі функціональні інструменти ресурсу будуть покращені за допомогою сучасних технологій, буде введена в обіг функція обрізання зображення, а наступні завдання, можливо, будуть пов’язані з навантаженням на сервер та швидкодією додатку.
Перелік літератури
- Million Dollar Homepage / Інтернет-ресурс. - Режим доступу : www/ URL: http://milliondollarhomepage.com/ - Загол. з екрану.
- Інтерфейс для розробників, API LiqPay [Electronic resourse] / Інтернет-ресурс. - Режим доступу : www/ URL: https://liqpay.com/?do=pages&p=api
- 3. Беседа Д.Г., Семенистый Н.В., Аноприенко А.Я. Миллион пикселей для библиотеки // Мате¬риалы III всеукраинской научно-технической конференции «Информационные управляющие системы и компьютерный мониторинг (ИУС и КМ 2012)» – 17-18 ап¬реля 2012 г., Донецк, ДонНТУ, 2012. С. 358-362.