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에서 광고를 해야 하는데, 제가 묻지도 않았는데도 돈을 주지 않았나요?

튜토리얼 사용 방법:

• 순차적으로 모든 작업을 수행하고 모든 기사를 차례로 볼 수 있습니다.
• 또는 github를 사용하여 애플리케이션을 다운로드하고 배포합니다(올바른 작동을 위해서는 travelpayouts의 키가 필요합니다). 그리고 분석시 필요한 부분을 참고해주세요.

API 액세스 키에 문제가 있는 경우 저에게 편지를 보내주세요. 제가 도움을 드릴 수 있지만 일반적으로 travelpayouts.com에 등록하는 데는 1분도 채 걸리지 않습니다.

다음 기사에서는 새 애플리케이션을 만드는 방법을 살펴보겠습니다.

모래밭

모든 소스는 github, 저장소(github.com/Fafnur/buy-and-fly)에 있습니다

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

내 그룹: Telegram, Medium, vk, x.com, linkedin, site

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