If you don’t know about shopify, you can read about it on this page. Shopify apps are a great way to extend the shopify limited features, and add an extra functionality to the store. There are lots of apps with awesome features in shopify app store available now. These apps includes features like wishlist, upsells, marketing, accounting, automation and a lot more. This article is intended to tell the starters about the shopify app development workflow to follow step by step, and develop the perfect rich featured app on shopify platform.
Tools and Languages required
These tools and languages are required and if you have basic knowledge of following, then you can develop shopify app for yourself or your client.
- Ruby On Rails
- REST API
You must have a Shopify Partner Account in order to develop shopify apps. It will be used in the later step to get the shopify api key which is required to make shopify api calls. You can sign up for a partner account at shopify here.
Getting Started in shopify app development
Create a new ruby on rails app by running these commands from command line.
rails new my_shopify_app
Fire up your mysql ( or any database server you’re using). Set up your database configuration in config/database.yml
We’re going to use ‘shopify_app’ gem to make calls in our shopify app development process. Add the ‘shopify_app’ gem in your Gemfile by running this command.
cd my_shopify_app bundle add shopify_app
You can read and learn more about the gem on it’s github page here.
Generate Shopify App files in rails
Next, you have to generate the neccessary shopify_app gem files. This is the important part as it generates those files which are necessary to authenticate your app with shopify and do all the workaround for oauth. To do this, run this command in your rails app folder.
rails generate shopify_app:install
Get Shopify API key
In this step, you will need a shopify partner account. If you don’t have one, you can sign up for it here. In your Shopify Partner account, go to apps section. Create a public or private app (depending on your need).
Then, enter your desired name for the app, and puts https://localhost/ in the App URL and Redirection URL for now. We’ll change these later in the step when we fire up our local server tunnel.
Then click ‘Create App’ Button on top, as a result you will be presented with shopify api key and api secret. Copy these and paste them in the config/initializers/shopify_app.rb file. Replace ‘YOUR_API_KEY_HERE’ and ‘YOUR_API_SECRET_HERE” with your generated api key and secret.
Set the API scopes
Setting api scopes for your app is important as API scope defines which part of the merchant’s store your app will have access to. You have to set api scopes before installing the app in the merchant’s store as it will be set at the installation phase. You can read more about Shopify app scopes here.
Choose your api scope based on what your app will do and set them in the config/initializers/shopify_app.rb file, so you have the required access to make required api calls.
Then run this command which will result in creating the tables in database, of generated models in the previous command.
Setup Local Server
Ngrok is a free tunnel service which exposes your local server to the public by generating a public url. We will use that url to install the app in our shopify store and do all the development. Create an account on ngrok, it’s free and download their binary.
Extract and open command prompt. Navigate to the extracted folder, and run this
ngrok http 3000
we will tell ngrok to start http tunnel at port 3000, because our rails application will be running at port 3000. This will start the tunnel and in result it will give you the public url which you can use to access your local server. Copy the url, we will use it later.
Keep this running and open a seperate window of command prompt and navigate to your rails application and start the rails server.
Update Shopify app url
Now, update the url of app and redirection url to the ngrok generated url which we copied in the last step. Make sure it is with https
Add the redirection URL like this:
because ‘shopify_app’ gem that we’re using, sends user to this url after authenticating the app with shop.
Install the app
Keep the server and ngrok tunnel running. Now install the app by visiting the NGROK url.
Make API Calls
Now you’re ready to make api calls and code the logic of your application. To read more about how to make api calls, refer to github page for shopify_app and shopify_api gem because ‘shopify_api’ gem is the core of ‘shopify_app’ gem. Also you can read documentation about the available endpoints at the Shopify Docs.
If you face any issue setting up the shopify application, feel free to write a comment.