Comment gérer les données d’application Python avec Kendo UI pour Angular

Angular est un excellent choix pour la gestion et l’affichage des données dans votre application Python. Allez plus loin avec Kendo UI pour Angular.

En tant que développeur Python, vous traitez souvent des données et avez besoin de moyens efficaces pour les visualiser et les gérer. Le framework Angular UI est devenu un excellent choix pour une expérience de développement riche et facile. En savoir plus sur pourquoi dans « Comment utiliser Angular pour créer une interface utilisateur de niveau supérieur pour les applications Python (et pourquoi le faire).”

De nombreux développeurs étendent ces gains avec des bibliothèques de composants telles que la populaire interface utilisateur Kendo pour Angular. Dans ce tutoriel, nous allons explorer comment utiliser Kendo UI pour Angular pour créer une vue de données qui présente des fonctionnalités avancées telles que des grilles et des graphiques. À la fin, vous aurez une solide compréhension de la façon de consommer, de gérer et d’afficher des données à l’aide de Kendo UI pour Angular dans vos applications Python.

Faire une grille

Dans cet exemple, nous allons explorer comment créer une grille à l’aide de Progress Interface utilisateur de Kendo pour Angular, une bibliothèque de composants d’interface utilisateur populaire. Kendo UI for Angular propose un ensemble complet d’outils et de composants conçus spécifiquement pour les applications Angular. Avec son ensemble complet de fonctionnalités et ses options personnalisables, Kendo UI pour Angular offre aux développeurs un moyen transparent de créer des grilles dynamiques et interactives.

Nous allons commencer par mettre en place un nouveau projet Angular et intégrer l’interface utilisateur de Kendo pour Angular. Ensuite, nous créerons un exemple de jeu de données et configurerons la grille pour afficher et gérer efficacement les données.

Conditions préalables

Avant de plonger dans le didacticiel, assurez-vous que les prérequis suivants sont installés :

• Python (3.x ou supérieur)
• CLI angulaire
• Interface utilisateur de Kendo pour Angular

Licence d’essai de l’interface utilisateur de Kendo

L’interface utilisateur de Kendo et l’accès complet à son support professionnel sont entièrement gratuits pendant 30 jours. Tout ce que vous avez à faire est de suivre quelques étapes simples pour obtenir une licence d’essai. Pour activer votre licence d’essai ou commerciale pour Kendo UI for Angular, suivez ces étapes :

1. Visitez le site Web de Telerik : Allez à la Site Web Telerik et accédez au Interface utilisateur de Kendo pour Angular fiche produit.
2. Obtenir un essai ou acheter une licence : si vous n’avez pas encore de licence, vous pouvez démarrer un essai gratuit en cliquant sur le bouton « Démarrer l’essai gratuit ». Si vous avez déjà une licence, cliquez sur le bouton « Acheter maintenant » pour acheter une licence commerciale.
3. Sélectionnez le type de licence : choisissez le type de licence qui correspond le mieux à vos besoins, qu’il s’agisse d’une licence individuelle, d’une licence d’équipe ou d’une licence d’entreprise.
4. Remplissez le formulaire de demande de licence : remplissez le formulaire de demande de licence avec les informations requises, y compris votre nom, votre adresse e-mail, le nom de votre entreprise et tout détail supplémentaire demandé.
5. Soumettre la demande de licence : Une fois que vous avez rempli le formulaire, soumettez-le à Telerik pour traitement.
6. Recevoir des informations sur la licence : après avoir soumis la demande de licence, vous recevrez un e-mail contenant vos informations de licence, y compris une clé de licence ou un lien d’activation d’essai.
7. Appliquez la licence dans votre projet :
   ○ Licence d’essai : Si vous avez reçu un lien d’activation d’essai, suivez les instructions fournies pour activer la licence d’essai. Cela impliquera généralement d’accéder à une URL spécifique ou d’exécuter une commande dans le répertoire de votre projet.
   
   ○ Licence commerciale : si vous avez reçu une clé de licence, suivez ces étapes pour l’appliquer à votre projet :
   ■ Ouvrez le fichier src/styles.scss dans votre projet Angular.
   ■ Ajoutez l’instruction d’importation suivante en haut du fichier :

@import "~@progress/kendo-theme-default/scss/all";

1. Remplacez kendo-theme-default par le nom du thème que vous souhaitez utiliser si vous n’utilisez pas le thème par défaut.
2. Ouvrez le fichier src/app/app.module.ts.

Importez l’interface utilisateur de Kendo pour les modules angulaires que vous souhaitez utiliser. Par exemple, si vous souhaitez utiliser les modules Grid et Button, ajoutez les instructions d’importation suivantes :

import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

Dans le tableau des importations du décorateur @NgModule, ajoutez les modules importés :

imports: [
  
  GridModule,
  ButtonsModule
]

Pour vérifier que votre licence a bien été activée, ouvrez votre application dans le navigateur. Si votre serveur de développement est en cours d’exécution, redémarrez-le pour vous assurer que les modifications prennent effet. L’interface utilisateur de Kendo pour les composants angulaires devrait maintenant fonctionner sans aucune limitation liée à l’essai.

Étape 1 : Configurer l’API Python

Tout d’abord, configurons une API de statistiques basée sur Python pour nous fournir les données nécessaires. Suivez ces étapes:

1. Créez un nouveau répertoire pour votre API Python et accédez-y.
2. Configurez un environnement virtuel pour isoler les dépendances :

python -m venv env

Activez l’environnement virtuel :

Pour les fenêtres:

env\Scripts\activate

Pour macOS/Linux :

source env/bin/activate

Maintenant, installez Flask, en utilisant pip :

pip install flask

Maintenant, créez un nouveau fichier Python, api.py, et ajoutez le code suivant pour configurer une API Flask de base :

Python

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/stats')
def get_stats():
	# Sample data for demonstration
	stats = [
  {
	"userId": 1,
	"id": 1,
	"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
	"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
	"userId": 1,
	"id": 2,
	"title": "qui est esse",
	"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
	"userId": 1,
	"id": 3,
	"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
	"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
	"userId": 1,
	"id": 4,
	"title": "eum et est occaecati",
	"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  },
	]
	return jsonify(stats)

if __name__ == '__main__':
	app.run()

Ce code configure une route /api/stats qui renvoie une réponse JSON contenant les données de titre et de corps.

Démarrez le serveur d’API en exécutant la commande suivante dans le terminal :

python api.py

Le serveur API commencera à s’exécuter sur http://localhost:5000/api/stats.

Ça devrait ressembler à ça:

Étape 2 : Configuration de l’application Angular

Maintenant que notre API Python est prête, configurons l’application Angular et intégrons l’interface utilisateur de Kendo pour Angular. Suivez ces étapes:

Créez un nouveau projet Angular à l’aide de la CLI Angular :

ng new data-view-app

Accédez au répertoire du projet :

cd data-view-app

Installez l’interface utilisateur de Kendo pour les modules angulaires : recherchez des instructions plus détaillées sur configuration manuelle de la grille et configuration manuelle des cartes.

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-charts

Étape 3 : Création des composants de la vue de données

Dans cette étape, nous allons créer les composants nécessaires pour afficher et gérer les données à l’aide de Kendo UI for Angular.

Générez un nouveau composant Angular pour la vue de données :

ng generate component data-view

Ouvrez le fichier data-view.component.ts et mettez-le à jour avec le code suivant :

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';

@Component({
  selector: 'app-data-fetch',
  templateUrl: './data-view.component.html',
  styleUrls: ['./data-view.component.css']
})
export class DataFetchComponent implements OnInit {
  public gridData: GridDataResult = { data: [], total: 0 };
  public gridLoading = true;



  constructor(private http: HttpClient) { }

  ngOnInit() {
	this.fetchData();
  }

  fetchData() {
	const url = 'http://jsonplaceholder.typicode.com/posts';

	this.http.get<any[]>(url).subscribe(response => {
  	this.gridData = {
    	data: response,
    	total: response.length
  	};
  	this.gridLoading = false;
	}, error => {
  	console.error('Error fetching data:', error);
  	this.gridLoading = false;
	});
  }
}

Ouvrez le fichier data-view.component.html et ajoutez le code suivant :

<kendo-grid [data]="gridData" [loading]="gridLoading">
  <kendo-grid-column field="id" title="ID" ></kendo-grid-column>
  <kendo-grid-column field="title" title="Title" ></kendo-grid-column>
  <kendo-grid-column field="body" title="Body" ></kendo-grid-column>
</kendo-grid>

[Optional] Ouvrez le fichier data-view.component.css et ajoutez les styles suivants :

.grid-container {
  margin-bottom: 30px;
}

.chart-container {
  height: 400px;
}

Étape 4 : Ajouter le composant de vue de données à l’application

Ouvrez le fichier app.component.html et ajoutez le code suivant :

<app-data-view></app-data-view>

Ouvrez ensuite le fichier app.module.ts et le code suivant :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataFetchComponent } from './data-view/data-view.component';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';


 

@NgModule({
  declarations: [
	AppComponent,
	DataFetchComponent,
  ],
  imports: [
	BrowserModule,
	HttpClientModule,
	GridModule,
	BrowserAnimationsModule,
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Étape 5 : Exécution de l’application

Démarrez le serveur de développement Angular en exécutant la commande suivante dans le terminal, dans le répertoire du projet :

ng serve

1. L’application Angular commencera à s’exécuter sur http://localhost:4200.
2. Ouvrez votre navigateur Web et accédez à http://localhost:4200 pour afficher la vue des données avec la grille.

Toutes nos félicitations! Vous avez créé avec succès une vue de données à l’aide de Kendo UI pour Angular et consommé des données à partir d’une API de statistiques basée sur Python. La grille affiche le titre et le corps à titre d’exemple.

N’hésitez pas à personnaliser le style et à étendre les fonctionnalités en fonction de vos besoins. Par exemple, un graphique peut très facilement être ajouté dans ce script, voici comment :

Ajout d’un graphique

Installez d’abord le package Kendo UI for Angular Charts :

ng add @progress/kendo-angular-charts 

Ajoutez ensuite le code suivant dans le fichier data-view.components.html :

<kendo-chart>
  <kendo-chart-series>
  	<kendo-chart-series-item [data]="[1, 4, 5, 2, 1, 8]"> </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

L’extrait de code que vous avez fourni représente l’utilisation de <kendo-chart> composant de Kendo UI pour Angular pour créer un graphique de base. Le <kendo-chart> Le composant est utilisé pour afficher différents types de graphiques, tels que des graphiques linéaires, des graphiques à barres, des graphiques à secteurs, etc.

Au sein de la <kendo-chart> composant, vous définissez la série de données qui sera affichée sur le graphique à l’aide du <kendo-chart-series> composant. Chaque série de données individuelles est représentée par le <kendo-chart-series-item> composant.

Dans le code donné, nous avons une seule série de données représentée par le <kendo-chart-series-item>. Le [data] L’attribut est utilisé pour lier un tableau de valeurs à l’élément de série. Dans ce cas, le tableau [1, 4, 5, 2, 1, 8] est fourni comme données à visualiser sur le graphique.

Encore une fois, démarrez le serveur de développement angulaire en exécutant la commande suivante dans le terminal :

ng serve

Accédez à http://localhost:4200 pour voir la vue des données dans le graphique :

Derniers mots

Dans ce didacticiel, nous avons exploré comment utiliser l’interface utilisateur de Kendo pour Angular pour créer une vue de données dans une application Python. En suivant les étapes décrites ci-dessus, vous avez appris à configurer l’API Python, à intégrer l’interface utilisateur Kendo pour Angular dans une application Angular, à créer des composants pour la visualisation des données et à récupérer des données à partir de l’API Python.

Kendo UI for Angular fournit des fonctionnalités avancées pour l’affichage et la gestion des données, ce qui en fait un outil précieux pour les développeurs Python. Avec des grilles, des graphiques et d’autres composants, vous pouvez présenter et manipuler efficacement les données dans vos applications. Donner
Kendo UI pour Angular un essai aujourd’hui, le paiement est gratuit pendant 30 jours !