Retrouvez un guide d’installation du Framework Ionic pour développer des WebApp sur Androïd et IOs avec Mathieu Boulord
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Emission #13 – Installation de ionic Framework pour développer des WebAPP sur Android et iOS
Matthieu : Bonjour et bienvenu sur développement facile. Ici Matthieu, les deux Mathieu
M. B : Les deux Matthieu maintenant.
Matthieu : Aujourd’hui Mathieu m’a fait le grand plaisir de revenir pour vous expliquer la création d’applications sur les mobiles, sur les smartphones, les tablettes, que ce soit sur Android sous iOs, et donc je laisse à Mathieu se présenter si vous ne le connaissez pas encore, il est déjà intervenu dans plusieurs émissions développement facile pour vous donner énormément de conseils issus de son expérience, Mathieu si tu peux te présenter ?
M. B : Pas de problème, merci Matthieu de me recevoir déjà dans un premier temps. Je suis Mathieu Boulord créateur de la société simplecom qui est une société spécialisée dans le développement mobile, ce sont des applications pour les forces de ventes commerciales qui permettent de prendre des commandes directement sur le terrain sans avoir forcément de connexion réseau, d’avoir une base de données embarquée avec une application qui permet de prendre les commandes. Voilà principalement ce que fait ma société et on avait échangé la dernière fois que j’étais venu sur le framework, Ionic framework, framework sur lequel je me base pour créer mes applications.
Matthieu : Et le grand avantage de Ionic framework c’est, tu codes une seule fois et tu déploie ton application sur tous les appareils Android, tous les périphériques Apple, iOs, le Web, si tu le souhaites. Et même Windows si tu le souhaites aussi et Windows phone aussi je crois ?
M. B : Du coup c’est les Windows à partir de Windows 8, cordovas, dans Ionic Framework des sous framework, j’avais échangé la dernière fois dessus et dedans il y a cordovas qui est vraiment la base qui se met sur chaque plateforme, et effectivement il y a anciennement les Windows phone, mais surtout aujourd’hui Ionic est basé sur la version 8.1 de Windows.
Matthieu : Et donc aujourd’hui avec l’aide de Mathieu, dans cette émission Développement facile, vous allez apprendre à installer tout un environnement autour de Ionic framework.
M. B : Exactement.
Matthieu : Là Mathieu est là, on a déjà préparé une installation, il est là pour vous expliquer un peu ce qu’il faut faire. Donc on va se diriger sur l’écran de l’ordinateur, déjà il suffit de vous rendre sur le site Ionic framework, d’appuyer sur get started, pour l’instant jusque-là ça va, c’est simple, vous allez vous en sortir.
M. B : Alors ce qui est bien sur les technologies actuelles c’est qu’ils ont vraiment tout simplifié et ils fournissent de très bons outils dont un outils comme online interface, un outils de ligne de commande qui permet de simplifier vraiment toute la gestion de vos projets. Vous allez voir tout de suite comment l’installer.
Matthieu : Sur l’installation de Ionic, qu’est-ce qu’ils disent ? Ils disent d’installer une note.js, on se rend sur note.js, vous vous rendez sur note.js, vous cliquez sur install, en fonction si vous êtes sur Windows ou sous Mac, donc là nous nous sommes sur Mac, je vous montre une installation sous Mac tout en sachant que sous Windows c’est pareil avec deux trois petites particularités.
M. B : A peu près similaire, sur chaque plateforme de toute façon il y a des avantages et des inconvénients. Ca dépend sur quelle plateforme on veut compiler l’application finale, il ne faut pas confondre l’application sur lequel ont créé l’application, et l’application sur lequel il va devoir s’exécuter.
Aujourd’hui moi par exemple, je développe sur Mac parce que je peux développer et compiler sur toutes les plateformes, sur un Mac, je peux compiler sur iOs, pour Android et j’ai bien sur une vieille machine virtuelle de Windows qui me permet aussi de compiler des applications pour Windows.
Matthieu : Et donc du coup vous installez node.js, comment ça se passe ? Vous avez téléchargé, un fichier PKG, il suffit de double cliquer dessus, vous connaissez et de suivre, de faire l’installation. Ensuite, vous revenez sur Ionic framework, qu’est-ce qu’ils vous disent ? D’installer la ligne de commande, install cordovas Ionic, c’est ça, donc qu’est-ce que vous faites ? Vous ouvrez un terminal, et vous tapez cette ligne de commande, il y a déjà des choses qui ont été faites ici, vous tapez cette ligne de commande et ça va vous installer le framework cordovas et Ionic.
Ensuite, qu’est-ce qu’il faut faire ? Il faut installer Android.
M. B Alors ça dépend sur quelle plateforme vous souhaitez développer vos applications, si vous souhaitez développer pour Android, vous installez Android studio qui est le compilateur officiel de Google pour les applications de la plateforme Android, si vous souhaitez compiler pour iOs vous installez Xcode qui est l’outil.
Matthieu : Nous on va se mettre dans le cas où on souhaite développer une application, on est sous Mac on veut développer une application sur les iPhones, les iPad et les périphériques Samsung galaxy, galaxie note pad
M. B : Ba Android….
Matthieu : Donc on installe, vous devez installer Android studio, vous aurez toutes les URL en dessous de l’émission développement facile, vous cliquez sur download, là il reconnait que c’est un Mac donc je dirais simplement paf. Et pareil vous aurez un fichier .dmg cette fois, toujours très facile à installer sous Mac, vous cliquez dessus vous faites un glisser déposer dans l’application, on n’en parle plus. Pour xCode c’est encore plus simple sous Mac, désolé si vous êtes sous Windows, sous xCode vous lancez l’App store, et vous cliquez sur obtenir et voilà c’est réglé.
M. B : Voilà il n’y a rien de plus simple.
Matthieu : Après petite particularité, quand on lance Android, vous aurez besoin de Java. Je vous laisse Mathieu le plaisir d’expliquer.
M. B : Oui parce qu’il y a quelques petites choses à savoir là-dessus, quand on installe Java sur Mac, Ok ça fonctionne pour surfer sur internet, sauf que quand on lance Android studio on a une belle erreur qui nous dit « je ne trouve pas Java » et après de multiples recherches, je me suis aperçu que Apple avait développé un autre installeur de Java qui est vraiment spécifique parce que avant maverik j’avais pas ce problème-là, c’est quand j’installais la dernière version iOs maverick que du coup il ne trouvait plus la variable de déclaration Java, et du coup Apple sur son site, on vous fournira le lien après sous la vidéo, on trouve directement un Java pour OS X 2014 qui permet de ne pas avoir cette erreur au démarrage.
Matthieu : Il suffit de l’installer aussi, il me semble que c’est un fichier dmg très simple, et là vous pouvez lancer Android studio. Voilà, il se lance, parce qu’il a trouvé la machine Java. Voilà donc pour l’instant je pense… Ah si il y a autre chose à installer qui va vous être très utile, c’est Mathieu qui m’a conseillé ce produit-là, c’est GENYmotion, qui est un émulateur d’Android, je laisse Mathieu présenter GENYMotion, à quoi ça sert, pourquoi l’installer.
M. B : Alors GENYMotion enfaite j’ai découvert par pur hasard à un séminaire, c’est développé par des français malgré que le site est tout en anglais, la personne nous avait présenté ça et c’est vraiment un outils très utile parce qu’on peut installer n’importe quelle version d’Android sur son pc, ce sont des machines virtuelles qui s’installe, tout est pré fait, et donc on a plus qu’à lancer la machine virtuelle qui correspond au périphérique que le souhaite, par exemple on retrouve tous les Samsung galaxy, les Google Nexus comme machine virtuelle, donc on peut tester déjà sur les version d’Android correspondant à ces machines là et en plus on a aussi les différentes versions d’Android ou on a des plateformes génériques matérielles, on a différentes version d’Android 4.2.2 qui est la version vraiment qui a commencé à être beaucoup commercialisée avec les tablettes et aujourd’hui on est à la version 5 d’Android qu’on trouve sur les derniers téléphones. Voilà, vous trouvez directement, c’est un outils très simple une fois qu’il est installé, on vous propose une liste de machines virtuelles, vous choisissez et vous lancez la machine virtuelle et il n’y a plus qu’à travailler dessus, il n’y a plus qu’à compiler et exécuter dessus.
Matthieu : Et vous pouvez simuler des tablettes aussi.
M. B : Oui il y a les tablettes, on trouve vraiment tous les périphériques Android grand public.
Matthieu : Et j’ai oublié quelque chose, vous devez aussi installer VirtualBox, si vous ne connaissez pas ça permet d’émuler des environnements, par exemple, on peut émuler un environnement Windows sous Osx et là on va l’utiliser pour quoi VirtualBox ?
M. B : Tout simplement sur GENYMOTION puisque GENYMOTION comme j’ai dit il installe des machines virtuelles, c’est des émulations de plateformes Android, et il se sert de VirtualBox donc c’est juste enfaite, VirtualBox vous ne l’utiliserez pas directement dans ce cas-là, c’est GENYMOTION qui va se servir de VirtualBox pour lancer ses émulateurs de téléphones sur votre ordinateur.
Matthieu : Très pratique VirtualBox c’est gratuit c’est ça ?
M. B : Voilà c’est gratuit.
Matthieu : Et GENYMOTION pour une utilisation personnelle est gratuit aussi donc c’est génial. Et est-ce qu’il y avait d’autres choses ? Non ? Ah si vous allez peut être rencontrer une erreur, il y a une petite vidéo à part pour vous expliquer une erreur, il y a deux liens à taper, en fonction de votre répertoire d’installation vous avez un exemple avec mon répertoire d’installation qui vous montre les deux lignes de commandes, parce qu’enfaite, si vous lancez votre terminal, et que vous tapez Android, là je vais lancer le terminal, je tape Android, normalement, ça doit reconnaitre et lancer Android.
M. B : Directement le SDK.
Matthieu : Directement Android, et vous serez peut être dans le même cas que moi j’ai rencontré, Mathieu m’a donné les explications c’est que j’ai pris Android mais Android n’est pas reconnu parce que le répertoire n’est pas bon. Et donc le but c’est d’associer le répertoire Android HOME à votre répertoire d’installation. Et donc il y a une petite vidéo qui va se lancer qui vous montre les deux lignes de commandes que vous voyez ici à l’écran, à adapter votre répertoire d’installation avec le chemin bien précis dans le SDK d’Android, et après à faire, à associer la variable Android HOME à votre répertoire.
Matthieu : Et donc revenons à Android pour terminer cette première émission développement facile sur toute l’installation, est-ce qu’on a tout installé là ?
M. B : Il me semble que oui. On est prêt à fonctionner.
Matthieu : Donc un truc qui vous sera très utile c’est via le terminal, de lancer Android, pourquoi lancer Android ça vous permet de faire toutes les mises à jour. Comme vous avez vu dans la précédente vidéo pour corriger les deux lignes de commandes, il y avait une mise à jour, là toutes les mises à jour ont été installées, mais automatiquement il suffira de cliquer sur install package, toutes les mises à jours seront installées, et vous pouvez installer des API supplémentaires si vous en avez besoin.
Pour l’instant, tout ça c’est parfait, donc là vous êtes prêt à commencer un projet avec Ionic framework, on va terminer cette émission sur l’installation de Ionic framework, dans la prochaine émission, Mathieu va vous montrer comment créer un projet avec Ionic framework que vous allez pouvoir déployer sur vos iPhone, vos iPad et Android, un dernier mot pour la fin Mathieu ? On se laisse la surprise pour l’émission prochaine ?
M. B : On laisse la surprise pour l’émission prochaine.
Matthieu : Rendez-vous dans la prochaine émission développement facile, en attendant si vous avez des questions, posez les directement sous cette émission, posez vos questions sur Ionic framework, ça va nous permettre de définir les thèmes des prochains cours, et si vous voulez vraiment aller beaucoup plus loin je vous invite à cliquer, il y a un lien, une image cliquable, qui va vous renvoyer vers une deuxième vidéo ou vous allez apprendre comment créer des applications pour les mobiles, les tablettes, à utiliser des frameworks, le framework Phaser par exemple, Angular.js, à créer des jeux, des application beaucoup plus rapidement, à travailler en équipe, le but c’est de créer une architecture solide grâce à angular.JS, tout ça c’est expliqué dans la deuxième vidéo, cliquez simplement sur la bannière là, juste au-dessus de nous et vous saurez tout pour créer des applications qui soient pour le web, sur smartphone, sur iOs, sur Android, sur les tablettes, en tout cas je remercie Mathieu de partager énormément d’informations avec nous, lui il a rencontré toutes ses difficultés, il a relevé tous ces défis et il accepte de partager tout son savoir avec vous. Merci bien, je vous dis à très bientôt dans l’émission développement facile.
