Non classé

Comment créer et déployer une application de matériau angulaire –

A propos de l'auteur

Un développeur de logiciels full stack le jour et un développeur d'applications mobiles la nuit. Sans travailler, j'adore cuisiner et jouer à des jeux PC.
Plus à propos
Shubham

Présentation de la création d'une application Web Angular 8 à l'aide de la bibliothèque officielle Angular Material Design. Apprenez à créer une application Web de générateur de code QR entièrement basée sur Angular lorsqu'elle est hébergée sur Netlify.

Angular est l'un des choix populaires lors de la création de nouvelles applications Web. De plus, les spécifications «Material Design» sont devenues un choix incontournable pour créer une expérience minimale et engageante aujourd'hui. Ainsi, tout nouveau projet «angulaire» utilise principalement la «bibliothèque de conception de matériaux angulaires» pour utiliser les composants qui suivent les spécifications de conception des matériaux. Des animations fluides aux commentaires d'interaction appropriés, tout cela est déjà disponible dans le cadre de la bibliothèque officielle de conception de matériaux pour angular.

Une fois l'application Web développée, l'étape suivante consiste à la déployer. C'est là que «Netlify» entre en scène. Avec son interface très facile à utiliser, son déploiement automatique, la répartition du trafic pour les tests A / B et diverses autres fonctionnalités, Netlify est certainement un excellent outil.

L'article sera une procédure pas à pas pour créer une application Web Angular 8 à l'aide de la bibliothèque officielle Angular Material Design. Nous allons créer une application Web de générateur de code QR entièrement basée sur Angular lorsqu'elle sera hébergée sur Netlify.

Les fichiers de ce tutoriel peuvent être trouvés sur GitHub et une version de démonstration est déployée ici.

Commencer

  1. Installez Angular 8,
  2. Créez un compte Github,
  3. Installez Git sur votre ordinateur,
  4. Créez un compte Netlify.

Remarque: J'utiliserai VSCode et Microsoft Windows comme IDE et OS préférés, bien que les étapes soient similaires pour tout autre IDE sur n'importe quel autre OS.

Une fois les conditions préalables ci-dessus remplies, commençons!

Maquettes et planification

Avant de commencer à créer le projet, il serait avantageux de planifier à l'avance: quel type d'interface utilisateur souhaiterions-nous dans notre application? Y aura-t-il des pièces réutilisables? Comment l'application interagira-t-elle avec les services externes?

Tout d'abord, vérifiez les simulations de l'interface utilisateur.

Page d'accueil (Grand aperçu)
Création d'une page QR (grand aperçu)
Page Historique (Grand aperçu)

Ce sont les trois pages différentes qui seront contenues dans l'application. La page d'accueil sera le point de départ de notre candidature. La création d'une page QR doit traiter de la création d'un nouveau code QR. La page Historique affichera tous les codes QR enregistrés.

Les maquettes fournissent non seulement une idée de l'apparence de l'application, mais elles séparent également la responsabilité de chaque page.

Une observation (d'après les simulations) est qu'il semble que la barre de navigation supérieure soit commune à toutes les pages. Ainsi, la barre de navigation peut être créée en tant que composant réutilisable et réutilisée.

Maintenant que nous avons une bonne idée de l'apparence de l'application et de ce qui peut être réutilisé, commençons.

Création d'un nouveau projet angulaire

Lancez VSCode, puis ouvrez une fenêtre de terminal dans VSCode pour générer un nouveau projet Angular.

Terminal en VSCode (Grand aperçu)

Le terminal s'ouvrira avec un chemin par défaut comme indiqué dans l'invite. Vous pouvez passer à un répertoire préféré avant de continuer; dans le cas de Windows, j'utiliserai le CD commander.

Navigation vers le chemin préféré (Grand aperçu)

Aller de l'avant, angular-cli a une commande pour générer de nouveaux projets ng nouveau . Utilisez simplement le nom de projet que vous aimez et appuyez sur Entrée, par exemple ng new qr.

Cela déclenchera la magie angulaire-cli; il fournira quelques options pour configurer certains aspects du projet, par exemple, en ajoutant un routage angulaire. Ensuite, en fonction des options sélectionnées, il générera tout le squelette du projet qui peut être exécuté sans aucune modification.

Pour ce didacticiel, entrez Oui pour le routage et sélectionnez CSS pour le style. Cela va générer un nouveau projet Angular:

Création d'un nouveau projet angulaire (Grand aperçu)

Nous avons maintenant un projet Angular entièrement fonctionnel. Afin de nous assurer que tout fonctionne correctement, nous pouvons exécuter le projet en entrant cette commande dans le terminal: servir. Euh oh, mais attendez, cela se traduit par une erreur. Qu'est-ce qui aurait pu arriver?

ng serve error (Grand aperçu)

Ne vous inquiétez pas. Chaque fois que vous créez un nouveau projet en utilisant angular-cli, il génère le squelette entier dans un dossier nommé d'après le nom du projet spécifié dans la commande ng new qr. Ici, nous devrons remplacer le répertoire de travail actuel par celui qui vient d'être créé. Sous Windows, utilisez la commande cd qr pour changer de répertoire.

Maintenant, essayez de relancer le projet à l'aide de servir:

Projet en cours d'exécution (grand aperçu)

Ouvrez un navigateur Web, accédez à l'URL http: // localhost: 4200 pour voir le projet en cours d'exécution. La commande servir exécute l'application sur le port 4200 par défaut.

POINTE: Pour l'exécuter sur un autre port, nous utilisons la commande ng serve --port par exemple, ng serve --port 3000.

Cela garantit que notre projet angulaire de base est opérationnel. Allons-nous en.

Nous devons ajouter le dossier du projet à VSCode. Allez dans le menu "Fichier" et sélectionnez "Ouvrir le dossier" et sélectionnez le dossier du projet. Le dossier du projet sera maintenant affiché dans la vue Explorateur à gauche.

Ajout d'une bibliothèque de matériaux angulaires

Pour installer la bibliothèque de matériaux angulaires, utilisez la commande suivante dans la fenêtre du terminal: ng add @ angular / material. Cela posera (encore) quelques questions telles que le thème que vous voulez, si vous voulez des animations par défaut, si le support tactile est requis, entre autres. Nous allons simplement sélectionner la valeur par défaut Indigo / Rose thème, Oui à ajouter HammerJS bibliothèque et animations de navigateur.

Ajout de matériau angulaire (grand aperçu)

La commande ci-dessus configure également l'ensemble du projet pour permettre la prise en charge des composants de matériau.

  1. Il ajoute des dépendances de projet à package.json,
  2. Il ajoute la police Roboto à la index.html fichier,
  3. Il ajoute la police de l'icône Material Design à votre index.html,
  4. Il ajoute également quelques styles CSS globaux à:
    • Retirez les marges du corps,
    • Ensemble hauteur: 100% dans le HTML et le corps,
    • Définissez Roboto comme police d'application par défaut.

Juste pour être sûr que tout va bien, vous pouvez réexécuter le projet à ce stade, bien que vous ne remarquiez rien de nouveau.

Ajout de la page d'accueil

Le squelette de notre projet est maintenant prêt. Commençons par ajouter la page d'accueil.

(Grand aperçu)

Nous voulons garder notre page d'accueil simple, tout comme l'image ci-dessus. Cette page d'accueil utilise quelques composants matériels angulaires. Disséquons.

  1. La barre supérieure est un simple HTML nav élément qui contient le bouton de style de matériau, bouton mat, avec une image et un texte comme enfant. La couleur de la barre est la même que la couleur primaire qui a été sélectionnée lors de l'ajout de la bibliothèque de matériaux angulaires;
  2. Une image centrée;
  3. Un autre, bouton mat, avec juste un texte comme enfant. Ce bouton permettra aux utilisateurs de naviguer vers la page d'historique;
  4. Un insigne de comte, matBadge, attaché au bouton ci-dessus, indiquant le nombre de codes QR enregistrés par l'utilisateur;
  5. Un bouton d'action flottant, mat-fab, dans le coin inférieur droit ayant la couleur d'accentuation du thème sélectionné.

En m'éloignant un peu, ajoutons d'abord les autres composants et services requis.

Ajout d'un en-tête

Comme prévu précédemment, la barre de navigation doit être réutilisée. Créons-la en tant que composant angulaire distinct. Terminal ouvert en VSCode et tapez ng g c header (abréviation de ng generate header header) et appuyez sur Entrée. Cela va créer un nouveau dossier nommé «en-tête» qui contiendra quatre fichiers:

  • header.component.css: utilisé pour fournir un style à ce composant;
  • header.component.html: pour ajouter des éléments HTML;
  • header.component.spec.ts: pour écrire des cas de test;
  • header.component.ts: pour ajouter la logique basée sur Typescript.
Composant d'en-tête (Grand aperçu)

Pour que l'en-tête ressemble à ce qu'il était dans les maquettes, ajoutez le code HTML ci-dessous dans header.component.html:

POINTE: Pour ajouter une élévation pour tout composant de matériau, utilisez [class.mat-elevation-z8]= vrai, la valeur d'élévation peut être modifiée en changeant z valeur, dans ce cas, il est z8. Par exemple, pour changer l'élévation à 16, utilisez [class.mat-elevation-z16]= vrai.

Dans l'extrait HTML ci-dessus, deux éléments matériels angulaires sont utilisés: mat-icon et bouton mat / bouton icône mat. Leur utilisation est très simple; nous devons d'abord ajouter ces deux modules en tant que modules dans notre app.module.ts comme indiqué ci-dessous:

Importation de module pour mat-icon et bouton mat (Grand aperçu)

Cela nous permettra d'utiliser ces deux éléments matériels angulaires n'importe où dans n'importe quel composant.

Pour ajouter des boutons de matériau, l'extrait HTML suivant est utilisé:

Il existe différents types d'éléments de bouton de matériau disponibles dans la bibliothèque de matériaux angulaires, tels que bouton surélevé mat, bouton plat mat, mat-fab et d'autres; il suffit de remplacer le bouton mat dans l'extrait de code ci-dessus avec tout autre type.

Types de boutons matériels. (Grand aperçu)

L'autre élément est mat-icon qui est utilisé pour afficher les icônes disponibles dans la bibliothèque d'icônes de matériaux. Lorsque la bibliothèque de matériaux angulaires a été ajoutée au début, une référence à la bibliothèque d'icônes de matériaux a également été ajoutée, ce qui nous a permis d'utiliser des icônes de la vaste gamme d'icônes.

L'utilisation est aussi simple que:


arrow_back

Le niché peut être utilisé pour changer la taille de l'icône (ici, c'est md-32), ce qui rendra la taille de l'icône 32px en hauteur et en largeur. Cette valeur peut être md-24, md-48, etc. La valeur de l'imbriqué tag est le nom de l'icône. (Le nom peut être trouvé ici pour toute autre icône.)

Accessibilité

Chaque fois que des icônes ou des images sont utilisées, il est impératif qu'elles fournissent des informations suffisantes à des fins d'accessibilité ou pour un utilisateur de lecteur d'écran. ARIA (Accessible Rich Internet Applications) définit un moyen de rendre le contenu Web et les applications Web plus accessibles aux personnes handicapées.

Un point à noter est que les éléments HTML qui ont leur sémantique native (par ex. nav) n'ont pas besoin d'attributs ARIA; le lecteur d'écran sait déjà que nav est un élément de navigation et lisez-le en tant que tel.

Les spécifications ARIA sont divisées en trois catégories: rôles, états et propriétés. Disons qu'un div est utilisé pour créer une barre de progression dans le code HTML. Il n'a pas de sémantique native; Le rôle ARIA peut décrire ce widget comme une barre de progression, la propriété ARIA peut indiquer sa caractéristique telle qu'elle peut être glissée. L'état ARIA décrira son état actuel tel que la valeur actuelle de la barre de progression. Voir l'extrait ci-dessous:

De même, un attribut aria très couramment utilisé: aria-hidden = vrai / faux est utilisé. La valeur true rend cet élément invisible aux lecteurs d'écran.

Étant donné que la plupart des éléments d'interface utilisateur utilisés dans cette application ont une signification sémantique native, les seuls attributs ARIA utilisés sont de spécifier les états de visibilité ARIA. Pour plus d'informations, reportez-vous à ceci.

le header.component.html contient une certaine logique pour masquer et afficher le bouton de retour en fonction de la page actuelle. De plus, le bouton Accueil contient également une image / logo qui doit être ajouté au /les atouts dossier. Téléchargez l'image d'ici et enregistrez-la dans le /les atouts dossier.

Pour le style de la barre de navigation, ajoutez le CSS ci-dessous dans header.component.css:

.navbar {
   position: fixe;
   en haut: 0;
   gauche: 0;
   à droite: 0;
   indice z: 2;
   fond: # 3f51b5;
   affichage: flex;
   flex-wrap: wrap;
   align-items: centre;
   rembourrage: 12px 16px;
}
.bouton {
   Couleur blanche;
   marge: 0px 10px;
}

Comme nous voulons garder le composant d'en-tête réutilisable sur d'autres composants, donc pour décider de ce qui doit être affiché, nous les exigerons en tant que paramètres d'autres composants. Cela nécessite l'utilisation de @Contribution() décorateur qui se liera aux variables que nous avons utilisées dans header.component.html.

Ajoutez ces lignes dans le header.component.ts fichier:

// Ajoutez ces trois lignes au-dessus de l'entrée constructeur.
 @Input () showBackButton: boolean;
 @Input () currentTitle: string;
 @Input () showHistoryNav: boolean;

 constructeur () {}

Les trois liaisons ci-dessus seront transmises en tant que paramètre à partir d'autres composants que le composant d'en-tête utilisera. Son utilisation sera plus claire une fois que nous irons de l'avant.

Pour continuer, nous devons créer une page d'accueil qui peut être représentée par un composant angulaire. Commençons donc par créer un autre composant; type ng g c home dans le terminal pour générer automatiquement le composant home. Comme précédemment, un nouveau dossier nommé «home» sera créé contenant quatre fichiers différents. Avant de modifier ces fichiers, ajoutons des informations de routage au module de routage angulaire.

Ajout de routage

Angular fournit un moyen de mapper l'URL à un composant spécifique. Chaque fois qu'une navigation se produit, le cadre angulaire surveille l'URL et en fonction des informations présentes dans le app-routing.module.ts fichier; il initialise le composant mappé. De cette façon, les différents composants ne doivent pas assumer la responsabilité d'initialiser d'autres composants. Dans notre cas, l'application dispose de trois pages navigables en cliquant sur différents boutons. Nous y parvenons en tirant parti du support de routage fourni par le framework Angular.

Le composant home doit être le point de départ de l'application. Ajoutons ces informations à la app-routing.module.ts fichier.

Composant de routage domestique. (Grand aperçu)

le chemin la propriété est définie comme une chaîne vide; cela nous permet de mapper l'URL de l'application au composant de la page d'accueil, quelque chose comme google.com qui montre la page d'accueil de Google.

POINTE: La valeur du chemin ne commence jamais par un "/", mais utilise à la place une chaîne vide même si le chemin d'accès peut être comme recherche / café.

Revenant au composant de la page d'accueil, remplacez le contenu de home.component.html avec ça:





Le composant home comprend trois parties:

  1. Le composant d'en-tête réutilisable ici.
  2. Composant de profil ici.
  3. Le bouton d'action flottant en bas à droite.

L'extrait HTML ci-dessus montre comment le composant d'en-tête réutilisable est utilisé dans d'autres composants, nous utilisons simplement le sélecteur de composant et passons les paramètres requis.

Le composant de profil est créé pour être utilisé comme corps de la page d'accueil, nous le créerons bientôt.

Le bouton d'action flottant avec + l'icône est une sorte de bouton de matériau angulaire de type mat-fab en bas à droite de l'écran. Il a la routerLink directive d'attribut qui utilise les informations d'itinéraire fournies dans le app-routing.module.ts pour la navigation. Dans ce cas, le bouton a la valeur d'itinéraire comme /créer qui sera mappé pour créer un composant.

Pour faire flotter le bouton de création en bas à droite, ajoutez le code CSS ci-dessous dans home.component.css:

.fab-en bas à droite {
   position: fixe;
   gauche: auto;
   en bas: 5%;
   à droite: 10%;
}

Étant donné que le composant de profil est censé gérer le corps de la page d'accueil, nous quitterons home.component.ts intact.

Ajout d'un composant de profil

Terminal ouvert, tapez ng g c profile et appuyez sur Entrée pour générer le composant de profil. Comme prévu précédemment, ce composant gérera le corps principal de la page d'accueil. Ouvert profile.component.html et remplacez son contenu par ceci:

L'extrait html ci-dessus montre comment utiliser le matBadge élément de la bibliothèque de matériaux. Pour pouvoir l'utiliser ici, nous devons suivre l'exercice habituel consistant à ajouter MatBadgeModule à app.module.ts fichier. Les badges sont de petits descripteurs de statut picturaux pour les éléments de l'interface utilisateur tels que les boutons, les icônes ou les textes. Dans ce cas, il est utilisé avec un bouton pour afficher le nombre de QR enregistrés par l'utilisateur. Le badge de bibliothèque de matériaux angulaires possède diverses autres propriétés telles que le réglage de la position du badge avec matBadgePosition, matBadgeSize pour spécifier la taille, matBadgeColor pour définir la couleur du badge.

Un autre élément d'image doit être ajouté au dossier des éléments. Téléchargez-le et enregistrez-le dans le dossier des ressources du projet.

Ouvert profile.component.css et ajoutez ceci:

.centre {
   haut: 50%;
   gauche: 50%;
   position: absolue;
   transformer: traduire (-50%, -50%);
}


.profile-child {
   affichage: flex;
   flex-direction: colonne;
   align-items: centre;
}


.profile-actions {
   rembourrage-dessus: 20px;
}


.avatar {
   rayon frontière: 50%;
   largeur: 180 px;
   hauteur: 180px;
}

Le CSS ci-dessus réalisera l'interface utilisateur comme prévu.

Passons à autre chose, nous avons besoin d'une sorte de logique pour mettre à jour la valeur du nombre d'historique comme cela se reflétera dans matBadge utilisé plus tôt. Ouvert profile.component.ts et ajoutez l'extrait en surbrillance de manière appropriée:

la classe d'exportation ProfileComponent implémente OnInit {

 historyCount = 0;
 constructeur (private storageUtilService: StorageutilService) {}

 ngOnInit () {
   this.updateHistoryCount ();
 }


 updateHistoryCount () {
   this.historyCount = this.storageUtilService.getHistoryCount ();
 }
}

Nous avons ajouté StorageutilService mais nous n'avons pas créé un tel service jusqu'à présent. Ignorant l'erreur, nous avons terminé notre composant de profil qui termine également notre composant de page d'accueil. Nous reverrons ce composant de profil après avoir créé notre service utilitaire de stockage. Bon alors faisons-le.

Stockage local

HTML5 fournit une fonction de stockage Web qui peut être utilisée pour stocker des données localement. Cela offre beaucoup plus de stockage que les cookies, au moins 5 Mo contre 4 Ko. Il existe deux types de stockage Web avec une portée et une durée de vie différentes: Local et Session. Les premiers peuvent stocker des données de façon permanente tandis que les seconds sont temporaires et pour une seule session. La décision de sélectionner le type peut être basée sur le cas d'utilisation, dans notre scénario, nous voulons enregistrer sur plusieurs sessions, donc nous irons avec Local espace de rangement.

Chaque donnée est stockée dans une paire clé / valeur. Nous utiliserons le texte pour lequel le QR est généré comme clé et l'image QR encodée comme une chaîne base64 comme valeur. Créez un dossier d'entité, à l'intérieur du dossier créez un nouveau qr-object.ts fichier et ajoutez l'extrait de code comme indiqué:

Modèle d'entité QR. (Grand aperçu)

Le contenu de la classe:

exporter la classe QR {
  
   texte: chaîne;
   imageBase64: chaîne;

   constructeur (text: string, imageBase64: string) {
       this.imageBase64 = imageBase64;
       this.text = text;
   }

}

Chaque fois que l'utilisateur enregistre le QR généré, nous créons un objet de la classe ci-dessus et enregistrons cet objet à l'aide du service utilitaire de stockage.

Créez un nouveau dossier de services, nous allons créer de nombreux services, il vaut mieux les regrouper.

Dossier Services. (Grand aperçu)

Changez le répertoire de travail actuel en services, services cd, pour créer une nouvelle utilisation du service ng g s c'est un raccourci pour ng générer un service , tapez ng g s storageutil et appuyez sur Entrée. Cela va créer deux fichiers: storageutil.service.ts et storageutil.service.spec.ts. Ce dernier sert à l'écriture de tests unitaires. Ouvert storageutil.service.ts et ajoutez ceci:

private historyCount: nombre;
 constructeur () {}

 saveHistory (clé: chaîne, élément: chaîne) {
   localStorage.setItem (clé, élément)
   this.historyCount = this.historyCount + 1;
 }

 readHistory (clé: chaîne): chaîne {
   retour localStorage.getItem (clé)
 }

 readAllHistory (): Tableau {
   const qrList = nouveau tableau();

   pour (soit i = 0; i 

Importez la classe qr-object pour corriger les erreurs. Pour utiliser la fonction de stockage local, il n'est pas nécessaire d'importer quelque chose de nouveau, utilisez simplement le mot-clé stockage local pour enregistrer ou obtenir de la valeur en fonction d'une clé.

Ouvert profile.component.ts fichier à nouveau et importez la classe StorageutilService pour terminer correctement le composant de profil.

En exécutant le projet, nous pouvons voir que la page d'accueil est en place comme prévu.

Ajout de la page Créer un QR

Nous avons notre page d'accueil prête, bien que le bouton créer / ajouter ne fasse rien. Ne vous inquiétez pas, la logique réelle était déjà écrite. Nous avons utilisé un routerLink pour changer le chemin de base de l'URL en /créer mais aucun mappage n'a été ajouté au app-routing.module.ts fichier. Créons un composant qui traitera de la création de nouveaux codes QR, tapez ng g c create-qr et appuyez sur Entrée pour générer un nouveau composant.

Ouvrez le app-routing.module.ts fichier et ajoutez l'entrée ci-dessous à la itinéraires tableau:

{chemin: 'créer', composant: CreateQrComponent},

Cela cartographiera le CreateQRComponent avec l'URL /créer.

Ouvrez create-qr.components.html et remplacez le contenu par ceci:





   

L'extrait ci-dessus utilise de nombreux éléments de bibliothèque de matériaux angulaires. Comme prévu, il possède une référence de composant d'en-tête dans laquelle les paramètres requis sont transmis. Ensuite, le corps principal de la page de création est constitué d'une carte de matériau angulaire ou tapis-carte centré et élevé jusqu'à 12px [class.mat-elevation-z12]= vrai est utilisé. La carte de matériel est juste un autre type de conteneur qui peut être utilisé comme n'importe quel autre div étiquette. Bien que la bibliothèque de matériaux offre certaines propriétés pour disposer des informations bien définies dans un tapis-carte tels que le placement de l'image, le titre, le sous-titre, la description et l'action comme indiqué ci-dessous.

Exemple de carte. (Grand aperçu)

Dans l'extrait html ci-dessus, nous avons utilisé tapis-carte comme tout autre conteneur.

Un autre élément de bibliothèque de matériaux utilisé est matTooltip, il s'agit simplement d'une autre info-bulle simple d'utilisation, affichée lorsque l'utilisateur survole ou appuie longuement sur un élément. Utilisez simplement l'extrait ci-dessous pour afficher l'info-bulle:

matTooltip = "Tout texte que vous souhaitez afficher"

Il peut être utilisé avec des boutons d'icônes ou tout autre élément d'interface utilisateur pour transmettre des informations supplémentaires. Dans le contexte de l'application, il affiche des informations sur le bouton de l'icône de fermeture. Pour modifier le placement de l'info-bulle matTooltipPosition est utilisé, par ex.

matTooltip = "Tout texte que vous souhaitez afficher" matTooltipPosition = "ci-dessus"

Outre matTooltip, tapis-spinner est utilisé pour afficher la progression du chargement. Lorsque l'utilisateur clique sur le bouton créer, un appel réseau est effectué, c'est alors que le spinner de progression est affiché. Lorsque l'appel réseau revient avec le résultat, nous masquons simplement le spinner. Il peut être utilisé simplement comme ceci:

showProgressSpinner est une variable booléenne qui est utilisée pour afficher / masquer le spinner de progression. La bibliothèque fournit également d'autres paramètres comme [color]= 'Accent' changer de couleur, [mode]= «Indéterminé» pour changer le type de spinner de progression. Un spinner de progression indéterminée n'affichera pas la progression de la tâche tandis qu'une variable déterminée peut avoir différentes valeurs pour refléter la progression de la tâche. Ici, un spinner indéterminé est utilisé car nous ne savons pas combien de temps prendra l'appel réseau.

La bibliothèque de matériaux fournit une variante de zone de texte conforme à la ligne directrice des matériaux, mais elle ne peut être utilisée que comme un descendant de mat-form-field. L'utilisation de la zone de texte des matériaux est aussi simple que celle du HTML par défaut, comme ci-dessous:



   

matInput est une directive qui permet au natif contribution tag pour travailler avec mat-form-field. le espace réservé La propriété permet d'ajouter n'importe quel texte de conseil pour l'utilisateur.

POINTE: Utilisation cdkTextareaAutosize propriété textarea pour la rendre auto-redimensionnable. cdkAutosizeMinRows, cdkAutosizeMaxRows pour définir les lignes et les colonnes et les trois ensemble pour faire redimensionner automatiquement la zone de texte jusqu'à ce qu'elle atteigne le nombre maximal de lignes et de colonnes défini.

Pour utiliser tous ces éléments de bibliothèque de matériaux, nous devons les ajouter dans le app.module.ts fichier.

Créer des importations de module QR. (Grand aperçu)

Une image d'espace réservé est utilisée dans le html, téléchargez-la et enregistrez-la dans le dossier des ressources.

Le code HTML ci-dessus nécessite également un style CSS, ouvrez le fichier create-qr.component.ts et ajoutez:

.qrCard {
   affichage: flex;
   flex-direction: colonne;
   align-items: centre;
   position: absolue;
   haut: 50%;
   gauche: 50%;
   transformer: traduire (-50%, -50%);
   largeur: 20%;
   hauteur: 65%;
   rembourrage: 50px 20px;
}

.qrContent {
   affichage: flex;
   flex-direction: colonne;
   align-items: centre;
   largeur: 100%;
}

.qrTextAreaDiv {
   largeur: 100%;
   affichage: flex;
   flex-direction: rangée;
   justifier-contenu: centre;
   rembourrage: 0px 0px;
   position: absolue;
   en bas: 10%;
}

.createBtn {
   gauche: 50%;
   transformer: traduire (-50%, 0px);
   largeur: 80%;
}

.createBtnDiv {
   position: absolue;
   en bas: 5%;
   largeur: 100%;
}


.closeBtn {
   affichage: flex;
   flex-direction: row-reverse;
   align-items: flex-end;
   largeur: 100%;
   marge en bas: 20 px;
}

.closeBtnFont {
   taille de police: 32px;
   couleur: rgba (0,0,0,0,75);
}

.qrImgDiv {
   haut: 20%;
   position: absolue;
   affichage: flex;
   flex-direction: colonne;
   align-items: centre;
   justifier-contenu: centre;
   largeur: 100%;
}
.actionButtons {
   affichage: flex;
   flex-direction: rangée;
   rembourrage-dessus: 20px;
}

Câblons l'interface utilisateur avec la logique, ouvrons create-qr.component.ts fichier et ajoutez le code ci-dessous, en laissant les lignes qui sont déjà présentes:

la classe d'exportation CreateQrComponent implémente OnInit {

 qrCodeImage = '../../../assets/download.png';
 showProgressSpinner = false;
 qrText: chaîne;
 currentQR;
 showBackButton = true;
 title = 'Générer un nouveau code QR';
 showHistoryNav = true;

 constructeur (snackBar privé: MatSnackBar,
     restutil privé: RestutilService,
     private storageService: StorageutilService) {}

 ngOnInit () {
 }

 createQrCode () {
   // Vérifier si une valeur est donnée pour le texte du code qr
   if (!! this.qrText) {
     // Faire l'appel http pour charger le code qr
     this.loadQRCodeImage (this.qrText);
   } autre {
     // Afficher le snack-bar
     this.showSnackbar ('Entrez d'abord du texte')
   }
 }

 public loadQRCodeImage (texte: chaîne) {
   // Afficher le spinner de progression lors de la demande
   this.showProgressSpinner = true;
   // Déclencher l'appel API
   this.restutil.getQRCode (text) .subscribe (image => {
     // Reçu le résultat - comme un blob d'image - nécessite une analyse
     this.createImageBlob (image);
   }, erreur => {
     console.log ('Impossible de récupérer le code QR à partir de l'url', erreur)
     // Masque le spinner - affiche un message d'erreur correct
     this.showProgressSpinner = false;
   });
 }

 createImageBlob privé (image: Blob) {
   // Créer un lecteur de fichiers pour lire le blob d'image
   const reader = new FileReader ();
   // Ajouter un écouteur d'événements pour "charger" - invoqué une fois la lecture du blob terminée
   reader.addEventListener ('load', () => {
     this.qrCodeImage = reader.result.toString ();
     // Masque le spinner de progression
     this.showProgressSpinner = false;
     this.currentQR = reader.result.toString ();
   }, faux);
   // Lire le blob d'image s'il n'est pas nul ou non défini
   if (image) {
     reader.readAsDataURL (image);
   }
 }

 saveQR () {
   if (!! this.qrText) {
     this.storageService.saveHistory (this.qrText, this.currentQR);
     this.showSnackbar ('QR enregistré')
   } autre {
     // Afficher le snack-bar
     this.showSnackbar ('Entrez d'abord du texte')
   }
  
 }

 showSnackbar (msg: chaîne) {
   // Afficher le snack-bar
   this.snackBar.open (msg, '', {
     durée: 2000,
   });
 }
}

Pour fournir aux utilisateurs des informations contextuelles, nous utilisons également MatSnackBar de la bibliothèque de conception de matériaux. Cela apparaît comme une fenêtre contextuelle sous l'écran et reste pendant quelques secondes avant de disparaître. Ce n'est pas un élément mais plutôt un service qui peut être appelé à partir du code dactylographié. L'extrait ci-dessus avec le nom de la méthode showSnackbar montre comment ouvrir un snack-bar, mais avant de pouvoir l'utiliser, nous devons ajouter le MatSnackBar entrée dans le fichier app.module.ts comme nous l'avons fait pour d'autres éléments de la bibliothèque de matériaux.

POINTE: Dans les versions récentes de la bibliothèque de matériaux angulaires, il n'y a pas de moyen simple de changer le style du snack-bar, au lieu de cela, il faut faire deux ajouts au code, tout d'abord utiliser le CSS ci-dessous pour modifier les couleurs d'arrière-plan et de premier plan:

:: ng-deep snack-bar-container.snackbarColor {
   couleur de fond: rgba (63, 81, 181, 1);
}
:: ng-deep .snackbarColor .mat-simple-snackbar {
   Couleur blanche;
 }

La seconde consiste à utiliser une propriété appelée panelClass pour définir le style sur la classe CSS ci-dessus:

this.snackBar.open (msg, '', {
     durée: 2000,
     panelClass: ['snackbarColor']
   });

Les deux combinaisons ci-dessus permettront un style personnalisé au composant snackbar de la bibliothèque de conception de matériaux.

Ceci termine la page de création de qr mais il reste une pièce manquante. Vérification du create-qr.component.ts fichier, il affichera une erreur concernant la pièce manquante. La pièce manquante à ce puzzle est la RestutilService qui est responsable de la récupération de l'image du code qr à partir de l'API tierce.

Dans le terminal, changez le répertoire actuel en services, tapez ng g s restutil et appuyez sur Entrée. Cela va créer les fichiers RestUtilService, ouvrir le restutil.service.ts fichier et ajoutez cet extrait:

edgeSize privé = '300';
 private BASE_URL = 'https://api.qrserver.com/v1/create-qr-code/?data={data}!&size={edge}x{edge}';

 constructeur (httpClient privé: HttpClient) {}

 getQRCode public (texte: chaîne): observable {
   // Créez l'url avec les données fournies et d'autres options
   laissez url = this.BASE_URL;
   url = url.replace ("{data}", texte) .replace (/ {edge} / g, this.edgeSize);
   // Faire l'appel http api à l'url
   renvoyer this.httpClient.get (url, {
     responseType: 'blob'
   });
 }

Le service ci-dessus récupère l'image qr de l'API tierce et comme la réponse n'est pas de type json, mais une image, nous spécifions donc le responseType comme 'goutte' dans l'extrait ci-dessus.

Angular fournit HttpClient pour communiquer avec n'importe quel serveur prenant en charge HTTP. Il fournit de nombreuses fonctionnalités telles que le filtrage de la demande avant son déclenchement, la récupération de la réponse, permettant le traitement de la réponse via des rappels et autres. Pour utiliser le même, ajoutez une entrée pour HttpClientModule dans app.module.ts fichier.

Enfin, importez ce service dans le create-qr.component.ts pour terminer la création.

Il y a un problème avec la logique de création de qr ci-dessus. Si l'utilisateur utilise le même texte pour générer le QR encore et encore, cela entraînera un appel réseau. Une façon de remédier à cela est la mise en cache de la requête, servant ainsi la réponse du cache si le texte de la requête est le même.

Demande de mise en cache

Angular fournit un moyen simplifié de faire des appels HTTP, HttpClient, ainsi que HttpInterceptors pour inspecter et transformer les demandes ou réponses HTTP vers et depuis les serveurs. Il peut être utilisé pour l'authentification ou la mise en cache et beaucoup de ces choses, plusieurs intercepteurs peuvent être ajoutés et chaînés pour un traitement ultérieur. Dans ce cas, nous interceptons les requêtes et servons la réponse du cache si le texte qr est le même.

Créez un dossier d'intercepteur, puis créez un fichier cache-interceptor.ts:

Intercepteur de cache. (Grand aperçu)

Ajoutez l'extrait de code ci-dessous au fichier:

importer {Injectable} depuis '@ angular / core';
import {HttpInterceptor, HttpResponse, HttpRequest, HttpHandler, HttpEvent} de '@ angular / common / http';
importer {tap} depuis 'rxjs / operators';
import {of, Observable} de 'rxjs';

@Injectable ({
 providedIn: 'root'
})
la classe d'exportation RequestCachingService implémente HttpInterceptor {
 cacheMap = new Map <string, HttpResponse> ();

 constructeur () {}

 intercept (req: HttpRequest, suivant: HttpHandler): Observable <HttpEvent> {
   const cachedResponse = this.cacheMap.get (req.urlWithParams);
  
   if (cachedResponse) {
     retour de (cachedResponse);
   }

   return next.handle (req) .pipe (appuyez sur (event => {
     if (instance d'événement de HttpResponse) {
       this.cacheMap.set (req.urlWithParams, événement);
     }
   }))
  
 }
}

Dans l'extrait de code ci-dessus, nous avons une carte dont la clé est l'URL de la demande et la réponse comme valeur. Nous vérifions si l'URL actuelle est présente dans la carte; si c'est le cas, retournez la réponse (le reste est géré automatiquement). Si l'URL n'est pas dans la carte, nous l'ajoutons.

Nous n'avons pas encore fini, une entrée au app.module.ts est nécessaire à son bon fonctionnement. Ajouter l'extrait ci-dessous:

importer {HttpClientModule, HTTP_INTERCEPTORS} depuis '@ angular / common / http';
importer {CacheInterceptor} à partir de './interceptor/cache-interceptor';


fournisseurs: [
   { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
 ],

Cela ajoute la fonctionnalité de mise en cache à notre application. Passons à la troisième page, la page Historique.

Ajout de la page d'historique

Tous les codes QR enregistrés seront visibles ici. Pour créer un autre composant, ouvrez le type de terminal ng g c histoire et appuyez sur Entrée.

Ouvert history.component.css et ajoutez le code ci-dessous:

.contenu principal {
   rembourrage: 5% 10%;
}
.truncate {
   largeur: 90%;
   espace blanc: nowrap;
   débordement caché;
   débordement de texte: points de suspension;
}
.center-img {
   position: absolue;
   haut: 50%;
   gauche: 50%;
   transformer: traduire (-50%, -50%);
   affichage: flex;
   flex-direction: colonne;
   align-items: centre;
}

Ouvert history.component.html et remplacez le contenu par ceci:



{{qr.text}}
Rien à voir ici

Comme d'habitude, nous avons le composant d'en-tête en haut. Ensuite, le reste du corps est une liste de grille qui montrera tous les codes QR enregistrés individuellement tapis-carte. Pour la vue grille, nous utilisons mat-grid-list de la bibliothèque de matériaux angulaires. Selon l'exercice, avant de pouvoir l'utiliser, nous devons d'abord l'ajouter au app.module.ts fichier.

La liste des grilles de tapis agit comme un conteneur avec plusieurs enfants de tuiles appelés tapis-grille-tuile, dans l'extrait html ci-dessus, chaque mosaïque est créée à l'aide de tapis-carte en utilisant certaines de ses propriétés pour le placement générique d'autres éléments d'interface utilisateur. Nous pouvons fournir le nombre de colonnes et rowHeight, qui est utilisé pour calculer automatiquement la largeur. Dans l'extrait ci-dessus, nous fournissons à la fois le nombre de colonnes et le rowHeight valeur.

Nous utilisons une image d'espace réservé lorsque l'historique est vide, téléchargez-le et ajoutez-le au dossier d'actifs.

Pour implémenter la logique de remplissage de toutes ces informations, ouvrez history.component.ts fichier et ajoutez l'extrait ci-dessous dans la classe HistoryComponent:

showBackButton = true;
 title = 'Histoire';
 showHistoryNav = false;
 historyList;

 constructeur (private storageService: StorageutilService,
 snack-bar privé: MatSnackBar) {}

 ngOnInit () {
   this.populateHistory ();
 }

 private populateHistory () {
   this.historyList = this.storageService.readAllHistory ();
 }

 supprimer (texte: chaîne) {
   this.storageService.deleteHistory (texte);
   this.populateHistory ();
 }

 partager (texte: chaîne) {
   this.snackbar.open (texte, '', {durée: 2000,})
 }

La logique ci-dessus récupère simplement tous les QR enregistrés et remplit la page avec. Les utilisateurs peuvent supprimer le QR enregistré qui supprimera l'entrée du stockage local. This finishes off our history component or does it? We need to add the route mapping for this component, open app-routing.module.ts and add a mapping for the history page as well:

{ path: 'history', component: HistoryComponent },

The whole route array should look like this by now:

const routes: Routes = [
 { path: '', component: HomeComponent },
 { path: 'create', component: CreateQrComponent },
 { path: 'history', component: HistoryComponent },
];

It is a good time to run the application to check the complete flow, open terminal and type ng serve and press enter, go to localhost:4200 to verify the working of the application.

Add To Github

Before proceeding to the deployment step, it would be good to add the project to a Github repository.

  1. Open Github
  2. Create a new repository
  3. Github new repository. (Large preview)
  4. In VS Code use the terminal and follow the first set of commands mentioned in the quick start guide to push all the project files
  5. Github add project. (Large preview)

Just refresh the page to check if all the files are visible. From this point any git changes such as commit, pull/push will be reflected in this newly created repository.

Netlify & Deployment

Our application runs in our local machine, but to enable others to access it, we should deploy it on a cloud platform and register it to a domain name. This is where Netlify comes into play. It provides continuous deployment services, integration with Github and many more features to benefit from. Right now, we want to enable global access to our application, let’s get started.

  1. Sign-up on Netlify.
  2. From the dashboard, click on New site from Git bouton.
  3. Netlify new site. (Large preview)
  4. Click on Github in the next screen.
  5. Netlify select git provider. (Large preview)
  6. Authorize Netlify to be able to access your Github repositories.
  7. Netlify github authorization. (Large preview)
  8. Search for and select the newly created qr dépôt.
  9. Netlify github repository selection. (Large preview)
  10. Netlify, in the next step, allows us to choose the Github repository branch for deployments. Normally one uses the Maître branch but one can also have a separate Libération branch which contains only release related and stable features.
  11. Netlify build and deploy. (Large preview)

Since, this is an angular web application, add ng build --prod as the build command. Publish directory will be dist/qr as mentioned in the angular.json file.

Angular build path. (Large preview)

Now click on the Deploy site button which will trigger a project build with the command ng build --prod and will output the file to dist/qr.

Since we provided the path information to Netlify, it will automatically pick up the correct files for servicing the web application. Netlify adds a random domain to our application by default.

Netlify site deployed. (Large preview)

You can click on the link provided in the above page, to access our application from anywhere. Finally, our application is deployed.

Custom Domain

In the above image, the URL for our application is shown, the sub-domain is randomly generated. Let’s change it. Cliquer sur Domain settings button then in the custom domains section click on the 3-dot menu and select Edit site name.

Custom domain. (Large preview)

This will open a popup wherein a new site name can be entered, this name should be unique across the Netlify domain. Enter any site name, which is available and click save.

Site name. (Large preview)

Now the link to our application will be updated with the new site name.

Split Testing

Another cool feature offered by Netlify is split testing, it enables traffic splitting so that different sets of users will interact with different application deployments. We can have new features added to a different branch and split the traffic to this branch deployment, analyze traffic and then merge the feature branch with the main deployment branch. Let’s configure it.

The prerequisite to enabling split testing is a Github repository with at least two branches. Head over to the app repository in Github, created earlier, create a new branch, une.

Create new branch. (Large preview)

The repository will now have a Maître branch and une branch. Netlify needs to be configured to do branch deployments, open Netlify dashboard and click on Réglages, on the left side click on Build & Deploy, puis Continuous Deployment, then on the right side in the Deploy contexts section, click on Edit settings.

Branch deployments. (Large preview)

dans le Branch deploys sub-section select the option Let me add individual branches, and enter the branch names and save it.

Branch deploy is another useful feature provided by Netlify, we can select which Github repository branches to deploy, we can also enable preview for every pull request to the Maître branch before merging. This is a neat feature enabling developers to actually test their changes out live before adding their code changes to the main deployment branch.

Now, click on Split Testing tab option at the top of the page, the split testing configurations will be presented here.

Split testing. (Large preview)

We can select the branch, other than the production branch, in this case une. We can also play around with the settings of splitting traffic, based on the traffic percentage each branch has been allotted, Netlify will re-route some users to the application deployed using une branch and others to the master branch. After configuring, click on Start test button to enable traffic splitting.

POINTE: Netlify may not recognize that the connected Github repository has more than one branch and may give this error:

Split testing error. (Large preview)

To resolve this, just reconnect to the repository from the Build & Deploy options.

Netlify provides a lot of other features as well, we just went through some of its useful features to demonstrate the ease of configuring different aspects of Netlify.

This brings us to the end of our journey, we have successfully created an Angular Material design based web application and deployed it on Netlify.

Conclusion

Angular is a great and popular framework for web application development, with the official Angular material design library it is much easier to create applications which adhere to the material design specs for a very natural interaction with the users. Moreover, the application developed with a great framework should use a great platform for deployment, Netlify is just that. With constant evolution, great support and with a plethora of features it surely is a great platform to bring web applications or static sites to the masses. Hopefully, this article will provide help in getting started with new Angular project from just a thought to deployment.

Next Steps

Smashing Editorial
(dm, yk, il)

Leave a Comment