CC BY
164РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЙ С ИСПОЛЬЗОВАНИЕМ ANGULAR.JS, NODE.JS, MONGODB НА ПРИМЕРЕ СИСТЕМЫ ПСИХОЛОГИЧЕСКОЙ ПОДДЕРЖКИ СТУДЕНТОВ - УЧАСТНИКОВ
ПРОГРАММЫ «ПОЛЕТ» Гордеев С. Ю.1, Тимофеев А. В.2, Козлов В. В.3
1 Гордеев Сергей Юрьевич - студент;
2Тимофеев Александр Вадимович - доцент;
3Козлов Вячеслав Васильевич - кандидат технических наук, доцент, декан, кафедра информационных развивающих и образовательных систем и технологий, факультет информационных систем и технологий, Самарский государственный технический университет, г. Самара
Аннотация: в статье рассматривается процесс проектирования, разработки и разворачивания на удаленном сервере веб-приложения для психологического мониторинга участников межвузовской программы «ПОЛЕТ» по поддержке студентов, магистрантов, аспирантов, молодых ученых и специалистов в сфере науки, техники и технологий, с использованием фреймворка Angular.js, платформы Node.js и системой управления базами данных MongoDB. Приведен обзор принципов работы, основных возможностей и преимуществ использованных инструментов и технологий.
Ключевые слова: SPA, Node.js, JavaScript, Angular.js, Mongo DB, монитеринг, ПОЛЕТ, приложение.
Областная научно-образовательная программа ПОЛЕТ — программа по поддержке студентов, магистрантов, аспирантов, молодых ученых и специалистов в сфере науки, техники и технологий. Основная задача «ПОЛЕТА» — выявить и помогать в развитии творчески одаренным представителям молодежи, проявляющим интерес к технической науке. Участники, которые успешно справятся с индивидуальными исследовательскими проектами по предложенным научными консультантами темам, попадут в губернаторский реестр и смогут рассчитывать на индивидуальную поддержку для дальнейшего творческого роста.
Одним из важных компонентов программы ПОЛЕТ является психологическая поддержка участников. В ходе проведения программы была организована непосредственная работа с участниками, направленная на помощь в определении ряда психологических характеристик участников решение различного рода психологических проблем, связанных с трудностями в межличностных отношениях, творческой и учебной деятельности.
Для поддержки и мониторинга результатов работы психологов было решено разработать систему, доступную в интернете, предоставляющую функционал для организации групп участников во главе с психологами, работающими с этими группами и позволяющую психологам проставлять изменяющиеся с течением времени характеристики участников. Также система должна содержать модуль анализа полученных данных и вывода графиков по различным параметрам.
Выбор инструментов
Для решения поставленной задачи было решено создать SPA (Single Page Application -веб-приложение или веб-сайт, использующий единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript без перезагрузки всей страницы) [1]. Для создания современных SPA на стороне клиента существует множество фреймворков, одним из которых является Angular.js его мы и используем для кдиетской части нашего приложения. Angular предоставляет большие возможности для реализации сложных веб-приложений. В частности основными возможностями являются связывание данных модели и представления, разбиение приложения на модули, поддержка шаблонов, функции для удобной работы с promise, http-запросами. Подробнее о Angular.js можно узнать из многочисленных материалов на просторах интернета, а также из официального сайта
https://angularjs.org/api [2]. Помимо Angular.js существует множество других frontend фреймворков, такие как React, Ember, Vue, Backbone. Преимущество Angular перед ними состоит в наличии многих инструментов «из коробки», гибкости в организации потоков данных и создании сложных интерфейсов и большим количеством доступных расширений.
Клиент приложения на этапе разработки представляет собой множество разрозненных CSS, HTML, JS файлов, чтобы иметь возможность использовать их все вместе нужна система сборки фронтенда, мы будем использовать Webpack, с помощью него мы сможем собрать все js файлы в один бандл, использовать css препроцессоры, такие как Sass, а так же у нас появится возможность для модульного разбиения html и подключения его в js функцией require (). Официальная документация по webpack находится здесь https://webpack.github.io/docs/ [3]. Аналогами webpack являются такие системы сборки как Gulp.js и Grunt.js, но возможности webpack существенно шире, чем у конкурентов, в частности, имеется возможность анализа и преобразования кода с помощью loaders.
Для написания серверной логики мы будем использовать Node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода [4]. Также Node.js поставляется вместе с пакетным менеджером NPM, с помощью которого вы можете быстро получить доступ к сотням тысяч готовых модулей под разные нужды. Используя NPM можно удобно управлять всеми внешними зависимостями вашего приложения, имея возможность автоматически загрузить их в директорию node_modules в папке вашего проекта c помощью команды npm install. Для написания серверов веб приложений также используются такие языки как Java, PHP, C#, Python. Среди преимуществ Node.js можно выделить асинхронность, неблокирующий ввод-вывод, производительность, возможность написания изоморфных приложений, используя один код на клиенте и на сервере.
Так же нам потребуется база данных, выбор пал на Mongo DB — документированную NoSQL базу данных, хранящую информацию в виде JSON документов. По сравнению с реляционными базами данных документированные БД имеют преимущество в скорости работы и меньшим занимаемом месте на диске. Для аутентификиции пользователей будет использоваться концепция JWT (JSON Web Token).
Для общения между клиентом и сервером мы будем придерживаться REST - это стиль архитектуры программного обеспечения, при котором сервер не хранит состояние клиента, а каждый запрос от клиента к серверу содержит в себе исчерпывающую информацию о желаемом ответе сервера.
Действия над данными задается с помощью методов: GET (получить), PUT (добавить, заменить), POST (добавить, изменить, удалить), DELETE (удалить). Таким образом, действия CRUD (Create-Read-Updtae-Delete) могут выполняться как со всеми 4-мя методами, так и только с помощью GET и POST. Использование REST методологии предоставляет преимущества в виде простоты, масштабируемости, надежности и производительности ваших сервисов.
Архитектура системы
Для описания начального функционала системы целесообразно составить диаграмму вариантов использования системы (рис. 1).
Рис. 1. Диаграмма вариантов использования системы Определим структуру базы данных (рис. 2).
Рис. 2. Схема данных базы системы
Клиентская часть
Для поддержания масштабируемости, удобства внесения изменений и сохранения четкой логической структуры всех модулей клиентской части нашего приложения очень важно правильно выбрать метод разбиения файлов на директории и поддиректории (рис. 3).
bundle.js index.html main. js src
components adnin auth backend 1— services connon
1— directives
- alert
- header
- nav-bar
- preloader
- tool-bar
groups hone raenbers ray-group
piyGroupCtrl. js rcyGroup.htnl nygroup.scss organisations props — psychologs ing
styles
Рис. 3. Структура каталога файлов клиентской части системы
На приведенном скриншоте видна схема файлов клиентской части приложения, рассмотрим подробнее.
• Папка src содержит исходники приложения.
◦ Директория components разбита на поддиректории для каждого модуля приложения, которые условно можно считать страницами. Например, папка my-group содержит файлы, относящиеся к странице «Моя группа», которая предоставляет функционал для просмотра состава группы психолога и проставления участникам группы психологических характеристик. Папка содержит:
■ .html шаблон myGroup.html.
■ .scss файл стилей страницы my_group.scss.
■ .js файл контроллера страницы myGroupController.js, в котором содержится вся логика поведения и управления данными, такая как порядок выполнения запросов к серверу, логика фильтров, обработчики событий и т. п.
◦ Помимо модулей components содержит папку common, в которой определены общие элементы интерфейса в виде angular-директив.
◦ Также есть папка backend в которой определены angular-сервисы, используемые в контроллерах страниц и содержащие код асинхронных http-запросов к бэкенду, особенность angular-сервисов состоит в том что они реализуют паттерн «Синглтон», т. е. это объекты которые имеют только один экзэмпляр своего класса на все приложение, который создается через вызов конструктора на этапе запуска приложения.
• Папка img, в котрой хранятся изображения, в основном иконки в формате.svg.
• Папка styles, в которой хранятся общие стили для всего приложения.
Серверная часть
Для начала определимся с тем, что же в общих чертах должен делать сервер нашего приложения. Все достаточно просто: по GET запросу к ряду url-адресов сервер должен отдавать все статической содержимое клиентской части (index.html, bundle.js, изображения) — функционал статического сервера. По ряду других url начинающихся с api/ мы реализуем ряд методов, определяющих бизнес-логику системы, а именно операции с сервером базы данных.
Рассмотрим файловую структуру серверной части нашего приложения (рис. 4).
• В файле app.js содержится код запуска express сервера, слушающего запросу к одному из портов.
• В файле config.js определяется конфигурация этого сервера, а именно маршрутизация запросов к методам api, и настройка предоставления клиенту статических файлов.
• В файле passport.js описываются параметры аутентификации пользователей.
• Папка models содержит описания сущностей базы данных (users.js,props.js,groups.js ...), а также код подключания к серверу базы данных.
• Файл index.js в папке routes содержит код маршрутизации запросов к методам api, которые, в свою очередь, реализованы в файлах папки controllers.
^—' au^he^ ^ js
Рис. 4. Структура каталога файлов серверной части системы
Разворачивание сервера системы
Для того чтобы опубликовать нашу систему в интернете было решено воспользоваться бесплатными функциями облачной интернет-платформы Heroku, которая помимо Node.js поддерживает также языки Java, Ruby, Scala, PHP и д.р. Приложения, работающие на Heroku, используют также DNS-сервер Heroku (обычно приложения имеют доменное имя вида «имя_приложения.heшkuapp.com»). Для каждого приложения выделяется несколько независимых виртуальных процессов, которые называются «dynos». Они распределены по специальной виртуальной сетке («dynos grid»), которая состоит из нескольких серверов.
24
Помимо этого есть удобная возможность настроить автосборку приложения из git -репозитория [5]. В итоге разработанная система была успешно размещена и теперь доступна по домену psychopass.herokuapp.com. Система продолжает эксплуатироваться в рамках программы «ПОЛЕТ», в планах по развитию системы находится создание модуля анализа данных участников для получения статистики по различным параметрам, функционала, помогающего психологам в определении характеристик участников, а также ряда доработок существующего функционала.
Список литературы
1. Миковски Майкл, Пауэлл Джош. Разработка одностраничных веб-приложений // ДМК Пресс, 2014. 512 с ISBN 978-5-457-83457-6.
2. Официальная документация по Angular.js. [Электронный ресурс]. Режим доступа: https://angularjs.org/api/ (дата обращения: 09.01.2017).
3. Официальная документация по Webpack. [Электронный ресурс]. Режим доступа: https://webpack.github.io/docs/ (дата обращения: 09.01.2017).
4. Итан Браун. Веб-разработка с применением Node и Express. Полноценное использование стека JavaScript // Санкт-Петербург: Питер, 2017. 336 с. ISBN 978-1-49194930-6.
5. Национальная библиотека имени Н. Э. Баумана. [Электронный ресурс]. Режим доступа: http://ru.bmstu.wiki/Heroku/ (дата обращения: 09.01.2017).
ВЛИЯНИЕ ПОСЛЕДУЮЩЕЙ ФИЛЬТРАЦИИ ПРИ ОТДЕЛЕНИИ ДИСПЕРСНОЙ ФАЗЫ, ОБРАЗОВАННОЙ В ПРОЦЕССЕ ЭЛЕКТРОФЛОТАЦИИ РЗМ (ЛАНТАНА) Тангалычев Р. Д.
Тангалычев Роман Данилович - магистрант, кафедра технологии электрохимических производств, факультет химических технологий, Казанский национальный исследовательский технологический университет, г. Казань
Аннотация: исследован процесс фильтрации дисперсной фазы в виде студнеобразного осадка, полученного в ходе электрофлотации нерастворимых соединений лантана. Установлен частный подбор фильтрующих приспособлений и видов фильтровальной бумаги. Показано влияние процесса фильтрации на степень извлечения оксалата лантана (при разных степенях кислотности среды), как индивидуальной системы, так и с добавками ПАВ и флокулянтов (катионного, анионного и неионогенного типов). Все опыты проведены в условиях студенческой лаборатории.
Ключевые слова: фильтрация, электрофлотация, лантан, ПАВ и флокулянты.
УДК 544.6
Введение
Фильтрование имеет цель количественное отделение от маточного раствора полученного осадка, называемого «осаждаемой формой». Характер фильтрования зависит от формы осадка и его свойств. Малокристаллические и студнеобразные осадки лучше всего отделять от маточного раствора, применяя бумажные фильтры.
При фильтровании дисперсной фазы, содержащей лантан в форме агрегатов различных типов и состава, используется обеззоленный фильтр типа «Синяя лента» (ТУ 2642-00168085491-2011), являющийся наиболее плотным (размер пор) из серии обеззоленных фильтров.
Обеззоленные фильтры, применяемые в весовом анализе, изготавливаются из бумаги, специально обработанной соляной и фтористоводородной кислотами для удаления минеральных примесей. После сжигания или прокаливания дисперсной фазы, на таком
