Curso de Wes Bos: Javascript30.
Al ser el primer proyecto del curso, también sirve para pillarle el estilo a Wes y ver cómo explica, y la verdad que estoy encantada.
Esta es mi forma de huir del “tutorial hell”, porque si sólo me limitara a hacer el proyecto en JS puro, nunca sabría a ciencia cierta si lo podría haber construido yo solita desde el principio.
Planificación del proyecto
Creo firmemente que para que un proyecto tenga éxito, hay que dejar bien atada la planificación, así que vamos a ello.
1. Crear el esqueleto HTML y darle estilo con CSS
2. Añadirle lógica de programación con TypeScript (en adelante, TS). Aquí voy a detallar las características (en inglés, features) que debe tener la app. Para eso utilizo una herramienta muy chula, whimsical.
Features
Primeros pasos
Empezamos creando el esqueleto (en inglés, scaffolding) de cualquier proyecto en Angular y subiéndolo a GitHub.
Repositorio: https://github.com/Ro008/angular-drum-kit
Construcción del HTML y parte del CSS
1. Eliminamos todo el contenido que viene por defecto en el app.component.html, porque no lo vamos a necesitar.
2. Añadimos una carpeta con los diferentes sonidos de cada instrumento y añadimos también la imagen de fondo de nuestra app.
3. Creamos un div gigante en el que englobaremos toda la web, por eso lleva la clase de page.
4. Creamos un div que englobará todas las teclas, por eso le damos la clase de keys.
Dentro de ese div creamos otro contenedor (en inglés, container) donde irá una tecla y su sonido. A ese container le añadimos un atributo inventado, llamado data-key.
Para inventarnos un atributo, sólo necesitamos ponerle la palabra data- delante seguida de lo que queramos. En este caso, una tecla (en inglés, key).
En cuanto al valor, lo sacamos de su equivalente en número, porque cada tecla del teclado tiene un equivalente. Wes construyó su propia web para encontrar el equivalente al instante. Es la ayudita que he usado para este proyecto.
No sé tú, pero yo no conocía la etiqueta <kbd>. Resulta que es una etiqueta para indicar que esa tecla (lo suyo es que pongas una letra dentro, como la A), va a servirle al usuario para que interaccione de algún modo, situándola al mismo nivel de las etiquetas interactivas, como el <input>.
5. Incluimos cada pista de sonido dentro de un elemento de <audio>. A cada uno le damos un atributo data-key que lo hacemos coincidir con cada una de las teclas que vamos a utilizar. Con esto, posteriormente, vincularemos el sonido clap, por ejemplo, con la letra A.
Hecho esto, he añadido un poco de estilo en el app.component.scss y estilos globales en el styles.scss. El margin: 0 al body es porque sino la imagen de fondo no ocupaba el 100% de la pantalla y me daba mucha rabia 
.
Aquí el commit con todos los cambios.
Así está la UI de nuestra app de momento:
Dando estilo a las teclas
1. En el app.component.html, añadimos una clase de CSS llamada playing. La añado sólo a la tecla A para probar.
Vamos a hacer varios cambios en el app.component.scss:
2. Cambiamos la tipografía por una más molona.
3. El contenedor de las teclas (.keys), lo centramos y repartimos todas las teclas a lo largo de él.
4. Creamos una clase aplicable a cada tecla (.key). Aquí lo más importante es la propiedad transition, que por sí sola no hace nada, pero cuando le aplicamos otra clase a un elemento que ya tenga la clase key, las propiedades de la otra clase no se aplicarán de golpe, sino progresivamente durante 0.02 segundos.
Esa otra clase será la clase playing.
Aquí el commit y el resultado final de nuestra UI:
Añadiendo la lógica de programación y refactorizando la template
Cambios en el app.component.html:
1. Elimino el atributo data-key de las teclas, porque pensé (equivocadamente) que no lo iba a necesitar. Posteriormente te explicaré el por qué de mi error.
2. Añado un event listener directamente al document, el elemento más alto en la jerarquía del DOM.
Al event listener le pido que escuche lo que suceda cuando el usuario presione una tecla (en inglés, keydown) y lo vinculo a un método que llamo onKeydown, para gestionar lo que sucederá cuando se pulse una tecla.
3. Quito la clase playing porque ya he comprobado que funciona.
4. Sustituyo el atributo data-key de los elementos de <audio> por su keyCode, porque me resulta más fácil de capturar.
Hasta aquí los cambios en el app.component.html. Pasamos ahora a añadir verdadera lógica de programación 
.
5. En el app.component.ts, capturo el momento en el que el usuario pulsa una tecla y la vinculo a su sonido correspondiente. Para eso selecciono todos los elementos de audio e itero sobre cada uno de ellos, comprobando si el keyCode de la tecla pulsada coincide con el valor del atributo data-keyCode de algún audio. Si coincide, entonces le damos al play 
.
Esta es una de las cosas que he aprendido con este proyecto, que hay ciertos elementos HTML, como el <audio>, que tienen métodos asociados muy útiles e intuitivos, como el play() en este caso.
Aquí el commit con los cambios.
Al hacer estos cambios, me di cuenta de que sí que necesitaba los keyCodes de las teclas para poder buscar su equivalente entre los elementos de audio, así que los vuelvo a añadir. Pero ningún problema con dar un pasito pa'lante y un pasito pa'trás 
.
Rebobinando el sonido y añadiendo un efecto visual
Con la propiedad currentTime, conseguimos el "efecto metralleta", porque podemos decirle que el sonido vuelva al segundo que queramos con cada pulsación de una tecla. Así que si le damos el valor de "0", volverá al principio.
Para añadirle el efecto visual cuando pulsamos una tecla, selecciono cada tecla y le aplico la clase playing.
Otra de las cosas que he aprendido es el event listener "transitionend", que básicamente detecta la clase de CSS que esté siendo aplicada de manera progresiva, porque tiene un "temporizador", y hace algo (lo que le pidamos) cuando haya terminado de aplicarse. Por eso, cuando termina de aplicarse la clase playing (recordemos que tarda 0.02 segundos) le pedimos que la quite. Y así es como conseguimos el efecto 
.
Resultado final
¡Nuestra app está lista! Puedes verla aquí.
Me he pasado horas y horas buscando la mejor manera de publicar un proyecto de Angular para que se vea "en acción" en GitHub, pero hay algún tipo de bloqueo de los sonidos, que no sé quién lo causa, si Angular o Github, pero el caso es que no se oyen.
Sí que se oyen si subo el proyecto en vanilla JS.
Cómo subir un proyecto de Angular a GitHub Pages
Como digo, me pasé horas, repartidas en varias tardes, intentando subir mi proyecto para que se viera correctamente como una app, pero sólo lo conseguí en vanilla JS, no en Angular. Aquí puedes ver el chorro de commits fallidos. De hecho, si inspeccionas la página verás que github no puede encontrar los archivos, lo cual es raro, raro.
| Elements Console Sources Performance Network ...
GET https://ro008.github.io/assets/sounds/clap.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/hihat.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/kick.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/openhat.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/boom.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/ride.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/tom.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/snare.wav net::ERR_ABORTED 404
GET https://ro008.github.io/assets/sounds/tink.wav net::ERR_ABORTED 404
He intentado ajustar las rutas y hacer otras mil historias, pero nada chica, que no funciona 
.
Pero al menos he conseguido que se vea, y aquí te cuento cómo:
1. Situáte con tu terminal (yo uso Git Bash) en la carpeta de tu proyecto de Angular.
2. Escribe el comando: ng build
Ten a mano el repositorio de github de tu proyecto.
3. Crea una branch en tu proyecto (yo uso github desktop) llamada github-pages, por ejemplo, porque ese nombre tiene sentido.
4. Cambia a esa branch.
5. Desde vsCode, elimina todo el contenido del proyecto excepto la carpeta dist.
6. Saca los archivos de la carpeta dist fuera de cualquier carpeta, al nivel más alto (a la raíz, en inglés, root del proyecto)
7. En el archivo de HTML (que tiene que llamarse SÍ o SÍ "index.html") cambia el tag <base> por algo así:
<base href="https://ro008.github.io/pipes-visual-guide/">
adaptado al nombre de tu repositorio, claro.
8. Haz commit y push de tus cambios.
9. En tu repositorio, ve a settings, habilita las github pages y selecciona la branch "github-pages".
10. Guarda ¡y listo! Con esto ya debería funcionar, aunque puede tardar unos 5 minutos para que el link esté activo (mientras tanto dará error y pensarás que has hecho algo mal, pero ten fe! 
).
THE END!
¡Y hasta aquí este proyecto para practicar con Angular! Espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios!
Recursos utilizados
Una sección para tener a mano todos los recursos utilizados para desarrollar el proyecto.
- data attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
- buscador rápido sobre códigos del teclado: https://keycode.info/
- generador de box shadow: https://html-css-js.com/css/generator/box-shadow/
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 
.
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win 
.
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Otros artículos que pueden interesarte