{"id":19312185,"url":"https://github.com/bigcommerce/hello-world-app-ruby-sinatra","last_synced_at":"2025-04-22T15:32:06.412Z","repository":{"id":13994360,"uuid":"16695497","full_name":"bigcommerce/hello-world-app-ruby-sinatra","owner":"bigcommerce","description":"Hello World sample app with Ruby, Sinatra and DataMapper","archived":false,"fork":false,"pushed_at":"2023-01-19T19:04:06.000Z","size":58,"stargazers_count":10,"open_issues_count":5,"forks_count":27,"subscribers_count":36,"default_branch":"master","last_synced_at":"2023-03-12T06:24:46.788Z","etag":null,"topics":["bigcommerce","heroku-ready","oauth-application","ruby","sinatra"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigcommerce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-10T13:06:08.000Z","updated_at":"2022-08-10T16:40:35.000Z","dependencies_parsed_at":"2023-02-11T17:15:25.426Z","dependency_job_id":null,"html_url":"https://github.com/bigcommerce/hello-world-app-ruby-sinatra","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fhello-world-app-ruby-sinatra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fhello-world-app-ruby-sinatra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fhello-world-app-ruby-sinatra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fhello-world-app-ruby-sinatra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigcommerce","download_url":"https://codeload.github.com/bigcommerce/hello-world-app-ruby-sinatra/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223900357,"owners_count":17222028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bigcommerce","heroku-ready","oauth-application","ruby","sinatra"],"created_at":"2024-11-10T00:33:27.438Z","updated_at":"2024-11-10T00:33:28.185Z","avatar_url":"https://github.com/bigcommerce.png","language":"Ruby","readme":"[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy) [(Heroku instructions)](#getting-started-heroku-version)\n# Bigcommerce Sample App: Ruby\nThis is a small Sinatra application that implements the OAuth callback flow for BigCommerce [Single Click Apps][single_click_apps]\nand uses the [BigCommerce API][api_client] to pull a list of products on a BigcCommerce store. For information on how to develop apps\nfor BigCommerce stores, see our [Developer Portal][devdocs].\n\nWe hope this sample app gives you a good starting point for building your next killer app! What follows are steps specific\nto running and installing this sample application.\n\n### Registering the app with BigCommerce\n* Create a trial store on [BigCommerce](https://www.bigcommerce.com/)\n* Go to the [Developer Portal][devdocs] and click \"My Apps\".\n* Login to your account.\n* Click the button \"Create an app\", enter a name for the new app, and then click \"Create\"\n* You don't have to fill out all the details for your app right away, but you do need\nto provide some core details in section 4 (Technical). Note that if you are just getting\nstarted, you can use `localhost` for your hostname, but ultimately you'll need to host your\napp on the public Internet.\n  * _Auth Callback URL_: `https://\u003capp hostname\u003e/auth/bigcommerce/callback`\n  * _Load Callback URL_: `https://\u003capp hostname\u003e/load`\n  * _Uninstall Callback URL_: `https://\u003capp hostname\u003e/uninstall`\n* Enable the _Products - Modify_ scope under _OAuth scopes_. This sample app uses that scope, but if you need others,\nyou'll need to specify them here and then modify the `scopes` method in `hello.rb` to match.\n  * Note: If you are managing customer information through the API (such as with the _Recently Purchased Products Block_ example \n  below) then you will need to also enable the _Customers_ scope to at least read.\n* Click `Save \u0026 Close` on the top right of the dialog.\n* You'll now see your app in a list in the _My Apps_ section of Develper Portal. Hover over it and click\n_View Client ID_. You'll need these values in the next step.\n\n### Getting started\n* Clone this repo: `git clone git@github.com:bigcommerce/hello-world-app-ruby-sinatra.git`\n* Change to the repo directory: `cd hello-world-app-ruby-sinatra`\n* Install gems: `bundle install --path vendor/bundle`\n* Copy `.env-example` to `.env`\n* Ensure you have `redis-server` running (if not `brew install redis` on OSX will do it)\n* Edit `.env`:\n  * Set `BC_CLIENT_ID` and `BC_CLIENT_SECRET` to the values obtained from Developer Portal.\n  * Set `APP_URL` to `https://\u003capp hostname\u003e`\n  * Set `SESSION_SECRET` to a long random string, such as that generated by `ruby -e \"require 'securerandom'; puts SecureRandom.hex(64)\"`\n  * 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.\n* Run the app: `foreman start`\n\n### Hosting the app\nIn order to install this app in a BigCommerce store, it must be hosted on the public Internet. You can get started in development\nby simply running `foreman start` to run it locally, and then use `localhost` in your URLs, but ultimately you will need to host\nit somewhere to use the app anywhere other than your development system. One easy option is to put it on Heroku.\n\n### Getting started (Heroku version)\n1. Click this button: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n2. Fill in the details from the app portal on the Heroku deployment page\n  * 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.\n3. Deploy the app, and click \"view\" when it's done\n4. Take the callback URLs from the instructions page and plug them into the dev portal. All done!\n\n### Installing the app in your trial store\n* Login to your trial store\n* Go to the Marketplace and click _My Drafts_. Find the app you just created and click it.\n* A details dialog will open. Click _Install_ and the draft app will be installed in your store.\n\n## Showing the Recently Purchased Products Block with JWT\nThis example repo contains the ability to securely show recently purchased products. This is how it looks:\n\n![](http://monosnap.com/image/iuFxhuS8havstVdzNHQGjz2aDmzDwO.png)\n\n### Adding the block to your theme\n1. Edit your `Footer.html` file in blueprint or Footer Scripts if you're using Stencil and add:\n    ```javascript\n    \u003cscript\u003e\n    var appClientId = \"**BC_CLIENT_ID**\"; // TODO: Fill this in with your app's client ID.\n    var storeHash = \"**TEST_STORE_HASH**\"; // TODO: Fill this in wit the test store's store hash (found in base url before the `store-` part)\n    var appUrl = \"**APP_URL**\"; // TODO: Replace this with your app's URL.\n\n    // Get the JWT token from the BC server signed first.\n    $.get('/customer/current.jwt?app_client_id='+appClientId, function(jwtToken) {\n      // Now that we have the JWT token, use it to get the recent purchases block.\n      $.get(appUrl+'/storefront/'+storeHash+'/customers/'+jwtToken+'/recently_purchased.html', function(htmlContent) {\n        $('#recent_purchases_block').html(htmlContent, true);\n      });\n    });\n    \u003c/script\u003e​\n    ```\n2. Put `\u003cdiv id=\"recent_purchases_block\"\u003e\u003c/div\u003e` 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%%`.\n3. 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 `\u003cdiv id=\"recent_purchases_block\"\u003e\u003c/div\u003e`. You should see the Recently Purchased Products block appear.\n\n\n[single_click_apps]: https://developer.bigcommerce.com/api/#building-oauth-apps\n[api_client]: https://github.com/bigcommerce/bigcommerce-api-ruby\n[devdocs]: https://developer.bigcommerce.com\n[devportal]: https://devtools.bigcommerce.com\n[toolbelt]: https://toolbelt.heroku.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fhello-world-app-ruby-sinatra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigcommerce%2Fhello-world-app-ruby-sinatra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fhello-world-app-ruby-sinatra/lists"}