Коммуникационная площадка для выпускников Томского политехнического университета

Результат Процесс

Вводные данные от клиента

Ознакомились с действующим сайтом и требованиями к разработке. В ходе встреч обсудили и зафиксировали возможные идеи расширения функционала социальной сети. Учитывая сроки проекта, многие идеи (краудфандинг+эндаумент, билдер резюме и вакансии партнеров) отложили на развитие проекта.

Исследование

Изучили целевую аудиторию сайта, выделили ключевые типы пользователей и их потребности.

Концепция

Поскольку главная задача проекта — разработка коммуникационной площадки, мы продумали две части сайта: публичную часть и личный кабинет. Открытая часть, доступная всем пользователям, даже не имеющим отношения к университету, рассказывает о достижениях выпускников Томского политехнического, целях проекта. В личном кабинете выпускник может найти своих друзей, вступить в группы, организовать встречи, обменяться личными сообщениями, опубликовать фотографии и оставить комментарии на страницах встреч и групп, пригласить друзей вступить в группу и отправить заявку на поиск выпускника, который еще не зарегистрировался на сайте.

 

Информационная архитектура

Информационную архитектуру сайта разработали с учетом развития проекта и совместно с заказчиком определили объем работ для первого этапа проекта. На этом этапе мы полностью обновили функциональные возможности проекта и связи между модулями.

Для утвержденного функционала разработали интерактивные прототипы, отражающие способы взаимодействия между объектами и страницами. Прототипы адаптивные под мобильный телефон и планшет.

Дизайн

С учетом комментариев клиента и предоставленного «Руководства по использованию фирменного стиля для Томского политехнического университета» приступили к визуальной части.
Перебрав несколько вариантов


окончательный вид главной страницы приобрел следующий вид.

Основная работа пришлась на личный кабинет. Нарисовали около 40 уникальных страниц, адаптируемых под различные устройства.

Фронтенд

Для проекта «Выпускники ТПУ» разработали компонентную архитектуру. Она позволяет повторно использовать наработки для создания интерфейсов в подобном графическом стиле. В дальнейшем она же использовалась на сайте ТПУ.

Для реализации компонентной архитектуры использовали инструменты: Webpack, Gulp, SASS, PostCSS, шаблонизатор Twig, библиотека React. Сложные компоненты интерфейса, которые должны работать без перезагрузки страницы, такие как форма регистрации, сообщения пользователя, стена в группах и встречах, фотоальбомы, разрабатывались с использованием библиотеки React.

Бэкенд

Программную серверную часть реализовали на языке PHP, с использованием фреймворка Yii 2,
применили advanced-шаблон с разделением backend и frontend частей, как отдельных приложений. В качестве СУБД, по требованиям заказчика, использовали Oracle Database.

Разработку проводили в тесном сотрудничестве с техническими специалистами заказчика.

Одна из целей разработки — максимальная интеграция с уже существующим функционалом заказчика, а также максимальная автономность и унификация разрабатываемого функционала для последующего использования в смежных проектах. Обеспечили это разнесением различных частей функционала по независимым модулям, которые являются отдельными composer-пакетами.
Для хранения, менеджмента, ревью и управления версионностью кода использована платформа GitLab, развернутая на стороне заказчика.
Такой подход позволил сделать ядро проекта частью обширной централизованной системы, которое может использоваться в будущем, как независимый модуль.

Ключевая особенность главной посадочной страницы — интеграция геоданных о проживании выпускников университета с наложением их на карту.
Для её реализации использовали технологию серверной кластеризации яндекс карт, она рассчитывает количество выпускников на определенном масштабировании карты — по улицам, городам, регионам, странам. Это помогло оптимизировать фронтенд-часть страницы и снизить нагрузку на клиентский браузер. Такое решение в условиях постоянного увеличения числа участников является удобным и масштабируемым. Для определения координат выпускников использовали базу OpenStreetMap (OSM).


Менеджмент

Процесс работы был выстроен водопадным методом и для контроля сроков был составлен план работ, который мы успешно выполнили. Кроме прочего, держали клиента в курсе проводимых работ через еженедельные отчеты.

Ошибки и работа над ними

Когда сайт был запущен, внутри студии провели презентацию проекта и ретроспективу, где проанализировали проделанную работу и сделали выводы.
Главные достижения на проекте:

  • «прокачали» технологии: Yii2, Oracle, React, Webpack, компонентная архитектура фронтенда, PostCSS;
  • заключили договор на второй этап;
  • уложились в дедлайн, при том что на проект было выделено 4 месяца.

Развитие

Проект не ушел от нас в свободное плавание, а продолжает развиваться вместе с нами:)

Результат Процесс
Плюсануть
Поделиться

Корпоративная социальная сеть с системой личных сообщений, диалогами в группах, созданием встреч и другими возможностями коммуникационной площадки.