How to make a Shopify App

all right guys so today fastest way to build a shopify app from scratch which at this point might also be the best way to start your own system as a service business or a sas business because it's actually way easier to build a profitable shopify app than would be to let's say create the next profitable android or ios app and that's mainly because your main target audience is purely merchants who have money to invest in their business and if your app solves a problem for them you can justify a higher price point now before we get there i absolutely need to understand what you're getting into here because app development is quite advanced and it's not even remotely as beginner friendly as freelancing for example and that's why i put together this extremely important comparison just to give you a better overview and some more realistic expectations so here we are in the powerpoint of truth and justice where we have apps versus freelancing and we're going to start with freelancing because there's a little less to cover and if you want to get into that you would need to learn html css and javascript which is basically the web development stack and then you would also need to learn shopify liquid as shopify's back-end templating language and on top of that you would also need to learn all the ins and outs of shopify as a platform so that is to say configuring all the settings like taxes shipping creating stores from scratch setting up good looking or professional looking front ends knowing about the best themes you can use knowing about different apps for different use cases or delivering services like store speed optimization migrations code customizations and theme customizations so then you would need to learn about theme files shopify sections all these kinds of things but once you become good at all of these you're pretty much ready to hit the market and from there you would need to learn how to find clients how to talk to them how to position yourself how to send a good proposal how to price your services which can be a bit tricky or overwhelming especially in the beginning but i believe if you commit to learning all of these that's one of the fastest ways how you can get to a sustainable income online okay now how does this compare to apps on this side the first thing you would need is a good idea or to be more precise you need to solve an in-demand problem because otherwise your app won't be in demand and you also don't want to be guessing what the market wants uh you need some sort of data or reference on this and there are actually different ways to accumulate that but honestly one of the easiest ways would be that you have worked with real world clients before because then you see or you get to experience first hand what merchants struggle with and if you notice the same issue across multiple clients then it's very likely that there's like a bigger audience or a bigger pool of people having the same issue and that would be the easiest market to tap into okay now given that you have a good idea then follows the technical implementation and you would need to learn html css and javascript as well although i would say you need to learn javascript in much greater detail but it depends a bit on the type of application you build and then you would also need to learn about shopify as a platform not as much in detail as with freelancing but you want to learn about theme files different features and the different apis and then you would also need to learn one back-end technology or back-end language and this could either be nodejs or ruby on rails basically it could be any back-end technology could also be php or something but these two are the most popular in the shopify space so i would recommend picking one of these and then you might also want to learn a front-end framework like react because that helps to build the interface of your app and then you also need graphql in order to make api calls so then you can communicate with the shopify system and update or fetch data and speaking of data your app also might need a database if you need to store customer data for example but then you also want to get into the basics of security because you don't want to publicly expose that data or leak customer data and then lastly you would need to figure out your own hosting because your app has to run on a dedicated server so all of this is pretty much the technical implementation and from there you can hit the market so then your main tasks become marketing you want to get your app in front of as many people as you can you need to do customer support as soon as you get the first few installs and it's going to be a little less if your app solely acts on the back end and it's going to be a bit more if it also works on the front end because then it has to seamlessly integrate with a lot of different themes and eventually later down the road you can build a team to outsource that or automate that or have something like a first or second level support but in the beginning you're going to do it all by yourself and then you will have maintenance like fixing smaller bugs or you might also want to deploy new features yeah so that's it for apps so as you can see this whole apps topic is quite complex and that's also why inside free mode we focus on the right half side of things because there we can get your results much more consistent and predictable and i mean we literally guarantee that we have a 30-day money-back guarantee in place if anything feels off you get your money back so there's like zero incentive for me to sell you something that doesn't work so keep an eye on that and with that i think we've accomplished the longest intro in the history of this channel but i think it was super important so let's get started [Music] hey jan here codingthen.com let's get straight to the meta at hand here's the infrastructure of what we're building today so we're going to have the shopify site we're going to have our local pc and we will have a dedicated server where our app runs so for example this could be myapp.com and yes you can imagine this to be just a regular website and the only thing special about it is that only shopify sites can log in here and once they do so they get to their dashboard which contains all the functions and numbers and whatnot and even though this might look similar to the shopify admin dashboard we always have to keep in mind it's not it's myapp.com and it's a completely detached website and it only looks similar to create this cohesive design experience and like the best user experience and when someone goes to the admin dashboard and clicks on apps and then opens our demo app what really happens behind the scenes is all this authentication process and then shopify just embeds our website myapp.com into their website with an iframe so they just display our website inside their website and that way as a user we can kind of interact with both and we will get more into the technical details but for now this will be good enough to get started okay now besides that we also need to prepare a couple of things in advance and one thing is your shopify partner account you can sign up for free and then you also want to create a development store that's a store where you can test your app mine is called how to write an app and as you can see i currently don't have any apps installed and then the last thing we're going to need is the shopify app cli that's an additional piece of software that helps to prototype these kinds of apps and here you can find the installation process and the requirements so for example you need to have ruby installed on your pc and don't get confused here we are not building a ruby on rails app we are building a node.js and react app but the app cli is just built on ruby so in order for us to use that we gotta have ruby installed and then you can just follow the installation process for your operating system and just like with every other installation there are certain things that can go wrong certain warnings certain error messages but then you would just have to research these because with every project there's a certain amount of research involved and you really have to get into this problem-solving engineering type of mindset that's super important or actually it's a minimum requirement and then you're also going to need a local code editor you can use pretty much anything except windows notepad so i'm using visual studio code which is pretty much industry standard okay so now with all of that in place i have a new folder on my desktop and now i'm gonna open that with visual studio code this has the main benefit that as soon as i bring up the terminal the working directory will be set to my new folder so let me show you that so you could either hit ctrl shift and p or you could also click on this little gear icon command palette and then i want to view the integrated terminal so you can see my working directory is set to desktop slash app and then as a first command we want to type shopify create we want to build a node.js app now we have to enter an app name so maybe we could just go with demo app for now you can decide whether you want to build a custom or public app we will go with public app now it gives you this url to authorize with your partner account so let's follow that so now i just log into my partner account authenticated successful we can now close this page let's do it and then you can select the specific partner account because i have two in here so for all the youtube videos it will be coding with yun and then you want to select the demo store so for me that's how to write an app.myshopify.com and now we just have to wait for all of that to finish can take a couple seconds or even minutes so i'll see you then and now it already registered the app inside our partner dashboard but not inside our development store yet so what i want to do next is type shopify serve that brings up ah sorry we have to navigate into our demo app folder first so let's do cd demo app and then let's run shopify server again so this looks a lot better and what i was about to explain is that shopify serve brings up our app server and the only difference is that for now we don't have this myapp.com domain and we're actually hosting it on our local pc but once you deploy the app you want to push it to heroku or any other web hoster and here it's asking us to create a tunnel to our local pc because we don't have the public web server yet so let's hit yes so now our server is running and we can install our app by clicking this link here and actually this angry url is our myapp.com domain only looks a bit different and you got to use your imagination but yeah that's the tunnel to your local pc so let's click on that so here it redirected me to our development store and let's go ahead and install that app so there we have it our very first shopify app with node and react first how cool is that second i could also show you the iframe so let's go to inspect and there we have it an iframe pointing to our local pc through the ngrok tunnel and let me also show you what happens when you try to bring up this url outside of a shopify store so let's get a new incognito and try to visit that then you would immediately see shop undefined and then it can't access the site okay so far so good pretty cool but what's next you may be asking excellent question and it really depends on what you want to do next so [Music] if you never used node.js before i highly recommend checking out my video on automated testing frameworks because there i have like a small introduction to node and mpm i could tell you more about the different packages used here we can talk more about the shopify app bridge which is used to enable communication between this frame and the mainframe because usually iframes can't easily communicate with each other or we could talk about graphql like making graphql calls with the apollo client we could talk about routing with next js we could talk more about react like how we can modify the content of this page so you could add a little test here and then it would appear right here we can talk more about polaris which is a collection of different react components that will help you to build these shopify looking interfaces and elements or we could also talk more about react in general or i could tell you more about the server side of things we could set up our own routes and maybe even build our own api we could talk about web hooks so there are a thousand different things that we could cover and just let me know what you want to learn next i also have a few other videos planned but we can have an app video in between every now and then would actually be a lot of fun and then i would say this was a pretty good start and i hope that was something and helpful if you're looking to become a freelancer keep an eye on free mode for a more structured and guided format and then i also found this very insightful article on how to like a youtube video and i don't think we need this part here so make sure to check that out and then i'll see you in the next bye

Channel: Coding with Jan - Shopify Developer

Views: 23,056

Keywords: shopify apps 2021, how to make a shopify app, shopify app tutorial, shopify apps, shopify app, shopify developer, shopify coding, react, nodejs, shopify tutorial, chris the freelancer, shopify devs, weeklyhow, shopify, Aleksander Vitkin, Codingphase

Id: A8YCxBTgsbI

Length: 13min 38sec (818 seconds)

Published: Wed May 12 2021