РАЗРАБОТКА FRONTEND ЧАСТИ КИНОАФИШИ ДЛЯ КОМПАНИИ «И20» ПО МЕДИАФРАНШИЗЕ «ЗВЕЗДНЫЕ ВОЙНЫ» Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.42

Разработка frontend части киноафиши для компании «И20» по медиафраншизе «Звездные войны»

Д. О. Хван1 *, Е. Ю. Воронкин1 1 Сибирский государственный университет геосистем и технологий, г. Новосибирск,

Российская Федерация

* e-mail: klokl.developer@gmail.com

Аннотация. Статья посвящена проблеме разработки клиентской части web-сайта с использованием фреймворка Vue. Цель работы заключается в реализации клиенсткой части, которая будет взаимодействовать с серверной частью web-сайта. Разработка выполнялась на языке программирования Javascript в интегрированной среде разработки Microsoft Visual Studio Code с использованием фреймворка Vue. В результате выполненной работы был изучен фреймворк Vue, сформулированы требования к функциональным возможностям, а также разработан прототип клиентской части web-сайта.

Ключевые слова: клиентская часть, веб-сайт, серверная часть, Vue, Javascript, Microsoft Visual Studio Code, среда разработки

Development of the frontend part of the movie poster for the company "I20" on the media franchise "Star Wars"

D. O. Khvan1 *, E. Yu. Voronkin1

1 Siberian State University of Geosystems and Technologies, Novosibirsk, Russian Federation

* e-mail: k1ok1.developer@gmail.com

Abstract. The article is devoted to the problem of developing the client side of a website using the Vue framework. The purpose of the work is to implement the client part, which will interact with the server part of the website. The development was carried out in the Javascript programming language in the Microsoft Visual Studio Code integrated development environment using the Vue framework. As a result of the work performed, the Vue framework was studied, functional requirements were formulated, and a prototype of the client part of the website was developed.

Keywords: client side, website, server side, Vue, Javascript, Microsoft Visual Studio Code, development environment

Введение

Frontend - это неотъемлемая часть разработки любого веб-приложения. Очередной необходимостью стала разработка frontend части афиши для компании «I20». Необходимо связать frontend часть и backend части. В качестве backend^ у нас берется API.

Для решения данной проблемы были введен ряд задач:

- разработка дизайна сайта;

- выбор языка программирования;

- выбор среды разработки.

Методы и технологии

В качестве графического редактора рассматривались такие, как Photoshop, Figma. Отличительной особенностью Figma является то, что работать с пакетом можно в браузере. В Figma неплохо организована совместная работа над отдельными проектами. При необходимости можно ввести в нужное поле email партнера для совместной работы. Как и в случае с текстовыми облачными редакторами (тот же Google Docs), курсоры всех пользователей проекта подписываются и окрашиваются разными цветами. Работа отслеживается в режиме реального времени. Кроме этого, присутствует возможность оставлять комментарии, которые могут добавлять не только редакторы, но и обычные пользователи. Кроме того, здесь имеется и контроль версий. Можно посмотреть, кто и когда вносил изменения, а также вернуться до необходимой версии всего в пару кликов в случае надобности. Любой элемент создаваемого интерфейса можно выбрать и при необходимости экспортировать. Эта функция значительно сокращает время, которое требуется на экспорт того же элемента в Photoshop. Figma работает с Google Fonts. Это означает, что проблем с недостающими шрифтами больше не будет, из-за отсутствия которых на ПК пользователя, открывающего макет, все шрифты могут слететь на стандартные [8].

В качестве среды разработки была выбрана интегрированная среда разработки (IDE) Visual Studio Code (VSCode). Такая среда разработки как Notepad++ неудобно отображает дерево файлов. В нем неудобно перемещаться между частями объёмного проекта, а также создавать и редактировать несколько объектов сразу. Среда Webstorm платная, также при открытии файла вне проекта запускает новую IDE под данный файл. В Sublime Text практически все полагается на расширения и плагины, даже если вы доведёте Sublime Text до оптимального состояния. Sublime Text требует от своих пользователей установки диспетчера пакетов, прежде чем даже начать процесс кодирования. Затем пользователи должны узнать, какие плагины, расширения и пакеты лучше всего улучшают их работу. Имея всего 30-дневный пробный период, прежде чем потребуется купить эту полную лицензию за 80 долларов. Самая частая жалоба на редактор Atom - скорость. Atom иногда тормозит при работе с длинными списками расширений, файлов и плагинов. VS Code - это бесплатный редактор с множеством возможностей для кастомизации. Популярность использования данной IDE гарантирует поддержку редактора от Microsoft и нахождения решения популярных проблем в интернете [5].

В качестве языка программирования был выбран язык Javascript. По сей день во fmntend-разработке почти всегда проекты выполняются на языке Javascript. По техническому заданию от компании «I20» проект должен быть написан с использованием фреймворка VueJS. Vue - это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-моно-литов, Vue создан пригодным для постепенного внедрения [2].

Дополнительно, для получения данных от backend была использована библиотека Axios.

Итак, при разработке дизайна была выбрана темно-серое цветовое оформление сайта. В «шапке» сайта расположен логотип и ссылки на фильмы, актеров и корабли с соответствующим названием. Дизайн был разработан для трех устройств: ПК, планшеты и мобильные устройства. Стили писались на препроцессоре Sass/Scss.

Далее выделили 3 сущности и полученные данные по каждой сущности расположили списком в соответствующих разделах. Был добавлен поиск по свойствам каждой сущности. К примеру, для сущности «Фильмы» можно увидеть ниже:

// Поисковик фильма filmSearchHandler() { if (this.searchFilm === '') { this.filteredFilms = this.films;

}

const regexp = new RegExp(this.searchFilm, 'i');

if (typeof this.searchFilm === 'string') this.filteredFilms = this.films.filter((good: any) => regexp.test(good.title));

if (parselnt(this.searchFilm) > 0 && parselnt(this.searchFilm) < 10) this.filteredFilms = this.films.filter((good: any) => regexp.test(good.episode_id));

if (typeof this.searchFilm !== 'string' && parselnt(this.searchFilm) > 9) this.filteredFilms = this.films.filter((good: any) => regexp.test(good.release_date)); },

Список состоит из 10 элементов, но так как элементов в некоторых сущностях более 10, то была добавлена пагинация для переключения между элементами. Например, сущность «Актеры» можно увидеть на рис. 1.

Рис. 1. Сущность «Актеры»

Каждую сущность мы формируем в отдельном компоненте и импортируем в основное приложение.

В итоге мы реализовали 3 списка по сущностям «Фильмы», «Актеры», «Корабли», в каждом из которых находится до 10 элементов, поисковая строка и пагинация (рис. 2).

Фильмы Актеры Корабли

ÂèMHËi

ПОММЫ

m m

ПОДДЕРЖКА ПОЛЬЗОВАТЕЛЕЙ

•ттна 1* mm

ПОЛЬЗОВАТЕЛЯМ И ПАРТЕРАМ

□ □ Е! ®

• 2Ш1 kirfUlikWMMi

Рис. 2. Конечный результат работы 259

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1. Vue.js для сомневающихся. Все, что нужно знать // Хабр. - URL: https://habr.com/ru/post/329452/ (дата обращения: 23.10.2021). - Текст электронный.

2. Введение во VueJS // Vue.js. - URL: https://vueframework.com/docs/v3/ru/ru/guide/ introduction.html (дата обращения: 24.10.2021). - Текст: электронный.

3. Используем Axios для доступа к API // Vue.js. - URL: https://ru.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html (дата обращения: 28.10.2021). -Текст: электронный.

4. Основы Sass // Saas. - URL: https://sass-scss.ru/guide/ (дата обращения: 23.10.2021). -Текст: электронный.

5. Visual Studio Code глазами WordPress-разработчика // Skillbox. - URL: https://skillbox.ru/media/code/visual-studio-code-glazami-wordpressrazrabotchika/ (дата обращения: 23.10.2021). - Текст: электронный.

6. Visual Studio Code - Обзор редактора, возможности, настройка и сниппеты // WebDesign Master. - URL: https://webdesign-master.ru/blog/tools/2018-03-18-visual-studio-code.html (дата обращения: 23.10.2021). - Текст: электронный.

7. 10 лучших JavaScript IDE (и редакторов кода) на 2022 год // Best Programmer. - URL: https://bestprogrammer.ru/izuchenie/10-luchshih-j avascript-ide-i-redaktorov-koda-na-2022-god (дата обращения: 23.10.2021). - Текст: электронный.

8. Чем Figma лучше Photoshop для разработки веб-интерфейсов // Хабр. - URL: https://habr.com/ru/company/skillbox/blog/359258/ (дата обращения: 23.10.2021). - Текст: электронный.

9. Какие языки программирования нужны веб-разработчику в 2021 году // Skillbox. - URL: https://skillbox.ru/media/code/kakie-yazyki-programmirovaniya-nuzhny-vebrazrabotchiku-v-2021-godu/ (дата обращения: 23.10.2021). - Текст: электронный.

10. Axios или Fetch: чем пользоваться в 2019 году? // Хабр. - URL: https://habr.com/ru/company/ruvds/blog/477286/ (дата обращения: 28.10.2021). - Текст: электронный.

© Д. О. Хван, Е. Ю. Воронкин, 2022