shopify_如何构建您的第一个Shopify应用

shopify

by Igor Petrov

通过伊戈尔·彼得罗夫(Igor Petrov)

如何构建您的第一个Shopify应用 (How to build your first Shopify app)

为什么要构建Shopify应用程序？ (Why build a Shopify App?)

I have always been excited about how the e-commerce market is growing, and have made various attempts to dive into this world. About five years ago, a partner and I built an e-commerce website selling and delivering flowers, a soft toy, and a greeting card packaged together as a gift. This was an idea validation attempt, and we didn’t take it seriously. So it ended soon.

我一直对电子商务市场的增长感到兴奋，并做出了各种尝试进入这个世界的尝试。 大约五年前，我和一个合伙人建立了一个电子商务网站，销售和交付鲜花，毛绒玩具和贺卡，包装在一起作为礼物。 这是一个想法验证尝试，我们没有认真对待。 因此，它很快就结束了。

Later, we tried to sell floor tiles (partnering with a guy who had worked in that area for several years) and it didn’t go well, either. Mostly, the reason was the same: it was a side project for us, and we knew nothing about the floor tile market.

后来，我们试图出售地砖(与在该地区工作了几年的一个人合作)，但进展也不顺利。 大多数情况下，原因是相同的：对我们来说这是一个附带项目，而我们对地砖市场一无所知。

But, during this time, we developed a lot of e-commerce websites for our agency’s clients. Most of these websites were built using Ruby on Rails and specifically Spree. And this direction was successful — we learned a lot about e-commerce website development and typical development problems (as well as marketing, shipping, and different business problems).

但是，在这段时间里，我们为代理商的客户开发了许多电子商务网站。 这些网站大多数是使用Ruby on Rails以及Spree专门构建的。 这个方向是成功的-我们了解了很多有关电子商务网站开发和典型开发问题(以及市场营销，运输和其他业务问题)的知识。

This year I’m working with a new partner who had good experience with the Shopify platform. We talked a lot and came up to an idea of developing a Shopify app. This platform is growing fast, and there’s a big demand on the market for extending platform possibilities.

今年，我正在与一个在Shopify平台上有丰富经验的新伙伴合作。 我们聊了很多，然后想到了开发Shopify应用程序的想法。 这个平台发展Swift，市场上对扩展平台可能性的需求很大。

Building a product, rather than doing custom development for someone, was exciting for me, too. So these two things — e-commerce and product development — have naturally combined into the idea of a Shopify app.

对我来说，开发产品而不是为某人进行定制开发也很令人兴奋。 因此，电子商务和产品开发这两个要素已自然地融入了Shopify应用程序的想法。

了解应用程序构建的复杂性 (Understanding app building complexity)

So you’ve come up with an idea for your application. Now you need to decide if your app will interact with merchants’ storefronts by extending templates or injecting some scripts. Or maybe you need to work with some third-party API and integrate it into your app, or extend a Shopify Admin.

因此，您为应用程序提出了一个想法。 现在，您需要通过扩展模板或注入一些脚本来确定您的应用程序是否将与商家的店面进行交互。 或者，也许您需要使用一些第三方API并将其集成到您的应用程序中，或扩展Shopify管理员。

Each part can be complex enough. So if you just need to do something with Shopify store data and output something in the Admin section, you are dealing with 1 type or 1 point of complexity. If you need to work with external APIs and still have some section in Admin, you have 2 points of complexity. And so on.

每个部分可能足够复杂。 因此，如果您只需要对Shopify存储数据执行某些操作并在“管理”部分中输出某些内容，那么您将处理1种类型或1点复杂性。 如果您需要使用外部API，并且在Admin中仍有部分内容，则有2点复杂性。 等等。

从样板开始开发 (Start development with a boilerplate)

Well, we can see that our app is quite complex (though for customers it looks like an easy one). Since we agreed on app idea and initial MVP, I started to research and found that Shopify has a great shopify_app Ruby gem.

好吧，我们可以看到我们的应用程序非常复杂(尽管对于客户来说，它看起来很简单)。 自从我们就应用程序创意和最初的MVP达成共识以来，我开始进行研究，发现Shopify具有出色的shopify_app Ruby gem。

This is a pretty cool stuff that saves you a lot of time: it generates for you a Shopify app framework without the need to setup OAuth flow manually. Other things to note:

这是一个很酷的东西，可以节省很多时间：它为您生成Shopify应用程序框架，而无需手动设置OAuth流。 其他注意事项：

• Generated Shop model
  生成的商店模型
• Simple Webhooks and ScriptTags registering
  简单的Webhooks和ScriptTags注册
• Authentication approaches
  认证方式
• App Proxy verification (for your storefront customizations)
  应用程序代理验证(用于店面自定义)

I’ve launched a blank app in minutes, not hours.

我在几分钟而不是几小时内启动了一个空白应用程序。

使用推荐的工具 (Use recommended tools)

Next, I have researched how to approach Admin UI in your app. I found out that Shopify simplifies this task for you as well with the power of their design framework Shopify Polaris.

接下来，我研究了如何在您的应用中使用管理界面。 我发现Shopify凭借其Shopify Polaris设计框架的强大功能为您简化了此任务。

Polaris is a React.js components library, and this is the recommended way for extending the Shopify Admin section. Your app will look like a native Shopify app with admin sections like “Products” or “Orders” (Shopify uses it too, I guess).

Polaris是一个React.js组件库，这是扩展Shopify Admin部分的推荐方法。 您的应用程序看起来像是本地Shopify应用程序，其中包含“产品”或“订单”等管理部分(我猜Shopify也使用它)。

You should use it instead of some custom theme, because it’s well documented, supported, and has guidelines.

您应该使用它而不是某些自定义主题，因为它有充分的文档记录，受支持的内容并且有指导原则。

扩展Shopify管理员 (Extending Shopify Admin)

After a successful installation of Shopify Polaris into the project with the help of Webpacker or Yarn, you’ll be able to extend the Shopify Admin section.

在Webpacker或Yarn的帮助下将Shopify Polaris成功安装到项目中之后 ，您将能够扩展Shopify Admin部分。

For the welcome page (one that merchants will see after app installation with no data set up yet), then you’ll do these things:

对于欢迎页面(商户在安装应用程序后仍会看到尚未设置任何数据的页面)，那么您将执行以下操作：

• Add a route:
  添加路线：

get ‘/welcome’ => ‘home#index’

• Create a Rails controller:

  创建一个Rails控制器：

class HomeController < BaseAuthenticatedController def index endend

• Add a view template that just renders React component with the help of react-rails gem:

  添加一个视图模板，该视图模板借助react-rails gem来呈现React组件：

# home/index.html.erb<%= react_component("Welcome", {  apiKey: ShopifyApp.configuration.api_key,  shopOrigin: "https://#{ @shop_session&.url }",  debug: Rails.env.development?,  forceRedirect: !Rails.env.development? && !Rails.env.test?}) %>

• Create a React component that renders some Shopify Polaris components (like EmptyState, for example).

  创建一个可渲染一些Shopify Polaris组件的React组件(例如， EmptyState )。

The first step is quite clear for everyone who’s ever worked with Ruby on Rails. The second step should be as well, except the fact that you need to inherit your admin controllers from ShopifyApp::AuthenticatedController so every request will be authorized. I’ve created a subclass of this class for all future admin controller classes.

对于曾经使用Ruby on Rails的每个人来说，第一步都是很清楚的。 第二步也应该如此，除了您需要从ShopifyApp::AuthenticatedController继承管理控制器这一事实之外，这样每个请求都将得到授权。 我为将来的所有管理控制器类创建了此类的子类。

The third step is about rendering. I’ve installed the react-rails gem which comes with a nifty react_component helper, and I’ve added a rendering of a welcome component passing all necessary properties. For Embedded Apps (those that extend Shopify Admin) you should pass at least apiKey and shopOrigin options to utilize embedded components coming with Shopify Polaris. These embedded components are just React wrappers around the Shopify Embedded App SDK.

第三步是渲染。 我安装了带有漂亮的react_component帮助器的react-rails gem，并添加了传递所有必要属性的react_component组件的呈现。 对于嵌入式应用程序(那些扩展Shopify Admin的应用程序)，您至少应传递apiKey和shopOrigin选项，以利用Shopify Polaris随附的 嵌入式组件 。 这些嵌入式组件只是Shopify嵌入式App SDK的React包装器。

And finally, I’ve written a Welcome component and placed it into the app/javascript/components folder according to config/webpacker.yml.

最后，我编写了一个Welcome组件，并根据config/webpacker.yml将其放入app/javascript/components文件夹中。

Note that I’ve extracted some boilerplate, like the definition of shopOrigin and apiKey properties, into the BasePage component which is going to be a parent component for each app page. InfluencifyApp is a component that renders the Polaris AppProvider component, Page, inside it, and any children with {this.props.children} inside the Page.

请注意，我已经将一些样板文件(例如shopOrigin和apiKey属性的定义)提取到BasePage组件中，该组件将成为每个应用程序页面的父组件。 InfluencifyApp是呈现北极星组件AppProvider组件， Page ，里面，并与任何儿童{this.props.children}内Page 。

With this setup, I’ve created other components with InfluencifyApp as a root component for each app page.

通过此设置，我使用InfluencifyApp作为每个应用程序页面的根组件创建了其他组件。

店面定制 (Storefront customization)

There’s a good option in Shopify that allows you to customize a merchant’s storefronts: Script Tags. They are JavaScript files that will be injected into the storefront template.

Shopify中有一个不错的选项，可让您自定义商家的店面：脚本标签。 它们是将注入店面模板中JavaScript文件。

You can register them easily using the shopify_app gem. Here is how I’ve registered a script for Influencify app (at config/initializers/shopify_app.rb):

您可以使用shopify_app gem轻松注册它们。 这是我为Influencify应用注册脚本的方式(位于config/initializers/shopify_app.rb )：

# to include asset_url helperinclude ActionView::Helpers::AssetUrlHelper...config.scripttags = [    {event: 'onload', src: -> (domain) { asset_url('influencify.js', host: ENV['APP_DOMAIN']) } }]

Note that your scripts should be publicly accessible for all merchants across any of your deployments. I mean in terms of Rails, you shouldn’t have a digest in your script’s filename like influencify-dd432js....js , but instead, put the compiled version into a public folder or upload to CDN.

请注意，您的脚本应可供您所有部署中的所有商家公开访问。 我的意思是就Rails而言，脚本的文件名中influencify-dd432js....js包含influencify-dd432js....js之类的摘要，而influencify-dd432js....js编译后的版本放入public文件夹或上载到CDN。

The second option is that you can have entire pages or parts of pages served by your app. That is, in case you need to display something or fetch some data from your injected script, you can register which URLs for merchants will be served by your app. This feature is known as Application Proxies. Again, to implement this in your app is way easier with the help of the shopify_app gem — just follow their guides.

第二个选项是您可以让应用程序提供整个页面或部分页面。 也就是说，如果您需要显示某些内容或从注入的脚本中获取某些数据，则可以注册您的应用将为商家提供哪些URL。 此功能称为应用程序代理 。 同样，借助shopify_app gem，可以更轻松地在您的应用中实施此操作-只需遵循其指南即可 。

测试中 (Testing)

Testing a Shopify app may be a little tricky, but it’s familiar for anyone who’s ever worked with third-party APIs and tested via tools like localtunnel or ngrok. So each time you’re going to test your app, just launch your favorite tunneling tool and update the “Whitelisted redirection URL(s)” field on your app settings page with a URL to your authentication callback that looks like this: https://myapp.localtunnel.me/auth/shopify/callback.

测试Shopify应用可能会有点棘手，但它是为熟悉谁是曾经与第三方API通过类似工作的工具和测试任何人localtunnel或ngrok 。 因此，每次您要测试应用程序时，只需启动您喜欢的隧道工具，并使用身份验证回调的URL更新应用设置页面上的“白名单重定向URL(s)”字段即可，如下所示： https://myapp.localtunnel.me/auth/shopify/callback 。

To test your App Proxies endpoints for storefront customizations, you need to update this URL setting as well under the “Extensions” section.

要测试App Proxies端点的店面自定义设置，您还需要在“扩展”部分下更新此URL设置。

Of course, to test an app you also need a test development store.

当然，要测试一个应用程序，您还需要一个测试开发商店。

部署方式 (Deployment)

There’s nothing special about deployment, since this is just a regular Ruby on Rails application. I’ve deployed my app to the Heroku platform with the Puma and Sidekiq processes specified via the Procfile.

部署没有什么特别的，因为这只是常规的Ruby on Rails应用程序。 我已经将我的应用程序通过Procfile指定的Puma和Sidekiq进程部署到了Heroku平台上。

Also, you need to set the environment variables that you are going to use in your app via ENV['SOMETHING'].

另外，您需要通过ENV['SOMETHING']设置要在应用程序中使用的环境变量。

One more thing to notice is I’ve added a Node.js buildpack, because had issues with building via Webpack:

需要注意的另一件事是，我添加了一个Node.js buildpack，因为通过Webpack构建存在问题：

git:(master) heroku buildpacks     === influencify Buildpack URLs1. https://github.com/heroku/heroku-buildpack-ruby2. https://github.com/heroku/heroku-buildpack-nodejs

更进一步 (Going further)

Well, as you can see, building an app the way it’s recommended by Shopify includes many different steps, and it may turn out to be a complex task for a non-experienced developer.

好了，如您所见，按照Shopify的建议构建应用程序包含许多不同的步骤，对于没有经验的开发人员来说，这可能是一项复杂的任务。

Of course, building an app is only the tip of the iceberg. The next steps in a Shopify app building venture are making good promo materials, submitting it to the App Store, marketing, and customer support/development after it has been approved.

当然，构建应用程序只是冰山一角。 Shopify应用程序构建企业的下一步工作是制作良好的促销材料，批准后将其提交给App Store，市场营销和客户支持/开发。

If you liked this post, please click on ✋ to spread the word.

如果您喜欢这篇文章，请单击 ✋ 以扩展单词。

翻译自: https://www.freecodecamp.org/news/how-to-build-your-first-shopify-app-bc4edef32974/

shopify