Сайт визитка на Angular. Заключение.

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

Демонстрация

Сделаем обзор реализованного проекта — создание сайта визитки на Angular.

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

Изменим количество товаров в корзине и удалим часть товаров:

Оформим заказ:

Полный сценарий:

Аналогично на планшете:

И такой же сценарий на телефоне:

Покажем работу чата:

Структура проекта

После выполнения всех модулей и компонентов была получена следующая структура проекта:

Не так много, как могло быть :)

В ходе разработки было реализовано 72 модуля и 2 приложения:

• @banshop/cart/common — общие сущности и интерфейсы для работы с товарами добавленными в корзину;
• @banshop/cart/page — страница корзины;
• @banshop/cart/state — state, который реализует логику добавления, удаления товаров в корзину;
• @banshop/cart/ui/add — кнопка добавления товара в корзину;
• @banshop/cart/ui/card — карточка товара в корзине;
• @banshop/cart/ui/info — блок с выводом количества товаров и общей стоимости;
• @banshop/cart/ui/list — блок вывода списка товаров в корзине;
• @banshop/cart/ui/pipes — набор пайпов для вывода требуемой информации о товарах в корзине;
• @banshop/chat/common — интерфейсы для реализации чата со службой поддержки;
• @banshop/chat/page — страница чата;
• @banshop/chat/state — state, который реализует логику добавления сообщений;
• @banshop/chat/ui/form — форма добавления нового сообщения;
• @banshop/chat/ui/messages — блок, который выводит все сообщения;
• @banshop/chat/ui/pipes — набор пайпов для вывода информации о сообщении;
• @banshop/core/api/service — API сервис, который добавляет методы создания абсолютных путей к API и обертки над ошибками;
• @banshop/core/environments/service — сервис, который предоставляет доступ к environment’ам библиотекам NX’а;
• @banshop/core/forms/extract — набор директив и пайпов для упрощения работы с формами;
• @banshop/core/forms/mask — сервис, который возвращает маски для полей, которые являются телефонами;
• @banshop/core/forms/utils — набор утилит, для отслеживания изменений форм;
• @banshop/core/hammer — класс, который настраивает использование HammerJS;
• @banshop/core/layout/service — сервис, который возвращает текущую отображаемую платформу (handset, tablet, web);
• @banshop/core/meta/common — общие интерфейсы для задания и установки мета тегов на страницах;
• @banshop/core/meta/service — сервис, который устанавливает мета теги;
• @banshop/core/meta/state — state, который отслеживает изменение навигации и при ее окончании меняет мета теги;
• @banshop/core/navigation/common — интерфейсы для унификации путей в Angular приложении;
• @banshop/core/navigation/service — сервис обертка над стандартным роутером, для вывода унифицированных путей;
• @banshop/core/navigation/ui/pipes — набор пайпов для генерации и сопоставления путей;
• @banshop/core/platform/service — сервис, который возвращает тип используемой платформы Angular;
• @banshop/core/storage/common — интерфейсы для кроссплатформенной реализации хранилищ;
• @banshop/core/storage/local — набор сервисов для получения доступа к LocalStorage;
• @banshop/core/storage/memory — сервис, который эмитирует веб хранилище;
• @banshop/core/storage/session — набор сервисов для получения доступа к SessionStorage;
• @banshop/core/store/root — главный Store в приложении, с настроенным RouterState модулем;
• @banshop/core/testing — набор утилит для упрощения тестирования;
• @banshop/core/utils/destroy — сервис утилита для отписки от observable в компонентах;
• @banshop/core/utils/operators — набор кастомных операторов для уменьшения дублирования кода (isNotNullOrUndefind);
• @banshop/core/utils/types — кастомные типы, используемые в приложении;
• @banshop/core/window/service — сервис, который предоставляет кроссплатформенный доступ к Window;
• @banshop/errors/interceptors — набор интерсепторов, которые наблюдают за статус кодами ответов сервера и в случае 500, перенаправляют клиента на страницу 500-й ошибки;
• @banshop/errors/not-found/page — страница, которая показывается пользователю, если запрашиваемый url не найден;
• @banshop/errors/pages — модуль, который подключает в себя все страницы ошибок в приложении;
• @banshop/errors/server-error/page — страница, которая показывается клиенту если произошла 500я ошибка;
• @banshop/errors/ui/card — набор общих компонентов, которые используются для отображения страниц ошибок;
• @banshop/home/page — главная страница приложения;
• @banshop/orders/api — сервис, который делает запрос на оформление заказа;
• @banshop/orders/common — набор интерфейсов, которые используются для оформления заказа;
• @banshop/orders/guards — набор гуардов, которые проверяют права на доступ к странице оформления заказа. Если пользователь не добавил товары в корзину, но переходит на страницу оформления заказа, то в этом случае пользователь будет направлен на главную страницу;
• @banshop/orders/page — страница оформления заказа;
• @banshop/orders/state — state, который реализует логику оформления заказа;
• @banshop/orders/ui/form — форма, которая собирает данные о клиенте;
• @banshop/orders/ui/info — блок с выводом информации о добавленных товарах в корзине;
• @banshop/orders/ui/notify — модуль, который отображает уведомления в случае оформления заказа;
• @banshop/products/api — сервис, который запрашивает список товаров с помощью обращения к Google Sheets;
• @banshop/products/common — интерфейсы, которые используются для вывода информации о товарах;
• @banshop/products/guards — набор гуардов, которые проверяют возможность отображения страницы товара с уникальным путем;
• @banshop/products/page — страница конкретного товара;
• @banshop/products/state — state, который хранит в себе все товары;
• @banshop/products/ui/box — карточка товара, которая отображается в диалоговых окнах;
• @banshop/products/ui/card — карточка товара, которая показывается на главной странице;
• @banshop/products/ui/form — форма, которая позволяет выбрать размер и количество товаров;
• @banshop/products/ui/list — компонент, который выводит список всех доступных товаров;
• @banshop/products/ui/pipes — набор пайпов для вывода информации о товарах;
• @banshop/products/ui/portlet — компонент, который используется на странице товара, где показывается большая карусель и форма добавления товара в корзину;
• @banshop/russian/localization — модуль локализации, который настраивает русскую локаль в приложении;
• @banshop/russian/terms/page — страница условий продажи товаров на сайте;
• @banshop/ui/carousel — компонент карусели;
• @banshop/ui/container — компонент контейнера, который задает фиксированную ширину отображаемого контента;
• @banshop/ui/grid — модуль позволяющий создавать сетки на странице;
• @banshop/ui/image — модуль, который добавляет пайп для вывода изображения с помощью backgroundImage;
• @banshop/ui/layout — основной лейаут приложения;
• @banshop/ui/link — модуль, который содержит директиву для стилизации ссылок в приложении;
• @banshop/ui/multiplatform — компонент, который позволяет создавать разные шаблоны на разные типы платформ;
• @banshop/ui/width — модуль, который содержит директиву, которая добавляет ширину блоку.

И два приложения:

• store — основное приложение;
• store-e2e — приложения для создания e2e тестирования.

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

В рамках проекта была реализованы следующие модули и блоки:

• UI Kit — набор общих модулей, которые не привязаны ни к одной сущности и в целом, могут использоваться в различных проектах
• Модуль товаров — набор компонентов и сервисов, который позволяет отображать список товаров, которые загружаются из Google Sheet
• Модуль корзины, который представляет собой набор компонентов и сервисов, который позволяет добавлять товары в корзину, удалять их из корзины, а также изменять некоторые выбираемые характеристики товаров
• Модуль оформления заказа, который позволяет указать личные данные и оформить заказ на выбранные товары
• Модуль чата, который позволяет клиенту написать в службу поддержки и получить ответ на интересующего его вопросы
• Модуль локализации, который добавляет в приложение русский язык и переводит весь интерфейс на требуемый язык
• Настроено SEO для всех статичных страниц, которые должны индексироваться поисковыми системами (мета теги, заголовки, описания, шаринг)
• Настроен Server Side Rendering вместе с пререндером, который ускоряет работу приложения для отдачи статичных, сгенерированых страниц
• Все приложение покрыто unit тестами, которые проверяют базовый функционал системы.

Резюме

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

Надеюсь это будет полезно тем, кто решиться на такой шаг — как создать сайт визитку на Angular.

Ссылки

Оглавление

Предыдущая статья — Тестирование.

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

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

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

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