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

Initier un projet en ligne de commande

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce aux outils en ligne de commande, démarrez en toute simplicité avec une trame déjà construite. Par la suite, vous pourrez l'adapter à vos besoins.
05:09

Transcription

La première étape, quand on démarre un projet Ionic, en version 2, ça va être de l'installer. Il va falloir «bootstrapper», - c'est comme ça qu'on le dit - bootstrapper le projet, et donc le démarrer. Pour le démarrer,vous pourrez vos rendre ici, dans la page installation, sous la section «Set-up», qui vous permettra d'installer cette version de Ionic. Comment on va initialiser un projet? C'est très simple. Vous avez déjà installé les outils en ligne de commande, et comme vous les avez, vous allez pouvoir utiliser la commande «Ionic Start», qui vous permettra de démarrer un projet. Il faut donner à Ionic Start un nom de dossier, il faut pas l'avoir créé à l'avance parce que lui va le créer automatiquement puis, la version: « -- v.2». Pourquoi on donne la version «-- v. 2» à Ionic? Simplement parce que cet outil ligne de commande a été créé pour Ionic 1, pas pour Ionic 2. Si on veut une version 2, pour le moment il faudra ajouter le flag «- - v. 2». Peut-être qu'à l'avenir on n'aura plus besoin de le faire car la nouvelle version sera mise en avant, mais c'est pas grave, si vous mettez pas le « - - v.2», vous serez sur une version Ionic 1. Nous on va travailler sur une v.2 donc on va utiliser cette commande là. Attention parce que, sur la page d'installation, on vous donne pas toutes les infos. Je vous montre. On va dans la section tutorial, et là on va voir qu'effectivement, dans cette section là, on vous donne un peu plus d'informations. Notamment, on vous parle de templates. Il faut partir d'un principe, c'est que si vous démarrez avec la commande de base, Ionic Start, Ici, avec un nom de projet et juste «- - v.2» vous allez démarrer automatiquement sur le template de «tabs». Or «tabs» c'est quoi? C'est déjà une application montée avec une vue, avec un menu, avec 3 boutons en bas qui nous permettent de naviguer entre les pages. On peut aussi choisir le template «Side Menu», qui nous permettra du coup d'avoir une barre latérale qui va s'ouvrir ou se refermer, donc tout ça c'est déjà fait, ça peut être très bien quand on apprend, pour démarrer sur un projet particulier. Nous, on va démarrer sur du Blank: le blank c'est quoi? c'est simplement un projet vide; on a tout monté, mais, il y a pas de code, en fait, à nous de le faire. Et nous, c'est plus intéressant quand on démarre un projet de zéro, de commencer sur du blank. Enfin, vous avez le template Tutorial: Qu'est-ce que ça veut dire tutorial? C'est simplement plein de guides, à l'intérieur de l'installation que vous allez faire de votre projet, qui vous permettra d'apprendre un petit peu plus et donc ça permettra d'aller un peu plus loin. Ca, je vous le recommande après cette formation pourquoi pas, pour aller plus loin, pour essayer, ça vous permettra d'avoir ici un vrai bac à sable. Maintenant, comment je vais démarrer mon application ? Je vais utiliser Ionic Start. J'ai dit que je voulais du Template Blank, donc ce que je vais faire, dans ma console je vais aller taper, ici ... du Ionic Start, donc: ionic start ... et puis je donne un nom de dossier ... nous on va l'appeler, ici, le «listManager». On pourrait l'appeler comme on veut, on va juste créer une application qui permet de lister des informations, de cliquer, d'avoir des détails, voilà, un truc assez simple, assez basique. On ne doit pas ommettre de lui denommer «- - v2», parce que sinon, on sera sur la version 1. Et on veut la v2. Donc : «- - v2». Et puis, le template ... blank. Si vous ne le donnez pas je vous rappelle que vous serez sur le template tabs. On donne donc, blank, et on envoie. Qu'est-ce qui va se passer, là ça va se mettre en route, il va télécharger ce dont il a besoin, et puis il va aussi, via npm, (ici), installer toutes les dépendances. Pendant que ça c'est en train de se faire, on peut passer à autre chose pour le moment, et donc on peut relier pourquoi pas, le projet dans notre éditeur. Pour relier le projet dans l'éditeur, ça va être assez simple également. Vous allez simplement faire un petit «fichier» et «ouvrir», et on va ouvrir ce dossier qui va être notre dossier de projet. Faites attention à être positionné dans le bon dossier, vous allez simplement cliquer sur le dossier de votre projet, pas besoin de rentrer dedans, vous cliquez simplement, et vous faites ouvrir. Je vous rappelle que j'utilise Visual Studio Code et quand j'ouvre un dossier, automatiquement, j'ai l'explorateur qui va apparaitre, et je vais pouvoir, commencer à travailler. Alors, c'est pas tout à fait terminé, donc on va le laisser finir, puis on va revenir ici, simplement pour faire un tout petit point. Ces différentes templates, ont été créées par l'équipe Ionic. Si vous voulez en savoir un peu plus là-dessus, vous pouvez cliquer ici sur le tabs template, et vous allez être redirigés directement sur github, sur le dépôt, driftyco, qui est l'entreprise qui gère Ionic. Là vous allez avoir le starter tabs, mais il y a pas que ça, on peut aller directement si on le souhaite sur driftyco, et on verra qu'ils ont énormément de paquets qui existent, notamment, du Ionic 2. Le plus simple, c'est de faire une recherche sur Ionic 2, et là vous allez avoir, ici, voilà: tous les templates de base, donc y a le app base, qui est un template classique, et puis ensuite vous avez le template blank, le template tabs et le template tutorial. En rentrant à l'intérieur, vous allez voir ce que ça a surcharge, c'est en fait comme ça que ça marche, ça se base toujours sur le starter app base, et puis derrière, vous allez avoir juste une surcharge de fichiers, donc là c'est que le dossier src et le dossier www qui sont surchargés, on en reparlera un peu après, quand on parlera de la structure. Bon, là ça devrait être terminé, on a tout qu'est bon, Dès que vous voyez des petit' notes de musique, ça veut dire que c'est ok, tout est fonctionnel, et on a donc, maintenant, un projet complet, il va falloir le détailler un peu, parler de l'architecture, quels sont les dossiers, ce qu'on trouve dans les dossiers, ce qu'on va, nous, coder et où ... et je vais vous parler aussi de l'architecture basique, c'est à dire les choses qui sont pré-installées, qui vont nous faciliter grandement le travail. Parce que, vous allez voir que, démarrez une application à partir d'un template blank, c'est extrêmement simple, et ça fonctionne déjà, on a déjà une application fonctionnelle.

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 !