Share
Ce que vous allez créerEn tant que développeur prudent, vous pouvez vous méfier de la création d'applications hybrides qui reposent sur les API natives d'Android. Il y a quelques années, j'étais moi aussi avec Android, qui avait tant d'incertitudes liées à sa version et à son appareil. Aujourd'hui, cependant, nous pouvons faire confiance aux frameworks de développement d'applications hybrides pour gérer la plupart de ces bizarreries de manière transparente. Ionic 2, qui repose sur Apache Cordova, est l’un de ces cadres..
Ionic 2 contient des enveloppes pour plusieurs plug-ins Cordova populaires qui vous permettent d'utiliser facilement les ressources natives d'Android, telles que les appareils photo, les capteurs matériels et le système de fichiers. Dans ce tutoriel, je vais vous montrer comment utiliser ces wrappers avec des composants d'interface utilisateur Ionic 2 pour créer une application de caméra simple..
Pour suivre, vous aurez besoin de:
Les solutions Ionic et Cordova sont disponibles en tant que modules NPM. La manière la plus simple de les installer consiste à utiliser le logiciel. npm commander. Voici comment vous pouvez les installer globalement:
npm installer -g cordova ionic
Une fois l'installation terminée, tapez ce qui suit pour vous assurer que l'interface de ligne de commande Ionic, ou CLI, est configurée correctement..
infos ioniques | grep "Version"
Le résultat de la commande ci-dessus devrait ressembler à ceci:
Version Ionic CLI: 2.2.1 Version Ionic App Lib: 2.2.0 Version Nœud: v6.7.0
La CLI d’Ionic facilite la création de nouveaux projets Ionic 2 avec tous les fichiers de configuration et le code standard requis. Il propose également plusieurs modèles de départ parmi lesquels choisir. Pour le moment, créons simplement un projet en utilisant le blanc modèle de départ.
début ionique MyCameraApp vierge --v2 --id com.tutsplus.mycameraapp
À ce stade, vous aurez un nouveau répertoire appelé MyCameraApp. Pour le reste de ce tutoriel, nous allons travailler dans ce répertoire.
cd MyCameraApp
Par défaut, un projet Ionic 2 n'est pas configuré pour cibler une plate-forme mobile. Voici comment vous ajoutez le support pour Android:
plate-forme ionique ajouter android
Vous devez également pointer manuellement Ionic 2 vers l'emplacement où vous avez installé le SDK Android. Si vous utilisez Mac ou Linux, utilisez la commande exportation commande de le faire.
export ANDROID_HOME = ~ / Android / Sdk /
Notre application de caméra a besoin d'accéder à la caméra et au système de fichiers du périphérique, qui sont tous deux des ressources natives. Si vous connaissez Cordova, sachez que les applications hybrides interagissent généralement avec ces ressources via des plug-ins. Bien que vous puissiez utiliser un plugin Cordova directement dans un projet Ionic 2, il est beaucoup plus facile d’utiliser son wrapper Ionic Native à la place..
Pour accéder à la caméra, nous allons utiliser le cordova-plugin-camera-preview brancher. Cela nous permet non seulement de prendre des photos, mais également de leur appliquer plusieurs filtres d'image. Voici comment vous pouvez l'ajouter à votre projet:
plugin ionique ajouter cordova-plugin-camera-preview
Nous devrons bien sûr enregistrer les photos que nous prenons sur des supports de stockage externes, tels que des cartes SD. Pour ce faire, nous allons utiliser le cordova-plugin-file brancher.
plugin ionique ajouter cordova-plugin-file
Enfin, pour prendre en charge les appareils Android dotés de l’API de niveau 23 ou supérieur, nous avons besoin de la cordova.plugins.diagnostic brancher.
plugin ionique ajouter cordova.plugins.diagnostic
L'interface utilisateur de notre application sera composée des composants suivants:
Nous allons créer la fenêtre de prévisualisation de la caméra par programme dans une étape ultérieure. Pour l'instant, créons une mise en page HTML contenant seulement deux boutons d'action flottants.
Comme notre application vierge contient déjà une page, nous l'utilisons au lieu d'en créer une nouvelle. Pour modifier sa mise en page, ouvrez src / pages / home / home.html. Vider son contenu et ajouter un nouveau
Pour créer un bouton d'action flottant, vous pouvez créer un bouton HTML ordinaire et ajouter le ion-fab attribuer à elle. De plus, en enveloppant le tag à l'intérieur d'un
Un bouton d'action flottant a généralement une icône. En utilisant le
En conséquence, ajoutez ce qui suit à votre fichier de mise en page:
Comme vous pouvez le voir dans le code ci-dessus, nous avons ajouté Cliquez sur gestionnaires d'événements à la fois les boutons. Nous les définirons plus tard.
Sur les appareils exécutant l'API Android de niveau 23 ou supérieur, vous devez explicitement demander à l'utilisateur les autorisations nécessaires pour accéder à la caméra et au système de fichiers pendant l'exécution. Pour ce faire dans votre application hybride, vous pouvez utiliser les méthodes disponibles dans Diagnostique Enveloppeur natif ionique.
Commencez par ouvrir src / pages / home / home.ts et importer Diagnostique.
importer Diagnostic de 'ionic-native';
À l'intérieur du constructeur du Page d'accueil classe, ajouter un appel à un nouveau checkPermissions () méthode. De plus, ajoutez un ToastController objet à la classe utilisant l'injection de dépendance. Nous allons l'utiliser pour afficher les toasts Ionic 2, qui sont presque identiques aux barres de snack natives d'Android..
Après avoir apporté les modifications ci-dessus, votre code devrait ressembler à ceci:
constructeur (public navCtrl: NavController, public toastCtrl: ToastController) this.checkPermissions (); checkPermissions () // Plus de code va ici
À l'intérieur de checkPermissions () méthode, utilisez le isCameraAuthorized () méthode du Diagnostique classe pour vérifier si l'application dispose déjà des autorisations nécessaires pour accéder à la fois à la caméra et au système de fichiers. Parce que la méthode retourne un Promettre objet, vous devez utiliser un rappel pour gérer son résultat.
Si l'application ne dispose pas des autorisations requises, vous pouvez utiliser le requestCameraAuthorization () méthode pour les demander.
Si l'utilisateur accorde les autorisations, ou si notre application les possède déjà, nous pouvons initialiser l'aperçu de la caméra à l'intérieur. initializePreview (), une méthode que nous allons créer à l'étape suivante. Sinon, affichons simplement un toast contenant un message d'erreur à l'aide de la touche créer() et présent() méthodes de la ToastController classe.
En conséquence, ajoutez le code suivant dans le répertoire checkPermissions () méthode:
Diagnostic.isCameraAuthorized (). Then ((autorisé) => if (autorisé) this.initializePreview (); else Diagnostic.requestCameraAuthorization (). Then ((status) => si (status == Diagnostic.permissionStatus.GRANTED) ) this.initializePreview (); else // Autorisations non accordées // Par conséquent, créez et présentez un toast this.toastCtrl.create (message: "Impossible d'accéder à la caméra", position: "en bas", durée: 5000) .present ();););
Voici à quoi ressemble la boîte de dialogue d'autorisation de l'appareil photo sur un appareil fonctionnant sous Android Marshmallow:
le CameraPreview L'emballage Ionic Native vous permet d'afficher un aperçu de la caméra en direct dans votre application hybride. Cependant, comme l'aperçu utilise un fragment Android au lieu d'un élément HTML, son ajout à notre page est légèrement compliqué..
Avant de commencer, assurez-vous d’importer les deux CameraPreview et CameraPreviewRect.
importer CameraPreview, CameraPreviewRect de 'ionic-native';
Utilisant un CameraPreviewRect objet, vous pouvez spécifier la position et la taille de l'aperçu de la caméra. Pour l'instant, faisons-le remplir l'écran de l'appareil complètement.
initializePreview () // Rendre la largeur et la hauteur de l'aperçu égales // à la largeur et à la hauteur de la fenêtre de l'application, laissez previewRect: CameraPreviewRect = x: 0, y: 0, width: window.innerWidth, height: window. innerHeight; // Plus de code va ici
À ce stade, nous avons tout ce dont nous avons besoin pour lancer l'aperçu de la caméra. Par conséquent, appelez le startCamera () méthode du CameraPreview classe et passe le CameraPreviewRect objecter à cela. Bien entendu, vous devez également spécifier la caméra que vous souhaitez utiliser. Dans ce tutoriel, nous n'utiliserons que la caméra arrière.
// Démarrer l'aperçu CameraPreview.startCamera (previewRect, 'rear', false, false, true, 1);
L'aperçu de la caméra sera placé sous notre page HTML et ne sera visible que si l'arrière-plan de notre application est transparent. La façon la plus simple de le faire est d’ajouter une règle CSS dans le src / app / app.scss fichier.
ion-app, ion-content background-color: transparent! important;
En définissant la mise en page de notre page, nous avons déjà ajouté un Cliquez sur sur le bouton sur lequel l'utilisateur appuiera pour prendre des photos. Définissons maintenant le gestionnaire.
Prendre une photo avec le CameraPreview Le wrapper natif ionique est aussi simple que d’appeler le takePicture () méthode et en spécifiant la résolution souhaitée de l’image. Pour l'instant, utilisons 320 x 320 comme les dimensions maximales de notre image.
takePicture () CameraPreview.takePicture (maxWidth: 320, maxHeight: 320);
Il est à noter que la spécification de résolutions élevées peut entraîner des erreurs de mémoire insuffisante..
le CameraPreview wrapper vous permet d’appliquer facilement en temps réel plusieurs effets d’image courants, également appelés filtres d’image, à vos images. Nous avons déjà ajouté un Cliquez sur sur le bouton sur lequel l'utilisateur appuiera pour appliquer les effets d'image. Par conséquent, tout ce que nous avons à faire maintenant est de le définir.
Pour que notre code soit simple, chaque fois que l'utilisateur appuie sur le bouton, sélectionnons un effet aléatoire dans un tableau d'effets et appliquez-le. Vous pouvez utiliser le JavaScript Math.random () fonction pour choisir un effet aléatoire, et le setColorEffect () méthode du CameraPreview classe à l'appliquer.
changeEffect () // Crée un tableau avec 5 effets et laisse les effets: any = ['none', 'negative', 'mono', 'aqua', 'sépia']; let randomEffect: string = effects [Math.floor (Math.random () * effects.length)]; CameraPreview.setColorEffect (randomEffect);
Vous pouvez exécuter l'application maintenant et appuyer plusieurs fois sur FAB pour voir les différents effets d'image appliqués à la fenêtre d'aperçu de l'appareil photo..
Notre application place toutes les images qu'elle prend dans son répertoire de stockage d'application, qui est un répertoire de données privé. Si vous préférez stocker ces images sur un support de stockage externe et les mettre ainsi à la disposition d'applications de galerie de photos tierces, vous devez les déplacer manuellement. Pour ce faire, vous pouvez utiliser le Fichier Enveloppeur natif ionique.
Comme toujours, importez le wrapper avant de l’utiliser. De plus, déclarer Cordova en tant que variable globale initialisée en externe. Il offre des constantes qui vous permettent de vous référer facilement à tous les répertoires fréquemment utilisés du système de fichiers Android..
importer fichier de 'ionic-native'; déclarer var cordova: any; // variable globale pour les chemins
Nous devrions déplacer les images vers le répertoire de stockage externe dès qu'elles sont prises. Par conséquent, abonnez-vous à la setOnPictureTakenHandler () méthode du CameraPreview classe. La méthode retourne un tableau contenant les chemins absolus de l'image et sa vignette. Pour l'instant, nous allons déplacer l'image uniquement.
En conséquence, ajoutez le code suivant vers la fin de la initializePreview () méthode:
CameraPreview.setOnPictureTakenHandler (). Subscribe ((result)) => this.moveFileToExternalStorage (result [0]); // Déplacer l'image uniquement);
À l'intérieur de moveFileToExternalStorage () méthode, on peut utiliser le moveFile () méthode du Fichier classe pour déplacer réellement l'image. le moveFile () méthode attend des répertoires et noms de fichiers source et de destination comme arguments.
Pour déterminer le chemin du répertoire de stockage externe de votre application, utilisez la commande cordova.file.externalApplicationStorageDirectory constant. De même, pour déterminer le chemin du répertoire de stockage privé de votre application, utilisez la commande cordova.file.applicationStorageDirectory constant.
De plus, pour extraire le nom de fichier de l’image de son chemin absolu, vous pouvez simplement utiliser le code JavaScript. Divisé() et pop() méthodes. Je vous suggère également d'afficher un toast une fois l'opération de déplacement terminée..
Accentsconagua
moveFileToExternalStorage (fileName: string) // Déterminez les chemins d'accès, laissez externalStoragePath: string = cordova.file.externalApplicationStorageDirectory; let currentPath: string = cordova.file.applicationStorageDirectory + "fichiers /"; // Extraire le nom du fichier nomFichier = nomFichier.split ("/"). Pop (); // Déplace le fichier File.moveFile (currentPath, fileName, externalStoragePath, fileName) .then (_ => this.toastCtrl.create (message: "Photo enregistrée", position: "bottom", durée: 2000) .présent(); ); Notre application de caméra est maintenant complète. Vous pouvez afficher ses images à l'aide de n'importe quelle application de galerie photo installée sur votre appareil..
Dans ce didacticiel, vous avez appris à utiliser Ionic 2 et les enveloppes de plug-in disponibles dans Ionic Native pour créer une application hybride capable de prendre des photos, de leur appliquer des effets d'image et de les stocker sur un support de stockage externe. Bien que nous nous concentrions aujourd'hui uniquement sur la plate-forme Android, vous pouvez être sûr que notre application fonctionnera, avec des modifications minimes, sur les appareils iOS également..
Pour en savoir plus sur Ionic 2, vous pouvez vous reporter à sa documentation détaillée. Notre check out notre cours Ionic 2 ici sur Envato Tuts+!
