Join us for a live code demonstration of creating a PHP/Hack app and integrating it with Chatter via Force.com Canvas. We will provide a process and framework to rapidly prototype Canvas apps within minutes, rather than days or months. In the session, we'll show you how we built prototypes based on ideas from the Salesforce Ideas site such as real-time translation to voice memos. At the end of the session, we will provide the prototyping framework for download.

1. Rapid Prototyping Chatter with a
PHP/Hack Canvas App on Heroku
Rodney White
President, The Acceleration Agency
@rodney_white

2. The goal is to provide a process
and framework to rapidly prototype
Force.com Chatter Canvas apps within
minutes, not days or months

3. Agenda
1. Introduction
2. Rapid Prototyping Basics
3. Tech Basics
4. Time to code
5. Questions

4. Rodney White
Founder, The Acceleration Agency

5. The Acceleration Agency leverages
iterative philosophies and methodologies to
innovate new products, platforms, and services.
We are Designers.
We are Makers.
We are Learners.

6. to
a
video,
Rapid Prototyping Basics

7. 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

8. 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

9. to
a
video,
Chatter Basics

10. 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.

11. 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.

12. to
a
video,
Canvas App Basics

13. 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

14. Canvas App Basics
Setup -> App Setup -> Create -> Apps -> Connected App -> New Button
Enable
Publisher, Feed, and
VF page access
During Prototype
Allow
Full access
Enable
oAuth
Enable
Canvas
Enable
Signed Request

15. Canvas App Basics
Setup -> App Setup -> Create -> Apps -> Global Actions -> Actions -> New Action Button
Choose
Custom Canvas

16. Canvas App Basics
Setup -> App Setup -> Create -> Apps -> Global Actions -> Publisher Layouts -> Edit Action
Drag new action
to Publisher Actions

17. Canvas App Basics
New canvas app action is
now
available Chatter

18. Canvas App Basics
iFrame of the canvas app
in the publisher
iFrame of the canvas app
in the feed

19. to
a
video,
Heroku Basics

20. Heroku Basics
Heroku
is a cloud platform as a service
supporting several programming
languages. Heroku was acquired by
Salesforce.com in 2010.

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

22. Heroku Basics
Terminology
- 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.

23. Heroku Basics
As of May 2014, Heroku now offers an official PHP buildpack which supports:
Packaging via Composer
First class frameworks
- Symfony
- Laravel
Heroku XL Support
PHP 5.5 Support
HHVM/HACK 3.2 Support
NGINX Support
Apache Support

24. Heroku Basics
Enabling HHVM + NGINX
Available procfiles
heroku-hhvm-apache2
heroku-hhvm-nginx
heroku-php-apache2
heroku-php-nginx
Procfile example for nginx+hhvm
$ echo 'web: vendor/bin/heroku-hhvm-nginx' > Procfile

25. to
a
video,
Time To Code!

26. Time To Code!
Sample App 1
Hello World of Heroku

27. Time To Code!
Hello World on heroku
echo '<?php echo "Hello World!"; ?>' > index.php
echo '{}' > composer.json
git init
git add .
git commit -m "Initial import of Hello Heroku"
heroku create
git push heroku master
heroku open
http://taa.io/df14/app1/

28. Time To Code!
Hello World 1.1 on heroku (with HHVM/NGINX support)
This enables HHVM/HACK on heroku!
echo '<?php phpinfo();' > index.php
echo '{"require": {"php": "*","hhvm": ">= 3.1"}}' > composer.json
echo 'web: vendor/bin/heroku-hhvm-nginx' > Procfile
git init
git add .
git commit -m "Initial import of Hello Heroku"
heroku create
git push heroku master
heroku open
http://taa.io/df14/app1/

29. Time To Code!
Hello World 1.1
Let’s try it in the terminal
http://taa.io/df14/app1/

30. Time To Code!
Sample App 2
Parse Force.com signed requests
Proper Folder Structure

31. Time To Code!
Parsing Force.com signed requests
PHP/Hack on Heroku
Signed
Request
Force.com
Signed Request
http://taa.io/df14/app2/

32. 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/

33. 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 Structure
Public —static files (i.e. js/css files)
Handlers — i.e. controllers’ish
canvas — a handler for a canvas app
Views — presentation layer (mustache templates)
Webroot — entry point for web request
Nginx.conf — custom config for nginx
Procfile — custom config to enable nginx + hhvm
http://taa.io/df14/app2/

34. 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/

35. 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/

36. Time To Code!
Sample App 2
See it in Action
http://taa.io/df14/app2/

37. Time To Code!
Sample App 2
http://taa.io/df14/app2/

38. Time To Code!
Sample App 3
Let’s build something…A Babel Fish*
* Thanks Douglas Adams

39. 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

40. Time To Code!
Sample App 3 (A Babel Fish)
See it in Action

41. Time To Code!
Sample App 3 (A Babel Fish)
Words into the
babel fish
Auto Translated into
native language

42. Sample App 3
(A Babel Fish on a Visual Force Page)
Time To Code!
Subject of the Case
Auto Translated into
native language

43. Sample App 3 (A Babel Fish)
Want an installable AppExchange version?
http://taa.io/df14/translator/
Time To Code!

44. Time To Code!
Sample App 4
Let’s build something…Voice Memo
(Chrome and Firefox only)

45. 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

46. Time To Code!
Sample App 4 (Voice Memo)
See it in Action

47. Time To Code!
Sample App 4 (Voice Memo)
Record the Voice memo
with HTML5 only
(Chrome/Firefox only)
Audio Playback
in the feed

48. Sample App 4 (Voice Memo)
Want an installable AppExchange version?*
*?
http://taa.io/df14/voicememo/
*No commercial support
Time To Code!

49. Rodney White
Rodney White
@rodney_white
rodney@taa.io
Want the framework?
http://taa.io/df14/