Angular 18を使用した航空券検索Webアプリケーションの開発

人気の Angular フレームワークの第 18 バージョンが最近リリースされました。ダイナミックな開発とコミュニティの関心により、Angular はリーダーの 1 つとなりました。一連の記事では、航空券の検索と予約を行うアプリケーションを例に、最新バージョンについて説明します。

コースに含まれるもの:

• Nx モノリポジトリを使用せずに、Angular CLI を使用して新しいアプリケーションを作成する;
• コア実装 (Google Analytics、Yandex Metrika);
• プロジェクトのセットアップ (リンター、スタイラー、SSR);
• アプリケーションの基本構造の作成;
• UI KIT の実装;
• フレームワークの機能を使用して同様のページを作成する;
• サードパーティ API との統合。

すべての記事は、私が実施したペット プロジェクトである購入と飛行について説明しています。

私は、travel.alfabank.ru を例として使用しました。

なぜ https://tinkoff.ru/travel を利用しなかったのかという疑問が生じるかもしれません。旧ティンコフ銀行を見ると本当に心が痛みます。私が彼について愛したすべてのものは停滞し、色あせ始めます。

このプロジェクトの特別な点:

• シグナル - シグナルは入力および一般に変数に使用されます。これにより、changeDetectionRef.
を完全に取り除くことができます。
• @if、@for、@defer、@let - 新しい Angular テンプレート構文。
• NavigationPaths は、パスを統合するためのソリューションの 1 つです。
• MetricService は、さまざまなシステムに分析を送信するための共通サービスです。
• 可能な限りすべてを最大限に再利用します。
• 独自の UI KIT の開発。

一連の記事に含まれていないもの:

• SSR の最適化;
• 完全な SEO の設定 (存在しないページに対して 404 ステータスを返す);
• Ng最適化された画像。私は画像ディレクティブを使用していますが、すべての微妙な点を分析するには別の資料として価値があります。

サイクルの結果は、格安航空券を検索できる Web サイトになります。

モバイル版の場合:

ここでデモを見ることができます - 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を使用した航空券検索Webアプリケーションの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。