Rapid Prototyping Chatter with a PHP/Hack Canvas App on Heroku
Download as PPTX, PDF4 likes1,364 views
This document outlines a framework for rapidly prototyping Force.com Chatter Canvas apps using PHP and Hack on Heroku, aiming to minimize development time and maximize learning. It provides an overview of rapid prototyping principles, integration with Salesforce, and practical coding examples, including setup procedures and sample applications. Additionally, it emphasizes iterative development methodologies and technical considerations for deploying applications on Heroku.
![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/](https://image.slidesharecdn.com/df14rapidprototyping2-141120230154-conversion-gate01/85/Rapid-Prototyping-Chatter-with-a-PHP-Hack-Canvas-App-on-Heroku-32-320.jpg)
![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/](https://image.slidesharecdn.com/df14rapidprototyping2-141120230154-conversion-gate01/85/Rapid-Prototyping-Chatter-with-a-PHP-Hack-Canvas-App-on-Heroku-34-320.jpg)
Rapid Prototyping Chatter with a PHP/Hack Canvas App on Heroku
- 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/