How to create a Shopify app with PHP Laravel | L4 Webdesign

hi my name is lee welcome to l4 web design in this video i want to show you how you can create uh your first shopify app this is a very basic step-by-step guide on how to create a shopify app with php laravel which is pretty straightforward actually and in this video i want to show you how it's done so let's dive right into it okay so here i am at my terminal on my desktop now the first thing that i have to do is create a new laravel application i'm going to do that with laravel new l4 shopify app you can call it whatever you want now that it has created our app we can change the directory to that project and open it up in vs code here we are at our newly created project and let's just add this project to valet so let's say valet park and also secure it with an ssa ssl connection so now our site is also secured and let's just check it out in the browser and there we go there is our laravel application now the question is how do we get this application over to shopify and thankfully we don't have to do all the all of this ourselves but there is a very very nice laravel package on github which will do all of the heavy lifting in the background for you and so you don't have to do it all yourself so let's check the check this project out it's called uh it's it's from oc said or oh psy set i'm not quite sure how to pronounce it really let's just head over here to github and if we scroll down we can see that we can go to the wiki and it's very well documented so here you can see how to install uh the package and how to use it so um the first thing that we want to do is we want to copy this right here i will also post the link in the description right here so you can go there yourself and just copy all of the commands so the first thing that we want to do is we want to install this package all right now that it has installed let's go on and copy the our next command there we go now you could also configure the access scopes that your app will need in this uh file right here in shopify dash shopify dash app dot php we can just quickly take a look at it but we will not add any api scopes in this uh video right here because this should just be a basic uh tutorial on how to create or install this app now if you should need any further access api scopes for your shopify app you can just go here and add them here they should be camera comma separated values if you want to know what api scopes your app can have you can also google api scopes shopify go here and just take a look uh what api scopes are offered by shopify and um you could just copy them over here and paste them to your shopify app.php but we will not do that right now because um yeah we don't need it right now so i'ma just close this tab right here and keep on going with our installation okay so right here they tell us to go to shopify to our shopify dashboard but we will do that later we will skip this step right here and come back to it right after but first of all we want to um set our routing so we want to again copy this right here and head on over to web.php where we can set the routes basically it's just the same but we just added the middleware right here which says verify.shopify so you can make sure that only verified persons can access your app verified users i'm sorry so the next thing that we want to do is we want to edit our welcome.blade.php and i'm gonna say welcome that blade.php yes and i'm just gonna replace all of this right here with the code that i just copied i'm gonna say save and that should be it now the next thing that we have to do is edit our user model let me just go over to user open up the user model right here and see what we have to change right there so we should add those namespaces we should next modify the class to become that now let's do that okay it's going to give us an error but we have to also use shop model there we go and our app should look like this our model should look like this i'm sorry okay so is there anything left to do okay we can they recommend us to also install the jobs but that would be uh out of the scope for this video i might make another video for the jobs because that is also very um important for you if you want to submit your app and actually um publish your app then you will have to use those jobs but they're not uh they're optional just uh if you just want to install the app okay so um next thing that we have to do is we have to set up our database connection so let us go over here to our dot env and uh we want to set up a mysql port all right database all right root all right let's say root one two three four okay so i just set up all of the important information for the database now the next step that we want to do now is we want to migrate our uh our database so let's say php artisan my grade and let's cross our fingers that everything is good of course we got an error right here let me just see what happened oh yeah of course i first have to create the database otherwise it will not be able to migrate it anywhere let's try again and there we go my database is now migrated let's check it out right here and you can see that it also added all of those tables right here all right great so we can now go on to the next step so now that we set up everything in larabel we now have to go over to shopify and in order to create your shopify app you will have to have a partners account now i already have one that's why i'm just gonna log in but if you don't have one already you should join uh the partners program and um then just log in okay so here we are at our shopify partner dashboard and uh you can see here that i already installed some development stores and those will be necessary later on if you want to test your app because you will have to test your app within a development store but for now we just want to create an app so we will have to go here to apps and on the left on the right hand side over here you can see create app and we just want to create a custom app now our app name we can say l4 shopify app okay uh it cannot be called shopify so let's just say shopify there we go so our app url we will have to use the the url for our app that we set up before with valet so we can just say l4 shopify app dot test copy this right here and all right so it does need the https okay so for our url uh redirection we will have to say we will have to give it our url slash and say authenticate all right now you can also read this at the installation part from oc set i will just show it to you right here just so you know that i just don't just make it up but you can also read it right here and the redirect uri to be this right here all right so we want to go ahead and say create app so now that it has created our app you can see that um shopify will give us some api keys right here so you can see right here api key and api secret and we will need this uh in our project now let's just go over to our project and take a look at this shopify dash app dot php now you can see here that uh you could enter your shopify api key right here and you could also paste your shopify api secret right here but what we want to do is we don't want to actually you never want to enter or paste your api keys anywhere in this project you always want to paste your api keys in your env file so i'm just gonna command c copy uh this right here this uh property right here go over to my.env just paste it right here say equals to and i'm gonna go over here and also copy this property right here say equals to right here and now i'm gonna go back to my project or to my app and now i'm just gonna copy my api key right here and i'm gonna [Music] copy my api secret as well all right so i will just delete all of those api keys after this tutorial so once you see this tutorial those api keys will not be available anymore so there's nothing you can do with it but uh just for the sake of this video i'm just gonna paste everything in here all right so that's the way that you should do it as well always put paste those api keys and api secrets in your env and not within your project because afterwards you're gonna you're gonna deploy it on some server and then those uh api keys will be exposed so yeah just remember don't do it you also don't want to push it to a github repo or whatever because anybody could just look at your api keys and those will be probably publicly available and yeah that's just something that you want to avoid so we're almost done actually now um let's just go back to our installation guide and take a look if there's anything else needed we're gonna skip those jobs we're gonna skip the web hooks for now that will be a separate video as well so yeah now let us just take a look now it should work now um we can now test our app for that we can select the store now you should already have a development store if you don't have a development store yet um just create one really quickly and come back to your app and click select store now i just gonna say install app to this development store right here and now here comes the moment of truth we can see here that we are about to install our shopify app let's say install app and yeah now you can see we are authenticated we are verified we now have our app right here running within shopify everything is working well and i know it does not look very good so in order for it to look very good very nicely very clean shopify actually provides us with uh some components or a style guide com called shopify polaris now let me just show you this right shopify polaris you can see here they provide excuse me they provide you with uh different components and just to make your app look or just to make the front end of your app look like uh the front end of of shopify basically so it just looks like uh yeah it it just looks like it's one thing yeah you get the point so yeah for example here you can see you can see uh cards or yeah whatever you need and down here you can see the react code that you could just copy and paste into your project so and make your app look like it's a native shopify app which is really neat and gives some just some better better user experience to the users of your app and how to integrate this into your app that i'm going to show you in the next video all right so stay tuned and um if you liked the video if it was help helpful then hit the like and subscribe and see you in the next one bye bye

Channel: L4 Webdesign

Views: 1,579

Keywords: php, laravel, shopify, shopify app, React, Developer, Entwickler, Web developer, PHP7, osiset, github, web development, tutorial, create shopify app, shopify app store, shopify development, shopify app development, shopify app entwicklung, shopify app entwickler, JavaScript, C#, Programming, app development, coding shopify app

Id: YepqHFryFN0

Length: 18min 3sec (1083 seconds)

Published: Sun Sep 19 2021

Reddit Comments

[u/randomiser5000]

Oh I'll be watching this.

I recently created an online store using the shopify Buy Button api and webhooks, so interested to see how you have done it.

[u/LIKE-OBEY-CONSUME]

I've used this package in many projects. It is a little finicky with auth but it works fairly well.