How to build an App From Scratch on Shopify | Shopify Unite 2021

hey folks i'm froze,a front-end development manager here at,shopify um,we also have rebecca's awesome crash,course on how to develop an app at unite,i want to provide a deeper dive and take,you through the full end-to-end,developer experience,to do this we're going to be creating an,app from scratch,the app we're going to be creating will,edit multiple products in bulk,so we're going to utilize the graphql,api after we build the app i'm going to,pass it over to mike,who's going to show you how easy we made,it to set up and manage webworks,you're probably pretty curious as to why,we would make an app that edits products,all in bulk,well think of plus size merchants with,large inventories,editing multiple products at one go,would save them a tremendous amount of,time,on top of that imagine a merchant,setting up their store for a flash sale,they want to put the words flash cell in,the title and say something like limited,edition products in the description,cool now that you know what we're,building let's dive into it,first things first you're going to need,a partner account in order to build an,app,um if you don't have one you can go to,partners.shopify.com,and follow the sign up steps i already,have an account so,um i'm going to just sign in so i'm,going to go ahead and create a,development store we're going to need a,development store,because our app is going to make changes,to product data,um building our app directly into a,development store will make it easier,for us to,work with real data,and there you have it my development,store is,ready now let's get into some code,all right so the next thing we're going,to need to do is,install the shopify cli,we're going to use a package manager,called homebrew,if you're not familiar with hobro you,can go to the homebrew website and,follow the steps to install it there,to install the shopify cli i'm simply,going to run brew install,shopify dash cli,once the shopify cli is installed i can,start running,shopify commands um the first thing i'm,going to do is scaffold my app,i'm going to do this by running shopify,create node,it's going to ask me a few questions one,of those questions will be,what store do i want to install my app,on and i'm going to pick the one we just,created a few seconds ago,i'm going to create a node app because,i'm a javascript dev,uh but you can create a rails app if you,prefer note that,in that i'm running version 1.13 of the,shopify cli,um in the new shopify cli 2.0,uh the command structure is a little,different instead you would run,shopify node create or shut the fire,rail screen,all right now that my app is set up,let's see it let's try and get it,running in a dev store,i'm going to run shopify serve,so in order to securely run my app,running locally in a development store,i need to set up a tunnel and thankfully,the shopify cli does this for me,automatikally now i can just simply,navigate to the tunnel link,and i am able to install my app on my,development store,and boom we're ready to go let's start,writing some code,so the new version of the scaffolded,shopify app is actually,built on top of the next js framework um,so you can always reference the next.js,docs,if you ever run into snag or if you want,to make your app more awesome,um it's important to note there are a,few things that are,implied by the nexus framework um,specifically the pages folder,um if you haven't already guessed is,where all my web pages live,next.js will use the file names in that,pages folder to infer,the apps routing another really handy,piece of this,scaffolded app is that it actually takes,care of a lot of the tedious things like,auth,um so i don't so i don't have to waste,my time i can just focus on building my,app it's pretty great,okay let's uh add some ui,all right we're going to be creating a,simple form uh using mostly,polaris components um,[Music],let's set it up so that it's not just,returning a component,um,we're also going to set up some hooks,for our component state management,um i know i'm going to be creating two,input fields,and i'll need somewhere to store the,products that i,we'll also be creating a,or using a component called the resource,picker which i'll get to in a second,and we'll also use a toast,component to show the user some feedback,on a successful,update of the products all right cool,let's add a,let's add a few components structural,components like a card,we'll add our inputs,we'll add a stack so we can lay it out,properly,and then we're going to add some text,fields,cool the first one will be to append,text,to the title of all the selected,products,the second one will be to append,text to the description all the selected,products,and then we'll create a simple submit,button,but actually we're going to change this,let's add let's go back to that resource,picker that i was toking about earlier,this is a super handy component from the,abridged react library,and what it allows me to do is,select resources from the store,resources being things like products,orders customers,and it's pretty simple to implement i,will just create,assign the resource type add a couple,more properties like,on select and the open,parameter which is what i which is the,state i set up earlier,and let's log our resources and set them,to our,state and let's test to see if this,works,shall we all right let's go,okay let's open the console,oh right right can't really select any,products if i don't have any products,all right i'm just going to go head back,to the cli actually,um and here's a super handy command um,to mark out resources in a development,store it's called the popular command,all i have to do is run shopify and,populate products and,bam five products add it to my dev store,pretty soon um now let's retry the,resource picker,now that we actually have resources or,products in our store,there now i have my products all right,now let's keep going,next i want to actually display some of,the data to the user because i don't,expect people to be using,the console to see their selected,products,so let's add another card section,and we'll add a data table that will,just render the selected products that,we have,we'll also add an empty state um just to,show that there hasn't been any products,selected yet,all right and then we'll map our,product data and in the table,i'll have the id i'll render the id of,the product the old title,the new title the old description and,the new description,all right let's,keep going let's map all these relevant,pieces of data from the actual,product object,all right,we'll add some optimizations here and,add a used memo hook,around the product data,great now it's working,and i can see all my data right in there,and it updates the data table,as i make updates to my ui this is great,we're making some,significant progress let's keep going,um let's add a submit button,but i do want to have that submit button,disabled if there are,no products selected so that,we're just not making blank graphical,mutations,all right let's create a submit handler,and we'll also add,a toast notification that we created in,the state for earlier,um this will show up whenever,the user has successfully updated their,products,their selected products let's test that,this out just by assigning it to,the to the submit button,show toast i'll go back,and select some products,and click submit and there's our,notification great,this is great the ui4 app is pretty much,done all we need to hook up,is graphql we're going to use the,product,update mutation in order to actually,manipulate the product data,i'm going to set up a product update,mutation file in our project um,i'm gonna use the apollo boost library,to set this up,um okay and since the,new shopify dev docs i've added so many,helpful examples,i can simply check the reference guy for,pre-built code that fits my needs,and copy and paste it it's pretty simple,great this is exactly what i'm looking,for all i need to do is add the title,property so i'm going t

Build Your Own Shopify App - Part 1 (Polaris)

all right so in this video we're going,to be diving into the code and building,out a simple shopify app in my last,video we went through the setup of how,to actually create an app so if you,don't already have an app created i,would go check that video out first i'll,put the links in the description so go,check that out and then come back to,this video but the sparknotes version of,it is that you should be signed up for,the shopify partner program and you can,do that at shopify.com partners you,should create a development store you,should download the shopify cli and then,you should follow the steps in the quick,start guide to get your app created once,you've got your app created then we're,ready to start actually writing code,which is what we're going to be doing,today i'm going to split the build of,this app into two or three different,videos and today we're going to be,focusing on just the ui portion of it so,we're going to be taking a closer look,at polaris i'm going to walk you through,how it works and show you how to use it,so that you can quickly build shopify,apps polaris is the design system that,shopify uses to guarantee a sort of,universal style throughout the entire,application if you notike when you go,through the shopify dashboard or you,open up a store go to the orders page or,products or whatever page it is that,you're on you can see that it has the,same kind of styling throughout there's,these cards,the same similar layouts and button,styles and text fields all of these,design choices follow the polaris style,guide which pretty much ensures this,uniformity throughout the entire app you,don't have to use polaris to build your,app but if you are building an embedded,app then i would highly recommend it,there are basically two ways that a user,can access your app from the app page,when they click on your link the user is,either brought to a standalone web page,when they click on the app in their,dashboard the other way a user can,access your app is through what we call,embedded apps which is what we are going,to be building out today and that just,means that when they click on the app,from their admin dashboard it basically,opens it up in an iframe within the,dashboard so your app is still hosted,externally but shopify reaches out grabs,that app and then displays it right,there for us there's a couple reasons,why you would want to build an embedded,app the first one is just that it's,really easy to access right from their,dashboard whether they're on desktop or,mobile it kind of creates a better user,experience as well and if you're doing,an embedded app then it is a good idea,to use shopify polaris just because,you're already in the admin dashboard so,when they open up the app and see that,there's a similar styles and similar,design it's going to flow a lot better,with the rest of the platform i think,having those same styles and look and,feel everywhere throughout the platform,including on your app helps build user,trust as well another reason why you,would want to use polaris is that it,just speeds up the development process,so much unless you have a specific ui,that you have to implement for your app,polaris is a really great way to go,because of their pre-built components,and the ui you build out with polaris is,already optimized for desktop and mobile,clients so those are just a few reasons,why if you're building an embedded app i,would highly recommend using polaris so,like i said today we're going to be,focusing on building out the entire ui,of this simple shopify app the app we're,going to build today is a product tags,app it's probably not really useful for,anything but it's a great starter,application just to see an example it's,basically going to have a simple card,list view with a card for each product,in your store below the product name it,will display the existing tags and then,at the bottom of the card it'll have an,input field and a button so that you can,add additional tags right now these,products are hard coded in,because we haven't set up graphql or,anything yet we are just going to be,focusing on polaris and building out and,mocking the entire ui using that one,more thing before we get started um,before going through this video you,should be at least somewhat familiar,with react,or at the very least have a a pretty,good understanding of javascript but if,you are somebody who is barely getting,into development and you want to get,started with shopify app development i,am planning on making a series going,through how you can get started from,absolute xero so let me know if that is,something you want to see and subscribe,and turn on your notifications so you,don't miss it alright so i think we're,ready to get started let's pick up right,where we left off in the last video we,have our app and development store,created we have the development server,running,after executing shopify node serve in,the terminal,and we have the project pulled up in our,code editor,we're first going to take a look at the,documentation for polaris and i'll walk,you through how you can use the docs to,answer almost any question that comes up,about the layout and design,we'll be referring to the components tab,for the whole video this is where it,outlines the usage and functionality for,each of the react components as well as,gives us,examples for any specific use case that,you might have on the left hand side we,have the main navigation tabs to where,it groups components by their function,for example we have an actions tab for,components that are action based such as,buttons and toggles,we also have a structure tab that,details components that contribute to,the layout and structure of your ui such,as,pages and cards so if you're looking for,a specific component you can find it by,going to the tab that describes its,function or you can use the search bar,up above if you know exactly which one,you need let's take a closer look at the,card component since we'll be using it,in the app we're building today the,first thing you'll notike here other,than the title and component description,is the examples drop down most of the,polaris components have multiple props,and ways you can structure them so the,examples here list out pretty much every,way that you can use a component to,create whatever design and functionality,you're going for here we have the,default card and the code that is used,just below it,they have an example of a card with,footer actions,and the example we're actually going to,be using today is the card with multiple,sections you can see down below that,it's giving you the exact code used in,each of these examples something i've,notiked is that you sometimes see these,child components such as section and,subsection and i haven't found anywhere,in the docs where these are detailed and,where it actually explains how to use,them,so that's why you really do need to get,familiar with the components you want to,use and look through all of the examples,as well as the code to see what's really,going on all of the props for the,components are also listed below the,code so this is a really good reference,to see what options you have with each,component the docs for the other,components are laid out in the exact,same way so you should be able to find,what you need by going through the,examples and checking out the props now,that we know a little bit more about,polaris and how to use the documentation,let's start adding some components into,our code and build out the ui so here we,have our project pulled up in vs code,this is a next js project so there are,quite a few files here that we aren't,concerned with at all,you have the server files where the,shopify cli already sets up everything,for us in terms of authentikation and,api requests,but we're going to be working in the,pages folder in the index.js file this,is the main entry point for the entire,ui of your app there isn't much in this,file now but let's just remove the,existing code so we

More:🔥 Sell These 10 Hot Trending Winning Products for Shopify Dropshipping

Build A Shopify App #1 - App Structure

hey everyone my name is Alex and welcome,back to the channel today we're going to,kick off a series where we build a small,app together and start diving into,Concepts involved with Shopify app,development the app we'll be going,through in this series is a product,updater that lets us quickly update,things like the title description and,variant information of products in our,store like I mentioned this is a small,app and it's not meant to be a,full-blown starter that you can take and,modify and submit to the App Store but,instead it'll be an app that's small,enough so we can understand the basics,of the tools you'll be working with and,not be overwhelmed by the size of the,code base and I just want to point out,that the example app guide on,shopify.dev is a really great,walkthrough and Sample app to build as,well and a much more real world example,but I've heard quite a few people say,that it's too complex with too much,stuff going on to really understand all,the concepts when you're starting out so,for this app we're going to the opposite,side of the spectrum and keeping it very,simple and focusing on the basics we,will still be hitting important topics,such as server routing rest and graphql,API fetching navigation through the,admin and using Polaris to build the UI,I'm not really going to spend much time,on the actual code and logic parts of,this since you should be up to speed on,JavaScript and react development so then,we can focus on the Shopify specific,Parts here we'll especially be spending,time on the Polaris and app Bridge,components since that makes up for,almost the entirety of the front end so,go ahead and pull up your editor so you,can follow along and let's get started,alright so here we have the project,pulled up in the code editor if you,don't have a project created already,then go check out my last video I'll put,a card on the screen so you can click on,that,and go through the whole setup and then,come back to this one,or if you just go through the getting,started guide on Shopify it'll walk you,through the creation of a project from,the CLI and we'll be looking at the same,template so go to one of those first get,your project set up and then come back,to this video in this part one of the,series we're going to go over the app,structure take a look through the,folders and see how everything is set up,I did mention we're going to go through,server routing and all that right now,we're going to kind of just go through,the files and get a high level picture,of what's going on and then when we get,to the server routing and auth and,billing and all that in the next videos,that's when we'll kind of do a deep dive,there so we're going to start here at,the top level and just kind of go,through and drill down into the project,and see what we can find so starting out,at the top level here there are a lot of,files that we kind of don't need to,worry too much about a couple markdown,files the readme file I do recommend,going through,uh there's a lot of content about uh,just kind of more information about the,project and template and how it was set,up uh you can see the tik stack they're,using here they use an Express on the,server Veet to build the front end react,router react query a couple other,third-party tools so yeah I highly,recommend going through this just to,kind of get an idea of the tooling,we will be going over obviously in the,series but it's good to read through it,and kind of get the high level picture,from this one file too,then you've got uh package Json Docker,file get ignore Docker ignore these are,all kind of standard files that come,with any project,the node modules folder of course,and then the Shopify app toml file is a,configuration file for Shopify you can,see they have the Scopes in here for the,API scopes,you don't really have to worry too much,about editing these and changing things,around if you don't want to,customize the build process,um so if you leave it as is then it'll,work for the majority of people but if,you want to have more control over how,things are built,um then these are available for you to,kind of make more edits and more,configurations,so the web folder here is the one that,is most important because it holds the,application code for the server and the,front end and just everything in between,and you can see there's another toml,file in this web folder that has a,couple other configs specific to Shopify,so,again you can leave this not worry too,much about it unless you want to,customize deeper,um more packaged Json files,the index.js under this web folder is,where the server the main server file,lives so the main entry point for your,application so,you probably will be spending a lot of,time in here this is where,the project is you know initialized this,is where the server is created and,started and obviously you have your,endpoints in here,um all the middleware that's used the,Shopify auth middleware the billing,middleware there's pretty much,everything that,needs the app needs in order to work is,housed here in this file,um so this is a an important one that,will be we'll be going through uh in,depth in the later videos,but today we're just going to kind of,point out a few,important parts,as we again get this high level overview,of everything,the other files and folders under this,web folder are these are all pretty much,imported into this index file so they're,all helper files and helper functions,um this files for setting up the gdpr,web hooks which are some mandatory web,hooks that your app needs to subscribe,to,a couple other helper folder files in,here,you've got your middleware middleware,folder which has your auth,and then a middleware that verifies the,request that it's in an authorized,request coming through,and a couple other helpers,so this and then of course you have the,front end folder which is all as it,sounds it's just all the front end code,um so let's let's come back to the,server file though for a minute and kind,of take a quick peek through this if,you've worked with Express before then,this should look pretty familiar to you,um there are some Shopify specific,things in here like for example this,these things being imported from the,Shopify API you get a Shopify object,and the first,place you'll notike that being used is,right here where it's initializing the,context,and this basically sets the stage for,the API to be able to work and you get a,lot of helper functions with this,Shopify object,for example to register the web hooks,if you come down here a bit you'll see,something like this Shopify utils load,current session it's pretty common and,these all use this context,like you can see you're putting in your,API key the secret the Scopes the,session storage so this is everything,that the API needs in order to do its,thing and something kind of cool with,the CLI is when you run the command the,npm Run Dev from the main folder then it,actually gets all this information it,builds the environment variables that,you need,um because you can see there's no EnV,files in here anywhere so it is uh it's,getting the information from your,application and building it and taking,care of everything behind the scenes and,that could be you know a good thing a,bad thing if you want more customization,and more control more granular control,over how everything works then you know,obviously that it could be a bad thing,but for most people I think this will,work great and it's a great flow and a,great setup scrolling down here a bit,you can see that we're also registering,web hooks through the Shopify object,and in this example they're registering,for the app uninstalled webhook which,pretty self-explanatory but basically if,you are registered to this then when an,app or when a shop uninstalls your app,then it fires off this web hook and it,basically runs your web hook Handler,here so here's where,if you have you know if you need to go,into the database want to shop,uninstalls your app and mark t

More:netflix adding ads

How To Create a Shopify App using Shopify CLI (Shopify App Development)

so there's a lot of you telling me that,the tutorial for shopify app development,using node and react is gone so i,understand that honestly because right,now shopify is forcing developers to use,shopify cli instead of manually,installing the the modules the,frameworks the app bridge utilities the,app bridge and so on so in this video,we're going to cover how to create the,shopify app using shopify cli more on,that after this intro,[Music],previously whenever we create the,shopify app we'll have to install the,modules the frameworks manually like the,that bridge app bridge utilities shopify,app graphql polaris all of those,frameworks will have to install them one,by one but now all you need to do is,just to install shopify cli to your,system and run shopify create command,and it will ask you whether you want to,use um node or rails and then if you use,node it will create a,a node project and that's how you create,the shopify app now,um well today we're going to learn how,to use them so so let's go to,shopify.dev and open the apps page,and just click that and let's scroll,down and what we need to do first is to,check if we have installed shopify cli,or we're going to install shopify cli if,you don't have it so look for shopify,cli and we should have it here click,that,and then let's proceed to installation,section and we can just refer to the um,install shopify sli page let's open that,and the following requirements you need,to meet the following requirements make,sure that you have uh will be installed,and its version is 2.7,and then for the shopify partners,account make sure that you have it as,well and make sure that you have a,development store so let's just scroll,down and since i'm using mac os i'm,going to use the jam install shopify cli,or if you have home view you can just,type blue tap shopify forward slash,shopify cli or shopify and then brew,install shopify cli so i'm going to use,brew instead instead of jam install so,we can just open our vs code,not that one,and then,i'm going to create,a terminal,so new terminal and then i'm going to,type,brew and then,let me just go back to our browser it,should be tap shopify forward slash,shopify so brew tap shopify,forward slash,shopify,press enter,and there you go we should have the,following response and next up we need,to use brew to install shopify cli so,type brew,install and then it should be shopify,hyphen cli,press enter and it should start,downloading shopify um cli from,i guess repository and then it's going,to install shopify cli so let's just,wait for it,is it too loud,am i too loud,hey,okay so it looks like it's finished so,the next thing that we're going to do is,to check if we have installed shopify,cell i so let's type uh let me just,clear my,cli,and then we can just type shopify and,then,version,and then since this is my first time,running the shopify cli or the shopify,command it will ask me whether if i want,to you know enable the anonymous usage,reporting and this is going to be,helpful for um you know,shopify to um it's going to use your,data basically so if you want you can,just select yes otherwise no and i don't,want to um i don't want shopify to hold,my data so i'm going to let you know i'm,sorry,okay did i press it no yeah i picked no,there you go okay so now that it's,working we can just try it again so,shopify,version and it should give me 2.2 there,you go so its version is 2.2 and i,believe it already said 2.2 there but,there you go that's how you install,shopify cell i so the next thing that,we're going to do is to use the command,or the cli to,create a new shopify node project so the,first thing that we're going to do is to,log into our partners account so we can,use this shopify login command so,shopify log in,and it should ask us to log in so it's,going to open the following window,so i'm going to log in here,and there you go so as you can see now i,am successfully logged in so we can just,go back to our terminal i'm going to,close this i don't need that anymore and,here in our vs code as you can see it's,now asking us to sell like a partner,organization so i'm going to select the,number two so it should be um,weekly how a i'm going to select that,and then there you go so as you can see,now i am logged in okay so the next,thing we're going to do is to create a,new project or a new node project so,we're going to use the command shopify,node create previously in i guess,preview cell i version you can just type,shopify create but now you need to,specify,which um is it node or rails so you can,either use shopify rail or is it rails,honestly yeah i think it's rails and the,other one is node so we're going to use,node and then you need to type create as,well so shopify space node space create,and then if we run this command it's,going to ask us the name of the shopify,app so i'm going to call this um,pillow,and then it's going to ask us if i want,to use public or custom apps so i'm,going to select public i want it to be,public,and then it's going to ask us where i,want the shopify app to be created this,is the um partners account so if you,open your your partner's account we have,here the apps page right so if you're,going to select weekly how a or your,partner's account,in that in that partners account that's,where you can find your shopify app so,this is where you can find that okay so,let's go back to vs code and i'm going,to select weekly how a,i'm going to create that there and then,i'm going to select,exampledevelopmentstore.com,and then it's going to start cloning the,um the repository shopify app note now,this is going to take a while so let's,just wait for it to finish i'll see you,in a bit many minutes later bad news it,took a while i had to cancel it and i,believe it took 30 minutes and i was,afraid to cancel it because maybe it,will ruin the project and i don't want,to ruin the video but i you know i,decided to just cancel it and redo it,again so i'm going to delete the plo and,i'm just going to delete it,i'll just move it to the trash and then,i'm going to redo it again so we're,going to run shopify,shopify,node create,and then you can just give this a name,like just the same name i'll call it,pillow,and then i'm going to select public so,just select public,and then i'm going to select weekly how,a once again,and then i'm going to select example,development store,and it should start cloning the shopify,app node repository,and hopefully this time it will work so,let's just wait for it to,download the repository,and there you go finally it works so as,you can see now it created an env file,or environment file so if you open the,plo folder we should have the following,env file here you will have the api key,the secret your shopify store and then,the following scopes and it will also um,install i believe and grog so you can,create,um,you know oh not yet it's not yet going,to install anger because we need to go,to this uh to this,because we need to go to this project so,i'm going to change my directory so cd,and it's going to be pillow,can you shut up for christ's sake say hi,okay so now that we are in the plo,project we can finally start running,shopify serve or no it's supposed to be,shopify node and then serve so node and,then serve,run it and it should install angular and,it should create a new tunnel,so okay so we get an error and group,tunnel has timed out we're starting and,we're running at the following url and,then it's going to expire in two hours,and then it's going to ask us if i want,to update the url in our shopify app so,basically what this means is it's going,to update the url in your app setup so,if you go back to,um your shopify app i'm going to open,the apps page,let me just open that in a new tab,and then here we should have the plo,shopify app we can open that,and then,if we open the app setup,here we should have the url such as the,shopify git github.io and so on and then,if we say yes it's going to update that,url so if i click yes or select

How to Build a Shopify App with Node and React

大家好 我是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”,然后回到应用中,回到了商店管理后台 打开应用页面,应该会在这里看到应用 “我的测试应用”,我点击它 等待页面重新加载,好了 现在我们点击选择产品按钮,应该会打开含有五个产品的列表的模式,资源选择器也能让您搜索特定的产品,当然了 您可以选择其中的任意产品,目前 当您添加选择的产品时 不会触发实质的操作,所以我们当然要解决这个问题,您可能还注意到了 在关闭资源选择器时,不论您有没有选择产品,或者您像刚才那样添加了选择的产品,只要您尝试再次打开资源选择器 不会有任何反应,这是因为状态

Build a Shopify App From Scratch - Finding Profitable Ideas

hey everyone Jan here codingwithyan.com,so today,we are going to be covering how to sit,on a beach sipping cocktails while money,keeps rolling into your bank account,a wrong presentation I actually meant to,say today we're going over how to come,up with great Shopify app ideas in order,to build a business that not only,requires work up front but also ongoing,yeah but still has the potential to grow,and might possibly turn into another,Revenue stream over time just to set the,right kinds of expectations and more,specifically let me take a look at my,notes we are going over why are you,having a good app idea is important and,what does good eve mean to begin with,then different ways to accumulate app,ideas and lastly how you can evaluate,your ideas based on our definition of,what good actually means should be quite,interesting and now let's have a look,alright so when we are building an app,from scratch we are taking some risks,this is either going to be in the form,of capital that we invest or it's going,to be in the form of the time that we,spend on the project now because if the,app idea flops completely all efforts,are pretty much wasted and if the idea,only checks a few of the right boxes,then it might kind of work but life,might also be a bit harder than it would,have to be otherwise so actually think,having the right idea or having a good,idea is pretty foundational,now when I say it like that the engineer,in me screams because good like what,does good even mean it's not very,specific it's not well defined it's not,something tangible it's not something we,can measure and maybe I'm just a bit too,German here but anyways that's why I try,to came up with a list of eight criteria,that we can compare our app against and,small disclaimer the list is based on,what I find important and this might be,different for you you might have your,own ideas here but that's also how I,evaluated all the app ideas that you,guys submitted after my last video,announcing the series of that in a,second but yeah not to waste your time,let's just go over the list really quick,hear the things that I'd be paying,attention to alright so the first one,I'd be looking at is Tam the total,addressable market and that is to say,how many Shopify stores could,potentially use our app like what is,what is the total amount of customers we,could potentially have,and if your app is only relevant for,Shopify plus clients we might be looking,at less than five percent,probably more like two or three percent,I don't have exact data here but if on,the other hand your app idea is useful,for anyone who has remotely to do with,fashion or clothing we might be looking,at 50 or 60 or even above here so it's,kind of like an educated guess because,of incomplete data but yeah that's the,first thing I'd be looking at next one,on the list is importance of the problem,or stores in that segment like four,stores that could be potentially,interested,and questions I'd be asking here are is,it a make or break feature for example,if you're selling event tikets you will,likely need a calendar so this is pretty,much a must-have app or if we're toking,invoices that's a legal requirement in,some places so it's also pretty,important but if on the other hand we're,toking about a good looking slideshow,or something like that,that's more like a nice to have and it's,probably a bit less urgent so that's how,you rate this one next criteria search,volume and this is also relative to the,segment so I'm not trying to think about,absolute search volume I'm trying to,think along the lines of would someone,who currently has that problem search,for a solution on their own,and if we take invoices for example,legal requirement many people would,search for that if we take,speed optimization or loading time,optimization that's a nice to have and,many people would love that but at the,same time they might not even consider,to search for that on Google or on the,App Store because it might just not be,on their radar so this is how you can,kind of guess this one and you can also,take some public data points into,consideration like Google search volume,Forum entries,um YouTube video views so they might,give you a very good idea whether or not,people are searching for these types of,problems okay number four are there any,other marketing opportunities so apart,from search traffic are there any,Facebook groups where I could promote my,app could I use my own YouTube channel,um let's say we have an app for only,Shopify plus merchants and they wouldn't,search for it it might be hard to get in,front of these right or if I have an app,that's potentially interesting for,everyone I might even be able to do,influencer marketing with influencers in,the e-commerce space,um and that's also one thing where I,feel I would have a personal advantage,because,I get quite a few cold emails asking me,to promote their software or services or,whatever and most of them are just,terribly bad they you can instantly tell,that these are copy paste templates they,ask me to get on calls and whatnot which,I don't love,um,so yeah if you just avoid these things,your chances of collaborating are way,higher in my opinion and just recently,we also did a promotion with the tik,with Tim Channel which has well over a,million subscribers promoting free mode,um so I guess yeah it's way more about,how you approach these people and that,you have a product that is perceived,valuable By Their audience but yeah,that's a side tangent but just goes to,show how I try to think about other,marketing opportunities apart from just,search traffic okay next is there a,clear Roi for the merchant that is,return on investment and that means is,there an easy way if someone pays for my,app to see how much money the app saved,or how much money the app made back and,if for example I had an upset app making,an extra 1 000 per month and it only,costs 50. it's like a no-brainer like,everyone would be happy to pay that but,if instead I had an invoice app legal,requirement then people might be,wondering why does it have to cost 50,per month it's just invoices and the,answer is because it saves you time and,it's also a legal requirement so it,saves you from getting sued or fined,that's how you justify the pricing but,that's one additional layer of,abstraction and therefore it's a little,harder to comprehend but that's why we,can ask the question is there a clear,and easy to understand Roi for the end,user on whatever they pay for our app,okay next one on my list is tiknically,Simplicity this is like how difficult is,it going to be to actually build the app,and you can look at this in two,different ways you could say more,complex is better because then it's,harder and there's going to be less,competition,but for my very first app I'd rather,prefer something simple because then I,can prototype faster iterate rapidly and,right now I would rather build three,simple apps as opposed to one that's,more complex,um yeah because I'm sure there are flaws,in my thought process and my workflows,and that's why it's called Simplicity,because for me right now the more or the,simpler the better,all right number seven low competition,and that's kind of self-explanatory for,me right now I'm looking for apps where,there are little to no existing,Solutions out there you could also go,the other route and make the other case,that a lot of competition means that,there's a lot of demand and you might be,able to get some of that market share if,your app improves on the existing,Solutions let's say but right now as I,said this is going to be my first app so,I would rather not compete and uh yeah,therefore low competition the less the,better okay last one on the list is then,low support demand,um like how many people will have,questions and I guess if you have a more,complex app then naturally more people,will have questions,so that's one consideration and since,free mode is still my main business I,just can't devote full-time ho