作为前端开发人员如何构建Shopify应用程序

作为一名前端开发者，我知道从前端转向应用开发是很困难的。应用开发需要一套不同的技能，更不用说其中涉及的许多移动部件和技术了。

但这并不意味着不可能。在这篇文章中，我将分享我作为一个前端开发者进入Shopify应用开发的过程。我们将了解可用的工具，在哪里托管您的应用程序，以及提交过程如何工作。

但更重要的是，我想说明您不必成为后端全栈开发人员才能这样做。不管你在做什么类型的开发，你都可以创建Shopify应用程序。让我们开始吧。

为什么前端开发者可以考虑Shopify应用

就我个人而言，我是一名前端开发者。从桌子出现的时候我就开始做了。我在ZX Spectrum上写了第一行代码。我做过印刷设计，Flash, SEO，我爱上了网页排版，我想MooTools是开创性的，并将jQuery作为我通往JavaScript的门户。

七年前我偶然发现了Liquid，我很喜欢它的简洁。它是标记和逻辑的完美结合，我发现它很容易理解。在我看来，Liquid仍然没有得到应有的赞誉。

现在，我主要为小型和大型组织编写前端代码。每天，我的代码都局限于创建CSS和Javascript架构，尽我最大的努力使代码性能和可访问性。

我没有也从来没有处理过后端。服务器很可怕——当我运行的时候npm-install看到成千上万的文件被安装，这些文件我一无所知，我很恐慌。我只是一个前端开发人员，多年来一直在做我喜欢的事情。

但随着我更多地与Liquid和Shopify商店打交道，我发现不使用应用程序也只能到此为止了。Shopify是一个多功能平台，但我发现在某种程度上，只在店面工作限制了我可以做的客户项目。

“Shopify是一个多功能平台，但我发现，在某种程度上，只在店面工作限制了我能做的客户项目。”

我知道应用程序可以改善和补充我为客户提供的服务。然而，转向应用开发似乎是一个复杂的过程。它可能会令人生畏——涉及到太多的技术，以及太多的问题。React, KOA, Next, GraphQL, Polaris…我害怕这一切。但我发现，将应用程序添加到我的开发工具中，为我打开了一个充满机遇的新世界。除了能够提供额外的服务，需要应用程序开发我的客户，我目前有两个应用程序列在Shopify应用商店现在我正在写第三部。

我的两个公共应用程序都使用相同的开发流程和类似的设置Shopify App命令行，北极星,洋槐。一旦构建了第一个应用程序，重用组件就变得容易了。从一个应用到另一个应用，你也可以改进你的代码。OB欧宝娱乐APP创业可能会很困难，但在那之后，事情会变得更加清晰和简单。

因此，如果您不了解AWS、Heroku、Ngrok、Polaris、React、JSX、KOA、GraphQL、Apollo、Next、Webpack、NPM、CLI(或其他名称模糊的技术)，并且只喜欢JavaScript、CSS、HTML和Liquid等简单的东西，那么本文非常适合您。前端开发人员有很多机会开发Shopify应用程序，我希望这篇文章能给你一个起点，并回答你的一些问题。OB欧宝娱乐APP

你可能还喜欢:如何建立一个Shopify应用程序:完整的指南。

OB欧宝娱乐APP从Shopify App CLI工具开始

对于前端开发人员来说，开发应用程序最简单的起点就是使用OB欧宝娱乐APPShopify App CLI工具。它可以帮助你用React/Polaris前端快速生成Node.js和Ruby on Rails应用程序。

使用CLI，我有了一个基本的应用程序，它使用OAuth进行身份验证，并在几分钟内使用Polaris组件创建了一个“Hello World”页面。Shopify App CLI通过提供我入门所需的几乎所有东西，解决了所有繁重的工作。OB欧宝娱乐APP

“Shopify App CLI提供了我入门所需的几乎所有东西，省去了所有繁重的工作。”OB欧宝娱乐APP

服务器使用Koa.js。这是一个Node.js框架，处理诸如设置路由和调用API之类的因素。前端是使用包裹在Next.js应用程序框架中的Shopify的Polaris组件构建的。

对于前端开发者来说，这离我们的舒适区并不远。在服务器端，我们使用JavaScript，在前端我们使用React。

温习一下我的技术技能

在我的大多数Shopify客户端上，我仍然使用ES5或ES6。并不是所有的商店都有带有转译器的构建过程。有些事情我需要更好地理解和适应。

在开始之前，我OB欧宝娱乐APP强烈建议你看几件事:

• async/await函数
• 模块导入和导出
• 解构的任务
• React的基础知识

对于前端开发人员来说，没有什么是不知道的。我最初认为我已经涵盖了这些主题，但是如果您不在生产环境中每天使用它们，您将很难理解您的应用程序代码。

网上有很多关于这些技能的教程，但是我发现FrontendMasters给了我想要的一切。我特别选了两门课:凯尔·辛普森的课最近的部分，涵盖了解构、扩展操作符和异步函数(你的应用所做的几乎所有事情都依赖于它们，比如API调用和服务器函数)等主题;还有史蒂夫·金尼的Pure React v2中的状态管理课程，它涵盖了React钩子、状态管理和上下文，允许您使用React和北极星。

无论你选择哪种课程或教程，花几天时间进行培训，这样我就能真正理解我所做的事情的本质部分，从而节省了更多的开发时间。

你可能还喜欢:2020年Shopify应用商店的主要趋势(以及你可以从中学到什么)。

使用北极星

北极星是Shopify的设计系统。它为你的应用程序提供了HTML和React组件。选项卡、模态、图标、卡片——你需要的所有东西都在这里。有了北极星，你可以为你的应用用户提供一致的用户体验。

把Polaris React组件想象成乐高积木。你可以把它们混合在一起，它们会玩得很好。React在这里是一个很好的技术;您所需要的只是为组件提供数据。

我对北极星的入门建议OB欧宝娱乐APP

对于与北极星合作，我有三点建议:

• 理解React钩子
• 习惯JSX
• 使用达到上下文构建和管理组件之间的数据

我在第二个应用中最大的代码改进是使用React Context。在我的第一个应用程序中，我通过props自上而下(父级到子级)传递数据，这是一种标准的React模式。但是当涉及到许多组件时，这种模式会变得很麻烦。React Context允许你通过组件树传递数据，这是在组件之间共享应用逻辑的更好方式。

通过使用Context，我的所有组件都能够访问和共享应用程序数据。对我来说，这是应用程序结构和可维护性的重大变化。

ScriptTag API

Shopify的ScriptTag API让您将JavaScript文件注入到客户端店面。

对我来说，这引发了很多问题。我应该把这个文件放在哪里?我的服务器能处理大量请求吗?费用是多少?

最后，我将ScriptTag文件托管在AWS S3桶上，通过AWS Cloudfront CDN交付。

幸运的是2021-01 ScriptTag API,使用“缓存”:真的，您现在可以从Shopify cdn中提供脚本。这是一个巨大的性能提升，对应用开发者和商家都有好处。我的建议:

• 使用“缓存”:真的让Shopify负责分销
• 保持它尽可能小，以尊重商家的表现
• 将代码包装在IFFY中，没有变量应该泄漏

应用程序托管

我从来没有管理过服务器。安全、更新、负载平衡……这些都是需要处理的问题。对于我的应用，我使用的是Heroku。对于我的用例，它真的很容易设置，并提供了我在这一点上需要的东西。

要将应用程序投入生产，您需要一个部署管道，这听起来很复杂，但实际上并非如此。我的管道是:审查应用程序->阶段->生产。

Heroku连接到Github，这使得这个管道很简单。每当我创建提交时，Heroku都会部署一个审核应用程序。合并到主应用程序将创建一个新的应用程序，用于暂存，可以提升到生产环境。

通过这种方式，我可以在应用程序上线之前检查一下，确保在生产环境中一切都是稳定的。

我的建议:

• 确保您的主机提供SSL证书。这是Shopify应用程序的要求。
• 你的应用需要更新。无论您选择什么提供程序，都要确保您有一个允许您拥有登台环境的部署管道。

如果你决定使用Heroku，请观看James Ward关于如何使用Github集成设置管道的视频:

应用程序提交

说实话，我很害怕应用程序的提交过程。达到这一点需要花费大量的精力和时间，如果被拒绝，就意味着我所有的努力都白费了。

认证，访问范围，计费，GDPR, SSL，演示商店，服务条款，联系方式，视频，定价计划，列表副本，截图和主要利益图像-在提交应用之前需要考虑的因素很多。我花了几天时间准备提交，所以我可以尽我所能做到最好。

Shopify App CLI的优点是可以为您进行身份验证。Heroku提供免费的SSL。使用ScriptTag API“缓存”:真的flag负责店面Javascript分发。这让我更容易了:这些工具和服务承担了大部分繁重的工作。

为了测试和提交，Shopify提供了一个免费的开发存储。您可以从您的合作伙伴仪表板中设置一个。

应用程序清单

从这里开始，我需要让我的应用程序列表页面(商家将在Shopify app store中看到的页面)看起来很棒。对于图像，我使用Freepik。我不喜欢图片，但你可以以合理的价格找到许多好的资源。您将需要一个徽标，可选的关键效益图像，并为您的演示商店的产品图像。

创建演示视频是可选的。我一开始没有一个，但最终创造了几个OB欧宝娱乐APP促销。我完全不了解自己的深度，因为我对制作视频一无所知，但有了Promo，我可以在几个小时内设置一些东西。

这是我制作的一个视频。请不要太苛刻。

客户支持

客户支持是你的公共应用需要考虑的一个非常重要的方面。就个人而言，我决定使用Zendesk。它可以让我在一个地方记录我所有的谈话。虽然这是一项付费服务，但基本计划是负担得起的。

除了响应式客户支持，我在应用程序本身也有一些额外的“操作”视频。这些视频提供了使用该应用程序的分步指南，希望在商家需要联系我寻求支持之前帮助他们。

我的母语不是英语，所以我有口音，所以我决定不解说我自己的视频。幸运的是，我们现在有了听起来几乎像人类的人工智能声音。我用Amazon Poly来解说我的视频:

除了做好准备之外，没有什么小贴士和技巧可以让你成功上市。你需要完全跟随Shopify的官方公共应用程序要求密切关注。没有别的办法。

我发现下面这个发布应用到Shopify app Store的视频对理解审查过程很有帮助:

审核过程很快——我的第一款应用在三天内就得到了回复，第二款应用在一天内就得到了回复。由于存在“需要修补的小问题”，我没有立即得到回复。即使在多次阅读完整的要求并花时间准备提交后，我仍然设法犯了错误-这是应用程序提交的正常情况。

具体来说，应用审查团队指出了以下问题:

• 我要求read_scripts在实际不需要它的情况下。
• 我需要一个更独特的应用名称。
• 我不得不从应用列表中删除所有特殊字符。我有一个&在我的详细应用程序描述。
• 我需要从我的主要福利图片中删除文字。

我的建议:

• 遵循的指导方针切中要害。
• 拥有一个像样的演示商店。
• 如果你使用Shopify App CLI，你有现成的OAuth认证。这是应用商店的要求。
• 准备好商标、截图、图形或视频等资产。

发展带来新机遇

Shopify为所有人开放了自己的应用生态系统。不要被铺天盖地的技术栈吓倒。如果我们前端开发人员能够设法将一些CSS从IE9中排到最新的闪亮的新设备上，我们当然可以学习如何使用GraphQL进行API调用。这可能是一个艰难的过程，但了解Shopify如何在不同层面上工作将使您成为更好的开发人员。

“如果我们这些前端开发人员能够设法将一些东西与CSS从IE9中心对齐到最新的闪亮的新设备上，我们当然可以学习如何使用GraphQL进行API调用。”

如果你是一个前端开发人员，现在是时候开始研究Shopify应用程序了。OB欧宝娱乐APP对我来说，这是一个令人兴奋的机会。