Разработка сайта для компании «Мелита-К» в контексте AS-IS и TO-BE
Введение
Сайт – один из основных инструментов для интерактивного взаимодействия с целевой аудиторией, представленной реальными или потенциальными клиентами и партнерами. От наполнения, организационной структуры, принципов работы и эффективности функционирования зависит не только развитие компании и верное позиционирование ее бренда в глазах клиентов, но и внутренние процессы, формирующие основу деятельности компании [1].
Согласно аналитическому отчету по результатам исследования рынка электронной коммерции экспертами digital-агентства E-Promo от 2021 года, «прогнозное значение объема рынка e-commerce в России в 2025 году — 7,5 трлн руб. Средний прирост год к году (CAGR) в периоде 2020-2025 гг. прогнозируется в размере 22,8%» [2, c.34]. Следовательно, на данный момент происходит рост актуальности разработки и использования функционала интернет-магазинов, а также увеличивается необходимость мелким и средним торговым предприятиям переходить в онлайн-формат.
Оглавление
Введение2
Глава 1. Изучение предметной области4
1.1Анализ производственно-хозяйственной деятельности организации ЗАО «Мелита-К»4
1.2 Обзор существующего сайта компании (AS-IS)8
1.3 Определение требований к разработке нового сайта компании12
Глава 2. Обзор инструментов разработки15
2.1 Стек MEAN15
2.2 Графический редактор Figma19
Глава 3.Разработка сайта20
3.1 Создание макета пользовательской части сайта и его прототипирование20
3.2 Реализация основного пользовательского интерфейса.26
3.2.1 Страница «Каталог товаров»27
3.2.2 Страница «Отдельный товар»30
3.2.3 Страница «Корзина товаров»35
3.2.4 Страница «Авторизация пользователя»39
3.2.5 Страница «Регистрация пользователя»39
3.2.6 Страница «Оформление заявки»41
3.2.7 Страница «Список заявок»43
3.3 Разработка серверной части приложения44
3.3.1 Подключение к MongoDB Atlas46
3.3.2 Создание API47
3.4 Реализация дополнительного функционала52
Глава 2. Описание структуры страниц пользовательского интерфейса разработанного сайта (TO-BE)60
Заключение66
Список литературы67
Список литературы
Лурье П. Зачем бизнесу сайт и каким он должен быть [Электронный ресурс] / Тинькофф Журнал. П. Лурье, О. Лурье – 2022. – Режим доступа: https://journal.tinkoff.ru/guide/zachem-biznesu-sayt/, свободный (Дата обращения 27.04.2023);E-commerce 2021. Аналитический отчет по результатам исследования [Электронный ресурс] // Сайт Digital Research Агентство E-Promo. – E-Promo Data Driven Marketing Agency. – Режим доступа: https://174804.selcdn.ru/epromo-static/2021/E-COMMERCE%202021.pdf, свободный (Дата обращения 27.04.2023);
Мелита-K. Ножи для жизни [Электронный ресурс]. / ЗАО «Мелита-К» – Режим доступа : https://www.melitak.ru/, свободный (Дата обращения 27.04.2023);
Тинькоф. Проверка контрагентов. ЗАО "Мелита - К" [Электронный ресурс]. – Режим доступа : https://www.tinkoff.ru/business/contractor/legal/1021602849553, свободный (Дата обращения 27.04.2023);
Как должна выглядеть главная страница интернет-магазина? Структура + примеры [Электронный ресурс] / Крупнейшая платформа для предпринимателей и высококвалифицированных специалистов малых, средних и крупных компаний vc.ru – 2020. – Режим доступа: https://vc.ru/seo/155049-kak-dolzhna-vyglyadet-glavnaya-stranica-internet-magazina-struktura-primery, свободный (Дата обращения 27.04.2023);
Методология функционального моделирования IDEF0. Руководящий документ. – Москва: ИПК Издательство стандартов, 2000. – 75 с. – Режим доступа: https://advanced-quality-tools.ru/assets/idef0-rus.pdf, свободный (Дата обращения 27.04.2023);
Веб-дизайн. Аспекты и тренды в 2022 году [Электронный ресурс] / Крупнейшая платформа для предпринимателей и высококвалифицированных специалистов малых, средних и крупных компаний vc.ru – 2022. – Режим доступа: https://vc.ru/u/951159-pride-web-development/452074-veb-dizayn-aspekty-i-trendy-v-2022-godu, свободный (Дата обращения 27.04.2023);
Web-дизайн: искусство создания привлекательных и удобных сайтов [Электронный ресурс] / Крупнейшая платформа для предпринимателей и высококвал
3.2 Реализация основного пользовательского интерфейса.
Любое приложение Angular состоит из компонентов, которые его формируют подобно строительным блокам [18]. Именно компоненты определяют пользовательский интерфейс. Angular автоматически создает корневой компонент, а затем по мере развития приложения формируется целое дерево вложенных компонентов.
В приложении были созданы следующие компоненты (рисунок 14):
17 компонентов для формирования основного содержания 17 страниц сайта (например, главная страница сайта, страница с каталогом, страница с корзиной и т.д.)
16 компонентов для формирования таких элементов, которые так или иначе повторяются на различных страницах (например, шапка и подвал сайта, заголовки и т.д.)
Рисунок 14 – Компоненты проектаВ результате выполнения команды по созданию компонента генерируются следующие файлы:
HTML-шаблон, который объявляет, что отображается на странице;