Разработка веб приложения для поиска авиабилетов на Angular 18

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

Что войдет в курс:

• Создание нового приложения с помощью Angular CLI без использования монорепозитория Nx;
• Реализация core (Google Analytics, Yandex Metrika);
• Настройка проекта (линтеры, стайлеры, ssr);
• Создание базовой структуры приложения;
• Реализация UI KIT;
• Использование возможностей фреймворка для создания похожих страниц;
• Интеграция со сторонним API.

Все статьи описывают реализованный мной pet-проект - Buy & fly.

В качестве примера я использовал travel.alfabank.ru.

Может возникнуть вопрос, почему я не взял https://tinkoff.ru/travel. Мне очень больно смотреть на бывший Тинькофф Банк. Все что я в нем любил, начинает стагнировать и увядать.

Что особенного будет в проекте:

• Signal - будет использованы signal для input и в целом для переменных, что позволяет полностью избавиться от changeDetectionRef.
• @if, @for, @defer, @let - новый синтаксис шаблонов Angular.
• NavigationPaths - одно из решений унификации путей.
• MetricService - общий сервис для отправки аналитики в различные системы.
• Максимальное переиспользование всего чего можно.
• Разработка собственного UI KIT.

Что не вошло в цикл статей:

• Оптимизация SSR;
• Настройка полноценного SEO (отдача 404 статуса для несуществующих страниц);
• NgOptimizedImage. Хоть я и использую директивы изображений, но они достойны отдельного материала для разбора всех тонкостей.

Результатом цикла будет сайт с поиском дешевых авиабилетов.

В мобильной версии:

Демо можно посмотреть тут - buy-and-fly.fafn.ru.

Приложение использует внешнее API - travelpayouts.com.

• Авиасейлс - API для поиска дешевых билетов;
• Hotellook - API для поиска отелей.

Конечно, тут должна быть реклама от Aviasales, но они мне не заплатили 😭, хотя я не просил.

Как использовать туториал:

• Вы можете выполнять все последовательно, и посмотреть все статьи друг за другом.
• Либо же используя github, скачайте и разверните приложение (для корректной работы потребуются ключи от travelpayouts). И по ходу разбора обращаться к нужным частям.

Если у вас будут проблемы с ключами доступа к API, напишите мне, возможно я чем-то смогу помочь, но в целом регистрация на travelpayouts.com занимает не больше одной минуты.

В следующей статье рассмотрим создание нового приложения.

Ссылки

Все исходники находятся на github, в репозитории - github.com/Fafnur/buy-and-fly

Демо можно посмотреть здесь - buy-and-fly.fafn.ru/

Мои группы: telegram, medium, vk, x.com, linkedin, site