Créer une application mobile avec Ionic 2 et Angular 2

Lancer la compilation et tester le rendu

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à utiliser une commande pour lancer un rendu dans le navigateur web. Ainsi, vous pourrez observer les modifications en direct.
08:00

Transcription

Maintenant qu'on a vu tout ça je sais que vous mourez d'envie de faire une petite compilation. Comment va marcher, la compilation? Si vous allez dans le Setup, ou mieux que ça, si vous allez dans l'outil en ligne de commande en bas, vous verrez qu'ici on a Serve. Quand vous allez aller sur le Serve, on va vous dire qu'il y a une commande, Ionic serve. Avec les dernières versions d'Ionic, tout est en train de basculer sur npm Et c'est normal, parce que tout les projets sont en train de basculer tout doucement sur npm pour la gestion des différents packets, mais aussi des commandes. Comment on fait quand on sait pas? on essaye de regarder si dans package.json il y aurait pas par hazard ici des commandes déjà définies et qui nous permettent de travailler. En l'occurrence, on voit qu'effectivement si, il y a bien une commande qui s'appelle Ionic:serve. Comment ça marche pour lancer cette commande-là ? Et bien c'est très simple; en console, ici, vous allez faire un npm run , faites bien attention à vous trouver dans le dossier de votre application. npm run ... et on va lui dire: ionic:serve. On va carrément coller à cette commande qui est ici, C'est les script npm et on les lance par npm run, et le nom du script. On va lancer ça, et qu'est-ce qui va se passer? Ici le projet Ionic va se mettre à compiler, il va compîler absolument toutes les ressources, c'est à dire il va compiler les différents fichiers qu'on a sur notre application, il va nettoyer ce qu'il peut, il va copier les informations, il va utiliser webpack pour faire le transfert d'informations de toutes nos librairies, il va utiliser Sass pour compiler nos css, et puis il va lancer une tâche à la fin pour dire que c'est terminé, que ça s'est terminé, en combien de temps. on voit qu'en 15 secondes le projet a été compilé et qu'il est maintenant disponible sur un serveur qui est en train de tourner. Il faut savoir que ce qui se passe ici c'est qu'on lance un serveur automatiquement sur la machine, qui va nous servir le code, et qui va, surtout, c'est ce qu'on voit là, on n'a pas du tout la main sur la ligne de commande parce que pendant que le serveur est en train de tourner, il attend qu'on fasse des modifications. Si on fait des modifications dans le code la phase de compilation va se relancer uniquement pour les fichiers qu'on a modifiés. Maintenant qu'est-ce qui se passe? Ce qui est bien, c'est que .. Ca vous a lancé automatiquement une fenêtre dans laquelle vous retrouvez votre application! On va ouvrir le panneau développeur, et ce panneau développeur, qu'est-ce qu'il va vous permettre? Et bien il va nous permettre de basculer d'un mode qui est un mode desktop, donc, un mode bureau, à un mode .. que vous avez à cet endroit là, qui est le mode mobile. Quand vous allez développer avec Ionic, vous utiliserez toujours ici la console de débug qui vous permettra rapidement d'aller voir ce qui se passe. Et surtout, ce mode, ici, qui vous permettra d'être soit sur un Galaxy S5, soit sur un Nexus, soit sur un iPhone, pourquoi pas. Attention, cependant, quand vous allez tester sur iPhone, il faudra penser à recharger la page. C'est obligatoire pour pouvoir charger le bon template en fonction du matériel. Là je vais me remettre sur un Galaxy S5, je vais recharger ma page, et là je vais retrouver un style qui correspond. Pour le moment, c'est pas très parlant parce qu'on a pas grand chose dans la page et vous verrez qu'au fur et à mesure des développements, il va se passer des choses Qu'est-ce qu'on retrouve ici ? Si vous regardez votre code source, vous allez vous rendre compte que, effectivement, on est en train de travailler sur home.html. «The world is your ..» là on a exactement le même texte, on pourrait tout simplement supprimer ça ici, On pourrait dire «tiens je vais mettre un petit h1» un titre donc, je vais fermer ma balise de titre, et ici je vais mettre «hello». Et si je mets hello comme ça, Vous allez voir que ce qui se passe, c'est que votre application est en train de recharger automatiquement et là elle va vous reservir le contenu. A chaque fois que vous allez faire une modification, et bien le contenu va changer. On pourrait, aussi, si vous êtes sur un Mac, travailler sur les deux fenêtres en même temps, ce qui est plutôt intéressant, parce que quand on travaille sur les deux fenêtres en même temps, on peut voir le rafraichissement de l'application, directement sur le côté. Vous pouvez le faire sur Windows aussi, en mettant les 2 fenêtres côte à côte, ici je vais simplement, à cet endroit là, venir modifier mon texte et je vais mettre par exemple, «hello julien», Je vais simplement recharger la page, et hop, il repart sur le build de mon application, et il vient me recharger automatiquement mon application. Ici, il y a effectivement en console, quelque chose qui se passe, c'est à dire que en console, on a également, ici, les différentes informations qui viennent se reconstruire. Sachez également que, étant donné que TypeScript est un langage qui est compilé, et qui a re rendu dans un navigateur, si vous faites ma moindre erreur, il y aura une erreur de compilation. par exemple, si ici je mets n'importe quoi, et puis là, je mets n'importe quoi aussi, et que je recharge, on va avoir un build qui va est fait, et par contre, il va malheureusement pas s'arrêter. Pourquoi il va pas s'arrêter? Parce que, ici, en fait, il va pas pouvoir vous rendre le contenu, il va obligatoirement vous donner les erreurs. Ce qui est extrêmement fort c'est que les erreurs on va les avoir à deux niveaux. Vous allez les avoir ici, à l'intérieur de votre compilation, parce que le compilateur va vous dire, non non, c'est pas possible, ça ne marche pas, tu as fait des erreurs ! Et, mieux que ça, on va également avoir ici, du débug directement dans la fenêtre des différentes erreurs. et ça c'est extrêmement puissant parce que du coup, si vous avez des erreurs, vous saurez exactement où vous avez des erreurs, et vous aurez pas besoin de chercher des heures, ce qui ne va pas, vous aurez l'erreur directement dans le rendu. Ca, c'est une nouveauté de Ionic 2 avec Angular 2 et c'est vraiment génial de pouvoir travailler comme ça. Bien sûr, en fixant le erreurs, et en réenregistrant, vous allez avoir le rendu qui va revenir directement. Ca c'est la compilation et le rendu dans le navigateur. C'est génial de pouvoir faire ça parce que pour le coup, ici, on peut travailler très rapidement et facilement et monter des interfaces très rapidement aussi. D'ailleurs, remarquez que ici on a une barre, cette barre-là c'est le Ion header qu'on a là, si je le supprime, et que je recharge ma page, je n'ai plus de Ion Header.Hop! Ca s'en va automatiquement. On va le remettre, on va recharger effectivement, le build va repartir et hop, on va se re-retrouver ici avec la nav bar et avec le Ion header. Pareil avec le padding, si je l'enlève et je le recharge, automatiquement les modifs vont être prises en compte et vous voyez que, j'ai plus de padding sur ma page, je vais me retrouver avec quelque chose qui colle vraimetn au bord. Donc on peut travailler très rapidement, la compilation, vous n'avez pas besoin de vous en charger plus que ça, vous la lancez, et puis après ça se fait tout seul, vous n'avez rien à faire. Vous, tout ce que vous allez avoir à faire en tant que développeur, c'est coder la différentes pages, coder les différentes fonctionalités, en fait, vous vous concentrez sur la logique, et plus sur tout ce qu'il y a autour. Et ça, c'est fantastique de pouvoir travailler comme ça. Pour terminer sur la compilation et le rendu, on va faire un petit tour dans le dossier www, qui a beaucoup changé. On remarque que les assets on été copiés. Sous les assets, on a ici toutes les fonts, qui sont polices d'écriture, les icônes, parce qu'on avait des icônes, et surtout ici dans build, on va se retrouver avec ce qui est utilisé actuellement par votre application: Un main.css, qui sont vos styles compilés - donc ça c'est tous les styles css de votre application, et, dedans, si vous faites une recherche, vous devriez normalement retrouver la home page qu'on avait on va faire recherche de home page ... et logiquement vous devriez bien avoir le tag home page quelque part. par contre, là il ne me le trouve pas, peut-être parce qu'on n'avait rien dedans ... C'est pas très grave pour l'exemple, ici vous retrouverez bien tous vos styles compilés, ensuite on a un main.js et lui, pour le coup, c'est la même chose: ici c'est la compilation de toute votre application, alors y a pas grand chose pour le moment, mais il y a quand-même tout le code Ionic qui se trouve à l'intérieur. Ce fichier est extrêmement long puisque c'est toutes les bibliothèques. Par contre, c'est rapide au niveau de votre appli parce que il y a qu'un seul fichier à charger. il y a également les polyfill qu'on trouve ici, qui sont ajoutés, ils sont insérés aussi, et on a surtout un index.html, qui est le même que tout à l'heure, et qui vient en récuperer les bonnes informations Là, rien à faire de particulier, ce dossier, vous y touchez pas c'est le dossier dans lequel vous aurez la compilation de votre application, Je le rappelle, vous n'avez que certains fichiers à toucher, qui sont tous les fichiers se trouvant dans src, et voyez que la compilation est rapide, une commande, un rendu, et puis on peut travailler directement.

Créer une application mobile avec Ionic 2 et Angular 2

Développez vos applications mobiles avec AngularJS et Ionic. Mettez en place un projet et exploitez les nombreuses possibilités offertes par l’écosystème Ionic.

2h25 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !