Salesforce1 Mobile App Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Try It Out: Clone the Shipify Web Application

We’ll start the process of creating a canvas custom action by cloning the Shipify 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 by 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.
Shipify is a Web application that Acme Wireless uses to track the status of customer orders, customer shipments, and deliveries. The warehouse workers use this application to check for outstanding orders, fulfill those orders, and then update the shipping status. The Shipify Web application contains some order processing logic, but it’s not a full order processing application. Its purpose is to demonstrate how you can integrate your Web applications with the Salesforce1 app.

Shipify is a Node.js 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 Shipify 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 Shipify. When you clone the application, it will create a directory called Shipify-Node-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 this command: git clone https://github.com/forcedotcom/Shipify-Node-App
  3. Navigate to the Shipify-Node-App directory. For example, if your Shipify-Node-App directory is located in C:\Users\yourname, you would enter this command: cd C:\Users\yourname\Shipify-Node-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. Your URL must begin with https://.
    We’ve created the Shipify 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.