Try It Out: Clone the DeliveryTrakr Web Application

We’ll start the process of integrating a canvas app in the feed by cloning the DeliveryTrakr Web application.
In addition to the prerequisites for this book listed in Development Prerequisites, you’ll also need:
  • “Customize Application” and “Modify All Data” user permissions. If you’re an administrator, you most likely already have these permissions. Otherwise, you need to add them so that you can see the Canvas App Previewer and create canvas apps.
  • Git installed. Go here to install and configure Git: https://help.github.com/articles/set-up-git.

    After you install Git, you might need to configure SSH using the keygen tool. See https://help.github.com/articles/generating-ssh-keys for more information. If you’re using Windows, this tool is located in the Git \bin directory, which isn’t added to the path after you install Git. Add the \bin directory to your path by using Control Panel. Depending on your installation directory, the path might be something like: C:\Program Files (x86)\Git\bin.

  • A GitHub account to clone the code example. Go here to set up a GitHub account: https://github.com/plans.
  • A Heroku account because our Web application will run on Heroku. Go here to create a Heroku account: https://api.heroku.com/signup.
  • Heroku Toolbelt to manage the Heroku app from the command line. Go here to download and install Heroku Toolbelt: https://toolbelt.heroku.com.

The steps to create and run a canvas app are the same, regardless of the app’s functionality. So the steps in this chapter are similar to those of the previous chapter, Extending Salesforce1 with Canvas Custom Actions.

DeliveryTrakr is a Web application that Acme Wireless uses to track deliveries of customer orders. The warehouse workers use this application to check for orders that have been delivered and post delivery information to the feed. The DeliveryTrakr Web application contains some delivery processing logic, but it’s not a full application. Its purpose is to demonstrate how you can integrate your Web applications with the Salesforce1 app.

DeliveryTrakr is a Java application that runs on Heroku. Each running instance of the application must reference the consumer secret for the connected app that you create in your organization. Therefore, you’ll need to have your own instance of DeliveryTrakr on Heroku that you can then add as a canvas app. In this step, we’ll clone the application, which is the first step in the process.

  1. Open a command window and navigate to the directory where you want to download DeliveryTrakr. When you clone the application, it will create a directory called Delivery-Tracker-Java-App from wherever you run the clone command.
    • From a computer running Windows, open a command window by clicking Start | Run... and entering in cmd.
    • From a computer running Mac OS, open a command window by pressing Command + Space and entering terminal.
  2. Enter the command: git clone https://github.com/forcedotcom/Delivery-Tracker-Java-App
  3. Navigate to the Delivery-Tracker-Java-App directory. For example, if your Delivery-Tracker-Java-App directory is located in C:\Users\yourname, you would enter this command: cd C:\Users\yourname\Delivery-Tracker-Java-App
  4. Enter this command to log in to Heroku: heroku login
    When prompted, enter your email and password.
  5. Enter this command to create a new Heroku app: heroku apps:create
    Confirmation that the app was created looks like this:
    1Creating deep-samurai-7923... done, stack is cedar
    2http://deep-samurai-7923.herokuapp.com/ | git@heroku.com:deep-samurai-7923.git
    3Git remote heroku added
  6. Copy the URL of the Heroku app because we’ll use it in the next task. In this example, the URL is http://deep-samurai-7923.herokuapp.com, but you’ll want to copy the URL of your own Heroku app.
    We’ve created the DeliveryTrakr Web application in Heroku, but it won’t work yet because we still need to deploy it, which we’ll do in a later step.

The next step is to add it as a canvas app in Salesforce.