Créez une chronologie GitHub avec Kendo UI pour une chronologie angulaire

Vaut-il vraiment la peine d’utiliser une bibliothèque de composants d’interface utilisateur Angular professionnelle ? Un développeur explore ce que signifie créer une chronologie pour les événements de validation GitHub à partir de zéro par rapport à Kendo UI pour Angular.

Nous avons mentionné à plusieurs reprises à quel point il peut devenir important et complexe de afficher les données et parcourir les données et les défis rencontrés par les développeurs lorsque nous devons parcourir une liste ou penser à ajouter un joli design : le comportement de l’utilisateur, la réutilisabilité, la flexibilité et la logique métier.

En tant que développeurs, nous devons être pragmatiques lorsque nous réfléchissons à la manière de résoudre les problèmes commerciaux, en donnant la priorité au délai de mise sur le marché, tout en étant prêts à nous adapter aux changements ou aux nouvelles exigences sans trop de difficultés.

La plupart du temps, nous essayons de résoudre nos défis nous-mêmes, en combinant HTML, CSS et Angular avec un coût caché 🤪, car nous voulons être fiers de construire nos composants. Mais dans le monde réel, nous devons parfois nous concentrer et utiliser nos compétences pour résoudre des problèmes commerciaux et déléguer d’autres tâches. Un excellent moyen d’être plus productif et de gagner du temps est d’utiliser Progress Interface utilisateur Kendo pour angulaire. Je ne veux pas te pousser à utiliser Interface utilisateur du Kendo si vous n’en avez pas besoin, vous saurez pourquoi ou quand vous en aurez vraiment besoin ; Montrons un scénario du monde réel.

Scénario

Votre entreprise doit montrer les progrès réalisés sur les produits, mais au lieu de donner accès à GitHub aux parties prenantes, nous souhaitons lancer un site Web sophistiqué qui affiche l’historique des validations de GitHub, comme une chronologie qui alterne les événements pour une mise en page claire et visuellement attrayante. Si vous pouvez le livrer en une heure, cela nous aidera beaucoup, car les autres équipes doivent montrer leurs rapports chronologiques.

C’est quelque chose que nous pouvons construire nous-mêmes en utilisant Angular + HTML et CSS, ou avec le composant Timeline de Kendo UI pour Angular qui fournit exactement les fonctionnalités dont nous avons besoin pour que cela se produise et quelque chose de plus.

Encore une chose

Oups, désolé, le manager souhaite aussi un petit changement, un tout petit changement (c’est normal dans notre métier) :

• Incluez des liens vers les commits sur GitHub pour un accès rapide.
• Rendez-le flexible à utiliser dans différentes pages, car pour certains produits nous souhaitons afficher uniquement le titre, d’autres le commit, et bien sûr le lien vers GitHub s’ils souhaitent accéder aux détails.
• Merci de ne pas modifier le délai de livraison.

😈 Je suppose déjà que vous avez pensé à la convivialité, à l’accessibilité, à la personnalisation et aux tests.

OK, défi accepté, au travail !

Le service API GitHub

Nous allons pointer vers la véritable API GitHub https://api.github.com/repos/. Pour cet exemple, je veux voir l’un de mes projets préférés sur GitHub, tour-of-ponies par alyssamichelleet savoir ce qu’Alyssa fait avec les poneys. Accédez au navigateur et ajoutez le nom d’utilisateur et le projet à l’API GitHub.

👉🏽 https://api.github.com/repos/alyssamichelle/tour-of-ponies/commits

L’API GitHub renvoie un JSON avec les commits, mais cela représente trop d’informations, nous devons donc simplifier la façon de pointer vers le point de terminaison et les données à visualiser. Je pense qu’il vaut mieux créer un service et utiliser la carte Opérateur RxJS pour les transformer. Faisons-le!

Mise en place du projet

J’utiliserai la dernière version d’Angular. Le moyen le plus simple de configurer le projet consiste à exécuter la commande suivante dans le terminal. Répondez aux questions par défaut :

npx -p @angular/cli ng new timeline-with-kendo
? Which stylesheet format would you like to use? CSS
Do you want to enable Server-Side Rendering (SSR) and Static Site Generati

Ensuite, déplacez-vous vers le dossier du projet, créez le service à l’aide de la commande ng g s services/github.

ng g s services/github

Ouvrir github.service.ts et déclare la variable githubRepo. C’est l’URL de base à combiner avec le user et repository pour obtenir les commits. Injectez ensuite le HttpClient.

 private githubRepo = 'https://api.github.com/repos/';
  http = inject(HttpClient);

Maintenant, donnons à notre application l’accès pour utiliser HttpClient ! Dans notre app.config.tsajouter provideHttpClient() au tableau de vos fournisseurs :

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
 providers: [provideRouter(routes), provideHttpClient()],
};

Ensuite, créez la méthode getCommits(user: string, repo: string) avec deux paramètres, user et repo. Combinez le githubRepo avec le user et repo en utilisant un modèle littéral pour utiliser cette URL avec HttpClient pour renvoyer l’observable.

getCommits(user: string, repo: string): Observable<any> {
        return this.http.get(`${this.githubRepo}/${user}/${repo}/commits`)

Mais rappelez-vous, les données renvoyées par l’API doivent être transformées pour nous faciliter la vie dans le composant. En utilisant le map opérateur, parcourez la réponse de l’API et renvoie une meilleure structure, comme le titre, le sous-titre, la description, la date et les actions pour l’utilisateur, comme le lien URL.

Le code final ressemble à :

import {inject, Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {map, Observable} from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class GithubService {
    private githubRepo = 'https://api.github.com/repos';
    private http = inject(HttpClient);
    getCommits(user: string, repo: string): Observable<any> {
        return this.http.get(`${this.githubRepo}/${user}/${repo}/commits`).pipe(
            map((response: any) => {
                return response.map((commit: any) => ({
                        title: commit.commit.message,
                        subtitle: commit.commit.author.date,
                        description: commit.commit.author.name,
                        date: new Date(commit.commit.author.date),
                       }
                ));
            })
        );
    }
}

OK, voyons si l’appel API fonctionne.

Ouvrir app.component.tsinjectez le GithubService et importer JsonPipe pour visualiser la réponse dans le modèle. Transformez l’observable en signal en utilisant le toSignal méthode.

…
import {toSignal} from "@angular/core/rxjs-interop";

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet,JsonPipe],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
})
export class AppComponent {
  
    githubService = inject(GithubService);
    public commits$ = toSignal(this.githubService.getCommits('alyssamichelle', 'tour-of-ponies'));
}

Dans le modèle, ouvrez app.component.html en utilisant l’interpolation, lisez le commits$ signal en utilisant () et le json tuyau.

Parce que nous utilisons autonome, n’oubliez pas d’importer JsonPipe dans les sections importations.

<pre>
{{ (commits$() | json) }}
</pre>

Courir ng serve -o et le navigateur doit afficher les commits !

Ouais! Nous avons fait notre premier pas, mais cela ne ressemble pas à un calendrier. Commençons par travailler sur la chronologie.

En savoir plus sur signaux.

Visualisez la chronologie

Nous devons afficher la liste des commits. Essayons de montrer les données en utilisant @for et liez les données dans le modèle. Créez un div avec @for et lisez les propriétés en utilisant l’interpolation pour afficher le titre et le sous-titre.

Le code final ressemble à ceci :

<div>
 @for (commit of commits$(); track commit) {
   <div>
     <h2>{{ commit.title }}</h2>
     <p>{{ commit.subtitle }}</p>
   </div>
 }
</div>

Enregistrez les modifications et rechargez ! Oui! Nous avons une structure de base pour notre chronologie.

Attendez une seconde ! Nous devons terminer cela dès que possible. Êtes-vous fier de vos résultats? Et je commence à avoir le sentiment qu’il nous manque beaucoup de fonctionnalités.

Nous devons regrouper les données et permettre à la pagination de naviguer entre les années, la rendre flexible à l’aide du modèle ng-content… Vous pouvez lire d’excellentes ressources pour savoir comment manipuler des données et utiliser du contenuet après avoir lu, vous pouvez créer ce dont vous avez besoin.

😈 N’oubliez pas que nous devons maintenir une qualité de code élevée (tests, accessibilité, personnalisation).

Mais nous avons une date limite pour notre projet et nous ne voulons pas mettre notre entreprise en danger, alors pourquoi ne pas essayer d’utiliser Kendo UI pour la chronologie angulaire?

Passer à Kendo UI pour la chronologie angulaire

Nous allons accélérer notre développement en utilisant Kendo UI pour Angular Timeline. Il permet d’afficher une collection d’événements et leurs données par ordre chronologique pour chaque année, en affichant les informations verticalement ou horizontalement. Il fournit également la gestion des événements, la navigation au clavier et la prise en charge des modèles afin que nous puissions le personnaliser à notre guise. La meilleure chose est que nous pouvons répondre à toutes les exigences et plus sans aucune précipitation et nous faciliter la vie. Commençons !

Tout d’abord, installez Kendo UI pour Angular Layout dans notre projet en utilisant les schémas qu’il apporte avec une liste incroyable de composants, notamment kendo-timeline.

ng add @progress/kendo-angular-layout

Ensuite, pour utiliser toute la puissance de Kendo UI pour Angular, téléchargez un essai gratuit. Après cela, activez la licence en copiant le Kendo UI License.txt fichier dans le projet, renommez-le kendo-ui-license.txt et exécutez les commandes suivantes :

npm install --save @progress/kendo-licensing
npx kendo-ui-license activate

Le package kendo-layout apporte une liste de composants puissants, mais nous allons juste nous concentrer sur les kendo-timeline composant pour nous aider à afficher une liste d’événements ou TimelineEvent types à lier à la propriété events. Note intéressante, le composant Kendo Timeline permet également de réduire et d’étendre les détails de chaque événement avec [collapsibleEvents]et [alterMode] modifie les éléments de la chronologie pour qu’ils s’affichent des deux côtés de l’axe pour une présentation plus claire.

En savoir plus sur chronologie du kendo.

Il est temps de refactoriser notre code. Tout d’abord, ouvrez le github.service.ts et changez la signature de notre service en TimelineEvent[] interface fournie par @progress/kendo-angular-layout.

   getCommits(user: string, repo: string): Observable<TimelineEvent[]> {
     ...

Parce que, dans le monde réel, nous pouvons avoir des erreurs, ajoutez le catchError opérateur et retour EMPTY gérer si quelque chose échoue Apprendre encore plus.

catchError(() =>  EMPTY),

Le code final ressemble à ceci :

import {inject, Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {catchError, EMPTY, map, Observable} from 'rxjs';
import {TimelineEvent} from "@progress/kendo-angular-layout";

@Injectable({
 providedIn: 'root',
})
export class GithubService {
 private githubRepo = 'https://api.github.com/repos';
 private http = inject(HttpClient);
 getCommits(user: string, repo: string): Observable<TimelineEvent[]> {
   return this.http.get(`${this.githubRepo}/${user}/${repo}/commits`).pipe(
     catchError(() =>  EMPTY),
     map((response: any) => {
       return response.map((commit: any) => ({
           title: commit.commit.message,
           subtitle: commit.commit.author.date,
           description: commit.commit.author.name,
           date: new Date(commit.commit.author.date)
         }
       ));
     })
   );
 }
}

Avant de continuer, activons les belles animations, le composant KENDO_TIMELINE nécessite le provideNoopAnimations() dans le app.config.ts.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import {provideNoopAnimations} from "@angular/platform-browser/animations";
export const appConfig: ApplicationConfig = {
 providers: [provideRouter(routes), provideHttpClient(), provideNoopAnimations()],
};

Parfait. Ensuite, ouvrez app.component.ts et ajouter KENDO_TIMELINE tableau d’utilitaires dans la section des importations.

Vous devez toujours fournir une valeur initiale ; on commits$ définit la valeur initiale dans la déclaration des signaux { initialValue: [] }

Le code final ressemble à ceci :

import {Component, inject} from '@angular/core';
import {KENDO_TIMELINE} from '@progress/kendo-angular-layout';
import {GithubService} from './services/github.service';

import {toSignal} from "@angular/core/rxjs-interop";
import {DatePipe} from "@angular/common";

@Component({
   selector: 'app-root',
   imports: [KENDO_TIMELINE, DatePipe],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
})
export class AppComponent {
   githubService = inject(GithubService);
   public commits$ = toSignal(this.githubService.getCommits('alyssamichelle', 'tour-of-ponies'),{
     initialValue: []
   });
}

Ensuite, ouvrez app.component.html et ajoutez le kendo-timeline. Lier les événements avec le signal commits$et utilisez la propriété orientation pour afficher la chronologie horizontalement.

<h1>Commits</h1>
<kendo-timeline [events]="commits$()" [orientation]="'horizontal'"></kendo-timeline>

Enregistrez les modifications, rechargez le navigateur et tada !! Nous avons une belle chronologie !!

Attendez une seconde, nous l’avons fait si vite, mais qu’en est-il du fait de le rendre flexible ? Se détendre! 🧘🏼‍♂️ J’aurai même le temps de regarder Netflix car le kendo-timeline apportez trois directives pour personnaliser le modèle d’en-tête, de corps ou d’actions. Jouons avec.

Personnalisez la chronologie avec des modèles

Le kendo-timeline Le composant est si flexible qu’il permet de personnaliser les modèles d’en-tête, de corps et d’action à l’aide de trois directives : kendoTimelineCardHeaderTemplate, kendoTimelineCardBodyTemplate et kendoTimelineCardActionsTemplate. Ces directives donnent accès à chaque événement d’élément avec let-event:

Par exemple, nous pouvons personnaliser avec ng-template et combinez-le avec une directive pour afficher des informations :

• kendoTimelineCardHeaderTemplate: personnalise l’en-tête, par exemple, avec le message de validation et l’auteur.
• kendoTimelineCardBodyTemplate: Affiche l’auteur et la date de validation.
• kendoTimelineCardActionsTemplate: Ajoute un lien cliquable pour afficher le commit sur GitHub.

En savoir plus sur chronologie du kendo.

Nous devons apporter de petits changements dans getCommits() en ajoutant des actions dans TimelineEvent. Cela liera le kendoTimelineCardActions modèle avec l’url et le texte sur lequel cliquer avec le View commit on Github et propriété URL avec commit.html_url.

Ouvrez le github.service.ts et mettez à jour le response.mapen ajoutant les sections d’actions, le code ressemble à ceci :

return response.map((commit: any) => ({
   title: commit.commit.message,
   subtitle: commit.commit.author.date,
   description: commit.commit.author.name,
   date: new Date(commit.commit.author.date),
   actions:
     {
       text: 'View commit on GitHub',
       url: commit.html_url,
     },
 }
));

Le code final ressemble à ceci :

import {inject, Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {catchError, EMPTY, map, Observable} from 'rxjs';
import {TimelineEvent} from "@progress/kendo-angular-layout";

@Injectable({
 providedIn: 'root',
})
export class GithubService {
 private githubRepo = 'https://api.github.com/repos';
 private http = inject(HttpClient);
 getCommits(user: string, repo: string): Observable<TimelineEvent[]> {
   return this.http.get(`${this.githubRepo}/${user}/${repo}/commits`).pipe(
     catchError(() =>  EMPTY),
     map((response: any) => {
       return response.map((commit: any) => ({
           title: commit.commit.message,
           subtitle: commit.commit.author.date,
           description: commit.commit.author.name,
           date: new Date(commit.commit.author.date),
           actions:
             {
               text: 'View Commit on GitHub',
               url: commit.html_url,
             },
         }
       ));
     })
   );
 }
}

Ensuite, ouvrez app.component.ts et importez le DatePipe pour formater la date dans le kendoTimelineCardBodyTemplate.

import {Component, inject} from '@angular/core';
import {GithubService} from './services/github.service';
import {toSignal} from '@angular/core/rxjs-interop';
import {KENDO_TIMELINE} from '@progress/kendo-angular-layout';
import {DatePipe} from '@angular/common';

@Component({
 selector: 'app-root',
 imports: [KENDO_TIMELINE, DatePipe],
 templateUrl: './app.component.html',
 styleUrl: './app.component.css'
})
export class AppComponent {
 githubService = inject(GithubService);
 public commits$ = toSignal(this.githubService.getCommits('alyssamichelle', 'tour-of-ponies'), {  initialValue: [] });

}

Enfin, nous pouvons commencer à utiliser le ng-template pour lier des données spécifiques dans chaque domaine. N’hésitez pas à montrer ce dont vous avez besoin en utilisant le event biens prévus par les directives kendoTimelineCardHeaderTemplate, kendoTimelineCardBodyTemplate et kendoTimelineCardActionsTemplate.

Le code final ressemble à :

<kendo-timeline [events]="commits$()" [orientation]="'horizontal'">
 <ng-template kendoTimelineCardHeaderTemplate let-event>
   <h3>{{ event.title }} - {{ event.subtitle }}</h3>
 </ng-template>

 <ng-template kendoTimelineCardBodyTemplate let-event>
   <p><strong>Author:</strong> {{ event.description }}</p>
   <p><strong>Date:</strong> {{ event.subtitle | date :'mediumDate' }}</p>
 </ng-template>

 <ng-template kendoTimelineCardActionsTemplate let-event>
   <a [href]="event.actions.url" target="_blank">{{ event.actions.text }}</a>
 </ng-template>
</kendo-timeline>

Enregistrez les modifications et tada ! Oui! Nous disposons d’une chronologie puissante avec une interface utilisateur personnalisée très flexible avec seulement quelques lignes de code. 🥰

Qu’en est-il de la personnalisation ?

Ne vous inquiétez pas… souhaitez-vous utiliser des styles comme bootstrap, Material, Fluent UI pour changer les couleurs ou personnaliser avec vos styles Figma ? Vérifier Générateur de thèmes qui simplifie les styles d’application en quelques clics.

Conclusion

Nous avons commencé notre voyage en discutant de la manière de créer une chronologie, mais lorsque les défis du monde réel se sont présentés à nous, j’ai préféré utiliser une bibliothèque de composants pour faciliter mon travail. C’est si simple de créer une chronologie puissante en utilisant Kendo UI pour la chronologie angulaire composant. En l’intégrant à l’API GitHub, nous avons extrait de véritables données de validation et les avons affichées dans une chronologie réactive et pliable.

Nous avons gagné beaucoup de temps en personnalisant les modèles pour améliorer la chronologie afin de répondre à des besoins spécifiques. L’ajout d’éléments et de contrôles plus interactifs a facilité la personnalisation et l’adaptation aux exigences de chaque entreprise, ce qui a permis de gagner du temps et de vous donner plus de temps libre pour regarder Netflix. 🍿

N’oubliez pas : Kendo UI pour Angular est livré avec un essai gratuit de 30 jours, alors essayez-le. essayez aujourd’hui!

Bon codage !