乾燥しすぎない: アプリケーション コードをシンプルに保ち、SDK を紹介する方法

エンジニアの皆さん、このシナリオを想像してみてください。月曜日の朝、製品チームの同僚から Slack メッセージが届きました。 "おい！"彼女は、「調達を通じて新しいベンダーを獲得したばかりです」と言います。あなたのパートナーがあなたに「私たちは話す必要がある」と言っているかのように、その言葉はあなたの胃の中で結び目を作り始めます.

チャット ウィンドウの下部で、Slack は同僚が入力していることを知らせます... .そして結び目が締まります。 「これは、ユーザー ジャーニーの可視性を高める分析プラットフォームです」と彼女のメッセージは述べています。 「今月末までにウェブ、iOS、Android に統合できると思いますか?」

あなたは同僚が自分の仕事をしているだけだと知っています。結局のところ、製品担当者はユーザーが新しいオンボーディング フローのどこで行き詰まっているかを確認する必要があり、このツールは彼らを助けるはずです。

しかし、これがあなたとあなたの仲間の開発者にとって何を意味するかを恐れています。前回、ベンダー SDK を実装する必要があったときは、目隠しをして雑然とした部屋から抜け出す方法を見つけるようなものでした。

新しい API の背後にあるメンタル モデルをつなぎ合わせ、このシステムを独自のコードベースに結び付けて、何も壊すことなく、新しい機能を構築する必要があると考えながら、この統合が行われていることをもう一度考えると、うんざりします。私のやり方。

この状況は、mParticle のエンジニアがよく知っている状況です。最近では、開発者は SDK を実装するのではなく構築しますが、エンジニアの多くは、テーブルの反対側で「新しい SDK ブルース」を歌っているのがどのようなものかを知っています。

この直接の経験が、mParticle 開発者エクスペリエンスへの最新の投資を行うきっかけとなりました。完全に機能するサンプル e コマース アプリケーションウェブ、 iOS 、 とアンドロイド、SDK を使用してエンドツーエンドで実装されています。

これらのアプリは、SDK を試したり、イベント収集が mParticle でどのように機能するかを学習したりするためのプレイグラウンドを提供します。これらは、ページ ビュー、製品のカスタマイズ、カート ボタンからの追加/削除、チェックアウト ボタンなどの一般的なユーザー アクションに実装されたイベントの実例を強調しています。

多くの場合、これらのイベントを自分のアプリケーションに直接コピーし、特定のユース ケースのニーズを満たすために軽い変更を加えるだけでよいことに気付くかもしれません。

以下のビデオでは、Web と iOS のサンプル アプリ開発をそれぞれ率いた mParticle エンジニアの Alex Sapountzis と Peter Jenkins が、ベンダー SDK を実装した経験と、サンプル アプリを開発した理由について説明しています。

https://www.youtube.com/watch?v=1hYc9qalrXQ

「mParticle を実装すると、多くの試行錯誤を経なくても、アプリと私たちのシステムの両方で何が起こるかをすばやく把握したいと考えています」と、Matt Bernier 氏は言います。 mParticle。

「これらのアプリは、探しているコンテキストで正確に実行されている SDK を表示するため、当て推量は必要ありません。これは、実装を完了して次のプロジェクトに迅速に移行できることを意味します。」

サンプルアプリの中身を見る

mParticle のお客様は、これらのアプリの動作を確認し、コードを直接参照して、アプリの構築プロセスについて詳しく知ることができます。アプリをローカルで実行する方法は次のとおりです。

注: API キーを生成するには、mParticle ワークスペースにアクセスする必要があります。

1. クローンサンプル アプリ リポジトリ.
2. npm install を使用してパッケージの依存関係をインストールします。
3. mParticle ワークスペースで [設定] > [入力] に移動します。
4. Web プラットフォームを選択し、API キーを生成/コピーします。
5. このプロジェクトのルートで、.env.sample の名前を.envに変更します。
6. REACT_APP_MPARTICLE_API_KEY 環境変数を mParticle Web API キーで更新します。
7. npm start を使用してプロジェクトを実行します。

現在 mParticle のお客様ではありませんか?私たちのアクセラレータ プログラムmParticle への無料アクセスを最大 1 年間受ける資格のあるスタートアップ企業向けの機会です。

DRY すぎない: アプリケーション コードをシンプルに保つことで SDK を紹介した方法

何よりも、サンプル アプリ チームは、これらの製品が、エンジニアが SDK を学習し、mParticle を使用してイベント コレクションを実装するためのベスト プラクティスを理解するための教育ツールとして機能することを望んでいました。

この目的は、サンプル アプリの背後にある技術的な選択の多く (それらを構築するために使用されるツールとフレームワークから、プロジェクト全体で使用されるコーディング規則に至るまで) を通知しました。

Relatability は、Alex Sapountzis が Web サンプル アプリを構築するためのフレームワークとして React を使用することを決定した主な理由でした。 Reactは、 最も人気のあるフロントエンド フレームワーク世界中で使用されており、e コマース サイトからストリーミング プラットフォームまで、さまざまなアプリケーションの構築に使用されています。

したがって、mParticle Web SDK を実装するほとんどの Web 開発者は、このサンプル アプリから価値を引き出す前に React を学ぶ必要はありません。

使用する React デザイン パターンを決定する際、Alex は、React Hooks や Context Providers などの比較的新しい「組み込み」機能を優先することでバランスをとろうとしました。知られている標準的なアーキテクチャですが、最終的にはより明確な学習体験をユーザーに提供するには、非常に圧倒的で複雑になる可能性があります。

たとえば、カスタムフックかなり長い間、React コミュニティ内のトレンドでした。これらを使用するには、コンポーネント間でステートフル ロジックを共有する目的で共通の React フックを利用する独自の関数を作成する必要があります。

Alex は、サンプル アプリでこのアプローチを使用すると、SDK がどのように機能するかを理解するのに邪魔になると感じていたため、 useEffect などのバニラ フックの使用に固執することにしました。

「誰かが自分のプロジェクトで使用するパッケージとしてこれを構築していたら、少し違ったやり方をしていたかもしれません」と Alex は言います。 React が何をしているのか ––mParticle が React アプリで何をしているのかを彼らに見てもらいたかったのです。」

Web アプリのコンポーネントを調べると、mParticle イベントで転送されるアトリビュートを収集し、イベント自体を発生させるためにuseEffectが使用されている例がいくつか見られます。 ProductDetailPageコンポーネントでのuseEffectの使用方法の 1 つを次に示します。

 useEffect(() => { // Generates a Product View Detail Event to signal that a customer // viewed the product details, potentially leading to an 'Add to Cart' Event if (product) { // Generate an mParticle Product Object before sending any eCommerce Events const mParticleProduct: mParticle.Product = getMPProduct(product); // Fire a single eCommerce Product View Detail Event for this product page mParticle.eCommerce.logProductAction( mParticle.ProductActionType.ViewDetail, mParticleProduct, ); } // If you re-render and the product changes, // this will re-fire a new Product View Detail Event }, [product]);

このようなインスタンスでバニラの React フックを使用すると、このロジックがさまざまなモジュール全体で個別の関数にパッケージ化されている場合よりも、mParticle SDK を理解しやすくなります。また、これはかなりコメントの多いコード サンプルであることに気付くかもしれません。

サンプル アプリの開発者は、イベント呼び出しが行われる場所と、イベント コレクションをサポートするロジック全体の両方で、SDK の使用を取り巻くコードについて明確にコメントするために時間を割きました。

同じコンポーネントの別の例を次に示します。これは、コメントが、実際のシナリオで SDK を使用する方法の完全なコンテキストを提供し、当て推量に任せる方法を示しています。

 // It is recommended to use mParticle.createProduct when using our // eCommerce logging functions to generate events so that you can // be sure to include all of our data points properly const getMPProduct = (_product: Product): mParticle.Product => { const { label, id, price } = _product; // When passing attributes into mParticle, it's best to not include // undefined or null values const attributes: mParticle.SDKEventAttrs = {}; if (color) { attributes.color = color; } if (size) { attributes.size = size; } // In this example we are not fulling handling multiple brands, // categories and other use cases for a fully fledged e-Commerce // application. As such, we are passing undefined for many of these // attributes to highlight cases where you want may need some // parameters but not all of them. return mParticle.eCommerce.createProduct( label, id, price, parseInt(quantity, 10), undefined, // Variant: used for single variants. // Use Custom ATtributes for multiple variants like // in this use case undefined, // Category undefined, // Brand undefined, // Position undefined, // Coupon Code attributes, ); };

https://www.youtube.com/watch?v=6zbW4X8Oyg0

独自の SDK と機能をドッグフーディングし、独自の製品を活用する

これらのサンプル アプリの主な目的は、お客様が SDK を簡単に実装し、データから価値を実現できるようにすることですが、これらのアプリは、当社のテストと改善 (または「ドッグフーディング」) の手段として内部的にも大きな価値があると考えています。独自の SDK と顧客向け機能。

TypeScript の荒野でのバグハンティング

たとえば、Web サンプル アプリをビルドすることで、React プロジェクト内で TypeScript を npm パッケージとしてコア Web SDK を使用するときに発生するいくつかのエッジ ケースを明らかにすることができました。

場合によっては、これら 3 つの特定のテクノロジ間の相互作用により、イベントが呼び出されたときに SDK が常に初期化されないという競合状態が発生しました。

私たちのコア SDK にはこれに対処するためのロジックが既に含まれていましたが、React のパッケージ内の特定のコードがこれらのチェックを破り、異常なカスケードが発生する原因となりました。この問題に気付いた後、Alex は JavaScript API の第一人者である Rob Ing と一緒にバグハントを行いました。 2 人はスタック トレースを調べ、問題を修正し、コア SDK にパッチをリリースしました。

独自のデータ プランニング機能の使用

データ収集段階での不整合は、データ収集の最大の原因の 1 つです。データ品質の問題パイプラインのさらに下。

mParticle のデータ計画ツールと機能は、エンジニアやその他のデータ関係者がデータ計画に沿って調整し、この計画を正確に実装し、エラーをリアルタイムで特定できるように設計されています。

これらのサンプル アプリを作成したとき、私たちは独自のアプリを使用して説教したことを実践したいと考えました。データ計画ツールこれら 3 つのプラットフォーム間で、イベントと属性の名前付け、構造化、および収集方法の一貫性を維持するため。

当社のエンジニアと PM は、サンプル アプリ プロジェクト専用の mParticle ワークスペースをセットアップし、ユーザー インターフェイスを使用してデータ プランを作成および生成しました。イベントが 3 つのアプリすべてに実装され、SDK から mParticle にイベントを送信した後、ライブ ストリームを使用して、収集したデータと期待されるデータの間の不一致をチェックし、ライブ ストリームのエラー メッセージを使用して、エラーの原因を簡単に突き止めました。

これらの機能を使用することで、データ プランの作成、イベント コレクションの実装、プラットフォーム間の一貫性の確保のプロセスが大幅にスムーズになりました。独自のデータ プランニング機能は、サンプル アプリの作成に大きく役立ちました。今後もサンプル アプリを使用して、データ プランニング機能をテストおよび改善する予定です。

未来は何を保持していますか？

これらのサンプル アプリは、SDK を使用して学習曲線を短縮し、実装時間を短縮し、データの価値を得るまでの時間を短縮することで、mParticle を扱うエンジニアリング チームに広範囲にわたる価値を提供できます。

MLP (「Minimum Loveable Project」、PM Matt Bernier が造語した用語) を出荷したという事実は、これらのリソースを改善するための取り組みの始まりであり、終わりではありません。

「これは間違いなく、私たちが投資を続け、時間をかけて改善していくものだと思います」と Peter Jenkins 氏は言います。

さらに、SDK と API 機能だけでなく、製品と機能のスイート全体をテストおよび改善する手段として、これらのアプリを引き続き使用する予定です。

たとえば、Web サンプル アプリの今後のイテレーションでは、以下を含む開発者ツールを統合する予定です。スマートタイプとリンティング.言い換えれば、これらのサンプル アプリは、Peter Jenkins が言うように、「実際に実行できる SDK の正確な使用方法を示す常緑のドキュメント ソース」になります。

https://www.youtube.com/watch?v=Z02F77Yfs_E

以前こちらで公開。