Разработка веб - приложения на языке javascript для отрисовки графиков функции с использованием библиотеки Gnuplot

1.

Разработка вебприложения на языке
javascript для отрисовки
графиков функции с
использованием
библиотеки Gnuplot
Фиткулин Рамиль Расимович
СГУ им. Н.Г Чернышевского
Факультет КНиИТ
421 группа
Научный руководитель: Трунов А. А.

2.

Целью выпускной квалификационной работы является разработка вебприложения для упрощения взаимодействия с программами для построения
графиков.
Для достижения цели необходимо решить следующие задачи:
1. Систематизировать знания об объекте исследования.
2. Систематизировать знания о технологиях, использованных при
разработке веб-интерфейса для графического плоттера Gnuplot.
3. Выбрать базу данных для работы веб-приложения.
4. Разработать клиентскую и серверную часть веб-приложения.
5. Отрисовывать графики функций с возможностью настройки параметров
через интерфейс пользователя.

3.

Выбор плоттера
Gnuplot поддерживает множество типов графиков как в 2D, так и в 3D. Он
может рисовать с помощью линий, точек, прямоугольников, контуров,
векторные поля, поверхности и различный связанный текст. Он также
поддерживает различные специализированные типы скриптов.
Gnuplot поддерживает множество различных типов вывода: терминалы с
интерактивным экраном (с помощью мыши и горячих клавиш), прямой
вывод на плоттеры или современные принтеры, а также вывод во
многие форматы файлов (eps, emf, fig, jpeg, LaTeX, pdf, png, postscript).

4.

Отображение графиков на Gnuplot
set grid
set title 'test'
set xlabel 'TEST1'
set ylabel 'TEST2'
set xrange [-1:5]
set yrange [-2:10]
plot sin(x), sqrt(x)

5.

Серверная часть веб-приложения
Node.js — это платформа с открытым исходным кодом для работы с
языком JavaScript, построенная на Chrome V8. Она позволяет писать
серверный код для веб-приложений и динамических веб-страниц, а
также программ командной строки. В основе платформы — событийноуправляемая модель с неблокирующими операциями ввода-вывода, что
делает ее эффективной и легкой.
До появления Node.js приложения, которые написаны на языке
программирования JavaScript, можно было запускать только в браузере.
С появлением платформы стало возможно писать на JavaScript не только
в браузере, но и на сервере.

6.

API Запросы к серверной части
GET /api/login?login=log&password=pass - login, return user entity
POST /api/register - register, return user entity
POST /api/templates/plot - plot, return path
GET /api/templates/plot/{id} -plot by id, return path
POST /api/templates - save template, return entity
GET /api/templates/?id=2 - get tempaltes by user id
GET /api/templates/save/?id=2 - get tempalte by invite str, return user entity

7.

Клиентская часть вебприложения
Для написания логики шаблона и взаимодействия клиентской части с API был выбран
фреймворк Vue.js по ряду многих причин:
- Vue.js имеет очень подробную документацию, разобраться в основах Vue.js можно
довольно просто за короткое время.
- Так как на начальных этапах разработки frontend представлял собой верстку, то
декомпозировать ее проще всего было при помощи Vue.js, так как html, css и js будут
представлять собой отдельные фрагменты программы, нет необходимости
переписывать все компоненты на js(jsx), как это пришлось бы делать на React.
- Подключение сторонних библиотек происходит довольно просто, достаточно лишь
указать ссылку на скрипт или скачать необходимую библиотеку с помощью npm.

8.

Дополнительные библиотеки и
модули веб-приложения
- axios — модуль для API запросов к серверной части.
- moment — одна из лучших библиотек для работы с временем и датой в
JavaScript.
- concurrently — библиотека, которая позволяет параллельно запустить
несколько скриптов npm.
- json-server — модуль для создания тестовой базы данных.
- vuex — библиотека глобального состояния для Vue.js.
- router — библиотека для реактивной постраничной навигации в веб
приложении.
- vuelidate — библиотека для валидации полей.

9.

Реализация веб-приложения

10.

Реализация веб-приложения

11.

Реализация веб-приложения

12.

Реализация веб-приложения
sin(x), sqrt(x)
(abs(x)<1) ? 100 : ( (abs(x)<2) ? 50 : ((abs(x)<3) ? 20: 10 ))

13.

Реализация веб-приложения

14.

Реализация веб-приложения

15.

Результаты дипломной работы
В ходе выполнения выпускной квалификационной работы были получены
следующие результаты:
1. Систематизированы знания об объекте исследования.
2. Систематизированы знания о технологиях, использованных при
разработке веб-интерфейса для графического плоттера Gnuplot.
3. Выбрана базу данных для работы веб-приложения.
4. Разработаны клиентскую и серверную часть веб-приложения.
5. Реализована возможность отрисовывать графики функций с
возможностью настройки параметров через интерфейс пользователя.

16.

СПАСИБО ЗА ВНИМАНИЕ!