Archive for May, 2009

First Flash10 P2P application unveiled

Sunday, May 31st, 2009

Today I’ve found FilesOverMiles: a website that allows the exchange of files between two users with a P2P connection using Flash.
This is possible thanks to the new Flash 10 P2P capability.

However, this P2P feature needs an initial handshake between the clients to start the connection, and it is done through a “rendezvous service”.
Since I didn’t know that Adobe publicly released a rendezvous service or specification, have the folks at FilesOverMiles reverse engineered the protocol?

Useful links:
Stratus: a rendezvous service from Adobe (beta)
Flash Collaboration Serivice: Adobe hosting service for RTMP/RTMFP
Real-Time Media Flow Protocol FAQ

rtmfp

RTMFP

RegExr – Write and share regular expressions

Wednesday, May 27th, 2009

Grant Skinner has just released RegExr: a wonderful tool for writing and sharing regular expressions.

Its main features are: show results as you type, contextual help, save and share your regexps.
It also runs as an Air application or directly from the website.

RegExr

RegExr

Using Zend_Tool in Eclipse

Friday, May 22nd, 2009

Zend_Tool is a command line tool released with the latest version of Zend Framework. It will jump-start the development automating some tasks like the creation of an empty project or of a controller class.

Other than from the command line, its possible to use Zend_Tool directly from Eclipse, lets see how.

Use Zend_Tool from Eclipse

Use Zend_Tool from Eclipse

First, download the framework and extract it.

I’ve had trouble with the full package of the 1.8.1 version, its seems to have a corrupted file in the tar.gz archive:
library\Zend\Tool\Framework\Loader\IncludePathLoader\RecursiveFilterIterator.php0000664
you can resolve the problem simply by renaming it to RecursiveFilterIterator.php

Now in Eclipse or Zend Studio for Eclipse, create and empty php project in a place accessible from your local webserver.

Now go to the “External tool” => “External Tools Configurations” panel to create a quick link to Zend_Tool.

NB: If you are using Zend Studio, you’ll have to remove the filter that hide “Program” item first:

In Zend Studio remove the filters that hide the Program item

In Zend Studio remove the filters that hide the Program item

Now you can create a new “external tool”:

  1. Click the new item button
  2. Give it a name
  3. Point it to the location of the bin\zf.bat file in your zend framework folder (where you have extracted it) using the Browse File System button
  4. Set the working directory to the location of your newly created php project with the Browse Workspace button
  5. In the arguments box insert ${string_prompt}. In this way Eclipse will prompt for input when you’ll start the tool.
Create an External Tool in Eclipse

Create an External Tool in Eclipse

Now in the “Enviroment” tab, configure two enviroment variable:

  • Path: to your php.exe folder
  • ZEND_TOOL_INCLUDE_PATH_PREPEND: to your Zend Framework library folder

In the Common tab check Display in favorites menu and in the “Refresh” tab check Refresh resources upon completion => The project containing the selected resource

Now you can run it, and in the dialog write show version. In the Eclipse console you’ll see the zend framework version.

Now you can experiment all the Zend_Tool commands of your choice:

create project [absolute path of your project]
create controller [name of the controller]

And don’t forget that you can create your own Zend_Tool command too.

Haxe on the iPhone

Friday, May 22nd, 2009

Great news for all the Haxe enthusiasts!

Haxe is powerful language similar to ActionScript 2, that can compile itself to Flash6/7/8/9/10 and translated to other languages like JavaScript, Php, NekoVM, C++.
This allows it to run virtually in every environment and client.

And now the good news: from today its possible to run Haxe programs on the iPhone!

Beware that this is only an early beta, but it’s already promising: thanks to the NME library, you’ll be able to use the Flash 9 drawing api on the iPhone, leveraging your Flash skills to make great iPhone games.

Haxe on the iPhone simulator

Haxe on the iPhone simulator

Build a Facebook application with Zend Framework

Sunday, May 10th, 2009

I've just finished a Facebook game, so here a quick tutorial on how to use Zend Framework to build a Facebook Application.

Facebook basics

You can integrate your application with facebook in two way: with an IFRAME (using XFBML) or with FBML.
(If you are already familiar with how a Facebook application work you can skip this step)

You can embed your content in a Facebook page through FBML or use an IFRAME

You can embed your content in a Facebook page through FBML or use an IFRAME

Build your website using FBML tags

Facebook will be a proxy between your server and the user's browser: it will load a page form your own server like a normal browser, parse it, "enhance" it with his components and then embed it in a Facebook page. You will use standard HTML tags plus FBML tags.

Pros:

  • You can use almost standard HTML, but with some other tags like: <fb:comments ... />, <fb:wall ... />
  • Feature rich: with a simple tag integrate wall, comments, tabs, dashboard and many others components (Complete list of facebook tags)
  • The url in the browser follow the navigation
  • Faster when you need data from facebook database (groups, friends, etc.)

Cons:

  • Slower page load times: restart the facebook chat at every request
  • Can't use standard JavaScript, only FBJS that's almost equals but your existing scripts and libraries won't work
  • Its losing ground: Facebook is trying to take IFRAME/XFBML on par

Embed using an IFRAME

Use an iframe: just build a standard web site and let FB embeds it in an iframe

Pros:

  • Better ajax support: you can use standard javascript, html and css
  • Easy to debug, its just a standard web site
  • Faster page load times

Cons:

  • Less features than with FBML (but XFBML is rapidly improving)
  • Slower when you need data from facebook database (eg: user's friends, groups, etc.)
  • The url in the browser doesn't follow the navigation
  • A bit more complex

We'll start with FBML since its easier to use and to find help about on the forums.
However take a look at XFBML in the future, since the Facebook team has really improved it recently and they are trying to push them on par.

See facebook wiki for further details on the differences between FMBL and IFRAME.

Integration

First of all, setup your FBML app and write down your api key and secret key.

Just follow the onscreen instructions or the wiki, but care attention to the Canvas Page URL:
it is something like: http://apps.facebook.com/*APPLICATION_NAME* and it is the url through the user can reach your app.

While the Canvas Callback URL (for example: http://www.yourserver.com/fbapp) its the address of your own web server, where you'll deploy your application.
With a dynamic dns service like dyndns you can create a domain name that map to the public address of your development machine, so that you can host your app on your dev machine while allowing Facebook to reach it.

Facebook will map every canvas url: http://apps.facebook.com/*APPLICATION_NAME*/foo to your callback url: http://www.yourserver.com/fbapp/foo

After you have done with the setup, you can use the official PHP client to interact with Facebook.

First, set up an empty Zend Framework project: you can use the Zend Studio for Eclipse wizard or the new Zend_Tool command line.

Use Zend Studio wizard to create an empty Zend Framewrok project

Use Zend Studio wizard to create an empty Zend Framewrok project

Then, download the client and copy the files in the php folder of the archive to the library/facebook folder of you Zend Framework project.

Now you can start using the client.

The Controller

To start, write in your controllers/IndexController.php:

PHP:
  1. require_once 'Zend/Controller/Action.php';
  2.  
  3. $err = error_reporting(E_ERROR);
  4. require_once 'facebook/facebook.php';
  5.  
  6. class IndexController extends Zend_Controller_Action {
  7.   public $apiKey = "22c...s05";
  8.   public $apiSecret = "df6...fb5";
  9.  
  10.   function indexAction()   {
  11.     $facebook = new Facebook($this->apiKey, $this->apiSecret);
  12.     $facebook->require_login();
  13.   }
  14. }

The line: $err = error_reporting(E_ERROR); is needed to hide some strange php notices from the facebook.php file.
In the line 12 we instantiate our client with the api key and secret taken during the application set up.
With the require_login method you can require the user to "add" your application.
Notice that many api features are available only if the user has added the application.

Then in your Zend actions you can call every standard method of the api with the
$facebook->api_client variable, for example:

PHP:
  1. $facebook->api_client->notifications_send(...); //Send a notify to a user
  2. $facebook->api_client->friends_getAppUsers(); //Get the friends of the current user that use your app
  3. //etc...

See the complete list of methods on the wiki and try them with the API console tool.

The View

Now that you know how to interact with Facebook, you can show a simple page containing the "Comments box" component.

In your layouts/main.phtml file write:

HTML:
  1. <?php echo $this->headScript() ?>
  2. <?php echo $this->headStyle() ?>
  3. <?php echo $this->layout()->nav ?>
  4.  
  5. <fb:title><?php echo $this->placeholder('title') ?></fb:title>
  6.  
  7. <?php echo $this->layout()->content ?>

As you can see we don't have to put the standard html opening tags in your layout (<html><head>...) since Facebook will load the page from your server and embed it in his own HTML canvas page.
We had also used our first FBML tag: <fb:title> to set the page title in the browser titlebar (we can't use the ZF headTitle() method here).

Now create a view script for your index action of the index controller views/scripts/index/index.phtml:

HTML:
  1. <?php $this->placeholder('title')->set('My First Facebook App!'); ?>
  2.  
  3. Hello <fb:profile-pic uid='<?php echo $this->fbUserId ?>' linked="true"/>!<br /> <br />
  4.  
  5. Something to say?
  6. <fb:comments xid="myCommentsBox" canpost="true" candelete="false" returnurl="http://apps.facebook.com/*APPLICATION_NAME*">
  7.   <fb:title>My first comment Box</fb:title>
  8. </fb:comments>

This will place a comment box in your page. Notice that the returnurl property need to point to your canvas url and not your callback url. (substitute *APPLICATION_NAME* with your canvas url)

To experiment with the various <fb:* > tags use the FBML console.

Now you can go to your canvas url to see the result:

Your first Facebook app with Zend Framework

Your first Facebook app with Zend Framework

In the HTML source of the canvas page you can see the original FBML used to generate the page and sometimes some errors/warnings.

Javascript and CSS

You can embed JavaScript in your FBML like in HTML, but only a special flavour of JavaScript: FBJS.
It is almost like the standard one, but there are some differences and your existing scripts and libraries won't work.

If you want to embed an external .js file, you'll have to specify the absolute path. Not only: Facebook will keep a copy of your script, even if you modify it, so you'll have to put a timestamp in the url to force a cache refresh.

For example, if you want to embed a script in your index.phtml:

HTML:
  1. <?php $this->headScript()->appendFile('http://www.yourserver.com/fbapp/scripts/js.js?v=' . filemtime('scripts/js.js')) ?>

In this way Facebook will load the script from the url: http://www.yourserver.com/fbapp/scripts/js.js?v=1231707071.
When you'll edit the file, the number will change and FB will reload it.

The same apply to CSS:

HTML:
  1. <?php $this->headStyle()->appendFile('http://www.yourserver.com/fbapp/styles/fbstyle.css?v=' . filemtime('scripts/js.js')) ?>

CSS in FB is almost standard, but use absolute urls.
Also be sure to write clean CSS, otherwise the Facebook parser will sometimes hang without and explanation.

Make things easier

We can use a base controller class.
In library/FacebookController.php write:

PHP:
  1. $err = error_reporting(E_ERROR);
  2. require_once 'facebook/facebook.php';
  3.  
  4. class FacebookController extends Zend_Controller_Action {
  5.   public $simulateFb = false;
  6.   public $useTestApplication = true;
  7.  
  8.   public $apiKey = "28c...b05";
  9.   public $apiSecret = "df6...fb5";
  10.   public $canvasUrl = "http://apps.facebook.com/myfbapp";
  11.  
  12.   public $testApiKey = '28c...b05';
  13.   public $testApiSecret = 'df6...3fb5';
  14.   public $testCanvasUrl = "http://apps.facebook.com/myfbapptest";
  15.  
  16.   public $fbUserId = "1234567";
  17.    
  18.   /**
  19.    * Facebook api
  20.    * @var Facebook
  21.    */
  22.   protected $facebook;
  23.    
  24.     public function init() {   
  25.         if($this->simulateFb) {
  26.             Zend_Session::start();
  27.             parent::init()
  28.         }
  29.         else {
  30.             if($this->useTestApplication) {
  31.                 $this->apiKey = $this->testApiKey;
  32.                 $this->apiSecret = $this->testApiSecret;
  33.                 $this->canvasUrl = $this->testCanvasUrl;
  34.             }
  35.  
  36.             $this->facebook = new Facebook($this->apiKey, $this->apiSecret);
  37.             $session_key = md5($this->facebook->api_client->session_key);
  38.             if(!Zend_Session::isStarted())  {
  39.                 Zend_Session::setId($session_key);
  40.                 Zend_Session::start();
  41.             }
  42.             parent::init()
  43.         }
  44.     }
  45.    
  46.     protected function requireLogin() {
  47.         if(!$this->simulateFb) {
  48.             $this->fbUserId = $this->facebook->require_login();
  49.         }
  50.     }
  51.    
  52.     protected function _redirect($url, array $options = array()) {
  53.         if(!$this->simulateFb) {
  54.            $this->facebook->redirect($this->canvasUrl . $url);
  55.         }
  56.         else {
  57.            parent::_redirect($url, $options);
  58.         }
  59.     }
  60. }
  61.  
  62. header( 'Content-Type: text/html; charset=UTF-8' );

In this way, our IndexController can be rewritten in this simplier way:

PHP:
  1. require_once 'Zend/Controller/Action.php';
  2.  
  3. class IndexController extends FacebookController  {
  4.  
  5.   function indexAction()   {
  6.     $this->requireLogin();
  7.     $this->view->fbUserId = $this->fbUserId;
  8.   }
  9. }

We had made IndexController inherit from FacebookController, and used its method requireLogin, without requiring to set up the Facebook client.

Not only:
with the $simulateFb variable set to true you can preview your site outside the Facebook canvas page without requiring the login (but you'll not see the FBML components).

With $useTestApplication you can use a different pair of api key and secret for the development, while keeping your main application safe. (you need to set up another app to obtain the keys)

Also the FacebookController will allow the standard Zend Framework _redirect method to work and will bind Zend session to the one of Facebook.

Finally in the last line we set up the charset encoding to be sure it will be the same of the Facebook canvas page.

Thats all:
now download the tutorial sources and start building your own Facebook app.

Anamanaguchi 8bit band

Sunday, May 10th, 2009

For all the 8bit lovers, visit the web site of this new york based band: Anamanaguchi and listen to their latest hit: Dawn Metropolis

Anamanaguchi 8bit band web site

Anamanaguchi 8bit band web site

Anamanaguchi is a four-piece group from New York City that combines guitars with the thick, electronic tones of a hacked Nintendo Entertainment System. With driving, dynamic and melodic tracks, they focus on creating sounds that seem bigger than their hardware

Google Chrome on TV

Sunday, May 10th, 2009

Google is exploring new ways to advertise its browser, releasing a YouTube channel with 11 shorts about Chrome, and its planning to advertise the browser with tv spots this weekend.