Création d'une application Music Player à l'aide de Kendo UI et Vue

Dans ce didacticiel, nous voyons à quel point il est facile de créer des applications lorsque vous combinez la puissance de l'ensemble de composants de Kendo UI et de Vue.js.

Kendo UI est une bibliothèque utilisée pour développer des applications à un rythme relativement plus rapide avec précision ; il fournit des composants d'interface utilisateur pour des bibliothèques comme jQuery, Angular, React et Vue, et est livré avec plus de 20 composants pour créer des graphiques, des tableaux de données et des pages glisser-déposer.

Vue est un cadre de développement frontal pour développer une gamme d'applications sur différentes plates-formes. Parallèlement à son intégration simple, sa documentation détaillée et sa flexibilité, Vue vous permet d'étendre le langage du modèle avec vos composants. Vue fournit également des bibliothèques pour le routage et la gestion des états, et nous utiliserons ce dernier dans cet article.

Dans ce didacticiel, nous allons créer une application de lecteur de musique en utilisant Vue et Kendo UI; l'application récupère et affiche les derniers albums et morceaux de l'API Spotify.

Pour suivre ce didacticiel, une compréhension de base de Vue et Node.js est requise. Veuillez vous assurer que Node et npm sont installés avant de commencer.

Si vous n'avez aucune connaissance préalable de Vue, veuillez suivre la documentation officielle ici . Revenez et terminez l'article après avoir parcouru la documentation.

Nous allons créer l'application à l'aide des outils suivants:

Voici une capture d'écran de l'application que nous allons créer:

Création d'un Application et obtention 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, connectez-vous en utilisant vos informations d'identification Spotify. Une fois connecté, vous devriez voir la capture d'écran ci-dessous:

Vous pouvez voir que j'ai des applications existantes. Si vous ne le faites pas, cliquez sur la carte vide pour créer une nouvelle application, remplissez les détails requis pour commencer.

Puisque nous ne configurerons pas OAuth pour les utilisateurs de l'application, nous devrons y avoir accès jetons de la console développeur Spotify. Les jetons expirent après quelques demandes, mais vous pouvez toujours étendre l'application pour obtenir des jetons d'accès d'utilisateurs connectés.

Pour obtenir un jeton, rendez-vous sur la console sélectionnez le point de terminaison que vous souhaitez à explorer, et au bas de la page, vous devriez voir un bouton intitulé Obtenir un jeton . Cliquez sur le bouton pour obtenir un nouveau jeton et testez le point de terminaison pour afficher des exemples de réponses.

Copiez le jeton généré; nous l'utiliserons plus loin dans l'article.

Initialisation de l'application et installation des dépendances du projet

Pour commencer, nous utilisons le vue-cli pour amorcer notre application. Tout d'abord, nous allons installer la CLI en exécutant npm install -g @ vue / cli dans un terminal.

Pour créer un projet Vue à l'aide de la CLI, nous allons exécuter la commande suivante: [19659020] vue créer vue-music-player

Après avoir exécuté cette commande, plutôt que de sélectionner la configuration par défaut, nous optons pour la configuration manuelle. Nous faisons cela parce que nous voulons ajouter un pré-processeur CSS dans notre application. Suivez la capture d'écran ci-dessous:

Ensuite, exécutez les commandes suivantes dans le dossier racine du projet pour installer les dépendances.

     npm install @ progress / kendo-ui @ progress / kendo-theme-default @ progress / kendo-layout-vue-wrapper

Démarrez le serveur de développement d'applications en exécutant npm run serve dans un terminal du dossier racine de votre projet.

Un onglet de navigateur devrait s'ouvrir sur http: // localhost: 8080. La capture d'écran ci-dessous devrait être similaire à ce que vous voyez dans votre navigateur:

Vue d'accueil

Pour commencer, nous allons définir les vues de l'application, à partir de la page d'accueil. La page d'accueil abrite la grille affichant les pistes et albums et l'en-tête. Le composant par défaut App abrite la page d'accueil de l'application.

Ouvrez le fichier App.vue et mettez-le à jour pour commencer. Nous allons d'abord mettre à jour la section du modèle du composant:

Premièrement, nous définissons la structure de notre application à l'aide du composant de mise en page de l'interface utilisateur de Kendo. Le package de mise en page fournit un composant séparateur qui peut être utilisé pour diviser la page Web en différentes sections. Le composant séparateur permet à l'utilisateur de contrôler la taille de chaque section en faisant glisser et en redimensionnant.

Vous pouvez afficher le séparateur de kendo dans deux orientations: vertical et horizontal . Fournissez simplement une directive d'orientation sur le composant. Dans le composant kendo-splitter il y a deux éléments div représentant les volets du séparateur ils sont utiles pour créer des colonnes similaires au .col éléments dans Bootstrap.

Ensuite, nous mettons à jour la section du script avec les variables que nous utiliserons dans le modèle; nous importons également le composant Splitter de la bibliothèque d'encapsulage Vue de Kendo UI.

Ensuite, nous inclurons les ressources externes à utiliser dans l'application. Nous utiliserons les polices Montserrat et Muli .

Ouvrez le fichier public / index.html et incluez le lien vers les polices externes:

    
    
      
        
        
        
         <link rel = "icon" href = "<%= BASE_URL %> favicon.ico ">
        
        
      
      
        
        
 
        
      
    

De plus, nous allons créer des variables SCSS à utiliser dans toute notre application. La première étape consiste à créer un fichier partiel appelé _variables.scss dans le dossier src / assets . Ouvrez le fichier et mettez-le à jour avec les variables suivantes:

     // src / assets / _variables.scss

    $ accent: # 7B84FF;
    $ lumière d'accentuation: #DBDDFF;
    $ border-radius: 5px;
    $ texte de base: # 525F7F;

Pour utiliser le composant séparateur de l'interface utilisateur de Kendo, nous devons importer les fichiers de base et le programme d'installation du plugin, ouvrir le fichier src / main.js et le mettre à jour comme l'extrait ci-dessous:

     / / src / main.js
    importer Vue depuis 'vue'
    importer l'application depuis './App.vue'
    importer '@ progress / kendo-ui'
    importer '@ progress / kendo-theme-default / dist / all.css'
    importer {LayoutInstaller} depuis '@ progress / kendo-layout-vue-wrapper';

    Vue.use (LayoutInstaller);
    Vue.config.productionTip = false
    nouvelle Vue ({
      rendu: h => h (App),
    }). $ mount ('# app')

Le composant d'en-tête affiche le logo de l'application et très peu d'informations. Ce composant est principalement un composant d'affichage.

Créez un fichier Header.vue dans le dossier src / components . Ouvrez le fichier et suivez le processus en trois étapes de création du composant ci-dessous:

Tout d'abord, nous allons créer la section de modèle :

     // src / components / Header.vue
    

Ensuite, nous allons styliser l'en-tête dans la section style . Mettez à jour le fichier à l'aide de l'extrait ci-dessous:

Enfin, nous inclurons la section script . Dans la section de script, nous allons créer une propriété cart dans le tableau props ; avec ceci, et le composant peut recevoir des accessoires du composant parent:

Ensuite, nous allons créer un service pour récupérer les dernières versions et pistes de Spotify.

Récupération des pistes et des albums

Pour gérer la récupération des dernières versions et pistes, nous utiliserons des fonctions utilitaires. Créez un fichier appelé utils.js dans le répertoire src / .

Ouvrez le fichier et copiez-y le code ci-dessous:

 // src / utils.js

    const SPOTIFY_SECRET = '';
    en-têtes const = {
      'Content-Type': 'application / json',
      Autorisation: `Porteur $ {SPOTIFY_SECRET} ',
    };

    export const getAlbums = () => {
      retourner chercher (
        «https://api.spotify.com/v1/browse/new-releases?limit=10&country=GB»,
        {
          en-têtes,
        }
      );
    };

    export const getAlbumTracks = (id) => {
      return fetch (`https://api.spotify.com/v1/albums/$ {id} / tracks`, {
        en-têtes,
      });
    };

L'objet en-têtes est attaché aux demandes car les points de terminaison Spotify nécessitent En-têtes d'autorisation .

La fonction suivante est la méthode getAlbums qui renvoie un Fetch demande faite au point de terminaison des nouvelles versions . Ce point de terminaison renvoie les derniers albums et titres publiés sur Spotify. Vous pouvez afficher les réponses de ce noeud final dans la console ici .

Enfin, la méthode getAlbumTracks prend un paramètre id et appelle l'album et appelle l'album . / $ {id} / pistes point de terminaison. Ce point de terminaison renvoie les pistes contenues dans un album.

Remplacez la chaîne d'espace réservé par votre jeton d'accès réel obtenu à partir de la console. Si votre jeton a expiré, vous pouvez en obtenir un nouveau ici .

Ensuite, nous allons créer les composants pour afficher les derniers albums à partir du point de terminaison des nouvelles versions.

Création de la vue Liste des albums

Créez les fichiers suivants dans le répertoire src / components : Album.vue pour le rendu des fiches d'album individuelles et AlbumList.vue pour le rendu d'une liste d'album

Ouvrez le fichier Album.vue dans le répertoire src / components et suivez le processus en trois étapes de création du composant ci-dessous:

L'album a un écouteur d'événements cliquez sur pour charger les pistes de l'album sélectionné. Ensuite, ajoutons quelques styles au composant pour lui donner un peu de vie. Ajoutez la section style dans le fichier et ajoutez-y les styles suivants:

Ensuite, nous mettrons à jour le fichier pour ajouter une section de script et enregistrer le gestionnaire pour l'événement click. Ouvrez le fichier et mettez-le à jour avec les variables et méthodes utilisées dans le fichier HTML:

Premièrement, nous importons les fonctions utilitaires du fichier src / utils.js ; puis dans le cycle de vie des composants montés nous récupérons les albums à l'aide de la fonction getAlbums . Une fois la demande terminée, nous obtenons les éléments de la réponse à l'aide de la restructuration d'objet; nous définissons ensuite le premier album de la liste comme currentAlbum .

La méthode currentAlbumTracks sert à récupérer les pistes d'un album. La méthode prend un seul paramètre id et utilise la fonction getAlbumTracks pour récupérer les données.

La méthode onAlbumChange est un gestionnaire d'événements appelé lorsque vous cliquez sur un album. La méthode obtient l'ID de la sélection et appelle la méthode currentAlbumTracks pour récupérer les pistes de l'album. Nous attribuons ensuite l'album sélectionné à la propriété currentAlbum .

Après ces mises à jour, si nous visitons l'application sur le navigateur sur http: // localhost: 8080, nous devrions voir les albums répertoriés, et cela devrait être similaire à la capture d'écran ci-dessous:

Ensuite, nous allons créer la liste des pistes et les composants de la piste.

Création de la vue Liste des pistes

Créez les fichiers suivants dans le répertoire src / components : Song.vue pour le rendu des fiches d'album individuelles et SongList .vue pour afficher une liste de fiches d'album.

Ouvrez le fichier Song.vue dans le répertoire src / components et suivez le processus en trois étapes de création de la composant ci-dessous:

Dans ce composant, nous afficherons le nom de la piste et nous afficherons une balise si la piste est explicite . Nous avons également utilisé le jeu d'icônes de Kendo UI pour définir le bouton de lecture. L'interface utilisateur de Kendo dispose d'un riche ensemble d'icônes disponibles ici . Ils sont faciles à configurer et à personnaliser.

Appliquons certains styles au composant. Mettez à jour le composant avec une section de style et mettez-le à jour avec les styles ci-dessous:

Après avoir appliqué les styles, l'étape suivante consiste à mettre à jour le fichier de composant pour déclarer les variables utilisées dans le gabarit de vue. Mettez à jour le fichier avec une section de script et mettez-le à jour comme l'extrait ci-dessous:

Les styles suivants sont utilisés pour définir la liste des pistes à afficher.

Le composant SongList reçoit un tableau de pistes du composant App donc mettez à jour le composant pour déclarer les accessoires et autres variables utilisés dans le modèle de vue:

Dans le composant, nous définissons les liaisons à recevoir par le composant. De plus, nous déclarons deux méthodes calculées albumCover et albumArtiste . Les noms de méthode sont assez explicites, mais nous continuerons à les parcourir. La méthode albumCover récupère l'image de l'objet currentAlbum et la méthode albumArtiste récupère l'artiste de l'album.

Comme nous l'avons fait avec la AlbumList nous rendrons le composant dans le fichier App.vue .

Ouvrez le fichier App.vue et mettez-le à jour pour qu'il ressemble à l'extrait de code ci-dessous:

 & lt; style lang = "scss" scoped & gt;
  ...
& lt; style & gt;

& lt; script & gt;
importer {Splitter} depuis "@ progress / kendo-layout-vue-wrapper";
// ...
importer SongList à partir de "./components/SongList";

exporter par défaut {
  nom: "app",
  Les données() {
   // ...
  },
  Composants: {
    // ...
    SongList,
  },
  méthodes: {
   // ...
  },
  monté asynchrone () {
    // ...
  }
};
& lt; script & gt;
 Après avoir rendu la liste des pistes, si nous visitons l'application sur le navigateur sur http: // localhost: 8080, nous devrions voir à la fois les albums répertoriés et les pistes. Après avoir cliqué sur un album, il obtient les pistes dans la section liste des pistes. Check it out ci-dessous:
   
 Conclusion
 Dans ce didacticiel, nous avons vu à quel point il est facile de commencer à utiliser les composants de l'interface utilisateur de Kendo pour Vue, puis à quel point il est facile de définir la structure de votre application en utilisant le composant  Splitter  de l'interface utilisateur de Kendo. Les composants étaient faciles à utiliser et à configurer. Vous pouvez étendre cette application de démonstration pour lire chaque piste répertoriée. L'API Spotify fournit un  preview_url  pour leurs pistes, et un élément audio peut être utilisé pour lire ces pistes. Bon codage.