明けましておめでとう、同僚！ ボクシムプラントには伝統があります。新年ごとに新年の コールセンターを作り、そこでプラットフォームの新しい機能を導入しています。 今年は特に多くの機能がありました。 ビデオ通話とビデオ録画に加えて、タイプスクリプトを積極的に使用して反応し始めました。 最新の「ヒップスター」テクノロジースタックは、開発を驚くほどスピードアップしています。マキシムマガジンは、最初のビデオコールが受信される2日もたたないうちに、雪の乙女の役割を担う写真モデルでコールセンターを作ることを提案した瞬間から、 今年はHabréでプロモーションの発表を行いませんでした。結局のところ、形式は同じではありません。コードと開発についてお話したいと思いますか？ そのため、カットの下で、短時間でソリューションを作成した経験を共有し、どのような困難に直面したかを説明します。
プロモーションのアイデアは非常にシンプルです。 マキシムは、さまざまな美人コンテストの退任するファイナリストを選出し、スタジオに配置します。 大きな「話す準備ができた」ボタンを備えたシンプルな「発送」インターフェースを提供します。出版物のウェブサイトでは、ブラウザからビデオ通話を行うことができる「ユーザー」インターフェースを作成します。 同時に、ディスパッチインターフェイスはサイトの特別なURLに表示され、サイトのユーザーインターフェイスはiframeにあります。
タイトルでReactJSとTypescriptに言及したのには理由があります。これらのテクノロジーはどちらも非常に高速な開発で重要な役割を果たします。 Reactから始めましょう。Reactの主な強みは、多くの人が考えるように「シャドウドーム」や小道具にまったくありません。 ReactJSの力は、ユーザーインターフェイスを小さなコンポーネントに分割することです。 これにより、同様のプロジェクト間でコンポーネントを再利用できるだけでなく、「複合」ユーザーインターフェイスをすばやく組み立てることもできます。 「メインウィンドウ」コンポーネントのシンプルなifにより、プログラムの状態に応じて、ログインフォーム、エラーメッセージ、キューインターフェイス、またはビデオ通話ウィンドウのいずれかを表示できます。 このような宣言的アプローチにより、プログラマーは、「ああ、プログラムの各部分がどのように相互に通信し、これらすべてのフラグで何をすべきか」という質問に困惑することなく、ユーザーエクスペリエンスに集中する機会が得られます。 小さな部分からインターフェースを作成すると、エラーをすばやく処理できます。エラーが発生した場合、「切り替え」、「ウィンドウ」の作成、グローバルオブジェクトの使用は不要です。「レンダリング」メソッドで1つだけで十分です。ログインとパスワードが正しくないためにログインが行われなかったことを示す赤い通知。
Typescriptの力は別の面にあります：オプションの強力な型付け。 コードは「es6のように」書かれていますが、重要な場所では、プログラマーは型の形でコンパイラーに「ヒント」を残しています。 結果-ほとんどのエラーが表示され、コンパイルおよび静的分析の段階で修正されます。 開発サーバーでwebpackをこれに追加すると、開発はターボアクティブになります：開発者は変更を保存し、webpackはバックグラウンドでプロジェクトを再構築し、typescriptとeslintはそれを慎重に研究し、ポップアップウィンドウでアセンブリの結果を確認できます（判明したかどうか（ポップアップウィンドウには、特別なモジュールwebpack-notifierが用意されています（強く推奨）。
いくつかの困難がありました。 「reactjs + typescript + webpack」バンドルは非常に新しく、まだ「未加工」であるということを理解することが重要です。 「ニュアンス」（ハブで定期的に説明しようとしています）を知って、タイプスクリプトコンパイラエラーの迅速なデコード（一部の場所でのメッセージの混乱により、C ++が軽くなる）を手に入れ、予期しないことに備える必要があります。 しかし、それは価値があります-タイプとチェックを連続して追加することにより、コードを非常に迅速にプロトタイピングおよび生産状態に「アップグレード」することで、2日以内にプロモーションを収集することができました。 もちろん、独自のプラットフォームに直面してチートを使用しました。これにより、ビデオコール、キーによる自動ユーザー認証、およびコールキューを備えた、すぐに使用できるWeb SDKが提供されました。 単純なプロジェクトの場合、3つのチームに組み立てられる内部スケルトンもあります。
git clone https://github.com/voximplant/vox-react-skeleton.git && cd vox-react-skeleton npm install npm run build
プラットフォームをファイルで少し仕上げる必要がありました-これは、ビデオコールで自動キューを使用する最初のケースであり、APIに対応するフラグが存在しないことが判明しました。 videoパラメーターはVoxEngine.enqueueACDRequestメソッドにすぐに追加され、 trueに設定すると通常の通話がビデオ通話に変わります。
他に何が面白いですか？ ビデオチャットの横にはまったく新しい形式のペリスコープが配置されていましたが、すぐにオフにする必要がありました。 平均して、女の子は各発信者と2〜3分間、つまり1時間あたり10〜20回の「良い」通話をしました。 約束どおり、通話のビデオは低く、ビデオはプロモーションWebサイトにもあります。 明けましておめでとうございます！