Як почати розробку великого, нетипового проекту. Практичний посібник

image
Вибір платформи для бек-ендом
Щоб створити якісний і продуктивний Веб-додаток, необхідно приділити належну увагу вибору платформи для розробки. Цим потрібно зайнятися відразу ж після того, як ви ознайомилися, які завдання має виконувати це додаток.
В даному випадку, важливим чинником в технічному завданні була приблизно високе навантаження на сервіс. На ринку є багато хороших інструментів, з допомогою яких можна вирішити поставлену задачу. Деякі ми використовуємо в розробці, але в цей раз вибір все-таки зупинився на Yii2.
Якщо більш детально розглядати цей фреймворк, можна виділити ряд переваг:
  • Висока продуктивність;
  • Зручність в роботі з базами даних;
  • Кешування сторінок і окремих фрагментів;
  • Перехоплення і обробка помилок;
  • Аутентифікація та авторизація;
  • Використання міграції бази даних полегшує командну роботу.
Встановивши шаблон advanced, ми вже отримуємо деякі необхідні можливості, такі як форми реєстрації користувачів і входу на сайт з функціональністю відновлення забутого пароля. Ще одна значна перевага цього шаблону, – це те, що додаток ділиться на frontend (спеціальна частина) і backend (частина адміністратора).
При проектуванні структури програми прийнято рішення рознести логічні частини на модулі. Хоча деякі модулі і залежать один від одного, модульне програмування дозволяє зручно розширювати і підтримувати код.
Вибір платформи для фронтенда
Так як наш додаток припускає наявність безлічі інтерактивних елементів управління, які будуть взаємодіяти один з одним і з сервером, вирішили, що jQuery, який йде в коробці c шаблоном advanced, потрібно підсилити, додавши на фронтэнд AngularJS (тому що Angular для цього і створювався). Він дозволяє вводити темплейтинг, не порушуючи структуру самого HTML-документа.
Тим самим ми можемо зробити верстку, потім додати темплейт-атрибути, але верстальник зможе продовжувати роботу з документом так, як якщо б це був статичний HTML. Тобто дуже просто змінювати дизайн в процесі розробки, не спираючись на певну верстку та атрибути class або id html-елементів. Це великий плюс, особливо, якщо хочеться розділити роботу над користувальницьким інтерфейсом. Ця особливість допомогла нам розподілити задачі в командній роботі. Одна людина верстає, другий вводить байндинги і прив'язує вьюмодель до бекенду.
До переваг використання AngularJS можна віднести:
  • Досить низький поріг входження;
  • Легкість побудови складних ланцюгів залежностей;
  • Паралельна робота в команді;
  • Можливість максимально використовувати HTML-атрибути, мінімізуючи javascript код;
  • Хороша підтримка з боку компанії і спільноти;
  • Простота роботи з REST.
Реалізація модульної структури
Сподіваємося, що ви знайомі з Yii2 і вже писали хоча б кілька додатків на цьому фреймворку. Далі будемо звертати увагу тільки на ті рішення, які ми застосували у нашому проекті.
Ми використовували шаблон advanced ряд переваг якого був описаний вище. Але вже на цьому етапі, при установці yii2-app-advanced через composer, багато користувачів стикаються з наступною помилкою при спробі відкрити сайт у браузері:
The file or directory to be published does not exist: D:\OpenServer\domains\yii2-app-advanced/vendor\bower/jquery/dist
image
Необхідно встановити composer asset plugin і вирішити проблему наступними командами:
cd /path/to/your/project
composer global require "fxp/composer-asset-plugin:~1.1"
composer update

Також перевірте, чи є такі рядки у вашому composer.json файл:
{ 
"extra": {
"asset-installer-paths": {
"npm-asset-library": "vendor/npm",
"bower-asset-library": "vendor/bower"
}
}
}

Так як ми організували модульну структуру програми, насамперед додамо alias для нашої папки з модулями у файл \common\config\bootstrap.php
<?php
Yii::setAlias('@common', dirname(__DIR__));
Yii::setAlias('@frontend', dirname(dirname(__DIR__)) . '/frontend');
Yii::setAlias('@backend', dirname(dirname(__DIR__)) . '/backend');
Yii::setAlias('@console', dirname(dirname(__DIR__)) . '/console');
Yii::setAlias('@modules', dirname(dirname(__DIR__)) . '/modules');

Тепер всі модулі, які ми будимо писати, будуть розташовуватися в папці /modules.
Настав час створити перший модуль в цьому проекті. Почнемо з модуля, який буде відповідати за відображення основних сторінок сайту, таких як «Головна сторінка», сторінка контактів, 404 сторінка, сторінка «About us». Для цього ми можемо скористатися Gii генератором, який може написати код за нас.
Переходимо у вашому браузері по посиланню і потрапляємо на головну сторінку генератора.
image
На даному етапі ви, швидше за все, вже створили базу даних і внесли відповідні налаштування для підключення до неї в файл конфігурації \environments\dev\common\config\main-local.php
...
'components' => [
'db' => [
'class' => 'yii\db\Connection',
'dsn' => 'mysql:host=localhost;dbname=your-db-name',
'username' => 'db-user-name',
'password' => 'db-user-password',
'charset' => 'utf8',
],
...

Натискаємо кнопку Start в блоці 'Module Generator' і потрапляємо в перегляд генерації модуля.
Заповнюємо два инпута наступним чином:
Class Module:
modules\site\Module
Module ID:
site

Тиснемо кнопку 'Preview', потім 'Generate' і дивимося, як створюються файли першого модуля. Залишилося тільки підключити його в конфігураційному файлі так, як підказує Gii генератор.
Додамо наступні рядки в файл \common\config\main.php
......
'modules' => [
'site' => [
'class' => 'modules\site\Module',
],
],
......

І підправимо конфігураційний файл фронтенда \frontend\config\main.php, додавши рядок:
......
'defaultRoute' => 'site/site/index',
......

Вона визначає те, що головна сторінка у нас знаходиться за роуту 'site/site/index', тобто в нашому модулі Site.
В цьому ж файлі ми видаляємо рядок
'controllerNamespace' => 'frontend\controllers'

Це необхідно зробити, тому що тепер в кожному модулі будуть визначатися свої неймспейсы для контролерів. Поговоримо про це далі.
Так як ми хочемо, щоб наші модулі були максимально незалежні один від одного, і їх можна було використовувати від проекту до проекту (одні підключати модулі до проекту, а інші відключати), будемо підтримувати в модулі функціонал фронтенда і функціонал управління контентом модуля в частині адміністратора. Тому контролери, моделі і view кожної з цих частин ми будемо зберігати в окремих каталогах. Структура каталогів модуля буде наступна:
...
site
-- controllers
-- -- backend
-- -- frontend
-- models
-- -- backend
-- -- frontend
-- views
-- -- backend
-- -- frontend
...

Відповідно, наявні вже у нас в модулі контролер і view, необхідно перенести у відповідні папки frontend і не забути змінити namespace в контролері namespace modules\site\controllers\frontend;
Код файлу модуля ми перепишемо так, щоб було зрозуміло, до якого контролеру йому звертатися при роботі на фронтенде, і до якого при роботі в панелі адміністратора. Таким чином на фронтенде він буде звертатися до контроллера в папці /modules/site/controllers/frontend, а при роботі в адмін-панелі задіяти контролер в папці /modules/site/controllers/backend.
<?php

namespace modules\site;

/**
* site module class definition
*/
class Module extends \yii\base\Module
{
/**
* @inheritdoc
*/
public $controllerNamespace = 'modules\site\controllers\frontend';

/**
* @var boolean Якщо модуль використовується для адмін-панелі.
*/
public $isBackend;

/**
* @inheritdoc
*/
public function init()
{
parent::init();

// Це тут для того, щоб перемикатися між frontend і backend
if ($this->isBackend === true) {
$this->controllerNamespace = 'modules\site\controllers\backend';
$this->setViewPath('@modules/site/views/backend');
} else {
$this->setViewPath('@modules/site/views/frontend');
}
}
}

А для того, щоб налаштувати доступ до модуля site на бекенде, потрібно позначити його в конфігураційному файлі бек-ендом \backend\config\main.php наступним чином:
...
'modules' => [
'site' => [
'isBackend' => true,
]
],
...

і замінити рядок
'controllerNamespace' => 'backend\controllers',

на
'defaultRoute' => 'site/site/index',

Тепер можна створювати контролери в папці /modules/site/controllers/backend для бек-ендом. Я перенесу контролер SiteController.php з папки /backend/controllers /modules/site/controllers/backend і заміню в ньому namespace, відповідно.
Після проведення маніпуляцій з рефакторінгу існуючих контролерів, моделей і уявлень і перенесення їх у наш модуль site, він став перетворюватися і купувати наступний вигляд:
image
B цій статті я постарався викласти всі плюси обраних нами технологій для цікавого великого проекту, запропонував спосіб реалізації модульного програми на Yii2 фреймворку. Це перший пост з циклу статей, в яких я хочу поділитися з вами всіма тими способами, які ми використовували при вирішенні різного роду нетипових завдань при розробці даного проекту.
У наступній статті я опишу налаштування роутінга і створення URL за допомогою urlManager для кожного модуля окремо. А також розкласти по поличках процес створення власних правил для специфічних URL за допомогою написання класу, який розширює UrlRuleInterface.
Дякую за увагу!
Матеріал підготовлено: greebn9k(Сергій Грибняк), pavel-berezhnoy(Павло Бережний), silmarilion(Андрій Хахарев)
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.