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

Concevoir avec Ionic

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le design et la conception avec Ionic sont extrêmement simples. Tirez parti des modules à disposition pour travailler rapidement.
04:10

Transcription

Quand on va parler de design avec Ionic, on ne va pas vraiment parler de design. En soi, on n'est pas en train de faire du design, réellement, tout se passe en html et en css. Et ça c'est plutôt génial pour nous. Y a pas grand chose à faire, en réalité, quand on veux mettre en place des designs d'application avec Ionic. Vous verrez que tout se passe par composants, c'est assez génial, on va récupérer des bouts de composants et on va les mettre ensemble, -- alors évidemment, vous aurez la main mise sur absolument tout -- je vous conseille quand même d'avoir de solides bases en html, si vous souhaitez faire du design parce que vous allez être obligés de travailler, par exemple avec des balises, des paragraphes ... On peut quasi tout faire. Ce que vous faites sur une page web, vous pourrez le faire en Ionic et vous pourrez donc créer votre application hybride uniquement en html. Ca, c'est assez fantastique parce que, ça vous donne la possibilité de faire tout et n'importe quoi en html aujourd'hui on peut faire énormément de choses. Si vous vous rendez sur la documentation, il y a un moteur de recherche. Celui-ci est extrêmement utile. Quand une balise se trouve dans le code et vous ne savez pas à quoi elle correspond, vous pouvez la taper ici, et vous verrez qu'à côté, vous aurez tout qui va s'ouvrir, avec énormément de possibilités là on voit beaucoup beaucoup de composants différents qui vont utiliser le ion content, On pourrait aussi essayer de l'utiliser comme ça, ion Content ... vous trouverez pas forcément, quand vous le trouvez pas c'est pas très grave, l'idée ici c'est de vous montrer qu'il y a bien une documentation qui est assez puissante, Sachez simplement que le IonContent, pourquoi il est pas référencé, parce que, c'est, en fait, la structure de base. Une page, en Ionic, comportera toujours un IonContent. Obligatoire. Padding ou pas, vous verrez, on aura donc du padding à l'intérieur et puis sinon, pas. On fera le test tout à l'heure quand on créera une page. Une page c'est simplement une association, en fait. Entre du html, du css on va en reparler après, et bien sûr, le code du composant. C'est pas très très compliqué, ça se base sur un sélecteur et ça se base sur une template url, donc, toujours pareil, on va chercher un template. Alors, c'est simple - et en même temps, c'est extrêmement puissant. Avec ce système là, vous allez pouvoir faire du html pour faire du contenu. et bien sûr, vous allez pouvoir vous baser sur tous les composants. On en fera le tour un peu plus tard, effectivement il y a énormément de composants disponibles qui vous permettent de faire un rendu. Ce que vous allez vois ici à l'écran, ce qui va s'afficher, ce n'est ni plus ni moins que du html et du css. et ça, c'est vraiment fantastique parce que, vous allez pouvoir faire tout et n'importe quoi, et vous allez avoir un rendu qui ressemble complètement à un rendu d'application. et bien sûr, ça va fonctionner comme une application en tous cas vous allez avoir l'impression que c'est une application. Les utilisateurs derrière, ce qui est bien, c'est qu'ils auront pas l'impression que c'est du html et du css. par contre pour vous ça réduire l'impact sur votre travail parce que vous allez travailler extrêmement vite et pouvoir développer très rapidement différents composants avec uniquement du html. Vous trouverez à l'intérieur de chaque composant, ce que vous pouvez intégrer et comment l'intégrer. Ce qui est bien c'est que vous aurez absolument tout, et non seulement l'intégration pure en html, mais aussi le code -- des codes d'exemple, qui vous permettront d'intégrer des composants facilement et donc de contrôler les composants puisque derrière chaque composant il y aura une API. Cette API vous permettra de designer proprement et de faire ce que vous voulez. Alors, html, donc, css, on va le voir juste après, et tout ça, et bien ça va créer une application qui sera una application hybride. Le rendu, lui, ne sera pas forcément le même, puisqu'il sera automatique, en fonction de la plateforme. Vous êtes sur de l'Android, vous aurez un rendu Android. Sur de l'Ios, vous aurez un rendu Ios. Vous êtes sur du Windows, rendu Windows. Ca va variment coller à la plateforme sur laquelle vous vous trouvez, et vous aurez exactement le rendu que la plateforme attend. Et ça, sans avoir à coder la moindre ligne, puisque c'est automatiquement intégré dans Ionic et ça fait partie du concept fondamental de Ionic. Un seul code source pour avoir différents rendus d'un coup. Voyez, c'est extrêmement simple et, vous allez voir que c'est puissant et qu'on peut faire tout ce qu'on veut. Vous êtes pas obligés non-plus de coller forcément au css, qui va être intégré dans Ionic et qui est disponible. Vous pourrez faire ce que vous voulez avec, c'est du html, c'est du css, donc là vous laisserez libre cours à votre imagination et vous pourrez créer l'application de vos rêves.

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 !