Rapid Prototyping Chatter with a PHP/Hack Canvas App on HerokuRodney White

President, The Acceleration Agency

@rodney_white

The goal is to provide a process and framework to rapidly prototype

Force.com Chatter Canvas apps within minutes, not days or months

Agenda

1. Introduction

2. Rapid Prototyping Basics

3. Tech Basics

4. Time to code

5. Questions

Rodney WhiteFounder, The Acceleration Agency

The Acceleration Agency leverages

iterative philosophies and methodologies to

innovate new products, platforms, and services.

We are Designers.

We are Makers.

We are Learners.

Use to introduce a

demo, video, Q&A, etc. Rapid Prototyping Basics

Rapid Prototyping Basics*Maximize the Rate of Learning by

Minimizing the time to try ideas - Tom Chi

Rule #1: Find the quickest path to the experience.Rule #2: Making is the best kind of thinking.Rule #3: Use materials that move at the speed of thought.Rule #4: Your user’s reality is the medium.Rule #5: Knowing is the enemy of learning.Rule #6: “The first draft of anything is shit.” - Ernest Hemingway

* Some rules are courtesy of Tom Chi. Please watch: https://www.youtube.com/watch?v=DkyMCCnNI3Q to learn more

Rapid Prototyping Basics*

Rate based goals

By the time you try 1 iteration

-> 5% chance of success

By the time you try 20 iterations

-> 64% chance of success

By the time you try 50 iterations

-> 92% chance of success

Use to introduce a

demo, video, Q&A, etc. Chatter Basics

Chatter Basics

Publisher

Chatter lets you create instant actions that are instantly mobile. For any business process. Expense reports, support cases, orders, and more. Customize actions for your company, and even integrate third party apps. So you can get more done in the feed from any device.

Chatter Basics

Feeds and Feed Items

Do everything in the feed. Keep up with critical projects, topics, and teams. Work together on sales opportunities, service cases, and marketing campaigns. Capture organizational knowledge in a single location. Drive progress from anywhere.

Use to introduce a

demo, video, Q&A, etc. Canvas App Basics

Canvas App Basics

With the force.com Canvas SDK, you can now integrate your Web app with the trusted salesforce.com platform: Your language, your code

- Salesforce

Canvas App Basics

Enable Publisher, Feed, and

VF page access

During Prototype

Allow Full access

Enable oAuth

Enable

Canvas Enable

Signed Request

Setup -> App Setup -> Create -> Apps -> Connected App -> New Button

Canvas App BasicsSetup -> App Setup -> Create -> Apps -> Global Actions -> Actions -> New Action Button

ChooseCustom Canvas

Canvas App BasicsSetup -> App Setup -> Create -> Apps -> Global Actions -> Publisher Layouts -> Edit Action

Drag new actionto Publisher Actions

Canvas App Basics

New canvas app action is now

available Chatter

Canvas App Basics

iFrame of the canvas app in the publisher

iFrame of the canvas app in the feed

Use to introduce a

demo, video, Q&A, etc. Heroku Basics

Heroku Basics

Heroku is a cloud platform as a service

supporting several programming languages. Heroku was acquired by

Salesforce.com in 2010.

Heroku Basics

Heroku With Heroku, Developers may now deploy distributed and scalable code in minutes.

Heroku BasicsTerminology

- Procfiles - named commands that you may want executed.- Applications - consist of your source code, a description of any dependencies,

and a Procfile.- Slug - is an application bundle of your source, fetched dependencies, the language

runtime, and compiled/generated output of the build system - ready for execution.- Buildpacks - lie behind the slug compilation process. Buildpacks take your

application, its dependencies, and the language runtime, and produce slugs.- Dynos - are isolated, virtualized Unix containers, that provide the environment

required to run an application.

Heroku BasicsAs of May 2014, Heroku now offers an official PHP buildpack which supports:

Packaging via ComposerFirst class frameworks

- Symfony - Laravel

Heroku XL SupportPHP 5.5 SupportHHVM/HACK 3.2 SupportNGINX SupportApache Support

Heroku BasicsEnabling HHVM + NGINX

Available procfilesheroku-hhvm-apache2 heroku-hhvm-nginxheroku-php-apache2heroku-php-nginx

Procfile example for nginx+hhvm$ echo 'web: vendor/bin/heroku-hhvm-nginx' > Procfile

Use to introduce a

demo, video, Q&A, etc. Time To Code!

Time To Code!

Sample App 1Hello World of Heroku

Time To Code!Hello World on heroku

echo '<?php echo "Hello World!"; ?>' > index.phpecho '{}' > composer.jsongit initgit add .git commit -m "Initial import of Hello Heroku"heroku create git push heroku masterheroku open

http://taa.io/df14/app1/

Time To Code!Hello World 1.1 on heroku (with HHVM/NGINX support)

This enables HHVM/HACK on heroku!

echo '<?php phpinfo();' > index.phpecho '{"require": {"php": "*","hhvm": ">= 3.1"}}' > composer.jsonecho 'web: vendor/bin/heroku-hhvm-nginx' > Procfilegit initgit add .git commit -m "Initial import of Hello Heroku"heroku create git push heroku masterheroku open

http://taa.io/df14/app1/

Time To Code!

Hello World 1.1

Let’s try it in the terminal

http://taa.io/df14/app1/

Time To Code!

Sample App 2Parse Force.com signed requests

Proper Folder Structure

Time To Code!Parsing Force.com signed requests

PHP/Hack on Heroku

Signed Request

Force.com Signed Request

http://taa.io/df14/app2/

Time To Code!Parsing Signed request from Force.com

// lifted from https://github.com/joshbirk/Canvas-PHP Canvas via SignedRequest/POST, the authentication should be passed via the signed_request header

$signedRequest = @$_REQUEST['signed_request']; $consumer_secret = @$_ENV['consumer_secret']; if ($signedRequest == null || $consumer_secret == null) { echo "Error: Signed Request or Consumer Secret not found"; exit; }

//decode the signedRequest $sep = strpos($signedRequest, '.'); $encodedSig = substr($signedRequest, 0, $sep); $encodedEnv = substr($signedRequest, $sep + 1); $calcedSig = base64_encode(hash_hmac("sha256", $encodedEnv, $consumer_secret, true)); if ($calcedSig != $encodedSig) { echo "Error: Signed Request Failed. Is the app in Canvas?"; exit; }

//decode the signedRequest $sep = strpos($signedRequest, '.'); $encodedSig = substr($signedRequest, 0, $sep); $encodedEnv = substr($signedRequest, $sep + 1);

//decode the signed request object $req = json_decode(base64_decode($encodedEnv));

//As of Spring '13: SignedRequest has a client object which holds the pertinent authentication info $access_token = $req->client->oauthToken; $instance_url = $req->client->instanceUrl;

$_SFDC_REQ = $req;

error_log(json_encode($_SFDC_REQ));

$location = @$req->context->environment->displayLocation;

http://taa.io/df14/app2/

Time To Code!Integrating with Force.com signed requests

- Using composer for package management- Configure NGINX via Procfile- Proper folder structure and router- Parse Force.com signed requests

Folder StructurePublic —static files (i.e. js/css files)Handlers — i.e. controllers’ish

canvas — a handler for a canvas appViews — presentation layer (mustache templates)Webroot — entry point for web requestNginx.conf — custom config for nginxProcfile — custom config to enable nginx + hhvm

http://taa.io/df14/app2/

Time To Code!

- A few local dev gotchas- Localhost mock for heroku's $_ENV config

- config.ini + parse_ini_file()

if (php_sapi_name() == 'cli-server') {$ini_array = @parse_ini_file(__DIR__."/../config.ini");

foreach($ini_array as $key => $value){$_ENV[$key] = $value;

}}

http://taa.io/df14/app2/

Time To Code!

- A few local dev gotchas- https://localhost/

- NodeJS + NPM to the rescue

var fs = require('fs');

var http = require(‘http'), httpProxy = require(‘http-proxy');

httpProxy.createServer({ target: { host: 'localhost', port: 80 }, ssl: { key: fs.readFileSync('keys/server.key', 'utf8'), cert: fs.readFileSync('keys/server.crt', 'utf8') }}).listen(443);

http://taa.io/df14/app2/

Time To Code!

Sample App 2See it in Action

http://taa.io/df14/app2/

Time To Code!Sample App 2

http://taa.io/df14/app2/

Time To Code!

Sample App 3Let’s build something…A Babel Fish*

* Thanks Douglas Adams

Time To Code!Let’s build something…A Babel Fish

Three parts to the Babel Fish chatter app- Publisher

- Text Input- Feed Item

- Dynamic translation- Integration with 3rd party api

- Google Translate API

* bonus: VisualForce integration with a Canvas App

Time To Code!

Sample App 3 (A Babel Fish)See it in Action

Time To Code!Sample App 3 (A Babel Fish)

Words into the babel fish

Auto Translated into native language

Sample App 3 (A Babel Fish on a Visual Force Page)

Time To Code!

Subject of the Case

Auto Translated into native language

Sample App 3 (A Babel Fish)Want an installable AppExchange version?

http://taa.io/df14/translator/

Time To Code!

Time To Code!

Sample App 4Let’s build something…Voice Memo

(Chrome and Firefox only)

Time To Code!Let’s build something…Voice Memos

Three parts to the VoiceMemo chatter app- Publisher

- HTML5 Audio Input- Feed Item

- Audio Playback- Integration with 3rd party persistence layer (S3)

- CDN playback

Time To Code!

Sample App 4 (Voice Memo)See it in Action

Time To Code!Sample App 4 (Voice Memo)

Record the Voice memo with HTML5

only(Chrome/Firefox only)

Audio Playback in the feed

Sample App 4 (Voice Memo)Want an installable AppExchange version?*

*?

http://taa.io/df14/voicememo/

*No commercial support

Time To Code!

Rodney WhiteRodney White@rodney_whiterodney@taa.io

http://taa.io/df14/

Want the framework?