what is polaris shopify

welcome back to building and growing,Shopify apps in this episode I am going,to show you how to create a Shopify app,admin interface using Shopify CLI Gadget,and Polaris I'm going to walk you,through step by step show you how to use,the Polaris component and show you the,most important concepts of hooking,everything up using react,if you didn't watch the previous video I,encourage you to do so right now and,then let's jump right into it,so this is the admin interface we are,going to build that allows us to Define,and create lists of tags that are then,going to be used on the backend side,let's start with initializing a new app,using shopify's CLI,let's call our app Turbo Tax again,and use node,now we just need to wait until Shopify,CLI has finished and has installed all,the dependencies now we can change into,the newly created TurboTax folder,and we install one more package which is,local SSL proxy,okay now let's add the new folder to our,vs code workspace so we can look at the,directory structure,here we need to make a couple of changes,so this will integrate with Gadget,seamlessly,so you really need to look out in what,subfolder the changes are made because,there are multiple files and they exist,in different subfolders and it's really,important to choose the correct one so,the first is in web front end,package.json and here we will add local,proxy to the dev command like I do here,also make sure to check out the links in,the video description where you will,find all the code Snippets and,up-to-date information,next in the same folder let's open the,white.config.js file,and we're going to replace the entire,content by the gadget version,next let's open the package.json on the,top level and modify the dev command,we're gonna add an option called no,update,now it's time to install the gadget,client libraries,this is a two-step process where in the,first step we are going to configure npm,to include the gadget registry and then,in the second step we are going to,install the actual project libraries,what is special about Gadget is that it,provides us with a package that is,specifically configured for our project,and this is why you see that the package,has the project name in the name,and this is really nice because this,means that all the autocompleters will,recognize our backend configuration and,will give us some code that actually,makes a sense for us,now let's write some code so in the,front end we are going to create an,api.js file in which we are going to,define the gadget client,now let's open the app.jsx file and,replace the content with the gadget,version,we can see in line 12 that it needs a,Shopify API key so for this we can,create a DOT end file in the main,directory where we can specify our API,key,and there is one more thing that we need,to fix which is in the main directory we,need to rename the,shopify.web.tamil to something else for,example dot backup so it doesn't get,used,and now with everything done let's type,yarn run def in order to start the,development server,so for some reason this did not work,let's see what error message is,and we can see that it could not resolve,Shopify app Rich so let's add that,package,so now with average react installed,let's try to start the development,server one more time,foreign,and indeed it looks like it started,successfully now we can view https,localhost in the browser and we see that,indeed it does work,to continue we need to change our app,setup where we are going to set the app,URL to https localhost as well,this means that we can then test our app,directly from the admin interface,and we see also from the admin interface,this works and we see an embedded,Shopify app,what is really nice is that once we,update and save files in the editor this,will also update in the browser,this means you don't need to reload the,browser window all the time in order to,see your changes,so now without further Ado let's create,our actual application interface,for this I'm going to create a new file,in the components folder called tag,manager.jsx here I'm creating a new,default function which is also called,tag manager,tag manager has an app Provider from,shopify's Polaris package,and app provider in turn has a frame,which we need in order to show the,different loading states that we might,have,now we're gonna use Tag manager inside,app.jsx,so now first import it,and then put tag manager inside the,Polaris provider,once we save the file we can see how the,browser window updates and we see tag,manager,now let's add a loading State this is,going to be active while we fetch data,and we'll give the user an indication,that our app is actually loading data,once we refresh the browser window this,actually becomes an animation,now in order to interact with the back,end let's import the gadget API,also from Gadget we are going to use,some hooks,one is the use action hook and other one,is use find many,now in order to access data on the,gadget backend we need to give some,permissions to do so,so inside roles and permissions we go on,allow tag and give the read create and,delete permission to the Shopify app,users,we can then use the use file menu hook,in order to retrieve all allowed tags,from the back end,Also let's add some code that will,actually display the loading State while,fetching is active and will display the,actual data once it is not fetching,anymore,now let's create a new component for the,actual markup this is what is shown when,fetching is not active which means when,the application,has loaded,once we have the finders component we,can simply use it inside our tag manager,component,now let's bring in some more Polaris,components that we are going to use in,order to build our application interface,we start by building a new Polaris page,component which has a title,inside the page we create a layout which,gives us the option to structure the,content,first we're gonna create a section,called annotated section and this gives,us the possibility to basically describe,and give the user some hints what he can,do in this respective section,inside we create a cart,and cards are great ways to group,things that belong together,and then inside the card we create a,form layout,and this gives us the ability to make,our input components align neatly and,also give them the right spacing finally,we use a stack in order to place our,text and horizontally,and last but not least let's bring in,the actual tag component,once we are finished we close everything,and hit save,voila we have a nice looking Polaris,interface,next let's create a text field that,allows us to create new tags,for this we are going to use the text,field component,which has a label,which we are going to set to create new,tag,we hit save and this updates once again,next we want to add a button that allows,us to confirm the tag creation for this,we can use the connected right property,and simply add a button in there,now let's bring in our actual tag data,this is already present in the data,property of our actual page markup,component,so we just need to use the map function,in order to,create individual tags from them note,how we set the tag key to the tag ID and,the contents to the tag keyword,once this is done we just need to fill,it in and hit reload,next let's define a way that lets us,remove tags that we don't want anymore,for this we use the use action hook and,create a delete tag function use action,is provided by Gadget and you can see,how this is then connected to API dot,allowedtag dot delete,then we create a callback which is,called whenever we want to remove a tag,and this callback calls our delete tag,function that we defined in the line,above the ID of our tag is then passed,to the delete tag function and after the,delete tag function is called we want to,call refresh actually when I recorded,this I didn't notice there is a typo in,line 31 and it should be refresh there,but it's a typo and this will be fixed,later in the tutorial,now let's connect the remove tag,function to the on remove property of,the attack component and once we have,done that we should see a little x to,the right of each tag,and once we save well we see it doesn't,work so the problem is we made a mistake,in the definition of our callback,but we can fix it pretty quickly like so,and we can see it works now and we have,the remove buttons next to the right,side of each tag component,now let's wire up our text field so we,can actually input text,for this we are going to use the use,date hook which creates a state and a,Setter,and a callback that will then call the,set tag field value once the text,changes,and now let's connect this to our text,box,for Value we set tag field value and for,the unchanged property we set the handle,tag field change function,actually there's one thing missing which,is to import the use date hook from,react,and we can see that we can now type text,into our text box,but the add button does not work yet so,this will be next,for this we are going to use the use,action hook again pretty similar to the,way we created the remove tag methods,next is also pretty identical which is,defining a use callback again to then,called the create tag function from,above,which then uses the data from the text,field,finally let's fix the typo in line 31 so,it says refresh and see if,this works,no it does not so let's open the browser,console and see if we can find where the,error is,so here it says tag field value called,before initialization so this means that,we need to move up the definition of tag,field value to a place that is before we,actually use it inside the use callback,now the only thing left for this to work,is to connect the on click property of,the button to the on button click,callback,and we can then see then when we click,the add button a new tag is added,with this we have finished our admin,interface for our TurboTax app,now we have built a fully functional,admin interface using Gadget Shopify CLI,and Polaris if you learned something,today leave me a like And subscribe to,the channel

Congratulation! You bave finally finished reading what is polaris shopify and believe you bave enougb understending what is polaris shopify

Come on and read the rest of the article!