Internationalisation d'AngularJS et utilisation d'un timer

Je continue ma découverte d’AngularJS avec une application de calcul qui aborde l’internationalisation, l’utilisation d’un timer et Bootstrap. Elle serait utile dans un film d’action ou de science-fiction. Fréquemment des personnages se retrouvent menacés d’asphyxie dans un lieu clos. Cette application leur fournirait un compte à rebours en fonction du volume de la pièce et du nombre de personne.

Sealed space timer - page d'accueil
Sealed space timer – page d’accueil

Timer

Pour le compte à rebours j’ai utilisé Angular Timer de Siddique Hameed. Il s’agit d’une directive qui permet de facilement créer des chronomètres comme des comptes à rebours.

Le code suivant permet d’afficher un timer avec les caractéristiques suivantes :

  • un compte à rebours
  • le décompte au format hh:mm:ss
  • mise à jour toutes les secondes
  • démarrage manuel
  • durée du compte à rebours égale à la valeur retournée par la fonction computeTimeLeft()

Pour récupérer la valeur du timer, il faut passer par l’événement timer-tick. J’étais un peu désarçonné par cette logique mais ça fonctionne. Initialement j’ai voulu que la couleur de la zone contenant le timer passe du jaune au rouge en fonction du décompte. Techniquement c’est faisable mais visuellement ce n’était pas concluant.

Internationalisation d’AngularJS

L’internationalisation (i18n) et la localisation (l10n) permettent de développer des applications adaptées au contexte international. Ainsi le contenu est traduit et les conventions locales sont respectées. Le guide d’AngularJS contient une section traitant du sujet : https://docs.angularjs.org/guide/i18n

Il existe plusieurs composants répondant au besoin mais le fonctionnement reste similaire:

  • Utiliser un filtre
  • Améliorer l’architecture en passant par un service
  • Interpolation
  • Pluralization

Pour aller plus loin, l’article [Je continue ma découverte d’AngularJS avec une application de calcul qui aborde l’internationalisation, l’utilisation d’un timer et Bootstrap. Elle serait utile dans un film d’action ou de science-fiction. Fréquemment des personnages se retrouvent menacés d’asphyxie dans un lieu clos. Cette application leur fournirait un compte à rebours en fonction du volume de la pièce et du nombre de personne.

Sealed space timer - page d'accueil
Sealed space timer – page d’accueil

Timer

Pour le compte à rebours j’ai utilisé Angular Timer de Siddique Hameed. Il s’agit d’une directive qui permet de facilement créer des chronomètres comme des comptes à rebours.

Le code suivant permet d’afficher un timer avec les caractéristiques suivantes :

  • un compte à rebours
  • le décompte au format hh:mm:ss
  • mise à jour toutes les secondes
  • démarrage manuel
  • durée du compte à rebours égale à la valeur retournée par la fonction computeTimeLeft()

Pour récupérer la valeur du timer, il faut passer par l’événement timer-tick. J’étais un peu désarçonné par cette logique mais ça fonctionne. Initialement j’ai voulu que la couleur de la zone contenant le timer passe du jaune au rouge en fonction du décompte. Techniquement c’est faisable mais visuellement ce n’était pas concluant.

Internationalisation d’AngularJS

L’internationalisation (i18n) et la localisation (l10n) permettent de développer des applications adaptées au contexte international. Ainsi le contenu est traduit et les conventions locales sont respectées. Le guide d’AngularJS contient une section traitant du sujet : https://docs.angularjs.org/guide/i18n

Il existe plusieurs composants répondant au besoin mais le fonctionnement reste similaire:

  • Utiliser un filtre
  • Améliorer l’architecture en passant par un service
  • Interpolation
  • Pluralization

Pour aller plus loin, l’article](http://blog.trifork.com/2014/04/10/internationalization-with-angularjs/) détaille l’aspect technique.

Mon choix s’est porté sur Angular-Translate.

Les traductions sont stockées au format JSON dans des fichiers séparés. Les fichiers sont chargés uniquement si c’est nécessaire. La syntaxe dans le HTML est facile et – même si je n’en ai pas eu besoin – il est possible d’insérer des variables dans ces textes.

Efficace et rapide à mettre en place, Angular-Translate permet de gérer l’internationalisation avec succès.

Bootstrap

Afin de rendre l’aspect utilitaire et urgent du thème, j’ai opté pour le thème United de Bootswatch pour sa dominante orange.

Les glyphicons permettent d’insérer des icones dans une interface et s’intègrent dans l’interface. L’avantage réside dans le fait qu’on peut les intégrer dans d’autres composants (bouton, texte, input, …).

Angular-UI Bootstrap adapte certains composants Bootstrap pour qu’ils s’intègrent à AngularJS.

Bootstrap permet de réaliser une interface propre et efficace rapidement. En contre partie, je trouve que le code HTML s’alourdit, même s’il reste lisible.

Hypothèse de calcul

Mise en garde: cette application a pour objectif de découvrir AngularJS, pas de fournir un outil sûr pour calculer le temps avant suffocation dans un lieu clos.

Les hypothèses prises pour les calculs dans cette application :

  • le temps limite (en heures) durant lequel ont peut séjourner (au repos) dans un local dépourvu de moyens d’aération est donné en divisant le volume de la pièce (en m³) par le nombre d’occupants et de multiplier le résultat par le coefficient 1,5
  • le volume moyen occupé par un être humain est de 75 litres. Pour des questions pratiques, disons 100 litres soit 0,1m3.

Demo:

http://blog.ghislain-lerda.com/demo/ng-SealedSpaceTimer/index.html

Sources:

https://github.com/GhislainL/ng-SealedSpaceTimer

Références:

Angular Timer

Angular-Translate

Angular-UI Bootstrap

Bootstrap – Glyphicons

Bootstrap – Thème United de Bootswatch

Related Post

Logger des événements client avec JSNLog Continuons l'exploration des solutions de log et voyons comment logger des événements client dans une application web. Prenons une application web Ang...
Débuter avec NodeJS, Express et MongoDB Un collègue m’a parlé de différents projets personnels orientés web et de son dilemne sur le choix des techologies. Curieux j’ai voulu essayer NodeJS,...
Tests unitaires avec Jasmine pour AngularJS Lors des précédents articles, nous avons construits une application AngularJS qui effectue quelques calculs. Pour s’assurer que les fonctions en charg...
Créer une application mobile avec Cordova Dans un article précédent, je vous avais présenté l’application Sealed Space Timer qui m’a permis de découvrir AngularJS. Vu les cas d’usage, il serai...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *