show to make support <br> shopify

大家好 我是Jennifer Gray,我是Shopify的UX开发员,今天 我们要学习如何构建Shopify应用,利用Node和React技术 并使用Shopify应用CLI,它可以快速为Node.js应用构建支架,并且它可以在整个Shopify应用的开发过程中,协助我们将经常碰到的,常见开发任务实现自动化,在视频结束时 我们将建好一个简单的Shopify应用,可以在您的本地环境中运行,您应该掌握让自己的应用顺利上线和运行的知识,这样您就能投入更多时间 去研究您的应用,将能解决哪些实际问题,而不是花费大量时间,了解在构建Shopify应用时可能遇到,哪些必须和常见的开发任务,那我们开始吧 看看我们将要构建的功能,我们要构建带有一个标题和按钮的嵌入式应用,点击这个按钮时,将打开资源选择器 让我们可以,从开发商店中选择多个产品,我们在选择这些产品时,会在控制台日志中记录包含单个产品ID的数组,以便您使用此信息来实现其他功能,比如向Shopify GraphQL管理后台API编写一个查询,我们来介绍一下这个Shopify应用CLI,谈谈它是什么,我们需要满足什么要求 以及您要怎么样安装它,Shopify应用CLI是一个命令行界面工具,是为Shopify应用开发者构建的,它能让我们使用Ruby on Rails或Node.js,快速构建出一个Shopify应用,这个教程将会使用的是Node.js,它将直接集成您的Shopify合作伙伴账户,并在将应用安装到开发商店时 为您处理验证任务,如我之前所述 CLI还能让常见的开发任务实现自动化,例如在开发商店中填充示例数据,例如产品或客户,CLI还能轻松生成应用中的样板文件代码,例如调用账单API或Webhooks,整体来说 这是个很实用的工具,可以加速和简化您的应用开发过程,因为它能将许多费时费力的开发任务自动化,现在我们来看看跟随本视频教程进行学习,需要满足哪些要求,首先 您需要一个文本编辑器 我用的是VS Code,用什么文本编辑器都可以,只要顺手就行 比如Sublime或Atom,这两个也都挺好用的,您还需要一个命令行工具,我用的是iTerm 这个也一样,您用什么终端工具都可以 只要顺手就行,具体说到CLI 在安装之前,您要确保满足相关的要求,您可以在Shopify应用CLI文档中查看要求列表,网址是shopify.github.io/shopify-app-cli,这个链接会被添加到下方的描述框中 方便您找到,您需要安装最新版本的Ruby,还需要一个Shopify合作伙伴账户,我登录到我的Shopify合作伙伴账户,已经准备好了,您还需要一个开发商店,Shopify开发商店是一个免费的Shopify账户,您想创建多少个都可以,但是本教程的学习只需用一个开发商店就足够了,这是我的开发商店 “Jennifer的开发商店”,如果您还没有,您可以用这个“添加商店”按钮创建一个,我还在另一个标签页里登录了我的开发商店,这是商店管理后台 这样我也可以访问前端,如果您使用Windows系统 在安装CLI之前,您还需要多安装几个工具,您需要安装适用于Windows的Linux子系统,以及Windows版Ubuntu,在满足了所有要求之后,我们来看看怎样安装CLI,可以用几个不同的包管理器来安装CLI,如果您运行的是Mac OS 并且使用Homebrew包管理器,您需要依次运行两个命令,运行完毕之后 CLI就安装好了,如果您使用的是基于Linux的系统,安装说明会略有不同,具体要看您使用的是哪种包管理器,如果您运行的是Apt包管理器,您需要安装带有明确版本号的可下载.deb文件,您可以在文档中的发布页面链接获取这个文件,完成之后 您就可以运行所提供的命令,同样地 如果您使用的是yum包管理器,您需要安装带有明确版本号的可下载.rpm文件,您也可以在文档中的发布页面链接获取这个文件,然后运行所提供的命令,最后 您可以将Shopify应用CLI 作为Ruby gem来进行安装,这次也是使用所提供的命令 CLI安装完成之后,您要检查有没有…,您要检查安装是否正确,这样您就可以运行Shopify version命令,我们继续下一步 现在就来操作,在命令行中输入“Shopify version”,它显示我用的是版本1.0 这是最新版本 所以可以继续下一步,这一步很重要,尤其是如果您在观看视频前就已经安装了CLI,因为您可能在使用旧版的CLI,在这种情况下 这里会显示“找不到命令”的错误,这就表示您使用的是旧版的CLI,您需要前往“从旧版进行迁移”页面,就在Shopify文档里,然后按安装步骤进行一次性的迁移,因为从版本0.9开始,Shopify应用CLI将以软件包的形式进行安装和管理,不再采用Git库的形式,所以 如果您使用的是这个旧版本,您需要遵照这些步骤 确保您可以继续使用CLI,我们马上准备好开始探索CLI了 在此之前,我想提一下之前没提及的最后两个要求,但是要继续学习本教程的其余部分 这两个要求也是必需的,第一个是Node.js,因为我们要构建Node应用,所以您需要安装Node.js,最后一个 您需要用到ngrok账号,免费账户或付费账号都行,Shopify应用CLI要用ngrok来创建安全隧道,从公共网络连接到您的本地开发应用,当您满足全部要求 并且安装了最新的CLI之后,我们就可以来看看部分核心的命令了,“Shopify Help”命令列出了可用的命令,并描述了命令的作用 我们来在终端工具里尝试一下,我尝试输入“Shopify Help” 它会列出四个命令,“connect”可以连接到已有的项目 “create”可以创建新项目,您可以选择Node或Rails,“logout”就是退出目前验证的合作伙伴组织,还有“version” 我们已经用过了 可以输出版本号,我们想创建一个新的Node项目,所以我输入“shopify create node”,现在提示我们输入应用名称,您想起什么名字都行,我就起个有创意的名字 比如“我的测试应用”,现在问我们构建的应用属于什么类型 公共应用还是自定义应用,公共应用是为广大商家用户构建的,通过Shopify应用商店进行销售,并且需要经过审核后,才能展示在应用页面中,自定义应用是为一位商家构建的,不能通过Shopify应用商店进行销售,也不需要经过审核,在本教程中 我们来构建公共应用,现在 我们要把应用安装到开发商店中,CLI列出了所有的开发商店,都是与我的合作伙伴账户相关联的,我之前展示过了我的合作伙伴账户,这里列出了我的一个开发商店,不过 我其实有很多已隐藏的开发商店,这些只是我以前用过的旧商店,我把它们都隐藏了 因为已经用不上了,我希望CLI不要把这些商店列出来,因为有些商店的名称比较可笑,但还是列出来 就这样吧,我们选择没有隐藏的商店 “Jennifer的开发商店”,现在正在把它克隆到我的测试应用中,并使用npm来安装从属文件,需时大概一两分钟,好了 从属文件安装完毕,已在合作伙伴控制面板中 创建了我的测试应用,我们可以用这个链接来查看应用,这是我们的合作伙伴控制面板,这里是我们新创建的应用 非常好,现在 我们回到终端工具 现在可以切换到项目文件夹里,然后运行“shopify serve”启动本地服务器,我进入项目文件夹,然后运行“shopify serve”,已创建了ngrok隧道,询问我们是否要更新应用URL,我们这里选择“是” 因为我们要创建新应用,我们想把应用URL设置为开发URL,服务器正在运行,现在可以按“CTRL+T” 在开发商店打开这个项目,我们来操作 “CTRL+T”,这会提供一个URL,我点击这个URL,应该可以跳转到我们的开发商店,在这里就能继续安装我们的应用,我点击这个按钮 “安装未列出的应用”,大功告成 我们有一个应用了！现在功能还不多,但是我们稍后会继续完善,只需等几秒钟就会重定向到商店管理后台,应用会被嵌入在这里,我们现在进入了开发商店的管理后台,我们的应用刚加载好了,嵌入到了管理后台中 非常棒,您可能会想 为什么要嵌入应用,而不是直接用独立的应用,通过把应用嵌入Shopify管理后台,您就能打造优秀的用户体验,提供Shopify商家熟悉的界面 使用简单,还能帮您确保始终如一的用户体验,无论商家使用哪个版本的应用,所以不管是使用网页版,或者使用iOS或Android版的Shopify移动应用都会如此,熟悉的用户体验可在您的应用和用户之间,建立互信的关系,让他们更有机会向别人推荐您的应用,现在 我们继续 打开我们的文本编辑器,我们来看看在项目里创建的文件,您的项目文件夹所在的子目录,就是在创建项目当时,您的终端工具所在的位置,所以我的文件夹就在主文件夹里,这里面已经有几个文件了,不过我只看其中几个文件,这是我们的.env文件,在这里可以找到您的Shopify API密钥和API机密,这里还有您的商店、访问范围以及托管信息,也就是您的ngrok URL,Shopify API密钥和API机密,也能在合作伙伴控制面板中找到,我们想把这个信息分开放在不同的文件里,因为不想公开透露这个信息,接下来 这里有服务器文件,我们不会乱动这些文件里的内容,但我会快速过一遍这里面的东西,接下来我要从next.js导入“next”,next.js是一种框架 用于设置基于React的应用,Next.js负责处理您通常要在React应用中要做的事情,例如Webpack配置,模块替换、服务器端渲染和客户端渲染,我们还导入了“koa”,Shopify应用使用开放授权(OAuth)进行验证,这是一种基于令牌的授权和验证系统,Shopify使用它来将应用安全连接到Shopify和商家,所以这个koa中间件会配合koa Shopify验证,处理大部分的验证过程 并创建您的自定义服务器,Shopify koa中间件,也会安全地为Shopify的GraphQL请求提供代理,这里还有一个处理程序文件,我们的应用被设置为使用Apollo来获取数据 而Apollo客户端,则被设计为让您能快速构建React UI,这个React UI可以使用GraphQL获取数据 这就是这里所设置的内容,这里还有注册Webhooks文件,这只是某种支架代码 用于注册Webhooks,在这个更改文件夹里头,我们有一些代码可以调用账单API,当您准备好设置应用的账单功能时可以使用,您可以通过CLI进行操作,这样您在本教程里就不需要 使用GraphQL账单或Webhooks,但这只是概述了在服务器文件中的内容,接下来 我们看看这个页面文件夹 里面有我们的前端组件,Next.js会使用应用组件来将类 传递给应用中的其他文件,所以 您通常能在索引文件中找到的内容,都会被app.js文件传递到应用中的其他部分,您可以看到这里正在导入几个不同的,提供程序组件,一个是Apollo的 一个是Polaris的 一个是App Bridge React的,我们还没介绍Polaris和App Bridge,但是 待会这两种库我们都会用到,等真的需要用的时候 我们再来详细介绍,这些正在导入的提供程序组件,它们只是用来包装我们的整个应用,我们需要它们,才能在整个应用中分别使用每一个库,最后 我们会介绍一下index.js页面,这是应用的主页面 也是我们开展工作的主要位置,在这个页面中 我们能看到,正从Shopify Polaris导入的标题和页面组件,Polaris究竟是什么呢？,我们打开文档来一探究竟,所以 Polaris是一个设计系统,用来提供连续统一的体验 在整个界面构造一致的模式,连续统一的体验正好呼应了我之前所提到的,将您的应用嵌入管理后台能带来的优势,在使用您的应用时 应该在整个界面,构造一致和熟悉的体验,Polaris正是实现这种一致体验的好帮手,这对构建我们平台的应用开发者而言非常有价值,它帮助开发者简化商家与产品的互动方式,使之更具可预见性,并且遵守Web可访问性的标准,设计系统包括一系列广泛的模式,您可以用来打造最佳的用户体验,Polaris文档会为您介绍特定的内容指南,以及您可以使用的措辞,这里有一些设计指南 您可按照指南来,设计您想要的布局、颜色和版式等等,还有一些组件包含一系列的界面元素,可以在您的应用中重复利用,我们来看看其中一些目前正在使用的组件,我们在app.js文件中已经见过了一个组件,就是用来包装我们的应用的 应用提供程序组件,在这里 如我之前所说的,我们有标题和页面组件,标题由页面组件包围,标题组件显示的就是我们目前在应用中,所看见的文本,如果我们替换掉它,用其他文本来替换 然后再返回到应用中,就能看见应用已经重新加载了新的文本 非常好,现在 我们要做的是在应用中添加按钮,在点击这个按钮时,它会触发启动一个模式,为我们显示开发商店中的产品列表,我们开始操作 添加这个按钮,Polaris确实有一个按钮组件,我们可以把它导入这里,对它进行渲染 实现这种功能,不过 我们来看看页面组件,了解它本身的可自定义程度如何,我打开Polaris文档,搜索页面组件,Polaris文档会为每个组件,提供一个已渲染组件的示例,以及相应的代码,我们来看看这个示例,看来页面组件本身的自定义程度很高,有不同的标题 有一个按钮页面路径,我们或许可以按照需求来对它进行自定义,我们看看这里的下拉菜单,可以看到不同变体的页面组件,以及相应的代码示例,我来看看这个示例 它比较简单,这里有个标题和按钮 我们来看看怎么自行实现这个效果,看来订单标题就是页面组件的标题道具,然后创建订单按钮 这看起来是主要操作,如果向下滚动页面 我们可以看到,页面组件将会接受的所有道具列表,我们这里有一个标题 它会接受字符串,以及主要操作道具 我点击它以获取更多详情,我们或许想添加内容 即字符串,这就是显示在按钮上的文本,我们或许也想在点击按钮时,触发一些操作,看起来这会是一个onAction,这是执行操作之后的一个回调命令,我们在代码里尝试一下,我暂时删除这个,我删除了这两个用不上的导入项,好了 我们想添加标题,我们把它叫做“产品选择器”,我们需要主要操作…,所以我打开这个,还有这个 我们需要在按钮上显示的文本内容,我们就起名叫“产品选择器”,另一个是onAction 这个是回调命令,目前来说 我们要做的就是…,我们要在控制台日志中进行记录 确保在点击按钮时,确实会触发某些操作,我在控制台日志中记录“已点击”,好了 我们回到浏览器里看看效果,好 我们现在能看见页面组件了,它的标题是“产品选择器” 以及“选择产品”按钮,如果我打开控制台,然后点击按钮,我们应该会看到文本“已点击”,完美 效果和我们想要的完全一样,现在我们继续触发打开模式,当我们打开模式时,我们想看见开发商店的产品列表,但是 我们在商店管理后台查看产品页面,会看见目前并无任何产品,我们来添加这些产品,使用Shopify应用CLI就能轻松添加占位符产品,我们来看看CLI文档,在node/app/projects下面 然后命令参考,我们能见到另一个命令列表,当您在创建Node.js应用项目时可以专门使用它,我们想用填充命令,因为这会为开发商店添加示例数据,这样您就可以添加产品、客户或订单,在我们这种情况下 我们想使用 “shopify populate products”命令,它默认会添加五个项目,不过您可以随意更改数量,我们打开命令行工具 我先停用服务器,然后输入“shopify populate products”,我们会在这里看见它正在添加产品,到我们的开发商店,我们回到商店 刷新页面,这里有我们刚刚添加的五个产品,现在产品已经有了 我们继续添加模式,这就需要使用Shopify App Bridge,Shopify App Bridge是一个JavaScript库,可以与嵌入在Shopify管理后台的应用配合使用,就跟我们现有的情况一样,App Bridge通过让您访问,原生的Shopify功能 可显著减少您的开发时间,并确保用户体验始终如一,App Bridge还提供React组件 并已安装到位,因为我们使用CLI来创建了项目,App Bridge React完全兼容Polaris,因此界面会继续保持连续统一,我们来打开Shopify App Bridge文档,您可以在Shopify.dev找到,这个文档的链接会被添加到下方的描述框中,方便您获取它们,我们专门来看看React组件,我们想用资源选择器,资源选择器可以渲染模式 为我们提供资源列表,在我们这种情况下 资源就是指的产品,在这里 您可以在资源中进行选择,然后可以随意进行任何操作,文档会为您展示代码示例,以及说明如何在自己的项目中进行设置,还提供了一个备注 上面写道,“在以下示例中 您需要在验证过程中,“存储商店来源​,“然后从代码中获取 以便功能正常运作”,CLI已经帮我们处理了这个问题,并且在提供程序组件中包装了我们的项目,所以 我们只需要导入资源选择器 然后就能使用了,我们来看看资源选择器所接受的道具,这里有两个要求的道具 “open”和资源类型,“open”是一个布尔值 表明选择器是否为开放,而资源类型是您想在产品、产品多属性或产品系列之间,选择的资源的类型 所以我们想把它设置为“product”,我们进入项目中 把它添加进去,首先我们要做的是将索引转化为类,这样就能将资源选择器的状态,设置为开放或关闭,所以我要把这个更新为 “class Index extends React.Component”,我把这个括号删除,然后加上…,我们的Render命令,和Return命令,我们将页面组件移动到Return命令中,完美！,现在 我们导入资源选择器,我把这一行复制并粘贴到这里,把页面更新为资源选择器,我想从Shopify App Bridge React中把它导进去,好了 现在来添加资源选择器,把它加到页面组件中,然后继续打开那个备份,把资源选择器加进去,很好 我们要添加两个要求的道具,第一个是资源类型,我要把它设置为“Product”,第二个是“open” 我们想把它设置为,我们想将资源选择器的状态设置为开放或者关闭,所以我们把它设置为“this.state.open”,好了 我们来设置初始状态,把它设置为“open: false”,然后 当在页面中点击按钮时,这就是主要操作,我们想让它把状态更新为“open: true”,所以要在这里更改,输入“this.set state” 然后把它更新为…,“open: true”,好了 现在我们进入命令行工具,我们重启服务器 前往“shopify serve”,然后回到应用中,回到了商店管理后台 打开应用页面,应该会在这里看到应用 “我的测试应用”,我点击它 等待页面重新加载,好了 现在我们点击选择产品按钮,应该会打开含有五个产品的列表的模式,资源选择器也能让您搜索特定的产品,当然了 您可以选择其中的任意产品,目前 当您添加选择的产品时 不会触发实质的操作,所以我们当然要解决这个问题,您可能还注意到了 在关闭资源选择器时,不论您有没有选择产品,或者您像刚才那样添加了选择的产品,只要您尝试再次打开资源选择器 不会有任何反应,这是因为状态依然被设置为“open: true”,所以 我们也要更新关闭选择器时的状态,我们回去查看资源选择器文档,看看能否使用可用的道具来进行这些更新,onCancel道具是在未进行选择的情况下,关闭选择器之后用到的回调命令,我们可以使用这个命令来更新状态,而onSelection道具是在做出选择后,用到的回调命令,它会接收已选择的有效负载参数,即一个带有ID和选择密钥的对象,这个选择密钥就是所有已选择资源的数组,我们肯定能使用这个命令,目前 我们在控制台记录 当我们做出选择后的返回值,那我们回到项目中进行这些更新,首先 我们添加onCancel道具,这是一个回调函数,我们输入“this.setState open: false”,接下来 我们添加OnSelection道具 这也是回调函数,它将会接受已选择的有效负载参数 我们就命名为“resources”,我们将要做的是创建一个处理选择函数,在这里 我们可以在控制台中记录返回值 并且将能更新状态,所以我输入“this.” 把它命名为“handle selection”,然后转入我们的资源,好了 我要将函数添加到渲染下面,输入“handle selection”,转入资源,首先 我们更新状态 “this.set state”,然后再次输入“open: false”,最后 我们在控制台中记录我们的资源,现在 我们回到浏览器 看看效果如何,我重新加载管理后台,好了 打开控制台 就能看到已记录的结果,我们忽略这个警告,这只是关于新版本的Chrome,现在打开资源选择器 选择“Blue Flower”和“Divine Cloud”,在添加它们时 应该看看控制台中记录的结果 非常好,这是一个带有ID的对象 还有我们的选择数组,这显示了我们选择的产品,显示的是“Blue Flower”和“Divine Cloud”,不过 您可能想以某种方式将这些产品展示给商家看,最佳的实现方式就是 用它们的唯一ID来对应确切的产品,您可以在选择数组中看到这些ID,就在这里,最后 您或许想编写一个查询到 Shopify GraphQL管理后台API,不过 首先您需要创建ID数组 以便在查询中使用,这将是本次教程的最后一步,我们使用“map”来创建产品ID的数组,我们回到代码中,在“handle selection”函数中,我们创建一个“const” 然后命名为“ID from resources”,然后我们来映射资源选择数组,所以输入 “resources.selection.map”,我们想对应确切的产品ID,所以输入“product.id”,好了 然后我们不在控制台中记录资源,而是在控制台中记录资源的ID 这样就能为我们提供这些ID的数组,我们再回到我们的…,商店管理后台 重新加载页面,我们要确保能记录正确的ID,好了 我们来试一下,打开资源选择器 选择我们的产品,想选择多少个产品都行 然后点击“添加”,这里可以看到三个产品ID的数组,现在您就用Node和React 构建了一个基本的Shopify应用,您已经学习了如何使用 Shopify应用CLI来设置您的嵌入式应用,我们还使用了Polaris和App Bridge 来构建连续一致的界面,并从开发商店获取数据,这是个非常简单的应用 但希望这个视频为您提供了指导,让您可以快速轻松地设置自己的应用,使您能投入更多时间关注 如何为商家解决独特的问题,如需获取进一步资源,以便在应用开发过程的后续步骤中使用,请查看下方的描述框,如果您觉得这个视频对您有帮助,别忘了点赞和订阅我们的频道,我们每周都会更新实用的视频,帮助您更顺利地踏上Shopify开发之旅,感谢大家的收看

Congratulation! You bave finally finished reading show to make support <br> shopify and believe you bave enougb understending show to make support <br> shopify

Come on and read the rest of the article!