shopify_反思构建自定义Shopify应用程序

杨甫
2023-12-01

shopify

Introduction

介绍

Hello, and welcome to all things Shopify! My colleague and I have spent the last 3 months building and scaling a Shopify store for a client. Shopify has created an ecosystem that is surrounded by plugins, also known as Apps. We ended up building our own plugin to handle Subscription Boxes, in just less than 2 months!

您好,欢迎来到Shopify! 我和我的同事过去3个月中一直在为客户建立和扩展Shopify商店。 Shopify创建了一个由插件(也称为Apps )包围的生态系统。 我们最终在不到2个月的时间内构建了自己的插件来处理Subscription Boxs

To begin with, let me say that Shopify is the superior platform for E-commerce. It edges out platforms like WooCommerce and BigCommerce by a mile. Shopify is to the E-commerce world what JavaScript is to the developer world — big community support, well-maintained plugins, and strong tooling. Getting off the ground with Shopify is easy, and does not feel hacky in any way. If you ever wonder why I mentioned the last point, it’s because WooCommerce is literally a plugin stitched together for WordPress.

首先,让我说Shopify是电子商务的卓越平台。 它与WooCommerce和BigCommerce等平台相距一英里。 对于电子商务世界来说,Shopify与对于开发者世界而言,JavaScript是一样的-大型社区支持,维护良好的插件和强大的工具。 使用Shopify上路很容易,并且不会感到任何麻烦。 如果您想知道为什么我提到最后一点,那是因为WooCommerce实际上是一个为WordPress缝合在一起的插件。

The only competition to Shopify is..building your own solution, which should ONLY be explored if you’re a big player in the e-commerce space, we’re talking millions in revenue year on year. Even then, I would strongly advise your platform to be built independently, with Shopify Headless Commerce. This is where your client-side will be completely decoupled from Shopify’s back-end infrastructure, giving you the freedom to build your front-end however you want, and on whatever platform you please.

Shopify的唯一竞争是..构建您自己的解决方案,如果您是电子商务领域的佼佼者,则应该探讨该解决方案,而我们每年的收入都是数百万美元。 即使那样,我还是强烈建议您使用Shopify Headless Commerce独立构建平台。 在这里,您的客户端将与Shopify的后端基础架构完全脱钩,从而使您可以随意构建自己的前端,并可以在任意平台上自由构建。

For our client, a large portion of their sales is driven by the subscription model, which is picking up steam all over India. There are 2 plugins out there that do a fantastic job with subscriptions but did not fit the custom needs of the store.

对于我们的客户而言,其很大一部分销售额是由订阅模式驱动的,这种订阅模式正在印度各地掀起热潮。 有2个插件可以很好地完成订阅,但不能满足商店的自定义需求。

Over the article, I will be detailing the lessons I learned, whether it applies to e-commerce, engineering, or both!

在这篇文章中,我将详细介绍我学到的教训,无论它适用于电子商务,工程学,还是两者都适用!

Building our own Subscription plugin

构建我们自己的订阅插件

We decided to roll with building our own plugin because the popular ones on Shopify are too restrictive. For the features that were required, which included pausing/resuming one at any time, skipping individual orders, and custom delivery dates, we were strangled by the limited functionality of Recharge, the hottest subscription plugin.

我们决定继续构建自己的插件,因为Shopify上的流行插件过于严格。 对于所需的功能(包括随时暂停/恢复一个功能,跳过单个订单和自定义交货日期),我们为最热门的订阅插件Recharge的功能有限而感到str恼。

Lesson 1: Plugins on Shopify are restrictive. You almost always need a developer to satisfy your custom needs. Custom requirements forwarded to the plugin creator results in exorbitant fees being paid upfront.

第1课:Shopify上的插件是限制性的。 您几乎总是需要开发人员来满足您的自定义需求。 转发给插件创建者的自定义要求会导致高昂的费用被预先支付。

The beautiful thing about Shopify is, you can build your own plugin with the tech stack of your choice. Shopify provides their APIs to you after you finish a certain form-filling process, which you can consume on your server-side code to do whatever you want.

Shopify的美丽之处在于,您可以使用自己选择的技术堆栈来构建自己的插件。 完成特定的表单填写过程后,Shopify将为您提供其API,您可以在服务器端代码上使用这些API来执行所需的任何操作。

The idea in our head was simple:

我们脑海中的想法很简单:

  • Mark certain products as Subscriptions over on Shopify. Parse them on our server to identify that they’re subscriptions

    在Shopify上将某些产品标记为“订阅”。 在我们的服务器上解析它们,以确定它们是订阅
  • Filter only the subscription line items from the order. Figure out what to store, including what data needs to be cleaned and transformed, as well as business logic for calculating subsequent dates. (These are pre-paid subscriptions)

    仅过滤订单中的订阅订单项。 找出要存储的内容,包括需要清除和转换的数据以及用于计算后续日期的业务逻辑。 (这些是预付费订阅 )

Your question now might be, how are you getting the order data in the first place?

您现在的问题可能是,首先如何获取订单数据?

Want to read this story later? Save it in Journal.

想稍后再读这个故事吗? 将其保存在 日记本中

Shopify has webhooks for almost every operation that takes place on the storefront, so you can intercept an action (customer creation, order creation, etc) and do whatever you want with the data returned to you.

Shopify几乎对店面中发生的每项操作都具有Webhook ,因此您可以拦截操作(创建客户,创建订单等),并使用返回的数据做任何您想做的事情。

However, this is a trickier problem than you’d probably anticipate.

但是,这是一个比您预期的棘手的问题。

The reason? If our server goes down, and an order comes in right at that moment, the webhook won’t be intercepted by anything. Shopify has a fallback mechanism where it tries again, but this doesn’t alleviate the problem we could potentially face if our server malfunctions.

原因? 如果我们的服务器出现故障,并且此时订单正确,则Webhook不会被任何东西拦截。 Shopify具有回退机制,可以再次尝试该机制,但这并不能缓解如果服务器发生故障我们可能面临的问题。

Furthermore, what if some validation fails, and a record isn’t created in our DB, despite the webhook being successfully intercepted?

此外,即使成功地拦截了Webhook,如果某些验证失败并且在数据库中也未创建记录,该怎么办?

For this reason, we spun up a back-up server. One that is only responsible for capturing the order and placing it in a separate collection as a stringified JSON, so we can process it later.

因此,我们启动了一个备份服务器 。 一个只负责捕获订单并将其作为字符串化JSON放在一个单独的集合中的人,因此我们以后可以对其进行处理。

A primitive distributed system, of sorts.

原始的分布式系统。

Lesson 2: Distribute your load! Server outages happen, and even for a simple storefront like this one, missing out on critical orders results in manual work required to update the central database with a fresh order, or having to rollback.

第2课: 分配 您的负载! 服务器发生故障,即使对于像这样的简单店面,关键订单的遗漏也会导致需要人工工作来更新新订单的中央数据库,或者不得不回滚。

Tech Stack

科技栈

We used Express (on top of NodeJS) and MongoDB for our database. The reasoning behind some of these decisions:

我们对数据库使用Express(在NodeJS之上)和MongoDB。 这些决定背后的原因:

  • Express is fast, lightweight, and non-intrusive. We’re aware of the performance bottlenecks, but our application isn’t CPU bound.

    Express是快速,轻巧且非侵入式的。 我们知道性能瓶颈,但是我们的应用程序不受CPU限制。

  • MongoDB, despite all the issues surrounding it of late (such as data integrity), is a solid choice when you want an easy, predictable structure for your database. Since in the initial days we didn’t really know what we’d be storing, updating the schema on the fly is really powerful, while keeping the other records intact. Our queries were relatively simple as well.

    尽管最近有许多问题(例如数据完整性),但是MongoDB是一个理想的选择,当您希望为数据库提供简单,可预测的结构时。 由于在最初的日子里我们并不真正知道要存储的内容,因此即时更新架构确实很强大,而其他记录则保持不变。 我们的查询也相对简单。

  • Forest Admin, the absolute star of this show. This is an open-source tool you can use to put up an admin panel on the fly for your database. Incredibly useful, and has saved hours and hours of development time. Cannot recommend this tool to anybody enough.

    Forest Admin 这个节目的绝对明星。 这是一个开放源代码工具,可用于为数据库动态设置管理面板。 极其有用,并且节省了数小时的开发时间。 无法向任何人推荐该工具。

  • Logentries by Rapid7. A pretty useful tool to quickly catch stuff breaking on production in the initial days.

    登录 由Rapid7。 一个非常有用的工具,可以在开始的几天内快速捕获生产中断的东西。

A note on MongoDB: We didn’t ever have to scale beyond the M0 cluster (Free-tier) on MongoDB Atlas (a cloud Mongo service). We didn’t need the additional RAM to process multiple orders, even during peak sale hours. The storage also was unnecessary: we’re storing nothing beyond a bunch of strings and nested objects in our Subscription collection. This might change in the future.

关于MongoDB的注释:我们从来不必扩展到 MongoDB Atlas (云Mongo服务) 上的M0集群(免费层 )。 即使在高峰销售时间内,我们也不需要额外的RAM来处理多个订单。 存储也是不必要的:除了Subscription集合中的一堆字符串和嵌套对象外,我们什么也没有存储。 将来可能会改变。

Some things we considered, but eventually avoided.

我们考虑了一些事情,但最终避免了。

  • Redis. We considered the option of an in-memory cache to keep track of incoming orders in case we need the request body for later, but it eventually started feeling unnecessary. A new collection in MongoDB helped us better to store failed requests.

    Redis 。 我们考虑了使用内存中缓存来跟踪传入订单的情况,以防我们稍后需要请求主体,但最终开始觉得不必要。 MongoDB中的一个新集合帮助我们更好地存储了失败的请求。

Lesson 3: Don’t overengineer! Choosing a tech stack you’re comfortable with for a high-stakes project is MUCH more important than choosing that new shiny framework that does X better. Simplify your problem statement, and choose the bare minimum number of tools to make it work.

第3课: 不要过度设计 选择适合高风险项目的技术堆栈比选择能更好地完成X任务的新框架更为重要。 简化问题陈述,并选择最少的工具以使其起作用。

But is there room for Improvement?

但是还有改进的空间吗?

In retrospect, what could I have done better tackling a project of this scale, from a technical standpoint?

回想起来,从技术的角度来看,我能做些什么来更好地应对这一规模的项目?

  1. The lack of strong typing really hurts! In hindsight, I really wish we used TypeScript. The reason? Shopify sends huge payloads that are difficult to validate on spot, and I’m sure they have types for their API responses somewhere. We wasted a lot of time initially manually deciphering what properties to destructure, and making sure it’s consistent with what we’re sending to our database.

    缺少强类型输入确实很痛! 事后看来,我真的希望我们使用TypeScript 。 原因? Shopify发送了巨大的有效负载,这些负载很难当场验证,而且我敢肯定它们在某种程度上具有其API响应的类型。 最初,我们浪费了大量时间来手动解密要分解的属性,并确保它与我们要发送到数据库的内容一致。

  2. As I mentioned in the previous point, Shopify’s payloads are huge. We end up storing a lot of this information in our database as well, just in case it’s needed in the future. But we’re averse to sending big payloads to the client. If only there was a tool to trim down the payload sizes. (Looking at you…GraphQL)

    如前所述,Shopify的有效负载非常庞大。 我们最终也将大量此类信息存储在我们的数据库中,以防万一将来需要它。 但是我们不愿意向客户端发送较大的负载。 如果只有一个工具可以缩小有效负载大小。 (看着你…… GraphQL )

Conclusion

结论

I also plan on writing about my journey of freelancing. Too many topics, such as negotiation of a contract, are taboo, which I aim to eventually demystify. If you want to get updates on when those come out, you can follow me here, or my Twitter or LinkedIn to stay updated!

我还计划撰写有关自由职业生涯的文章。 禁忌是很多话题,例如合同谈判,这些话题我最终旨在使其神秘化。 如果您想获得更新的消息,可以在这里关注我,也可以在我的TwitterLinkedIn 关注我!

And that pretty much covers it. To sum it up, building our very own plugin for Shopify was super fun. Maybe one day we’ll decide to scale this plugin to the majority of users who are using Shopify (or maybe not). I hope you had as much fun reading this as I did writing this piece. Until next time!

这几乎涵盖了它。 综上所述,为Shopify构建我们自己的插件非常有趣。 也许有一天我们会决定将该插件扩展到使用Shopify的大多数用户(或可能不使用)。 我希望您和我写这篇文章一样开心。 直到下一次!

 Save this story in Journal.

story将这个故事保存在Journal中

‍ Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

every‍每个星期天早晨,您都可以在收件箱中等待本周最值得关注的Tech故事。 阅读Tech Newsletter中的“值得注意”

翻译自: https://blog.usejournal.com/reflecting-back-on-building-a-custom-shopify-plugin-71b1d105cc84

shopify

 类似资料: