Curso Ionic 4

Módulo 1: Qué es Ionic

Vide 2: Qué hay de nuevo de Ionic 4
- Aquí hay una infografía de cómo funciona Ionic

Video 3: Instalar Ionic y Templates Básicos

- Primero hay que instalar Node y Npm
- Para instalar Ionic solo hay que colocar esto:

npm install -g ionic

- Para saber si esta instalado solo colocamos la palabra Ionic

- El comando ionic start sirve para inicializar una aplicacion de Ionic
- Vamos a escoger el nombre y va hacer platzi-music
- En los template escogemos blank
- Podemos ver el estado de la aplicacion con el comando ionic serve esto lo
lanza al navegador para ver que estamos desarrollando y automáticamente
se recarga si hay cambios
- Con el comando ionic start --list nos sale todos los templates que hay
 - Si queremos ya usar ya un template colocamos esto ionic start platzi-
prueba blank donde se le coloca el nombre y de ultimo el template

Video 4: Instalación de capacitor y uso en Android Studio

- Vamos a instalar el capacitor de esta manera:

npm install --save @capacitor/core @capacitor/cli --save-exact

- El @capacitor/core sirve para empaquetar nuestro proyecto a mobile y el

@capacitor/cli es para ejecutar ciertos comandos
- Para ver la version instalada es con npx cap --version
- Para integrar a nuestro proyecto el capacitor debemos de colocar esto npx
cap init y sale cierto cuestionario es el nombre de la App, el Package Id es
el que va aparecer en la URL de las tiendas vamos a colocar
platzi.music.com, escogemos npm
- Con capacitor vamos añadir el Android y IOs y el paquete ya depende del
tipo de SO, comencemos añadiendo Android de esta manera npx cap add
android, pero antes debemos de crear una carpeta www que es el
compilador de nuestro proyecto y es requerido ya que lo usa el capacitor
para crearlo solo colocamos ionic build, luego si podemos ejecutar la
dependencia de android que es npx cap add android, ahora para abrir ese
proyecto con android studio solo debemos de ejecutar npx cap open
android
- Luego vamos a dar click en el botón de play y luego click donde dice Create
New Virtual Device, click en Next, Luego click en Download o
seleccionamos en alguna versión, Luego colocamos un nombre del
dispositivos y Finish
- El comando para crear el proyecto de producción es con ionic build --prod

Video 6: Sincronizar nuestro proyecto con los emuladores

- Vamos a tener dos pestañas una es para ejecutar el ionic serve con el que
vemos el estado de la aplicación y el otro es para ejecutar comando
- Vamos abrir el proyecto en visual code
- Cuando haya un cambio en el código, ejecutamos primero un ionic build y
luego un npx cap sync que sirve para actualizar en android y iOS
- Luego le damos play al Android Studio
- Otra manera mas facil seria ionic build && npx cap sync
- Hay un comando que nos sirve para actualizar solo cosas pequeñas como el
Html,Css y Javascript y es este npx cap copy

Modulo 2: Componentes basicos de Ionic

Video 1: El componente slide
- Vamos a ir al codigo y en el archivo home.page.html vamos a colocar este
codigo:
- El componente padre es el que dice ion-slides y contiene 3 componentes
hijos que seria los 3 slides y son ion-slide
- Con el atributo pager=”true” es para tener los puntos de slide
- Para usar iconos en Ionic debemos de usar un componente de nombre ion-
icon y el atributo name es el nombre del icono, entonces en la pagina de
ionicons.com solo sacamos el nombre del icono y listo
- El atributo padding es para dar el margen de color verde
- En el archivo home.page.scss colocamos este código y con la clase de
nombre .swiper-slide controlamos todos los slide
- Ionic ya trae por defecto unas variables de colores que se encuentran en la
carpeta variables.scss
- Para modificar la transición de los slide primero en el slide padre colocamos
un propertyBinding de nombre options y va a contener una variable de
nombre slideOpt así:

- Luego en el archivo home.page.ts vamos a inicializar o definir la variable

slideOps y le decimos con el initialSlide que inicie con el primer slide, luego
 con slidePerView significa una vista por slide, el centerSlides es para
centrarlos y el speed es la velocidad de cada slide

Video 2: Css y Custom Properties de los componentes de ionic

- En el archivo home.page.css hay algo como --background y ese doble
guion son propiedades custom de css predefinidas y nos indica que uno
puede modificar el background solo con esa propiedad y no de manera
directa, en los slides hijos no existen esas custom properties por eso lo
hacemos de manera directa
- Ahora vamos a modificar ese color de --background y primero copiamos el
color, luego pegamos la variable --ion-color-success, después vamos a
buscar esa variable en el archivo variables.scss y reemplazamos el color
que tiene por el que copiamos

Video 3: Slide Dinámicos

- Como los slides hijos reciben una estructura similar vamos entonces a crear
un slide genérico, entonces borramos los dos slides y dejamos solo uno, en
el home.page.html de esta manera:

- En nuestro home.page.ts vamos a colocar este código que es la definición

de los slides y en objeto
Video 4: Angular Router e Ionic Storage
- Vamos a mover todo el código de los slides para otro componente y en el
home colocamos el código principal
- Vamos a crear otro componente de nombre intro de esta manera:

ionic generate page intro

- Primero copiamos el código de home.page.ts y lo pegamos dentro del

intro.page.ts
- Tambien copiamos todo el codigo de home.page.html y lo pegamos del
intro.page.html
- Luego copiamos todo el código de home.page.scss y lo pegamos del
intro.page.scss
- Ahora en la ruta localhost:8100/home esta vacio y la ruta
localhost:8100/intro van a tener los slide
- En el intro.page.html vamos a crear un evento click de nombre finish() de
esta manera:

- Vamos al intro.page.ts e importamos el Módulo Router de esta manera:

 - Luego vamos a crear el el método finish() que solo tiene una navegación
hacia un componente, pero en el constructor debemos de inyectar el módulo
Router, de esta manera:

- Vamos a crear un flag que es una simple variable en el cual nos sirva para
que cuando el usuario ya haya visto los slides que es un mini tutorial no le
aparezca nunca más. Para eso vamos a usar ionic storage que sirve para
cualquier dispositivo y navegador, entonces para instalarlo es así:

npm install --save @ionic/storage

- En el archivo intro.page.ts vamos a importar el módulo de Storage de esta

manera:

- En el constructor debemos de inyectar el storage de esta manera:

- Luego en el archivo app.module.ts vamos a importar ese Módulos así:

- Luego en el import vamos a colocar esto:

- Dentro del método finish() vamos a colocar al storage diciéndole que si ya

se mostró el intro no lo muestre más y se guardó en el IndexedDB del
navegador

Video 5: Controlar la navegación con Guards

- Vamos a crear un guard de esta manera:

ionic generate guard guards/intro

- El guard debe cumplir si o si con una funcion principal y es CanActivate
- En el archivo intro.guard.ts vamos a colocar este codigo:

- Implementamos el CanActivate y lo importamos en el @angular/router

- Vamos a ir a app.routing.module.ts y colocamos el CanActivated debajo
del Path - home con el IntroGuard y esto quiere decir que para ir al path -
home debe de estar la variable IntroGuard en True y este es el codigo:

- En el intro.guard.ts lo que vamos hacer es importar el storage y router,

luego como el storage nos devulve una promesa entonces vamos a usar
async await para decirle que espere a que el metodo canActivate se ejecute
para continuar con el flujo de la aplicacion. Con el if lo que le decimos es si el
intro o mas bien isIntroShowed es un true entonces retorne un true, pero si
es lo contrario entonces que nos redirecciones al Tutorial o Intro, es decir
 que la variable isIntroShowed no sea un true entonces el intro nunca mas
nos va aparecer, pero si vamos directamente al la ruta de home estando en
la ruta de intro nos va a redireccionar al intro ya que con el CanActivated le
decimos que esa ruta esta bloqueada, es decir que para ir al home la
variable tiene que estar en true y es por eso que la condicion en ese caso es
verdadera, pero si no esta en true que nos rediriga al intro por eso al ir al
home de manera directa no nos va a dejar y es gracias al Guards del
metodo CanActivate y el de app.routing.module.ts

Video 6: Utilidades de CSS con Ionic

- Primero vamos a usar el comando ionic generate page login
- Si por ejemplo cambiamos el texto en el login.page.html nos va mostrar el
texto en el lado izquierdo, ahora para modificarlo podemos añadir un css
pero lo bueno es que Ionic ya nos trae por defecto algo llamado Css Utilities
que son propiedades de Css ya definidas entonces para centrar ese texto
solo añadimos esta clase:

- Otra forma seria sin utilizar el class y es de esta manera:

Video 7: Crear una página de login

- Vamos a usar un formulario reactivo
- Para eso en el login.module.ts vamos a importar el ReactiveForModule y
colocarlo en los imports de esta manera:

- Vamos a ir al login.page.ts y colocar este código:

- la variable de nombre loginForm y su tipo de datos es FormGroup que nos
permite mapear el código de Ts a Html
- En el constructor lo que hacemos es inyectar el FormBuilder que se
encarga de construir los campos en nuestro Html dinámicamente. Dentro del
constructor se debe declarar todos los campos a usar que son email y
password. El this.formBuilder.group es la declaracion de un grupo de
campos, el primero es colocar un FormControl que es un input y el va a
tener ciertas caracteristicas y son el primero que valor va a tener por defecto
en este caso es vacio con las dobles comillas, luego vamos a decirle que
validaciones son requeridas, el primero es que es un campo obligatorio y el
segun es una expresión para validar los campos si son correctos
 - En el login.page.html vamos a colocar esto:

- Como es un formulario reactivo se coloca entre corchetes el formGroup y el

nombre de la variable, luego se le pasa un evento y es ngSubmit que activa
una funcion de nombre loginUser() y por parametro le vasamos el valor de el
loginForm.value
- Con el componente ion-item es para que renderize todo lo que esté dentro
de él como si fuera una lista, dentro solo vamos a colcoar el componente ion-
label para colocar el nombre del input y colocamos el input como tal con un
nombre para que el loginForm lo reconozca
- Cuando vamos al formulario en el navegador para ver como quedo, vemos
que hay una línea roja para indicar que hay un error y si escribimos el código
bien entonces nos aparece una línea verde

Video 8: validar inputs del formulario de login

- Vamos a realizar estas modificaciones en el login.page.ts:

- El validation_messages es para colocar mensjes en la validacion de los

inputs
- Vamos a modificar el login.page.ts de esta manera:

- El componente ng-container es solo con un fin de no mostrar el codigo de

HTML es decir si no queremos usar por ejemplo un div o un p por ejemplo ya
que al dar click en inspeccionar de google chrome nos muestra esos tags
pero con el ng-content no lo muestra
- Primero con el *ngFor recorremos las validaciones y en div colocamos una
condicion que se trata de, si el campo email tiene algun tipo de error que se
trata del .hasError(validation.type) “y” a su vez el campo email este sucio o
mas bien el usuario alla escrito algun que aun no es valido entonces muestre
el mensaje que dce ojo!... que es con el .dirty “o” con que el usuario alla
 dado click en el input email y no escriba nada entonces que muestre el
mensaje de el campo es requerido gracias al .touch

Video 9: Envio del formulario

- Primero corregimos los errores de validacion login.page.ts ya que le
estamos diciendo que si tiene errores de validacion y esta sucio el input o a
sido tocado el input entonces muestre los mensajes y su correcion es este:

- El componente ion-footer es para colocar elementos que se colocan al final

de la pagina y vamos a colocar el boton de registrarse así:

- El expand=”full” es para expandir a lo ancho y alto el boton en el footer, el

shape=”round” es para que tenga los bordes redondos y el fill=”outline” es
para que solo tenga el color de succes en los bordes
- Antes de finalizar el form vamos a crear el boton de login así:

- El disabled le decimos que deshabilite el boton si no esta en estado valido ya

que tenemos el signo de negacion !
- Sin embargo en el archivo login.page.ts vamos a crear el metodo
loginUser() solo con el fin de que muestre las credenciales en el console
para verificar que todo este bien y es así:

Video 10: Servicio para validar credenciales

- En nuestro login.page.ts vamos a realizar un servicio falso para ver como
funciona y se va a llamar this.authService y el codigo es este:

- Vamos a crear el servicio de esta manera:

ionic generate service services/authenticate

- Cuando uno hace una peticion HTTP nos devuleve es una promesa o un
observable. En este caso vamos a usar una promesa en el servicio y es asi:

- Luego en el archivo login.page.ts vamos a importar nuestro servicio y es así:

- Vamos a usar un componente de nombre NavController que me sirve para

redireccionar, es decir que no vamos a usar el componente Router y lo
inyectamos en el constrcutor y se imorta tambien de esta manera:

- Entonces cuando nos logeamos de manera correcta nos va a redireccionar al

home

Video 11: Agregar Guards al login

 - Vamos a mostrar el mensaje de error de login y para eso colocamos este
cambio en el login.page.ts y añadimos dicha variable errorMessage como
interpolacion en el login.page.html de esta manera:

- Vamos a colocar un guard a nuestro login para que la aplicacion no le

pregunte otra vez el login al usuario y a su vez no se pueda ir al PATH de
login de manera directa de esta manera:

ionic generate guard guards/login

- En el login.guard.ts vamos a colocar esto:

- Donde le decimos si el usuaurio esta logeado pues nos coloque un true para
que pueda ir al home, pero si no esta logueado entonces que se rediriga al
home
- En el archivo app-routing.module.ts vamos a colocarle el LoginGuard para
indicarle que no puede ir al home si no esta logueado y a su vez si no se
mostro el intro y es de esta manera:

- En el login.page.ts vamos a colocar la variable Storgae e iniciarla en true

así:

Video 12: Crear una pagina de registro

- Vamos a crear un formulario reactivo del registro y es de esta manera:

ionic generate page registrer

- Ahora tenemos que hacer que el login vaya al registro y del registro vaya al
login
- En el boton de Click para registrarse dentro del login.page.html vamos a
colocar esto:

- Luego en el login.page.ts vamos a declarar la funcion goToRegister() de

esta manera:

- Copiamos todo el codigo de login.page.html y lo pegamos en

register.page.html pero vamos hacer unos cambios, el primero es borrar el
boton de registrar, segundo vamos a remplazar todos los loginForm por un
registerForm, tercero vamos añadir 2 inputs mas que son nombre y
apellido, luego le debemos de cambiar el formControlName de esos nuevos
inputs, de esta manera:

- Debemos de importar el ReactiveFormsModule en el register.module.ts y

tambien dentro del imports de esta manera:
 - Vamos a ir al register.page.ts y colocar este código que es similar al
login.page.ts:

Video 13: Navegacion entre login y registro

- En el archivo register.page.html vamos a colocar un header que es el boton
para regresar al login y es este codigo:

- Luego en el register.page.ts vamos a declarar el metodo goToLogin() de

esta manera:

- En el archivo authenticate.service.ts vamos a crear el metodo

registerUser() y tambien debemos de colocar el Componente de Storage
de esta manera:

- El metodo registerUser() nos devulve una promesa pero vamos a colocar un

retorn para que otro componente se encarge de la peticion. En el storage
vamos a crear otra variable que se llama user y va a contener los datos de
userData
- Tambien podemos encriptar el password en Base64 usando una funcion de
javascript y es btoa() este es un ejemplo:

- En el register.page.ts es el encargado de gestionar la peticion del metodo

registerUser() y lo que va hacer es redireccionar al login y al registrarse esto
se guarda en la memoria del navegador que podemos acceder a el en
IndexedDB

Video 14: Agregar el menu con el componente menu

- Vamos a crear primero la pagina de menu así:

ionic generate page menu

- En el archivo app-routing.module.ts vamos a borrar el PATH de home

porque vamos a navegar a través del menu es decir que va a ir a
localhost:8100/menu/home y por eso los guard van al menu porque no van
a proteger al home si no al menu que contiene el home de esta manera:

- Luego en el menu.module.ts vamos a especificarle que dicho PATH tiene un

hijo y es con children que va hacer el home, como el children puede tener
varios hijos o subcarpetas entonces se coloca como un array de esta
manera:

- Los menu por defecto no tiene header ni content, entonces los debemos de
borrar en el menu.page.html, peru si debe de tener un componente de
 nombre ion-split-pane que debe de contener dos cosas obligatorias el menu
y hacia donde se va a redireccionar el menu, así:

- Dentro del ion-router-outlet como atributo va el id que es para indicar que

es lo que se esta renderizando y el main que indica que es e contenido
principal, el contentId y el id deben de tener el mismo valor. El side=”end”
es para indicar que el menu se muestre a la izquierda
- el componente ion-toolbar es para poder colocar botones, el icon-only es
para decirle que solo va a tener icono y no texto. El closeMenu() es una
funcion para cerrar el menu cuando le demos click en el boton
- El ion-list sirve para encadenar items de arriba hacia abajo y poder generar
enlaces en esos items, entonces vamos a colocar dos items que son Home
y Settings
- En el home.page.ts debemos de incorporar nuestro menu de esta manera:

- El slot=”end” es para colocar el menu en el lado derecho

Video 15: Dar funcionalidad y estilos al menu

- Vamos a realizar una modificacion en el menu.page.html y es colocando el
slot=”start” para que el icono de la flecha aparesca al lado de la palabra
menu
- Vamos a programar la funcion closeMenu, entonces nos vamos al archivo
menu.page.ts y colocamos este codigo:

- Lo que hacemos con el menu es llamar al controlador y poder manipularlo,

que en este caso es poder cerrarlo
- Vamos a crear el cerrar sesion en el archivo menu.page.html de esta
manara:

- Luego vamos a ir a programar la funcion logout() en el menu.page.ts de

esta manera:

- Como la flag de nombre isUserLoggedIn esta en true podemos ir al home

entonces lo que nos toca eliminar esa flag del storage, es por eso que
colocamos el metodo remove

Video 16: Uso de componentes slide y opciones avanzadas

- Vamos a ir al home.page.html y colocamos este codigo:

- El ion-avatar sirve para colocar nuestras imagenes mas bonitas ya sean

redondas o cuadradas, en este caso van hacer circulos
- El ngIf para decirle que solo muestre imagenes si hay algo dentro de artists
y el ngFor es para recorrer los artists
 - Luego en el home.page.ts vamos a colocar la variable artists que es un
arreglo en el cual cada llave representa un Json de artistas
- Luego en el slideOps vamos a colocar una modificaciones que son, muestre
el inicio del slide a partir del segundo elemento y es con el initialSlide, el
segundo es que muestre solo cuatro elementos por cada slide y es con el
slidesPervie
- En el home.page.scss vamos a colocar esto para poder que se vea el texto

Modulo 3: Consumo y manejo de informacion con Ionic

Video 1: Consumiendo Api para llenar informacion de nuestros artistas
- Vamos primero a crear un servicio y es así:

ionic generate service services/platzi-music

- En el archivo plazi-music.service.ts vamos a colocar un metodo que hace la

peticion get hacia la api de artistas, de esta manera:

- Ionic tiene un conjunto de metodos que cada componente puede utilizar

dependiendo de la logica del componente, uno es de esos metodo es el
ionViewDidEnter() que se ejecuta cuando se accede de manera correcta a
la vista, se ejeucta el constructor correctemente y el html esta cargado, el
codigo va dentro de home.page.ts y es este:

- Lo que hace dentro del metodo ionViewDidEnter() es llamar al servicio que

creamos y desglosamos la promesa, entonces a la variable artists vamos a
pasarle todos los arreglos del albums que tiene la api
- Se deben de declarar los arrays de nombre songs y albums de tipo any
para que no presente ningún error y a su vez se debe de inicial en un array
vacío y al hacer esto seria un null los arrays, debe de ser por lo menos un
null para que muestre algo en el Html, debido a que si no se carga nada en
el Html nos genera un error porque el metodo ionViewDidEnter() no
funcionaria.
- En el home.page.ts vamos a colcoar esto:

Video 2: Pagina completa con artistas, canciones y albums

- Dentro de la carptea services vamos a crear un archivo de nombre
artists.json y vamos a colocar un Json de los artistas
- Luego vamos a ir al tsconfig.json y colocamos una variables mas que se
llama resolveJsonModule de esta manera:

- Con ese cambio le decimos que nos deje cargar archivos estaticos de json,
es decir archivos json que esten dentro de mi proyecto
- Vamos a ir al archivo platiz-music.service.ts y colocar este codigo:
 - Primero importamos el Json que creamos de nombre artists.json y le
colocamos un alias de nombre dataArtists luego creamos una funcion que
es getArtists() y retornamos los items del dataArtits

- Luego vamos a ir al archivo home.page.ts y colocar este codigo:

- primero dentro del servicio tenemos que llamar al metodo getArtists y

guardarlo en la variable artists, pero a su vez toca declarar la variable artists
como un arreglo vacio
- Luego en el home.page.html vamos a colocar la seccion de Artistas y es
así:

- Toca hacer unos cambios en el archivo home.page.scss y son estos:

- La clase .square-avatar es para que las imagenes de las canciones y

albums esten cuadradas, entonces por esos usamos el css properties de
Ionic, pero debemos de colocarlos en el home.page.html y es así:

Video 3: El componente modal y componente controller

- En el archivo home.page.ts vamos a colocar un evento en el tag que dice
ion-avatar y es así:

- Dentro del home.page.ts vamos a colocar la declaracion del metodo

showSongs y su logica de esta manera:

- En el modalController recibe un metodo para inicializar el modal que tiene

ciertas propiedas y son el component que especifica cual es el componente
que va a gobernar el modal, el componenteProps es el intermediario entre
el componente home y el componente del modal que es SongModalPage,
pero a su vez va a contener ciertas propiedades
- Luego vamos a ir al platzi-music.service.ts y creamos el metodo
getArtistsTopTracks que contiene un endpoint con el id del artista, las
mejores canciones que es el top-tracks y el pais que es colombia, de estam
manera:

- En el archivo home.page.ts vamos a imporat el ModalController y añadirlo

en el construtor de esta manera:

- Vamos a generar otro componente y es así:

ionic generate page songs-modal

- Ese componente lo vamos a importar al home.page.ts, así:

 - Tambien debemos de importarlo al app.module.ts de esta manera:

- Cuando demos click en cualquier artista nos va a redireccionar hacia otro

componente o otra vista

Video 4: Llenar el contenido del Modal

- En el archivo songs-modal.page.ts vamos a colocar este codigo:

- Ya sabemos que el metodo ionViewDidEnter() se ejecuta una vez el Html

cargue, el songs es la propiedad que creamos en el archivo home.page.ts
- En el archivo songs-modal.page.html vamos a colocar este codigo:

Video 5: Componente Footer y funcionalidad del Modal

- En el archivo home.page.html vamos a colocar esto:

- la propiedad color=”danger” es propia de ionic y se encuantra en

variables.scss, en la variable song tenemos un json vacio declarado en el
home.page.html entonces en el *ngIf le decimos si el json de nombre song
no tiene una propiedad de nombre name entonces muestre en footer el
mensaje de “Aquí aparecera nuetra cancion” pero si existe la propiedad
name entonces vamos a mostrar el nombre de la cancion
- En el home.page.ts vamos a colocar este codigo:

- Con el onDidDismiss obtenemos los datos que nos retorna el modal, es

decir que cuando nosotros ya seleccionemos el dato del modal que en este
caso es la cancion que se encuentra en el componente songs-
modal.page.html y despues cerremos dicho modal, pues automaticamente
tenemos control total otra vez del home. Dentro del onDidDisMiss() lo que
hacemos es gurdar la data que obtenemos del componente songs-
modal.page.html dentro del Json de nombre songs, de esta manera:

- Toca modificar el archivo app-routing.module.ts de esta manera:

Video 6: Construyendo nuestro reproductor

- En el archivo home.page.html vamos a colocar este codigo:

- El componente ion-grid es un sistema de grillas en Ionic

- El la clase con valor ion-text-start y ion-text-end es para colocar el texto al
final y al inicio
- Con la propiedad [value] es para crear una barra de progreso y el 0.5 es para
indiciar el progreso
- Vamos a crear otro ion-grid y es para el reproductor, que tiene primero el
icono de un corazón para especificar que gusta la canción, luego un texto que
es el nombre de la canción y por último el icono de play y pause pero el de
 icono de play va a mostrarse solo si no esta sonando una canción y el de
pause solo se mostrar si esta sonando una cancion, algo a resaltar es que
los iconos tienen un tamaño de 1 y el texto tiene un tamaño de 10, esto es
porque los grid se conforma de 12 columnas entonces los iconos tienen una
columna y el texto 10 para completar los 12

Video 7: Logica de nuestro reproductor

- En el archivo home.page.html vamos a colocar unos cambios en el tiempo,
primero en la propiedad value vamos a colocar el metodo newTime, en los
iconos vamos a colocar una interpolacion de esta manera:

- Vamos a colocar este codigo dentro del archivo home.page.ts:

- El new Audio es la Api nativa del navegador para acceder a un audio y

recibe como parámetro la URL de la canción, en este caso nuestra variable
song que es el Json contiene un parametro preview_url y es la URL de la
cancion
- El metodo play() es de la Api Audio y tambien contiene el metodo pause()
- Con el addEventListener() lo que hacemos es colocar un timeupdate que
pertenece a la Api Audio y sirve para actualizar la barra de progeso, pero
para eso usamos algo llamado currentTime que tambien le pertenece a la
Api Audio y nos indica el tiempo actual, pero hay que hacer la operacion
matematica para que la barra se genere acorde a la duracion de la cancion,
es por eso que usamos el currentSong.duration ya que el la Api Audio
tiene tambien la duracion
- En el metodo paseTime() vamos primero a castearlo a Int usando el
parseInt y como parametro le pasamos el time convertido en string porque
el tiempo esta con un punto decimal y lo queremos es con un : entonces con
el split dividimos el tiempo y tomamos el valor de la izquierda, entonces con
el numero 10 es para parsearlo a entero en base 10, luego a partTime
vamos a redondearlo a un entero con Math.floor y se divide en 60 ya que un
minuto tiene 60 segundos y se convierte a string. Por ultimo se evalua si el
minute es de un digito y si es true se le añade un cero al principio es decir
que el tiempo nos sale en 1:00 pero no queremos eso queremos que este en
01:00 por eso se le añade el cero al inicio
- Vamos hacer lo mismo para los segundo es decir primero sacamos el residuo
de la division entre partTime y 60 segundos convertido a string, luego
hacemos la misma condicion si solo tiene un digito agreguele un cero antes
- Para agregar todas las canciones tiene una duracion de 30 segundos

Video 8: Reto vistas de albums

- El reto es crear un modal con las canciones de cada album usando el método
getAlbumTracks así:
Módulo 4: Acceso al hardware
Video 1: Usar la cámara a través de Capacitor
- Vamos a generar la pagina de settings de esta manera:

ionic generate page settings

- Vamos a ir al archivo menu.module.ts y colocamos esto:

- En el archivo menu.page.html vamos a colocar en el ion-item de Settings

un metodo de nombre goToSettings y vamos a ir al menu.page.ts para
crear ese metodo, de esta manera:

- El metodo nos va a redireccionar al componente del settings

- En el archivo settings.page.ts vamos a colocar este codigo:

- La variable userImage contiene una foto por defecto, la variable photo tiene
un tipo de dato SafeResourcesUrl y es para una URL segura. El metodo
takePhoto tiene una variable image y su valor es un metodo de nombre
getPhoto que tiene cuatro parametros el primero es una calidad de 100, e
segundo es si se puese editar y es false, el tercero es el tipo de URL que es
DataUrl y consiste en en la URL de la imagen mas un base64, por ultimo la
fuente y es el dispositivo de la camara. por ultimo a la variable photo le
vamos a guardar de forma segura la variable image y la data de url del
image
- En el settings.page.html vamos a colocar esto:

- Le decimos si no hay photo entonces coloque la foto de manera

predeterminada, pero si hay una foto pues coloque la foto nueva tomada con
la camara
- Nos va a generar un error porque Ionic no encuentra ninguna cámara porque
estamos en el navegador, entonces le vamos a decir a Ionic que convierta
nuestra aplicacion en una PWA para acceder a la camara del PC, entonces
debemos de instalar una libreria y es así:

npm install @ionic/pwa-elements --save

- Luego en el main.ts debemos de especificar una libreria y es

defineCustomElements y pasarla por parametro el windows, así:

Video 2: Correciones de errores y afinando detalles

- En nuestro app-routing.module.ts vamos a colocar estos cambios:
 - Luego en el archivo home.page.html vamos a colocar estos cambios:

- En el archivo home.page.ts vamos a colocar estos cambios:

- Lo que hacemos en la variable song es primero definir el tipo de dato del

Json que son preview_url, playing y name, es decir que es la url de la
cancion, saber si la cancion se esta reproduciendo o no y por ultimo el
nombre de la cancion, ya despues se inicializa esos valores
- En ionic no usamos el ciclo de vida de los componentes de Angular,
entonces podemos borrar todos los OnInit
- En el intro.page.ts vamos hacer estas modificaciones:

- vamos al menu.module.ts y hacemos esta modificaciones:

- El path vacio es para cuando vamos al localhost:8100 pues se vaya a home

- En el menu.page.ts vamos a colocar esto cambios:

- Vamos hacer una modificacion en el songs-modal.page.html y es colocando

comillas simples como parametro en el metodo selectSong() para que no
nos de un error de compilacion:

- Para ver si el codigo esta bien es con:

ionic build --prod

- En el archivo home.page.ts al metodo parseTime vamos a quitarle esa

asignacion de String en el parametro y colocar esto:

Video 3: Mejorando nuestra pagina

- En el archivo settings.page.html vamos a colocar este codigo:

- Luego en el settings.page.scss vamos a colocar este codigo:

- Vamos a ir al archivo mane.page.html y colocar estos cambios

- Luego en el menu.page.ts vamos a colocar este codigo:

Video 4: Pagina Sports y Angular Maps

- Vamos a generar la pagina de Sports así:

ionic generate page sports

 - En el archivo app-routing.module.ts vamos a quitar la ruta del sports y
pegarla en el menu.module.ts porque es un hijo de menu así:

- Ionic tiene una libreria de mapas y para instalar es asi:

npm install @agm/core

- En el archivo app.module.ts vamos a importar la Key de Google des esta

manera:

- Para tener la Key vamos a esta pagina:

- Luego damos click en Google Cloud Platfform Console

- Vamos a seleccionar un proyecto de los que vienen por defecto y nos sale
varias herramientas, entonces seleccionamos la que dice Maps Javascript
Api:

- Luego habilitamos la Api y damos click en administrar:

- Vamos a ir a Credenciales y copiamos la Clave

- Entonces vamos al enviroments.ts y tambien al enviroment.prod.ts y

pegamos la Clave en una variable nueva llamada mapsKeyApi así:

- Vamos a tener que importar la libreria AgmCoreModule en el

sports.module.ts de esta manera:

- En el sports.page.html vamos a colocar esto:

- Con el agm-map ya esta pintando el mapa pero hay que definirle un alto para
que se muestre, porque el define un ancho del 100% automaticmente y lo
configuramos en e sports.page.scss:

Video 5: Crear la pagina Sport

- Vamos a colocar este codigo en el archivo sport.page.ts:

- El conts {Geolocation} = Plugins es lo mismo que de cir const

Geolocation = Plugins.Geolication
- Creamos varias variables que son el centro actual que esta vacio, las
coordenadas que es un array de cualquier dato y el zoom del mapa
 - En el metodo getCurrentPosition() vamos creamos una variable asincrona
que contiene un metodo para obtener la posicion actual en base a la longitud
y latitud
- El ionViewDidEnter() invocamos todos los metodos
- Vamos a crear otro metodo de nombre watchPosition() que sirve para
actualizar la posicion cada vez que cambie y es gracias al metodo
watchPosition que tiene Geolocalitation y el codigo es este:

- En el metodo watchPosition() creamos otra cordenada pero esta vez para

hacer un push al array que tenemos de nombre coordinates y esto es con el
objetivo de pintar la linea de recorrido y es así:

- Por ultimo vamos a colocar esto en el sports.page.html:

Video 6: RETO buscador dinamico en sports

- Se debe de colocar este buscador de canciones en el Sports así:

- Aca tenemos el endpoint:

Video 7: Llevar nuestra aplicacion a produccion con Android

- Primero hay que colocar ionic build --prod
- Ahora vamos a sincronizar nuestro trabajo con Androdi y iOS usando el
comando npx cap sync
- Para limpiar la cache de Android Studio vamos a dar click en clean así:

- Solo nos queda correr el Android Studio