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

Découvrir l'architecture

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Appréhendez l'organisation des dossiers d'un projet basique créé en ligne de commande. Ensuite, intéressez-vous à ce que contiennent les dossiers.
07:11

Transcription

Maintenant qu'on a fait l'initialisation du projet, qu'est-ce qu'on trouve dans les différentes dossiers? Il y a énormément de dossiers, puis pas mal de fichiers qui sont déjà configurés. On va y aller au fur et à mesure, et puis je vais vous expliquer comment ça marche. D'abord, un «package.json». Ca, ça va venir définir les différentes dépendances que vous avez sur votre projet. Maintenant, tout est géré par NPM et ce qui permet de faire fonctionner NPM, c'est ça. Concrètement, c'est des dépendances qui sont récupérées et qui sont installées; votre projet étant dépendant de cette librairie là, elles y sont installées. Toutes ces librairies, ici c'est des librairies "core", C'est ce dont a besoin Ionic pour fonctionner. Vous aurez possibilité, vous après, d'en rajouter si vous devez travailler avec des paquets Angular 2, puisque on fait ici, de l'Angular2 pur. On a également des scripts, qui sont définis ici: Un script clean, un script build, un script ionic build, et un script ionic serve. On en reparlera plus tard, mais, ces commandes-là vont vous permettre de démarrer, de faire fonctionner votre projet sur le navigateur, de le construire. Et de le nettoyer, pourquoi pas. On a également accès à des plugins Cordova qu sont installés par défaut. Ca c'est vraiment, le bootstrap par défaut, c'est des choses dont on a besoin par défaut, donc forcément le clavier, la splashscreen, c'est l'écran du début, du démarrage de l'application. Device, c'est obligatoire aussi, pourquoi, parce que device ça va être vraiment la machine, le téléphone sur lequel c'est installé, Statusbar, qu'on a ici, nous permet d'avoir des informations par rapport à la statusbar du téléphone, Console, vous comprenez, c'est le plugin console qui permet de communiquer, et puis la whitelist, ça c'est un peu obligatoire puisque c'est des choses qui nous permettent de définir sur notre projet quelles sont les autorisations qu'on va demander à la personne qui installe notre application. Ensuite, on vous dit en dessous qu'il y a une plateforme par défaut moi, c'est Ios, si vous êtes sur un ordinateur Windows, ce sera pas Ios qui sera mis par défaut, mais plutôt Android, parce que je suis actuellement sur un Mac donc c'est cette version là qui m'est proposée en premier. Mais c'est pas forcément celle-ci que j'aurai si je suis sur un Windows. Alors ça c'est pour le package.json, qui définit vraiment le projet. Ensuite on a un Ionic config.json. Alors celui-ci a juste à définir quelques petites informations: est-ce que c'est de la v.2, en TypeScript ? effectivement on est sur de l'Angular 2, en TypeScript donc ça définit ça à «true», et l'app_id, que vous aurez plus tard. Quand vous allez publier, il y aura un app-id. Pour le name, vous l'avez défini, c'est le nom de votre dossier, c'est le nom de votre projet. Ensuite on a une config.xml. Alors celle-ci est un peu particulière, parce que c'est toute la configuration qui va faire fonctionner les environnements. Là pour le moment c'est Ios mais on pourra avoir cette configuration également pour Android, et les paramètres ne sont pas forcément les mêmes à chaque fois, et ici, on va pouvoir fixer certaines valeurs, ça c'est les valeurs que vous connaissez si vous avez déjà fait de l'application Native, sinon c'est pas très grave, vous inquiétez pas, sachez qu'il y a pas mal de choses à récupérer ici et à customiser, parce que de temps en temps, vous aurez besoin de toucher à ce fichier, pour ajouter des paramètres supplémentaires, des autorisations supplémentaires ou ce genre de choses. Ensuite on a quoi? Un gitignore, forcément, on vient le fixer, si on versionne le projet par git, déjà tous les dossiers qui seront ignorés. L'editorconfig, on n'a pas besoin d'en parler, mais c'est la configuration de votre éditeur actuel, moi puisque que suis sur Visual Studio Code, c'est la configuration de Visual Studio Code. Je vous conseille quand vous faites un projet, en JavaScript, en Angular, d'avoir des annotations à 2 et des espaces pour les tabulations et non pas des tabulations réelles. Parce que c'est vraiment pas très propre, donc on va rester sur une config qui est celle-ci, qui est très très bien, très simple. Ensuite on trouve un panel de différents dossiers. Alors les hooks qu'on a ici, on vous l'explique un peu, un hooks, c'est un hook Cordova, qu'on va pouvoir se plugger sur certains types d'évènements Cordova, donc ce sera possible de se plugger dessus et de faire des choses, ça va dépendre des plugins que vous allez utiliser. il faudra lire ce que sont les hooks sur internet, parce qu'on n'en parlera pas dans cette formation, mais ça peut être intéressant sur certains Scripts, pour venir se greffer dessus, ça c'est un peu le côté avancé de la chose, on n'utilisera quasiment jamais ce dossier. node_modules, ça c'est l'installation de toutes les dépendances. Ca, pareil, vous aurez quasiment pas besoin d'y toucher, parce que c'est les dépendances du projet, et c'est simplement les paquets installés par node, donc ça, on ne touche pas, on le laisse tranquille. Ensuite on a platforms. Ici, vous aurez vos différentes plateformes. Pour le moment, moi, j'ai Ios. Si j'installe la plateforme Android en plus, j'aurai Android également. C'est dans ces dossiers là, quand vous irez faire un build de l'application, que vous allez créer l'application pour la poser sur un téléphone réellement, que vous aurez les différents fichiers. Vous aurez les fichiers de compilation aussi, et, vous remarquez quelque chose c'est qu'on a déjà ici un projet Xcode project, qu'on peut ouvrir avec Xcode sans problème. Ce sera pareil pour Android Studio, il y aura un dossier que vous pourrez ouvrir avec Android Studio. Les plugins, sont les plugins installés. Pour le moment y a que les plugins de base, vous allez pouvoir en récupérer autant que vous voulez et en installer autant, puisque ce sont les plugins natifs qui viendront se caler dans le dossier des plugins. Ca, c'est pas un endroit que l'on va toucher. Par contre, il faut le savoir, c'est dans ce dossier que vous aurez les plugins, si vous avez besoin d'aller regarder un plugin de regarder son source de voir un peu comment ça fonctionne, il faudra aller là-dedans et il faudra regarder comment sont faits les plugin, vous auriez peut-être l'envie vous aussi de développer un plugin Cordova, parfois il existera pas, vous pourrez le développer vous-même. Ce n'est que du JavaScript qui relie une brique Native mais on en parlera plus tard. Resources est extrêmement important puisque dans les resources, vous aurez les icones et les splashscreens. Alors je ferai un petit topo là-dessus, on en reparlera mais, l'icone de votre application et le splashscreen, c'est à dire l'image qui s'affichera quand votre app sera lancée, c'est stocké à un endroit, y a une commande pour les générer, et vous pourrez les modifier comme vous le souhaitez. Enfin, le dossier qui nous intéresse vraiment, le dossier src. Ici c'est le dossier, vraiment, de votre application c'est à l'intérieur de ce dossier là que l'on va venir coder les informations c'est ce dossier que vous toucherez, et quasiment aucun autre vous aurez besoin de toucher. car c'est vraiment dans src que l'on va coder l'application. C'est les sources de votre application, attention, c'est pas du tout la compil de notre appli là c'est les sources pures de notre application. On va faire après bien sûr un petit passage sur ça, parce qu'on va devoir travailler à l'intérieur, puis on verra comment c'est organisé pour les sources réelles du projet, sachez-le, les sources de votre projet, c'est le dossier src. Vous aurez ici, quand on aura pour la 1ère fois, compilé et fait un test dans le navigateur mais vous aurez tous les fichiers compilés à cet endroit là. www c'est donc ce qui sert de racine à Ionic, quand on va travailler notre navigateur. A chaque fois que vous ferez un lancement de votre app dans le navigateur, elle sera forcément compilée par Ionic, et tout ira dans www, et à partir de là, on aura des fichiers compilés. Ca, on ne le touchera pas réellement non-plus, C'est à dire, ici y'aura que des choses compilées on aura pas besoin d'aller regarder, mais si vous voulez savoir si tout s'est bien passé pour la compilation, vous pouvez regarder là, si vous trouvez bien vos images par ex, ce genre de choses, Les assets, c'est assez important on voit qu'il y a un dossier assets ici on pourra regarder si c'est bien répercuté et copié dans le dossier www. Voilà pour la structure globale vous voyez qu'en réalité c'est extrêmement simple il ya qu'un seul dossier plus ou moins à toucher c'est src, c'est ici qu'on va travailler, et tout le reste, c'est des choses qui sont plutôt gérées par Ionic, ou alors, qui vont être utilisées par Node et par NPM.

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 !