Emission #7 Comment le Framework Ionic vous permet de créer des WebApp HTML5 pour mobiles, tablettes

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Dernière émission avec Mathieu Boulord, chef d’entreprise et développeur, où vous allez retrouver de nombreux conseils pour réussir vos développements d’applications professionnelles.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Emission #7 Comment le Framework Ionic vous permet de créer des WebApp HTML5 pour mobiles, tablettes

 

Bonjour et bienvenu sur Développement Facile.

 

Matthieu : Avec Mathieu, expert dans la solution de prise de commande mobile. Dans la précédente émission, par exemple dans l’émission « la programmation expliquée à ma copine », avec Léna, vous avez appris, vous apprenez les bases de la programmation au fur et à mesure, et à travers le projet de Léna qui est de développer une application pour mobile, vous allez découvrir comment elle va faire petit à petit, comment elle va s’y prendre, et vous allez apprendre vous aussi à créer des applications mobiles, à découvrir la programmation, ce qu’il faut faire, ce qu’il ne faut pas faire.

Mathieu qui est un expert en développement, chef d’entreprise, qui a créé une solution de prise de commande mobile, nous fait l’honneur de venir partager son expérience, les défis qu’il a rencontrés, les erreurs qu’il a effectuées, comment il a pu surmonter tout ça, pour créer ce que j’appelle une application performante sur mobile, sur tablette, sur le web.

 

M. B : Donc je suis Mathieu Boulord, créateur de la société simple com, qui fait des applications, qui développe, des applications mobiles de prise de commande pour le terrain, et comme je l’ai dit dans les vidéos précédentes, il y a le chalenge de répondre au besoin du client pour avoir vraiment des temps de réponse, et vraiment une facilité de prise de commande. C’est là-dessus que je travail.

 

Matthieu : Donc on en était, dans la dernière émission, Mathieu avait trouvé une solution, il y avait le Framework cordova qui permet de développer une application qu’elle soit sur Apple, Android ou Windows phone, par-dessus il y avait une autre couche, c’est angularJS, qui communique avec cordova et par-dessus angularJS il y avait le code css, le html, tout ce qui est le design des interfaces graphique.

Ca fait plusieurs couches, ça fait beaucoup de couches.

 

M. B : C’est à maintenir, il faut maintenir et il faut faire évoluer en permanence, donc j’avais fait, comme j’avais dit, une petite librairie qui permet de faire une communication entre angular et cordovas.

 

Matthieu : Mathieu avait utilisé le modèle de conception adapter pour adapter deux API entres elles. Forcément quand un framework évolue, l’un ou l’autre, à chaque fois il faut faire évoluer sa librairie, ce qui n’est pas… Dans un contexte où il doit proposer une offre irrésistible à ses clients, couts, tarifs, qualité, il ne pouvait pas se permettre, il fallait qu’il trouve une solution pour gagner en productivité et du temps, il va partager cette solution avec vous, c’est vraiment très sympa de sa part, on t’écoute.

 

M. B : Alors comme tu disais j’ai utilisé cordovas et angular, ce sont des frameworks aujourd’hui qui sont au cœur du développement, ils évoluent en permanence parce qu’aujourd’hui toutes les applications il faut qu’elles fonctionnent sur toutes les plateformes, donc voilà, c’est pour ça que ce sont ces Framework, tous les deux trois mois il y a une nouvelle version qui sort, là ça commence à se stabiliser cette année mais j’ai créé il y a 2 ans, voilà, autant dire que tous les 3 mois il y avait une nouvelle version, il y avait des fonctionnalités qui changeaient, chaque Framework apporte son lot de fonctionnalités par exemple, les promise en angular qui sont vraiment des call back, des traitement d’arrière-plan.

 

Matthieu : Les développeurs développement facile ne savent peut être pas, en tout cas Léna c’est sûr, elle ne sait pas ce qu’est un promise, un call back, une fonction de rappel, si tu peux juste détailler un peu.

 

M. B : Alors enfaite, une fonction promise, c’est une fonction que l’on va pas connaitre le temps d’exécution, on ne va pas savoir quand… on va pouvoir connaitre quand elle va être finie mais par exemple quand on communique, on lance un téléchargement…

 

Matthieu : C’est de l’asynchrone enfaite.

 

M. B : Voilà c’est asynchrone, c’est un traitement de fond enfaite, parce qu’il ne faut pas bloquer l’application quand on lance un téléchargement, internet explorer vous pouvez continuer à surfer quand vous commencez un téléchargement, voilà. Promise ça sert à ça, on lance une promesse et on attend qu’elle nous dise, OK j’ai fini le traitement et en même temps on peut continuer à exécuter autre chose.

 

Matthieu : Ça revient un petit peu si on voit ça c’est modèle de conception observer, on attend une réponse de l’appel que l’on a effectué.

 

M. B : C’est exactement ça enfaite, et c’est ce qui manquait dans jQuery enfaite il n’y avait pas ça, et aujourd’hui c’est carrément un.. .. euh non pas dans jQuery… dans le JavaScript, dans la base de données JavaScript, non même dans le JavaScript tu n’avais pas les fonctions promises c’est pour ça qu’on a créé l’ajax pour rendre dynamique les choses, ce que l’on appel ajax c’est justement c’est ces fonctionnalités-là, et donc angular ils ont créé les promises mais c’était en réflexion dans le développement de JavaScript et ils ont été intégrés aujourd’hui par défaut, on a aujourd’hui les promises. C’est devenu, c’est pour ça que je vous dit, il faut se tenir au courant, ce sont des langages qui évoluent en permanence avec des librairies, des frameworks qui évoluent en permanence, donc voilà, en découvrant les promises dans angular, j’ai découvert ça, j’ai découvert après, du coup ils les ont intégrés dans JavaScript directement.

 

Matthieu : Et tu parlais aussi des callback.

 

M. B : Enfaite c’est…

Matthieu : C’est les fonctions de rappel callback, ça veut dire que c’est une fonction de rappel, quand vous utilisez le modèle de conception observer, vous vous abonnez, ça fait que vous pouvez lancer des taches, par exemple un téléchargement et après vous continuez l’exécution de votre application mais vous êtes abonné à l’évènement « téléchargement » et quand il est fini il va vous dire, he, enfaite le fichier est fini de télécharger, fait autre chose appel une autre fonction.

M. B : Voilà, et le call back c’est la fonction qui va s’exécuter quand l’action est finie, on va passer à la promises, c’est la promesse, la fonction qui va s’exécuter dire, OK j’ai fini de télécharger le fichier.

Matthieu : Donc tu as eu cette nouveauté, mais ce n’est pas tout, il s’est passé d’autres choses.

M. B : Voilà il s’est passé d’autres choses, puisque toujours en développement et comme j’avais beaucoup de choses à maintenir, je cherchais toujours parce que je me dis, puisque cordovas et angular, mais d’autres personnes sont comme moi, on le même problème, ce n’est pas possible, je ne suis pas le seul à utiliser les plus gros, enfin c’est quand même des grosses librairies utilisées par des millions de personnes dans le monde, aujourd’hui voilà, ce framework sur lequel je développe il y a plus de 200 000 applications publiées sur l’app store.

Matthieu : C’est énorme, vous êtes peut être dans le même cas que Mathieu, avec les mêmes difficultés.

M. B : Voilà je me dis je ne suis pas le seul à utiliser ces technologies-là, donc, et effectivement, un groupe d’américains ont finis par sortir Ionic framework, un framework qui se base sur cordovas qui intègre angular et donc avec sa librairie de communication, ses fonctionnalités, et donc qui permet une grosse compatibilité entre les deux et qui amène les librairies qui manquaient, les librairies visuelles.

Matthieu : La t’étais…

M. B : Ionic Framework quand je l’ai vu arrivé j’ai fait nooooooooon, j’ai fait tout ça pour rien, mais voilà, Ionic Framework est sorti entre temps, le temps qu’il se fasse connaitre, voilà c’est toujours ces problématiques.

Matthieu : Donc là tu t’es dit c’est génial.

M. B : C’est génial il faut que je recommence tout. Je suis sur la troisième fois et j’ai tout recommencé, mais aujourd’hui, quand j’ai une petite modification, un petit truc qui ne va pas, Ionic Framework m’apporte vraiment la souplesse d’un vrai Framework complet qui est intègre, comme on a dit, la couche cordovas, la couche angular et des librairies graphiques mobiles.

Matthieu : Donc si je comprends bien il y a Ionic Framework qui prend une version de cordovas, il prend une version d’angular js, il a recréé ton adaptateur, tes librairies et en plus c’est comme si il y avait jQuery mobile, l’équivalent, du coup toi tu as, je ne vais pas dire tu n’as plus rien à faire mais c’est royal.

M. B : J’ai pas plus rien à faire parce que j’ai quand même une partie graphique propre à l’image de ma société voilà, qui fait que…

Matthieu : Mais tu gagnes énormément de temps.

M. B : c’est ça, aujourd’hui, alors je suis encore sur la phase de transfert puisque j’avais vraiment créé toute la partie graphique, voilà, même ça prend du temps de tout passer sur le Ionic Framework, mais voilà, ça apporte des autres fonctionnalités en une ligne de commande on fait biper l’appareil, lui il communique avec cordovas, il fait bipper l’appareil.

Matthieu : C’est génial, et toi en tant que, tu es expert en développement donc, toi la formation développement facile, il n’y a aucun soucis, toi tu connais, combien de temps tu as mis pour apprendre Ionic Framework, sachant qu’avec toute ton expérience que tu as derrière, les modèles de conceptions tout ça, quand tu as découvert ce Framework, combien de temps s’est passé ? Ça s’est compté en mois ? En semaines ?

M. B : Je ne pourrais pas dire exactement puisque j’avais déjà commencé angular, et Ionic framework c’est une base angular, donc après je peux…

Matthieu : Après tu as pu réutiliser ton expérience pour aller beaucoup plus vite.

M. B : Après c’est du copier-coller et adapter, il y a très peu de différence entre enfaite angular et Ionic Framework, Ionic Framework apporte juste le lien, cette librairie que je développais moi-même pour communiquer avec l’appareil mobile et en plus c’est ces éléments graphiques, aujourd’hui cette migration se fait surtout sur les éléments graphiques, passer de mes éléments graphiques parce que la plus part du temps sur des applications web on le header et le footer, l’entête et le pied…

Matthieu : Avec Léna vous avez vu ça dans la programmation expliquée à ma copine, le pied de page, le haut de page.

M. B : Voilà, c’est moi qui avait créé avec mes librairies CSS et aujourd’hui, Ionic il intègre tout ça en automatique avec des boutons page retour, on ne fait même plus de code, enfaite c’est, on met et on met la balise et lui il nous fait apparaitre un bouton et quand on va cliquer dessus ça va fonctionner.

Matthieu : Ca ressemble un peu au Framework bootstrap ou lui il fonctionne plus avec des attributs directement dans les balises qui permet de faire une intégration très rapidement.

M. B : Enfaite Ionic c’est bootstrap de la tablette, enfin voilà, c’est vraiment les attributs, ils mettent pleins de balises, même rien que pour faire apparaitre un menu sur le côté ce que l’on trouve en standard sur les appareils mobiles, voilà on clique dessus, je vais vous montrer un menu.

Matthieu : Voilà du coup Mathieu va en pro… juste avant que Mathieu vous montre, j’insiste vraiment je crois qu’il n’y a pas beaucoup de centre de formation qui insiste là-dessus mais la syntaxe ce n’est vraiment pas le plus important, apprenez les bases, les stratégies des développeurs, des experts en développement et vous saurez, comme Mathieu, utiliser cordova, angularJS, maintenant c’est Ionic framework, ça ne lui pose pas de problème, il s’adapte en permanence parce qu’il possède déjà les bases d’expert en développement, je vous dis, la syntaxe c’est vraiment pas le plus important, la méthode développement facile elle se concentre vraiment pour vous apporter ces bases, comme ça en fonction de votre langage de programmation, comme Mathieu vous saurez faire face à tous les chalenges que vous allez rencontrer.

Donc Mathieu va vous présenter son application, je le laisse.

M. B : Voilà, c’est une application de prise de commande, ça ressemble à tous les sites internet de prise de commandes…

Matthieu : Et on est sur un iPad ça pourrait être sur un smartphone, sur une tablette Samsung, enfin, ou Windows phone.

M. B : Voilà on a une application ou on a nos articles qui présente nos articles, et ce que je voulais vous montrer c’est le menu, quand je fais panier, il y a le menu qui apparait sur le côté, ça avec tous les Framework, je n’ai plus besoin de le développer, je mets les balises qui crées, qui disent qui séparent ma page en deux avec un contenu de mon menu et le contenu standard de la page et avec une balise, ce n’est même pas, je ne rentre même pas dans le développement, aujourd’hui, c’est juste une balise que je mets sur mon bouton et qui me permet d’avoir un menu standard qui s’ouvre comme ça, il n’y a plus de développement pour faire ça aujourd’hui.

Matthieu : Et ce qui est vraiment génial, enfin moi ce qui m’impressionne toujours avec les Framework, ils développe une seule fois, il déploie sur toutes les plateformes, c’est un gain de temps énorme, si demain il y a un client qui dit ba, écoute, Mathieu, j’aimerais bien qu’il y ai une nouvelle fonctionnalité, ça ou ça, instantanément il peut en faire profiter tous ces clients, quel que soit la plateforme, c’est vraiment génial. Si vous avez besoin, si vous voulez découvrir les services de Mathieu, il y aura un lien sous cette vidéo, est-ce que tu as d’autres choses à rajouter par rapport à ton expérience que tu souhaiterais partager qui pourrais peut être aider les développeurs ?

M. B : Alors, comme tu disais les bases, voilà, il y a deux notions de bases. Il y a la base de la programmation mais il y a la méthodologie qui est importante, parce que, une application est fait pour vivre et évoluer. On développe rarement une application statique qui va être figée dans le temps, à partir du moment ou vous voulez reprendre le code et le faire évoluer, même souvent moi mes librairie, je ne développe pas que pour une application, à chaque fois je fais les modules.

Matthieu : C’est ce qui est enseigné dans la méthode développement facile, vous, enfaite, quand vous avez une fonctionnalité à développer, vous vous dites, comment la rendre générique, souvent vous faites un point d’entrée, on va dire que c’est comme une mini API, ou vous faites des entrées et vous avez des sorties et là vous avez votre librairie que vous pouvez réutiliser pour une autre projet.

M. B : Et c’est comme ça que les gens créé les Framework, parce que ce sont des regroupements de fonctionnalités qui aident à développer c’est exactement ça les Framework.

Matthieu : Après peut être que Mathieu à son propre Framework, ça je ne sais pas, il a peut-être son propre ;..

M. B : Du coup à créer de fonctionnalités comme ça qui peut être réutilisées j’ai mes propres librairies, du moment que je l’ai créé, si demain on me demande une autre application, je ne vais pas repartir de zéro, j’ai mes librairies j’ai juste à insérer ces fichiers.

Matthieu : Du coup il gagne un temps phénoménal pour… Enfaite, il y a le premier développement, je suis d’accord, ça vous prendra peut-être un peu plus de temps, mais pour les développements suivants vous allez gagner énormément de temps, c’est comme un puzzle, vous allez prendre des pièces et les remettre dans la prochaine application. Mathieu, à travers plusieurs émissions à partager énormément de conseils, de contenu, c’est du concret, c’est de l’expérience de terrain c’est du vécu, vous ne pouvez pas avoir, ce sont des conseils en or que vous pouvez réutiliser dans votre développement, je vous invite à regarder les émissions Développement Facile, il y en a trois, plusieurs fois pour vraiment prendre tous les conseils de Mathieu et surtout mettez-les en pratique c’est très important. Un mot de la fin avant de terminer ce partage ?

M. B : Un mot de la fin, aimez ce que vous faites, moi c’est une passion parce que voilà, toujours à faire des choses qui rendent services, voilà plus vous aimez ce que vous faites plus les gens aiment ce que vous faites pour eux et moi je suis content parce que les clients … enfin voilà, je travaille pour des société mais enfaite les utilisateurs finaux ce sont les commerciaux terrains, ce ne sont pas eux les acheteurs de mon application mais ce sont quand même eux qui vont téléphoner pour me dire c’est super ce que tu nous a mis en place et là on est content, ça fait plaisir et voilà, il faut aimer, développer pour moi c’est une vocation.

Matthieu : Déjà je te remercie énormément d’avoir partagé tous ces conseils, et dans la prochaine émission, ce sera l’émission « la programmation expliquée à ma copine », avec Léna, vous allez voir comment, Léna a déjà beaucoup de pistes grâce à Mathieu pour faire avancer son application et donc vous vous allez profiter de l’expérience de Léna qui va avancer dans la conception de son application, je serais là pour l’aiguiller, l’aider dans le développement, je répondrais à toutes ces questions, ça va certainement vous aider dans votre développement, en attendant, si vous avez envie de progresser dans le développement, de découvrir des extraits de la méthode développement facile, toujours gratuits, au-dessus de moi il y a un lien cliquable, ou en dessous vous renseignez simplement votre nom, votre adresse mail, vous allez recevoir instantanément des cours en vidéo pour développer des applications performantes, que ce soit sur les smartphones, les mobiles les tablettes, ou le web, découvrir des Framework, comment les utiliser, les mêmes stratégies de développement que Mathieu, pour à votre tour, créer des applications performantes, c’est le plus important.

Cliquez sur le lien juste au-dessus de moi, renseignez votre nom et mail pour recevoir cette formation gratuitement, cette formation en vidéo entièrement gratuite, l’équipe développement facile est également à votre disposition pour répondre à toutes vos questions, je vous dis à très bientôt dans la prochaine émission la programmation expliquée à ma copine, vous allez découvrir concrètement là, comment créer une application mobile que l’on code une seule fois et que l’on développe sur toutes les plateformes, Mathieu encore merci d’avoir partagé tous ces bons conseils.

M. B : J’adore ça.

Matthieu : A très bientôt.

[/ppmtoggle] [/ppmaccordion]

Lien vers les frameworks cités dans l’emission :

https://angularjs.org/

http://cordova.apache.org/

http://ionicframework.com/

Posez vos questions sur le développement d’application professionnelle

Utilisez la zone commentaire pour posez vos questions sur les bonnes pratiques pour le développement d’applications professionnelles

Créez des Applications Performantes avec la Formation Gratuite Développement Facile !

Recevez des Cours Vidéos avec les codes sources 
(Les événements, la POO, les modèles de conception, Les éditeurs, 
efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)