The Only Guide You’ll Need to Build Your Own Amazing Shopify App

Completion time: 30 minutes – 1 hour

What’s up all-star devs? Wanna build a Shopify app? You’ve come to the right place. This starter kit will provide you with all the tools you need to get up-and-running with a working, embedded, public Shopify app. You can develop it for your own use, or for sale in the Shopify App store.

Why this sweet, sweet Shopify App Guide?

In our experience building Shopify apps, Shopify provides you with a great deal of tools, and documentation. However, to get fully started on an app you need to follow various resources in different places, some with differing/slightly-incorrect/missing-one-small-step information that could be enough to throw you off your path. So, we compiled these resources into a complete, step-by-step guide! We followed along as we wrote it, tested it, and confirmed this will get you where you need to go.

What this Shopify App Guide covers

In this guide, we’re going to:

• harness the power of use Rails and the shopify_app gem
• install all the development tools you’ll need on your computer
• get you started developing your app
• take the training wheels off and let you fly down a sweet hill of Shopify app development

Assumptions

This guide assumes the following:

• you’re on a Mac
• you’re familiar with the command line
• you’re familiar with Shopify
• you’re familiar with Rails app development*
• you understand API consumption

*We don’t have time to cover Rails development here, but if you’re new to it, don’t worry — Rails development is easy! Have a look at courses like Rails for Zombiles and get up-and-running in no time!

Tools

We’ll be installing the following tools (if you haven’t already) to get up-and-running:

• Homebrew
• Ruby 2.2.2
• Rails 4
• Postgresql Database
• NGROK
• shopify_app gem
• a Shopify developer account
• a Shopify store account

Now that we’ve gotten the preamble out of the way, let’s do this thing!

Computer Setup

Install Homebrew

Homebrew is a tool that allows us to easily install other much-needed tools on our machine, right from the command line. This is where it all begins.

If you don’t have Homebrew installed on your machine yet (you can check by running brew -vfrom the command line), go to http://brew.sh/?utm_source=rss&utm_medium=rss and follow the installation instructions there.

Install Ruby 2.2.2

If you use a version manager such as rbenv (we highly recommend it), install Ruby v2.2.2 through your Ruby version manager. If you don’t use a version manager, you can go to the Ruby installation docs and follow instructions there on how to install.

Install Postgresql

We’re installing postgresql so you can deploy to Heroku easily if you want to. But you don’t need to deploy to Heroku if you don’t want to! You’ll be able to serve your app from anywhere you could normally serve a Rails app.

1. Follow these instructions: http://exponential.io/blog/2015/02/21/install-postgresql-on-mac-os-x-via-brew/?utm_source=rss&utm_medium=rss
2. Don’t do any of the optional actions
3. At this point, you should have:
   • Postgresql installed
   • A Postgresql user created

If you’re missing any of these things, make sure you add them before moving forward!

Install our Rails starter app

Note: if the following commands aren’t working on your command line, try running them with the sudo command

The good folks over at Shopify created the fantastic shopify_app to get you up-and-running with a Shopify app boilerplate. We’ve forked it and added a few things we like. For this tutorial, grab our version for this tutorial here. Once you’ve downloaded it:

1. cd into the app folder
2. ensure you’re running Ruby 2.2.2
   • ruby -v
3. install your Ruby gems
   • bundle install
4. have a look at your Gemfile:
   • you’ll see the various gems installed and why – this is helpful in understanding how your application works and how to troubleshoot
5. Make sure Postgresql is running:
   • postgres -D /usr/local/var/postgres
6. Create a DB for our application:
   • rake db:create
7. Start our application:
   • thin start
8. Go to a browser and visit http://localhost:3000?utm_source=rss&utm_medium=rss
   • if you see an error page like the one pictured in the image below, good stuff! You’re on the right track.
   • once we setup and configure our app, we’ll see a different screen
9. Use Shopify_app to generate our Shop model:
   • rails generate shopify_app:shop_model

Pro-tip: run rake db:migrate after every time you generate a shopify_app model

Install and Run Ngrok

Ngrok is a proxy server that allows us to serve our local application through a public URL. It’s pretty cool.

1. download ngrok
   • Go to https://ngrok.com/?utm_source=rss&utm_medium=rss
   • click “download”
   • click the download for Mac OSX
   • a unix executable file will download
2. install ngrok
   • open your downloads folder
   • take the “ngrok” file and move it to the location you want to install it: (for example: ~/dev/tools)
   • double-click the “ngrok” file to install
   • your computer will ask you if you want to open it; click “ok”
   • a terminal window will open to run a script. When it’s complete, you can close it
3. add the ngrok command to your command line
   • in your text editor of choice, open ~/.bashrc
   • add the following line and save:
     • alias ngrok="/my/path/to/ngrok"
     • (where “/my/path/to/” is the folder you installed ngrok in)
   • update the command line with your changes:
     • source ~/.bashrc
4. run ngrok!
   • From your application root directory, run:
     • ngrok http 3000
   • now ngrok will display a UI with your new public URLs
   • try one of these by copy/pasting into the browser

App Setup

Now that our computer is setup, let’s create our Shopify app.

Create App

1. login to your partner account. If you don’t have one, create one here
2. once you’re logged in to your partner account:
3. Create app
   1. Go to Apps
   2. Click  “Create a new app”
4. General app config
   1. Name your app
   2. Important: check “Enabled” for the Embedded App SDK
5. Configure app URLs
   1. Place your NGROK url in the “App URL” field
   2. Place your NGROK url in the “Redirection URL” field
   3. Add “/auth/shopify/callback” to the end of it
6. Configure app proxy
   1. Type “starter-app” into the “App proxy:URL” field
   2. Place your NGROK url in the “Proxy URL” field
   3. Add “/proxy” to the end of it
7. Create app!
   1. Accept developer terms
   2. Click “Create app” button

Configure App Credentials

Now, you’ll be redirected to your app dashboard, which contains the credentials your app will use to connect to the Shopify API. Let’s use these values to configure our Rails app:

1. Copy the following fields into our Rails app development config file at “config/environments/development.rb”:
2. Copy the “API Key” value, paste as value of “config.shopify_api_key” variable (should be string; wrap in quotes)
3. Copy the “Secret” value, paste as value of “config.shopify_secret” variable (should be string; wrap in quotes)
4. Configure our public NGROK url:
5. In the same config file, copy/paste your ngrok url as the value of the config.public_url variable (should be string; wrap in quotes)
6. Add whitelisted URLs if you need them

Pro-tip: don’t store important credentials in your source code. We’re doing this for easy development, but when you switch to production, remove the credentials and specify them when you boot your server instead!

Now our app is configured: we’re ready to install it on a store!

Install App in Store

1. In a web browser, go to your ngrok public url
2. You’ll see a page prompting you to enter in a store domain
3. Enter in the domain of the store you want to install the app to, and click “install”
4. You should be taken to a store admin panel, asking you if you want to install the app. Click “ok”
5. You will be redirected to your app dashboard.

You made it – welcome! Develop your little heart out.

Start Coding!

Have a look around: dig through your admin panel, dig through your Rails app, etc. If you want to use Application Proxies, our app is setup to do that by default. Read up on them here.

Cheers, and see you on the App Store!

References and Further Reading

• Postgresql install: http://exponential.io/blog/2015/02/21/install-postgresql-on-mac-os-x-via-brew/?utm_source=rss&utm_medium=rss
• Ngrok: https://ngrok.com/?utm_source=rss&utm_medium=rss
• Shopify_app: https://github.com/Shopify/shopify_app?utm_source=rss&utm_medium=rss
• Tutorial: https://help.shopify.com/api/tutorials/building-public-app?utm_source=rss&utm_medium=rss
• Application Proxies: https://help.shopify.com/api/tutorials/application-proxies?utm_source=rss&utm_medium=rss

Feedback

How is the tutorial working for you? Let us know by filling in the contact us form below.

The post The Only Guide You’ll Need to Build Your Own Amazing Shopify App appeared first on Demac Media.