Emission #15 – Créez une application WebAPP pour iOS et Android avec ionic framework et Genymotion

Découvrez le fonctionnement de Ionic Framework pour développer des webapps compatible iOS et Androïd en compagnie de Mathieu Boulord chef d’entreprise et créateur de la société Simple Com utilisant cet technologie.

Tout est dans le vidéo ci-dessous.

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

Emission #15 – Créez une application WebAPP pour iOS et Android avec ionic framework et Genymotion

Matthieu : Bonjour et bienvenu sur l’émission développement facile. Je suis avec Mathieu.

M. B : Bonjour Matthieu.

Matthieu : Expert en développement applicatif.

Si vous avez vu les dernières émissions, Mathieu a partagé avec vous son expérience sur Ionic Framework. C’est un Framework, vous codez une seule fois avec HTML5, JavaScript et grâce à Ionic Framework vous avez tous un tas de composants, graphiques et vous pouvez déployer directement sur les smartphones, les tablettes, sur iOs, l’iPad, l’iPhone, Android et Windows phone.

Je vais laisser à Mathieu se présenter si vous ne le connaissez pas.

M. B : Bonjour, Mathieu Boulord, créateur de la société simple com, spécialiste en solutions mobiles de prises de commandes, ce sont des applications comme le disait Matthieu qui fonctionne sur les différentes plateformes mobiles, Apple, iOs, Android, et Windows, ce sont des applications qui permettent aux commerciaux sur le terrain de prendre les commandes de leurs clients en mode déconnecté, dans des endroits où ils n’ont pas forcément de connexion au réseau.

De développer ces applications ça m’a pris….

M. : Ba t’as fait plusieurs versions.

M. B : Voilà j’ai fait plusieurs versions et un jour j’ai découvert Ionic Framework qui était un grand gain de productivité pour moi puisque je n’avais plus besoin de développer pour chaque plateforme d’applications mais je développais une fois l’application en JavaScript et HTML5 et je pouvais la compiler sur n’importe quelle plateforme.

M. : Donc c’est génial parce que ça correspond exactement à l’état d’esprit de développement facile, du développement facile, parce que HTML5 JavaScript c’est assez simple à apprendre, après il faut utiliser les modèles de conceptions, mais Mathieu s’est simplifié la vie en utilisant AngularJS.

M. B : Voilà qui intègre directement ces modèles de conception.

M. / Voilà et du coup ça lui permet très facilement, bon après il faut être expert en développement, je ne dis pas que c’est à la portée, mais en apprenant au fur à mesure des méthodes de développement, il a réussis à développer des logiciels qui s’adaptent à ses clients d’entreprise, qu’ils aient un téléphone ou une tablette, sur android ou sur iOs même sur windows phone, son application fonctionnera à coup sûr.

Dans la dernière émission vous avez vu comment développer simplement un menu avec Ionic framework, vous avez vu le menu qui contenait reggay, des noms par défaut, de base. Là on va vous montrer comment personnaliser votre application avec des solutions très astucieuses, pour aller plus vite.

Mathieu je te laisse présenter, la dernière fois tu avais présenté les plateformes qui contenaient Android et iOs, et winsows.

M. B : Et le www qui contient l’application Web directement.

M. : Vous avez www qui contient l’application et dans www vous avez plusieurs fichiers, Mathieu à quoi ils servent ? comment on…

M. B : Alors ce qui est bien c’est qu’il faut Ionic fournit déjà une architecture vraiment bien découpée, idem quand on fait un site web il faut bien découper chaque partie comme on sais pour les web App, on a les css qui sont les présentations des visuels, des formats graphiques, les images, on a un dossier image, on a un dossier JavaScript qui contient tous les fichiers JavaScript, les librairies, le fichier lib qui contient toutes les librairies externes, dedans, pour cet exemple on trouve Ionic mais vous pouvez avoir des librairies que vous pouvez utiliser dans plusieurs applications comme Bootstrap…

M. : Comme Phaser par exemple.

M. B : Et les templates ce sont vos écrans que l’on trouve dedans directement, vos écrans sont dans vos fichiers HTML.

M. : Je me posais la question, avec Ionic, est-ce que c’est possible de le coupler, en PHP on peut faire du fonctionnement dynamique, est-ce que Ionic, je pense que oui, on peut le relier à une base de données MySQL pour faire un comportement dynamique ?

M. B : Oui exactement dans, enfaite aujourd’hui les navigateurs embarquent des systèmes de bases de données, c’est ça, SQL light on a accès directement, à partir de Ionic, ce qui est bien, comme je vous parlais la dernière fois de MG cordovas qui est un ancien pluggin de cordovas enfaite, que l’on importe dans les projets Ionic, car il y a une interface qui est faite avec la librairie Angular, et dedans vous trouverez la partie SQL light qui contient directement le pluggin pour gérer une base de données en embarquée.

M. : Du coup ça fait vraiment des applications, on peut mettre un système d’authentification.

M. B : Exactement

M. : Par exemple si vous faites des statistiques sur le nombre de visiteurs en même temps qui utilisent votre applications, si vous voulez faire des applications ou des jeux qui communiquent entre eux, multijoueur, c’est possible grâce à SQL light et on peut synchroniser j’imagine, Ionic Framework et une base de données, pas dans le téléphone mais décentralisée dans votre hébergement chez OVH par exemple.

M. B : Voilà, enfaite c’est Angular qui fournit les fonctionnalités de communications de base, ils sont des fonctionnalités qui permet de communiquer en mode Web, de faire des requêtes get post sur d’autres pages web.

M. : De l’Ajax quoi ?

M. B : Voilà de l’Ajax, c’est du format dynamique, directement intégré, il y a vraiment des fonctions spécifiques, ce qui est intéressant, dans Angular ce qui permet….

M. : C’est vraiment génial cette application, la seule limite c’est votre imagination.

M. B : Exactement, une fois qu’on a les bons Framework, et c’est ce que fournit Ionic, c’est un ensemble de Framework, on peut vraiment faire tout ce que l’on souhaite et exploiter toutes ces fonctionnalités de ces Framework qui sont vraiment très puissants, surtout angular, c’est le Framework de Google qui est vraiment un Framework très complets, qui apporte les modèles MVC, toutes ces fonctionnalités de bases que l’on a besoin pour les applications et vraiment de rendre facilement dynamique vos pages.

M. : D’accord, on va revenir à la personnalisation de notre application. Nous on va travailler dans le répertoire templates, toutes les vues, modèle MVC c’est toutes les vues, les interfaces de visualisation, on va modifier nos différentes vues, là on a le contrôleur, là il faut voir que c’est une version de démonstration, vous savez très bien que dans le design le modèle de conception MVC tout ce qui est donné c’est géré par le modèle. Là ils sont dans le controleur, c’est un exemple, on a personnalisé avec ActionScript, PHP, HTLM5, CSS ce que l’on voulait, par exemple on peut mettre ActionScript3, PHP5, et CSS3, comme ça on va bien le faire en direct, Angular JS, Google, et Ionic Framework.

Là on modifie en direct, vous avez la play liste ici, le menu ici, identifiant, recherche, parcourir, on va mettre langage à la place, voilà, et le fichier index.HTML vous n’avez rien à toucher, pour ça qu’on en a pas parlé, classique. Après vous reprenez tout simplement, Mathieu tu m’arrêtes si tu veux compléter ou ajouter d’autres informations, n’hésites pas.

Vous avez get started, c’est la page à connaitre par cœur, cette URL c’est votre vie.

M. B : C’est exactement ça, toutes les commandes de bases sont écrites, de la commande de base de l’installation, création du projet et les compilations qui vous permet de lancer sur différentes plateformes.

M. : Là vous avez modifié le code source dans le répertoire W, qu’est-ce que vous faites ?

Vous faites build iOs, ça va recompiler la version iOs.

M. B : Enfaite, votre répertoire www va être copié dans la plateforme iOs pour être compilé pour les plateformes iOs directement dans le projet que vous pouvez ouvrir comme xCode.

M. : Pour ouvrir android on fait un remove android, on va supprimer la plateforme android, ça se trouve il y a mieux mais pour l’instant on fait un peu avec quelques difficultés.

M. B : C’est même pas ça c’est qu’on a une erreur sur une ligne de commande, d’ici là qu’on trouve la correction…

M. : En attendant ça marche comme ça, très bien, il suffit de faire un remove et un add, voilà après vous avez plus qu’à lancer XCode, là ça fait la compilation, je vais vous montrer comment avec vos nouveaux menus, maintenant vous commencez à connaitre, vous revenez dans votre répertoire dev facile, la plateforme iOs et vous lancez xCode, c’est génial, Ionic framework.

M. B : Voilà on a plus à s’approprier chaque IDE de développement, on les lance, on appuie sur le bouton lecture et c’est fait.

M. : C’est clair le code là il a été modifié avec sublim text, je n’ai pas cette version…. Il a été modifié avec sublim text.

M. B : Tu vas réussir à ouvrir …

M. : Oui, j’ai dû le fermer ? Il est là, il a été modifié avec sublim text 2, un éditeur que je vous conseille. Je ne sais pas si tu l’utilises Mathieu ?

M. B : Non moi ce n’est pas celui que j’utilise.

M. : Note Pad++ peut être ?

M. B : Non il n’existe pas sur Mac Note pad++ donc j’ai pris swing edit.

M. : Ah oui je le connais aussi. Donc il suffit de lancer, run, sur iPhone 6, on va émuler, compiler l’application sur l’iPhone 6, il se lance, et actionscript 3, PHP5, HTLM5, angular js by google, tout a été identifiant, recherche, parcourir.

M. B : C’est une liste langage.

M. : Langage, vous avez tout, vous pouvez revenir dans le home, vous avez toujours l’icône développement facile, voilà c’est aussi simple que ça.

Pareil pour Android, vous lancez Android studio, vous refaites la même manip que la dernière fois, il suffit, on va fermer le projet en cours, on va l’importer pour avoir les nouvelles versions des librairies, si c’était nécessaire parce qu’il ne prenait pas, il réimporte les fichiers pour les écraser.

M. B : Oui mais c’est pas grave parce que ce fichier là il ne change pas, c’est pour ça qu’on a changé, ce n’est pas nécessaire ça.

M. : Si j’ai essayé tout à l’heure.

M. B : Il te disait quoi ?

M. : Ca ne reconnaissait pas.

M. B : D’accord. Ah supprimer et recréé.

M. Oui parce qu’on a supprimé le…

M. B : Oui c’est ça.

M. : Et donc vous avez pu qu’à édit configuration pour composer soit vous branchez votre smartphones Android, votre tablette Android, ou alors vous utilisez genymotion l’émulateur, ou l’émulateur du logiciel.

Set run, vous patientez quelques instants, le temps que l’application soit compilée et vous allez voir toutes les modifications qui ont été faites.

On patiente quelques instants….

Genymotion est là, le logiciel va se lancé une fois qu’il est compiler. Tu veux ajouter quelques chose ?

M. B : Genymotion ce qui est bien il peut être directement intégré à Android studio, vous n’avez pas besoin de le lancer à coté, vous trouvez directement un plugin dans les plugin standard dans les plugins studio pour lancer genymotion.

M. : On va vous montrer juste après, vous avez vu, recherche, identifiant, langage, HTML5, AngularJS by Google, il y a toutes les modifications que nous avons faites. Mathieu, tu disais on peut directement associer ?

M. B : Voilà, alors dans les préférences, Android studio, directement préférences, on peut installer dans les plugins, elle est dans browse Repositories en bas de l’écran, et là il suffit de taper genymotion, et d’installer ce plugin là, ce qui permet directement de lancer ces machines virtuelles au lieu d’ouvrir genymotion directement à partir d’Android studio.

M. : C’est génial ça simplifie encore plus les choses, il suffit de redémarrer.

M. B : Voilà et il y a une petite icône qui va apparaitre dans la barre de menu, une tite icône que l’on reconnait très bien puisque c’est l’icône en rose de genymotion.

M. : Il suffit de cliquer dessus ça va coupler l’application ? Non ça va juste lancer ?

M. B : Non c’est pas ça, ça va proposer une machine virtuelle, ah il faut indiquer où est l’application genymotion, il suffit d’aller cliquer le repertoire de l’application.

M. : Oui il est en train de chercher.

M. B : Oui il est entrain de rechercher.

M. : Vous lancez genymotion il suffit de configurer le lien, généralement c’est l’application genymotion.App.

M. B : Voilà rien de compliqué.

M. : Vous appuyez sur Ok, vous cliquez sur l’icône, vous choisissez la liste des émulateurs ou vous en créez un nouveau.

M. B : Voilà vous pouvez importer une nouvelle machine virtuelle.

M. : Nous on va utiliser un des émulateurs que nous avons créé, start, ça va démarrer l’émulateur genymotion, et ce qui fait que quand vous allez, voilà l’émulateur démarre, lancez la compilation, il va reconnaitre l’émulateur et lancer votre application, voilà il le demande, vous faites ok, et l’application va se lancer directement ici. Et donc, vous avez vu la puissance de la chose, qui fait que vous avez qu’à modifier, vous avez vu la puissance de la chose vous n’avez qu’à modifier le répertoire w avec le code qui est dans le répertoire w pour compiler.

M. B : Le compiler le pousser sur la plateforme que vous voulez.

M. : Le compiler sur la plateforme que vous souhaitez.

Est-ce que tu veux rajouter quelque chose avant de terminer cette émission Mathieu ? Un conseil suite à ton expérience de Ionic Framework ?

M. B : Pas de conseil spécialement mais je répète le dernier qui est qu’il faut toujours se maintenir au courant des évolutions technologiques, j’insiste dessus, je le redis parce que c’est vraiment très important.

M. : Et de regarder la doc qui est très complète.

M. B : Très complète et surtout on a les exemples en temps réel.

M. : Voilà il y a des exemples avec…

M. B : C’est de la partie CSS.

M. : Oui mais si ils veulent utiliser, là il y a des exemples.

M. B : Oui il y a des exemples mais ils sont moins parlant dans la partie JavaScript, parce qu’on accède à la partie JavaScript, ce n’est plus graphique, là ce sont vraiment les parties graphiques.

M. : Vous avez toute la partie graphique CSS que vous pouvez réutiliser pour vos applications, si vous avez des questions, sur Ionic Framework, posez les directement sous l’émission développement facile, je remercie encore une fois Mathieu d’avoir partagé son savoir avec nous, je sais que son temps est très précieux, il a accepté de partager avec vous tout ce qu’il a appris, une partie, pour vous aider à démarrer avec Ionic Framework, maintenant juste au-dessus de nous il y a un lien, je vous invite à cliquer dessus, vous allez apprendre à créer des applications pour les mobiles, les smartphones, à utiliser les modèles de conceptions par l’intermédiaire d’angular JS, à utiliser les Framework phaser pour créer très rapidement de jeux performants pour le web, vous allez découvrir plus en détail Ionic Framework.

Tout ça c’est dans la deuxième vidéo, cliquez sur le lien cliquable, sachez que vous n’êtes pas seul, l’équipe d’experts développement facile vous accompagne, elle est là pour répondre à toutes vos questions que vous vous posez, j’ai un exemple du cours développement facile, je ne sais pas comment le mettre en place, l’importer dans mon projet comment faire ?

Vous posez votre question, l’équipe développement facile vous répondra, vous donnera des exemples supplémentaires, tout est expliqué dans la deuxième vidéo, cliquez sur le lien, je vous dis à très bientôt dans la prochain émission développement facile merci Mathieu et à bientôt.

M. B : A 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 Ionic Framework

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