Dans cette série de tutoriels en deux parties, vous apprendrez à créer votre toute première application Ionic 2. Maintenant que vous avez configuré votre environnement de développement et pris connaissance du processus de développement dans Ionic 2, il est temps de vous salir les mains en codant l'application..
Si vous ne l'avez pas encore fait, suivez le premier message pour configurer votre environnement de développement et amorcer votre projet..
Cette deuxième partie couvrira ce que vous devez savoir pour coder des applications dans Ionic 2. Vous apprendrez à créer des pages pour l’application, à obtenir les entrées de l’utilisateur et à utiliser des plugins pour accéder aux fonctionnalités natives. Une fois que vous avez terminé, vous allez exécuter l'application dans un appareil ou un émulateur. Mais avant d’y arriver, 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 flux de base devrait être comme suit:
L'utilisateur ouvre l'application et se connecte. Il sera redirigé vers la page pour choisir une image à partager..
L'utilisateur clique sur le Choisir une image bouton. Le sélecteur d'images s'affiche et l'utilisateur sélectionne une image. Cette image sera ensuite prévisualisée.
L'utilisateur entre une légende et clique sur le bouton Partager l'image bouton pour passer l'image à l'application Instagram.
Ce tutoriel ne vous montrera que comment exécuter l'application sur un appareil Android, mais Cordova (la structure sur laquelle Ionic s'exécute) est multi-plateforme. Ionic 2 possède 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 appareils..
Voici à quoi ressemblera l'application:
Configuration du projet
Si vous avez suivi le didacticiel précédent, votre environnement de développement Ionic 2 est déjà configuré et votre projet échafaudé. Nous avons utilisé les commandes Ionic 2 CLI suivantes pour créer l’arborescence de dossiers du projet et préparer le déploiement sur Android:
Pour le reste du tutoriel, vous travaillerez principalement à l’intérieur du src dossier, alors supposons que le src dossier est la racine chaque fois que vous voyez un chemin de fichier. (Si vous souhaitez un rafraîchissement sur les chemins créés par le modèle de départ Ionic, consultez le didacticiel précédent.)
À l'intérieur de src répertoire sont quatre dossiers:
app: c'est ici que le code d'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 code CSS global, vous êtes au bon endroit..
les atouts: c’est là que vont les actifs tels que les images utilisées comme contenu pour l’application.
des pages: c'est ici que va le code des pages individuelles. Chaque page a son propre dossier et à l'intérieur de chaque dossier se trouvent trois fichiers qui définissent le modèle (HTML), le style (CSS) et le script (TypeScript) de la page..
des thèmes: c'est ici que vous allez si vous voulez modifier le thème par défaut d'Ionic 2.
Modèle de page d'accueil
Par défaut, le modèle de démarrage vierge Ionic est déjà livré avec une page d'accueil. Il vous suffit donc de le modifier pour afficher le contenu souhaité. Ouvrez le pages / home / home.html fichier et effacer son contenu actuel. Ajoutez ce qui suit en haut de la page:
S'identifier
Le code ci-dessus est le passe-partout pour l'en-tête de l'application. le composant sert de barre d’outils de navigation. Il affichera automatiquement un bouton de retour chaque fois que vous vous écartez de la page par défaut.. définit le titre de la barre de navigation.
Suivant est le contenu réel de la page. Vous pouvez définir cela à l'intérieur du composant. Le remplissage par défaut peut être appliqué en spécifiant la rembourrage option. Dans ce conteneur, créez une nouvelle liste contenant les champs de saisie permettant de saisir le nom d'utilisateur et le mot de passe. La création d’une liste contenant des champs de saisie est une pratique courante dans Ionic. Elle vous permet d’empiler chaque champ parfaitement les uns sur les autres. Au-dessous de la liste se trouve le bouton pour vous connecter.
Nom d'utilisateurMot de passe
Prenons un instant pour regarder le code de saisie de texte et de clic sur un bouton. Dans Ionic, vous pouvez définir des champs de saisie de texte à l’aide des touches composant. Pour lier le champ de texte à une propriété de classe définie dans votre script de page, utilisez [(ngModel)]. Ensuite, la valeur qui lui est assignée est le nom de la propriété de classe.
Pour configurer la liaison de données bidirectionnelle, vous pouvez définir [valeur] au même nom de propriété utilisé pour la [(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 le standard bouton élément en HTML. Si vous vous demandez pourquoi ce n'est pas , c'est pour des raisons d'accessibilité. Les boutons sont un composant d’interface crucial. L’équipe Ionic a donc décidé de s’en tenir aux boutons HTML standard pour les rendre accessibles. le bouton ionique la directive est plutôt ajoutée pour fournir des fonctionnalités supplémentaires.
Pour ajouter un gestionnaire de clics, vous utilisez le (Cliquez sur) directive, avec une valeur spécifiant la fonction (définie dans votre script de page) à exécuter lorsque l'événement click se produit.
Script de page d'accueil
Ouvrez le pages / home / home.ts fichier, effacez tout son contenu et ajoutez les éléments suivants:
importer composant de '@ angular / core'; importer NavController, AlertController de 'ionic-angular'; // importer PickerPage de '… /… / pages / picker / picker'; @Component (templateUrl: 'home.html') classe d'exportation HomePage username: string; mot de passe: chaîne; en lecture seule APP_USERNAME: string = 'me'; en lecture seule APP_PASSWORD: string = 'secret'; constructeur (public navCtrl: NavController, public alertCtrl: AlertController) login () let alert = this.alertCtrl.create (titre: 'Connexion échouée', sous-titre: 'Le nom d'utilisateur ou le mot de passe que vous avez entré est incorrect.', boutons : ['D'ACCORD'] ); if (this.nom_utilisateur == this.APP_USERNAME && this.password == this.APP_PASSWORD) this.navCtrl.push (PickerPage); else alert.present (); this.username = "; this.password =";
Décomposant le code ci-dessus, nous importons d’abord la classe de composants Angular qui contient toutes les directives ioniques déjà cuites.
importer composant de '@ angular / core';
Ensuite, nous importons les contrôleurs pour la navigation et les alertes à partir du ionique-angulaire paquet. Ceci est où tous les contrôleurs ioniques sont inclus.
importer NavController, AlertController de 'ionic-angular';
Après cela, nous allons importer le PickerPage. Vous allez le créer plus tard, alors laissez-le commenté pour le moment. N'oubliez pas de supprimer le commentaire une fois que vous êtes prêt à le charger..
Après les importations, utilisez le @Composant décorateur pour spécifier le modèle HTML à utiliser par le script:
@Component (templateUrl: 'home.html')
Nous pouvons maintenant définir la classe pour notre script de page d'accueil. Nous voudrons exporter cette classe afin qu'elle puisse être importée à partir d'autres fichiers de l'application..
classe d'exportation HomePage …
Faire le NavController et AlertController disponibles dans toute la classe en les définissant comme paramètres dans le constructeur. Cela vous permet d'utiliser this.navCtrl, par exemple, lorsque vous souhaitez utiliser le NavController pour naviguer sur une autre page.
constructeur (public navCtrl: NavController, public alertCtrl: AlertController)
Nous sommes maintenant prêts à définir les propriétés de notre contrôleur pouvant être référencées à partir du modèle. Ces propriétés contiendront la valeur actuelle du champ de texte pour le nom d'utilisateur et le mot de passe:
nom d'utilisateur: string; mot de passe: chaîne;
Pour simplifier les choses, nous utiliserons des valeurs codées en dur pour le nom d'utilisateur et le mot de passe. Mais pour les applications du monde réel, vous devez généralement demander à un serveur d'authentifier l'utilisateur..
en lecture seule APP_USERNAME: string = 'me'; // Les constantes dans TypeScript sont définies en spécifiant la propriété à lire en lecture seule. APP_PASSWORD: string = 'secret';
À l'intérieur de s'identifier() fonction, crée une alerte lorsque l'utilisateur entre un nom d'utilisateur ou un mot de passe incorrect:
let alert = this.alertCtrl.create (titre: 'Connexion échouée', sous-titre: 'Le nom d'utilisateur ou le mot de passe que vous avez entré est incorrect.', boutons: ['OK']);
Si les informations d'identification sont incorrectes, affichez l'alerte:
alert.present ();
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 de sélecteur dans la pile de navigation. Quelle que soit la page que vous insérez dans la pile de navigation, celle-ci deviendra la page en cours, tandis que vous sauterez une page pour revenir à la page précédente. Voici comment fonctionne la navigation dans Ionic 2.
this.navCtrl.push (PickerPage);
Page de sélecteur
Ensuite, vous devez créer la page de sélection. Comme vous le savez déjà, la norme consiste à créer un dossier distinct pour chaque page, chaque dossier contenant trois fichiers. Heureusement, l'interface de ligne de commande Ionic est également livrée avec une commande nous permettant de créer de nouvelles pages:
ionic g page pickerPage
Cela utilise le produire commande, qui créera le dossier de la page contenant ces trois fichiers. Mieux encore, chaque fichier contient déjà du code standard avec lequel vous pouvez commencer..
Modèle de page de sélecteur
Une fois cela fait, ouvrez le pages / picker / picker.html fichier et remplacez le code général par ce qui suit:
Choisir une image
Légende
Aucun de ce code n’est vraiment inconnu, à part le caché directive et l'utilisation d'un composant.
le caché directive 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 vrai, alors seulement cela div Être visible.
…
le composant est utilisé pour créer des cartes. Les cartes sont un excellent moyen d'afficher des images dans les applications..
Style de page du sélecteur
Ouvrez le pages / picker / picker.scss déposer et ajouter ce qui suit:
.form-container padding-top: 20px;
Picker Script de page
Ouvrez le pages / picker / picker.ts déposer et ajouter ce qui suit:
Je vais décomposer un peu. Nous importons d’abord les plugins que vous avez installés précédemment. Notez que les plugins sont tous installés sous le même paquet (natif ionique). C'est vraiment bien parce qu'au lieu d'importer chaque plugin dans sa propre ligne, vous pouvez le faire en une seule ligne..
importer ImagePicker, Instagram de 'ionic-native';
Ensuite, nous déclarons les propriétés de la classe:
pick_image: string; // l'image choisie par l'utilisateur has_picked_image: boolean = false; // pour déterminer facilement s'il y a actuellement une image sélectionnée par l'utilisateur ou non caption: string; // la légende de l'image en lecture seule DEFAULT_IMAGE: string = 'http://placehold.it/500x500'; // l'image par défaut
Quand le Choisir une image Cliquez sur le bouton, définissez les options du sélecteur d'images. Ces options sont assez explicites, mais j'ai ajouté quelques commentaires pour clarifier ce que chacune fait..
let options = maximumImagesCount: 1, // le nombre maximal d'images que l'utilisateur peut choisir. width: 500, // la largeur maximale dans laquelle l'image sera insérée une fois qu'elle est sélectionnée height: 500, // la hauteur maximale dans quelle sera l'image une fois la qualité sélectionnée: 50, // la qualité de la photo. La valeur peut aller jusqu'à 100 pour une qualité de sortie de 100%. Type: 1 // quel format seront les résultats une fois que l'utilisateur aura sélectionné une image. // 0 correspond aux URI de fichier, tandis que 1 correspond aux URI de données. ;
Spécifier le largeur et le la taille ne signifie pas nécessairement que l'image résultante utiliserait les mêmes largeur et hauteur. Ce que cela signifie, c’est que Ionic utilisera ces dimensions comme largeur ou hauteur maximales de telle sorte que le rapport de format soit toujours conservé..
Nous utilisons l'URI de données comme type de sortie car le plug-in 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: toute l'image est codée dans une chaîne d'URI! Cela pourrait provoquer le blocage de l'application. Il est donc recommandé de conserver des images de moindre qualité et de moindre qualité lorsque vous travaillez avec des URI de données..
Ensuite, utilisez le plugin Image Picker pour déclencher l’écran de sélection d’image. Comme nous n'attendons qu'une seule image, nous pouvons simplement accéder au premier élément du tableau des résultats. Nous devons également ajouter le préfixe pour les URI de données.
Enfin, lorsque le Partager l'image le bouton est cliqué, le partager La méthode fournie par le plugin Instagram déclenche le lancement de l'écran de partage dans l'application Instagram. Cela aura déjà l'image pré-remplie.
La légende ne sera cependant pas copiée. L'application Instagram a désactivé les légendes préremplies et le champ de légende sera donc vide une fois l'application Instagram ouverte. Pour résoudre ce problème, le plugin Instagram copie la légende dans le presse-papiers. Cela signifie que l'utilisateur peut simplement le coller dans le champ de texte de légende de l'application Instagram..
La dernière étape consiste à ouvrir le app / app.module.ts fichier. Il s'agit du module racine de l'application dans lequel vous définissez toutes les pages et tous les fournisseurs (tels que le gestionnaire d'erreur par défaut Ionic) que vous utiliserez dans l'application..
Assurez-vous que toutes les pages que vous avez créées sont définies, sinon vous obtiendrez une erreur lorsque vous naviguerez vers une page qui n'a pas encore été définie. Par défaut, le Page d'accueil est déjà défini ici, il vous suffit d'ajouter le PickerPage. Importez-le simplement en haut du fichier puis ajoutez-le sous le déclarations et entryComponents tableau. Notez que MyApp n'est pas une page; c'est un composant qui sert de shell vide pour les pages à charger.
importer NgModule, ErrorHandler de '@ angular / core'; import IonicApp, IonicModule, IonicErrorHandler de 'ionic-angular'; importer MyApp de './app.component'; importer HomePage de '… / pages / home / home'; importer PickerPage de '… / pages / picker / picker'; @NgModule (declarations: [MyApp, HomePage, PickerPage], importe: [IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, PickerPage], fournisseurs: [fournir: ErrorHandler, useClass : IonicErrorHandler]) classe d'exportation AppModule
Si vous ouvrez le app / app.components.ts fichier, vous verrez ce qui suit:
importer composant de '@ angular / core'; importer Platform de 'ionic-angular'; importer StatusBar, Splashscreen de 'ionic-native'; importer HomePage de '… / pages / home / home'; @Component (templateUrl: 'app.html') classe d'exportation MyApp rootPage = HomePage; constructeur (plate-forme: Platform) platform.ready (). then (() => // OK, donc la plate-forme est prête et nos plugins sont disponibles. // Ici, vous pouvez faire toutes les choses natives de niveau supérieur dont vous pourriez avoir besoin. StatusBar.styleDefault (); Splashscreen.hide (););
C'est ici que vous pouvez définir la page racine, la page que l'utilisateur verra une fois qu'il ouvre l'application. Dans ce cas, le Page d'accueil est la page racine. C'est également parfait pour exécuter le code d'initialisation, car 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, demander l’autorisation d’activer Bluetooth), vous voudrez toujours attendre que le platform.ready () l'événement est déclenché. Une fois que cet événement a été déclenché, vous pouvez être sûr que les fonctions natives sont prêtes à être appelées..
Lancer 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:
ionique run android
Assurez-vous qu'un périphérique est connecté à votre ordinateur ou qu'une instance d'un émulateur est en cours d'exécution lorsque vous exécutez la commande ci-dessus. Si cela ne fonctionne toujours pas, vérifiez que vous avez activé le débogage USB sur votre appareil et exécutez périphériques adb. Cela déclenchera la connexion de votre ordinateur à votre appareil. Acceptez simplement l'invite de votre appareil dès que l'invite d'authentification est affichée..
Si vous voulez avoir une copie du fichier APK afin de pouvoir la partager avec un ami, vous pouvez en générer une en exécutant les opérations suivantes:
ionique construire Android
Cela va créer un android-debug.apk déposer dans le plates-formes / android / build / output / apk dossier.
Conclusion
C'est tout! Dans ce tutoriel, vous avez créé votre toute première application Ionic 2. C'est une application simple, et vous avez peut-être même trouvé cela facile. Mais vous avez appris à configurer 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. Celles-ci incluent l'extraction de la valeur actuelle d'un champ de texte, la réponse aux événements de clic, la liaison d'images et l'utilisation de plug-ins pour accéder aux fonctionnalités natives. Alors tape dans le dos! Vous avez fait du bon 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 Premiers pas avec Ionic 2.
Dans ce cours, Reggie Dawson vous apprendra tout sur le cadre Ionic et vous montrera comment créer une application mobile à partir de zéro. En chemin, vous en apprendrez plus sur la bibliothèque de composants Ionic, sur la programmation de JavaScript de type statique avec TypeScript et sur l'intégration d'une application Ionic 2 avec une API rich media..
Share
Accentsconagua
