Posts taggés C#

Retour d’expérience d’un projet basé sur Apache Cordova + AngularJS + Angular Material

0

Contexte du projet

Dans le cadre d’un projet de recherche et développement, nous avons été amenés à réaliser une application mobile qui vient compléter un site web déjà existant et qui contribue au partage des bonnes trouvailles du web. Les systèmes d’exploitation ciblés étaient Android et IOS, aussi bien sur smartphones que sur tablettes. Le temps imparti au développement de celle-ci était limité mais sans contrainte particulaire sur les technologies à utiliser.

 

Orientation technique

Notre choix technique c’est porté sur :

Apache Cordova

Apache Cordova est un Framework open-source développé par la Fondation Apache. Il permet de créer des applications mobiles cross-plateformes en HTML, CSS et JavaScript pour la plupart des OS du marché (Android, Amazon Fire OS, Bada, Blackberry10, Firefox OS, IOS, Ubuntu, Windows Phone 8, Windows 8, Tizen), tout en bénéficiant des fonctionnalités natives des appareils (localisation GPS, appareil photo, contacts, etc). Les applications qui en résultent sont dites « hybrides », ce qui signifie qu’elles ne sont pas vraiment natives, ni purement basées sur les langages HTML, CSS et Javascript.

 

L’adoption d’une plateforme hybride pour la conception de l’application mobile au détriment du développement natif s’est justifiée principalement pour des raisons de timing. En effet les développeurs affectés à cette tâche n’avaient que très peu d’expérience dans les langages de programmations spécifique à chaque plateformes mobiles (Objective-C, Java, C#, etc) et avec une deadline à respecter.

AngularJS

Développé par Google, AngularJS est un Framework JavaScript MVW (Model View Whatever) très puissant, riche en fonctionnalité, libre et open-source. Il est fondé sur l’extension du langage HTML par de nouvelles balises et attributs, ce qui va nous permettre de créer une application web. Il est basé sur le patron de conception MVC (Modèle, Vue, Contrôleur).

Voici quelques aspects d’AngularJs qui nous ont poussés à l’utiliser :

  • Architecture du projet : le code est modulaire et structurer grâce notamment à un ensemble de vues conceptuels : Template, Directives, Model, Scope, Module, Injection de dépendance, …
  • Data-binding bidirectionnel : les modèles et les vues se mettent à jour automatiquement dès lors qu’une modification sur un objet, auxquelles elles sont liées, survient.
  • Directives : une directive permet de créer de nouveaux éléments (attributs HTML) que l’on va pouvoir utiliser directement dans nos vue. Cale permet de factoriser du code et de faciliter la ré-utilisabilité des composants. Autre aspect positif, nos vues ne contiennent que du HTML.
  • Il existe une multitude de modules Angular disponible pouvant enrichir une application.

Angular Material

Angular Material est une librairie développer par Google et conçu pour les développeurs qui utilisent AngularJS. Ce projet fournit un ensemble de composants (menus, interfaces) et de fonctionnalités qui sont propre à une application mobile (exemple : le slide pour faire apparaître un menu, etc). Il est très facile à prendre en main et suffit amplement pour de petites applications.

 

Utilisation

Il existe une multitude de tutoriel sur comment développer en AngularJs ou Cordova, donc ce que je vous propose, c’est une petit récapitulatif sur les problèmes auxquels nous avons été confrontés tout au long du projet.

 

Dès le début du projet, nous avons été confrontés à un problème de taille : gérer l’ordre d’instanciation afin de ne charger les classes JavaScripts qu’après l’initialisation d’Apache Cordova.

 

Pour ce faire nous avons utilisé la librairie « RequireJs » (site officiel).

Au sein de notre application, nous avons créé un fichier « autoload.js » qui fait appel à la méthode « require() » qui comporte deux paramètres :

  • le premier étant un tableau contenant la liste des fichiers à instancier (on y placera la déclaration de nos contrôleurs, services, directives, filtres, helpers, …)
  • le second étant une fonction. C’est dans celle-ci qu’on va pouvoir déterminer les actions à mener. Dans notre car instancier Angular et la base de données seulement après que Cordova le soit.
    • On va pouvoir déterminer que Cordova a bien été initialisé grâce à la méthode :

 

1

 

Ce fichier « autoload.js » que l’on vient de créer doit bien évidement être charger sur la page HTML (fichier index.html), après avoir déclaré toutes les librairies nécessaires au bon fonctionnement de l’application (Cordova, AngularJs, Angular Material, jQuery, …).

 

Pendant la phase de développement, nous avons utilisé le simulateur de l’IDE (Telerik App Builder), mais lorsque nous déployer notre application sur un téléphone, le résultat obtenu ne correspondait pas du tout au rendu sur le simulateur. Et pour cause, la connexion à la base de données locale ne s’effectue pas de la même façon.

Pour gérer la connexion à la base de données sur un vrai appareil, nous utilisons le plugin Cordova: « sqlitePlugin ».

Ce qui permet de faire la différence avec le simulateur, c’est en se basant sur l’identifiant unique de l’appareil utilisé. En effet, chaque appareil à un identifiant qui lui est propre.

 

Voici un exemple de connexion à la base de données :

2

 

La dernière partie concerne l’intégration avec l’utilisation d’Angular Material. Il faut savoir que les toutes les versions d’Android ne sont malheureusement pas compatible, en effet seules les versions supérieurs ou égale à la 4.4 le sont. Il faudra utiliser d’autres librairies pour assurer la rétrocompatibilité des styles sur les anciennes plateformes.

 

Liens

Apache Cordova :

AngularJs :

Angular Material :

RequireJs :

 

angularjs

apache-cordova

Angular Material

ClickOnce Deployement, retour sur une technologie oubliée

0

Une fois une application cliente prête à être utilisée, il faut encore la mettre à disposition des utilisateurs et la maintenir. Pouvoir déployer et mettre à jour ce type d’application est crucial pour une entreprise performante. Ces processus se doivent d’être transparents pour l’utilisateur et simple pour l’administrateur afin de ne pas devenir une gêne pour l’entreprise.

1.    La solution ClickOnce

Microsoft a mis à disposition dans Visual Studio 2005 la solution ClickOnce Deployment, également utilisable à partir du Windows SDK pour faciliter le déploiement et les mises à jour des applications basées sur Windows, c’est-à-dire les applications Windows Forms, Windows Presentation Foundation (WPF) et Console. À noter que ces applications doivent être réalisées en Visual Basic ou C#.

 

1.1 Stratégies de déploiement

 

Une application peut être déployée comme suit :

  • s’installer à partir d’une page web ou d’un emplacement réseau.
  • s’installer à partir d’un support d’installation physique (CD-ROM, clé USB …).
  • s’exécuter à distance à partir d’un emplacement réseau.

L’application peut s’installer et fonctionner en mode hors-ligne ou nécessiter un accès permanent à l’emplacement réseau, sans installation sur l’ordinateur final.

 

1.2 Stratégies de mises à jour

 

Une application installée avec ClickOnce peut se mettre à jour automatiquement : vérifier la disponibilité d’une nouvelle version et replacer automatiquement les fichiers mis à jour. Les mises à jour peuvent être inversées par l’utilisateur ou un administrateur.

Les stratégies sont les suivantes :

  • vérifier la disponibilité de mises à jour au démarrage de l’application.
  • vérifier la disponibilité de mises à jour après le démarrage de l’application en tache de fond.
  • utiliser une interface utilisateur spécifique.

Vous pouvez spécifier la fréquence des vérifications et si les mises à jour sont obligatoires.

 

1.3 SÉCURITÉ

 

Les mécanismes de sécurité de ClickOnce sont basés sur des certificats, des polices de sécurité d’accès par le code et une invite d’approbation. Les certificats permettent d’assurer à l’utilisateur que le programme provient bien de la source vérifiée et n’a pas été modifié. L’administrateur peut ainsi définir une liste blanche d’éditeurs. Le développeur peut enfin définir un périmètre d’exécution de l’application, afin de s’assurer que le code ne peut pas accéder à des ressources protégées. Enfin en dernier recours, si l’application a besoin d’une autorisation qui contrevient aux polices définies, l’utilisateur peut approuver la demande via une fenêtre qui apparaîtra.

2. Procédure de configuration de ClickOnce Deployement

Le moyen le plus simple pour configurer la publication, le déploiement et les mises à jour est d’aller dans l’onglet « Publier » des propriétés du projet.

 

click1

 

C’est ici que vous spécifiez le dossier de sortie de la génération (dossier de publication) et le dossier d’accès aux livrables (dossier d’installation). Vous pouvez préciser la stratégie de déploiement (en ligne, hors ligne) ainsi que la version de publication (différente de la version d’Assembly).

Le développeur a la possibilité d’exclure certains fichiers des livrables avec la fenêtre « Fichiers d’application ».

 

click2

 

Vous pouvez définir dans la fenêtre « Composants Requis » quels composants doivent être installés et à partir de quelle source (officielle en ligne, emplacement de l’application, emplacement spécifique).

 

click3

 

La stratégie de mise à jour peut être configurée dans la fenêtre « Mises à jour des applications ». Le moment, ainsi que la fréquence des mises à jour, peuvent être spécifiés, de même que si l’application dispose d’une version minimale.

 

click4

 

Dans les options, il est possible d’enrichir le livrable avec des informations sur l’éditeur, le nom du produit ou du groupe de produits qui s’afficheront dans la fenêtre d’installation/désinstallation des programmes ainsi que des URL de supports.

 

click5

 

Il est également possible de préciser des comportements lors des déploiements, comme le fichier htm qui permet la récupération du livrable depuis une page Internet ou le démarrage automatique du setup à l’insertion du support d’installation.

 

click6

 

Il est également possible de spécifier l’enregistrement de l’application dans le registre des associations de fichiers, si l’application propose l’ouverture de fichiers avec une extension particulière.

 

click7

 

L’Assistant de Publication vous permet de faire une configuration rapide et minimale, et le bouton « Publier maintenant » de directement lancer le processus de publication.

Notez que le raccourci « Publier » de l’Explorateur de solutions vous amène sur l’Assistant de Publication mais vous autorise à directement publier si les informations requises sont déjà spécifiées.

 

3. Présentation des livrables

Après la publication, vous trouverez dans le dossier de publication divers fichiers que vous devrez déplacer dans le dossier d’installation.

  • setup.exe : exécutable qui va installer l’application.
  • MonApplication.application : manifeste de déploiement. Il s’agit d’un fichier XML de configuration du déploiement et des mises à jour. Vous y trouverez l’implémentation de la stratégie de déploiement ainsi que de la stratégie de mises à jour spécifiée plus tôt. Vous trouverez également des clés de sécurité qui permettent de s’assurer de l’authenticité des mises à jour.
  • Application Files\MonApplication[VersionDePublication]\ : dossier qui va contenir les différentes versions des livrables, avec manifeste de déploiement. Vous pouvez supprimer les anciennes versions si vous êtes sûr de ne plus en avoir besoin.

o   MonApplication.application : manifeste de déploiement.

o   MonApplication.exe.config.deploy : fichier de configuration accessible par l’application (App.config par exemple).

o   MonApplication.exe.deploy : exécutable.

o   MonApplication.manifest : manifeste de l’application (Assembly, dépendances …)

Lors de l’installation hors-ligne, la dernière version sera placé dans les dossiers de cache ..\appdata\Local\Apps\…

 

4. Conclusion

Depuis Visual Studio 2005, la solution ClickOnce de déploiement et de mise à jour offre la possibilité aux développeurs, aux administrateurs et aux utilisateurs de profiter d’applications clientes disponibles et à jour de manière transparente et simple. Le gain d’efficacité apporté par une solution de déploiement et de mise à jour simple et puissante comme ClickOnce permet de réduire les frictions entre utilisateurs finaux et outils de même que les interactions entre utilisateurs et administrateurs, améliorant ainsi le fonctionnement d’une entreprise.