GoFundYourself. Як створювався новий сайт кафедри

Автор: Чешун Дмитро Вікторович

Дата публікації: 9 грудня 2015 р. 19:03:30 GMT / Категорія: Студенстська активність

GoFundYourself. Як створювався новий сайт кафедри

Усім привіт! Сьогодні хочемо розповісти про те, як відбувалось створення нового сайту кафедри КСМ.

Ідея виникла восени 2014 року, коли один з випускників кафедри Максим Урода (зараз Magento-розробник компанії Atwix) вирішив зібрати групу зацікавлених студентів та разом розробити новий сайт кафедри. Було зібрано групу студентів другого та третього курсів напрямку "Комп'ютерна інженерія". Так як студенти на той час ще не володіли необхідними навичками та знаннями - Максим вирішив спочатку зайнятися підготовкою, для того, щоб майбутні розробники оволоділи необхідними знаннями та знаходились прибизно на одному рівні, необхідному для того щоб почати роботу над проектом.

Опрацювання необхідного матераілу було поділено на 5 етапів, від простого до найскладнішого. На кожен етап відводилось в середньому 1-2 тижні. Після чого студенти відправляли короткі звіти у вигляді скріншотів та опису того що було вивчено та зроблено. По завершенні кожного етапу студенти навіть отримували оцінки :)

До вивчення було включено:

  • Для початку способи концентрації уваги та організації робочого процесу - Pomodoro
  • Linux, робота з терміналом, встановлення та налаштування веб сервера Apache і т.д.
  • Системи контролю версій - Git (відповідно створення акаунтів на Github та Bitbucket, робота з ними)
  • Вивчення HTML/CSS та JS, після чого Bootsrtap та JQuery
  • Вивчення PHP та MySQL, мова SQL
  • ООП
  • На останньому етапі студенти, які не здались почали вчити Yii2 framework

Останній етап навчання було завершено 10 січня 2015 року, студенти були готові до роботи над проектом.

Після завершення зимових канікул та обговорення деталей проекту розпочався процес розробки, якого ми так довго чекали. У команді було: 4 студента та Максим. 

Atwix, Робота над сайтом кафедри КСМ
Atwix, Робота над сайтом кафедри КСМ, студенти

 

Проте, у зв'язку з наватаженням під час навчання у студентів та браком вільного часу у Максима робота над проектом відбувалась досить повільно. 

26 жовтня 2015 року було запущено бета версію проекту, доступну за посиланням "www.ksm.khnu.km.ua".

Далі розповімо Вам більш детально про сам проект.

Сайт було написано з нуля, без використання готових CMS таких як WordPress, Drupal, DLE тощо. Сайт має власну унікальну адмін панель, яка містить всі необхідні функції для управління контентом саме сайту кафедри.

Адмін панель сайту кафедри КСМ, головна

Адмін панель містить такі основні розділи:

  • CMS – Включає можливість створення, редагування, видалення сторінок сайту. Також налаштування головної сторінки, редагування контенту слайдера.
  • Меню – даний розділ містить функціонал, який дозволяє змінювати структуру меню сайту, змінювати порядок посилань, додавати сторонні посилання тощо.
  • Викладачі – дозволяє повністю редагувати інформацію про викладачів, їх статті, публікації, наукову діяльність, дисципліни. Даний розділ є особливістю створеної невеликої CMS для сайту кафедри та містить досить гнучкий та широкий функціонал.
  • Блог – дозволяє виконувати додавання, редагування, видалення, та налаштування статей блогу кафедри, а також здійснювати управління розділами блогу.
  • Користувачі - управління користувачами сайту та їх превілегіями.
  • Налаштування – розділ містить всі необхідні налаштування сайту.

Адмін панель сайту кафедри КСМ, викладачі

Адмін панель сайту кафедри КСМ, редагування біографії

Таким чином, розроблена система управління контентом сайту в майбутньому може бути взята за основу для розробки більш розширеної системи, не тільки для кафедри КСМ ХНУ, а як більш універсальна система для інших кафедр університету.

yii2 сайт

За основу для розробки backend частини сайту було взято Yii Framework 2. Yii2 - це високопродуктивний веб-фреймворк, написаний на PHP, реалізує парадигму модель-вид-контролер (MVC). Yii — скорочення від «Yes It Is!»

Даний фреймворк є відносно простим у вивченні, але в той же час дозволяє стоврювати досить потужні, надійні сучасні веб додатки. Також Yii не виглядає «монстром» порівняно з фреймворками Symfony та Zend Framework :)

Yii2 фреймворк забезпечує шивдкість та зручність роботи з базами даних використовуючи шаблон проектування active record. Active record — це шаблон проектування, що використовується при реалізації доступу до реляційних баз даних. Інтерфейс такого об'єкта включає функції CRUD (Create Read Update Delete), а також поля, що більш чи менш прямо відповідають полям відповідної таблиці в базі даних.

Для організації робочого процесу та забезпечення зручності одночасної роботи над проектом декількома учасниками розробки використовувалась система контролю версій Git. Проект зберігався у віддаленому репозиторії на bitbucket.org. Проект знаходиться за адресою: bitbucket.org/u_maxx/khnu_ksm, де можна побачити вихідний код, історію розробки, wiki тощо.

Проект сайту кафедри КСМ на Bitbucket

Також було встановлено систему Docker, що дозволило швидко налаштовувати робочий проект на будь якому локальному або віддаленому сервері включаючи базу даних. Docker — інструментарій для управління ізольованими Linux-контейнерами.

Docker сайт

Зокрема, Docker дозволяє не піклуючись про формування начинки контейнера запускати довільні процеси в режимі ізоляції і потім переносити і клонувати сформовані для даних процесів контейнери на інші сервери, беручи на себе всю роботу зі створення, обслуговування і супроводу контейнерів.

Завдяки Docker, після того, як була готова робоча бета версія проекту - встановлення та налаштування робочого сайту на віддаленому сервері зайняло не більше ніж пів години.

Для управління проектом було використано систему Trello. Вона використовує парадигму керування проектами, відому як канбан. Проекти являють собою дошки, що містять списки. Списки містять картки, яким відповідають задачі. Картки повинні переходити від одного списку до наступного (за допомогою перетягування), таким чином зображаючи рух якоїсь функції від ідеї, аж до тестування. Картці можуть бути присвоєні відповідальні за неї користувачі. Користувачі та дошки можуть об’єднуватись в "організації".

Дошка трелло КСМ

Дошка нашого проекту містила такі списки (або секції):

  • To Do – Нові завдання, які очікують виконання;
  • Clarification – Завдання, які потребують учонення обо пояслення;
  • Doing – Завдання, які виконуються в даний момент;
  • Wait for testing – Виконані завдання, які готові до тестування;
  • Testing – Завдання, які тестуються в даний момент;
  • Done – Завдання, які пройшли тестування і вважаються виконаними.

Таким чином проект був розбитий на 62 частини(завдання). Кожне завдання мало відповідну кольорову позначку, або навіть декілька (наприклад Зелена – загальне, Синя - backend, жовта – frontend та верстка, червона - виправлення помилок, фіолетова – робота з базою даних). Також до кожного завдання було прикріплено виконавця.

Front-end — розробка інтерфейсу взаємодії з користувачем та відповідного функціоналу.

Back-end — розробка функціоналу сайту пов'язаного з роботою з базами даних, опрацюванням даних тощо. Тобто все те, що приховано від користувача. Наприклад у нашому випадку Back-end був написаний засобами Yii2 фреймворка з використанням серверної мови PHP та баз даних MySQL.

Для обговорення питань пов’язаних з процесом розробки було вирішено використовувати окремий чат – slack.com. 

Чат КСМ

Даний чат надає можливість інтеграції з Trello та BitBucket. В результаті все що відбувалось в цих системах з нашим проетом потрапляло в чат у вигляді повідомлень. Наприклад повідомлення про нове завдання, завдання, яке готове до тестування, новий коміт тощо.

Було зроблено досить велику роботу. Особисто мені даний проект допоміг остаточно визначитись з напрямком розробки, за яким би я хотів працювати в майбутньому. Вдячний учасникам проекту за сумлінну роботу та особливо Максиму за ідею та організацію :)