Insert your widgets from Appearance->Widget

Blog

AngularJS mobile avec Ionic

Pour ceux qui suivent un peu l’actu des applications mobiles hybrides, et plus particulièrement celles qui utilisent la plateforme Cordova / Phonegap, il y a un blog incontournable, celui de Holly Schinsky.
Récemment, nous avons commencé à dispenser des formations AngularJS à OXiane, ainsi que des projets de développement.

Je suis très porté sur le développement mobile, et l’opportunité de développer pour mobile via Angular permet de faire une jonction logique entre deux mondes très proches : le web et le mobile.

Venons-en au fait : que choisir pour designer son application hybride ?
Nous avons choisi un framework mobile encore très jeune, toujours en beta à la date de rédaction, c’est Ionic.
A vrai dire j’avais commencé à designer les écrans avant d’avoir lu ce très bon article de Holly.

Son article expose très bien les qualités de ce framework UI, mais pour apporter ma petite contribution, je dirais que ses points forts sont :

  • La réflexion autour d’AngularJS, avec l’utilisation de directives spécifiques en s’appuyant sur des plugins Angular.
  • La gestion des états via AngularJS pour afficher ou non un bouton back
  • La légèreté du code d’une manière générale (par rapport à un jQuery mobile par exemple).
  • Les nombreux widgets qui viennent répondre aux besoins les plus courants d’un designer d’interface mobile : listes, boutons, blocs avec ou sans padding, éléments de type « cards » avec header et footer … etc.
  • Un joli menu de type NavigationDrawer Android, très sympa.
  • L’utilisation de SASS pour décorer son application suivant sa propre charte graphique.
  • L’utilisation d’icônes ionicons basées sur des polices, et donc parfaitement adaptées à des multiples résolutions.

Bon, pour ce qui est de SASS, on pourrait imaginer un mode un peu plus souple, car pour l’instant, il faut modifier un ou plusieurs fichiers livrés avec le framework pour lancer le build de sa CSS finale, c’est très simple, mais lors d’une nouvelle version du framework (et c’est très souvent) il faudra faire une fusion des fichiers … pas top.

Le montage d’une application est très simple et des ressources bien faites permettent de commencer. Ce qui est essentiel pour Ionic, c’est de s’intégrer sur la plateforme Cordova, ce qui permet en quelques lignes de code de préparer un projet et de le lancer sur un device. Une petite page permet de se rendre compte de la facilité d’utilisation. En fait les lignes de commande ionic sont des portages de cordova, qui a évolué depuis quelques versions pour une grande rapidité de déploiement !

Si vous utilisez un émulateur Android GenyMotion, sachez que pour un PC, il est reconnu comme un device, ce qui est très pratique pour lancer la commande « run » de cordova (ou d’ionic).
Avec une simple commande « cordova run android » … et zou !

J’ai trouvé le développement sous SublimeText très rapide, on a aussi bien les outils Angular que les commandes de build Sass.
Autre aspect non négligeable, les premiers tests de fonctionnement peuvent très bien se faire sans serveur ni device ni même émulateur, un simple navigateur fera l’affaire ! (Attention cependant, Firefox n’aime pas le slide menu … pourquoi …)

A priori, les ionicons sont basées sur Icomoon, une bibliothèques d’icones et un outil bien sympa pour générer vos propres icônes au format fonte, en attendant l’arrivée des SVG qui devrait rendre ce système un peu inutile dans pas mal de situations. Pour l’instant, c’est un très bon moyen de personnaliser son appli hybride Ionic !

Written by

Front-end & mobile consultant. AngularJS & Android https://twitter.com/aboudard/

  • lookmandesign

    Je trouve votre article intéressant et je suis vraiment inspiré de m’engager dans l’aventure des applications mobiles avec AngularsJS. Que me conseillez-vous?

  • Alain Boudard

    Bonjour,

    Je peux te conseiller exactement ce que je décris dans l’article, c’est à dire le framework Ionic.
    Son installation se fait très facilement via les lignes de commande NodeJs NPM.

    http://ionicframework.com/getting-started/

    Mais il te faut un peu découvrir au moins un SDK natif, sans quoi tu ne pourras pas builder ton appli sur ton poste de développement.

    De toute façon, jette également un oeil à Phonegap Build : https://build.phonegap.com/

    Comme outil de développement Javascript, WebStorm est super puissant mais payant, et moi j’utilise une combinaison de Sublime Text et Adobe Edge Code (ou Brackets)

    Avec tout ça tu est paré !

  • lookmandesign

    Merci pour votre réponse

  • Cédric

    Pour les icones sont disponible ici : http://ionicons.com
    Et une extension par ionic pour augmenter ces capacités : http://ngcordova.com/docs/

  • http://blog.oxiane.com Alain Boudard

    Très bon ngCordova ! super simple d’utilisation …

  • jules

    Bonjour,

    J’utilise pour ma part Ionic pour le développement tout récent de mon jeu « Memory Party »

    https://play.google.com/store/apps/details?id=fr.jhaccoun
    http://ameliorersamemoireavecmemoryparty.blogspot.fr

    On pourrait penser que c’est étrange d’utiliser Ionic pour cela, mais tout dépend de l’application ou du jeu que vous voulez réaliser. Si le jeu est gourmand en animation,transition, etc… je recommande fortement de développer en natif.

    En effet utiliser Ionic pour faire une appli avec beaucoup d’animation comme comme dans un jeu est pas forcément le meilleur choix car certains téléphones peu puissants risquent de ne pas tenir le coup (chargement, animation pas supporté s en css3 à cause de vieille version Android par exemple).

    Pour ma part mon jeu reste simple côté animation donc ça peut aller, je vous laisse constater par vous même :)

    Je vous recommande de développer sous Ionic car les développements qui s’appuient sur Angular peuvent se faire assez rapidement lorsqu’on est à l’aise avec Angular, le javascript, le html et css. C’est quand même bien pratique d’avoir tout son front en HTML.

    Si vous avez des questions sur le développement Ionic, n’hésitez pas :)