Không quá khô: Cách giới thiệu SDK bằng cách giữ mã ứng dụng đơn giản

Các kỹ sư, hãy tưởng tượng viễn cảnh này. Đồng nghiệp của bạn trong nhóm sản phẩm sẽ gửi cho bạn một tin nhắn Slack vào sáng thứ Hai. "Chào!" Cô ấy nói, "Chúng tôi vừa có một nhà cung cấp mới thông qua mua sắm." Những lời nói bắt đầu thắt lại trong bụng bạn, như thể đối tác của bạn vừa nhắn tin cho bạn rằng “chúng ta cần nói chuyện”.

Ở cuối cửa sổ trò chuyện, Slack cho bạn biết đồng nghiệp của bạn đang nhập .... và nút thắt chặt hơn. “Đó là một nền tảng phân tích sẽ giúp chúng tôi có nhiều khả năng hiển thị hơn về hành trình của người dùng,” thông điệp của cô ấy viết. “Bạn có nghĩ rằng chúng tôi có thể tích hợp nó trên Web, iOS và Android vào cuối tháng không?”

Bạn biết đồng nghiệp của bạn chỉ đang làm công việc của cô ấy. Rốt cuộc, những người làm sản phẩm cần phải xem người dùng đang gặp khó khăn ở đâu trong quy trình giới thiệu mới và công cụ này sẽ giúp họ.

Nhưng bạn sợ điều này có ý nghĩa như thế nào đối với bạn và các nhà phát triển đồng nghiệp của bạn. Lần cuối cùng bạn phải triển khai SDK của nhà cung cấp, nó giống như việc bạn tìm đường ra khỏi một căn phòng lộn xộn trong khi đeo khăn bịt mắt.

Bạn quặn lòng khi nghĩ đến việc một lần nữa phải ghép lại mô hình tinh thần đằng sau một API mới và buộc hệ thống này vào cơ sở mã của riêng bạn mà không vi phạm bất cứ điều gì, trong khi nghĩ rằng mình vẫn phải xây dựng tính năng mới đó và sự tích hợp này đang bắt đầu theo cách của tôi.

Tình huống này là một tình huống mà các kỹ sư tại mParticle đã rất quen thuộc. Mặc dù ngày nay, các nhà phát triển của chúng tôi xây dựng thay vì triển khai SDK, nhưng nhiều kỹ sư của chúng tôi biết cảm giác như thế nào khi ở phía bên kia bàn hát “Nhạc Blues SDK mới”.

Chính trải nghiệm đầu tiên này đã thúc đẩy chúng tôi thực hiện khoản đầu tư mới nhất vào trải nghiệm dành cho nhà phát triển mParticle: các ứng dụng Thương mại điện tử mẫu hoạt động đầy đủ cho Web , iOS , và Android , được triển khai từ đầu đến cuối với SDK của chúng tôi.

Các ứng dụng này cung cấp cho bạn một sân chơi để thử nghiệm với SDK của chúng tôi và tìm hiểu cách bộ sưu tập sự kiện hoạt động với mParticle. Chúng làm nổi bật các ví dụ làm việc về các sự kiện của chúng tôi được triển khai trên các hành động phổ biến của người dùng như lượt xem trang, tùy chỉnh sản phẩm, thêm / xóa khỏi nút giỏ hàng và nút thanh toán, trong số những hành động khác.

Trong nhiều trường hợp, bạn có thể thấy rằng bạn có thể sao chép trực tiếp các sự kiện này vào ứng dụng của riêng mình và chỉ thực hiện các sửa đổi nhẹ để đáp ứng nhu cầu của trường hợp sử dụng cụ thể của bạn.

Trong video dưới đây, Alex Sapountzis và Peter Jenkins, các kỹ sư mParticle, người đứng đầu phát triển ứng dụng mẫu trên Web và iOS, thảo luận về kinh nghiệm của riêng họ khi triển khai SDK của nhà cung cấp và lý do họ phát triển các ứng dụng mẫu.

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

Matt Bernier, Giám đốc sản phẩm cấp cao của Developer Experience tại mParticle.

“Vì các ứng dụng này hiển thị cho bạn các SDK của chúng tôi đang chạy trong chính xác ngữ cảnh mà bạn đang tìm kiếm, nên không có phỏng đoán. Điều này có nghĩa là bạn có thể hoàn thành việc triển khai của mình và chuyển sang dự án tiếp theo nhanh chóng hơn ”.

Xem xét dưới lớp vỏ của các ứng dụng mẫu

Nếu bạn là khách hàng của mParticle, bạn có thể xem các ứng dụng này đang hoạt động và tham khảo mã trực tiếp khi bạn tìm hiểu thêm về quy trình xây dựng chúng của chúng tôi. Đây là cách bạn có thể chạy ứng dụng cục bộ:

Lưu ý: Bạn sẽ cần quyền truy cập vào không gian làm việc mParticle để tạo khóa API.

1. Sao chép repo ứng dụng mẫu .
2. Cài đặt các gói phụ thuộc bằng cách sử dụng npm install.
3. Điều hướng đến Thiết lập> Đầu vào trong không gian làm việc mParticle của bạn.
4. Chọn nền tảng Web và tạo / sao chép khóa API của bạn.
5. Trong thư mục gốc của dự án này, đổi tên .env.sample thành .env.
6. Cập nhật biến môi trường REACT_APP_MPARTICLE_API_KEY với Khóa API web mParticle của bạn.
7. Chạy dự án bằng cách sử dụng npm start.

Hiện không phải là khách hàng của mParticle? Của chúng tôi Chương trình Accelerator là cơ hội cho các công ty khởi nghiệp đủ điều kiện nhận được tối đa một năm quyền truy cập miễn phí vào mParticle.

Không quá KHÔ: Cách chúng tôi Trưng bày SDK của mình bằng cách Giữ cho Mã Ứng dụng Đơn giản

Hơn hết, nhóm ứng dụng mẫu muốn các sản phẩm này đóng vai trò là công cụ giảng dạy để các kỹ sư tìm hiểu SDK của chúng tôi và hiểu các phương pháp hay nhất để triển khai bộ sưu tập sự kiện với mParticle.

Mục tiêu này thông báo cho nhiều lựa chọn kỹ thuật đằng sau các ứng dụng mẫu, từ các công cụ và khuôn khổ được sử dụng để xây dựng chúng, đến các quy ước mã hóa được sử dụng trong suốt các dự án.

Tính tương đối là lý do chính tại sao Alex Sapountzis quyết định sử dụng React làm khuôn khổ để xây dựng ứng dụng mẫu web. React là khung giao diện người dùng phổ biến nhất trên thế giới, và được sử dụng để xây dựng các ứng dụng khác nhau, từ các trang Thương mại điện tử đến các nền tảng phát trực tuyến.

Do đó, có thể đặt cược an toàn rằng hầu hết các nhà phát triển web đang triển khai SDK web mParticle sẽ không phải học React trước khi có thể nhận được giá trị từ ứng dụng mẫu này.

Khi đi đến quyết định về các mẫu thiết kế React để sử dụng, Alex đã cố gắng cân bằng bằng cách ưu tiên các tính năng 'tích hợp sẵn' tương đối mới, chẳng hạn như React Hooks và Trình cung cấp ngữ cảnh so với Redux, một thư viện của bên thứ ba là một- kiến trúc tiêu chuẩn đã biết, nhưng có thể rất phức tạp và áp đảo để cuối cùng mang lại trải nghiệm học tập rõ ràng hơn cho người dùng.

Ví dụ, sử dụng móc tùy chỉnh đã là một xu hướng trong cộng đồng React trong một thời gian khá dài. Việc sử dụng các hàm này đòi hỏi phải tạo ra các hàm của riêng bạn để tận dụng các móc React chung nhằm mục đích chia sẻ logic trạng thái giữa các thành phần.

Alex cảm thấy rằng việc sử dụng phương pháp này trong các ứng dụng mẫu sẽ hiểu được cách SDK của chúng tôi đang hoạt động và vì lý do này, anh ấy đã chọn gắn bó với việc sử dụng các móc vani như useEffect.

“Nếu tôi đang xây dựng cái này như một gói mà ai đó sẽ sử dụng trong dự án của họ, tôi có thể đã làm mọi thứ hơi khác một chút,” Alex nói, “nhưng vì đây là một công cụ giáo dục nên tôi không muốn ai đó phải lo lắng về những gì React đang làm –– Tôi muốn họ xem mParticle đang làm gì trong một ứng dụng React. ”

Khám phá các thành phần của ứng dụng web, bạn sẽ thấy một số ví dụ trong đó useEffect được sử dụng để thu thập các thuộc tính sẽ được chuyển tiếp với các sự kiện mParticle và tự kích hoạt các sự kiện. Dưới đây là một trong những cách sử dụng useEffect trên thành phần ProductDetailPage :

 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]);

Sử dụng hook vanilla React trong các trường hợp như thế này giúp hiểu mParticle SDK dễ dàng hơn nhiều so với việc logic này được đóng gói thành các chức năng riêng biệt trong các mô-đun khác nhau. Ngoài ra, bạn có thể nhận thấy rằng đây là một mẫu mã khá nặng về bình luận.

Các nhà phát triển ứng dụng mẫu đã dành thời gian để nhận xét rõ ràng mã xung quanh việc sử dụng SDK của chúng tôi –– cả nơi diễn ra các cuộc gọi sự kiện và xuyên suốt logic hỗ trợ thu thập sự kiện.

Dưới đây là một ví dụ khác từ cùng một thành phần cho thấy cách nhận xét giúp cung cấp cho bạn bối cảnh hoàn chỉnh về cách sử dụng SDK của chúng tôi trong các tình huống thực tế và không có gì để phỏng đoán:

 // 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

Dogfooding SDK và tính năng của riêng chúng tôi và tận dụng các sản phẩm của riêng chúng tôi

Mặc dù mục đích chính của các ứng dụng mẫu này là giúp khách hàng của chúng tôi dễ dàng triển khai SDK của chúng tôi và nhận ra giá trị từ dữ liệu của họ, nhưng chúng tôi cũng nhận thấy giá trị nội tại to lớn từ các ứng dụng này như một phương tiện thử nghiệm và cải thiện –– hoặc “dogfooding” –– của chúng tôi SDK riêng và các tính năng hướng tới khách hàng.

Săn bắt lỗi trong vùng hoang dã của TypeScript

Ví dụ: việc xây dựng ứng dụng mẫu web cho phép chúng tôi khám phá một số trường hợp phức tạp nảy sinh khi sử dụng SDK web cốt lõi của chúng tôi trong một dự án React với TypeScript dưới dạng gói npm.

Trong một số trường hợp, sự tác động lẫn nhau giữa ba công nghệ cụ thể này dẫn đến tình trạng chạy đua trong đó SDK của chúng tôi không phải lúc nào cũng được khởi chạy khi một sự kiện được gọi.

Mặc dù SDK cốt lõi của chúng tôi đã chứa logic để giải quyết vấn đề này, nhưng một số mã nhất định trong các gói của React đã phá vỡ các kiểm tra này và gây ra một dòng thác bất thường xảy ra. Sau khi nhận thấy vấn đề này, Alex đã tiến hành một cuộc tìm kiếm lỗi với Rob Ing, chuyên gia về API JavaScript. Hai bushwhacked thông qua dấu vết ngăn xếp, khắc phục sự cố và phát hành các bản vá cho SDK cốt lõi của chúng tôi.

Sử dụng các tính năng lập kế hoạch dữ liệu riêng của chúng tôi

Sự không nhất quán ở giai đoạn thu thập dữ liệu là một trong những nguyên nhân lớn nhất của vấn đề chất lượng dữ liệu tiếp tục xuống đường ống.

Các công cụ và tính năng lập kế hoạch dữ liệu của mParticle được thiết kế để giúp các kỹ sư và các bên liên quan đến dữ liệu khác sắp xếp theo kế hoạch dữ liệu, thực hiện kế hoạch này một cách chính xác và xác định lỗi trong thời gian thực.

Khi chúng tôi xây dựng các ứng dụng mẫu này, chúng tôi muốn thực hành những gì chúng tôi giảng bằng cách sử dụng công cụ lập kế hoạch dữ liệu để duy trì sự nhất quán về cách các sự kiện và thuộc tính được đặt tên, cấu trúc và thu thập trên ba nền tảng này.

Các kỹ sư và PM của chúng tôi thiết lập không gian làm việc mParticle chuyên dụng cho dự án ứng dụng mẫu và sử dụng giao diện người dùng của chúng tôi để tạo và tạo các kế hoạch dữ liệu. Sau khi các sự kiện được triển khai trong cả ba ứng dụng và chúng tôi đang gửi các sự kiện từ SDK tới mParticle, chúng tôi đã sử dụng Live Stream để kiểm tra sự sai lệch giữa dữ liệu được thu thập và dự kiến cũng như thông báo lỗi của Live Stream để dễ dàng tìm ra nguồn gốc của lỗi.

Việc sử dụng các tính năng này giúp quá trình tạo kế hoạch dữ liệu, triển khai thu thập sự kiện và đảm bảo tính nhất quán trên nhiều nền tảng trở nên trơn tru hơn nhiều. Các tính năng lập kế hoạch dữ liệu của riêng chúng tôi đã giúp ích đáng kể trong việc tạo ra các ứng dụng mẫu và chúng tôi dự định tiếp tục sử dụng các ứng dụng mẫu để thử nghiệm và cải thiện các tính năng lập kế hoạch dữ liệu của mình.

Tương lai nắm giữ điều gì?

Bằng cách giảm đường cong học tập với SDK của chúng tôi, tăng tốc thời gian triển khai và giảm thời gian thành giá trị của dữ liệu, các ứng dụng mẫu này có thể mang lại giá trị sâu rộng cho các nhóm kỹ sư làm việc với mParticle.

Thực tế là chúng tôi đã vận chuyển MLP của mình (“Dự án tối thiểu đáng yêu”, một thuật ngữ mà PM Matt Bernier của chúng tôi đã đặt ra) đánh dấu sự khởi đầu chứ không phải kết thúc, công việc của chúng tôi nhằm cải thiện các nguồn lực này.

Peter Jenkins cho biết: “Tôi nghĩ đây chắc chắn là thứ mà chúng tôi sẽ tiếp tục đầu tư và cải thiện theo thời gian, từ việc thêm các nhận xét bổ sung đến luôn cập nhật những thay đổi mà chúng tôi thực hiện đối với SDK.”

Ngoài ra, chúng tôi cũng có ý định tiếp tục sử dụng các ứng dụng này như một phương tiện thử nghiệm và cải thiện không chỉ các tính năng SDK và API mà còn toàn bộ bộ sản phẩm và tính năng của chúng tôi.

Ví dụ: trong các lần lặp lại sắp tới của ứng dụng mẫu web, chúng tôi dự định tích hợp các công cụ dành cho nhà phát triển của mình bao gồm Smartype và Linting . Nói cách khác, như Peter Jenkins đã nói, những ứng dụng mẫu này sẽ là “Nguồn tài liệu thường xanh về cách sử dụng SDK chính xác của chúng tôi mà bạn thực sự có thể chạy”.

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

Trước đây đã xuất bản tại đây.