Creación de una aplicación basada en Spotify utilizando Nuxt.js

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • SmashingConf Friburgo 2024

  • Índice
    1. Requisitos
      1. Tabla de contenido
    2. Planificando nuestra aplicación
    3. Configurando y creando nuestro proyecto
      1. Instalar Nodejs
      2. instalar git
      3. Regístrate en GitHub
      4. Instalar y configurar Heroku
      5. Crear aplicación Nuxt
      6. Instalar Redis
      7. Regístrese para obtener una cuenta de desarrollador de Spotify
    4. Construyendo nuestra capa API
      1. software intermedio

    Con Spotify, el aprendizaje automático y las redes sociales se han vuelto musicales. Con su aplicación, tus amigos pueden comprobar lo que estás tocando. ¿Qué pasaría si el resto de Internet también pudiera experimentar su algoritmo? En este tutorial, aprenderá a crear su propia aplicación para compartir lo que está escuchando en Spotify usando Vue.js y Nuxt.

     

    Todos hemos oído hablar de Spotify. Lanzada en 2008, la aplicación ofrece millones de pistas de varios artistas legendarios y futuros. Te permite crear una lista de reproducción, seguir a otras personas o elegir una lista de reproducción según tu estado de ánimo.

    Pero hoy tomemos la aplicación desde otra perspectiva. Creemos una aplicación web renderizada del lado del servidor de dos páginas con un componente "Reproduciendo ahora en Spotify". Lo guiaré a través de todos los pasos para crear una aplicación del lado del cliente, crear y conectarse a una API de servidor, así como también conectarse a servicios API externos.

    Nuestro proyecto se construirá utilizando los ecosistemas Node.js y npm, Github para almacenar nuestro código, Heroku como nuestro host, Redis de Heroku para nuestro almacenamiento y la API web de Spotify. La aplicación y la API interna se construirán íntegramente utilizando el sistema de Nuxt. Nuxt es un marco de renderizado del lado del servidor que se ejecuta en Vuejs, Expressjs, Webpack y Babeljs.

     

    Este tutorial es moderadamente complejo, pero está dividido en secciones muy consumibles. Encontrará una demostración funcional en cherislistening.heroku.com .

    Resultado final creado con Nuxt.js, Redis y Spotify. ( Vista previa grande )

    Requisitos

    Este tutorial requiere conocimientos de HTML, CSS, Javascript (ES6) y cómo utilizar la línea de comandos o la terminal. Trabajaremos con Node.js y Vuejs ; Una comprensión básica de ambos será útil antes de comenzar este tutorial. También necesitarás tener instalado Xcode Tools si estás en MacOS.

    Si prefiere realizar ingeniería inversa, puede bifurcar el repositorio .

    Tabla de contenido

    1. Planificación de nuestra aplicación
      Presentaremos la funcionalidad esperada y una representación visual de lo que planeamos ver cuando hayamos terminado.
    2. Configuración y creación de nuestro proyecto
      Explicaremos cómo configurar una aplicación alojada en el servidor de Heroku, configurar la implementación automática desde Github, configurar Nuxt usando las herramientas de línea de comandos y poner en funcionamiento nuestro servidor local.
    3. Construyendo nuestra capa API
      Aprenderemos cómo agregar una capa API a nuestra aplicación Nuxt, cómo conectarnos a Redis y la API web de Spotify.
    4. Almacenamiento del lado del cliente y administración del estado
      Veremos cómo podemos aprovechar la tienda Vuex incorporada para mantener actualizado lo que se está reproduciendo. Configuraremos nuestras conexiones de datos iniciales con nuestra API.
    5. Construyendo las páginas y los componentes
      Echaremos un vistazo breve a cómo se diferencian las páginas y los componentes en Nuxt y construiremos dos páginas y un par de componentes. Usaremos nuestros datos para crear nuestra aplicación Now Playing y algunas animaciones.
    6. Publicación de nuestra aplicación
      Colocaremos nuestra aplicación en GitHub y la construiremos en el servidor de Heroku, autenticaremos y compartiremos con todos la música que estamos escuchando.

    Planificando nuestra aplicación

    El paso más importante antes de comenzar cualquier nuevo proyecto es planificar nuestros objetivos. Esto nos ayudará a establecer un conjunto de requisitos para lograr nuestros objetivos.

    • ¿Cuántas páginas hay?
    • ¿Qué queremos en nuestras páginas?
    • ¿Queremos que nuestro componente "Reproduciendo ahora" de Spotify esté presente en nuestras dos páginas?
    • ¿Queremos una barra de progreso para mostrar a los oyentes dónde nos encontramos en la canción?
    • ¿Cómo queremos que nuestras páginas estén distribuidas?

    Estos son los tipos de preguntas que nos ayudarán a redactar nuestros requisitos.

     

    Construyamos dos páginas para nuestra aplicación. Primero, queremos una página de destino con nuestro componente "Reproduciendo ahora". Nuestra segunda página será nuestra área de autenticación donde conectamos nuestros datos a Spotify. Nuestro diseño será muy minimalista, para mantener las cosas simples.

    Para nuestro componente "Reproduciendo ahora", planeemos mostrar el progreso de la pista como una barra, el nombre de la pista, el nombre del artista y la carátula del álbum. También queremos mostrar un estado alternativo que muestre la pista reproducida más reciente, en caso de que no estemos escuchando nada actualmente.

    Dado que estamos tratando con la API de Spotify, tendremos tokens especiales para acceder a los datos de nuestro sitio. Por motivos de seguridad, no queremos exponer estos tokens en el navegador. También solo queremos nuestros datos, por lo que queremos asegurarnos de que somos el único usuario que puede iniciar sesión en Spotify.

    El primer problema que nos encontramos en la planificación es que tenemos que iniciar sesión en Spotify. Aquí es donde entra en juego nuestro almacenamiento de caché de Redis. La API de Spotify permitirá conectar permanentemente su cuenta de Spotify a una aplicación con otro token especial. Redis es un servidor de estructura de datos en memoria de alto rendimiento. Dado que estamos tratando con un token, un sistema simple de almacenamiento de clave: valor funciona bien. Queremos que sea rápido para poder recuperarlo mientras nuestra aplicación aún se está cargando.

    Heroku tiene integrado su propio servicio de caché de Redis, por lo que al usar Heroku para nuestro servidor, host y almacenamiento, podemos administrar todo en un solo lugar. Con el beneficio adicional de la implementación automática, podemos hacer todo desde nuestra consola con comandos en la terminal. Heroku detectará el lenguaje de nuestra aplicación a partir de nuestro push y lo construirá e implementará sin mucha configuración.

    Configurando y creando nuestro proyecto

    Instalar Nodejs

    Obtenga el paquete adecuado para su sistema operativo aquí: https://nodejs.org/en/download/

    $ node --version v10.0.1

    instalar git

    Siga las instrucciones para su sistema operativo aquí: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

    $ git --version git version 2.14.3 (Apple Git-98)

    Regístrate en GitHub

    Siga las instrucciones aquí: https://github.com/join y https://help.github.com/articles/set-up-git/ .

    Cree un repositorio: https://help.github.com/articles/create-a-repo/

    Clonar el repositorio: https://help.github.com/articles/cloning-a-repository/

    Llamé al mío "cherislistening". Así es como se ve mi clon:

    $ git clone https://github.com/cherscarlett/cherislistening.gitCloning into `cherislistening`...remote: Counting objects: 4, done.remote: Compressing objects: 100% (4/4), done.remove: Total 4 (delta 0), reused 0 (delta 0)Unpacking objects: 100% (4/4), done.$ cd cherislistening/

    Instalar y configurar Heroku

    Regístrese en Heroku aquí: https://signup.heroku.com/

     

    Descargue e instale la interfaz de línea de comandos (CLI): https://devcenter.heroku.com/articles/heroku-cli#download-and-install

    Necesitaremos iniciar sesión y crear nuestra aplicación, además de configurar algunas variables de configuración. Llamé a mi aplicación "cherislistening". También puedes omitir el -acomando y Heroku te dará un nombre generado aleatoriamente. Siempre puedes cambiarlo más tarde. La URL de tu aplicación será https://APPLICATION_NAME.herokuapp.com.

    Nuxt requiere alguna configuración específica para compilarse y ejecutarse correctamente, por lo que las agregaremos ahora para eliminarlas.

    $ heroku –version heroku/7.19.4 darwin-x64 node-v11.3.0

    ​$ heroku login heroku: Press any key to open up the browser to login or q to exit: Logging in… done Logged in as [email protected]

    $ heroku create -a cherislistening

    ​$ heroku config:set CLIENT_URL=https://cherislistening.herokuapp.com API_URL=/ HOST=0.0.0.0 NODE_ENV=production NPM_CONFIG_PRODUCTION=false Setting CLIENT_URL, API_URL, HOST, NODE_ENV, NPM_CONFIG_PRODUCTION and restarting ⬢ cherislistening… done, v1 API_URL: / CLIENT_URL: https://cherislistening.herokuapp.com HOST: 0.0.0.0 NODE_ENV: production NPM_CONFIG_PRODUCTION: false

    Vaya al panel de Heroku y haga clic en su aplicación recién creada. En la pestaña 'Implementar', conéctese a su cuenta de Github, seleccione el repositorio que clonó y habilite las implementaciones automáticas desde la rama Master.

    Github seleccionado en el panel de Heroku ( vista previa grande )
    Selección de repositorio en Github ( vista previa grande )
    Configuración de implementación automática con Github ( vista previa grande )

    Crear aplicación Nuxt

    Usaremos npx para crear nuestra aplicación Nuxt. Npm es un gran ecosistema para administrar paquetes Node.js, pero para ejecutar un paquete, debemos instalarlo y agregarlo a nuestro archivo package.json . Esto no es muy útil si queremos ejecutar un solo paquete una vez y no es realmente necesario instalar algo. Esto hace que npx sea adecuado para ejecutar paquetes que componen árboles de archivos, agregar textos estándar e instalar los paquetes que necesita durante la ejecución.

    $ npx --version 6.4.1

    npx se incluye de forma predeterminada en npm 5.2.0+, por lo que se recomienda encarecidamente que actualicemos npm en lugar de instalar npx globalmente. Si acaba de instalar una versión nueva de node.js, debería tener npm y npx actualizados.

    El equipo de Nuxt.js ha creado una herramienta de andamiaje que le dará a su aplicación la estructura básica necesaria para ejecutarse. Asegúrate de estar en la carpeta de tu nuevo proyecto antes de ejecutar el comando. Fanfics en Español

    $ npx create-nuxt-app npx: installed 407 in 5.865s Generating Nuxt.js project in /Users/cstewart/Projects/personal/tutorials/cherislistening ? Project name cherislistening ? Project description A Spotify Now Playing App ? Use a custom server framework none ? Choose features to install Prettier, Axios ? Use a custom UI framework none ? Use a custom test framework none ? Choose rendering mode Universal ? Author name Cher Scarlett ? Choose a package manager npm

    El aviso de npm creó un archivo de bloqueo como package-lock.json . Deberías confirmar este archivo.

     

    Para empezar:

    npm run dev

    Para construir y comenzar a producir:

    npm run buildnpm start

    El aviso de npm creó un archivo de bloqueo como package-lock.json . Deberías confirmar este archivo.

    Para empezar:

    npm run dev

    Para construir y comenzar a producir:

    npm run buildnpm start

    Cada carpeta dentro del andamio viene con un archivo README . Este archivo le brindará los conceptos básicos sobre cómo funciona la carpeta y si es necesaria o no. Hablaremos sobre las carpetas que usaremos a medida que lleguemos a ellas en el tutorial.

    .nuxt/assets/|___README.mdcomponents/|___Logo.vue|___README.mdlayouts/|___default.vue|___README.mdmiddleware/|___README.mdnode_modules/pages/|___index.vue|___README.mdplugins/|___README.mdstatic/|___favicon.co|___README.mdstore/|___README.md.gitignore.prettierrcLICENSEnuxt.config.jspackage-lock.jsonpackage.jsonREADME.md

    Necesitaremos realizar un cambio en package.json para que cuando implementemos en Heroku, se ejecute nuestro proceso de compilación. En "scripts", agregaremos "heroku-postbuild": "npm run build". No olvides agregar una coma después de la línea anterior del objeto.

    "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "heroku-postbuild": "npm run build" },

    paquete.json

    Si ejecuta npm run dev y accede a https://localhost:3000en su navegador, debería ver la aplicación scaffolded ejecutándose:

    Estado inicial de la aplicación Nuxt después del scaffolding ( vista previa grande )

    Instalar Redis

    Abra una nueva terminal o pestaña de línea de comando y cambie los directorios (cd) a la carpeta principal de su proyecto. Descargue redis y ejecute make. Si está en Windows, deberá consultar https://github.com/MicrosoftArchive/redis/releases .

    $ cd ../$ wget https://download.redis.io/releases/redis-5.0.3.tar.gz$ tar xzf redis-5.0.3.tar.gz$ cd redis-5.0.3$ sudo make installcd src /Library/Developer/CommandLineTools/usr/bin/make install

    Sugerencia : es una buena idea ejecutar "hacer prueba".

    INSTALL installINSTALL installINSTALL installINSTALL installINSTALL install$ redis-server --versionRedis server v=5.0.3 sha=00000000:0 malloc=libc bits=64 build=bfca7c83d5814ae0$ redis-server --daemonize yes

    Eso iniciará nuestro servidor Redis como proceso en segundo plano y podremos cerrar esta pestaña. El servidor redis local se ejecutará en https://127.0.0.1:6379/.

    En nuestra pestaña con nuestro proyecto en ejecución, escriba Ctrl+ Cpara cerrar el servidor. Necesitaremos instalar un paquete de Redis para el nodo y aprovisionar nuestra instancia de Heroku Redis.

    $ npm install async-redis --savenpm WARN [email protected] requires a peer of eslint@=3.14.1 but none is installed. You must install peer dependencies yourself.+ [email protected] 5 packages from 5 contributors and audited 14978 packages in 7.954sfound 0 vulnerabilities$ heroku addons:create heroku-redisCreating heroku-redis on ⬢ cherislistening... freeYour add-on should be available in a few minutes.! WARNING: Data stored in hobby plans on Heroku Redis are not persisted.redis-metric-84005 is being created in the background. The app will restart when complete...Use heroku addons:info redis-metric-84005 to check creation progressUse heroku addons:docs heroku-redis to view documentation

    Debido a que utilizamos una cuenta de hobby, no tenemos una copia de seguridad de nuestros datos. Si es necesario reiniciar nuestra instancia, necesitaremos volver a autenticarnos para obtener una nueva clave. Nuestra aplicación también dormirá en la cuenta gratuita, por lo que algunas visitas iniciales serán un poco lentas, mientras la aplicación se "desperta".

     

    Nuestra nueva aplicación estará disponible en https://cherislistening.herokuapp.com/ , donde "cherislistening" es el nombre que hayas asignado a tu aplicación Heroku.

    Página estacionada predeterminada para nuestra nueva aplicación Heroku ( vista previa grande )

    Regístrese para obtener una cuenta de desarrollador de Spotify

    Esto requiere una cuenta de Spotify. Tenga en cuenta que cada uso de la API de Spotify debe cumplir con las pautas de su marca .

    Cree una ID de cliente en https://developer.spotify.com/dashboard/applications .

    Tome el ID del cliente y el Secreto del cliente , que puede encontrar si hace clic en la tarjeta verde en los detalles de su nueva aplicación, y expórtelos a Heroku como variables de configuración. ¡Mantenlos seguros y en secreto! Si cree que el secreto de su cliente ha sido expuesto, puede obtener uno nuevo, pero también deberá actualizar la configuración de su aplicación.

    ¡Nunca comparta su ID de cliente ni sus tokens secretos de cliente! ( Vista previa grande )

    $ heroku config:set CLIENT_ID=CLIENT_ID CLIENT_SECRET=CLIENT_SECRETSetting CLIENT_ID, CLIENT_SECRET and restarting ⬢ cherislistening... done, v3CLIENT_ID: CLIENT_IDCLIENT_SECRET: CLIENT_SECRET

    En la parte superior derecha del panel de la aplicación, hay un botón de Configuración. Haga clic en eso y agregue dos URL de devolución de llamada para incluirlas en la lista blanca. Necesitará una URL de devolución de llamada local y otra para su servidor de producción (la URL de Heroku que obtuvimos durante la configuración).

    URL de devolución de llamada incluidas en la lista blanca en el panel de Spotify ( vista previa grande )

    Spotify tiene documentación para desarrolladores fantástica , incluida una excelente interfaz de referencia para probar puntos finales. Necesitaremos obtener nuestra ID de usuario para guardarla en nuestras variables de configuración, así que hagámoslo con Obtener perfil de usuario actual . Obtenga un token de autenticación desde su consola, seleccionando el alcance privado de lectura del usuario. Haga clic en "Pruébelo" y en la columna de la derecha busque su ID. Usaremos este identificador para asegurarnos de que nadie más pueda iniciar sesión en nuestra aplicación.

    $ heroku config:set SPOTIFY_USER_ID=SPOTIFY_USER_ID Setting SPOTIFY_USER_ID and restarting ⬢ cherislistening... done, v4 SPOTIFY_USER_ID: SPOTIFY_USER_ID

    Como comentamos, tendremos datos que no queremos que se expongan al público. Dos de ellos clientIdnos clientSecretlos proporcionó Spotify, y otro que Heroku exportó para que accedamos a nuestro caché de Redis en el servidor. También necesitaremos aprovecharlos para nuestro desarrollo local.

     

    $ heroku config=== cherislistening Config VarsAPI_URL: /CLIENT_URL: https://cherislistening.herokuapp.comHOST: 0.0.0.0NODE_ENV: productionNPM_CONFIG_PRODUCTION: falseREDIS_URL: REDIS_URLSPOTIFY_CLIENT_ID: SPOTIFY_CLIENT_IDSPOTIFY_CLIENT_SECRET: SPOTIFY_CLIENT_SECRETSPOTIFY_USER_ID: SPOTIFY_USER_ID$ touch .env

    Transferiremos las credenciales que Heroku devolvió en nuestra terminal a nuestro nuevo archivo, .env , y convertiremos la URL de nuestro cliente en nuestro servidor local, https://localhost:3000/. También necesitaremos hacer que nuestra URL de Redis apunte a nuestra instancia local, que de forma predeterminada es redis://127.0.0.1:6379. Git ignorará este archivo.

    CLIENT_URL=https://localhost:3000/REDIS_URL=redis://127.0.0.1:6379SPOTIFY_CLIENT_ID=SPOTIFY_CLIENT_IDSPOTIFY_CLIENT_SECRET=SPOTIFY_CLIENT_SECRETSPOTIFY_USER_ID=SPOTIFY_USER_ID

    .env

    Para acceder a la configuración en nuestro servidor local, necesitaremos actualizar la configuración de nuxt. Agregaremos otro elemento a nuestra matriz de módulos: @nuxtjs/dotenv. También necesitaremos importar dos de las variables que necesitaremos disponibles en el lado del cliente de nuestra aplicación. Agregaremos un objeto env después de los módulos.

    /* ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/dotenv' ], env: { spotifyId: process.env.SPOTIFY_CLIENT_ID, clientUrl: process.env.CLIENT_URL }

    nuxt.config.js

    Construyendo nuestra capa API

    software intermedio

    Nuxt tiene dos métodos separados para ejecutar código del lado del servidor.

    En un componente de archivo único (SFC), tiene acceso a la propiedad middleware , que corresponde con la carpeta middleware en su scaffolding. El inconveniente de este middleware para nuestro caso de uso es que, si bien se ejecutará en el lado del servidor cuando su página se cargue o actualice, se ejecutará en el lado del cliente una vez que su aplicación esté montada y cuando navegue con las rutas de nuxt.

    La otra opción es la que estamos buscando. Crearemos nuestro propio directorio y lo agregaremos como serverMiddleware a nuestra configuración. Nuxt crea su propia instancia expresa, por lo que podemos escribir middleware registrado en su pila que solo se ejecutará en el servidor. De esta manera, podemos proteger nuestros datos privados de la explotación. Agreguemos una apicarpeta e index.js para manejar nuestros puntos finales de API.

    $ mkdir api $ touch api/index.js

    A continuación, necesitaremos agregar nuestro directorio a nuestra configuración para que se registre cuando iniciemos nuestro servidor. Abramos el archivo nuxt.config.js en la raíz de nuestra aplicación. Este archivo nos proporciona nuestro HTML head, además de conectar cualquier cosa a nuestro cliente en el momento de la compilación. Puede leer más sobre la configuración en los documentos .

    Agregaremos nuestro directorio api a nuestro archivo de configuración,

     }, serverMiddleware: ['~/api'] }

    nuxt.config.js

    Mientras nos desarrollamos, nuestros cambios requerirán reconstrucciones y reinicios del servidor. Como no queremos tener que hacer esto manualmente, nuxt instala nodemon por nosotros, que es una herramienta de “recarga en caliente”. Esto solo significa que reiniciará el servidor y reconstruirá nuestra aplicación cuando guardemos nuestros cambios.

    Dado que agregamos nuestra API a serverMiddlewarela de Nuxt, necesitaremos agregar nuestro directorio al archivo config. Lo agregaremos watcha nuestro objeto de compilación y agregaremos la ruta relativa desde la raíz.

     */** *** Build configuration* **/* build: { watch: ['api'], /* ** You can extend webpack config here */ extend(config, ctx) {} }, serverMiddleware: ['~/api'],

    nuxt.config.js

    También necesitaremos cambiar nuestro script de desarrollo en package.json para reiniciar el servidor. Necesitaremos hacerlo nodemon --watch api --exec "nuxt"":

    ""scripts"": { ""dev"": ""nodemon --watch api --exec ""nuxt"""" 




    Tal vez te puede interesar:

    1. Hacer un Polyfill completo para el elemento de detalles HTML5
    2. Más allá del navegador: de aplicaciones web a aplicaciones de escritorio
    3. Creación de un detector de habitaciones para dispositivos IoT en Mac OS
    4. Cómo crear una API de Node.js para Ethereum Blockchain

    Creación de una aplicación basada en Spotify utilizando Nuxt.js

    Creación de una aplicación basada en Spotify utilizando Nuxt.js

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX SmashingConf Friburgo 2024 Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-creacion-de-una-aplicacion-basada-en-spotify-utilizando-nuxt-974-0.jpg

    2024-05-20

     

    Creación de una aplicación basada en Spotify utilizando Nuxt.js
    Creación de una aplicación basada en Spotify utilizando Nuxt.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20