Remix - Shopify App Development | Build an Email Marketing App | Webhooks | Billing API

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
what's going on everyone welcome to another Shopify tutorial in today's current session I will show you how do you go about building an email marketing application with Shopify and remix and we're going to sharpen our skills in Shopify app development learning how to set up and use web hooks how to use the Shopify Bill an API and a few other things so if you enjoy today's tutorial don't forget to like And subscribe and if you have any questions just hit me up in the comments down below so let's just start with the tutorial so let's start by opening the terminal and create or new application first I'm going to just navigate to my desktop and we're going to click our Command mpm in need Shopify app latest to generate or remix project we can proceed and start naming the application I'm just going to name it marketing here we are going to go ahead and proceed with remix and I'm going to use typescript for this project way for the independencies to be installed by the Shopify CLI and in the meantime I'm just going to fast forward this part once the CLI has successfully generated our project let's just navigate to the project itself so let's just marketing CD marketing and I can run the command npm run Dev and we can just wait for the CLI to create it as a new project you can go ahead and type yes let's name it marketing you can go ahead and type yes here as well and after a few steps the CLI is going to give us our link and we can go ahead and copy this link and open it in the browser so I'm going to go ahead and open my browser here let me expand my window and open a new tab and copy and paste this part here and we can go ahead and install the application and as you guys see thanks to the Shopify CLI we have generated this remix project let me pin the application here and now we are ready to open our project in BS code so let's minimize the browser again and we can go ahead and open BS code and open our project there so I'm going to navigate there okay I will expand the whe window so we have more visual I will go ahead to the route folder and we can start by cleaning the project a little bit so I will just delete a few things here let's go ahead and open our first file which is going to be this one and this is just our application embedded sidebar which is provided by us by Shopify so we're just going to have a few changes here our application essentially is going to have four pages I'm just going to delete the additional page here just grab and delete this page first I'm going to go ahead here and we can remove the well we're not going to remove it we're going to just copy and paste it four more times and I'm going to change a few names our second page is going to be our campaign page we can just rename it to campaigns our next page is going to be our automations page so let's name it automations and our four page is going to be our billing page so we can name it Billings let's go ahead and rename the URL pads as well so this one is going to be campaigns this one is going to be automations and this one is going to be Billings and we can proceed and create these pages okay and this is one of the great things about remix this is where you define all your routes at least in my opinion the project structure ends up being a little bit more cleaner and easier to maintain so this one is going to be for campaigns and we can just create a react component here so type TS TS to bring up the auto completion and we can name it campaigns here let's just save changes and do the same thing for for the next Pages once you have finished creating the four pages that we have right here just make sure the name of your pages matches the name of the URL right here because that's how remix Loops through this folder and finds your page okay now we can go to the homepage which is this Index right here and we are going to just clean everything here we can start by importing our Polaris page and just change the name here to home let's save changes I'm going to minimize everything and see if our application is still running and nothing has been broken so let me minimize here and go ahead and advance to the browser I'm going to refresh and see if we have any changes here we should have four pages let's expand this part and yes we have our home page we have our campaigns page we have our automations page and we have our buildings page so this is going to be the structure of our project now we can start by focusing on the first feature of our application which is going to be the campaigns page so let's go back to PS Cod we can go ahead and close all these windows here and we are going to start right here so let's start working in our jsx and the first thing that we're going to do is import the page component from Polaris library and we're going to create a tab bar so we're going to need a few components to create this structure so let's go ahead and delete this bar and we can follow along we're going to need a layout component then inside the layout component let's create a few sections let's let's type section here let's close it and inside here we're going to use another component which is called the inline grid we're going to have two columns for this grid close the grid and inside here let's create a text and we're going to name it campaigns the text needs two props so the first prop is going to be variant now let's make sure this text comes from polari so let me just copy and paste it and put it right here so next to the heing of our page this put a button here here and let's chose name create new let's save the document let's create another layout section so copy and paste here and close the section again I'm going to use the Legacy car component from Polaris and inside here is where we are going to create our toab bars so I'm going to first import the to Bar component from Polaris I'm going to close it and we're going to need a few props the first thing that we need is to create a list of objects that will be representing our screens okay so above here we can go ahead and create this list so let's name it tabs and it's going to be a list of objects and it's going to have a few properties the first one is going to be the ID let's name it all customers the second one is going to be the content the third one is going to be the panel ID next one is going to be the component and this is the screen that it's going to take us after we click on the tab so let's do a test so let's create another folder in our application and inside here let's just create a test component let's do it really quick here test component test let's name it compo component I'm going to save the changes grab the name and go ahead and put the component right here okay now we need to pass this list as a prop in our component so let's name it tabs and here we're going to drill this into it as you guys see if you hover over this component and it's a fer property now we need to create the state of our component so let's initialize a state variable selected with a initial value of zero using the use State hook Also let's initialize a function set selected to update the selected state so let's create those const selected and set s selected function okay and we can use or use State hook right here let's initialize to zero now let's define a memo version of our selected state by using the use C back hook so I'm going to create another function right here so let's call it handle tab change and let's use our use called back hook right here going to take and it's going to take an arrow function inside and here we are going to call our set selected State and we're going to pass it from our Arrow function let's call this property selected tab index and it's going to be of a type number okay and we can pass this into to our function next we need to pass an empty array as a second parameter now we can pass our missing properties to our tabs component so let's define our initial selected State as the selected State and let's define our selected function so on select we are going to pass or handle tab change function let's create a legacy car section so section here and close the section and inside here we are going to pass the component of our list according to our state so let's grab have the selected state from our TA list and the property component and inside our section here let's pass the title let's save the changes refactor our code and let's go to the browser to see the changes so this is our screen for now and as you guys see we only have one tab everything's working perfectly let's go back we're are going to need a few other tabs so I'm just going to go here put a comma and copy and paste the other tabs here and let me go to the browser to see if I can see the tabs and the navigation yep everything seems to be working fine so so we can go back and something that we can do here to clean our code a little bit I'm just going to export this list and put it in another screen okay guys so I'm going to open the file tree and I'm going to create a new folder and I'm just going to call it utils so our code looks cleaner this way okay guys so now that we have finished with our campaigns tab parts we are going to move on to the next part we're going to create a model or a pop over that's going to appear on the screen after we click on this button right here so I'm just going to go to my file tree one more time and I'm going to click on the routes folder and I'm going to create a new file we're going to call it create campaign form and let's name it create campaign form okay so let's start as before and I'm going to switch this as a page component from Polaris and we're going to need the frame and the model components from Shopify Polaris as well to create this effect it's really simple guys I'm going to interrupt this page in parenthesis actually so let me just refactor this page one more time below the page let's call the frame component from Polaris let's close brackets and inside here I'm going to create the model so call the moral component and close it and inside here we're going to have a moral section and below our moral we're going to have our moral section okay so call it moral do section next we're going to need a couple of props for this component first of all we're going to need the state that's the activator so let's go to the top of the component and create our state so as usual we're just going to need our activate and our set activate function using a set State cook so let's create those next let's define a function to toggle the activate state so let's create a cons handle change oops change variable right here and that's going to be using or use SC back back hook just like before it takes an anonymous function and here we can call or set activate State function here just pass the reverse State and it's another P so just put a comma put a square brackets and we have to pass our state since that's what's going to be dependent on so let me pass that right here and that's it now we need to use this now we need to have our activator for moral and the activator is just going to be a button so let's call it activ activator it's going to be equal to uh Polaris button okay let's close this button and let's name it open it okay and here we have to pass the prop on click which is going to be our function right here handle change pass it to our model like this the next prop that we're going to have is the open prop going to be our state we also need the unclose prop so let's pass all our handle change function here so let's pass a title here and we can name create a new email campaign next we need a primary action and a secondary action which are just two buttons so let me just create that really quick let's save the changes now let's work on our model section which is going to be the actual popover that's going to appear on screen so here we are going to need a couple of things first we are going to use a form which is going to come from or ramix Library not from Polaris be careful so let's create a layout and we're going to call or text field let's pass in a few props let's pass the label the label here is going to be campaign name let's pass a value which is going to be a state value which we'll create in 1 second let's pass the on change function which is going to be the same so let's call it handle change uh text let's pass another props as well and our complete let's set it up to of to of guys so this is going to be our two states let's go back up to the top of the component below here we can create those two properties so we can just copy and paste these two states above here and we can just rename them so now let's go below and I'm going to copy and paste these four more times one 2 three and four and we can let me refactor this code and this text fill is going to be our email subject and we I think we're going to need one more so we're just testing for now so it's okay so let's create another text field and I'm going to type content let's save the changes and I'm going to use the same state for all these text Fields just for now guys so below here I'm going to need a button that will submit the form so let's C let's create a button and let's type send here okay let's refactor our code okay guys so now we're done here I want to test this component so let me go to the top of the file and I'm going to grab the name and we need to import this file in one of our screens so let's go back to our campaign component let's go all the way down and we are going to have yes we're going to have to create a new section so oops let me delete this part let me put this component and wrap it inside the section let me wrap this copy and paste this part again and let's import this component we're just testing I just want to see that popover is working properly save changes let's go back to to the browser let's go back here let me open my browser and this is our screen click on open and the model is working perfectly so this is going to be the submission form that we are going to use to create an email campaign and send it to all our users in our Shopify store so great perfect it's working let me close it and we're going to refactor this this model is going to appear automatically so we have to fix this right so let's close it and let's go back to our BS code I want to do something first let's go to the top of the component here we are going to need to use our action method in order to submit or form okay so this action method comes from remix this is the method that we use to submit forms to the server okay for now it's going to be empty let's go back inside our component and we're going to need a few things we're going to need this submit Hook from remix as well so let's call it out we're going to need our use action data hook now let's create now we can create the function to send the emails so let's create this function and let's create an arrow function to use or submit hook okay so call submit here and we're going to take an empty object first and then another object which is going to have our submission properties so first replace true and then the method is going to be a puse method now let's grab this send email method and inject it into our button I made a little mistake here we need to grab this part right here in our action method and change it and switch it to our create campaign file where our form is actually sorry about that guys and we're going to paste it here we are going to need to import everything again let's grab our action method and let me go back here I'm going to put it here here let's import it as well let's refactor this import and let me remove the unnecessary imports from the other file okay everything's ready and as we were before let's send emails and we are going to replace this for this action and this action data we are going to use it test or function so I'm just going to here I'm going to put a console diog and we're going to log everything in the console okay perfect let's save the changes this needs to be false by default and this will fix the problem but something else I want to I want to pass this state from our parent component so this one right here so the campaign page so what I'm going to do basically is I'm going to go up here I'm going to copy and paste these types which I'm going to drill into my component let me grab the state from here go back to my app campaign and I'm going to paste it here okay okay I'm going to go back and now I need to pass these props into my component so let's go to my component here I'm going to paste this part so a nose is going to be waiting for these two types and I'm going to pass the activate prop and also this set activate prop okay that's set we Sav the changes and now we need to fix this from our parent component so here it should have aut complete let's click on this part what happened so this one is going to be activate and this longest function let me delete all this border plate so set activate we can save the changes and let's test this really quick I'm going to go to the browser again and let me expand this part so this is our application and we have our button right here and when we click we have this pop up and this is our form so the application is working perfectly so now let's just go back okay now let's let me close this and we're going to work on our action function now the next thing that we need to do we need to install two libraries that will help us create our email marketing application as an email marketing application we need two requirements the first one is that we need a template engine and the second one is that we need to send emails the first one that we're going to use is react email that will help us generate email templates this is the official website and you can see all the documentation right here I will go to examples and you can see that we already have examples made for us so we only need to install this Library we can use all these examples to use as custom templates for our application and the second library is resent that will help us with our functionality to send emails to our customer this is my application you're going to need to sign up for the application and just as the other Library you can check out the documentation if you want to go into more details I will show you the basic configuration for the 12m right now now let's go back to BS code and install these libraries so I will press control backt to open my terminal I will click LS to see my file location and right here I'm going to install these libraries using npm package manager so npm install resent I'm also going to use react email and we we also need react email components okay now let's type enter and wait for the dependencies to install into our project perfect everything is installed I'm going to close the terminal I'm just going to go to my package the Json to make sure we install the libraries so resent is right here react emails and we have react email components okay so let's go back to our project and keep working I'm going to create a new folder called emails and this is where I'm going to store my templates so now let me show you how do you create a basic template let me create a new template let's typ new. TSX create a custom component so let's export a function email new and this one is going to take our props and the prop that we're going to pass here and as props you can pass many things all right so let's do an example and let's say that we are going to pass a URL that's going to be a type any just for this example and here let's grab that URL all right let's D structure it URL that will come from our props now we need to create the UI so return and here we're are going to use components from our react Emil Library all right so type HTML and that will be imported from real react components I think the library needs to be HTML right here and this is a basic HTML template and we have also a button let me type button here and this not and just make sure it doesn't come from react Polaris that's my mistake let's put it here and need to come from button okay and this button let's pass the H rev which is going to be our URL and let's close the button and we can type just click me click me and this is the basic syntax of how you create custom template you can have as many templates as you want here which could potentially be the options that you present your users at the time when you choose a template for the marketing campaign okay so let me save the changes and let's go back to my create campaign form and we can get started with our action function all right let me close the file tree and here we are going to use our resent Library okay so I'm just going to put a console log to make sure this function is working so let's put a heat here so once you import recent you are going to need to pass an API key in order to be able to use this API the way that you create this is from the admin side so let me minimize a browser and I'll show you once you have an account with recent go to the API key section and you are going to create an API key for your new project and grab the private API key and I'll pass it so I'm going to minimize this browser I'm going to go back and right here we are going to pass this key I'm just going to pass it directly here what you really want to do in this case is create an environment variable to make sure this is secure so now we can use this object and we are going to call this object here which is an asynchronous call we're going to call resent that emails. send okay and here it's going to take an object with a few properties we are going to destructure the result of this object which is going to have data or an error okay so let me type those and now as for the properties we are going to need the from and we are going to need our HTML content so you can potentially pass any HTML here but that's the main reason we are using this react IM Library so we can facilitate this process for us so I'm just going to grab this template and instead of passing just raw HTML I'm going to import this template here and and we need to pass a URL so let's pass this URL let's just pass anything here we're just testing this part so we are getting an error here from typescript and the way that we solve this is really simple is we have a function that's provided to us by react email which is called render so we just have to use it so let me type const email HTML equal to render which comes from here oops I think has to be from just make sure you import right from react components and you're going to pass your and here is where we are going to pass our component okay so and now we can use this email HTML right here okay guys so moving on let's handle our error if we have any error here we are going to return adjacent object with the error okay so let's make sure we import this from remix and here we are going to pass or error here and let's pass a status code of 400 okay and if we have a good response oops and if we have a good response let's return the same adjacent object that with the difference that we're going to have a 200 response okay so successful 200 and we can pass our data here now we are going to need a from email so for the subject let's type hello YouTube so the email that you use to send it has to be an email with a custom domain or you could use the email provided by resent to test this but I wouldn't recommend using this email too much I could get potentially flag from your email provider still let's we're just going to use it one or twice in this tutorial so on boarding okay so this is the email that's provided to us by recent and and here you need to provide the email that you use to create the account with recent okay for testing purposes you need to pass an right here because you could potentially send an email to many people which is the point of our application I'm just going to type this off camera okay guys so we are almost ready to test our function and just remember that we are going to use this template as our testing template okay but let me go back to my browser and I want to show you a custom template I want to show you custom templates that we could potentially use so you just have to go to here so you just have to go to the browser here and in examples and and inside the documentation you're going to go to examples here and you can find the examples for the templates that you want to use and you have the source code right here which is pretty cool I'm just going to go to my test store and make sure everything's working let me open the terminal so let me console the log this part and see what's going on here so let me type create new and it should work after we send the message here so if you guys get this error which means we need to pass a prop in our remix component which is basically the path of the form so let me minimize and show you how you fix this here let's go back in this part and inside this form we are going to pass a few props so this is the one I'm talking about you need to specify the action and the action is going to be the location of your form so we have this form right here okay in the location slash app slash create campaign form okay so specify that create [Music] campaign just make sure it matches the name of your file and we're going to pass a few other things all right so I'm going to pass the method which is a post and also I'm going to pass the onsubmit to this form to make sure we don't have any errors and the the function is send emails if I'm correct yes it send emails let's save the changes and let's go back to the browser and try that again so inside our store let's open our development tools to see what's going on in the console and I'm going to type I'm going to so I'm going to click on the form and right here let's click or send button to see what happens and we had a response from the server this is the data that we got so I'm pretty sure we got an email so if I go so I'm here in my Gmail account and this is the response that we have and as you guys see we had an email which is pretty cool now let me show you the custom templates because I want to use one of these uh this is the one I want to use display these templates in in the application and dynamically pass the values right so just copy and paste is the source code okay so here in our emails folder let's create a new component and let's type custom here I'm just going to copy and paste my email let me let me make this bigger let me save changes here and this is the email that we want to display in our application before sending it's pretty similar to what we did before again if you need any reference to these just go to the documentation and you'll see the syntax and all the components that this amazing Library provides to you I'm just going to copy the name of the component and I'm going to go to my uh here let's create a layout section below this one layout section let's oops and I'm going to copy and paste my component right let's import the component let's save changes and let's see if we have a visual in our application in our browser so let me go to my campaigns let's create here and yes as you guys can see this is the custom template and something cool that we could do here is we could have a list of these templates and have the user choose them dynamically before sending these campaigns so they can choose or modify the whatever template they want that's how usually these kind of applications work so let me minimize again and let's go back and I'll show you how you can pass the values manually but if you're familiar with react you've done this before at the end of the day this is just a custom component so right here this invitation was intended for let's delete this part and type content here and let's go back to our component and let's create a new property content now that we have the type let's pass this content here so content let me save the changes now let's go back to my component which is this one right here right so we can type content and dynamically and here we are going to pass the value of our text field content which is going to be this one but that's how you can pass this value so let me save changes now I'm going to go ahead and create the other feature of our applications which is going to be the automations for this functionality we're going to use web hooks from Shopify in order to create an automation okay so let's do it okay guys so let me close all these files and we are going to set up our Hood let me show you this automation that we are going to create I'm going to use the web hook on create user so what I'm basically going to do we're going to send an email automatically every time a user is created so we're going to create this automation using web hooks let me type here send email when user is created all right so let's go to our Shopify server and set up our hooks uh it's this one right here let me close the file the file tree and on here on web hooks is where we are going to start so below this app uninstall web hook which is the first web hook that comes by default with Shopify let's type let's just copy and paste it hold on and then rename it to create user let's rename the hook to customers create so let me add a callback function here to test this hook it's going to be an AS synchr function and let's pass a few things we can pass a topic and let's console the lock this to test okay let me grab the payload as well console just for testing purposes I'm going to console log the payload to see if we have a response from the server right let me save these changes now we need to go to our hooks file right here and work on the logic of our web so just below here let's add another case so we can copy and space this bar right here and let me see what was the name it's customers create I'm just going to grab it from here so I don't have any Mist mistakes let me go back to my web hooks so now let's put a console log here and this console log is going to be again hit web hook okay again guys let's just console the log the payload and here is the automation that we are going to create let's go to the file tree let me go to my campaigns to create campaigns here and we're going to grab the same code because that's this is basically what we're going to do but after the event is triggered so let's copy this code and below here we can paste it and okay guys and once you imported the necessary files just save the changes and just make sure don't forget to put your email here now let's go back to the automations page and we're going to keep working on our logic we are going to need an action function again so let me go back to my I'm going to copy a bit of the code from my campaign here and let me paste everything let me delete everything here now we are going to trigger the web hook here okay so essentially this is going to be the function every time a user creates an automation object we are going to create a web hook in the system and that's what's going to create a user every time a user signs up and when the customer of our application decides to delete this automation object the web Hook is going to be deleted from the application as well so how do we accomplish this we need to access our admin so let me type authenticate from Shopify server and let's access the admin API so let's pass the request object here and we are going to grab a few things let me destructure the object and we are going to grab our admin and our session okay guys now let's create the web hook this web Hook is going to be equal to admin let's access the admin rest API and type resources right here and web hooks okay so inside here we are going to pass or session of course so let's pass the session so let's type if we have a web hook oops if if we have a web hook we are going to do something and if we don't have a web hook we're just going to return all okay so inside here again let's put another console log to make sure everything's working so let me pass the web hook and let's put a few comments here now let's callor web Hook and the address and this is going to be the address of the topic so we need to specify the topic and the topic that we are going to to create is going to be the customers create we also need to specify the format so let's type Web hook. format here and the format is going to be Json now let's put another console log here because if we have all this checks we are going to have a web hook Su successfully created and as just for the last part let's await and save or web hook okay so await web hook do save okay guys hey guys so I'm going to give you two tips to test your web hook if you're having problem setting them up in your store and in your application okay first tip that you can do is just go to your shopify's partner and in your application setup go to this API access and just make sure everything is set up the right way you have to make sure your Scopes are here and you have to make sure you configure the access request for the specific data that you want to access so if you want to access customer data you want to set up you want to allow the customer data to be uh accessible from here just like I did here I make sure I click everything all the access Scopes are I just I just made sure all the access copes are selected so that's tip number one just make sure everything looks right from the partner Shopify that's a good way you can also go here to the monitor Tab and here you have another way to check and test your web hooks this is our web hook uh monitor dashboard you can check everything you can check your API Health you can check functions it's Etc okay the other way is let's go back to our application let me go back here and actually yes let me open a terminal right here and we just have to make sure our application is running in one terminal it's running in this terminal and inside this terminal I'm going to run a command to test my web hooks so I'm going to click mpm run Shopify web hook trigger which is going to help you uh test your web hook okay pick up the lastest API version that's what we command then we're going to pick the endpoint that we were that we chose before which is customers. create choose the the choose the delivery method which is HTTP and the delivery address is the URL of your application you can find it on the Shopify Partners it's right here just go to the app set app and URLs you're going to find this one so just grab this URL minimize the browser again let's go to our terminal here copy and paste these uh link and type at the end of the URL web hooks which is the endpoint that is shown in your Shopify server okay so let me just type enter here and as you guys see the success we have a success the web has been in qu for delivery now that we are ready here I want to go to postman because I want to show you how can you check if we have any web hook installed in our store okay so the way that we do this is that we need two things we need the name of our shop and our access token you just have to grab your session and you're going to D structure your session okay so let me show you how just D structure the session and from here you can grab your shop and you can also grab your access token we're going to use this values in Postman in order to hit our store and check the list of web hooks installed in our application so let me just console the look here and console that Lo this now you have to trigger this function again I already have this value but you have to check these values over here in your terminal here here's where you're going to display this information whenever you're testing something or you're grabbing values from the console always make sure that you check this terminal because this function action is actually running in the back end of remix okay so whatever your console log in here it's not going to be displayed in the browser because that would be the front end the back end of your application the server running in your application it's remix right right so it's this part so you want to make sure you hit this function again so just go to the form click this form and grab this two values all right and just check the terminal okay so what we are going to do now is I'm going to go ahead to postman and here's where you're going to insert your shop this is the URL you want to make sure you hit the web hooks the Json URL and you insert your shop right here this is the value this is the name of my shop and now in the headers just go to header and just insert this value the X Shopify access token and here you insert the value I'm going to do it off screen just for obvious reasons but this is basically how you do it so let me show you what happens if we hit the store without the access token we're going to get an A see we get an invalid API key or access token so it's an recognized login so let me paste now let me paste is the access token and what happens if I send the request with our access token is that we see our web hooks installed inside our store and we only have one web hook the first one that was installed when we created the application the uninstalled web hook okay so this is how we are going to test whether our web hooks are working in my opinion this one is the easiest way to test web hooks so now that we know this let's minimize Postman and let's keep working in our functions okay guys so just same as before we are going to need to create a form again for our page so let me import a page from Polaris we already coded these steps so we can go ahead go back we can go back here and we can grab a few of the values help us code this a little faster so let me go here inside my component I'm going to P paste these values and let's make the necessary import and inside the page let's copy and paste this for and then now let's refactor our page so none of these have to change I think this is good enough let's save the changes let me go back to the browser and make sure everything's working correctly okay guys so here in our store we are going to test our web hook now so let's create our automation so let me click Send and check everything work I think we have a response so I'm going to minimize the browser and I'm going to go to my terminal here and we had a 200 response from the web hook okay so which is perfect now it's working and I'm going to go back to my online store okay guys so just go to your online store and let's build the store online we're going to need to sign up so here um I don't have a link to go to register so I just have to type it here register and here let's just type anything let's just register a user so this should trigger our web hook and we should be able to see our web hook in our store so let me type create and create this user and yes we have successfully created an account because if we go to account here you have you can see the account we don't see the signning anymore that's good let's go back to the homepage and now let's check everything's working let's go back let me go back here let me go back to my customers and we have a new customer okay so now let's check or terminal let me go back here and as you guys see we have a 200 response from our web hook the web hook has finally been trigger and you can see this is the payload that we console lock and all the information for the new customer that we created and if I check my email right now I'm going to see the email that was sent to me from our custom template okay guys so here in my email let me check my second email so as you guys see we have two emails this was 1 minute ago so this was the result of a web hook let me minimize my browser here and let me show you some other things let me show you pman again and I'm going to send a request again and as you guys see you guys uh we can we have registered our new web hook right here and yeah that's why this way is really useful to check if everything's working so let me minimize P bang again and right now I want to show you something extra from the tutorial which is how to delete a web Hook from an endpoint so something else I want to show you let's go back to automations and here instead of creating a web hook I'm going to I want to show you how you can delete the web hook so we can check Postman again and we'll see that the web hook has disappeared so that would be the logic to delete the automation so every time a new user signs up we won't have an email be sent to that user so yes so that's how we can combine all this logic together so let's just comment all these parts let me comment this part as well and below here I'm going to uh grab a response which is going to come from the admin again so let's call the admin the rest API the resources and here it has to be web hooks again resources. webhook and we just type delete here which is going to take an object and we're going to pass our session inside this object our session pass the session and we are missing one more param which is the ID of the web hook that we want to delete and which is the ID so let's just minimize the browser and I'm going to go back to my project here uh it's this one right here this is the ID copy and paste it okay perfect and now let's just check our logic so if we have a response we're going to do we're going to do something and if we don't we're just going to return all so if we have a respon response let's just console lock console the lock the response and we can return a Json object with our with our response okay let's save the document and yep that's it so let's go back to my browser let me go back to my browser so let me minimize my browser go to postman because I want to check we we should be able to see that we don't have the web hug anymore and yes we only have or one web hook which is the app uninstall so everything seems to be working pretty nice so let me close post man let let's go back to let's go back to PS code and let's keep working in our application so in the next part of the application we're going to work with the building API from Shopify I want to show you how the flow from monetization in your applications work in Shopify so we're going to find a way to implement the subscription model in our application so we're going to restrict certain parts of our application so we have two features we have the campaigns feature and the automations featur going to put a subscription wall to say it in these terms in the automations feature so the first thing that we have to do is we're going to go to our Shopify server right here and we're going to set up a couple of things so just create these two constants on top of your Shopify application server and you're going to scroll down and next below here we're going to start with billing and inside here we're going to inject or building plan so we're going to start just I'm just showing you the options that we have but we have basically the monthly and the annual plan so here we just have to inject this part and it's going to take an object and here we have to describe the configuration so we have an amount property let's put a 50 well well that's so much let's just put $5 as the amount you have to insert the currency code and the currency code is going to be USD dolls then you have have to you just have to know these values and the interval which is going to be the building interval for three days so and this interval property is going to be of type the billing interval and this is going to have uh and you can see the options here we have a onetime payment the depending of the usage and the billon interal object has a few properties here you can use an annual and every 30 days which is the one that we're going to use since it's a subscription so it's the one that makes more sense you have more than one type of plan in your application just copy and paste it and here you write the configuration so we also had an annual plan right so here in the annual plan is going to be of course more expensive so it would be $50 per year which is not bad so yeah that's that's about it you configure everything here so just like web web hooks you do your configuration in our Shopify server and then we go to the front end of the application and I'm going to create two buttons I'm going to create one for subscription and another one for cancel the subscription okay now let's go and we're going to paste those buttons in our building page all right so that's what that's so that's the first thing that we're going to do and we're going to start with the subscription button so let's create a new file app that Subs subscri subscription vtn TSX we're going to have an action method so let's export cones action which is going to be of the type action action function this one right here let's make it an import type okay and then it's going to be an asynchronous function function synchronous Arrow function inside our parameter is going to take a request object right right here all right so in our prop we're going to need a few things so we have to call this submit we have to create a submit constant which is going to use our submit hook right submit hook which comes from remix let's have an action data con [Music] action data let's callor use action data hook from remix as well and then you have to type the type of type it's a type of action type of action okay so now let's create you know what we're going to make this a button so let's make it a button from Polaris and we're going to create the f function right so const store s is going to be equal to an arrow function and it's going to take our submit and inside here just put an object EMP the object and then the rest of the pams let's replace this to True replace true and then the method is going to be a post method perfect so now H I think we have to wrap this in a form yep it's true and here just below here let's call the form from remix grab the form current submit and it's going to be star submit okay we want to see if we have any response here so let's console log the action data always for testing and just action data so we know what's going on let's specify the method here so post method and make sure you always configure the action so we just have to tell remix which is the B of this file so it's going to be app and the canel oops canel star subscription right yeah star subscription okay I think that's it so so basically that should take care of our UI so now we can start working in the logic from our action function we have to call the authenticate object from the shop from the Shopify server so authenticate and this is going to come from the admin of course from the admin API and here let's D structure or Bing object use it so let's await Bing hold on buing the require oops no request a require and here we're going to pass an object with a few properties and the first one is going to be the plan so let's use the monthly plan right and we're going to have a property on failure so we have to do something in case this call fails so we're just going to try it again all right so we're going to call the same object inside so here it's going to take an AR function and let's call the build an API let's say request and it's going to have an object again let me grab these and we're going to put the same properties so let's me specify the plan so with the a test property we will let know Shopify that it doesn't have to charge us for real so it's just going to test so let me save the changes and now let's go to the building I think it's this one right here right yeah it's the building page so let's import a page from Polaris and here I'm going to let's go the layout layout oops not label layout layout section this one right here so yeah so inside here let's import import the button here and just paste this part right here and okay import everything that should work let's just save the changes let me make sure my server hasn't broken yet and yeah it's rebuilding the application yeah everything's working now let me go back to my browser so let's test the subscription button it should take us to it should redirect us to this page and it's going to show us a payment methods right here here it provides for us the payment methods for Shopify we have a credit card and PayPal so but since we're testing we can just click on approve and our application is going to be in the subscriptions list from our store so how you check that it's here in your building store go right here and you're going to see that we have our marketing application right here so now I'm going to show you how do we create a cancel button for the application then we're going to wrap our automations page in behind the wall so if you're not subscribed you can see the page so let's close this bar and let's go back to PS code so it's just the same as before go to the routes folder and here I'm going to create another one which is going to be let's just name it cancel uh vtn TSX and we can just go to this part and we're just going to copy and paste everything and refactor and refactor CU it's going to be a similar we're just going to have an extra logic here and subscription button let's just rename it to cancel oops cancel vtn okay let's rename this to cancel subscription and we also have to configure the pad so it's not subscription anymore it's cancel BTN oh yeah canel vtn so just make sure you change the path from your new page and inside here we're going to use the billing API again in this part basically we're checking if we have a subscription right so if we have a subscription we're going to wrap our subscription in an object so let's check it let's call it bing check and we're going to use this part right here to uh grab our subscription so it should be the first one or the last one in the array of subscriptions from the application so let's call this subscription subscription is going to be equal to billing P billing page contrl B the subscriptions the app sub so these app subscriptions and it's going to be the first one so now below here we're going to cancel the subscription this time and we're going to have an object and we have to pass the subscription ID which which you're going to find from here so type subscription ID and type subscription the ID right here now we're just now let's just tell this is testing we're just testing and then we have to pass the pro rate and we have to pass this property to True next I'm going to just console log again because I want to see what it shows us on screen so now we need to wrap this cons cancel subscription so we're going to grab the response from here and paste it right here cancel subscription and we're going to check if we have a successful cancel subscription we're going to console log first of all canel log or cancel sub subscription [Music] message and we're going and we're going to return this uh object right so let's just return it this cons subscription and and if anything fails we're just going to return all right so remix is going to give us the message of what fails right here in the action data so this should take care of everything so save the changes and let's go back to the building page and I'm going to grab the name of these component again so cancel subscription oops it's not this one it's the cancel BTN button this one right here and let's go below here and import the button import the button save the changes and we're going to and we're going to go back to the store to cancel to try to cancel our subscription we have we currently have a subscription right now and I think I haven't mentioned something let's before we do that let me go to the browser and I'm going to show you you need a requirement your application needs to be in the in your Shopify Partners you have to go to your application and you have to make sure in the distribution tab so right here in this distribution tab you have to make sure your application it's set as public as a public application in order to in order for you to uh in order for you to have access to the bill API so just configure everything here and you're going to have this information just like you see it in my screen that's the only requirement to access the plan API in case you have any any errors in the application if you if you are going to try this in your own applic in your own testing application so yeah that's the only thing I wanted to tell you let's go back to the store and we should see or console button right here let's see what happens we have we currently have a subscription so nothing happened it took us back here so that means we cancel the subscription successfully so let me go back to the settings and we won't see our subscription see no subscription anymore let me close the model right here let me go back to my app and if I try to cancel the subscription it's going to take us to the subscription page because we don't have a subscription so yeah so that's pretty good our logic is working perfectly so let's cancel everything here let me cancel this part and I'm going to go back to my store because I want to wrap next thing the next uh the next step that we're going to do is we're going to go here and we're going to wrap this automations page into our building thing so we won't see it so we're going to put a payment wall in this feature so let me just go back to my browser and let's work on the logic from here which is just basically what we did here in simple terms to put a subscription wall you just have to add this logic in instead of the action component we have to add this logic in the lower component inside of automations campaign so I'm just going to go here here and it's going to be just just do it down here let me copy and paste this loader function you have to do the necessary Imports just import everything and below here you just have to whenever you use the just just remember whenever you use this method you have to use the use lower data hook in order for you to see everything in your component to see the changes reflected inside the component right so let's grab everything in this data object and always display play it in your just every time that you test I'm very used to do this when I'm testing displaying everything in the console and console the lock save the changes and that should do the trick this function is going to trigger every time that you load the page okay so and you can do some logic here just like we did on the Cano in the console in the console subscription so if we actually have a subscription just R right to the same te page if we have the subscription just like we did here but let me show you now how this is not going to let us uh we don't have a subscription currently so oops let's go to the browser and here let me scroll go back to my application so we currently don't have a subscription so it's going to take us to the subscription page let's go to automations and as you see it's loading the subscription payable so boom let's approve it let me go to settings here let's go here and yeah but this is basically how you go about putting subscriptions in your application so this is a really important step and skill that you should Master if you're becoming a Shopify application developer so hopefully this tutorial gave you an overview how you go about to build an email marketing application with Shopify so have a great day and I'll see you in the next tutorial guys
Info
Channel: Di Stephano
Views: 7,018
Rating: undefined out of 5
Keywords:
Id: N5Wb_Zn091s
Channel Id: undefined
Length: 63min 5sec (3785 seconds)
Published: Fri Jan 19 2024
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.