Tuesday, December 13, 2011

Sexy Charts FTW in Rails (+ making a Shopify App)

I was applying for a job at Shopify and decided that the best way to woo them was with Sexy Charts™.

Charting Options for Rails
I think the sexiest Sexy Charts™ out there right now are Highcharts, but their commercial pricing is a bit steep. As part of the application process I was making a Shopify App, and while the aim isn't to sell it on the store in the short-term, you never know right? Because of this I didn't want to use Highcharts, and risk incurring their Licensing Wrath. The next-best option was Google Chart API, which I had wanted to try for a while. I was pleasantly surprised to find out they had gotten a whole lot sexier than the last time I looked at them (check out the home page for examples, and make sure you mouse-over the graphs).

Building a Shopify App
If you're in to Rails like I'm in to Rails, a great place to start is the guide on Shopify's site. The most important thing to do is run the shopify_app generate on a fresh Rails project, as it clobbers a bunch of stuff to give you a running app skeleton in record time.

I really can't improve on it, so go have a look at it and come back when you're done. Go. Go now.





...aaaaaaand we're back.

Environment Variables and Herkou
The only thing I changed from the standard shopify_app generator was to move my environment variables (my app's Secret, Shopify Secret Token, and Shopify API keys) in to an external file which was NOT checked in to source control (Git). This meant I could host the project on GitHub for Fun and Profit, without giving up mah secretz.



I started out using Tammer's steps, but found that putting the load in config/environment.rb (as he suggests) this didn't load the variables in time for the Shopify config settings in config/application.rb. I ended up having to put the load in just before the Shopify config options are set (in application.rb), so it looks like this:

     ...

    # Heroku env variables - for development/test
    heroku_env = File.join(Rails.root, 'config', 'heroku_env.rb')
    load heroku_env if File.exists?(heroku_env)

    # Shopify API connection credentials:
    config.shopify.api_key = ENV['SHOPIFY_API_KEY']
    config.shopify.secret = ENV['SHOPIFY_SECRET']

    ...


If anyone has a better way of doing this, please let me know (I tried a bunch of other stuff, but this was the only way which worked and wasn't too nasty). Once you've added that, you'll need to create a file config/heroku_env.rb with your secretz. Mine looks something like this:

# DO NOT CHECK THIS FILE INTO VERSION CONTROL

ENV['SHOPIFY_API_KEY'] = '12345678912345678912345678912345'
ENV['SHOPIFY_SECRET'] = '12345678912345678912345678912345'
ENV['SHOPIFY_SECRET_TOKEN'] = '12345678912345678912345678912345
123456789123456789123456789123451234567891234567891234567891234512345678912345678912345678912345'


Make sure you add the line config/heroku_env.rb to your .gitignore file, otherwise you're going to have a few issues when you deploy to Production... This setup also means you can use different values in the file to what you set in Heroku, and keep your prod and dev environments completely separate (== WINNING). It would also work well with things like AWS keys, and anything else you don't really want to be publicly visible on a GitHub-hosted project.

Making a Shopify App
Once you've got that all down, you're ready to start making your own app. The important thing to remember with a Shopify App is that by "installing" your application on their store, all the store owner is doing is giving your app (in this case, a Rails app) permission to access their Shopify data. They're not actually copying any of your code, etc to their Shopify store.

If you've set your application up as in the document above, store owners who install and log in to your application will be directed to the home#index action. Actually, they're being directed to the page they came from OR the root route (which by default is points to home#index). You can change this by modifying the root route in config/routes.rb, or change the final redirect (on success) in the login#finalize action (if you don't want to change the default route). You can also update the views that the shopify_app gem created for you in app/views/home/.

The API is quite simple, and there's a few good examples in the default home#index view (app/views/home/index.html.erb). Once all the setup steps have been completed (in the login controller, provided by the Shopify gem), getting a list of the store's customers (once the owner has logged in) is as simple as:

@customers = ShopifyAPI::Customer.find(:all)


The same works for products, and a bunch of other resources. See a full listing of possible requests on the API documentation page. The magic happens with the around_filter that Shopify gives you:

around_filter :shopify_session


If you want to access Shopify data from your own controllers, just add this around filter to your controllers, and get busy!

API Limit
There's a limit of 500 API calls every 5 minutes, which is perfectly reasonable (there's a funny write-up about it on their wiki). Even with a nice fat limit like that, requesting all the info you need every single time is LAME and SLOOOOW, so I stored some of the data locally for my own processing. That being said, I tired to store as little Shopify data in my app's database because I don't really want to be responsible for it - I keep just as much as is needed to make my app work.

Publishing the App
I'm still putting the finishing touches on my app, but the MVP is almost done - not bad for playing with the Shopify API/gems for only two days (along with my normal work). The next step in the plan is to get some shop owners to test and comment on the app, so that I can get validated learning - gotta keep it LEAN. Hopefully it'll be in the Shopify App Store soon, it's called (imaginatively!) Customer Demographics.

1 comment:

  1. I think this article will fully complement you article. PLease continue publishing helpful topics like this. Regards, from Always Open Commerce

    ReplyDelete