Reusing and Modularizing Components with Laravel and Vue
Here I wanted to quickly show you a component that I tried to be quite reusable for the use that I am going to give it which is the paid one This video is going to be a little long because I want to show you many things but I hope that in the end it will be a little interesting for you at least to understand a little how I modularized my components a little That is to say here I notice that in the Academy part which is the lab in which I sell both the courses and the pads and now I am also selling the books so basically there are three different payment platforms because one thing is to buy a pad another thing is to buy a book and another thing is to buy a course although this depends a lot on you I will tell you a little bit Also remember that I started selling the courses first and now recently at the date on which I recorded this video It has not even been on the air for a week I am also selling the books and in between here I also started selling the packs which the packs in case you do not know are a set of well they can be pure courses they can be courses and books or they can be pure books at the moment they are courses and books I think I do not have any with pure books for example these are pure courses then they are packages but as you can imagine it is a different treatment especially for the courses and the books although so here making a small parenthesis this again depends a lot on you since in the end the courses and the books are structurally similar it has a title it has a subtitle it has the description it has content but as much as the courses go a little further since you have to structure it in sections and classes while the books are simply a file and of course this can be handled by a relational table etcetera and I do all this because remember that here we also have what are the polymorphic relationships I only know it in Laravel I do not know what other framework handles it It is not that it is the eighth wonder of the world since we can easily simulate it but even though it is Laravel We already have it implemented for free I will show you a little bit the structure the structure of my data in case you are interested here I have a problem I am showing it to you it is directly on the server because I am currently working with the CKEditor and it leaves it halfway So The application is not starting here here I have the model of the Book that the books here we have the fields and here the one for the courses that I called here tutorial so they are very similar but as much as it is I manage it separately this again before showing you the part of the components a small moral and it is that as much as it is it costs a bit sometimes at the beginning as to modularize everything since initially you say Well Im going to sell the courses and thats it but after time you say Hey Im also going to sell something else then there it would have been a good idea to have created this more modular structure as I started right now to do a little with the books not so much sometimes the structure itself because in the end this has its eventualities it is always going to have different fields so there or you could create a generic one and then create some referential ones but Ne is to say a fk but something will always go wrong there that will send you all the hell so but the part of the payments I did want to make it more generic since that is also a heavy part here I manage it in a certain way indicating tutorial payments as you can see here but here I managed it a little more flexible for the Boot and I managed it in a file called File payment As and in which the user is managed the status well this is if it is subscribed that is to say if for example it was returned although I do not have anything implemented in the system yet the payment the reason for which it was abandoned that is to say what is requesting the return the order ID if a coupon was used the price the end payment ID Note that this is already a polymorphic relationship and it is so that it is flexible again since right now I am selling the books but later I may decide to sell I dont know things in Blender or later I decide to sell the videos or any other type of file that I want to promote again from my website so that is why I managed it this way so that it is flexible since the payment part if it is the same for any resource that you want to sell it will have the information that you are seeing on the screen and that is why at least this one I did want to leave it this way so that it can be easily reusable and I will explain all this hell to you before going into detail it is because the In the end all this is managed through payment and I thought it was important to explain to you a little about the structure behind it So from now on Im going to explain to you a little about what the plugins composition is or rather what the plugin does So here for example look at this case so I am authenticated it is important that you notice I am authenticated here I have another one in which I am not authenticated it is an incognito window and it already offers some options This is the plugin that I am going to show you right now Well I call it plugin but it is a component We have here the coupon part And if you are ready to pay if I click here I am ready to pay it will indicate or it will show me the PayPal plugin which to date is the only one that I have available later I will put stripe for example and here it tells me What is the charge Perfect then and if I am not authenticated and I come here for example to pad notice I will select any Notice that here it gives me here login since it has to have a user to whom the purchase will be allocated in this case it would be that it is authenticated but here I also have the option to give a course or the pack or whatever here it does not appear because I did not enable it for here but here it does appear for example if I go to other content and here you can see another difference here if for example Im going to book Im going to open here the one for courses Im going to try to buy one of these books Ill give the same thing in detail here Note that here the option to give the book as a gift appears in which you can put the email of the person to whom you want to give the book or in this case the resource Here also notice that the texts change a little bit here it is to give a book here for example for the one for courses Im going to look for one that is not registered it will appear is to give the course here it is books and here it is courses so you can see the differences a little bit eye that again This is the character that Im making reusable And I think you can see the why of this because it is quite a few options that I have and little by little I have been working on it to make it work this way here this This if I dont have it at hand that if I put a coupon here the same recharges based on the price that we are placing here which in this case is 5 but if you apply a coupon of it is automatically placed here here you can also see that I started to hide or I did it step by step precisely to be a little more understandable to the eye since There are some people who told me that they got a little tangled up because when for example I applied the coupon what it did was always appear the PayPal dialog here so when I applied the coupon what it did was recharge or Call again a function that I have there called PayPal again to build This then was called twice and it seems that some people told me that it gave them problems And from there I wanted to make it a little clearer so that it is better understood since for example here you cannot advance Or at least that here I am ready to pay but I think it is more understandable that you have to apply the coupon before saying that you are going to advance and here it also takes advantage of placing all those validations that if for example I am incognito and not authentic it tells me the button you must Log in to buy the course which will not appear to you Here if you already log in for example here then you can see that it is a little different and has several options available in summary the coupon part if you want to give away the course that I only have it active for the books and the courses for the pad I do not have it I placed well the pad would be the one that I showed you here and also in the navigation that it has then here is a little bit what based on the to the model scheme that I explained to you here I would like you to analyze how you could make it modular so that you can use it in all these parts and again I think the reason is quite clear since it is a somewhat extensive plugin and it becomes annoying if later I decide to sell something else that I have to implement all this again and if at some point I decide to change some feature of one I dont know to add another option here or an option to give away Oh no lie there is also a fourth case which is when the resource is free I am going to look for some free one here what happens is that I think I dont have it anymore I think I have them registered and here This one is killing me this one doesnt want to work No its not going to work but yes well from here I think I can see it from here how authentic But at least it should demonstrate the button I think em go for free courses to see here there is one See free see details I think it was here it was not the other and I come here it is See free no I already registered to see now I forgot how my app works How nice I dont think it detects that Im not authenticated and sends me here but well if the resource is free a button appears that says See for free then all that is done by the plugin that I configured on the screen at the end As I indicated they are different resources that is books pad courses etc therefore they will be processed since they are different models from different controllers since in the end this is an app application in View that connects to a rapi then You might ask how I made that connection to make it as modular as possible it would be complicated depending on the structure So here Im going to close all this the component I called it as payment plugin I can payment here is payment plugin and Im going to look for it here to see where we are using it payment plugin here I am using it in these three places which are the courses Well here This is the books the pad and the courses as you can see and I am using the component that we have here which is the one in charge of doing this whole process As I was telling you Im going to show you a little bit about the conditionals Here I have the gift part Here I have the part of applying the coupon here I left the comments here if it is free Well here if it is loading here if it also verifies if you already have for example in the pad which is the most complicated if I am already discounting the item So if you already have all the items of that course or that pad it already tells you here that you already have everything then it shows you something else then you can see that the component does many little things here the price if it is free So it doesnt show this it doesnt show this payment part but directly a button goes a button that says register for free or something like that which is good there is good
Modularize and reuse
Here a bit of the magic that is a bit obvious is the part of the uses of the Pro in this case it is for example to indicate if it is a package in this case it is precisely to enable disable the part of giving to another person so for that I can use this here also the description good This is for the PayPal management part Here it is important Even though it is what processes this behind is a method in the resapi therefore the only thing that changes is the slot the slot to process the file which Well Apart from the slot it also changes what is the url and that is why here I also pass it through to see where it is here is I show you a little bit of the process so that it is understood a little better what it does here Good This is the button that indicates if you are ready to pay Then it already places the PayPal dialog and that is why it calls this function this for the part of giving to another person that makes a verification in this case for me it is global So I set it up this way but in case the route you want to call is not global what you could do here would be right here This is the PayPal plugin if you have already seen that course this should not seem like a surprise to you but notice that even if it is the process URL that indicates that everything is okay And it is the one that really processes the order it is another it will be a different URL if it is the pad if it is a book Or if it is a course and therefore I simply pass it as a parameter but what we have to see is that this may cost a bit sometimes that the end the process is the same regardless of the URL And what you do on the server it is worth it it is worth little what viu is interested in is passing it the parameters that it is going to require that in this case we have some common ones such as the slut which is the I handle it as if it were the PayPal order ID to register it in the database and the coupon that I can use coupons throughout the application here we have some additional parameters that is another important point that are these additional parameters if we come here which is a little bit also the different thing that we have here with the books is that if Im going to buy one notice that up here Although it depends on the book or sorry depends on the resource these options may appear to you I have two really Im going to see if I find one with all the options or I can see it from here not from here I can see it better I come here to courses Im going to click on the Arabic one that has everything this one is the free one this one for example not this one also has everything here look Ah it doesnt have one what a shame let me look for it here it is I put these dialogs well these are these little boxes to vary the price here Notice that by default it is eight therefore if here I click Im ready it will tell me that it is 8 and if I select any of them here it will vary the price but notice that these components are not at the level and it doesnt make sense to put it here at the payment level Why dont I put it here inside because I want to make the and as reusable as possible and here another important point that we have and that is that we have to determine What type of actions is it the one we are implementing and if they are going to be usable throughout our application since we could perfectly place this here but the problem is that there we have to place more in conditional to specify if we want to activate or not these actions according to the resource we want to sell which for me does not make sense since they are only going to be sold or applied in the courses not in the books or in the pack therefore is this I defined it directly in the courses as you can see here and through the keys that you can see here that varies the price what I do is redraw the component in question Im going to look for the payment one here Note that I passed the k What is the one here for example the price the price that varies according to the user selection and there you can see how the PayPal component that we have here is redrawed since the idea is that the user first selects these options and from there then enable the rest of the process that would be the payment you can also hide this while selecting this but what happens is that surely the user is not going to select it or rather this is optional and therefore I left everything at the same level but no matter how much if you advance it here then And select this for example here I gave it I am ready to pay you will see that everything is redrawed again and through here then here you also have an important point and that is to know when you have to place certain characteristics that are reusable and when not in this case again for me it did not make sense place those two balloons in a reusable way and what places reusable what is the processing what is the price basically the props that you can see over here and it is the way in which I made the component reusable Through the props that again going up a little bit are the ones we have here and precisely that is why we need this extra parameters for the success route that is to indicate in this case if the user selected this or not and and at the server level I enable those characteristics or not I enable them depending on whether they bought them or not and this is precisely the extrap suc Road that we have here that if it has nothing then it passes an empty object Remember that this is the propagation operator that this is an object So this also then propagates the entire object within Within this other object and passes it to the successful route that I have configured here as you can see it is a bit abstract but in this way I managed to modularize it and I can use this payment component anywhere and that is basically what you have to keep in mind the first thing is from the server side already to conclude a bit on the server side you have to make everything as modular as possible that is similar in the implementation in this case all my success routes once the resource is purchased have a route to which to arrive through the slot and that is why I was able to reuse everything through the slot route and even though it is also I pass it here since it is another route since they are different resources here I provide you with the route to which you have to go or which you have to direct yourself and you can vary the parameters and that is why I handle it this way and it is a bit about that of analyzing little by little each movement that is going to be the component to see how you analyze it and with the props it is your best help to do precisely this work Note that for example there are routes that although I defined them here it is not really necessary to define it for example the part of The coupon I evolved it so that it is also of a polymorphic type and now I can apply it for the pad for the books and for the courses and anything else that I want to create simply put Academy coupon here and here we have the polymorphic relationship then also here we can take advantage of what we have on the Laravel side that is what Laravel offers us in this case to make things reusable Laravel offers us polymorphic relationships and I am taking advantage of them along with the components in this case it is again this route there would be no need to apply a coupon since based on the behavior to the structure that we have here the behavior is common in any resource that we want to apply a coupon but even so I passed it on to you then Well I hope that something that you do not understand has become a little clear since I know that it is a little abstract but I still wanted to do it in case it seems interesting to you or you understand something of everything that I commented on here eh any questions you have there you can comment to me and anything another video I will answer you there directly in the comment So see you in another video
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter