:Construire la console de vidéos courtes

Prérequis

• Avant de construire la console web pour les vidéos courtes, installez Node.js ainsi que le gestionnaire de paquets npm afin de compiler les dépendances Sass, telles que node-sass.

  Remarque

  • Nous vous recommandons d'utiliser Node.js 11.15.0. L'utilisation d'une version antérieure ou plus récente peut entraîner des échecs lors de l'installation ou de la compilation des dépendances Sass.

  • Il est conseillé de gérer vos environnements Node.js avec nvm. Cet outil permet d'installer plusieurs versions de Node.js et de basculer rapidement de l'une à l'autre. Exécutez la commande node -v dans une interface en ligne de commande (CLI) pour vérifier la version actuelle de votre environnement Node.js.

  • Installez les environnements Node.js sur un ordinateur local. Une fois la console configurée et testée, empaquetez le code source puis téléchargez-le sur votre instance Elastic Compute Service (ECS) pour la publication.

• Avant d'intégrer le code source de la console, assurez-vous d'avoir intégré le serveur d'application (AppServer) et maintenez-le en cours d'exécution. Pour plus d'informations sur la configuration du serveur d'application, consultez la rubrique Intégration côté serveur.

Aperçu de la console de vidéos courtes

La console de vidéos courtes propose les fonctionnalités suivantes :

• Configuration d'un intercepteur de requêtes pour traiter les demandes de connexion ou inviter les utilisateurs dont la session a expiré à se reconnecter.

• Affichage de la liste complète des vidéos, avec la possibilité de :

  • Rechercher des vidéos selon l'ID vidéo, l'ID utilisateur, le nom d'utilisateur, le titre de la vidéo, le statut de modération et la date de création.

  • Consulter les informations vidéo, notamment la durée, la taille et l'ID de la vidéo.

  • Lire les vidéos dans différentes résolutions et afficher leur description.

  • Visualiser les captures d'écran (snapshots).

  • Vérifier le statut de modération et le statut de transcodage.

  • Recommander, modérer, transcoder et supprimer des vidéos.

• Affichage de la liste des vidéos recommandées, avec la possibilité de :

  • Rechercher des vidéos selon l'ID vidéo, l'ID utilisateur, le nom d'utilisateur, le titre de la vidéo et la date de création.

  • Consulter les informations vidéo, notamment la durée, la taille et l'ID de la vidéo.

  • Lire les vidéos dans différentes résolutions et afficher leur description.

  • Vérifier le statut de modération et le statut de transcodage.

  • Précharger des vidéos, annuler une recommandation et transcoder des vidéos via Narrowband HD™.

Procédure

1. Téléchargez le code source de la démo de vidéos courtes.

   1. Pour construire la console de vidéos courtes, téléchargez le code source des démos du serveur d'application (AppServer) et de la console. Pour plus de détails, reportez-vous à la section Téléchargement des démos du serveur d'application et de la console de vidéos courtes.

   2. Décompressez l'archive du code source. Le répertoire video-admin contient les dossiers et fichiers suivants :

      ├── node_modules                  // The directory of the dependencies in the Node.js environment. After you run the npm install command, all dependencies are installed in this directory.
      ├── dist                          // The directory of packaged project files.
      ├── public                        
      │   ├── favicon.ico               
      │   └── index.html                // The web page entry, where you can reference content from a Content Delivery Network (CDN), such as online JS and CSS files.
      ├── src                           // The directory of the business logic and Vue components.
      │   ├── assets                    // The directory of static resources, such as CSS files, images, and fonts.
      │   │   ├── images
      │   │   └── scss
      │   ├── components                // The directory of Vue components.
      │   │   ├── RecommendVideo.vue    // The dialog box component for recommend videos.
      │   │   └── VodPlayer.vue         // The player component.
      │   │   └── Tags.vue         // The video tags.
      │ │ └ ── VideoDot.vue // The video progress markers.
      │   │   └── VideoSort.vue         // The TV play settings.
      │   ├── mixin                     // The directory of Vue mixins.
      │   │   └── index.js
      │   ├── router-short        // The routing table configuration.
      │   │   └── index.js
      │   ├── views                     // The directory of the rendering component for the Vue router.
      │   │   ├── list                  // The rendering component for the video list router.
      │   │   │  └── index.vue
      │   │   ├── login                 // The rendering component for the logon router.
      │   │   │   └── index.vue
      │   │   ├── recommend             // The rendering component for the recommended video list router.
      │   │   │   └── index.vue
      │   │   └── videos                // The rendering component for the main page, side navigation pane, and top navigation bar.
      │   │       └── index.vue
      │   ├── App.vue                   // The main rendering component.
      │   ├── main.js                   // The main entry file.
      │   └── router.js                 // The profile of Vue router.
      ├── .browserslistrc               // The list of compatible browsers.
      ├── .gitignore
      ├── babel.config.js               // The profile of Babel.
      ├── package-lock.json
      ├── package.json                  // The package description file, which contains the information about dependencies, authors, and description.
      ├── postcss.config.js             // The profile of PostCSS, which is prefixed with the name of the CSS vendor.
      ├── README.md
      ├── README_zh.md
      └── vue.config.js                 // The profile of Vue. 

      Remarque

      Le code source de la console de vidéos courtes se trouve dans le répertoire

      video-admin

      . Par conséquent, exécutez les commandes suivantes dans ce répertoire.

2. Effectuez la configuration requise et compilez le projet.

   1. Modifiez la configuration dans le fichier ./video-admin/vue.config.js. Définissez le paramètre proxy sur l'adresse IP publique de l'instance ECS hébergeant le serveur d'application de vidéos courtes, suivie du port 8080 (format : http://<Adresse IP publique de l'instance ECS>:8080). Voici la configuration correspondante :

      module.exports = {
      // Specify the proxy for frontend development.
      devServer: {
       proxy: 'http://*.*.*.*:8080',    // Set this parameter to the endpoint of the ECS instance, without a forward slash (/) at the end.
      },
      productionSourceMap: false,
      // Specify the path of static resources for the production and development environments.
      publicPath: process.env.NODE_ENV === 'production'
       ? 'http://example.com/resource/'
       : '/',
      }

   2. Une fois l'environnement installé, ouvrez une interface en ligne de commande (CLI) et accédez au répertoire video-admin. Exécutez la commande suivante pour installer les dépendances du projet :

      npm install

   3. Après avoir installé les dépendances nécessaires et modifié la configuration, exécutez la commande suivante :

      npm run serve

      Remarque

      • L'exécution de cette commande lance un service sur votre ordinateur. Ouvrez l'URL par défaut http://localhost:8080 dans un navigateur pour utiliser la console localement afin de modérer et recommander les vidéos téléchargées. Si le service est lancé sur un serveur, accédez à l'URL suivante depuis votre navigateur local : http://Adresse IP du serveur:8080.

      • Lors de l'initialisation de la base de données créée sur le serveur d'application, un compte administrateur de console est généré par défaut. L'identifiant est admin et le mot de passe est 123456. Utilisez ces identifiants pour vous connecter à la console.

3. Empaquetez et publiez le code source.

   1. Modifiez la configuration dans le fichier ./video-admin/vue.config.js.

      Lors de la publication du code source en environnement de production, définissez le paramètre publicPath du fichier vue.config.js sur le chemin d'accès aux ressources statiques. Par exemple, si le projet utilise le framework spring boot en backend, les ressources statiques sont stockées dans le répertoire webapp/resource/short-video. Configurez le paramètre publicPath dans le fichier vue.config.js comme illustré ci-dessous :

      module.exports = {
         // Specify the proxy for frontend development.
         devServer: {
          proxy: 'http://*.*.*.*:8080',    // Set this parameter to the endpoint of the ECS instance, without a forward slash (/) at the end.
         },
        productionSourceMap: false,
        // Specify the path of static resources for the production and development environments.
        publicPath: process.env.NODE_ENV === 'production'
          ? '/resource/short-video/'
          : '/',
      }

   2. Accédez au répertoire du projet video-admin et exécutez la commande d'empaquetage suivante :

      npm run build

      Remarque

      • Cette commande compresse les fichiers de ressources statiques. Le code source compressé est prêt à être publié en environnement de production.

      • L'empaquetage du projet repose sur webpack, encapsulé par Vue CLI. Vous pouvez personnaliser webpack dans le fichier vue.config.js. Pour plus d'informations, consultez la page Référence de configuration.

   3. Une fois la commande d'empaquetage exécutée, les fichiers générés se trouvent dans le répertoire video-admin/dist et comprennent les éléments suivants :

      ├──dist
         ├── css
         │   ├── app.[hash].css             // The CSS file of Vue components or the custom CSS file.
         │   └── chunk-vendors.[hash].css   // The CSS file that is imported by dependencies.
         ├── fonts
         ├── img
         ├── js
         │   ├── app.[hash].css             // The JS file of Vue components or the custom JS file.
         │   └── chunk-vendors.[hash].css   // The JS file that is imported by dependencies.
         ├── favicon.ico
         └── index.html

      Remarque

      Lors de l'empaquetage,

      webpack

      sépare les fichiers

      CSS

      et

      JS

      importés par les dépendances des fichiers

      CSS

      et

      JS

      personnalisés. Cette séparation accélère le temps de réponse des pages web. Elle permet également de ne mettre à jour que les fichiers

      app.[hash].js

      et

      app.[hash].css

      lors des itérations, tant que les dépendances restent inchangées.

4. Publiez le code source sur le serveur d'application (AppServer).

   1. Le projet utilise le framework spring boot en backend. Le paramètre targetPath spécifie le répertoire de déploiement de la console web. Dans la démo, il s'agit du répertoire resources. Pour modifier ce répertoire, changez la valeur du paramètre targetPath associé à la balise <resources> dans le fichier pom.xml.

   2. Téléchargez le répertoire ./video-admin/dist (empaquété à l'étape précédente) sur votre instance ECS. Placez tous les fichiers du répertoire dist dans le chemin /src/main/webapp/resource/short-video/ où réside le code source du serveur d'application.

      # Upload the dist directory to the ECS instance by using the scp command. Copy all the files in the dist directory to the short-video directory.
      scp -rf Upload directory/dist/* Root directory of the AppServer source code/src/main/webapp/resource/short-video/

   3. Recompilez le code source du serveur d'application intégrant la console. Déployez-le puis redémarrez le service. Pour plus de détails, consultez la rubrique Intégration côté serveur.

      # Go to the root directory of the project in CLI and run the compilation and packaging command. If the AppServer is running, we recommend that you stop the service and then repackage the source code.
      mvn clean package -Dmaven.test.skip=true
      # After the source code is packaged, the sdk-api-0.0.1-SNAPSHOT.jar file is generated in the target directory that is in the root directory of the project.
      # Go to the directory of the JAR package in CLI, deploy the JAR package, and then start the AppServer.
      nohup java -jar sdk-api-0.0.1-SNAPSHOT.jar &

      Remarque

      La mémoire libre disponible sur votre instance ECS achetée peut être limitée. Si vous souhaitez recompiler et déployer le code source du serveur d'application, utilisez les commandes

      jps

      et

      kill

      pour arrêter le service. Exécutez ensuite les commandes

      mvn

      et

      java

      pour recompiler le code dans un fichier JAR et le déployer. À défaut, l'empaquetage pourrait échouer en raison d'un manque de mémoire.

   4. Saisissez l'endpoint du serveur d'application de vidéos courtes dans un navigateur pour accéder à la page web de la console, par exemple http://<Public IP address of the ECS instance>:8080/resource/index.html ou http://Domain name/resource/index.html.