Emission #14 – Créez une WepAPP avec ionic Framework sur iOS et Android avec HTML5 et JavaScript

Dans cette nouvelle interview de Mathieu Boulord, apprenez à utiliser le framework Ionic.

A partir d’une application web standard, découvrez comment la déployer sur mobile et tablette très simplement.

Tout est dans la vidéo ci-dessous.

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

Emission #14 – Créez une WepAPP avec ionic Framework sur iOS et Android avec HTML5 et JavaScript

Matthieu : Bonjour et bienvenu sur l’émission développement facile. Ici les deux Mathieu.

M. B : Bonjour.

Matthieu : Dans cette nouvelle émission vous allez apprendre concrètement comment utiliser Ionic framework pour créer une application à partir du même code source HTML5 JavaScript, comment déployer une application sur mobile et tablette, iPhone, iPad, Android. Mais avant cela je vais laisser à Mathieu le soin de se présenter à nous car il nous fait le plaisir de venir partager son expérience dans le développement de mobile.

M. B : Bonjour je suis Mathieu Boulord, créateur de solution de prises de commandes mobiles, je travaille sur des développement multi plateformes, iOs, Android, ou Windows, et donc comme je vous avait parlé précédemment, j’utilise un framework qui est Ionic framework qui me permet de vraiment, en développant une seule fois l’application, de la porter sur ces différentes plateformes.

Matthieu : Et donc ça t’as permis de développer avec le même code une solution de prise de commande mobile tout terrain, le commercial, quand il est sur le terrain qu’il soit avec un iPhone, une tablette galaxy ou Android ou iPad ou Windows même, il peut prendre les commandes de ses clients et il a même pas besoin de connexion réseau.

M. B : Exactement.

Matthieu : Et donc là aujourd’hui tu vas partager avec nous ton expérience pour apprendre à créer une application multi plateforme.

M. B : Exactement. Je ne sais pas si vous avez vu une des séries précédentes ou j’étais venu, je vous avais présenté ce framework qui est sorti, comme j’avais dit j’avais d’abord commencé à créer mon application quand j’ai trouvé le Ionic framework qui est assez récent et qui me permettait, de, directement, compiler sur les différentes plateformes. Au début j’avais codé en langage natif, sur iOs en objectiv C de chez Apple, et donc quand j’ai trouvé ce framework, je me suis dis, voilà, j’ai la solution, diviser les couts de développement, et pouvoir partir à développer en multi plateforme avec cet outils qui est vraiment très simple, qui est composé enfaite d’une multitude d’outils, Angular, cordovas et en plus des outils graphiques qui est vraiment la partie Ionic, c’est vraiment des composants graphiques visuels que vous avez sur vos téléphones mobiles. C’est vraiment d’apporter tous ces composants-là.

Matthieu : Et vu que c’est géré avec JavaScript, l’avantage ça vous ai accessible parce que le langage JavaScript en tant que développeur vous connaissez surement et du coup vous avez quelques lignes de commandes à savoir dans la précédente émission développement facile vous avez appris à installer tous les outils nécessaire et après il suffit d’utiliser du code JavaScript, soit avec la méthode développement facile et les tutoriaux ou alors…

M. B : Alors pas que du code JavaScript directement en HTML5 enfaite Ionic fournis un certain nombre de balises qui permet directement de créer les menus basiques de téléphones toutes la architectures de composants, vous allez voir tout de suite quand on va vous faire la démonstration.

Matthieu : D’accord, donc ça veut dire qu’en utilisant des simples balises vous allez encore gagner du temps pour votre application.

M. B : Pour faire apparaitre un menu il n’y a meme pas besoin de connaitre le code JavaScript puisque c’est des balises ou on dis, ce bouton va ouvrir le menu, et dans la page on a déclaré notre menu. C’est toute la simplicité.

Matthieu : C’est super. Bon on va passer à la pratique, donc on se rend sur le site de Ionic framework, il suffit de faire get started, l’installation vous l’avez faite dans la dernière émission, donc vous en êtes à démarrer un projet. Comment vous faites ? Vous lancez terminal sous Mac ou sous Windows, vous vous placez dans le bon répertoire, documents, dev facile.

M. B : Ce qui est bien aussi c’est qu’ils fournissent des projets pré faits, vous pouvez soit démarrer d’un projet vide, blanc, ou démarrer par exemple, déjà avec un menu standard mobile ou avec des options de navigation, des boutons de navigation, en mode écran, comme vous le souhaitez pour accéder directement à des catégories, ou même encore mieux, il existe le creator, qui est encore en version beta chez Ionic, il suffit de vous inscrire à la version béta et vous y avez accès, c’est un outils graphique ou vous pouvez créer directement vos écrans dedans, et grace à une ligne de commandes qu’on vous montre là, il suffit de rajouter l’Id de son projet dans le creator et il va rappatrier ces pages que vous avez déjà pré créées avec le creator.

Donc là on va faire l’exemple avec un menu.

Matthieu : Il suffit de faire Ionic start, le nom de votre application, et le modèle, un modèle blanc, ou un header classique ou un menu, dans cet exemple vous allez apprendre à créer un menu, tout simplement tapez Ionic start le nom de l’application, dev facile save menu, entré, ça lance l’installation.

M. B : Voilà, il va créer l’architecture de base de l’application que T’APPIDE…

Matthieu : Et il va créer cette architecture ici, vous avez dev facile qui est ici, avec plusieurs répertoires, vous allez découvrir le contenu des répertoires dans un instant, ensuite il suffit d’ajouter les plateformes ciblées.

M. B : D’indiquer sur quelle plateforme vous souhaitez compiler votre application.

Matthieu : Donc par exemple, Ionic plateforme add, nous on veut cibler iOs, add iOs entré, Android, Android, entré, et après si on le souhaitait on pourrait mettre Windows. plateforme add, nous on veut cibler iOs, add iOs entré, Android, Android, entré, et après si on le souhaitait on pourrait mettre Windows. plateforme add, nous on veut cibler iOs, add iOs entré, Android, Android, entré, et après si on le souhaitait on pourrait mettre Windows.

M. B : Alors Windows, on ne peut pas le faire directement sur le Mac, il faut utiliser sur un environnement Windows, parce qu’à chaque fois que vous faites ces lignes de commandes, il va appeler les outils de compilation de la plateforme, on a pas les outils de compilation de Windows directement sur le Mac, il faut copier le répertoire, ce dossier qu’on a créé, le projet sur son Windows et on tape cette ligne-là après avoir installé Ionic sur la plateforme Windows, et il va nous installer, nous créer la plateforme Windows pour ce projet-là.

Matthieu : Et si on est sous Mac on peut utiliser virtual box qu’on a installé avec un CD de Windows que vous installez, une licence que vous avez et vous faites le même principe de déplacer le répertoire créé, et de rajouter Ionic plateforme add Windows.

Ok, une fois qu’on a fait ça, il nous reste plus qu’à lancer la compilation de l’application.

M. B : Voilà on peut directement ouvrir le studio ou sur lequel on souhaite compiler, par exemple iOs avec Xcode.

Matthieu : On ne va pas ouvrir Xcode, enfaite dans le répertoire de tout à l’heure, il y avait…

M. B : Il y avait plateforme.

Matthieu : Plateforme, on choisit la plateforme iOs, vous avez installé Xcode dans la dernière émission développement facile, vous double cliquez sur dev facile le porjet dev facile avec Ionic, ça vous ouvre tout et il n’y a plus qu’à séléctionner, on va regarder sur un iPhone 6, le 6 il est très bien.

Et on à plus qu’à cliquer sur Run, ça va compiler l’application.

M. B : Lancer l’émulateur.

Matthieu : Lancer l’émulateur, vous connaissez l’icône cordovas, et vous avez votre menu rapide, simple, très pratique, toujours avec l’iPhone. Si vous revenez sur home, c’est commande shift+alt, vous voyez, on est bien sur un environnement iOs, sur l’iPhone, avec dev facile, bien évidemment vous pouvez personnaliser l’icône, vous allez le voir dans les prochaines émissions, et en cliquant dessus vous avez votre icône qui se lance.

Ensuite il suffit d’arrêter l’émulateur. Si tu as des choses à rajouter, par exemple, tu n’hésites pas Mathieu avec ton expérience.

M. B : Après on reviendra sur l’architecture du projet, là j’ai rien de spéciale à… C’est on ne peut plus simple.

Matthieu : Ok, on va lancer.. oui c’est super simple, c’est sûr que.. On va faire pareil, vous lancez Android studio.

M. B : Android c’est dans l’autre sens du coup, il faut lancer l’environnement Android studio.

Matthieu : Et donc dans Android studio, voilà, vous arrivez sur cette écran normalement avec des nouveaux projets, il suffit de faire un import projet.

M. B : Et d’indiquer le dossier.

Matthieu : Et d’indiquer le répertoire, donc nous c’est le répertoire dev facile, en plus vous avez la petite icône, c’est très simple à reconnaitre, vous cliquez sur Ok, next, next, oui, on écrase parce qu’il y avait la dernière application qu’on avait créée, next, next, next, overright, next. Et voilà vous avez votre projet, comment lancer votre projet ? Rappelez-vous il y a Genymotion, que vous lancez, c’est votre émulateur Android.

M. B : C’est beaucoup plus rapide que l’émulateur standard qui est fourni avec Android studio et ça vous permet de sélectionner, là on a installé deux machines.

Matthieu : Google Nexus ou Samsung Galaxy, pour ajouter une machine il suffit de cliquer sur ajouter, vous choisissez votre version d’Android et après le modèle, voilà, par exemple on va mettre le galaxy…

M. B : Il n’a pas le version 5 d’Android.

Matthieu : Ah d’accord.

M. B : Donc c’est l’un ou l’autre.

Matthieu : Ah d’accord, ok.

M. B : Parce que si tu mets les deux filtres, ça ne va pas marcher.

Matthieu : Donc on va prendre un nexus 9, suivant, donc bien évidemment c’est l’avantage de genymotion, il télécharge l’émulateur et il l’installe.

M. B : Voilà et il y a juste à cliquer après sur le bouton lecture et ça fonctionne.

Matthieu ; C’est génial, il n’y a pas plus simple à utiliser, je ne sais pas si en attendant qu’il l’installe on ne peut rien faire ?

M. B : Annule on va prendre….

Matthieu : C’est pour vous montrer, après on prend, on fait démarrer on va prendre un samsung galaxy S4 sous Android 4.2.2, voilà, l’émulateur démarre, et ensuite vous passez, une fois qu’il est démarré, vous passez sur Android, vous cliquez sur la flèche run.

M. B : On voit qu’il s’est bien lancé sur la gauche de l’écran en bas, on voit l’émulateur, si vous ne l’avez pas d’affiché, vous avez un petit bouton tout en bas sur la fenêtre d’Android studio qui s’appelle Android, et c’est ce qui vous permet d’afficher l’émulateur, le lien entre l’application Android studio et l’émulateur.

Matthieu : Là l’émulateur…

M. B : Ah j’avais fait une petite modif, enfaite, il faut penser à dire que vous ne l’exécutez pas sur l’Android studio, pour cela, il faut aller juste dans le projet en haut, vous avez ici sur quoi il compile l’application est compilée, sur Android et vous faite configuration, dans la configuration il faut choisir que vous sélectionnez show chooser dialog pour bien dire que vous voulez avoir le choix, que ça ne s’exécute pas sur l’émulateur mais que ça s’exécute sur le périphérique que vous choisissez, soit une tablette branchée soit un autre émulateur externe.

Matthieu : Ah donc on peut brancher la tablette, si je branche la tablette Android, il va la reconnaitre et il pourra lancer l’application.

M. B : Enfaite le show user dialog, au lieu de choisir par défaut ce qui est définit, ça vous affiche une fenêtre et il vous propose ce qu’il trouve. Soit l’émulateur lancé genymotion soit la tablette USB ou en bas on peut choisir l’émulateur propre…

Matthieu : C’est génial !

M. B : Voilà, là on peut dire directement, pareil sur Xcode, si on branche son iPad il le reconnait, par contre il faut installer un certificat de développeur sur le matériel, c’est Apple qui est beaucoup plus sécurisé, et après on peut installer l’application.

Mattieu : Donc si je branche mon iPhone 6 sur le Mac, et que j’ai pris un certificat, je crois que c’est payant avec Apple ?

M. B : Alors je ne sais pas à partir de quel moment c’est payant, c’est à partir du moment ou on l’utilise sur l’App store normalement, c’est à voir, on reviendra dessus dans les prochaines vidéos.

Matthieu : Voilà et après une fois que tout est en règle au niveau du certificat avec Xcode ça envoi à l’application sur l’iPhone et on test en direct, c’est magique.

M. B : Moi j’ai une tendance à fonctionner comme ça avec les périphériques parce qu’au niveau des temps de réponse c’est différent aussi.

Matthieu : Et on se rend compte au niveau du touché, du tactile, de la réactivité de l’application, je trouve ça magnifique.

M. B : Tout est simplifié, les outils aujourd’hui de développement sont géniaux parce que ça simplifie tout.

Matthieu : Et donc pour lancer vous cliquez sur la flèche run android, je parle en anglais, lecture android, vous choisissez genymotion, parce que là on a pas branché de…

M. B : Voilà, c’est cette fenêtre que je vous parlais, si vous aviez branché une tablette directement en USB elle apparaitra en dessous de genymotion, et en bas vous pouvez choisir l’émulateur de base de l’application.

Matthieu : Donc Ok, justement ç ava compiler l’application et la créer, donc il faut un certain temps c’est normal.

M. B : Et lancer sur l’émulateur.

Matthieu : Et lancer l’application sur l’émulateur une fois que ce sera terminé.

L’émulateur est là je, pour le débloquer, voilà, et voilà l’application est lancée avec le menu de playlist, on peut revenir sur le bouton home, vous avez l’icône cordovas avec l’application dev facile, et vous avez un système de menu. Et maintenant peut être que vous, développeur, vous vous demandez le menu c’est bien gentil mais rayé, chili, indi, ça correspond pas… Est-ce qu’on peut personnaliser ça Mathieu ?

M. B : Oui très facilement dans le code, alors je vais toujours vous renvoyer vers la documentation des framework qui est très bien faite, on est sur la documentation, remonte tout en haut, et tu vas sur doc, voilà et après tu vas choisir CSS, ce sont tous les éléments visuels ou on peut mettre les headers, footers avec ce que l’on souhaite au milieu, tête et pied de page, descend, n’hésites pas à défiler, elle est très bien faite, ça se met à jour sur l’écran à coté, on voit directement les résultats, c’est super. Ils fournissent un nombre de composants assez impressionnants, tout ce que l’on trouve déjà sur nos téléphones.

Matthieu : Il y a tout ce qu’il faut.

M. B : Voilà avec les choix de couleurs, voilà tout est déjà fait, tous les centrage de pages.

Matthieu : Toutes les dernières fonctionnalités ici je dirais à la mode, ce qu’invente Apple, ou ce qu’invente Android dans leurs interfaces vous pouvez les réutiliser directement avec Ionic framework. Et en plus il sont jolis, il y a le choix de la couleur, de la taille des icônes, des boutons.

M. B : Ionic fournit aussi un grand lot d’icône qui est en séparé, si on revient sur la page précédente, on a accès aux icones, vous irez voir vous-même pour voir.

Matthieu : Là il y a beaucoup d’icones.

M. B : Voilà tous les menus que l’on connait sur nos téléphone.

Matthieu : C’est super et du coup comment on personnalise le menu ?

M. B : On ouvre directement Xcode, du coup.

Matthieu : Ah on va le faire dans Xcode ?

M. B : Oui.

Matthieu : Moi je pensais qu’on pouvait modifier le code source directement ici.

M. B : Directement ici ?

Matthieu : Directement dans les fichiers ?

M. B : Ah ba oui, on peut aller directement, mais après prendre un éditeur, oui allons directement oui dans ce… servons nous en pour présenter cette structure.

Matthieu : Je te laisse présenter la structure, tu connais mieux que moi j’avoue, moi je sais développer après Ionic, je découvre grâce à Mathieu.

M. B : Chaque plateforme de développement à ses spécificités donc, voilà. On ne peux pas toujours tout connaitre, donc, le menu, le projet Ionic est très bien organisé, on trouve principalement à la racine ce qui va nous intéresser, ce sont le répertoire www ou il y a le projet de base, enfaite quand on lance les lignes de commandes de compilations, ça va directement mettre à jour dans les dossiers plateformes pour chaque plateforme iOs, voilà, c’est le dossier www de base de notre application.

Matthieu : Enfaite c’est là ou il y a tout le code de l’App…

M. B : L’application est là.

Matthieu : La web App.

M. B : La web App est là.

Matthieu : C’est génial, ça veut dire que si vous par exemple vous avez développé un jeu pacman en JavaScript HTML5 qui fonctionne sur le web, vous copiez votre code avec un fichier index.html, là-dedans avec vos graphismes, sans rien changer dans un projet Ionic, vous cliquez sur run.

M. B : Et voilà il va lancer le index html en automatique.

Matthieu : Et vous avez votre application sur iPhone, sur Android, alors que 5 min avant elle était sur le web. C’est fabuleux.

M. B : Voilà c’est la simplicité du framework. Alors là c’est lié plus à cordovas qu’à Ionic puisque c’est la base cordova, Ionic nous apporte la couche graphique et l’inclusion de angular qui va nous lier angular avec les pluggins standrads de cordovas, qui peuvent être par exemple des pluggins de bases de données, des pluggins de gestion de la mise en veille de l’appareil, etc. Il y a un grand nombre de pluggins, il suffit d’aller directement dans rechercher la librairie NG cordovas sur internet, et vous avez un grand nombre de pluggins proposés qui sont fait pour aller. MG cordovas c’est développé par la même équipe que Ionic, enfaite, ils sont pour lier les pluggins cordovas avec le angular et le fonctionnement de Ionic, ils vous permettent d’accéder à des background, toutes les fonctionnalités qui sont l’appareils photo, le GPS, toutes les fonctionnalités de bases y sont déjà.

Matthieu  : Ce que je vous propose pour toujours garder des émissions courtes que vous pouvez mettre en pratique rapidement, dans la prochaine émission vous allez découvrir comment modifier le code source menu, comment réutiliser vos applications web existantes directement en profitant du framework Ionic, je remercie énormément Mathieu de partager son savoir avec vous, j’espère que ça va vous aider en tant que développeur, à profiter du potentielle immense sur les tablettes sur les smartphones, que ce soit sur iOs, ou sur Android et surtout vous allez gagner énormément de temps comme Mathieu est en train de basculer son application sur Ionic au fur et à mesure, est-ce que tu veux rajouter quelque chose, un conseil ? Ou on garde pour la prochaine émission ?

M. B : Un petit conseil, n’oubliez pas de maintenir toujours au courant des dernière activités, Ionic il faut s’inscrire sur la newsletter, c’est un framework qui évolue en permanence, ils sortent de nouvelles fonctionnalités en permanence, dernièrement ils ont sorti la fonctionnalité ressource qui est une fonctionnalité qui permet de créer, là vous voyez qu’il y avait l’icône de cordovas de base, on créé au format PSD Photoshop notre icône et sachant que les plateformes, les stores on des formats différents pour chaque photos, ont chacun leurs format, ressource permet de compiler à partir de ce PSD de créer tous les formats nécessaire pour les plateformes sur lesquelles on travaille.

Matthieu  : C’est un travail énorme parce que sur iOs les images ont une certaine taille, il faut que ce soit du PNG, du GIF ou je ne sais pas, Hd ou pas HD, et là PSD.

M. B : Sur chaque parce que justement les icones comme les matériels, il y a les iPhone les iPad et donc c’est des différentes tailles d’écrans, il faut qu’on fournisse aujourd’hui, je ne sais plus, on doit… Plus d’une 20aine, d’icônes différentes rien que sur Apple, quand j’ai mis une application sur l’App store il y a plus d’une vingtaine de formats qui est demandé, avec des formats en minuscule et des formats en gros, parce que aujourd’hui par exemple quand on va dans les installation de menus on trouve en petit formats. Mais quand on l’a sur son menu standard quand on revient sur le home on le trouve en grand format. Donc toujours vous maintenir au courant de toutes les évolutions technologie, MG cordovas c’est important aussi parce que c’est tout les accès aux options, aux fonctionnalités de votre téléphone, vraiment toujours se maintenir au courant des évolution de ces technologies.

Matthieu : Merci Mathieu pour ce conseil inestimable, inscrivez-vous dans les lettres d’informations que ce soit cordovas, Ionic framework, même angular Js, d’ailleurs sur angular JS vous allez recevoir énormément de tutoriels développement facile.

Encore une fois je te remercie Mathieu pour tous ces conseils, on se retrouve dans la prochaine émission développement facile, en attendant si vous voulez allez plus loin dans le développement d’applications ou de jeux pour les mobiles, les smartphones, qui soient sur iOs, sur android, je vous invite à cliquer sur l’image au dessus de nous, il y a un lien cliquable, vous allez etre redirigé vers une deuxième vidéo ou vous allez apprendre comment une équipe, l’équipe d’experts développement facile va vous aider, vous, à créer des applications performantes, cette équipe est là pour répondre aux difficultés que vous rencontrez pour utiliser telle ou telle fonctionnalité dans tel ou tel cours, dans vos projets, vous allez découvrir comment mettre à profit la méthode développement facile pour coder deux à trois fois plus rapidement, les modèles de conceptions, angular JS, phaser, ionic framework, tout est expliqué dans la deuxième vidéo, c’est complet hein. Cliquez sur la bannière au-dessus de nous, je vous dis à très bientôt pour la prochaine émission développement facile, merci Mathieu et à bientôt.

M.B : De même merci et à bientôt.

[/ppmtoggle][/ppmaccordion]

Voici les liens pour installer ionic Framework

Les liens des sites officiels

• Cliquez ici pour voir le site ionic Framework
• Cliquez ici pour visiter le site Node.js
• Cliquez ici pour le SDK Android Studio
• Cliquez ici pour Xcode depuis iTunes
• Cliquez ici pour Java pour OSX
• Cliquez ici pour genymotion
• Cliquez ici pour VirtualBox
• Cliquez ici pour corriger l’environnement de développement Android sur Windows, OSX et Linux

Les liens de téléchargement direct

Les logiciels sont disponibles en téléchargement direct depuis les serveurs Développement Facile.

• Cliquez ici pour télécharger la machine Java pour Mac OSX 2014
• Cliquez ici pour télécharger VirtualBox 4.3 pour Mac OSX
• Cliquez ici pour télécharger Android Studio pour Mac OSX
• Cliquez ici pour télécharger genymotion 2.3.1 pour Mac OSX
• Cliquez ici pour télécharger Node JS 0.12 pour Mac OSX

Posez vos questions sur le Framework Ionic

Utilisez la zone commentaire pour poser vos questions sur Ionic à l’équipe Développement Facile.