Сайт визитка на Angular. Введение

Данный цикл статей — «‎Сайт визитка на Angular»‎ будет посвящен разработке приложению на Angular, которое будет представлять собой каталог с товарами, корзиной и формой оформления заказа.

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

Демо: https://banshop.fafn.ru/

Онлайн магазин Banshop

Процесс разработки

В данный цикл войдут следующие статьи, которые будут посвящены следующим модулям:

1. Создание Angular приложения.
2. Создание core библиотек.
3. Создание UI KIT.
4. Реализация модуля товаров.
5. Реализация модуля корзины.
6. Реализация модуля заказа.
7. Реализация модуля чата.
8. Страницы ошибок.
9. Настройка локализации.
10. Настройка SEO.
11. Настройка SSR.
12. Тестирование.
13. Заключение.

В первой статье вкратце описан процесс создания нового Angular приложения.

Вторая статья посвящена описанию “core” модулям, которые будут использоваться в приложении.

Третья статья расскажет о принципах создания UI KIT — общих компонентов, которые будут использоваться в приложении. Примеры компонент из ui-kit: сетка, контейнер, карусель, базовый лейаут приложения, а также еще несколько директив для задания стилей компонентам.

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

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

Шастая статья реализовывает страницу оформления заказа, которая содержит форму с данными о клиенте, а также списком выбранных товаров.

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

Восьмая статья посвящена созданию страниц ошибок, а также настройке и генерации локализации.

Девятая статья посвящена настройке локализации в Angular приложении.

Десятая статья посвящена базовой SEO настройки приложения, которая добавляет карту сайта, мета теги и robots.

Одиннадцатая статья направлена на обзор реализации Server Side Rendiring’а с помощью NodeJS, частности express. В статье будет приведена реализация сервера вместе с корректными настройками prerender’а.

Двенадцатая статья посвящена тестированию приложения.

В последней статье произведен обзор проделанной работы, в котором приведен обзор структуры и описание реализованного функционала.

Техническое задание

Само понятие сайт визитка достаточно расплывчатое. В данном случае под сайтом визиткой будем подразумевать небольшое приложение, в котором есть каталог товаров, корзина и возможность оформить заказ.

Можно сформировать базовый набор модулей, которые должны быть в приложении:

• Модуль товаров, где товары должны быть представлены в виде списка и отдельной страницы с подробным описанием;
• Модуль корзины, в которую можно будет добавить товар, где при добавлении в корзину возможно указать дополнительные параметры (размер, цвет и прочее);
• Модуль заказа, где будет форма с данными о клиенте и списком товаров добавленных в корзину;
• Модуль чата (службы поддержки). Раздел в котором можно будет задать вопрос о товарах и услугах;
• Модуль правовой информации. Страница, на которой будет представлена информация о продавце и процессе продажи товаров.

Приложение должно быть ориентированное 3 основные платформы:

• handset — приложение для мобильных устройств;
• tablet — приложение для планшетов;
• web — приложение для персональных компьютеров (PC).

Так как Angular это javascript фреймворк, то необходимо реализовать SSR, то есть генерацию статичных страниц, которые можно будет индексировать.

Предметная область

В качестве товаров использовать спортивную обувь — кроссовки.

Каталог товаров должен быть реализован с помощью таблички, например, в Google Sheets.

В таблице будут содержаться следующие поля:

• slug — короткий путь к товару;
• name — наименование товара;
• slogan — слоган или промо текст;
• price — цена;
• sizes — размеры через “,”;
• description — описание товара
• images — список изображений, разделенных переносом строки (\n).

Пример итоговой таблицы:

Функциональность системы

Главная страница приложения должна включать в себя список товаров, которые отображаются в виде сетки. В зависимости от платформы, сетка будет следующей:

• handset — 1 товар в линии;
• tablet — 2 товара в линии;
• web — 3 товара в линии.

Карточка товара должна включать в себя:

• name — наименование;
• price — стоимость товара;
• carousel— карусель изображений товара;
• buttons — кнопки купить и подробнее о товаре.

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

Страница корзины должна содержать список выбранных товаров с возможностью изменения задаваемых характеристик (размеры, цвета), а также иметь возможность удаления товара из корзины.

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

Страница оформления заказа должна содержать список покупок, а также форму, которую необходимо заполнить пользователю приложения для оформления заказа.

Форма заказа должна содержать следующие поля:

• name — ФИО (полное имя клиента);
• phone — телефон;
• email — электронный адрес;
• city — город;
• address — адрес клиента;
• postcode — почтовый индекс.

Страница поддержки должна быть переставлена в виде чата, аналогично любому современному мессенджеру, например, Telegram’у.

Страница правовой информации должна содержать простой текст с условиями покупки товаров и услуг.

Ссылки

Следующая статья — Создание Angular приложения.

Все исходники находятся на github, в репозитории:

GitHub - Fafnur/banshop: Пример сайта визитки на Angular, вместе с Angular Universal и локализацией

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — article.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln