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

Utiliser un module

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour comprendre le natif, rien de mieux que la pratique. Dans cette vidéo, vous verrez comment implémenter et activer un module pour obtenir un rendu qui ne sera disponible que sur un vrai téléphone.
04:02

Transcription

On va tester un petit plugin, parce que c'est bien de voir ce que ça donne et de voir une installation complète. Pour vous, ce sera plus intéressant. On va installer le plugin Cordova-plugin-camera le plugin caméra qui permet comme son nom l'indique de faire fonctionner la caméra du téléphone. De plus, ce sera ludique quand vous allez le faire tourner sur un téléphone. On va se rendre dans la doc, prendre le module caméra et récupérer cette ligne -à qui est intéressante pour nous puisqu'il va bien falloir installer le plugin pour pouvoir y accéder. On va lancer la commande, ça va installer le plugin, pour Android et pour iOS. Il va se passer tout un tas d'étapes et une fois installé, vous aurez le plugin et il sera utilisable. Alors je vais fermer tout ce que j'ai ici, et je vais ouvrir le petit dossier des plugins qui se trouve là. J'ai effectivement maintenant le plugin camera, comment je vais l'utiliser dans mon code ? Ça a été généralisé, c'est toujours quasiment la même chose, il va falloir importer le module quelque part et puis ensuite vous pourrez l'utiliser directement dans le code. On va prévoir l'import de façon simple, c'est-à-dire qu'on va se rendre dans notre code, et, sur la page d'accueil, notre page Home ici, on va dans le home.ts faire un import ici au travers de Ionic native. Vous remarquez que tous les plugins natifs seront dans le package Ionic Native, les autres seront dans Ionic Angular, il y a vraiment un emplacement pour tout. Maintenant, j'ai envie de l'utiliser donc ce qu'on va faire c'est qu'on va faire une petite fonction qui va s'appeler Open camera et, pour que l'exemple soit simple, on va prendre cette partie-là. On va venir la coller ici. Quand vous venez récupérer uniquement les informations et les exemples, et à la place de getpicture et d'option, là, vous allez ici mettre tout simplement un array vide, ce sera largement suffisant pour ouvrir, et puis vous gardez tout ça. Comme ça, on peut se faire une console.log ici pour afficher les erreurs au cas où il y en ait, et ce sera tout. Bien sûr, il va falloir le relier donc c'est fonctionnel et il faut bien sûr qu'on ait un bouton donc on va remettre un bouton, qui va s'appeler ici Ouvrir la caméra. On va relier la fonction qu'on a créée, Open Camera et là vous avez quelque chose de fonctionnel. Maintenant je vais attirer votre attention parce qu'on ne va pas pouvoir l'utiliser dans le navigateur. Là, l'application va recharger et quand je vais cliquer sur Ouvrir la caméra, il va rien se passer. Pourquoi il se passe rien ? Tout simplement parce que je ne suis pas sur un environnement Cordova. Heureusement pour nous, la plupart du temps, c'est pris en compte. De temps en temps, ce ne l'est pas donc vous aurez peut-être des erreurs quand vous essaierez d'utiliser des plugin. Vous pouvez utiliser les plugin natifs mais uniquement sur un téléphone, il faudra faire tourner l'application sur un téléphone. Ce qui veut dire qu'il va falloir, compiler cette application. Pour cela, on a la possibilité de passer par les deux environnements, soit on va passer par l'environnement x-code pour iOS, soit on va passer par Android Studio pour compiler en Android. Il va falloir aussi disposer des environnements. Si vous n'avez pas la plate-forme Android, pour la rajouter, il suffira de taper ionic platform add android pour ajouter la plate-forme Android. Vous pouvez ajouter la plate-forme iOS en faisant iOS. Attention, pour la compilation d'une application, si vous voulez pouvoir compiler partout, il va falloir obligatoirement être sur un mac parce qu'il y a que sur mac que vous pourrez compiler sur iOS. Pour Android ça ne posera aucun problème, vous pouvez compiler Android partout, sur n'importe quel environnement mais pour iOS vous êtes obligé de passer par un mac. Pensez-y, développez finalement sous Mac c'est effectivement peut-être un peu la meilleure des solutions quand on fait du Ionic 2. Mine de rien, ainsi, on va pouvoir compiler pour absolument tous les environnements. En tout cas ici, on a déjà câblé le fonctionnement du plugin, vous voyez que ça ne nous a pas pris longtemps ce n'est pas plus compliqué que ça. On a juste à mettre un bouton, ou un comportement, quelque part qui permet de lancer la caméra. Quand on sera sur un environnement, vous verrez qu'effectivement, ça lance bien la caméra.

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 !