https://github.com/bigcommerce/hello-world-app-ruby-sinatra

Hello World sample app with Ruby, Sinatra and DataMapper
https://github.com/bigcommerce/hello-world-app-ruby-sinatra

bigcommerce heroku-ready oauth-application ruby sinatra

Last synced: 26 days ago
JSON representation

Hello World sample app with Ruby, Sinatra and DataMapper

• Host: GitHub
• URL: https://github.com/bigcommerce/hello-world-app-ruby-sinatra
• Owner: bigcommerce
• License: mit
• Created: 2014-02-10T13:06:08.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2023-01-19T19:04:06.000Z (over 2 years ago)
• Last Synced: 2023-03-12T06:24:46.788Z (about 2 years ago)
• Topics: bigcommerce, heroku-ready, oauth-application, ruby, sinatra
• Language: Ruby
• Size: 56.6 KB
• Stars: 10
• Watchers: 36
• Forks: 27
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy) [(Heroku instructions)](#getting-started-heroku-version)

# Bigcommerce Sample App: Ruby

This is a small Sinatra application that implements the OAuth callback flow for BigCommerce [Single Click Apps][single_click_apps]

and uses the [BigCommerce API][api_client] to pull a list of products on a BigcCommerce store. For information on how to develop apps

for BigCommerce stores, see our [Developer Portal][devdocs].

We hope this sample app gives you a good starting point for building your next killer app! What follows are steps specific

to running and installing this sample application.

### Registering the app with BigCommerce

* Create a trial store on [BigCommerce](https://www.bigcommerce.com/)

* Go to the [Developer Portal][devdocs] and click "My Apps".

* Login to your account.

* Click the button "Create an app", enter a name for the new app, and then click "Create"

* You don't have to fill out all the details for your app right away, but you do need

to provide some core details in section 4 (Technical). Note that if you are just getting

started, you can use `localhost` for your hostname, but ultimately you'll need to host your

app on the public Internet.

  * _Auth Callback URL_: `https:///auth/bigcommerce/callback`

  * _Load Callback URL_: `https:///load`

  * _Uninstall Callback URL_: `https:///uninstall`

* Enable the _Products - Modify_ scope under _OAuth scopes_. This sample app uses that scope, but if you need others,

you'll need to specify them here and then modify the `scopes` method in `hello.rb` to match.

  * Note: If you are managing customer information through the API (such as with the _Recently Purchased Products Block_ example 

  below) then you will need to also enable the _Customers_ scope to at least read.

* Click `Save & Close` on the top right of the dialog.

* You'll now see your app in a list in the _My Apps_ section of Develper Portal. Hover over it and click

_View Client ID_. You'll need these values in the next step.

### Getting started

* Clone this repo: `git clone [email protected]:bigcommerce/hello-world-app-ruby-sinatra.git`

* Change to the repo directory: `cd hello-world-app-ruby-sinatra`

* Install gems: `bundle install --path vendor/bundle`

* Copy `.env-example` to `.env`

* Ensure you have `redis-server` running (if not `brew install redis` on OSX will do it)

* Edit `.env`:

  * Set `BC_CLIENT_ID` and `BC_CLIENT_SECRET` to the values obtained from Developer Portal.

  * Set `APP_URL` to `https://`

  * Set `SESSION_SECRET` to a long random string, such as that generated by `ruby -e "require 'securerandom'; puts SecureRandom.hex(64)"`

  * REDIS_URL should be automatically set to the default developer creds, but if you changed your redis server credentials you'll have to set them here too.

* Run the app: `foreman start`

### Hosting the app

In order to install this app in a BigCommerce store, it must be hosted on the public Internet. You can get started in development

by simply running `foreman start` to run it locally, and then use `localhost` in your URLs, but ultimately you will need to host

it somewhere to use the app anywhere other than your development system. One easy option is to put it on Heroku.

### Getting started (Heroku version)

1. Click this button: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

2. Fill in the details from the app portal on the Heroku deployment page

  * See [Registering the app with BigCommerce](#registering-the-app-with-bigcommerce) above. Ignore the callback URLs, just save the app to get the Client ID and Client Secret.

3. Deploy the app, and click "view" when it's done

4. Take the callback URLs from the instructions page and plug them into the dev portal. All done!

### Installing the app in your trial store

* Login to your trial store

* Go to the Marketplace and click _My Drafts_. Find the app you just created and click it.

* A details dialog will open. Click _Install_ and the draft app will be installed in your store.

## Showing the Recently Purchased Products Block with JWT

This example repo contains the ability to securely show recently purchased products. This is how it looks:

![](http://monosnap.com/image/iuFxhuS8havstVdzNHQGjz2aDmzDwO.png)

### Adding the block to your theme

1. Edit your `Footer.html` file in blueprint or Footer Scripts if you're using Stencil and add:

    ```javascript

    

    var appClientId = "**BC_CLIENT_ID**"; // TODO: Fill this in with your app's client ID.

    var storeHash = "**TEST_STORE_HASH**"; // TODO: Fill this in wit the test store's store hash (found in base url before the `store-` part)

    var appUrl = "**APP_URL**"; // TODO: Replace this with your app's URL.

    // Get the JWT token from the BC server signed first.

    $.get('/customer/current.jwt?app_client_id='+appClientId, function(jwtToken) {

      // Now that we have the JWT token, use it to get the recent purchases block.

      $.get(appUrl+'/storefront/'+storeHash+'/customers/'+jwtToken+'/recently_purchased.html', function(htmlContent) {

        $('#recent_purchases_block').html(htmlContent, true);

      });

    });

    ​

    ```

2. Put `
` wherever you want the block to appear. If you're using blueprint it is recommended that you put it in default.html right before `%%Panel.SideTopSellers%%`.

3. Log in as a customer in your store's frontend (or create a customer account if one doesn't exist yet), place an order then go to the section where you added the `
`. You should see the Recently Purchased Products block appear.


[single_click_apps]: https://developer.bigcommerce.com/api/#building-oauth-apps

[api_client]: https://github.com/bigcommerce/bigcommerce-api-ruby

[devdocs]: https://developer.bigcommerce.com

[devportal]: https://devtools.bigcommerce.com

[toolbelt]: https://toolbelt.heroku.com