Fermer

octobre 3, 2018

Comment construire une application de nouvelles avec Angular 6 et la conception matérielle


À propos de l'auteur

Développeur Web et mobile, blogueur et membre de l'équipe de traduction de Tuts +, lorsqu'il ne programme pas, vous pouvez généralement le trouver en train d'apprendre sur le développement personnel et…
Pour en savoir plus sur Rachid

Dans cet article, nous allons créer une application de presse combinant Angular 6 et la conception matérielle de Google, ce qui vous aidera à créer vos futures applications avec Angular. fière allure dans les navigateurs Web et les appareils mobiles.

Souhaitez-vous associer les applications de conception de matériel de Google à Angular ? Eh bien, ne cherchez pas plus loin!

Dans ce tutoriel, nous allons créer une application de presse utilisant deux des ressources les plus puissantes et les plus populaires du marché, Angular 6 et la conception matérielle. Vous apprendrez à incorporer les composants de conception de matériaux de Google dans les modèles d’application Angular afin de modifier et de styler votre application de manière professionnelle. Ce didacticiel vous rappelle également comment effectuer des requêtes HTTP pour intégrer des articles d'actualités en direct à une application utilisant l'API News .

Avant de commencer à créer l'application, passons rapidement en revue les ressources que nous avons '. Vous allez utiliser la conception angulaire et matérielle et voir pourquoi nous les avons associées pour créer cette application?


 Une application de presse avec Angular 6 et Material Design
Une application de presse avec Angular 6 et Material Design. ( Grand aperçu )

Qu'est-ce qu'un angulaire?

Angular – selon la documentation officielle – est décrit comme suit:

«Angular est une plate-forme qui facilite la création d'applications avec le Web. Angular combine des modèles déclaratifs, une injection de dépendance, des outils de bout en bout et des meilleures pratiques intégrées pour résoudre les problèmes de développement. Angular permet aux développeurs de créer des applications hébergées sur le Web, sur le mobile ou sur le bureau. "

En bref, il s'agit du cadre JavaScript le plus puissant pour la création d'applications Web hautement interactives et dynamiques.

" Comme mentionné, Angular est puissant. , mais aussi populaire, ce qui explique pourquoi des entreprises telles que Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Télégramme, Météo, iStockphoto, AWS, Crunchbase l'utilisent. "

Définition du matériau de Google?

Le design de matériau est un langage de conception introduit par Google au cours de l'été 2014 pour le nouveau système d'exploitation Android. Bien que son objectif initial était les applications mobiles tactiles, ses fonctionnalités ont été étendues pour atteindre le monde de la conception Web

. Il est également soutenu par du code source ouvert et par une vaste communauté de concepteurs et de développeurs qui collaborent pour créer de beaux produits.

Pourquoi la conception matérielle de Angular And Google est-elle spécifique?

C’est une question de choix. Aucun framework JavaScript n'est meilleur qu'un autre. C’est tout ce dont votre projet a besoin. Il en va de même pour les langages de programmation.

Maintenant, je ne vais pas décrire les avantages et les fonctionnalités d’Angular. Au lieu de cela, je vais partager avec vous la raison pour laquelle j'ai choisi Angular spécifiquement pour créer une application de nouvelles.

Comme c'est toujours le cas avec toute application de nouvelles, la communication avec des services dorsaux via le protocole HTTP est une partie cruciale. . C’est là que le module plus récent Angular HttpClient qui est une version améliorée de l’ancien Http, peut nous aider à interagir facilement avec l’API du service.

Le modèle modèle-vue-vue (MVVM) de Angular sera pratique pour lier les données distantes qui seront stockées dans des objets dans notre modèle d’application, où le composant joue le rôle du contrôleur / modèle de vue et où le modèle représente la vue. C’est ce que nous appelons le langage modèle angulaire.

Le système de reliure bidirectionnelle ce qui signifie que tout changement de l’état de l’application sera automatiquement répercuté dans la vue, et inversement. Vous remarquerez que lorsque vous sélectionnez les ressources d'actualités dans le menu latéral, cela modifiera l'état de notre article.

Ce que j'aime le plus chez Angular, c'est la technologie SPA . Le fait de ne charger que la partie de la page qui doit être modifiée aidera certainement notre application à se charger et à fonctionner plus rapidement et plus facilement.

Bien sûr, Angular offre de nombreux autres avantages et fonctionnalités que vous pouvez rechercher rapidement en ligne.

L’aspect visuel

Nous avons choisi la conception des matériaux, car son langage convient parfaitement à Angular et il est facile à mettre en œuvre.

Il s’agit également d’un langage visuel très populaire. il est réactif et la plupart des applications Google sont conçues avec. Nous voulons que notre application ressemble le plus possible à une application Google.

En guise d’introduction, c’est tout ce dont nous avons besoin. Il est temps d'examiner l'aperçu du projet, puis de vous lancer dans le processus de construction.

Présentation du projet

«Obtenir les derniers articles de presse en direct d'une série de sources notamment BBC News, CNN, TechCrunch , Huffington Post, etc., ainsi que différentes catégories, telles que la technologie, le sport, le commerce, les sciences et les loisirs. ”

Voici à quoi ressemblera votre application une fois celle-ci terminée:


 Présentation de l’application de presse
Présentation du projet . ( Grand aperçu )

Ça devrait vous exciter, non? Commençons par créer l'application.

Prérequis

Voici ce dont vous aurez besoin pour suivre ce tutoriel:

  • Node.js et npm installés sur votre machine; [19659039] CLI angulaire installée sur votre machine
  • Notions de base de Angular .

Une fois ces informations résolues, nous pouvons procéder.

Installation du projet Angular

Dans cette section, nous allons utiliser l'interface de ligne de commande angulaire pour générer un nouveau projet angulaire. Pour ce faire, rendez-vous sur la CLI et exécutez la commande suivante:

 ng new news-app 

Ensuite, pointez votre ligne de commande sur le dossier racine du projet en lançant:

 cd news-app 

Installation de dépendances

Pour configurer nos dépendances, nous allons installer, avec une seule commande, toutes les dépendances nécessaires à ce tutoriel. Ne vous inquiétez pas, je vais expliquer ceci dans un instant:

 npm install --save @ angular / material @ angular / animations @ angular / cdk 

Trois packages sont en cours d'installation avec cette commande.

@ angular / material

Il s'agit du package de conception de matériel officiel pour le framework angulaire.

@ angular / animations

L'installation du package d'animation angulaire séparément de la bibliothèque de noyaux angulaires est nécessaire. Certains composants matériels ont besoin d'accéder aux bibliothèques d'animation, c'est pourquoi nous l'avons installé ici.

@ angular / cdk

La partie CDK correspond à “composant dev kit”, ce qui nous fournit avec des comportements prédéfinis de haute qualité pour vos composants, car le développement Web moderne concerne avant tout les composants.

Il est recommandé d’inclure le CDK angulaire à tout moment pour lier la conception matérielle de Google à une application angulaire.

Pour en savoir plus sur CDK angulaire, consultez cet article .

Lançons notre application pour vérifier que tout fonctionne correctement. Vous pouvez démarrer un serveur de développement en exécutant la commande suivante:

 ng serve 

Maintenant, si vous visitez le site http: // localhost: 4200 / dans un navigateur, la page suivante s'affiche:


 Bienvenue dans l'application de nouvelles
Exécution du projet Angular sur un serveur de développement. ( Grand aperçu )

Maintenant, dans votre éditeur de code, accédez au fichier /src/app/app.module.ts et ajoutez les packages suivants que nous venons d’installer:

… Autres importations…
importer {BrowserAnimationsModule} à partir de '@ angular / platform-browser / animations';
import {MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule} de '@ angular / material';

Il est important de comprendre ce qui se passe ici. Premièrement, nous importons le paquet d’animations pour animer un peu notre application.

La prochaine importation est ce qui est unique au matériau Angular. Avant, nous venions d'inclure un seul module de matériau. Maintenant, nous devons importer chaque composant matériel que nous avons l'intention d'utiliser.

Comme vous pouvez le constater, nous avons ajouté ici sept modules différents pour les boutons matériels, les cartes, les menus, les barres d'outils, la navigation latérale et les icônes. ] Après avoir ajouté ces packages à votre fichier app.module.ts assurez-vous que votre fichier correspond aux critères suivants:

 import {BrowserModule} à partir de '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
importer {HttpClientModule} à partir de '@ angular / common / http';
importer {NewsApiService} depuis './news-api.service';

importer {BrowserAnimationsModule} à partir de '@ angular / platform-browser / animations';
import {MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule} de '@ angular / material';

importer {AppComponent} à partir de './app.component';

@NgModule ({
  déclarations: [
    AppComponent
  ],
  importations: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
  ]
  fournisseurs: [NewsApiService],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Note : La déclaration import {HttpClientModule} de @ angular / common / http dans le fichier ci-dessus n’a pas été générée automatiquement, mais plutôt ajoutée manuellement. Alors, assurez-vous de le faire aussi. Et ne vous inquiétez pas pour le fournisseur de services NewsApiService car nous nous en occuperons plus tard.

Vous vous demandez peut-être comment j'ai su quels étaient les noms des modules à importer? La documentation sur les matériaux angulaires officielle vous donne le code exact nécessaire à l'importation de chaque module.

Si vous cliquez sur l'un des composants dans le menu de gauche, puis sur l'onglet "API", avec la ligne d'importation exacte que vous devez utiliser.


 Référence API pour Composants de matériau angulaires
Référence API pour Composant de matériau angulaire. ( Grand aperçu )

En termes de configuration, c’est tout ce dont nous avons besoin avant de commencer à utiliser et à intégrer des composants matériels dans nos modèles.

Vous devez simplement vous rappeler d’importer chaque composant unique que vous prévoyez d’utiliser.

Acquisition de la clé API gratuite

Nous allons utiliser l'API Nouvelles pour nous alimenter en titres JSON, que nous allons implémenter dans le modèle d'application.

le service API Nouvelles?

L’API Nouvelles est une simple API HTTP REST permettant de rechercher et de récupérer des articles en direct sur le Web.

Maintenant que vous savez ce qu’est l’API Nouvelles, la prochaine étape consiste à obtenir un accès gratuit. Clé API qui nous aidera à envoyer des demandes d’appel au serveur et à récupérer les articles de presse.

Vous ne pouvez vous inscrire que pendant 30 secondes. Il vous suffit de fournir votre prénom, votre adresse électronique et votre mot de passe. C’est tout.

Après votre inscription, vous trouverez la clé d’API déjà générée pour vous dans le tableau de bord. Enregistrez-le simplement dans un fichier texte quelque part sur votre bureau; parce que nous l'utilisons dans le chapitre suivant.

Utilisation des composants

Pour commencer à travailler sur les composants, vous devez créer un fournisseur de service afin de gérer l'interaction avec le service API News. Service Provider

Entrez cette commande pour générer un nouveau fournisseur de service:

 ng generate service NewsApi

Ensuite, accédez au fichier /src/app/news-api.service.ts généré et ajoutez-y le code suivant:

 import {Injectable} from '@ angular / coeur';
importer {HttpClient} à partir de '@ angular / common / http';


@Injectable ({
  FourniDans: 'root'
})
classe d'exportation NewsApiService {

  api_key = 'PUT_YOUR_API_KEY_HERE';

  constructeur (http privé: HttpClient) {}
  initSources () {
     return this.http.get ('https://newsapi.org/v2/sources?language=fr&apiKey='+this.api_key);
  }
  initArticles () {
   return this.http.get ('https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey='+this.api_key);
  }
  getArticlesByID (source: String) {
   return this.http.get ('https://newsapi.org/v2/top-headlines?sources='+source+'&apiKey='+this.api_key);
  }
}

Il est temps d’utiliser notre clé API . Collez-le simplement à l'emplacement où il est écrit «Put_YOUR_API_KEY_HERE".

Nous avons importé HttpClient qui sera chargé de passer des appels d'API vers nos points de terminaison et de rechercher les titres d'actualité pour nous.

Avec la fonction initSources nous préparons simplement notre menu de gauche avec quelques nouvelles ressources. Après cela, nous avons créé une autre fonction, initArticles qui récupère les premiers articles de TechCrunch une fois l'application lancée.

En ce qui concerne la dernière fonction, getArticlesByID [1359065]. il va simplement apporter quelques articles pour le paramètre de passage.

La composante principale

Le fournisseur de service est terminé. Passons au fichier /src/app/app.component.ts et ajoutons le code suivant:

 import {Component} from '@ angular / core';
importer {NewsApiService} depuis './news-api.service';


@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {

articles: tableau ;
mSources: Array ;
    
constructeur (private newsapi: NewsApiService) {}

ngOnInit () {
        // charger des articles
       this.newsapi.initArticles (). subscribe (data => this.mArticles = data ['articles']);
      // charge les nouvelles ressources
     this.newsapi.initSources (). subscribe (data => this.mSources = data ['sources']);
}

searchArticles (source) {
     this.newsapi.getArticlesByID (source) .subscribe (data => this.mArticles = data ['articles']);
}
}
  

Nous définissons ici deux propriétés: mArticles pour la conservation d’articles de presse, et mSources pour la détention de ressources d'actualités. Les deux sont définis comme un tableau.

Dans le constructeur, nous créons simplement une instance NewsAPIService .

Nous utilisons ensuite cette instance sur le ngOnInit () . ] pour initialiser nos deux propriétés.

Pour la fonction searchArticles elle sera déclenchée chaque fois que l'utilisateur sélectionne une ressource spécifique dans le menu de gauche. Nous passons ensuite ce paramètre à la fonction de fournisseur de services getArticlesByID afin de récupérer les articles correspondants.

Définition du style par défaut du matériau

Dans notre fichier /src/styles.css . , générée par la CLI angulaire, ajoutons ce qui suit:

 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
corps {
    rembourrage: 2em 23em;
    fond: gris clair;
}

Selon vos préférences, vous pouvez remplacer indigo-pink.css par:

  • deeppurple-amber.css
  • indigo-pink.css
  • de couleur rose-bleue-grise.css [19659040] purple-green.css

J'ajoute également des CSS à la balise body uniquement pour illustrer cette disposition. Cela lui permet de ressembler davantage à une application, même sur le bureau.

Ajoutons également deux lignes à notre fichier /src/index.html juste avant la fermeture de la tête : [19659049]

La première ligne importe la police d’icône de conception de matériau et la seconde est la police Roboto, utilisée par l’équipe de conception de matériau.

Définition d’un modèle

Commençons par ajouter le modèle suivant à la liste. /src/app/app.component.html fichier:

 
  
   Actualité   
  
  


  
  


  
  
    
        
          
          
{{source.name}}
{{article.title}} {{article .source.name}}

{{article.description}}       

visibilité Plus        

Qu'avons-nous donc fait ici?

Premièrement, nous définissons une barre d'outils avec un menu de gauche, ainsi que le titre principal de l'application et le menu de droite des paramètres.

Ensuite, nous utilisons * ngFor à la fois pour les sources et les articles et, ce faisant, notre menu de gauche contient les ressources d'actualité et le contenu principal contient les articles d'actualité.

Une chose à noter est que sur le cliquez sur l'un des éléments de notre liste. Nous avons ajouté deux fonctions, car cet événement exécute n'importe quel code JavaScript. La première fonction est searchArticles ce que nous avons déjà expliqué, et la seconde est sidenav.close () qui ferme automatiquement notre menu de gauche une fois que l'utilisateur a sélectionné un

Mise en forme de nos composants

La dernière chose à faire avec les composants est de visiter le fichier /src/app.component.css et d’y coller le code suivant:

. exemple-spacer {
  flex: 1 1 auto;
}

.example-card {
    marge supérieure: 4 px;
}

.example-header-image {
  taille du fond: couverture;
}

.Titre{
    poids de police: gras;
}

.img-article {
    hauteur: 350px;
}

.action-buttons {
    text-align: center;
}
    
.example-container {
    largeur: 100%;
    hauteur: auto;
    bordure: 1px solide rgba (111, 111, 111, 0,50);
}
  
.example-sidenav-content {
    affichage: flex;
    hauteur: 75%;
    align-items: centre;
    justifier-contenu: centre;
}
  
.example-sidenav {
    rembourrage: 20px;
}

.nom de la source {
    marge gauche: 5px;
}

.list-item: survoler {
    curseur: pointeur;
    couleur de fond: # 3f51b5;
    Couleur blanche;
}

Configurer les images pour les ressources d'actualités

Accédez au répertoire / src / assets et créez un nouveau dossier nommé images . Ensuite, téléchargez ces images à partir d'un lien Google Drive ou du référentiel GitHub .

Ce sont les logos de nos ressources d'actualités. Une fois que vous les avez téléchargés, copiez et collez tous les fichiers image dans le dossier images que vous venez de créer.

Une fois que tout est terminé, exécutez la procédure suivante:

 ng serve 

. L'application devrait ressembler à la capture d'écran ci-dessous.


 le produit final de l'application de nouvelles
Lancement de l'application une fois que tout est terminé. ( Grand aperçu )

Notez que lorsque les extraits de nouvelles sont chargés sur la page principale, un bouton "Plus" (comme vous pouvez le voir sur l'image ci-dessus) entraîne l'utilisateur à lire toute l'histoire.

Conclusion

Voilà. il! J'espère que ce tutoriel vous a été utile et que vous avez apprécié la construction de cette application. Dans ce cas, n'hésitez pas à laisser vos commentaires et commentaires ci-dessous. Pendant ce temps, la documentation sur le Angular Material est plutôt cool. Il vous fournit une vue d'ensemble de chaque composant, une API et un exemple

Le code source complet de cette application est disponible sur GitHub . Vous pouvez également consulter ce site Web qui implémente déjà l'API de service utilisée dans ce tutoriel.

 Smashing Editorial (ra, al, yk, il)




Source link