L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Créer un lecteur de musique avec Kendo UI et Angular
Ce didacticiel sur le lecteur de musique explique à quel point il est facile de commencer à utiliser les composants de Kendo UI pour Angular et à définir la structure de votre application à l'aide du composant Splitter. Les composants sont faciles à utiliser et à configurer.
Kendo UI est une bibliothèque utilisée pour créer des applications plus rapidement. Kendo UI fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery Angular React et Vue et contient de nombreux composants. pour créer des graphiques, des tableaux de données et des pages glissées.
Kendo UI est personnalisable. Il fournit un ensemble de thèmes pour Material UI, Bootstrap, etc., ainsi qu'un jeu d'icônes et une palette de couleurs. Les composants de Kendo UI sont distribués sous la forme de plusieurs packages NPM, vous n'avez donc aucune crainte à surcharger votre application de composants inutiles et à augmenter votre offre de construction.
Angular est un framework JavaScript permettant de créer une application Web. Il offre les meilleurs pratiques et outils pour faciliter le développement d'applications. Angular utilise des modèles déclaratifs, une injection de dépendance et Observables pour alimenter des applications pouvant être exécutées sur plusieurs plates-formes.
Kendo UI fournit des composants spécifiques à Angular pour faciliter le développement, et nous en utiliserons certains pour créer une musique simple. application de joueur. L’application utilisera l’API de Spotify pour obtenir des pistes et des albums, ainsi que Kendo UI pour la création de grilles et la définition d’icônes.
Pour suivre ce didacticiel, vous devez avoir une connaissance de base de Angular. Assurez-vous que Node et NPM sont installés avant de commencer.
Si vous ne connaissez pas encore Angular, veuillez suivre le tutoriel officiel ici . Vous pouvez revenir à l'article lorsque vous aurez terminé.
Nous allons créer l'application à l'aide des outils suivants:
Voici une capture d'écran de l'application que nous allons construire:
Créer une application et obtenir des clés Spotify
Pour accéder à l'API Spotify, vous devez créer une application dans le tableau de bord du développeur. Rendez-vous sur le tableau de bord du développeur et connectez-vous à l'aide de vos informations d'identification Spotify. Après vous être connecté, vous devriez voir la capture d'écran ci-dessous:
Vous pouvez voir que j'ai des applications existantes. Sinon, cliquez sur la carte vide pour créer une nouvelle application et renseignez les informations requises pour commencer.
Etant donné que nous n'allons pas configurer OAuth pour les utilisateurs de l'application, nous devrons obtenir jetons d'accès à partir de la console de développement Spotify. Les jetons expirent après quelques requêtes, mais vous pouvez toujours étendre l'application pour obtenir des jetons d'accès des utilisateurs connectés.
Pour obtenir un jeton, rendez-vous sur la console sélectionnez le noeud final que vous souhaitez. souhaitez explorer, et au bas de la page, vous devriez voir un bouton intitulé Get Token . Cliquez sur le bouton pour obtenir un nouveau jeton et tester le noeud final pour afficher des exemples de réponses.
Copiez le jeton généré, nous l'utiliserons plus tard dans l'article. [19659019] Initialisation de l’application et installation des dépendances
Pour commencer, nous allons utiliser la CLI (interface de ligne de commande) fournie par l’équipe Angular pour initialiser notre projet.
Commencez par installer la CLI en exécutant npm installer -g @ angular / cli . NPM est un gestionnaire de paquets utilisé pour l'installation de paquets. Il sera disponible sur votre PC si vous avez Node installé; sinon, téléchargez le nœud ici .
Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:
un nouveau lecteur de musique kendo --style = scss Cette commande est utilisée pour initialiser un nouveau projet angulaire. le projet utilisera SCSS comme pré-processeur.
Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:
ng add @ progress / kendo-angular-buttons @ progress / kendo- disposition angulaire
Démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet.
Home View
Pour commencer, nous allons définir les vues de l'application. , à partir de la page d'accueil. La page d'accueil hébergera la grille affichant les pistes, les albums et l'en-tête. Le composant App par défaut hébergera la page d'accueil de l'application. Ouvrez le fichier app.component.html et mettez-le à jour pour commencer:
< main >
< section >
< kendo-splitter style = " largeur : 100% ; hauteur : 100% ; 19659041] padding : 40 px 0 " >
< kendo-splitter-pane taille [19659052] = " 60% " min = " 40% " >
</ vitre séparatrice kendo >
< vitre séparatrice kendo min = " 30% " >
<! album titres liste ici - -
</ kendo-splitter-pane >
</ séparateur de kendo >
</ section >
</ main >
Premièrement, nous définissons la structure de notre application à l’aide du composant d’agencement de Kendo UI. Le package de présentation fournit un composant séparateur qui peut être utilisé pour diviser la page Web en différentes sections. Le composant splitter permet à l'utilisateur de contrôler la taille de chaque section en le faisant glisser et en le redimensionnant.
Le kendo-splitter peut être affiché dans deux orientations: vertical . ] et horizontal . Il suffit de fournir une directive d'orientation sur le composant. Dans le composant de kendo-splitter il y a deux composants de kendo-splitter-pane . Ils sont utilisés pour créer des colonnes similaires aux éléments .col de Bootstrap.
Ces composants de volet sont des colonnes redimensionnables. Nous allons donc commencer par fournir la directive size qui définit la largeur de la colonne similaire à col-8 dans Bootstrap. La directive min est utilisée sur les colonnes redimensionnables pour limiter le redimensionnement à une largeur minimale. Dans l'exemple ci-dessus, la première colonne ne peut pas être redimensionnée après 40% et la deuxième 30% .
Ensuite, nous inclurons les actifs externes de l'application. en utilisant. Nous allons utiliser les polices Montserrat et Roboto . Nous mettrons également à jour le fichier style.scss afin d'inclure les feuilles de style des composants de l'interface Kendo et les styles d'application.
Ouvrez le fichier index.html et incluez le lien vers le fichier. polices externes:
< html lang = " en " >
< head [19659000] head
< meta charset = " utf-8 " >
< titre > [19659099] KendoMusicPlayer </ titre >
< base href = " / " [ de >
< meta name = " viewport " content = " width = device- width, initial-scale = 1 " >
< link rel = " icon " [ [1945929]" link 19659051] type = " image / x-icon " href = " favicon.ico " ] >
< link href = " https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,500,700,9 " rel = " feuille de style " >
</ tête >
< body >
< app-root > </ app-root >
</ body [19659031]>
</ html >
En outre, nous allons redéfinir le schéma de couleurs par défaut du thème de Kendo UI. La première étape consiste à créer un fichier pour contenir les variables. Créez un dossier dans le répertoire src / app appelé scss-partials et créez un fichier de partiels appelé _variables.scss dans le dossier. Ouvrez le fichier et mettez-le à jour avec les variables suivantes:
$ accent : # 7B84FF ;
$ accent-light : # DBDDFF ;
$ border-radius : 5 px ;
$ base-text : # 525F7F ;
Ouvrez ensuite le fichier style.scss et importez le fichier de variables et les feuilles de style des composants suivants:
@import "app / scss-partials / variables" ;
] @import "~ @ progress / kendo-theme-default / scss / button" ;
@import "~ @ progrès / kendo-theme-default / scss / splitter" [19659031];
body, html {
margin : 0 ;
padding : 0 ;
de police de caractères : 'Roboto' sans-serif ;
contexte : # F7F7F7 ;
}
corps, html, principal , section {
height : 100% ;
}
Le composant en-tête affichera le logo de l’application et très peu d’informations. Ce composant est principalement un composant d'affichage.
Exécutez la commande suivante pour créer le composant d'en-tête:
ng Générez un en-tête de composant Ouvrez ensuite le fichier src / app / header / header.component.html et mettez-le à jour pour qu'il ressemble au code ci-dessous:
< header >
< div class = " de marque " >
< img src = " /assets/images/logo.png " >
< h5 > Just Music </ h5 >
</ div >
< div class = ] " éléments de navigation " >
< ul class = " objets de navigation " [ >
< li class = " élément de navigation " >
< span > Musique </ span >
</ li >
</ ul >
] </ div >
</ header >
Note : Le contenu de l'image utilisé peut être trouvé ici dans le référentiel GitHub . Le logo a été obtenu à partir de https://flaticon.com .
Nous allons ensuite styliser l’en-tête. Ouvrez le fichier header.component.scss et mettez-le à jour avec l'extrait de code ci-dessous:
@import "../ scss-partials / variables" ;
en-tête [19659031] {
display : flex ;
couleur de fond : # F7F7F7 ;
aligner les éléments : centre ;
famille de polices : 'Montserrat' sans-serif ;
marge : 0 ; [19659174] padding : 20 px 5% ;
couleur : de la fumée blanche ;
de shadow-box : [19659039] 0 1 px 2 px 0 rgba ( 0 0 0 0.1 ) ;
.brand {
flex : 1 ;
Afficher : flex ; [19659287] align-items : centre ;
img {
height : 35 px ;
de bordure rayon : 50% ;
marge-droite : 17 px ;
}
h5 {[19659297] taille de la police : 15 px ;
marge : 0 ;
transformation de texte : majuscule ;
espacement des lettres : 0.5 px ;
épaisseur de police : 600 ;
de couleur ]: $ base-text ;
}
}
.nav-items {
marge : 0 ; [19659295] .nav-item {
span {
transformation de texte : majuscule ;
taille de police : 13 px ;
police-poids : bold ;
espacement des lettres : 0,7 px ;
padding : 10 px 17 px ;
border-radius : 4 px ;
couleur de fond : $ accent-light ; [19659342] couleur : $ accent ;
frontière : rien ;
marge : 0 ;
}
}
}
}
Quelques styles pour embellir l'en-tête.
Si vous visitez http: // localhost: 4200, vous devriez voir la dernière vue de l'application. L'en-tête et le séparateur sont visibles, vous pouvez jouer avec les colonnes redimensionnables, mais n'oubliez pas de revenir et de terminer l'article. Assurez-vous que le serveur de développement angulaire est en cours d'exécution avant les tests.
Nous allons maintenant créer un service pour récupérer les dernières versions et les pistes de Spotify.
Récupération de pistes et d'albums
Pour gérer l'extraction des dernières versions et des dernières pistes, nous utiliserons un service. Il est recommandé d’utiliser les services pour les effets secondaires tels que les requêtes HTTP dans votre application. Les services sont réutilisables et peuvent facilement faire abstraction de tels processus à partir de composants, rendant ainsi les composants moins lourds et plus faciles à gérer.
Pour créer un service à l'aide de l'interface de ligne de commande, exécutez la commande suivante: ] album
Ceci devrait générer un fichier nommé album.service.ts dans le répertoire src / app . Ouvrez le fichier et mettez-le à jour pour inclure de nouvelles méthodes d'extraction de données:
import { Injectable } à partir de '@ angular / core' ;
import { HttpClient HttpHeaders } à partir de '@ angular / common / http' ;
de de ] environnement } de '../ environnements / environment' ;
@ Injectable ( {
a fourniIn : 'root'
} )
classe d'exportation AlbumService {
constructeur ( privé http : HttpClient ) {
obtenez en-têtes () {
retour nouveau 19659407] HttpHeaders ( { 'Type de contenu' : 'application / json' 'Autorisation' : '. $ { environment . spotifySecret } ' ] ) ;
]
getAlbums () {
renvoie ce . http . get ( 'https: // api .spotify.com / v1 / browse / new-releases? limit = 10 & pays = GB ' {
en-têtes : cette . en-têtes
} ) ;
}
getAlbumTracks ( id : chaîne ) {
retour [19659387] this . http . get ( `https://api.spotify.com/v1/albums/ $ { id } / tracks` {
en-têtes : cette . en-têtes
} ) ;
}
}
Dans un premier temps, nous allons importer le HttpClient qui sera utilisé pour les requêtes HTTP. HttpHeaders est utile pour créer des en-têtes pouvant être attachés aux demandes, car les points de terminaison Spotify nécessitent des en-têtes Authorization .
La méthode [1039016] génère des en-têtes à l'aide de HttpHeaders classe et fournit un jeton Bearer stocké dans le fichier environment . Nous allons arriver à créer cette propriété spotifySecret dans le fichier environment.ts .
La méthode suivante est la méthode getAlbums qui renvoie un . Http demande observable faite au point final . Ce noeud final renvoie les derniers albums et pistes publiés sur Spotify. Vous pouvez afficher les réponses de ce point de terminaison dans la console ici .
Enfin, la méthode getAlbumTracks utilise un paramètre id et appelle l'album . / $ {id} / pistes noeud final. Ce noeud final renvoie simplement les pistes contenues dans un album.
Ensuite, nous mettrons à jour le fichier environment.ts avec le jeton obtenu à partir de la console. Si votre jeton a expiré, vous pouvez en obtenir un nouveau ici .
Ouvrez le fichier environment.ts et ajoutez une nouvelle propriété appelée spotifySecret au objet:
exportation const environnement = {
production : false
spotifySecret : ''
} ;
Remplacez la chaîne de substitution
Pour utiliser la classe HttpClient vous devez inclure l'importation HttpClientModule . app.module.ts . Ouvrez le fichier et ajoutez l'importation:
import { BrowserModule } à partir de '@ angular / platform-browser' ;
importé . { NgModule } de '@ angular / core' ;
...
import { HttpClientModule de ] de '@ angular / common / http' ;
@ NgModule ( {
déclarations : [
...
]
importations : [
...
HttpClientModule
]
fournisseurs : []
bootstrap : [ AppComponent ]
} )
classe de classe AppModule { de ].
Nous allons ensuite créer les composants pour afficher les derniers albums du point de terminaison des nouvelles éditions.
Création de la vue Liste des albums
Exécutez les commandes suivantes pour générer des composants pour le produit et la liste de produits: [19659023] ng générer un album de composants
Et pour la liste de produits, lancez:
ng générer la liste des albums de composants
Ouvrez le fichier album.component.html dans le répertoire src / app / album et mettez à jour le code ci-dessous:
< div class = " album " (cliquer) = " surAlbumClick ($ event) " >
< div [ngStyle] = " albumCover " >
< div class = " détails " >
< h3 > {{album.name}} </ h3 >
< h4 > {{getArtiste (album) .name }} </ h4 >
</ div <19659076] </ div >
</
Source link