首页  >  文章  >  web前端  >  Разработка веб приложения для поиска авиабилетов на Angular 18

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

DDD
DDD原创
2024-09-13 22:19:36965浏览

Недавно была выпущена 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. Хоть я и использую директивы изображений, но они достойны отдельного материала для разбора всех тонкостей.

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

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

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

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

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

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

Демо можно посмотреть тут - 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

以上是Разработка веб приложения для поиска авиабилетов на Angular 18的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn