Angular 18을 사용하여 항공권 검색을 위한 웹 애플리케이션 개발

인기 있는 Angular 프레임워크의 18번째 버전이 최근 출시되었습니다. 역동적인 개발과 커뮤니티의 관심 덕분에 Angular는 리더 중 하나가 되었습니다. 일련의 기사에서는 항공권 검색 및 예약 애플리케이션을 예로 들어 최신 버전에 대해 이야기하겠습니다.

과정에 포함될 내용:

• Nx 단일 저장소를 사용하지 않고 Angular CLI를 사용하여 새 애플리케이션 생성;
• 핵심 구현(Google Analytics, Yandex Metrika)
• 프로젝트 설정(린터, 스타일러, ssr)
• 애플리케이션의 기본 구조를 생성합니다.
• UI KIT 구현
• 프레임워크의 기능을 사용하여 유사한 페이지를 생성합니다.
• 타사 API와 통합.

모든 글은 제가 진행한 펫 프로젝트 Buy & Fly에 대해 설명하고 있습니다.

travel.alfabank.ru를 예로 사용했습니다.

내가 왜 https://tinkoff.ru/travel을 이용하지 않았는지 의문이 생길 수 있습니다. 예전 Tinkoff Bank를 보면 정말 마음이 아픕니다. 내가 그에 대해 사랑했던 모든 것이 정체되고 사라지기 시작합니다.

프로젝트의 특별한 점:

• 신호 - 신호는 입력 및 일반적으로 변수에 사용되므로 ChangeDetectionRef를 완전히 제거할 수 있습니다.
• @if, @for, @defer, @let - 새로운 Angular 템플릿 구문
• NavigationPaths는 경로 통합을 위한 솔루션 중 하나입니다.
• MetricService는 분석 결과를 다양한 시스템으로 전송하는 공통 서비스입니다.
• 가능한 모든 것을 최대한 재사용합니다.
• 나만의 UI KIT 개발

연재 기사에 포함되지 않은 내용:

• SSR 최적화;
• 전체 SEO 설정(존재하지 않는 페이지에 대해 404 상태 반환)
• NgOptimizedImage. 이미지 디렉티브를 사용하지만 모든 미묘함을 분석하기 위해서는 별도의 자료로 사용할 가치가 있습니다.

사이클의 결과는 저렴한 항공권을 검색하는 웹사이트가 됩니다.

모바일 버전:

여기에서 데모를 시청할 수 있습니다 - buy-and-fly.fafn.ru.

애플리케이션은 외부 API인 travelpayouts.com을 사용합니다.

• Aviasales - 저렴한 항공권을 찾기 위한 API
• Hotellook - 호텔 검색을 위한 API

물론 Aviasales에서 광고를 해야 하는데, 제가 묻지도 않았는데도 돈을 주지 않았나요?

튜토리얼 사용 방법:

• Vous pouvez tout faire séquentiellement et voir tous les articles les uns après les autres.
• Ou en utilisant github, téléchargez et déployez l'application (les clés de travelpayouts seront nécessaires pour un fonctionnement correct). Et lors de l'analyse, référez-vous aux pièces nécessaires.

Si vous rencontrez des problèmes avec les clés d'accès API, écrivez-moi, je peux peut-être vous aider, mais en général, l'inscription sur travelpayouts.com ne prend pas plus d'une minute.

Dans le prochain article, nous examinerons la création d'une nouvelle application.

Links

Toutes les sources sont sur github, dans le dépôt - github.com/Fafnur/buy-and-fly

Vous pouvez regarder la démo ici - buy-and-fly.fafn.ru/

Mes groupes : télégramme, medium, vk, x.com, linkedin, site

위 내용은 Angular 18을 사용하여 항공권 검색을 위한 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!