Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2
Code

Codez votre première application Ionic 2: une application de partage de photos

by
Difficulty:BeginnerLength:LongLanguages:

French (Français) translation by New Lune (you can also view the original English article)

Dans cette série de tutoriels en deux parties, vous apprenez comment créer votre première application Ionic 2. Maintenant que vous avez configuré votre environnement de développement et appris le déroulement du développement dans Ionic 2, il est temps de se salir les mains en codant l'application.

Si vous ne l'avez pas encore fait, suivez le premier post pour configurer votre environnement de développement et pour démarrer votre projet.

Cette deuxième partie couvrira les choses que vous devez savoir quand il s'agit de coder des applications dans Ionic 2. Vous apprendrez comment créer des pages pour l'application, comment obtenir l'entrée des utilisateurs et comment utiliser des plugins pour accéder à la fonctionnalité native. Une fois que vous avez terminé, vous allez exécuter l'application dans un appareil ou un émulateur. Mais avant d'en arriver là, prenons un moment pour parler de ce que vous allez créer.

Ce que vous allez créer

Dans ce tutoriel, vous allez créer une application de partage de photos. Le débit de base doit être le suivant:

  1. L'utilisateur ouvre l'application et se connecte. Il sera redirigé vers la page pour choisir une image à partager.
  2. L'utilisateur clique sur le bouton Pick Image. Le sélecteur d'image s'affiche et l'utilisateur sélectionne une image. Cette image sera alors prévisualisée.
  3. L'utilisateur saisit une légende et clique sur le bouton Share Image pour passer l'image à l'application Instagram.

Ce tutoriel ne vous montrera que comment exécuter l'application sur un appareil Android, mais Cordova (le framework sur lequel fonctionne Ionic) est multi-plateforme. Ionic 2 a des thèmes intégrés pour Android, iOS et Windows, il est donc facile de créer une version de votre application pour ces périphériques aussi.

Voici ce que l'application va ressembler:

Completed photo sharing app

Configuration du projet

Si vous avez suivi le tutoriel précédent, vous avez déjà configuré votre environnement de développement Ionic 2 et votre projet est échafaudé. Nous avons utilisé les commandes Ionic 2 CLI suivantes pour créer l'arborescence des dossiers de projet et préparer le déploiement à Android:

Nous avons également installé quelques plugins utiles:

Codage de la page d'accueil

Pour le reste du tutoriel, vous travaillerez principalement dans le dossier src, donc supposez que le répertoire src est la racine chaque fois que vous voyez un chemin d'accès au fichier. (Si vous voulez une mise à jour sur les chemins créés par le modèle de démarrage ionique, jetez un coup d'œil au tutoriel précédent).

Dans le répertoire src se trouvent quatre dossiers:

  • app: c'est là que le code à l'échelle de l'application est défini. Si vous devez exécuter un code spécifique au démarrage de l'application, ou si vous souhaitez mettre à jour le CSS global, c'est l'endroit où aller.
  • assets: c'est là que se trouvent les actifs tels que les images utilisées comme contenu pour l'application.
  • pages: c'est là que le code pour les pages individuelles va. Chaque page a son propre dossier, et à l'intérieur de chaque dossier sont trois fichiers qui définissent le modèle (HTML), le style (CSS) et le script (TypeScript) pour la page.
  • themes: c'est là que vous allez si vous voulez modifier le thème par défaut Ionic 2.

Modèle de page d'accueil

Par défaut, le modèle de démarrage Ionic est déjà fourni avec une page d'accueil. Donc tout ce que vous avez à faire est de l'éditer pour afficher le contenu que vous voulez. Ouvrez le fichier pages/home/home.html et effacez son contenu actuel. Ajoutez le texte suivant en haut de la page:

Le code ci-dessus est le préambule pour l'en-tête de l'application. Le <ion-navbar> composant sert de barre d'outils de navigation. Il affichera automatiquement un bouton de retour chaque fois que vous naviguez loin de la page par défaut. <ion-title> définit le titre de la barre de navigation.

Ensuite, le contenu réel de la page. Vous pouvez définir cela à l'intérieur du <ion-content> composant . Le remplissage par défaut peut être appliqué en spécifiant l'option de padding. Dans ce conteneur, créez une nouvelle liste qui contient les champs de saisie pour entrer le nom d'utilisateur et le mot de passe. La création d'une liste pour contenir des champs d'édition est une pratique courante dans Ionic—il vous permet d'empiler chaque champ soigneusement les uns sur les autres. Ci-dessous la liste est le bouton pour ouvrir une session.

Prenons un moment pour regarder le code pour saisir du texte et cliquer sur un bouton. Dans Ionic, vous pouvez définir des champs de saisie de texte en utilisant le composant  <ion-input>. Pour lier le champ de texte à une propriété de classe définie dans votre script de page, utilisez [(ngModel)]. La valeur qui lui est affectée est alors le nom de la propriété de classe.

Pour configurer la liaison de données bidirectionnelle, vous pouvez définir [value] sur le même nom de propriété utilisé pour [(ngModel)]. Cela vous permet de mettre à jour la valeur du champ de texte en modifiant la valeur du modèle à partir du script de page. Plus tard, vous verrez comment définir une propriété de classe dans le script de page.

Pour définir des boutons, utilisez l'élément de button standard en HTML. Si vous vous demandez pourquoi ce n'est pas <ion-button>, c'est pour des raisons d'accessibilité. Les boutons sont un composant d'interface crucial, donc l'équipe Ionic a décidé de s'en tenir aux boutons HTML standard pour les rendre accessibles. La directive sur les ion-button est plutôt ajoutée pour fournir des fonctionnalités supplémentaires.

Ionic 2 buttons

Pour ajouter un gestionnaire de clics, vous utilisez la directive (click), avec une valeur spécifiant la fonction (définie dans votre script de page) à exécuter lorsque l'événement click se produit.

Page d'accueil Script

Ouvrez le fichier pages/home/home.ts, effacez tout son contenu et ajoutez:

En décomposant le code ci-dessus, nous importons d'abord la classe de composant Angular qui a toutes les directives Ionic déjà cuites.

Ensuite, nous importons les contrôleurs pour la navigation et les alertes à partir du paquet ionic-angular. C'est là que tous les contrôleurs Ionic sont inclus.

Après cela, nous importerons le PickerPage. Vous le créerez plus tard, alors laissez-le commenté pour l'instant. N'oubliez pas de supprimer le commentaire une fois que vous êtes prêt à le charger.

Après les importations, utilisez le décorateur @Component pour spécifier le modèle HTML à utiliser par le script:

Maintenant nous pouvons définir la classe pour notre script de page d'accueil. Nous voulons exporter cette classe afin qu'elle puisse être importée à partir d'autres fichiers de l'application.

Rendez NavController et AlertController disponibles dans toute la classe en les définissant comme paramètres dans le constructor. Cela vous permet d'utiliser this.navCtrl, par exemple, lorsque vous souhaitez utiliser NavController pour naviguer vers une autre page.

Maintenant, nous sommes prêts à définir les propriétés de notre contrôleur qui peuvent être référencées à partir du modèle. Ces propriétés contiennent la valeur actuelle du champ de texte pour le nom d'utilisateur et le mot de passe:

Pour simplifier, nous utiliserons des valeurs codées pour le nom d'utilisateur et le mot de passe. Mais pour les applications du monde réel, vous devez généralement faire une demande à un serveur pour authentifier l'utilisateur.

Dans la fonction login(), créez une alerte lorsque l'utilisateur saisit un nom d'utilisateur ou un mot de passe incorrect:

Si les informations d'identification sont incorrectes, affichez l'alerte:

Ionic 2 alerts

Si le nom d'utilisateur et le mot de passe saisis par l'utilisateur correspondent aux valeurs codées en dur, utilisez le NavController pour pousser la page du sélecteur dans la pile de navigation. Quelle que soit la page que vous poussez dans la pile de navigation deviendra la page en cours, alors que l'apparition d'une page navigue efficacement vers la page précédente. Voici comment fonctionne la navigation dans Ionic 2.

Page de sélecteur

Ensuite, vous devez créer la page du sélecteur. Comme vous le savez déjà, la norme est de créer un dossier distinct pour chaque page, et chaque dossier aura trois fichiers. Heureusement, la CLI Ionic est également livrée avec une commande qui nous permet de créer de nouvelles pages:

Cela utilise la commande generate, qui créera le dossier de page avec ces trois fichiers à l'intérieur. Le meilleur de tous, chaque fichier est déjà livré avec un certain code boilerplate que vous pouvez commencer avec.

Modèle de page du sélecteur

Une fois cela fait, ouvrez le fichier pages/picker/picker.html et remplacez le code standard par ce qui suit:

Aucun de ces codes n'est vraiment inconnu sauf pour la directive hidden et l'utilisation d'un composant <ion-card>.

La directive hidden vous permet de masquer un élément en fonction d'une valeur spécifique définie dans votre script de page. Donc, si has_picked_image est true, alors seulement ce div sera visible.

Le composant <ion-card> est utilisé pour créer des cartes. Les cartes sont un excellent moyen d'afficher des images à l'intérieur des applications.

Ionic 2 card images

Style de la page du sélecteur

Ouvrez le fichier pages/picker/picker.scss et ajoutez les éléments suivants:

Script de la page du sélecteur

Ouvrez le fichier pages/picker/picker.ts et ajoutez ce qui suit:

Je vais briser ça un peu. Nous importons d'abord les plugins que vous avez installés plus tôt. Notez que les plugins sont tous installés sous le même package (ionic-native). C'est vraiment sympa car au lieu d'avoir à importer chaque plugin unique dans sa propre ligne, vous pouvez simplement le faire en une seule ligne.

Ensuite, nous déclarons les propriétés de la classe:

Lorsque vous cliquez sur le bouton Pick Image, définissez les options pour le sélecteur d'image. Ces options sont assez explicites, mais j'ai ajouté quelques commentaires pour clarifier ce que chacun fait.

La définition du width et du height ne signifie pas nécessairement que l'image résultante utiliserait la largeur et la hauteur exactes. Ce que cela signifie, c'est que Ionic va utiliser ces dimensions comme la largeur maximale ou la hauteur de telle manière que le ratio d'aspect est toujours maintenu.

Nous utilisons l'URI de données comme type de sortie car le plugin Instagram accepte uniquement les URI de données. Cela signifie que vous devez également ajuster la largeur, la hauteur et la qualité au strict minimum car les URI de données peuvent être très longs si la qualité est élevée—l'image entière est codée dans une chaîne URI! Cela pourrait rendre l'application à s'effondrer, donc il est toujours une bonne pratique de s'en tenir à la qualité inférieure et des images plus petites lorsque vous travaillez avec des données URIs.

Ensuite, utilisez le plug-in Image Picker pour déclencher l'écran de sélection d'image. Comme nous nous attendons à une seule image, nous pouvons simplement accéder au premier élément dans le tableau des résultats. Nous devons également ajouter le préfixe pour les URI de données.

Enfin, lorsque le bouton Share Image est cliqué, la méthode de share fournie par le plugin Instagram déclenche l'affichage de l'écran de partage dans l'application Instagram. Cela aura déjà l'image pré-remplie.

La légende ne sera pas copiée, cependant. L'application Instagram a désactivé les légendes pré-remplies et le champ de légende sera vide une fois l'application Instagram ouverte. En guise de solution de contournement, le plugin Instagram copie la légende dans le presse-papiers à la place. Cela signifie que l'utilisateur peut simplement le coller sur le champ de texte de légende dans l'application Instagram à la place.

Rassembler tout ensemble

L'étape finale consiste à ouvrir le fichier app/app.module.ts. Il s'agit du module racine de l'application où vous définissez toutes les pages et tous les fournisseurs (comme le gestionnaire d'erreurs Ionic par défaut) que vous utiliserez dans toute l'application.

Assurez-vous que toutes les pages que vous avez créées sont définies, sinon vous obtiendrez une erreur lorsque vous naviguez vers une page qui n'a pas été définie. Par défaut, le HomePage est déjà définie ici, il suffit donc d'ajouter le Pickerpage. Il suffit de l'importer en haut du fichier, puis de l'ajouter sous le tableau declarations et entryComponents. Notez que MyApp n'est pas une page; c'est un composant qui sert de coquille vide pour les pages à charger.

Si vous ouvrez le fichier app/app.components.ts, vous verrez ce qui suit:

C'est là que vous pouvez définir la page racine—la page que l'utilisateur affichera une fois l'application ouverte. Dans ce cas, HomePage est la page racine. Ceci est également parfait pour exécuter le code d'initialisation, puisque le code ici n'est exécuté qu'une seule fois lorsque l'utilisateur lance l'application. Lors de l'initialisation de quelque chose (par exemple, demandez l'autorisation d'activer Bluetooth), vous devrez toujours attendre jusqu'à ce que l'événement platform.ready() soit déclenché. Une fois que l'événement a tiré, vous pouvez être sûr que les fonctions natives sont prêtes à être appelées.

Exécution de l'application

Vous êtes maintenant prêt à exécuter l'application sur un appareil mobile ou un émulateur. Vous pouvez le faire en exécutant la commande suivante:

Assurez-vous que vous avez un périphérique connecté à votre ordinateur ou que vous avez une instance en cours d'exécution d'un émulateur lorsque vous exécutez la commande ci-dessus. Si cela ne fonctionne toujours pas, vérifiez que vous avez activé le débogage USB dans votre périphérique et que vous avez lancé des adb devices. Cela va déclencher votre ordinateur pour se connecter à votre appareil. Il suffit d'accepter l'invite de votre appareil une fois que l'invite d'authentification s'affiche.

Si vous souhaitez avoir une copie du fichier APK pour pouvoir le partager avec un ami, vous pouvez en générer un en exécutant à la place:

Cela créera un fichier android-debug.apk dans le dossier platforms/android/build/outputs/apk.

Conclusion

C'est tout! Dans ce tutoriel, vous avez créé votre toute première application Ionic 2. C'est une application simple, et vous pourriez même avoir trouvé cela facile. Mais vous avez appris comment créer un environnement pour développer des applications Ionic 2 et vous avez appris quelques concepts de base que vous pouvez appliquer lors du développement d'applications à l'avenir. Il s'agit notamment d'obtenir la valeur actuelle d'un champ de texte, de répondre à des événements de clic, de lier des images et d'utiliser des plugins pour accéder aux fonctionnalités natives. Alors tapotez-vous sur le dos! Vous avez bien fait ce travail jusqu'à présent.

En attendant, consultez certains de nos autres tutoriels sur Ionic 2!

Si vous souhaitez une introduction approfondie et pratique au framework Ionic 2, essayez notre cours Mise en place avec Ionic 2.

Dans ce cours, Reggie Dawson vous enseignera tout sur le cadre Ionic et vous montrera comment construire une application mobile à partir de zéro. En cours de route, vous en apprendrez plus sur la bibliothèque de composants Ioni, sur la programmation statique de JavaScript avec TypeScript et sur l'intégration d'une application Ionic 2 avec une API rich media.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.