Comment créer une application d'actualités avec Ionic 4 & Angular

Dans ce tutoriel, nous utiliserons Ionic 4 pour créer une application d'actualités qui utilise une API d'information tierce.

Ionic 4 est la dernière version d'Ionic, un cadre 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 leurs technologies Web connexes.

Ce qui fait d'Ionic 4 la meilleure version à ce jour, c'est qu'il est maintenant Agnostic Framework. Cela signifie qu'il ne dépend plus de l'angulaire, et vous pourrez l'utiliser avec n'importe quel cadre ou bibliothèque que vous connaissez, ou avec un javascript.

Mais au moment de la rédaction de cet article, la CLI ionique ne prend en charge que la génération de projets ioniques basés sur Angular, nous utiliserons donc un projet angulaire / ionique pour créer notre application d'actualités.

Voir une version hébergée de l'application que nous allons construire et saisir le code source de ce référentiel github.

Les plats clés

• ionic 4, la dernière version d'Ionic, est désormais agnostique du cadre, ce qui signifie qu'elle ne dépend pas de l'angulaire et peut être utilisée avec n'importe quel cadre ou bibliothèque, ou avec JavaScript simple.
• Pour créer une application d'actualités avec Ionic 4 et Angular, vous aurez besoin de Node.js, de NPM et de familiarité avec TypeScript. L'Ionic CLI 4 est utilisé pour générer des projets ioniques.
• Le tutoriel utilise une API d'information tierce pour récupérer les données d'actualités, et un service est créé pour gérer la récupération des données à partir de l'API News. La clé API de l'API News est utilisée dans ce processus.
• L'application construite dans ce tutoriel peut être hébergée sur le Web en tant que PWA ou construite et publiée sur les magasins d'applications. Il a place à l'amélioration et peut être étendu, par exemple en ajoutant des sources autres que TechCrunch.

Prérequis

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

• Vous devrez faire installer Node.js et NPM sur votre machine de développement. Si ce n'est pas le cas, l'approche la plus simple est d'aller sur le site officiel et de saisir les binaires de votre système. Node.js n'est pas une exigence pour l'ionic lui-même, mais pour la CLI ionique (et la CLI angulaire dans les coulisses) qui est l'outil que nous utiliserons pour générer des projets ioniques.
• Nous utiliserons Ionic avec Angular, qui est basé sur TypeScript, vous devez donc être familier avec les concepts de base de TypeScript.

Installation de CLI ionique 4

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

$ <span>npm install -g @ionic/cli
</span>

Veuillez noter que vous devrez peut-être ajouter SUDO avant votre commande afin d'installer le package globalement si vous utilisez un système basé sur Debian ou un macOS. Pour Windows, si vous obtenez des erreurs d'autorisation, vous pouvez utiliser une invite de commande avec l'accès administrateur. Dans tous les systèmes, vous pouvez éviter les erreurs d'autorisation NPM en réinstallant le NPM avec un gestionnaire de version de nœud (recommandé) ou en modifiant manuellement le répertoire par défaut de NPM. Voir les documents.

Ensuite, vous pouvez 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 sur votre projet, comme le nom (entrez NewsApp ou n'importe quel nom que vous préférez) et le modèle de démarrage (choisissez Sidemenu qui vous donnera un projet de départ avec un menu latéral et une navigation de la boîte).

Ensuite, appuyez sur Entrée pour instruire la CLI pour commencer à générer les fichiers et à installer les dépendances à partir de NPM.

Enfin, la CLI vous demandera si vous souhaitez installer le SDK Ionic AppFlow gratuit et connecter votre application? (O / N). Vous pouvez taper n si vous ne souhaitez pas intégrer les services cloud offerts par ionic.

AppFlow est une plate-forme d'intégration et de déploiement continue pour les développeurs ioniques. AppFlow aide les développeurs à construire et à expédier en permanence leurs applications iOS, Android et Web plus rapidement que jamais. Vous pouvez trouver plus d'informations sur AppFlow à partir des documents officiels.

Ensuite, vous pouvez accéder au dossier racine de votre projet et exécuter la commande suivante pour démarrer un serveur de développement en direct:

$ <span>cd ./newsapp
</span>$ ionic serve

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

Il s'agit d'une capture d'écran de l'application à ce stade:

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

Le projet a déjà deux pages - à domicile et à la liste. Laissez la première page et supprimez la page de liste.

Tout d'abord, supprimez le dossier Src / App / List. Ensuite, ouvrez le fichier src / app / app-routing.module.ts et supprimez l'entrée d'itinéraire pour la page de liste:

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

Nous avons trois itinéraires, un pour le chemin vide qui redirige vers l'itinéraire / home, la route / home qui affiche la page d'accueil et la route / liste 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 ......ts. Localisez le tableau AppPages défini dans le composant:

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

et supprimez simplement le deuxième objet: {Title: 'List', URL: '/ list', icon: 'list'}.

Maintenant, créons une page à propos de notre application. Dans votre terminal, exécutez la commande suivante:

$ <span>npm install -g @ionic/cli
</span>

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 pour inclure un itinéraire pour la page générée:

$ ionic start

Ajoutons un lien à la page À propos du menu latéral. Ouvrez le fichier src / app / app ...T.TS et mettez à jour le tableau AppPages:

$ <span>cd ./newsapp
</span>$ ionic serve

Il s'agit d'une capture d'écran du menu à ce stade:

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

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

Ajoutons maintenant un peu de thème à notre interface utilisateur d'application.

Ouvrez le src / app / about / about.page.html et ajoutez une couleur primaire à la barre d'outils de menu et une couleur sombre à la section de contenu:

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

Il s'agit d'une capture d'écran de la page:

Ensuite, thème la page d'accueil. Ouvrez le fichier SRC / App / Home / Home.page.html et remplacez son contenu par les suivants:

$ ionic generate page about

Ensuite, ouvrez le fichier src / app / home / home.page.scss et ajouter:

<span>import { NgModule } from '@angular/core';
</span><span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'home',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'home',
</span>    loadChildren<span>: './home/home.module#HomePageModule'
</span>  <span>},
</span>  <span>{ path: 'about', loadChildren: './about/about.module#AboutPageModule' }
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule]
</span><span>})
</span><span>export class AppRoutingModule {}
</span>

également, ouvrez le fichier src / app / app .....html et ajoutez une couleur principale à la barre d'outils de menu:

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

Obtenir des données d'actualités

Voyons maintenant comment vous pouvez récupérer les données d'actualités de l'API d'information tierce disponible sur newsapi.org/, qui offre un plan gratuit pour les projets open source et de développement.

Vous devez d'abord vous diriger ici pour vous inscrire à une clé API:

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

Ajout d'un service

Ensuite, créons un service qui s'occupera d'obtenir des données de l'API News. Dans votre terminal, exécutez la commande suivante:

<span><span><span><ion-header</span>></span>
</span>  <span><span><span><ion-toolbar</span>></span>
</span>    <span><span><span><ion-buttons</span> slot<span>="start"</span>></span>
</span>      <span><span><span><ion-menu-button</span>></span><span><span></ion-menu-button</span>></span>
</span>    <span><span><span></ion-buttons</span>></span>
</span>    <span><span><span><ion-title</span>></span>
</span>      About
    <span><span><span></ion-title</span>></span>
</span>  <span><span><span></ion-toolbar</span>></span>
</span><span><span><span></ion-header</span>></span>
</span>
<span><span><span><ion-content</span> padding></span>
</span>
<span><span><span></ion-content</span>></span>
</span>

Ensuite, ouvrez le fichier src / app / app.module.ts puis importez httpclientmodule et ajoutez-le au tableau d'importations:

<span><span><span><ion-header</span>></span>
</span>  <span><span><span><ion-toolbar</span> color<span>="primary"</span>></span>
</span>    <span><span><span><ion-buttons</span> slot<span>="start"</span>></span>
</span>      <span><span><span><ion-menu-button</span>></span><span><span></ion-menu-button</span>></span>
</span>    <span><span><span></ion-buttons</span>></span>
</span>    <span><span><span><ion-title</span>></span>
</span>      About
    <span><span><span></ion-title</span>></span>
</span>  <span><span><span></ion-toolbar</span>></span>
</span><span><span><span></ion-header</span>></span>
</span>
<span><span><span><ion-content</span> color<span>="dark"</span> padding></span>
</span><span><span><span><p</span>></span>
</span>  This is a news app built with Ionic 4 and the <span><span><span><a</span> href<span>="https://newsapi.org/"</span>></span>News API<span><span></a</span>></span>
</span><span><span><span></p</span>></span>
</span><span><span><span></ion-content</span>></span>
</span>

Ensuite, ouvrez le fichier src / app / api.service.ts et injecter httpclient via le constructeur de services:

<span><span><span><ion-header</span>></span>
</span>  <span><span><span><ion-toolbar</span> color<span>="primary"</span>></span>
</span>    <span><span><span><ion-buttons</span> slot<span>="start"</span>></span>
</span>      <span><span><span><ion-menu-button</span>></span><span><span></ion-menu-button</span>></span>
</span>    <span><span><span></ion-buttons</span>></span>
</span>    <span><span><span><ion-title</span>></span>
</span>      Home
    <span><span><span></ion-title</span>></span>
</span>  <span><span><span></ion-toolbar</span>></span>
</span><span><span><span></ion-header</span>></span>
</span>
<span><span><span><ion-content</span> color<span>="primary"</span>></span>
</span>    <span><span><span><ion-card</span>></span>
</span>      <span><span><span><ion-card-header</span>></span>
</span>        <span><span><span><ion-card-subtitle</span>></span>Welcome to our News App<span><span></ion-card-subtitle</span>></span>
</span>      <span><span><span></ion-card-header</span>></span>
</span>      <span><span><span><ion-card-content</span>></span>
</span>        <span><span><span><p</span>></span>
</span>          Enjoy the latest news from TechCrunch. 
        <span><span><span></p</span>></span>
</span>        <span><span><span><ion-spinner</span> *ngIf<span>="!articles"</span>  name<span>="dots"</span>></span><span><span></ion-spinner</span>></span>
</span>      <span><span><span></ion-card-content</span>></span>
</span>    <span><span><span></ion-card</span>></span>
</span><span><span><span></ion-content</span>></span>
</span>

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

<span>ion-card{
</span>  <span>--background: #021b46;
</span>  <span>--color: #fff;
</span><span>}
</span>

Enfin, ajoutez une méthode qui envoie une demande GET à un point de terminaison pour TechCrunch News:

        <span><span><span><ion-toolbar</span> color<span>="primary"</span>></span>
</span>          <span><span><span><ion-title</span>></span>Menu<span><span></ion-title</span>></span>
</span>        <span><span><span></ion-toolbar</span>></span>
</span>

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

Ouvrez le fichier Src / App / Home / Home.Page.ts et importez, puis injectez, appliquez-vous via le constructeur du composant:

$ ionic generate <span>service api
</span>

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

$ <span>npm install -g @ionic/cli
</span>

Ajouter une méthode ionViewDidentier (), où vous appelez la méthode getNews () d'apiserservice pour récupérer les nouvelles:

$ ionic start

Enfin, itérons dans la variable des articles et affichons les nouvelles sur notre page d'accueil.

Encore une fois, ouvrez le fichier src / app / home / home.page.html et ajoutez le code suivant:

$ <span>cd ./newsapp
</span>$ ionic serve

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

Il s'agit d'une capture d'écran du résultat:

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

Conclusion

Nous avons construit une application d'actualités à partir de zéro avec Ionic 4 et Angular. L'application a encore beaucoup de place à l'amélioration, 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.

Posés fréquemment posés sur la création d'une application avec Ionic 4 et Angular

Comment commencer à créer une application avec Ionic 4 et Angular?

Pour commencer à créer une application avec Ionic 4 et Angular, vous devez d'abord installer Node.js et NPM sur votre ordinateur. Après cela, installez Ionic et Cordova à l'aide de NPM. Une fois ces installations terminées, vous pouvez créer un nouveau projet ionique en utilisant la CLI ionique. Accédez au répertoire où vous souhaitez créer votre projet et exécutez la commande «Start ionic». Suivez les invites pour configurer votre nouveau projet.

Quelles sont les principales caractéristiques d'Ionic 4?

Ionic 4 est livrée avec un certain nombre de fonctionnalités clés qui en font un outil puissant pour le développement d'applications. Il s'agit notamment d'une architecture basée sur des composants, qui facilite la création et la gestion des interfaces utilisateur complexes; une puissante CLI qui fournit une gamme d'outils de développement; et l'intégration avec Angular, qui vous permet d'utiliser les caractéristiques puissantes d'Angular dans vos applications ioniques.

Comment utiliser Angular avec ionic 4?

ionic 4 est conçu pour fonctionner de manière transparente avec Angular. Lorsque vous créez un nouveau projet ionique, vous pouvez choisir d'utiliser Angular comme cadre de votre application. Une fois que vous avez fait cela, vous pouvez utiliser les fonctionnalités d'Angular dans votre application, telles que ses puissantes capacités de liaison des données et d'injection de dépendance.

Comment ajouter des pages à mon application ionique 4?

Pour ajouter une nouvelle page à votre application Ionic 4, vous pouvez utiliser la commande «ionic generate». Cette commande crée un nouveau répertoire dans le répertoire «src / app» de votre projet, avec des fichiers pour le module, le composant et le modèle de la nouvelle page. Vous pouvez ensuite ajouter la nouvelle page au module de routage de votre application pour le rendre accessible.

comment puis-je styliser mon application ionique 4?

ionic 4 utilise des variables CSS pour le style, ce qui facilite la personnalisation de l'apparence de votre application. Vous pouvez définir vos propres variables CSS dans le fichier CSS global de votre application, puis utiliser ces variables dans les fichiers CSS de votre composant. Ionic fournit également une gamme de variables CSS prédéfinies que vous pouvez utiliser pour styliser votre applic Votre application. Vous pouvez utiliser la commande «Ionic Serve» pour lancer votre application dans un navigateur Web pour les tests. Pour tester sur un appareil, vous pouvez utiliser la commande 'ionic Cordova Run', qui construit votre application et la déploie sur un appareil connecté.

Comment déployer mon application ionique 4?

Pour déployer votre application Ionic 4, vous devez d'abord la construire pour la production à l'aide de la commande «ionic cordova build». Cette commande crée une version prête pour la production de votre application que vous pouvez ensuite déployer sur un appareil ou un apparence. ?

Certains défis courants lors de la création d'une application avec Ionic 4 et Angular incluent la gestion des interfaces utilisateur complexes, la gestion des opérations asynchrones et l'optimisation des performances. Pour surmonter ces défis, vous pouvez utiliser l'architecture basée sur les composants d'Ionic pour simplifier votre interface utilisateur, utiliser le tuyau asynchrone d'Angular pour gérer les opérations asynchrones et utiliser les optimisations de performances intégrées d'Ionic pour améliorer les performances de votre application.

Puis-je utiliser D'autres frameworks avec ionic 4?

Oui, tandis que Ionic 4 est conçu pour fonctionner de manière transparente avec Angular, il prend également en charge d'autres frameworks tels que React et Vue.js. Vous pouvez choisir d'utiliser ces frameworks lors de la création d'un nouveau projet ionique.

Où puis-je trouver plus de ressources pour m'aider vous aider à créer une application avec Ionic 4 et Angular. Il s'agit notamment de la documentation officielle ionique et angulaire, des tutoriels et des cours en ligne et des forums communautaires. Vous pouvez également trouver une gamme d'exemples de projets et d'extraits de code sur des sites comme GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!