Comment créer une application de presse avec Ionic 4 & Angular –

Dans ce didacticiel, nous utiliserons Ionic 4 pour créer une application de presse utilisant une API de nouvelles tierce .

Ionic 4 est la dernière version de Ionic, un framework mobile. construit à l'origine sur Cordova et Angular. Ionic permet aux utilisateurs de créer des applications mobiles hybrides avec HTML, CSS et JavaScript et les technologies Web associées.

Ce qui fait de Ionic 4 la meilleure version à ce jour, c’est qu’elle est désormais agnostique en matière de framework. Cela signifie qu’elle n’est plus dépendante d’Annular et que vous pourrez l’utiliser avec n’importe quel framework ou bibliothèque que vous connaissez, ou en JavaScript simple.

Mais au moment de la rédaction de ce document, Ionic CLI ne prend en charge que la génération. Les projets ioniques basés sur Angular, nous allons donc utiliser un projet Angular / Ionic pour construire notre application de nouvelles.

Voir une version hébergée de l'application que nous allons créer et récupérer le code source de ce référentiel GitHub .

Conditions préalables

Commençons par les conditions préalables. vous devez pouvoir suivre ce didacticiel confortablement.

• Node.js et npm doivent être installés sur votre ordinateur de développement. Si ce n’est pas le cas, la solution la plus simple consiste à consulter le site Web officiel et à récupérer les fichiers binaires de votre système. Node.js n'est pas nécessaire pour Ionic, mais pour Ionic CLI (et Angular CLI dans les coulisses), qui est l'outil que nous utiliserons pour générer des projets Ionic.
• Nous utiliserons Ionic avec Angular, basé sur TypeScript, vous devez donc vous familiariser avec les concepts de base de TypeScript.

Installation d'Ionic CLI 4

Ionic CLI 4 est la dernière version de CLI. Ouvrez un terminal et exécutez la commande suivante pour l'installer sur votre système:

 $ npm install -g @ ionic / cli

Veuillez noter que vous devrez peut-être ajouter sudo avant votre commande pour installer le paquet globalement si vous utilisez un système Debian ou macOS. Pour Windows, si vous rencontrez des erreurs d'autorisation, vous pouvez utiliser une invite de commande avec un accès administrateur. Sur tous les systèmes, vous pouvez éviter les erreurs d’autorisation npm en réinstallant npm avec un gestionnaire de version de noeud (recommandé) ou en modifiant manuellement le répertoire par défaut de npm. Voir les documents .

Vous pouvez ensuite générer un projet basé sur Angular en exécutant la commande suivante:

 $ ionic start

La CLI vous demandera de manière interactive les informations nécessaires concernant votre projet, telles que le nom de (entrez newsapp ou le nom de votre choix) et le modèle de départ (choisissez ] sidemenu qui vous donnera un projet de départ avec un menu latéral et une navigation dans la boîte)

Appuyez ensuite sur Entrez pour indiquer à la CLI de commencer à générer les fichiers et d’installer les dépendances à partir de npm .

Enfin, la CLI vous demande si vous souhaitez Installer le SDK gratuit Ionic Appflow et connecter votre application? (Y / n) . Vous pouvez taper n si vous ne souhaitez pas intégrer les services cloud proposés par Ionic.

Appflow est une plate-forme d’intégration et de déploiement continus pour les développeurs Ionic. Appflow aide les développeurs à créer et à expédier leurs applications iOS, Android et Web plus rapidement que jamais. Pour plus d'informations sur Appflow, reportez-vous aux documents officiels .

Ensuite, vous pouvez accéder au dossier racine de votre projet et exécuter la commande suivante pour démarrer le serveur de développement Live-Reload:

 $ cd ./newsapp
$ service ionique

Votre application sera disponible à partir de l'adresse http: // localhost: 8100 .

Voici une capture d'écran de l'application:

Vous pouvez voir que nous disposons déjà d'une application de démarrage assez décente sans faire encore de développement. Apportons quelques modifications à notre projet.

Le projet comporte déjà deux pages – page principale et liste . Quittez la première page et supprimez la page list .

Commencez par supprimer le dossier src / app / list . Ensuite, ouvrez le fichier src / app / app-routing.module.ts et supprimez l'entrée de la route pour la page de liste:

 const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  }
];

Nous avons trois routes, une pour le chemin vide qui redirige vers la route / home la route / home qui affiche la page d'accueil et la / list itinéraire qui affiche la page de liste. Vous devez simplement supprimer le dernier objet.

Vous devez également supprimer le lien de la page de liste du menu latéral. Ouvrez le fichier src / app / app.component.ts . Localisez le tableau appPages défini dans le composant:

 public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'List',
      url: '/list',
      icon: 'list'
    }
  ];

Supprimez simplement le deuxième objet: {titre: 'Liste', url: '/ list', icône: 'liste'} .

Créons maintenant une page de sujet pour notre application. . Dans votre terminal, exécutez la commande suivante:

 $ ionic gener page à propos de

Cette commande générera un dossier src / app / about avec un tas de fichiers, et mettra à jour le fichier src / app / app-routing.module.ts à inclure une route pour la page générée:

 import {NgModule} from '@ angular / core';
importer {Routes, RouterModule} depuis '@ angular / router';

routes constantes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  { path: 'about', loadChildren: './about/about.module#AboutPageModule' }
];

@NgModule ({
  importations: [RouterModule.forRoot(routes)],
  exportations: [RouterModule]
})
classe d'exportation AppRoutingModule {}

Ajoutons un lien vers la page à propos de dans le menu latéral. Ouvrez le fichier src / app / app.component.ts et mettez à jour le tableau appPages :

 public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'About',
      url: '/about',
      icon: 'help-circle-outline'
    }
  ];

Voici une capture d'écran du menu:

Ouvrez ensuite le src / app / about / about.page.html . ajoutez une icône de menu à la barre d'outils de la page, ce qui permet aux utilisateurs d'ouvrir le menu latéral:

Ajoutons maintenant quelques thèmes à notre interface utilisateur d'application.

Ouvrez le fichier src / app / about / about.page.html et une primaire. couleur dans la barre d’outils du menu et une couleur sombre dans la section de contenu:

  
    
      
    
    
      
    
  




   Ceci est une application de nouvelles construite avec Ionic 4 et l'API  News 




  


               

Voici un aperçu de la page:

Ensuite, modélisons la page d’accueil. Ouvrez le fichier src / app / home / home.page.html et remplacez son contenu par le suivant:

  
    
      
    
    
       Accueil
    
  



    
      
         Bienvenue sur notre application de presse 
      
      
        

           Profitez des dernières nouvelles de TechCrunch.
        
         
      
    

Ouvrez ensuite le fichier src / app / home / home.page.scss et ajoutez:

 ion-card {
  --background: # 021b46;
  --color: #fff;
}

Ouvrez également le fichier src / app / app.component.html et ajoutez une couleur primaire à la barre de menus:

        
          . Menu 
        

Obtenir des données de nouvelles

Voyons maintenant comment récupérer des données de nouvelles à partir de l'API de nouvelles tierces disponible dans NewsAPI.org/ qui propose un plan gratuit pour l'open source et les projets de développement.

Vous devez d'abord vous diriger vers ici pour vous enregistrer pour une clé API:

Remplissez le formulaire et envoyez-le. Vous devriez être redirigé vers la page où vous pouvez copier votre clé API:

Ajout d’un service

Créons ensuite un service qui se chargera de récupérer les données du API de nouvelles. Dans votre terminal, exécutez la commande suivante:

 $ ionic gener service api

Ouvrez ensuite le fichier src / app / app.module.ts puis importez HttpClientModule et ajoutez-le au tableau imports :

 / / [...]
importer {HttpClientModule} de '@ angular / common / http';

@NgModule ({
  déclarations: [AppComponent],
  entryComponents: [],
  importations: [
    // [...]
    HttpClientModule,
  ],
  // [...]
})
classe d'exportation AppModule {}

Ouvrez ensuite le fichier src / app / api.service.ts et injectez HttpClient via le constructeur de service:

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

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

  constructeur (privé httpClient: HttpClient) {}
}

Ensuite, définissez une variable API_KEY qui contiendra votre clé API à partir de l'API News:

classe d'exportation ApiService {
  API_KEY = 'VOTRE_API_KEY';

Enfin, ajoutez une méthode qui envoie une demande GET à un noeud final pour TechCrunch News:

 getNews () {
    return this.httpClient.get (`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=$ {this.API_KEY}`);
  }

C'est tout ce que nous devons ajouter pour le service.

Ouvrez le fichier src / app / home / home.page.ts et importez-le, puis injectez-le, ApiService via le constructeur du composant:

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

@Composant({
  sélecteur: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
classe d'exportation HomePage {
  constructeur (private apiService: ApiService) {}
}

Ensuite, ajoutez une variable d'articles qui contiendra les nouvelles récupérées:

 export class HomePage {
  des articles;

Ajouter une méthode ionViewDidEnter () dans laquelle vous appelez la méthode getNews () de ApiService pour récupérer les informations:

 ionViewDidEnter () {

    this.apiService.getNews (). subscribe ((data) => {
      console.log (données);
      this.articles = data ['articles'];
    });
  }

Enfin, parcourons la variable articles et affichons les nouvelles sur notre page d'accueil.

Ouvrez à nouveau le fichier src / app / home / home.page.html et ajoutez le code suivant:

  
    
    
       {{article.title}} 
    
    
      

         {{article.description}}
      
       Lire l'article complet 

    
  

Nous utilisons simplement la directive ngFor pour parcourir la variable articles et afficher l'image, le titre, la description et l'adresse URL de chaque article contenu dans un composant de carte.

une capture d'écran du résultat:

Vous pouvez héberger cette application sur le Web (en tant que PWA) ou la construire et la publier sur les magasins d'applications . Vous pouvez trouver une version en direct de ce lien et du code source dans ce référentiel GitHub .

Conclusion

Nous avons créé une application de nouvelles à partir de rien avec Ionic 4 et Angulaire. L’application a encore beaucoup à faire, alors n'hésitez pas à jouer avec elle et à l’étendre par vous-même. Par exemple, vous pouvez ajouter des sources autres que TechCrunch et permettre à l'utilisateur de sélectionner la source des nouvelles.

Ahmed est un entrepreneur, développeur, concepteur en marketing numérique et blogueur de sites Web. Il écrit sur le développement de logiciels et de sites Web, des conseils pour gagner de l'argent, le référencement et plus encore. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .