Shopify App Development – Ruby On Rails workflow

by Shine18
Shopify App Development Workflow
Share Jutsu

Overview

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
  • SQL
  • REST API
  • JSON
  • Heroku
  • Ngrok

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

Shopify App Development workflow

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
Shopify app development

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).

Shopify App Development Workflow
Create a Shopify App

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.

Shopify App Development workflow

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.

Setting shopify api key and secret in ruby on rails - shopify app development

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.

Shopify API access scopes - shopify app development

Migrate Database

Then run this command which will result in creating the tables in database, of generated models in the previous command.

rails db:migrate

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.

Ngrok tunnel setup - Shopify App Development

Keep this running and open a seperate window of command prompt and navigate to your rails application and start the rails server.

rails s
Rails server - Shopify App Development

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

Shopify Application url in partner - Shopify App Development

Add the redirection URL like this:

https://YOUR_NGROK_URL/auth/shopify/callback

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.

https://YOUR_NGROK_URL/login

Shopify app installation - Shopify Application Development

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.


Share Jutsu

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More