mercredi 17 février 2010

step by step: How to create a mobile website

Je viens de créer mon premier plugin symfony sfTeraWurflPlugin.
Il me semble un plugin très interressant surtout qu'il essaye d'integrer le Tera-wurfl au sein de symfony.

Objectif: Créer un site web consultable par les navigateurs Descktop (Firefox, IE, Opera...) mais aussi par les navigateurs des mobiles tel que iphone, Nokia et BalckBerry , en utilisant le Framework Symfony.

Remarque: Cet article n'est pas dédié au débutant en symfony !!!

Step I:
téléchargez la dernière version de symfony .

Suivez les instructions d'installation de symfony.

Step II:


symfony plugin:install sfTeraWurflPlugin

  • configurer le sfTeraWurflPlugin par vos paramètres en editant le fichier: TeraWurflConfig.php
/** Database Hostname
     * @var String
*/
public static $DB_HOST = "localhost"; //server name
/**
* Database User
* @var String
*/
public static $DB_USER = "terawurfl"; // mysql user
/**
* Database Password
* @var String
*/
public static $DB_PASS = 'terawurfladmin'; // mysql password
/**
* Database Name / Schema Name
* @var String
*/
public static $DB_SCHEMA = "terawurfl"; // mysql database
  • activez le module sfTeraWurflAdmin dans le fichier settings.yml de votre application:
enabled_modules: [sfTeraWurflAdmin]

vous pouvez maintenant explorer le sfTeraWurflAdmin en tapant:
http://myproject/frontend_dev.php/sfTeraWurflAdmin

Vous devez remplir votre BD en cliquant sur le lien : Update database from local file.
Pour être sûr que vous avez la bonne configuration, lancez dans un terminal:
    symfony terawurfl:check-config
Si tout est bien, Vous aurez un résultat semblable au:
    Checking TeraWurfl environnement ...
TeraWurfl Version Stable 2.0.0
*******************Checking PHP Configuration***********
PHP version: 5.2.10-2ubuntu6.4... [OK]
ZIP Archive... [OK]
Memory Limit 256M (via TeraWurflConfig::$MEMORY_LIMIT)
*******************File Permissions***********
Wurfl File [OK]
Patch Files:
/var/www/test/trunk/plugins/sfTeraWurflPlugin/lib/../data/.custom_web_patch.xml...[OK]
/var/www/test/trunk/plugins/sfTeraWurflPlugin/lib/../data/.web_browsers_patch.xml...[OK]
DATA Directory: /var/www/test/trunk/plugins/sfTeraWurflPlugin/lib/../data/...[OK]
********************* Database Settings************
Host: localhost
Username: terawurfl
Connecting to server....[OK]
DB Name (schema):terawurfl
TeraWurfl environnement checking [OK]

Maintenant que tout est bien, on passe à la chose la plus importante:

Step III

on commence par la configuration du project: ProjectConfiguration.class.php

ouvrez ce fichier, et ajouter la ligne suivante dans la methode setup :
$this->dispatcher->connect('request.filter_parameters', array($this, 'filterRequestParameters'));

Ensuite, ajouter la methode:

public function filterRequestParameters(sfEvent $event, $parameters)
{
$request = $event->getSubject();

$iphone = FALSE;
$ua = WurflSupport::getUserAgent();
$wurfl = new sfTeraWurfl();
$wurfl->getDeviceCapabilitiesFromAgent($ua, TRUE);
$cap = $wurfl->capabilities;
if ($cap ['product_info']['is_wireless_device'] == 1){
if (strpos ( $cap ['user_agent'], 'iPhone' ) !== false or strpos ( $cap ['user_agent'], 'iPod' ) !== false or strpos ( $cap ['user_agent'], 'Android' ) !== false) {
$device = 'iphone';
$iphone = TRUE;
} elseif ($cap ['product_info'] ['pointing_method'] == 'touchscreen') {
$device = 'touch';
} else {
$device = 'xhtmlmp';
}
$request->setRequestFormat($device);
}
if (!$iphone && $cap ['product_info'] ['pointing_method'] == 'touchscreen') {
$request->setRequestFormat("touch");
}
return $parameters;
}


cette méthode permet de filtrer la réponse du serveur : on renvoi la bonne page selon le client,
exemple: si le client est un iphone, on renoi la page dédié au iphone.

Jusqu'au maintenant, vous ne pouvez rien voir, patientez un peu et vous aurez ce que vous voulez.

enregistrez votre travail, et ouvrez le fichier: apps/frontend/config/factories.yml
remplacez l'entrée Request par:

request:
class: sfWebRequest
param:
logging: %SF_LOGGING_ENABLED%
path_info_array: SERVER
path_info_key: PATH_INFO
relative_url_root: ~
formats:
txt: text/plain
js: [application/javascript, application/x-javascript, text/javascript]
css: text/css
json: [application/json, application/x-json]
xml: [text/xml, application/xml, application/x-xml]
rdf: application/rdf+xml
atom: application/atom+xml
wml: text/vnd.wap.wml
iphone: [application/vnd.wap.xhtml+xml, application/xhtml+xml]
xhtmlmp: [application/vnd.wap.xhtml+xml, application/xhtml+xml]
touch: [application/vnd.wap.xhtml+xml, application/xhtml+xml]

Par cette nouvelle configuration du Request, nous informons symfony que si le client est un iphone, il doit renvoyer la template: *.iphone.php, si c'est un Touch, il doit renvoyer la template *.touch.php, et si c'est un mobile normal, il le renvoi la template *.xhtmlmp.php.

Rq: si c'est un client Descktop, symfony renvoi les templates *.php et pas les *.xxx.php o`u XXX peut être iphone, touch ou xhtmlmp!

Normallement, maintenant, si vous essayer d'ouvrir le site avec un navigateur autre qu'un navigateur Desctop, vous aurez des erreurs qui vous indiquent que la template *.xxx.php n'existe pas. Si vous ne voyez pas cette erreur, consultez le frontend_dev.log et vous trouverez cette erreur en fin du fichier.

Donc pour que pouvez le site sans erreur, vous devez créer 3 layouts autre que le layout.php:
* layout.iphone.php
* layout.touch.php
* layout.xhtmlmp.php

En plus, allez dans votre homepage, et ajouter 3 templates autres que indexSuccess.php:
* indexSuccess.iphone.php
* indexSuccess.touch.php
* indexSuccess.xhtmlmp.php

Maintenant essayez de nouveau d'ouvrir le site à l'aide d'un iphone ou un Touch ou votre mobile normal , nokia, vous aurez une erreur: le navigateur de mobile ne reconnait pas le fichier reçu !!

C'est normal, puisqu'on doit changer l'entête du fichier à un format que reconnait le mobile. le format le plus adapté est: le XHTML MP.

Donc editez les fichiers layout.xxx.php et modifier les comme suit:

<?xml version=\"1.0\" encoding=\"UTF-8\"? >
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">


A ce stade, vos mobiles, reconnaissent les fichiers reçus.