我如何为我的Shopify商店建立一个通知小工具

Shopify商店的通知按钮

我可能和阅读这篇文章的许多人一样,每天都在努力应对无数次争夺我注意力的哔哔声、ping声和呼呼声。收到新邮件让我兴奋的日子已经一去不复返了。如今,通知变得个人化了;它们在屏幕上对我咆哮,在口袋里振动,甚至毫无歉意地轻拍我的手腕。

“停下你正在做的事,这真的很重要!”这是大多数通知所传达的态度,即使它们报告的内容很少是这样的。通知和警报信息已经变成了喊狼来了的男孩;我不再听他们的,因为我知道他们很少是重要的。

作为一个Shopify店主,我可以选择接收电子邮件通知、桌面浏览器推送通知、手机提醒或手表提醒。我店里的单笔销售所产生的噪音可以很容易地吵醒猫!

尽管所有这些提示都是可变的(Shopify有一个很棒的功能,可以选择接收什么通知),但我仍然希望在下订单或流量激增时收到某种提醒。我只是想要一些不那么让人分心的东西;温柔地说:“嘿,发生了一些事,但别担心,没什么好担心的。”所以,我决定做点什么。

首先要决定的是我真正想要的是非关键通知。由于这些通知不具有侵入性,我决定在网站上显示活动;购物车更新,销售和流量高峰。

幸运的是,Shopify有发布的能力人则当满足某些条件时。这似乎是一个很好的方法,因为这些都是非常即时的,当然比使用像IFTTT监控销售活动的电子邮件。

众所周知,我制作了一些奇怪的物联网小工具,喜欢物理对象与数据的交互。所以我开始收集一些组件来制作我所谓的“通知Bug”。

这个想法很简单:当下订单时,一束缓慢的光脉冲会轻轻地通知我。这个通知不需要我的任何互动,它会像出现一样悄悄地消失。类似的光脉冲也会通知我购物车更新或交通高峰,这些可以通过使用不同颜色的灯来区分。一组RGB LED可以很舒服地处理这个问题,而且只需要很少的功率。

我希望这个小设备是独立的,只需要USB插座供电,这样它就可以插在任何地方。完成后的设备可以很好地插入电视背面(大多数现代电视都有USB接口),当我的商店收到订单时,屏幕后面会发出柔和的光。这保证在我家击掌。

这是最终产品:

我是如何构建Bug的

以下是如何为您的商店或客户构建自己的通知小工具的方法。

部分要求:

我需要做的第一件事就是给虫子找个住处。“它必须是小而半透明的东西,以允许光的传递。”这是一个完美的机会,预热3D打印机和设计定制的东西。

经过多次迭代,我决定设计一个简单的圆形外壳。大约是饼干宽度的一半,但高度是饼干的两倍,外壳看起来足够小,可以装在任何地方,但刚好足够大,可以装下光子板、Neopixels和一个小的光漫射器。它的厚度只有8毫米,光会从看起来像固体的物体上“发光”。我选择了北极白色PLAFaberdashery因为我在过去的比赛中取得了非常好的成绩和成绩。

接下来,是将Neopixels Jewel直接焊接到光子板上。一旦我修剪了标题,就足够简单了。新像素有上拉电阻作为标准,所以直接连接工作良好。只需要连接三根电线,这很容易。一个到3.3v,一个到地,一个到引脚-在这种情况下是D5。

Shopify商店的通知按钮:单位住房

接下来,我用打孔机在外壳上打了一个洞,让一根迷你USB线为电路板供电(它还有一个漂亮的功能,可以固定小工具的盖子)。这个小工具现在有了它的最终形式——现在它只需要代码来激活。

通知按钮的Shopify商店:小工具在住房

现在我需要这个小工具来监听来自Shopify的通知。Photon独立于电脑工作,有自己的wifi芯片和处理器。Photon连接到Spark云,在那里它可以监听“事件”,然后触发例程。使用订阅方法非常简单。

难题的最后一部分是将webhook POST数据从Shopify引导到Spark Cloud。我们实际上不需要任何随POST请求发送的JSON数据,只是一种“ping”Spark云的方法。我的PHP有点生疏,但我刚刚设法使用cURL来处理POST请求。这个小PHP脚本就放在我自己的服务器上,等待来自Shopify webhook的POST请求。

用下面的代码Flash Photon,将PHP脚本上传到启用PHP的服务器,并将这些脚本的URL添加到Shopify通知面板,您就准备好了。瞧!为您或您的客户提供不需要任何操作的温和通知。

获取代码

借助Shopify合作伙伴计划发展您的业务

了解更多