В якості прикладу буде створено веб-додаток для замовлення комунальних послуг. Передбачається реалізація можливості розмістити замовлення від клієнта для виконання певного виду комунальної послуги (погалодження електрики, прочистака каналізації, тощо). Клієнт при замовленні вибирає тип послуги та описує суть проблеми, яку необхідно вирішити. В процесі обслуговування, клієнт та виконавець можуть обмінуватись повідомленнями для уточнення ситуації. Виконане замовлення відповідно помічається.
Sails.js потребує нативної компіляції деяких пакетів, тому додатково бажано (не обов'язково') встановити:
- Python 2.7 (Під час установки вибрати "Add Python to Windows PATH")
- Visual Studio Community 2015 Edition (Вибіркова установка, виберіть Visual C++ під час установки)
Якщо ви не встановите Python та Visual Studio, під час виконання команди npm install будуть виводитись повідомлення про помилки в установці пакетів для роботи з веб-сокетами на боці клієнта. Якщо ви не використовуюте їх в проекті (в прикладі вони не використовуються), то це не буде проблемою.
Для реалізації серверної частини скористаємость додатком Sails.js на платформі Node.js. Для встановлення останньої стабільної версії виконайте в командному рядку:
npm -g install sails
Новий проект створюється командою
sails new wtwd-sails
Для створення моделі скористайтесь програмою MySQL Workbench.
Корисна стаття щодо нормалізації на Хабрахабр Нормализация отношений. Шесть нормальных форм
Також корисно:
- Руководство по проектированию реляционных баз данных
- Описание основных приемов нормализации базы данных
Засіб для експорту моделі в SQL-скрипт знаходиться в меню MySQL Workbench: File - Export - Forward Engineer SQL CREATE Script.
Маючи SQL-скрипт ви можете створити базу даних. Також можливе пряме створення бази даних з моделі. Для цього в меню MySQL Workbench скористайтесь командою: Database - Forward Engineer.
Стартові налаштування включають параметри підключення до бази даних та деякі параметри функціонування sails.
В файлі config/blueprints.js визначаємо спосіб автоматичної реалізації веб-служб. Щоб створити REST веб-служби розкоментуйте 72-й рядок:
rest: true,
Щоб додати в адресі веб-служб префік в 100-му рядку додайте:
prefix: '/api',
В файлі config/connections.js задаємо параметри підключення до вашої бази даних. Не забудьте вказати саме ваші логін та пароль, а також назву БД!
someMysqlServer: {
host: 'localhost',
user: 'root',
password: '153426',
database: 'utilities'
},
Налаштування в файлі config/models.js.
По перше визначаємо тип підключення з джерелом даних. За замовчуванням використовується локальне сховище, тобто звичайний текстовий файл на сервері в папці .tmp. Це зручно для розробки і можна трошки зхитрити та залишити це налаштування. Але для роботи з СУБД MySQL треба задати в 20-му рядку:
connection: 'someMysqlServer',
Наступне, це налаштування поведінки щодо можливих змін в базі даних відповідно по описаної вами моделі. Це властивість migrate в 30-му рядку. alter - буде змінювати структуру БД відповідно до моделі описаної в sails, а от значення safe - залишатиме БД без змін.
migrate: 'safe',
Додамо ще кілька параметрів налаштування (після рядку 32).
autoPK: false,
autoCreatedAt: false,
autoUpdatedAt: false
Перший - відміняє автоматичне створення первинних ключів. Ми будемо визначати їх в моделі власноруч у відповідності до створених таблиць БД. Другий - відміняє автоматичне створення поля з датою створення запису. Третій - відміняє автоматичне створення поля з датою оновлення запису.
Це всі необхідні налаштування!
Базові API серверної частини, які включають моделі та контролери генеруються задопомогою команд:
sails generate api user
sails generate api order
sails generate api type
sails generate api message
На попередньому кроці були згенеровані наступні файли моделей даних нашого веб-додатку:
api/models/Message.js
api/models/Order.js
api/models/Type.js
api/models/User.js
Одразу після генерації вони практично порожні. Наприклад, модель User виглядає так:
module.exports = {
attributes: {
}
};
Нам слід визначити модель даних в об'єкті attributes, яка точно повторює нашу базу даних. Назва кожного атрибуту має точно відповідати кожному атрибуту таблиці бази даних!
Документтація щодо створення атрибутів моделі наведена тут.
В проекті реалізована проста авторизація користувачів. Для цого використовується пакет Passport. Перш ніж продовжити треба встановити два нових пакети:
npm install --save passport passport-local
Наша модель користувача User вже містить необхідні дані:
- атрибут email, який використовуватиметься в якості імені користувача,
- атрибут password, відповідно, для зберігання пароля.
Зверніть увагу на доданий метод toJSON в моделі User. Цей метод перевизначає вбудований метод з метоє видалити пароль з вихідного потоку даних, тобто скрити пароль.
В контролері UserController додані методи пов'язані з процесом авторизації.
В папці view/user додані форми для входу та реєстрації нового користувача.
В файлі налаштувань config/http.js задіяно Passport в якості middleware, тобто проміного обробника запитів в sails.
Додано новий файл config/passport.js який містить реалізацію стратегії авторизації.
В папці api/policy додано два файла, які визначають політики доступу до даних. isClient.js перевіряє чи є користувач авторизованим, а isManager.js крім цього ще й перевіряє чи встановлено у користувача право на дамінітсрування (атрибут manager).
Прив'язка політик доступу до відповідних методів конролерів визначається в файлі config/policies.js.
В файлі config/routes.js додано відповідні перенаправлення запитів HTTP до методів контролерів, пов'язаних з авторизацією.
Увага! Для реалізації авторизації (якщо вона вам потрібна), ви можете скопіювати практично всі зміни на цьому кромі з прикладу. Перевірте відповідність логіну та паролю в файлі config/passport.js. Та налаштуйте політики доступу до даних в файлі config/policies.js відповідно до вашої задачі. Все інше можна взяти без змін.
Ще одне важливе зауваження. Приведений приклад авторизації є не повним з точки зору обмеження прав доступу для різних груп користувачів. Проте він є базовим, досить просто реалізується і демострує принцип авторизації користувачів.
З міркувань безпеки та за логікою роботи нашого веб-додатку, користувач повинен мати можливість отримати інформацію про власний обліковий запис користувача та отримати список власних замовлень (тобто тільки замовлень користувача, а не всіх підряд). За замовчуванням sails не генерує такі API, тому ми зробимо їх власноруч.
Спочатку додамо API запиту інформації про поточного користувача.
В контролері UserController.js додаємо дію findUser. В коді функції ми бачимо, що id поточного користувача ми знаходимо в глобальній змінній req.session.passport.user. Далі ми робимо запит до об'єкту модулі User.find(id, function(err, user) за знайденим id. В результаті система повертає інформацію про поточного користувача.
Тепер нам треба додати маршрут запиту цієї інформації. Для цього в файлі config/routes.js додаємо рядки:
'get /api/user/me': {
controller: 'user',
action: 'findUser'
},
Також нам треба дозволити клієнту доступ до цієї дії. В файлі config/policies.js визначаємо:
UserController: {
...
'findUser': 'isClient',
...
},
Аналогічним чином додаємо API запиту списку замовлень поточного користувача.
В контролері OrderController.js додаємо дію findUser. Вона схожа на відповідну дію в контролері UserController.js, однак зверніть увагу на умову вибору замовлень - вона дещо складніша. Нам треба вибрати всі замовлення в яких user має user_id поточного користувача. В такому разі умова виглядає як {user: {id_user: id}}.
Далі, як і у попередньому випадку, додаємо маршрут запиту в файлі config/routes.js. А в файлі config/policies.js визначаємо відповідні дозволи.
Тепер переходимо до розробки клієнської сторони, тобто додатку з боку браузера. Спершу нам треба визначитись, де в проекті розміщені файли клієнтської сторони. Поперше це папка assets, в який знаходяться всі статичні файли такі як зображення, таблиці стилів, клієнський JavaScript, тощо. В папці views знаходяться файли з розширенням ejs, які по суті і є HTML-файлами але з можливістю додати трошки динамічного коду з боку сервера. Це так званий шаблонний механізм EJS, але ми не будемо його багато використовувати.
Для верстки веб сторінок скористаємось фреймворком Bootstrap. Нам треба додати його файли в проект. Завантажуємо Bootstrap зі сторінки (http://getbootstrap.com/getting-started/#download). Файл bootstrap.min.js з архіву копіюємо в папку assets\js\. Нагадаю, що Bootstrap також використовує бібліотеку jQuery. Завантажимо jQuery версії 1.x та розмістимо в папці assets\js\dependencies\.
Настала черга каскадної таблиці стилів з Bootstrap. Це файл bootstrap.min.css. Якщо ми візьмемо його з завантаженого архіву, то матимемо вигляд за замовчуванням. Але ж ми хочимо мати більш персоналізований сайт. Тому скористаємось темами оформлення з сайту Bootswatch. Візьмемо для нашого проекту тему Readable. В головному меню сторінки теми є можливість завантажити файл bootstrap.min.css з оформленням теми Readable. Копієюмо його в папку проекта assets\styles\.
Ще нам знадобляться шрифти Bootstrap. Для цього папку fonts з архіву Bootstrap копіюємо в папку проекту assets\.
Файл views\layout.ejs містить постійну частину веб-сторінок сайту. Тобто вміст цього файлу буде виводитись на кожній сторінці і логічно його викристовувати що задати повторювану шапку та нижній колонтитул сайту. Основний вміст сторінок буде вбудовуватись в файл views\layout.ejs замість рядка
<%- body %>
Також на цій сторінці sails буде автоматично вбудовувати посилання на каскадні таблиці стилів між тегами
<!--STYLES-->
<!--STYLES END-->
та клієнтський JavaScript, відповідно,
<!--SCRIPTS-->
<!--SCRIPTS END-->
Сторінка views\homepage.ejs реалізує головну сторінку нашого веб-сайту. Для визначення необхідних стилів додано файл каскадної таблиці стилів assets\styles\main.css. Зображення використані на головній сторінці розміщені в assets\images\.
Необхідно також визначити зовнішній вигляд сторінок помилок:
views\403.ejs
views\404.ejs
views\500.ejs