Tinkoffマガジンのアーキテクチャとサービスの概要

こんにちは！



Tinkoff誌は5年間記事を発表しています。この間、WordPressのブログから、数十のプロジェクトとツールの大規模な自作システムに成長しました。私はT-Zで開発を管理しています。今日は、雑誌のアーキテクチャとそれが機能するサービスについて概説します。



T-Z Webサイトは、さまざまなサービスのおかげで機能します。

1. サイトエンジン-水星。
2. 最前線のモノリポジトリ、または単にモノフロント。
3. ソーシャルプラットフォーム。
4. ウラニアは教育プラットフォームです。
5. 機能-計算機、テスト、その他のインタラクティブ機能。
6. モバイルアプリケーション。
7. Mediaservice。

T-Zが内部からどのように機能するか



次は、これらの各サービスの機能と、それらが互いにどのように相互作用するかについてです。

水星

メインのバックエンドアプリケーションT — Zはそのエンジンです。 2017年にWordPressがWordPressから移行したとき、独自のエンジンが必要でした。このエンジンは古代ローマの富と貿易の神を称えて水星と名付けられました。 Python + Djangoで書かれています。



マーキュリーは、雑誌の読者が見るページを収集します。彼はページコンポーネントのいくつかを自分のdjangoテンプレートからのマークアップとスタイルに翻訳します。記事のコンテンツ、雑誌に関するページ、検索結果です。新しいコンポーネント（ヘッダー、地下室、プロファイルなど）の場合、彼はサービスレイヤーに移動します。サービスレイヤーは、すでに私たちの正面からマークアップとスタイルを提供しています。



Mercuryは、著作権コンテンツ自体（画像、記事、資料の編集構造、公開されたコンテンツの統計）を保存および処理します。エディタとレイアウトデザイナに、このすべてのものを管理するためのインターフェイス（管理パネル）を提供します。



レイアウトデザイナーは、html構文でジャーナル記事を入力します。便宜上、管理パネルはショートコードもサポートします-それらはタグのようなものであり、特別なスタイルを備えたより複雑な構文構造に展開されるだけです。管理パネルの記事の最初からのサービスのリストは、ショートコード[ol type = milchin] [/ ol]で記述されています。





レイアウトデザイナとときどきエディタが連携するインターフェース。





管理メイン画面。検索と推奨事項を打ち切るために使用される同じボタン。次に、それらを最適化し、懐かしい理由でボタンを残しました。





ショートコードなどのレイアウト資料のガイド。レイアウト設計者は、Googleドキュメントにも独自のマニュアルを用意しています。



記事が管理領域に保存されると、タイポグラファーがそれを通過します。これは、テキストの構成の一部を変更して、雑誌のタイポグラフィと編集ポリシーに準拠するようにするスクリプトです。たとえば、ルーブル記号と改行しないスペースを配置します。私たちは既製のソリューションを使用しましたが、結果が私たちに合うようにいくつかのルールを書き直しました。



Mercuryは、コンテンツ、ホーム、記事、その他のめったに変更されないページなど、ほとんどのデータをキャッシュします。この方法により、より多くのユーザーを同時にオンラインに保つために、高価な計算とレンダリングを節約できます。



雑誌には、他の記事を組み合わせたページがあります。次に例を示します。

• — , , ;
• — , ;
• , ;
• .

これらのページを収集するためのルールもMercuryによって処理されます。これらは、数式、手動で設定したエディター設定、またはそれらの組み合わせです。このような設定については、個別の構成もあります。





旅行に関する繁殖セクション。このトピックの新しい記事が自動的にここに描画され、編集者が選択のブロックを設定します。





選択ショーケース。編集者は彼女のために記事を集めました。





自動的に収集される検索結果。検索自体も水星で実装されています。



2020年4月に、Mercury Retrogradeと呼ばれる新しいバージョンのエンジンのテストを開始しました。コードを完全に整理し、いくつかのサービスに分割して、新機能を導入しました。管理者のWebソケット、検索の改善などです。Pythonでも記述しますが、FastAPIを使用します-他の大きな雑誌のバックエンドと同様です。

モノフロント

ようやくWordPressからMercuryに移行したとき、雑誌のページにインタラクティブ機能を追加したいと考えました。djangoテンプレートの可能性は、実行時にページのコンテンツを変更できないため、ここでは制限されています。



一連のカスタムページを開発しないようにするために、本格的なフロント-Monofrontに投資することにしました。



モノ-1つのプロジェクトで収集したため：

• 登録および承認インターフェース。
• コメント。
• フッター。
• ヘダー。
• 資料のメタ情報を表示します。
• ユーザープロファイル。
• プロモーションバナー。
• サブスクリプションフォーム。
• サブスクリプション管理ページ。
• 教育コース。

また、ユーザーイベントのWebトラッキングのロジックも処理します。つまり、ユーザーがログページにアクセスした場所、ログページで何をしたかなどです。





リポジトリでどのように見えるか。



2020年には、複数の独立したアプリケーションをモノフロントから作成し、シンプルなウィジェットをnpmパッケージに引き出し、実行時に複雑なウィジェットを引き出して、設計システムを高めたいと考えています。テンプレートのフロントアプリケーションを作成して展開しましたが、マテリアルのレンダリングをそこに転送する準備をしています。React、Redux、TypeScriptで作成します。

ソーシャルプラットフォーム

T-Zには、作成者のコンテンツだけでなく、ユーザーが作成したコンテンツもあります。ユーザーは登録し、記事にコメントし、購読し、特別なアンケートを通じて編集委員会に連絡します。これはすべてソーシャルプラットフォームのおかげで起こります。



ユーザーを登録または承認するために、ソーシャルプラットフォームはソーシャルネットワークのAPIと対話します。個人データ（名前、姓、郵便など）を含む貴重なユーザーデータを保存します。



私たちは彼のプロフィールでユーザーデータを編集するためのインターフェースを開発しています。彼の準備ができるまで、私たちはソーシャルネットワークで名前と写真をモデレートする責任をシフトしました。ソーシャルネットワークが電話番号へのバインドを要求し始めたため、部分的には、これがボットの問題を解決した方法です。しかし、問題は、システムが別のソーシャルネットワークの1人を別のユーザーと見なすという事実に残っています。



ジャーナルの著者は通常2つのアカウントを持っています。 1つ-マーキュリーでは、記事の著者を決定します。 2つ目は、コメントに応答するソーシャルプラットフォームです。将来的には1つの共通アカウントに切り替えると思いますが、今のところ、編集者にとって少し楽になっただけです。Mercuryアカウントがソーシャルプラットフォームで作成者のアカウントに関連付けられると、彼のすべての記事は自動的にそこからプルされます。



ルールなくしてコミュニティは発展しません。すべてのルールに違反者がいます。したがって、ソーシャルプラットフォームは、コメントをチェックして違反者を禁止するためのインターフェイスを編集者とモデレーターに提供します。





モデレーターは、ロシア連邦の法律またはサイトの使用規則に反する場合、コメントを削除したり、コメントの一部を偽装したりできます。



ソーシャルプラットフォームは、すべてのユーザーのコメントと関連情報（いいね、嫌い、記事へのコメントか、スレッド内の他のユーザーへの応答か）を保存します。コメント自体は特別なボットを介してTelegramにブロードキャストされるため、モデレーターはすばやく反応し、編集者はフィードバックを受け取ることができます。



多くの場合、私たちは読者に編集者と何かを共有することを勧めます：彼らの職業、予算の管理方法、または彼らを激怒させるものについて話します。ここでは、フォームの質問に対する回答を保存するロジックを操作し、それらが編集者に届くようにする必要があります。以前は、Googleフォームを手動で開始し、データ転送を前面からねじ込んでいましたが、現在はソーシャルプラットフォームでこれを自動化しています。





編集者自身が新しい投票を作成し、それを構成する質問を編集し、ショートコードから投票を組み立てることができます。

ウラニア

2019年に、独自の教育プラットフォームを立ち上げることを決定しました。新しい実体がすぐに現れました：学生、コース、レッスン、試験。それらを作成および編集するために、独立したバックエンドおよび管理パネル-Uraniaを開発しました。彼らは古代神話のトピックを続けたかっただけです。しかし、一般的には、ウラニアを単なる教科書と呼ぶことがよくあります。



学生が登録するとき、私たちはすでにソーシャルプラットフォームにある同じアカウントを彼の識別子として使用します。上記には、現在のメール、学生が取っているコース、および学習の進捗状況が追加されています。この方法では、データを混合しませんが、同時に、ソーシャルプラットフォームと単純に同期できます。同じコメントで、ソーシャルプラットフォームと教科書のデータは並べて使用されます。たとえば、彼が修了したコースのユーザーにメダルを引くためです。このデータは一度に1つのIDを取得すると便利です。



コース自体の内容は、ウラニアがまだ水星から取っています。コースはレッスンで構成されており、レッスンは実際には巧妙なスタイルの記事です。メインコースページとすべてのコースの次のコースページで、ウラニアは独自に作業します。





コース「投資方法」のホームページ。





ブローカーの選び方に関するレッスンの断片。





各レッスンの最後-資料を統合するためのテスト。コースの最後-試験、テスト形式。



ジャーナルの定期的なテストは表面でのみ機能しますが、コースでは裏面の解答もチェックします。チュートリアルは、質問、回答の選択肢、および正解を格納するだけでなく、テストとは別のアプリケーションであるため、それらを操作します。それらについてもう少しお話します。

特徴

T — Gでは、計算機、マップ、テスト、投票、その他のインタラクティブな資料が公開されます。これらは、そのような個別の最前線のアプリケーションです。私たちはそれらを別のチームとして開発し、Monofrontにドラッグしません。機能はJavaScriptバンドルで収集され、Mercuryは設定に関する情報とともにページでそれらを置き換えます。





ip-calendar.jsにはインタラクティブのすべてのロジックが含まれており、SPが時間通りにレポートを送信するのに役立ちます。 CDN上のバンドルの完全なアドレスにはハッシュが含まれています。これは、インタラクティブのバージョン管理をサポートする方法です。



ほとんどのインタラクティブ機能は、最大2つの場所で使用されます。別のページと同じトピックの記事内です。しかし、それらのいくつかは、私たちがそれらを何十回も使用するほど根づきました。たとえば：

• 読者が価値のある富の種類を見つけたり、知識を教育コースに統合したりするのに役立つテスト。
• コメントで議論を巻き起こす投票。
• 現在の為替レートで現地通貨からルーブルに価格を変換し、その値を商品に代入する通貨交換機。
• 1つのセットからすべてのブラウザとすべてのデバイスに絵文字を提供する絵文字サービス。

通貨交換器はすべての価格を現在の為替レートでルーブルに換算します。編集者はこれを通貨機能と呼んでいます。





記事の最後にあるサンプル調査。

モバイルアプリケーション

私たちが作ったアプリケーションは開発中またはクローズドベータテスト中です。しかし、あなたはすでに何かを言うことができます。



まず、クライアントパーツは既にマガジンにあるすべてのバックエンドを積極的に使用します。マーキュリーのコンテンツ、ソーシャルプラットフォームのユーザー、ウラニアの学生の進捗状況を取得します。次に、特別なアプリケーションコンテンツを処理し、プッシュ通知を解決する独自のバックエンドがあります。



アプリケーション自体は、React NativeとTypeScriptで記述されています。バックエンドはNode.jsとTypeScriptに基づいています。





これは、モバイルアプリケーションへの投資に関するコースのレッスンのようです。アプリケーションには別のバックエンドがあります。そこでは、アプリケーション内のみのコンテンツを処理します。コース終了後に追加で読むためのオーディオレッスンと記事です。プッシュ通知にも同じバックエンドを使用します。





これは、雑誌のモバイルアプリケーションの最初のバージョンです。これまでのところ、主な機能はコレクションをサブスクライブすることです。このアプリケーションのバックエンドは、ユーザー設定を保存および処理し、プッシュ通知も担当します。

メディアサービス

雑誌の主なメディアファイルは画像です。メディアサービスは各画像をチェックし、webpとpngに変換し、サイズを最適化し、構成からテンプレート用にトリミングして、CDNにアップロードします。それに応じて、彼は処理結果へのリンクを受け取ります-元のフォーマットから取得されたさまざまなフォーマットとサイズの画像。サービスは、残りのメディアファイルをCDNに丁寧に配置します。



Mediaserviceは、サーバーレスモデルで特に注目に値します。サーバーやクラウドに配備される本格的なバックエンドではありません。Googleのクラウド機能とpub / subパターンのみを使用します。



Mediaserviceは、コメントとプロフィールのカスタム写真にソーシャルプラットフォームを使用しています。この機能はまだ生産段階ではありませんが、現在取り組んでいます。

次は何ですか

次の記事では、サービス、インフラストラクチャ、チームプロセスについて詳しく説明します。



空室T — Zh。

ギタブT-Zh。