Récapitulatif du projet

Le projet commença en Février 2011 à Toulouse, avec mon compère Régis Tarantini, durant la dernière année de nos études. Notre but au départ était de construire un réseau social Open Source, que chacun puisse installer sur son propre serveur, afin d’avoir la maîtrise totale de ses données.

Nous avons discuté du projet et avons rédigé les spécifications jusqu’en Juin, puis nous avons commencé le développement jusqu’à fin Août, période à laquelle j’ai dû déménager à Bruxelles.

A partir de là, l’avancement du projet aura avancé à tâtons, embûché de longues pauses malgré le recrutement d’un ami designer Jérôme Dieu, pour finalement se rendre à l’évidence que nous n’étions plus capables d’avancer sur le projet.

Nous y avons donc mis un terme en Novembre dernier, non sans quelques regrets.

Les raisons de l’échec

La distance était-elle un problème ? Je ne crois pas, même si ça n’a pas dû jouer en faveur de l’avancement du projet. Des projets Open Source fonctionnent très bien avec des gens aux quatre coins de la planète.

Cependant ce type de projet fonctionne souvent car au moins une des personnes y contribuant s’y consacre à plein temps, ce qui n’était pas notre cas. Nous travaillions sur notre temps personnel, et force est de constater que ce n’est pas chose facile, le travail à distance amenant moins de dynamique. La période coïncidait en même temps avec notre entrée sur le marché du travail, chacun a alors dû revoir ses priorités.

La deuxième raison concerne la taille du projet, il était clairement trop important pour un seul développeur. Nous avons bien sûr reçu quelques propositions de personnes souhaitant nous aider, mais, peut-être par fierté, nous avons refusé ces aides avant de sortir au moins la première version (qui n’aura jamais vu le jour). Peut-être était-ce là notre plus grande erreur…

Une troisième raison selon moi, est d’avoir communiqué trop tôt sur le projet avant de sortir une première version, en créant un site one page de teasing, un blog et une présence sur Facebook et Twitter. Inévitablement, malgré quelques retours positifs à la mise en ligne du site, l’attente des gens s’est essoufflée, et quelque part la nôtre aussi. Car il faut l’avouer, travailler aussi longtemps sur un projet sans en sortir la moindre version est assez frustrant.

Enfin, une quatrième raison personnelle qui m’a fait arrêter est le peu de retour budgétaire que l’on aurait pu en tirer, par rapport à notre investissement personnel. Outre la « gloire », nous cherchions évidemment à monétiser le projet afin de, pourquoi pas, créer une structure nous permettant d’en vivre, ce qui n’a malheureusement pas été possible.

J’en profite d’ailleurs pour tirer mon chapeau à tout ceux qui travaillent sur des projets Open Source sans gagner le moindre sous, car on a beau être des rêveurs et vouloir travailler pour la gloire, la réalité est bien là et nous aimons être récompensé pour notre travail (moi le premier !) ou au moins pouvoir en vivre.

C’est pour toutes ces raisons que nous avons décidé d’abandonner le projet à notre grand regret, après avoir pourtant essayé maintes fois d’avancer… Le manque de motivation nous aura finalement rattrapé.

Les points positifs

Comme dans tout projet, toute expérience, il y a eu cependant beaucoup d’apports positifs.

Le premier point est juste ce sentiment jouissif de créer son propre produit ! Je ne sais pas si vous l’avez déjà ressenti, mais c’est incroyablement boostant de travailler sur son propre projet, ses propres idées et de se sentir totalement responsable de l’avenir de celui-ci ! Rien que pour cette raison, ça valait la peine de vivre cette expérience et je recommencerais sans hésiter ! Le sentiment d’entreprendre j’imagine…

Le deuxième point qui me vient à l’esprit juste après créer son propre produit, est de pouvoir le faire en collaboration avec un ami. J’ai eu la chance de rencontrer un de mes meilleurs amis à Toulouse et j’ai d’excellents souvenirs de nos soirées passées à rédiger les spécifications du produit, de nos discussions enflammées dans les bouchons du périphérique toulousain, où l’on a l’impression que tout est possible, que chaque nouvelle idée apportée par l’un ou l’autre est génialissime et qu’il n’y a pas de limite à la créativité. On est jeunes, on est beaux (et ben quoi ?) et on a l’avenir devant nous ! Entre nous, qui n’a pas rêvé de créer une start-up à succès et d’aller à San Francisco, hein ? ;-)

Enfin, outre le fait de créer son propre produit, il y a le fait de créer le produit exactement comme on l’imagine, comme si on le faisait pour nous. C’était d’ailleurs mon cas, je n’ai pas de compte Facebook car je suis réticent à exposer ma vie privée à tout le monde, et c’est en partie pour cela que j’ai voulu créer ce réseau social Open Source où j’aurais eu toute confiance en l’endroit où seraient stockées mes données et qui pourrait en faire usage (c’est-à-dire personne).

Conclusion

Je suis finalement heureux d’avoir pu participer à ce projet, malgré ses hauts et ses bas.

J’en profite d’ailleurs pour remercier encore une fois mes compères de m’avoir permis de vivre cette aventure. J’en tire beaucoup de conclusions personnelles et professionnelles qui m’aideront à aller de l’avant et à défier de nouveaux challenges.

D’ailleurs je vous laisse, j’ai un nouveau projet qui m’appelle… ;-)

Fonctionnement

Comment mettre à jour les données d’une application en tâche de fond alors qu’Apple n’autorise pas ce comportement ? La solution réside dans l’utilisation de la géolocalisation et notamment une fonction permettant de détecter l’entrée ou la sortie d’une région géographique, ce que l’on appelle le geofencing apparu depuis iOS 5. Un évènement peut être levé automatiquement pour ces deux cas, ce qui nous permet ensuite de lancer une requête permettant la récupération de données.

Au niveau du fonctionnement, l’utilisateur devra accepter d’utiliser la géolocalisation et sauvegarder au moins un point d’intérêt à partir duquel la détection d’entrée ou de sortie de région sera mis en place. Un maximum de dix points d’intérêts simultanés est techniquement accepté par Apple.

A noter qu’un autre système fonctionne aussi, qui permet de détecter n’importe quel changement de position, mais il est beaucoup plus consommateur de batterie. L’inconvénient de cette méthode est que le GPS tourne en continue, alors que l’utilisation de la détection du changement de région n’est finalement pas si consommateur que çà.

Le seul désavantage de cette méthode est l’utilisation de la géolocalisation et de fait, son autorisation ou non par l’utilisateur.

Explication

L’ensemble du code concernant la géolocalisation doit être placé dans l’appDelegate pour fonctionner.

1. Ajout du Framework de géolocalisation

La première étape pour vous permettre d’utiliser la géolocalisation dans votre application est d’ajouter le Framework CoreLocation. Pour cela sélectionnez votre « Targets », cliquez sur l’onglet « Build Phases », dépliez « Link Binary With Libraries » et cliquez sur le bouton +.

Ensuite tapez « CoreLocation », sélectionnez le Framework correspondant et cliquez sur « Add ».

Puis, incluez le Framework dans le .h de l’appDelegate :

#import <CoreLocation/CoreLocation.h>

2. Ajout de l’objet CLLocationManager

Afin de pouvoir utiliser la géolocalisation, vous devez utiliser un objet CLLocationManager. Pour pouvoir utiliser le changement de régions, il doit être déclaré dans l’appDelegate. D’abord dans le .h :

@property (strong, nonatomic) CLLocationManager *locationManager;

Puis dans le .m :

@synthesize locationManager = _locationManager;

L’appDelegate doit également implémenter le delegate CLLocationManagerDelegate :

@interface AppDelegate : UIResponder <UIApplicationDelegate, CLLocationManagerDelegate>

Il faut maintenant instancier l’objet CLLocationManager dans le constructeur de l’appDelegate :

// Instanciate location manager
self.locationManager = [[CLLocationManager alloc] init];
self.locationManager.delegate = self;

// Define best location accuracy
self.locationManager.desiredAccuracy = kCLLocationAccuracyBest;

3. Ajouter une région à surveiller

Pour ajouter une région à surveiller, Apple fournit un exemple de code dans sa documentation qui convient très bien. Ajoutons donc cette méthode dans l’appDelegate :

- (BOOL)registerRegionWithCircularOverlay:(MKCircle *)overlay andIdentifier:(NSString *)identifier
{
    // Do not create regions if support is unavailable or disabled.
    if ( ![CLLocationManager regionMonitoringAvailable] || ![CLLocationManager regionMonitoringEnabled] )
        return NO;

    // If the radius is too large, registration fails automatically,
    // so clamp the radius to the max value.
    CLLocationDegrees radius = overlay.radius;

    if (radius > self.locationManager.maximumRegionMonitoringDistance)
        radius = self.locationManager.maximumRegionMonitoringDistance;

    // Create the region and start monitoring it.
    CLRegion* region = [[CLRegion alloc] initCircularRegionWithCenter:overlay.coordinate radius:radius identifier:identifier];
    [self.locationManager startMonitoringForRegion:region desiredAccuracy:kCLLocationAccuracyBest];

    return YES;
}

4. Surveiller les changements de régions

Avant d’appeler la méthode registerRegionWithCircularOverlay:andIdentifier: définit ci-dessus, il faut implémenter deux méthodes du CLLocationManagerDelegate, qui permettent respectivement de détecter l’entrée et la sortie d’une région :

- (void)locationManager:(CLLocationManager *)manager didEnterRegion:(CLRegion *)region
{
    NSLog(@"locationManager didEnterRegion for %@", region.identifier);
}

- (void)locationManager:(CLLocationManager *)manager didExitRegion:(CLRegion *)region
{
    NSLog(@"locationManager didExitRegion for %@", region.identifier);
}

C’est à l’intérieur de ces méthodes qu’il faudra lancer la requête, permettant de récupérer les derniers tweets par exemple.

La dernière chose à faire est d’ajouter une région à surveiller. Pour l’exemple nous l’ajouterons dans l’appDelegate au sein de la méthode application:didFinishLaunchingWithOptions: :

// Example: Apple location
CLLocationCoordinate2D coord;
coord.latitude =  37.332409;
coord.longitude = -122.030512

CLLocationDistance dist = 1.0;

MKCircle *circle = [MKCircle circleWithCenterCoordinate:coord radius:dist];

[self registerRegionWithCircularOverlay:circle andIdentifier:@"MyRegion"];

A tout moment, il est possible de consulter les régions à surveiller en mémoire (pour rappel, le SDK ne nous permet d’en enregistrer que dix simultanément).

NSLog(@"%@", self.locationManager.monitoredRegions);

5. Lancer une requête

Il ne reste plus qu’à lancer une requête Web à l’intérieur des méthodes didEnterRegion et / ou didExitRegion.

Tout dépend de la fonction de votre application, on peut imaginer que vous vouliez mettre votre flux d’actualités à jour par exemple.

6. Tester

Le simulateur nous permet de tester cette méthode, en allant dans le menu « Débogage », puis « Lieu ».

En partant de mon exemple où j’ai enregistré la position du siège d’Apple à Cupertino, pour déclencher la sortie de la région, il faut entrer un lieu personnalisé, par exemple 37 en latitude et -122 en longitude.
Puis pour déclencher l’entrée dans la région enregistrée, il faudra sélectionner « Apple » dans la liste des lieux qui sont disponibles au sein du menu.

Concernant les iDevices, cela ne fonctionne que sur un iPhone 4 ou supérieur ou iPad 2 ou supérieur qui soient des modèles 3G, puisque la manipulation requiert une puce GPS.

Je vous conseille d’enregistrer votre lieu courant, puis de tester en laissant d’abord votre application ouverte pour voir la distance qu’il est nécessaire de parcourir pour que l’évènement se déclenche, puis de refaire le test avec l’application fermée.

Lors de mes tests, j’ai dû marcher environ 150 mètres… ;-)

Conclusion

L’utilisation de cette méthode revient au final plus à un hack qu’à une prouesse technique. Malheureusement Apple n’autorisant pas les requêtes en tâches de fond, c’est pour l’instant le seul moyen connu d’y avoir recours. N’hésitez pas à réagir dans les commentaires sur vos propres tests (et votre distance parcourue… à pied bien sûr) !

Installation de Silex

Concernant l’installation de Silex, je vous renvoie vers mon précédent article traitant de l’installation de bibliothèque PHP avec Composer. La documentation officielle de Silex pourra aussi vous aider.

Ajout du composant Translation

L’ajout du composant Translation peut se faire de plusieurs manières, mais la plus simple et la plus rapide est sans nul doute d’utiliser Composer, en ajoutant cette ligne dans le fichier composer.json :

"symfony/translation": "2.1.*"

Lancez ensuite l’installation via la ligne de commande de Composer (voir mon article sur l’utilisation de Composer).

Une fois le composant Translation téléchargé, il faut s’y abonner dans le fichier index.php, en ajoutant ce code PHP :

$app->register(new Silex\Provider\TranslationServiceProvider(), array(
    'locale_fallback' => 'en',
));

Le paramètre locale_fallback est facultatif, il vous permet de définir la langue par défaut.

Création des fichiers de traduction

Plutôt que de mettre toutes les traductions en dur dans le fichier index.php, nous avons la possibilité de les externaliser dans des fichiers YAML.

A la suite du code ajouté précédemment dans le fichier index.php, ajoutez le code suivant :

use Symfony\Component\Translation\Loader\YamlFileLoader;

$app['translator'] = $app->share($app->extend('translator', function($translator, $app) {
    $translator->addLoader('yaml', new YamlFileLoader());

    // Ajout des fichiers de ressources de langue
    $translator->addResource('yaml', __DIR__.'/locales/en.yml', 'en');
    $translator->addResource('yaml', __DIR__.'/locales/fr.yml', 'fr');

    return $translator;
}));

Vous pouvez ajouter autant de fichier de langues que vous le souhaitez. Le contenu de ces fichiers doit respecter la syntaxe YAML (indentation à l’aide de deux espaces, pas de tabulation), ce qui ressemble à ceci :

cle: valeur
  cle_placeholder: valeur %placeholder%

La clé vous permettra d’appeler la traduction, avec la possibilité d’utiliser un placeholder si besoin. A noter qu’il est possible d’imbriquer des clés dans le fichier YAML, ce qui permet d’éviter de se répéter :

cle :
  sous_cle : ma valeur

Cela donnera à l’utilisation cle.sous_cle pour afficher ma valeur.

Gérer les URLs

Afin d’avoir de belles URLs, peu importe la langue sélectionnée, Silex incorpore tout ce qu’il faut.

1. Dans les contrôleurs

Prenons l’exemple de la page d’accueil, dont le contrôleur se présente comme ceci dans le fichier index.php :

$app->get('/{_locale}', function() use ($app) {
    return $app['twig']->render('homepage.twig');
})
->assert('_locale', 'fr|nl')
->value('_locale', 'fr')
->bind('homepage');

Plusieurs choses ici :

1. Le placeholder _locale est facultatif, si nous voulons y avoir accès, il est doit être placé en paramètre,
2. A l’aide de la méthode assert(), nous forçons le paramètre _locale à avoir la valeur soit fr, soit en,
3. La méthode value() permet de rendre le paramètre _locale facultatif en lui donnant la valeur fr si aucune valeur n’est passée. Ainsi nous pourrons accéder à l’URL de cette manière : http://monsite.com/fr et http://monsite.com,

Nous pouvons aussi bien sûr rallonger l’URL, ce qui pourrait donner :

$app->get('/{_locale}/contact', function() use ($app) { ... }

De cette manière, on pourrait accéder à l’URL http://monsite.com/fr/contact ou bien http://monsite.com/en/contact.

Nota : le fait d’accéder à une URL avec la langue passée dans l’URL modifie automatiquement la langue courante du site.

2. Dans les vues

Pour récupérer la langue courante dans une vue avec Twig, il suffit d’appeler le helper suivant : app.request.locale. Typiquement, pour l’URL de contact définie ci-dessus, cela donnerait :

<a href="{{ path('contact', {'_locale': app.request.locale}) }}"></a>

Nous passons la langue définie en paramètre au helper path() qui va générer l’URL définitive. Si nous voulions changer la langue courante, il suffirait de forcer le paramètre _locale, par exemple :

<a href="{{ path('contact', {'_locale': 'fr'}) }}"></a>

C’est ce que nous utiliserons typiquement comme lien pour changer la langue du site.

Accès à une traduction

Maintenant que nous avons défini la langue courante, nous pouvons accéder aux traductions, soit dans le contrôleur directement, soit la plupart du temps dans les vues (templates Twig).

1. Accéder à une traduction depuis un contrôleur

La syntaxe pour accéder à une traduction dans un contrôleur est la suivante :

$app['translator']->trans('cle');

Si nous voulons accéder à une traduction à l’aide d’un placeholder, il faut simplement rajouter un tableau contenant le ou les placeholders :

$app['translator']->trans('sous_cle', array('%name%' => 'Nicolas'));

2. Accéder à une traduction depuis un template Twig

La syntaxe pour accéder à une traduction dans une vue avec Twig est la suivante :

{{ app.translator.trans('cle') }}

Si nous voulons accéder à une traduction à l’aide d’un placeholder, il faut là aussi rajouter un tableau contenant le ou les placeholders :

{{ app.translator.trans('sous_cle', {'%name%' => 'Nicolas'}) }}

Générer les URLs selon la langue courante

Lorsque vous avez un site multi-langue et que vous souhaitez générer automatiquement l’URL de changement de langue avec la page courante, vous allez être confronté à un problème : comment modifier l’URL de la page courante pour lui passer la nouvelle langue ?

Sur la page de contact par exemple, ou sur n’importe quelle autre, nous souhaiterions avoir les URLs suivantes :

• http://monsite.com/fr/contact
• http://monsite.com/en/contact
• http://monsite.com/it/contact

Comment peut-on générer automatiquement ces URLs dans les vues ? Tout simplement en récupérant le nom de la route courante, pour pouvoir regénérer l’URL courante avec la langue de notre choix, ce qui donne :

<a href="{{ path(app.request.get('_route'), {'_locale': 'fr'}) }}">FR</a>

L’astuce réside dans l’appel du helper qui contient le nom de la route courante :

app.request.get('_route')

Conclusion

Comme vous avez pu le voir, l’intérêt des composants dans Symfony2 est réel. Nous avons pu intégrer le composant Translation très facilement, que ce soit dans les contrôleurs ou les vues avec le moteur de template Twig.

Et vous, utilisez-vous les composants de Symfony2 dans vos projets ?

Si vous voulez en savoir plus à propos du composant Translation, vous pouvez consulter les documentations de Symfony2 et Silex à ce sujet :

• http://symfony.com/doc/current/book/translation.html
• http://silex.sensiolabs.org/doc/providers/translation.html

Installation

La première chose à faire est de télécharger le fichier composer.phar qui permet ensuite de télécharger les bibliothèques PHP. Ouvrez le Terminal, placez-vous dans le dossier de votre projet où les fichiers sources seront téléchargés et tapez la ligne de commande suivante :

curl -s http://getcomposer.org/installer | php

Pour les utilisateurs de Windows, si Curl n’est pas installé sur votre machine, vous trouverez les instructions d’installation ici (en anglais) : http://getcomposer.org/download/.

La solution la plus simple est de taper la ligne de commande suivante dans le terminal, qui a pour effet de vérifier la configuration du fichier php.ini et de lancer le téléchargement du fichier composer.phar si tout va bien :

php -r "eval('?>'.file_get_contents('https://getcomposer.org/installer'));"

Cependant quelques erreurs peuvent apparaître à ce niveau-ci :

1. « ‘php’ n’est pas reconnu en tant que commande interne ou externe, un programme exécutable ou un fichier de commandes. » : dans la ligne de commande, il faut spécifier le chemin complet du dossier où est installé PHP sur votre machine. Par exemple :

   C:\wamp\bin\php\php5.3.13\php -r "eval('?>'.file_get_contents('https://getcomposer.org/installer'));"

2. « PHP Warning: file_get_contents(): Unable to find the wrapper « https » – did you forget to enable it when you configured PHP? » : l’option SSL n’est pas activé dans votre fichier php.ini (situé dans le répertoire d’installation de PHP). Il suffit de l’ouvrir puis de retirer le point virgule devant cette ligne, d’enregistrer le fichier, puis de redémarrer WAMP :

   extension=php_openssl.dll

Configuration

Il est important de noter que vous aurez besoin du fichier composer.phar pour chaque projet avec lequel vous utiliserez Composer et que celui-ci doit se placer à la racine de vos projets.

Il faut maintenant configurer la liste des bibliothèques que nous voulons télécharger. Cela se fait par la création d’un fichier qui doit être nommé composer.json et qui doit contenir l’ensemble des bibliothèques PHP que nous souhaitons installer. On peut par exemple vouloir installer le projet Open Source Silex :

{
    "minimum-stability": "dev",
    "require": {
        "silex/silex": "1.0.*"
    }
}

Téléchargement des bibliothèques

Maintenant que nous avons téléchargé et configuré Composer, nous n’avons plus qu’à lancer le téléchargement des différentes bibliothèques. Pour cela, il suffit de taper la ligne de commande suivante :

php composer.phar install

Par la suite, si une ou plusieurs mises à jour de bibliothèques sont disponibles, il est possible de les mettre à jour en tapant la ligne de commande suivante :

php composer.phar update

Les bibliothèques sont téléchargées dans un dossier vendor automatiquement créé à la racine du projet, avec en plus un fichier autoload.php à inclure dans le fichier source principal de votre projet, qui permet de charger automatiquement chaque classe se trouvant dans le dossier vendor.

Enfin, un fichier composer.lock est également créé, il contient la liste des bibliothèques installées ainsi que leur version.

Gestion des erreurs

Lors de l’installation de Composer, vous pouvez être confronté à deux erreurs :

1. Git doit être installé sur votre ordinateur : ce problème est simple à régler, il suffit de télécharger le logiciel Git à cette adresse : http://git-scm.com/ et de l’installer.
2. La variable detect_unicode du php.ini doit être à Off : pour régler ce problème, il faut aller dans le fichier php.ini et affecter la valeur Off à la variable detect_unicode.

Nota : si vous êtes sous OS X et que vous utilisez MAMP, le fait de modifier le fichier php.ini dans le répertoire suivant ne résoudra en rien votre problème :

/Applications/MAMP/bin/php/php5.x.x/conf/php.ini

La solution est de créer un fichier php.ini dans le répertoire /etc. Il vous faudra alors les droits administrateurs pour pouvoir enregistrer vos modifications. Le plus simple est de taper la commande suivante :

sudo nano /etc/php.ini

Entrez votre mot de passe, puis écrivez dans le fichier php.ini :

detect_unicode = Off

Enregistrez, redémarrez MAMP et le tour est joué ! ;-)

Exemple d’utilisation : création d’un projet Silex

De gros projets sont maintenant gérés par Composer, tels que Symfony2 ou encore Silex. Voici un exemple d’installation d’un nouveau projet Silex :

1. Création d’un nouveau dossier

Commençons par créer un nouveau dossier qui contiendra notre nouveau projet, appelons-le SilexProject.

2. Téléchargement du fichier composer.phar

Ensuite, nous devons télécharger le fichier composer.phar dans ce dossier, à l’aide de la ligne de commande suivante :

curl -s http://getcomposer.org/installer | php

3. Création du fichier composer.json

Créons maintenant notre fichier nommé composer.json qui contiendra les bibliothèques que nous voulons télécharger :

{
    "minimum-stability": "dev",
    "require": {
        "silex/silex": "1.0.*",
        "symfony/translation": "2.1.*",
        "symfony/config": "2.1.*",
        "symfony/yaml": "2.1.*",
        "twig/twig": ">=1.8,<2.0-dev"
    }
}

J’ai rajouté le composant Translation permettant de gérer l’internationalisation d’un projet, ainsi que le moteur de template Twig.

4. Téléchargement des bibliothèques

Lançons maintenant le téléchargement des bibliothèques grâce à la ligne de commande suivante dans le Terminal (en s’étant au préalable déplacé dans le dossier du projet) :

php composer.phar install

Nota : à cette étape, il est possible que vous rencontriez un souci avec Composer si vous étiez parti d’une version de Silex directement téléchargée à partir de leur site. Il est conseillé de partir d’un projet vierge comme je le fais pour éviter tout problème.

5. Création du fichier de bootstrap Silex

Tout est prêt, nous n’avons plus qu’à créer notre fichier boostrap pour faire fonctionner Silex dans une page Web. Pour cela créons un fichier index.php, dans un sous-dossier appelé web :

<?php

// Inclusion du fichier autoload.php permettant de charger automatiquement les bibliothèques
require_once __DIR__.'/../vendor/autoload.php';

$app = new Silex\Application();

$app->get('/', function () use ($app) {
    return 'Hello world!';
});

$app->run();

Notre application est fonctionnelle ! :-)

Conclusion

Composer est un outil très pratique, qui vous permet d’installer votre environnement de travail en très peu de temps et en vous garantissant l’intégrité des bibliothèques téléchargées, grâce à la gestion des dépendances. Et vous, utilisez-vous Composer ?

Etude de cas : gestionnaire de tâches

Prenons le cas simple d’un gestionnaire de tâches (*). Nous avons une première vue nommée ListTaskViewController qui contient une liste des tâches, et une seconde vue nommée AddTaskViewController permettant d’ajouter une tâche dans cette liste.

La question que l’on se pose est : comment mettre à jour le UITableView de la première vue suite à l’ajout d’une tâche dans la seconde vue ?

Fonctionnement des vues

Dans notre exemple, la première vue qui contient une liste des tâches possède un bouton permettant d’ajouter une tâche. Au clic sur celui-ci, la première vue instancie et affiche la seconde vue qui contient le formulaire d’ajout d’une tâche.

C’est donc la première vue qui interagit sur la seconde et non pas l’inverse. Or comment la seconde vue peut avertir la première vue qu’une nouvelle tâche vient d’être ajoutée ?

L’objet delegate

Plusieurs solutions plus ou moins catholiques sont possibles, mais la plus respectueuse des standards est sans nul doute l’utilisation d’un delegate, qui va gérer l’évènement d’ajout d’une tâche, pour prévenir la première vue de se mettre à jour et ainsi afficher la nouvelle tâche fraichement ajoutée.

Qu’est-ce qu’un delegate ? C’est tout simplement une instance de classe. Dans notre exemple, l’instance de la classe ListTaskViewController sera contenu dans une propriété de la classe AddTaskViewController que l’on appellera delegate.

Notion de POO : l’interface

Avant d’aller plus loin et de vous parler du protocol, il est nécessaire de connaître et de comprendre une notion très importante quand on parle de programmation orientée objet : l’interface.

Une interface est un ensemble de déclarations de méthodes publiques ou privés. Lorsqu’une classe implémente une interface, elle doit implémenter ses méthodes.

L’équivalent Objective-C : le protocol

L’équivalent d’une interface en Objective-C est-ce qu’on appelle un protocol. Attention, le protocol rajoute une option supplémentaire : alors que les méthodes d’interfaces sont normalement obligatoires à implémenter, il est possible de spécifier des méthodes optionnels en Objective-C.

Mise en pratique

Le but va donc être de suivre le processus suivant :

1. Créer un protocol dans la classe AddTaskViewController, contenant une méthode qui indiquera qu’une tâche vient d’être ajouté,
2. Appeler la méthode du protocol dans la classe AddTaskViewController, lorsque l’utilisateur ajoutera une nouvelle tâche,
3. Implémenter ce protocol dans la classe ListTaskViewController, ce qui nous permettra d’être avertit lorsque sa méthode sera appelée.

Un bon exemple valant mieux qu’un long discours, mettons cela en pratique.

1. Déclaration du protocol dans la classe AddTaskViewController

#import 

// Déclaration du protocol en haut de la classe,
// pour rendre son type accessible dans la propriété delegate
@protocol AddTaskDelegate;

@interface AddTaskViewController : UIViewController {
    // ...
}

// Déclaration de la propriété delegate,
// qui est un objet devant implémenter le protocol AddTaskDelegate
@property (nonatomic, assign) id<AddTaskDelegate> delegate;

// ...

@end

///////////////////////////////////////////////////////////////////

// Déclaration du protocol
@protocol AddTaskDelegate <NSObject>

// Indique que la méthode doit obligatoirement être implémentée
// (si elle peut être implémentée, le mot clé est @optional)
@required

// Méthode appelée lors de l'ajout d'une tâche,
// son nom est passé en paramètre
- (void)taskDidAdd:(NSString *)name;

@end

2. Appel de la méthode du protocol dans la classe AddTaskViewController

- (IBAction)add:(id)sender
{
    // ...

    // On vérifie que la méthode du protocol est bien implémentée
    // dans l'objet delegate (ici ListTaskViewController)
    if ([_delegate respondsToSelector:@selector(taskDidAdd:)]) {
        // La méthode est appelée avec le nom de la tâche en paramètre
        [_delegate taskDidAdd:_nameTextField.text];
    }

    // ...
}

3. Implémentation du protocol dans la classe ListTaskViewController

Dans le fichier .h

@interface ListTaskViewController : UIViewController
    <UITableViewDataSource, AddTaskDelegate> {
    // ...
}

Dans fichier le .m

// Instanciation de l'objet AddTaskViewController au clic
// sur le bouton d'ajout d'une tâche
- (IBAction)addTask:(id)sender
{
    AddTaskViewController *viewController = [[AddTaskViewController alloc] initWithNibName:@"AddTaskViewController" bundle:[NSBundle mainBundle]];
    viewController.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    
    // Nous indiquons que la classe appelante est le delegate de la classe appelée
    viewController.delegate = self;
    
    [self presentModalViewController:viewController animated:YES];
    [viewController release];
}

// Implémentation de la méthode du protocol, qui sera appelée
// lorsque l'utilisateur ajoutera une tâche
- (void)taskDidAdd:(NSString *)name
{
    // On récupère la tâche ajoutée
    // et on peut l'insérer dans le UITableView
}

Lien avec le Design Pattern Observateur

On peut remarquer la similitude de ce Design Pattern avec le Design Pattern Observateur, qui permet d’avertir une vue lorsque son modèle, auquel elle est abonné, se met à jour.

Conclusion

Ce Design Pattern est très utilisé dans le SDK iOS, on peut notamment le retrouver dans des objets tels que le UITableView ou le UITextField.

C’est une bonne pratique à mettre en place dans vos projets afin d’éviter de trop coupler vos objets et ainsi les rendre réutilisables, en effet vous noterez que je peux parfaitement réutiliser ma classe AddTaskViewController, puisqu’elle n’est absolument pas liée à la classe ListTaskViewController.

* Les sources du projet sont disponibles ici.

L’existant

La méthode la plus courante pour gérer ce problème était jusqu’à il y a peu de régler les paramètres de l’application Facebook en activant le champ offline_access, ce qui avait pour effet de renvoyer un access token illimité dans le temps.

Or cette option sera supprimée le 5 Juillet prochain et est d’ores et déjà dépréciée, Facebook a donc mis en place une nouvelle méthode.

Exchange access token

La première chose à savoir est que lors de la connexion classique, un access token est toujours retourné, mais il n’est désormais valide qu’une à deux heures.

Il est donc nécessaire de faire appel à la nouvelle méthode mise en place par Facebook, qui se nomme exchange_access_token. Elle prend en paramètre l’access token courant et en retourne un nouveau, qui a une durée de vie de 60 jours.

A noter que cette méthode renvoie un seul nouvel access token par jour, si vous appelez plusieurs fois cette méthode le même jour, le nouvel access token sera retourné uniquement la première fois. Ensuite ce sera le même access token qui sera retourné.

Utilisation

Afin de gérer au mieux toutes les situations possibles, il est conseillé d’appeler cette méthode d’échange d’access token aussi souvent que possible. Cependant en sachant qu’elle ne retourne qu’un seul nouvel access token par jour, il n’est pas utile de l’appeler avant chaque requête (même si c’est tout à fait possible), car cela ajoute une requête supplémentaire à chaque fois, et donc un temps de chargement légèrement plus long.

Le conseil que je donne est de n’appeler cette méthode qu’une seule fois par jour en enregistrant une valeur dans l’Isolated Storage ou en base de données, qui indique si la méthode a déjà été appelé aujourd’hui ou non.

Mise en place

Voici un exemple de code C# expliquant l’appel à cette méthode dans une application Windows Phone. J’utilise la bibliothèque externe Facebook C# SDK, qui peut facilement être installé à l’aide de l’installateur de package Nuget dont j’ai parlé dans un précédent article. Si vous voulez en savoir plus sur l’utilisation de cette bibliothèque, je vous recommande ce tutoriel sur le Site du Zéro.

private void exchangeToken()
{
    FacebookClient client = new FacebookClient();

    // Affectation de l'access token existant
    client.AccessToken = oldAccessToken; 

    client.GetCompleted += facebookClient_GetCompleted; 

    // Préparation de la requête d'échange d'access token
    Dictionary parameters = new Dictionary();
    parameters["client_id"] = "votre_client_id";
    parameters["client_secret"] = "votre_client_secret";
    parameters["grant_type"] = "fb_exchange_token";
    parameters["fb_exchange_token"] = client.AccessToken; 

    client.GetAsync("https://graph.facebook.com/oauth/access_token", parameters, "exchange_token");
}

private void facebookClient_GetCompleted(object sender, FacebookApiEventArgs e)
{
    if (e.Error == null)
    {
        if ((string)e.UserState == "exchange_token")
        {
            JsonObject data = (JsonObject)e.GetResultData(); 

            // Enregistrement du nouvel access token
            string newAccessToken = (string)data["access_token"]; 

            Dispatcher.BeginInvoke(() =>
                MessageBox.Show("Votre compte Facebook a bien été configuré.", "Félicitations !", MessageBoxButton.OK)
            );
        }
    }
    else
    {
        Dispatcher.BeginInvoke(() =>
            MessageBox.Show("Erreur dans la configuration de votre compte Facebook.", "Attention !", MessageBoxButton.OK)
        );
    }
}

Conclusion

Ce nouveau fonctionnement permet donc de déconnecter l’utilisateur de Facebook uniquement si cela fait plus de deux mois qu’il n’a pas utilisé l’application Windows Phone (sauf exceptions), ce qui est finalement assez logique.

De base, cet effet n’est pas disponible dans le SDK Windows Phone 7.1, cependant Microsoft a créé une bibliothèque externe permettant de l’utiliser facilement.

Installation du Silverlight toolkit pour Windows Phone

La première étape est donc d’installer la bibliothèque externe permettant de mettre en œuvre cet effet, elle s’appelle Silverlight for Windows Phone Toolkit. Pour l’installer je vous redirige vers mon précédent article portant sur l’installation de bibliothèque externe grâce à Nuget.

Utilisation de l’effet

Une fois la bibliothèque installée, l’effet peut s’utiliser soit en XAML soit en code behind (C# ou VB .Net). Le plus simple est d’utiliser le XAML, pour cela il faut ajouter la référence du namespace suivante en haut de chaque fichier .xaml où l’on utilisera l’effet :

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Il suffit ensuite d’indiquer les contrôles sur lesquels nous voulons utiliser l’effet :

<ListBox ItemsSource="{Binding Items}" toolkit:TiltEffect.IsTiltEnabled="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" />
                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Ou encore :

<Button Text="Hello, world!" toolkit:TiltEffect.IsTiltEnabled="True" />

Il est même possible de l’utiliser sur tous les contrôles de la page à la fois :

<phone:PhoneApplicationPage
    // ...
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    // ...
    toolkit:TiltEffect.IsTiltEnabled="True">

A noter qu’une option permettant de supprimer l’effet Tilt sur un contrôle est aussi disponible. Cela est utile dans le cas où nous affectons l’effet à toute la page et où nous ne voulons pas que tous les éléments en bénéficient. Ou encore dans le cas d’une ListBox qui contient une Image et un TextBlock par exemple, et où nous voulons seulement affecter l’effet au clic sur le TextBlock :

<ListBox ItemsSource="{Binding Items}" toolkit:TiltEffect.IsTiltEnabled="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Source="{Binding Image}" toolkit:TiltEffect.SuppressTilt="True" />
                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Animer tous les contrôles

Par défaut, seuls les contrôles Button et ListBox peuvent bénéficier de cet effet. Pour affecter l’effet aux autres contrôles, comme la CheckBox ou le RadioButton par exemple, il faut les autoriser dans le code behind de cette manière :

public MainPage()
{
    InitializeComponent();

    TiltEffect.TiltableItems.Add(typeof(RadioButton));
}

Et après ?

La bibliothèque de Microsoft Silverlight for Windows Phone Toolkit apporte bien d’autres possibilités, telles que les animations ou les transitions entre les pages. Et leur utilisation est aussi simple que pour l’effet Tilt.

Installation

Le plugin Nuget est disponible à cette adresse : http://nuget.codeplex.com/. Il suffit d’exécuter le fichier téléchargé pour que celui-ci s’installe. Un redémarrage de Visual Studio est ensuite nécessaire.

Utilisation

Une fois Nuget installé, il faut créer un nouveau projet ou ouvrir un projet existant pour en profiter. Un nouveau menu contextuel est alors disponible au clic droit sur la solution.

Au clic sur  « Manage Nuget Packages », le plugin s’ouvre dans une popup, faisant apparaître les bibliothèques les plus téléchargées. Un moteur de recherche est également disponible, faisons un test en recherchant le Silverlight for Windows Phone Toolkit.

Il suffit ensuite de cliquer sur « Install » pour que la bibliothèque s’installe automatiquement dans la solution, en ajoutant les références nécessaires. Dans la partie gauche, le menu « Updates » permet de mettre à jour automatiquement les différentes bibliothèques installés.

Grâce à Nuget, vous pouvez dorénavant installer vos bibliothèques .Net très rapidement et très simplement, directement à partir de Visual Studio.

Si vous voulez aller plus loin, une documentation du projet est disponible à cette adresse : http://docs.nuget.org/.

Avant, j’utilisais une manière peu sécurisée pour y arriver : je créais une catégorie sur l’objet UINavigationBar que je plaçais dans mon fichier AppDelegate afin qu’il soit pris en compte par tous les objets UINavigationBar de mon application. Ca fonctionnait bien dans le simulateur, mais pas toujours sur un iDevice.

@implementation UINavigationBar (MyNavigationBar)

- (void)drawRect:(CGRect)rect {
    UIImage *myBackgroundImage = [UIImage imageNamed:@"navBar.png"];
    [myBackgroundImage drawInRect:rect];
}

@end

Les best-practices

Récemment, je suis tombé sur une vidéo d’Apple réalisée à la WWDC 2011 intitulé Improving The Stability Of Your Apps (*), qui explique justement que le hack que j’utilisais est incorrect et qu’il existe deux manières justes de le faire.

Hériter de l’objet UINavigationBar

La première solution est de créer une classe héritant de l’objet UINavigationBar en surchargeant la méthode drawRect :

@implementation MyNavigationBar

- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"navBar.png"];
    [image drawInRect:rect];
}

@end

Puis dans le(s) fichier(s) .xib où vous voulez modifier l’apparence de la barre de navigation, sélectionnez l’objet graphique UINavigationBar en question et cliquez sur l’onglet Identity Inspector dans la colonne de droite. Sous l’onglet Customer Class, renseignez le champ Class par le nom de notre nouvelle classe, soit : MyNavigationBar.

L’avantage de cette solution est qu’elle fonctionne avec iOS 4.

Utiliser la fonction d’iOS 5

Avec l’arrivée d’iOS 5, Apple a finalement décidé d’intégrer nativement la possibilité de customiser l’objet UINavigationBar très simplement.

Cela se fait à l’aide de la méthode setBackgroundImage:forBarMetrics de l’objet UINavigationBar. Pour son fonctionnement, je vous renvoie à la documentation d’Apple, cela n’étant pas le but de cet article.

L’héritage d’un objet UINavigationBar en pratique

L’héritage de l’objet UINavigationBar fonctionne bien et est très simple à mettre en oeuvre, surtout si vous ajoutez vous-même un objet graphique UINavigationBar dans votre fichier .xib.

Mais qu’en est-il lorsque vous voulez utiliser cette méthode avec un UISplitViewController par exemple ? Car dans ce cas-là la barre de navigation n’est pas visible graphiquement.

Il existe une petite astuce toute simple pour réussir à mettre en place ce système dans le fichier .xib. Il suffit simplement d’étirer la barre de gauche qui contient le File’s owner, le First Responder et vos différentes vues, afin de voir apparaître l’arborescence de vos objets graphiques.

Dépliez alors votre objet UISplitViewController autant de fois que possible pour finalement faire apparaître l’objet UINavigationBar à l’intérieur de celui-ci. Il suffit ensuite de modifier sa propriété Class dans la colonne Identity Inspector comme indiqué plus haut dans l’article.

Compilez, et admirez ! ;-)

* Beaucoup de vidéos sont maintenant disponible à n’importe quel utilisateur ayant un compte Apple Developer, payant ou non.

Un marketing nommé Apple

Qui peut résister à un marketing aussi bien calibré que celui d’Apple (à part les anti-Apple) ? Tout est prévu pour nous faire craquer, du design de l’objet en lui-même, en passant par la boîte le contenant, sa médiatisation, sa publicité, ses fameuses Keynotes. Bref tout autour de l’iPad est fait pour donner envie de l’acheter. Seulement parfois, ça ne suffit pas.

L’iPad : pour qui ?

A première vue, je dirais que le public de l’iPad sont les personnes agées, les personnes n’étant pas habituées à un ordinateur et tous ceux qui n’ont pas encore d’ordinateurs chez eux. Pour toutes ces personnes, l’achat d’un iPad me semble justifié :

• Facilité d’utilisation de l’appareil, même pour un novice,
• Prix moindre pour faire le stricte nécessaire sur un ordinateur (photos, vidéos, Web, Email). Il y a les netbooks qui sont moins chers pour plus de fonctionnalités, mais soyons francs, un netbook c’est nul.

Or je suis Ingénieur Informatique. Besoin d’un ordinateur ? J’en ai déjà un évidemment. Besoin d’un Smartphone éventuellement pour consulter ses mails, jouer à Fruits Ninja ? J’en ai un aussi. Quelle est donc la place pour un iPad chez moi ? Entre le Smartphone et l’ordinateur, comme Steve Jobs l’avait présenté lors de sa Keynote ? Non.

En fait pour un développeur informatique, la réponse est simple : l’iPad ne sert à rien ! Oui ça frustre, oui j’ai longtemps chercher une excuse pour m’en acheter un, mais rien à faire. Je n’en ai juste aucune utilité.

Ah si, j’ai trouvé une raison !

La seule et selon moi, bonne raison de m’acheter un iPad, est que je suis justement développeur pour iPhone / iPad. J’ai donc trouvé une bonne raison : mon métier !

En fait, je me suis déjà acheté un iPad 2… Alors mon point de vue a-t-il changé sur son utilité après m’en être servi au quotidien ?

Ceci est une révolution

La première et la plus importante des utilités pour moi est le test d’applications que j’ai développé sur un matériel réel.

La seconde tout aussi importante, est de pouvoir installer et essayer plusieurs applications de l’AppStore et ainsi voir ce qui existe sur le marché des application mobiles. De la veille technologique en quelque sorte.

Soit. Ces deux premières utilisations coulent de source par rapport à mon métier. Mais à part çà, quel est l’apport d’un iPad par rapport à un ordinateur ou à un Smartphone ?

Et bien je verrais deux principales utilités :

• 1/ J’ai enfin assouvi mon envie, j’ai fait mon bon consommateur et je me suis acheté cet objet tant désiré ! Ca fait du bien…
• 2/ Celle-là est juste énorme : je peux lire mes news, avec mes doigts, vautrés dans mon lit ou mon canapé, sur le ventre ou sur le dos…

Ils sont forts chez Apple.

Le mot de la fin

Plus sérieusement, l’apport réel de l’iPad est l’expérience utilisateur qu’il procure. Que ce soit pour parcourir le Web (« The whole Internet is in your hands » comme Steve Jobs le disait si bien) ou utiliser des applications natives. Et c’est bien là qu’est la vrai force de l’iPad selon moi.

C’est aussi là que mon métier est excitant : développer des applications en tentant d’apporter une expérience utilisateur riche.

Et vous, si vous voulez un iPad ou si vous en avez déjà un, pourquoi ?