Dm - 8

0:05Hola, buenas tardes.

0:10Buenas.

0:12Bueno,

0:14e ya tengo las notas de los parciales.

0:20Se las voy a pasar por el por Telegram.

0:28A ver.

0:37La verdad, bueno, nada, felicitarlos

0:38porque en líneas generales hicieron muy

0:41buen parcial la mayoría, así que

0:45estuvieron muy bien.

0:51Ir pasando.

0:54Ahora les paso la nota y bueno, y

0:55recuerden que para en caso que quieran

0:58revisarlo lo voy a llevar el la próxima

1:03la próxima vez que vaya al instituto,

1:04creo que es en un par de semanas.

1:09Si lo quieren ver, se lo llevo.

1:12A ver, ahí les paso.

1:22Bien, ahí parcial teoría. Bien, ahí va

1:24la primera parte y a ver hasta dónde

1:26llegué.

1:45llega la segunda.

1:58Bien, ahí está.

2:00Ahí está el otro, el restito que me

2:02faltaba.

2:05Están todos.

2:14Bien.

2:17¿Qué más les quería comentar? Ah, tema

2:19de los TPs que quería eh A ver, ¿dónde

2:22está

2:27acá?

2:31tenía una duda con,

2:34bueno, hay algunos grupos que no que no

2:36lo entregaron

2:39que no entregaron el documento de APIs,

2:41así que es en el grupo cinco,

2:45grupo 8o,

2:48después hubo el grupo siete y el grupo

2:50nueve, que uno entraron dos veces y el

2:52grupo nueve, chicos, entraron tres veces

2:56Ahí

2:58ustedes

3:02grupo

3:05uno pero tres veces

3:11les pasó ahí, pero bueno,

3:13se te está acordando el micrófono, se te

3:15escucha mal, pero asumo que dijiste que

3:17entreguemos uno por grupo. Okay. Para la

3:19próxima grup.

3:19Claro. Sí, sí, sí. uno por grupo. El

3:21mismo documento no tiene no tiene ningún

3:24sentido que [resoplido]

3:25no para

3:26tres veces

3:27para tener la entrega entregada, pero

3:30bueno, nada,

3:31puede fallar.

3:32No, no, no. Yo con con que lo entren una

3:34vez se los dije un par de veces ya

3:36alcanza. Para las próximas entregas que

3:39vaya va a ser el la entrega final, eh,

3:42uno por grupo nada más. Dale,

3:44no hace falta. Yo eso lo corrijo por

3:46grupo y, o sea, veo la entrega por grupo

3:49y no de manera individual. Sí.

3:52Eh, después, bueno, tengo en el grupo 12

3:54a Gonzalo Vargas, eh, no está solo en el

3:57grupo 12, no sé si se unió a algún grupo

3:59y acá en el en el documento no se

4:01actualizó.

4:03No sé si está acá Gonzalo. A ver,

4:11eh, que tampoco entregó nada, así que no

4:13sé si

4:19eh el parcial lo hizo.

4:22No lo veo. Salo.

4:28No, no lo había conectado.

4:32No sé si está con algún grupo.

4:41Voy a escribir por Telegram.

4:47Gonzalo Vargas acá.

4:57Y bueno, como les decía, el grupo 5 y

5:00grupo 8. eh que no entregaron, no

5:04entregaron nada, por lo menos no tenía

5:06nada ni en el mail ni en el aula

5:09virtual.

5:12Acá se los puse igual en el documento.

5:13Castañeda,

5:18calves,

5:20Belastiki,

5:22son del grupo 5.

5:27Velas, veo que Luz

5:30hizo el parcial. ¿Quién

5:35más? Bueno, Gonc. Gonzálvez está

5:37ausente.

5:40Em,

5:43¿quién más? Castañeda también veo que

5:46hizo el parcial

5:49Julio.

5:54Recuerden chicos, que es obligatorio.

5:55Sigue el TP y las entregas.

5:59¿Quién

6:01más está en ese grupo?

6:08Mira, Elías, Elías, te veo. Ah, no, sí

6:11te veo acá conectado, pero vos no diste

6:12el parcial,

6:14¿eh? Ni tampoco me avisaste ni nada.

6:17Sí, profe, yo hice el parcial.

6:18No, no. Elías

6:23que lo acaba de nombrar del grupo CCO

6:25también.

6:27¿Estás

6:29ahí, Elías?

6:39¿Quién

6:59más estaba en este grupo?

7:25Bien, ¿qué más? y el grupo ocho.

7:27Santiago Cuba, Mauricio Santillán,

7:30Alexander Meléndez, Gastón Ríos.

7:34Eh, tampoco tengo entrega.

7:46Ríos Gastón hizo el parcial,

7:51así calculo que estará sigue cruzando.

7:53¿Quién más? Bueno, Meléndez, no. No lo

7:55hizo.

7:58Santillo Mauricio tampoco.

8:01Agustina Gómez.

8:03Sí, Agustina Gómez también. Eh, perdón,

8:07ese es otro grupo. Era Santiago Cuba.

8:13Cuba Santiago, ¿no? [resoplido] Bien.

8:15Eh,

8:16nada, ahí Gastón Ríos, no sé si está

8:18conectado, pero tengan en cuenta que si

8:21el grupo, la mayoría del grupo se

8:23disolvió, tienen que sumarse a otro

8:25grupo. Sí, va para

8:29los chicos de estos dos grupos, eh,

8:33si no entregan el TP, no van a probar la

8:35materia.

8:38Eso creo que lo comentamos la primer

8:41clase o la segunda,

8:43pero es una con las condiciones de

8:44aprobación, ¿sí?

8:46Así que

8:48nada, pónganse las pilas ahora porque si

8:50no no van a llegar al ya al final del

8:53cuatrimestre,

8:55por más que me digan que no estaban los

8:57integrantes, que se disoló el grupo,

9:00no van a tener excusas, o sea, el

9:02momento de plantearlo es ahora,

9:06de cambiarse, de sumarse a otro grupo o

9:08de armar un grupo nuevo,

9:11pero un poco para la entrega de este

9:13documento es para esto y para A ver cómo

9:17se comunican los grupos,

9:19eh quiénes no entregaron,

9:23quiénes abandonan la materia. Bueno, son

9:25cosas que que van pueden pasar y pasan

9:28eh en una materia en un cuatrimestre.

9:32Así que nada, quería repasar un poco

9:34este tema. El resto está perfecto. Los

9:36demás grupos cumplieron, entregaron

9:38todo, así que muy bien.

9:41Pero pero bueno, nada, esto un poco de

9:43reorganizar aquellos chicos que se van

9:46se va checando el grupo, se van quedando

9:47sin grupo.

9:50Eh,

9:52nada, ténganlo en cuenta. Y también me

9:53basé mucho en ver quién rindió el

9:55parcial. Así porque si rendieron el

9:57parcial y no entregaron el TPE

10:01parece raro.

10:11A ver si se unió Gonzalo. ¿Estás acá,

10:13Gonzalo? No lo veo. Contestó por

10:15Telegram, pero no lo veo acá, Gonzalo.

10:24Bien.

10:30Bueno, después alguna duda, ¿algún

10:32comentario del parcial? ¿Qué les

10:33pareció? Si difícil, fácil,

10:37algo que quieran comentar

10:41para m

10:42Sí, go. No, perdón,

10:44quieras. Yo no

10:46nada. A mí me pareció bien, eh,

10:50me pareció bien, sí. Eh, yo sentí que

10:52era parcial más de Apis y

10:56otro tema más y capaz HTML TSP JWT lo

11:01pasamos así por de largo, pero eh para

11:05mí estuvo bien.

11:08Eh, sí, sí estuvo enfocado más que nada

11:10en los temas más prioritarios, más

11:12principales, aparte que eran pocas

11:15preguntas, eh, entonces no abarcó todo,

11:18sino que sí abarcó de Tycript, creo que

11:20abarcó algo, Superset o alguna de esas

11:22cositas entraron.

11:24Sí, tendría que verlo otra vez, eh, qué

11:26porcentaje era de cada tema.

11:28Eh, pero sí, sí, sí, sí, pero o sea, yo

11:33lo que lo que vio

11:36lo recuerdo la semana pasada, la verdad,

11:37si te digo ahora te miento,

11:39pero

11:42en serio necesitaría ver las preguntas

11:43porque había cosas que yo leí, por

11:46ejemplo, con el apunte que vos tenías en

11:48el en el en el campus,

11:53eh, y capaz no me no entraba en la clase

11:58en la en el parcial, ¿viste? Eh,

12:02claro, no, por eso, porque en campus

12:03está todo. Por eso yo les decía que

12:04vayan tomando nota, que se queden con

12:06los temas principales, porque lo que

12:08está subido en el campus es, o sea, el

12:10total y normalmente no se llega a dar

12:12todo, pero no no dan los tiempos para

12:15dar todo el total de la teoría, sino que

12:17nos quedamos con los temas más

12:18importantes. Por eso yo le digo siempre

12:20que presten atención a la clase y ahí

12:22tomen y tomen nota de los principal que

12:25inclusive también está en los en los

12:27PPTs.

12:29Em,

12:31eso sí.

12:33Bien, ¿qué dice? Estuvo bueno porque no

12:36eran tanto definiciones sino más

12:39utilidad. Sí, sí. Algunas preguntas

12:40serán también un poco para entender y

12:42para captar los conceptos, así que no no

12:46fui tan al a la definición en sí, sino

12:50para que se se razone un poco más y

12:54quería ver si se habían entendido más

12:56que nada eh los conceptos y la manera de

13:00aplicarlos.

13:03Así que bien, bien. No sé qué más quería

13:05comentar, Kevin.

13:06Eh, yo sí, eso me gustó, que si lo

13:10razonabas te salía, porque capaz que el

13:11concepto lo podías tener no tan claro o

13:14no tener la definición al pie de la

13:17letra, pero me gustó eso, que apuntes al

13:20concepto más que al

13:22Bien. Sí, sí.

13:23Las definiciones per sé, que lo que vas

13:25a ver el día de mañana va a ser todo el

13:26concepto. Si no lo entendiste, no lo vas

13:28a

13:29Claro. Exactamente. Sí, sí. Tal cual.

13:32Eso es que fue cortito dentro de todo,

13:33porque en 20 minutos, media hora, lo

13:35podías resolver.

13:36Sí, sí, sí. La verdad que lo la mayoría

13:39lo lo terminó bastante rápido.

13:42Bien, ¿alguien más?

14:05Bien,

14:07bueno, e nada, recuerden que hay una

14:13una segunda etapa que es de

14:14recuperatorio.

14:16Aquellos que sacaron menos de siete y

14:17quieran recuperar. A plazos no hubo

14:19ninguno,

14:21así que en ese caso nadie está obligado

14:24a hacer el recuperatorio. Pero bueno,

14:26algunos que sacaron menos de siete y y

14:29quieran ver de promocionar lo pueden

14:31hacer.

14:33Lo único que tengan en cuenta es que la

14:35nota del recuperatorio va a pisar a la

14:38del parcial. Sí. O sea, que si en el par

14:39sacan un seis, si en el recuperator

14:41sacan un tres, bueno, ahí ya no tienen

14:43chances y van a tener que recursar, ¿sí?

14:45Porque está aplazado.

14:49Sí o sí. Tienen que tener eh los dos

14:51parciales aprobados y el TP más el TP y

14:54bueno, más las entregas, pero mínimo

14:56para aprobar la materia tienen que tener

14:59los parciales y el TP aprobado.

15:04Así que bueno, tengan eso en cuenta.

15:07Em, vamos a ver. Ver cuandondo es el

15:10parcial de práctica.

15:15Es un teórico. Bien. Y el [resoplido] de

15:17práctica es el 27, un poquito menos de

15:19un mes.

15:21Así que

15:23en un mes e va a ser el otro parcial.

15:39Sí, Elenora.

15:41Sí, el segundo parcial es solamente

15:43práctica.

15:44Sí, sí, exactamente.

15:45Nada de teoría.

15:47No, no, no. Todo exclusivamente

15:48práctico.

15:50Gracias.

15:51No, nada.

15:54Bien, Elías. Bueno, eh, no, normalmente

15:58lo las faltas para los parciales tienen

16:00que estar justificadas, así que después

16:01si querés escribir en privado por

16:03Telegram y y lo vemos. E por eso lo

16:06avisé antes del parcial y aquellos que

16:08no podían asistir tenían que que

16:11avisarme por lo menos.

16:14Así que pues lo vemos

16:18bien.

16:20Bueno, hoy ya vamos a empezar con lo que

16:22es eh

16:25una una práctica, así que nos va a

16:26llevar dos clases,

16:29va a ser un una aplicación de listas.

16:35E bien, igual antes eh quería

16:40volver al TP a ver cuánto nos queda hoy.

16:43Es 29

16:49acá.

16:57¿Dónde está la fecha de entrega?

17:01El 10 de noviembre.

17:08Bien, a partir ya de la próxima clase eh

17:11la idea es que vaya mostrando

17:14los avances que tienen en el desarrollo

17:16del TP, ¿sí? En lo que es el código.

17:19Así que ahí voy a ir a ir llamando por

17:21grupo. No sé si las la en una clase van

17:25a mostrar todos, pero en dos clases sí.

17:28La idea es que todos vayan mostrando sus

17:30avances.

17:32Sí, la va un poco la idea es de que

17:34todas las clases que nos quedan hasta el

17:36hasta la entrega es que todos los grupos

17:38los grupos vayan mostrando sus avances

17:41en lo que es el desarrollo.

17:44Así que ténganlo en cuenta.

17:46Sí, para ya a partir de la próxima clase

17:49voy llamando a la mitad de los grupos.

17:51Vamos a hacer mitad y mitad cada una de

17:53las clases

17:54para

17:56para ver cómo van con los avances.

18:08Para inicio de sesión usamos W. Sí. O

18:10sea, tiene que usar W para las rutas

18:12protegidas.

18:14Sí. Sí. El inicio de sesión no usa W.

18:17¿Por qué? Porque el inicio de sesión

18:18tiene que acceder todos.

18:21El login login tiene que acceder todo el

18:23mundo.

18:25Entonces ahí en ese caso no es necesario

18:27un W, sino para las rutas, como vimos la

18:30clase pasada, eh, que están protegidas,

18:34eso sí.

18:52Bien,

18:57así que bueno, nada, ya pueden igual eh

18:59pueden ir empezando si ya con lo que es

19:02el desarrollo, ya fuimos viendo

19:04bastantes cosas como para que puedan ir

19:06empezando con el desarrollo del del TP,

19:09ir

19:12desarrollando lo básico.

19:15Si ya tien ya saben cómo conectar las

19:17APIs,

19:19cómo ir creando los los el proyecto, así

19:23que

19:25vayan avanzando con eso en definir las

19:27cantidades de pantallas, [carraspeo]

19:29definir el

19:31eh lo que es la parte gráfica del

19:33frontend. Sí,

19:37todo eso ya lo si bien

19:40e quizás no van a avanzar con todas las

19:42pantallas en el desarrollo en una

19:44semana, pero sí teniendo la idea del del

19:48diseño, por lo menos el el login,

19:52eh, ¿qué más? el registrarse, todo eso

19:54lo pueden ir, ya lo deberían ir

19:56avanzando.

20:05Bien,

20:08¿qué más tenemos?

20:10A ver, estoy leyendo el documento, a ver

20:12si hay algo más. Bueno, recuerden que

20:15como dice acá el documento, ahí se los

20:17voy a compartir para que los veamos, así

20:19repasamos ya que estamos. Esto trabajo

20:22final.

20:30Bueno, la estructura según como lo vimos

20:32en clase, que es la estructura del

20:34proyecto, cómo vamos guardando carpeta,

20:38¿sí?

20:40Lo que son los servicios,

20:42los W, por ejemplo.

20:45Eh, después, bueno, cada cada componente

20:48tiene su carpetita.

20:50¿Qué más tenemos?

20:52Bueno, vamos a trabajar con modules, no

20:54con standalon. Recuerden que Standalon

20:56va a estar en false, así que el proyecto

21:00lo tenemos que crear siempre con NG

21:02Modules.

21:06¿Qué más teníamos?

21:09El, perdón, el tipo de si es de card, si

21:11es lo que quiera, lo definimos nosotros,

21:13¿no?

21:14Sí, si eso lo definen ustedes.

21:16Este es el tipo de proyecto,

21:19pero proyecto con módulos.

21:21¿Qué más deberate momento de tener

21:23comentada la funcionalidad? Ah, esto no

21:25sé si lo me parece que no lo vimos

21:27todavía. Hoy lo vamos a ver. Lo de los

21:28comentarios, el formato de comentarios,

21:31eso no se los mostré, es algo muy

21:32sencillo.

21:34Todos los métodos o funciones que

21:37ustedes que ustedes creen tienen que

21:39tener el comentario

21:41eh correspondiente con el formato que

21:44vamos a ver hoy y todo lo que ustedes

21:47desarrollen. Sí.

21:51Bueno, la API, la API pública, eso ya lo

21:54vimos, la funcionalidad nativa,

21:59eh, en todo caso, persistir, van a

22:01persistir en Firebase si quieren usarlo

22:03como base de datos que se usa en la

22:05nube,

22:07son para guardar datos de de los

22:09respecto a los usuarios, como no se

22:11puede ser un favorito, un historial de

22:14lo que sea, de consulta.

22:19Así que bueno, esto vayan [carraspeo]

22:21repasándolo.

22:24¿Qué más teníamos? A ver.

22:51Bien. Ah, el login, el login lo ideal

22:54sería que usen cognito de AWS.

22:59Sí, es es gratuito.

23:03Quizás les pide algún dato de de algún

23:06medio de pago, pero no les cobra nada.

23:08Eso ya ha pasado, no no les cobra nada,

23:11es gratuito.

23:13Sí, solo tienen que registrarse, crearse

23:15la cuenta y usarlo para el registro de

23:18usuarios. [carraspeo]

23:19Si, eso es para para hacer el login. Así

23:22que vayan vayan investigándolo. No

23:24recuerdo si se los había nombrado, pero

23:27pero bueno, la herramienta se llama

23:29cognito de AWS.

23:32Eso es para que hagan el el login de

23:35usuario. Sí. Y después, bueno,

23:39para persistir, como dije, Firebase y la

23:41API pública es la que ustedes van a

23:43utilizar que ya enviaron el documento.

23:47Así que nada, más que nada era

23:49mostrarles esto, repasar este documento

23:51con el código TScript y Ionic, que es lo

23:54que vimos venimos viendo. Eso

23:58creo que está bastante bastante claro.

24:01Bueno, nada más.

24:04Bien, hoy entonces vamos a hacer vamos a

24:07empezar con la práctica,

24:09así que nos va a llevar dos clases.

24:13Vamos a repasar de nuevo el cronograma

24:15por si quedan algunas dudas.

24:20Estamos en la clase del 29.

24:24Bien, creación de listas. La clase que

24:27viene vamos a finalizar con el proyecto

24:29de listas.

24:32Después vamos a hacer el siguiente

24:34martes un ejercicio integrador.

24:37Sí,

24:39para que sigamos repasando.

24:41¿Qué más? Y tenemos la clase siguiente

24:44que es el martes 20,

24:46repaso de práctica.

24:48Acá, como les como les dije la otra vez,

24:50lo ideal sería que ustedes eh luego del

24:53integrador

24:55me digan qué dudas tiene, qué les

24:57gustaría repasar

24:59eh para armar una práctica en base a sus

25:03dudas. Sí, y la veríamos el martes 20,

25:07ya que sería la clase anterior al

25:09parcial. Sí, así llegan con todas las

25:13dudas despejadas

25:15y les queda una semana más para seguir

25:17practicando y sacándose dudas.

25:21Pero repito, entonces las dos próximas

25:23clases, proyecto de listas, la

25:24siguiente, el integrador complementario.

25:28Estos son ejercicios que ya están

25:29armados y la idea del 20

25:34es armar un ejercicio nuevo en base a

25:37todo lo que ustedes planteen, que les

25:38gustaría repasar y que tengan dudas.

25:44Bien.

25:47¿Algo

25:53que quieran comentar? ¿Alguna duda?

25:59Eh, la presentación es presencial

26:01también, ¿no? Sí, el TP en la defensa,

26:03digamos.

26:04Sí, sí, sí, presencial.

26:06Y va a ser el día del recuperatorio.

26:10A ver, ahí les vuelvo a decir cuándo es.

26:11Sí, creo que el 17.

26:13El 17. Así, exactamente,

26:16el 17. Ahí van a estar todos los grupos

26:20presentando,

26:24eh,

26:25y bueno, aquellos que tengan que rendir

26:28los recuperatorios rendirán primero y

26:31después presentarán,

26:33pero ese día sí es el

26:37y bueno, después la semana siguiente ya

26:39es el termina el cuatro trimestre,

26:42así que nos queda asistir dos veces más

26:45que es el 27 de octubre.

26:47Y el 17 de noviembre

26:51sería el parcial de práctica y el 17

26:54recuperatoria y presentación de los TPS.

27:05La última práctica, claro, la última

27:07práctica sería antes del parcial,

27:10el 20.

27:11Después nos queda ver

27:14algunos detalles de

27:17cómo generar el APK con con Android con

27:19Android Studio y después, bueno, una

27:21clase más para que ya presenten el el TP

27:26y bueno, la

27:29una clase de repaso para aquellos que

27:31tengan que recuperar lo que es teoría y

27:35práctica. Si esa la clase del 10,

27:37inclusive la del TR y la del 10 la

27:39podríamos usar para

27:42repaso.

27:44E

27:46esas dos clases quedarían ahí de

27:47respaldo para

27:49una la del la del tres para ir viendo

27:52los TPS, que es algunos que tengan que

27:55necesiten ayuda o

27:59o que quieran ver algo. y la del 10 ya

28:02más que nada para para entregar el TP y

28:06como les decía, repaso para la para los

28:08recuperatorios

28:10en caso que alguien necesite darlo.

28:20Bien.

28:24Bueno, si no hay más dudas vamos a

28:26empezar a hacer la práctica.

28:56A ver, compartir. A ver.

29:32Bien, ahí estamosandar

29:43esto.

29:46Bien. Bueno, vamos a empezar con la

29:47instalación.

29:52Ahí se ve bien.

29:55Sí. ¿Cuál práctica es, profe? ¿Puedo

29:57decir el nombre?

29:59Eh, práctica proyecto Ionic, clase 7.

30:03¿En qué está?

30:05Eh, siete, supongo.

30:08Poquito más grande puede ser.

30:10Sí,

30:15ahí se ve un poco mejor.

30:16Sí, gracias.

30:20Bien,

30:22vamos a posicionarlos en nuestra carpeta

30:24de proyectos.

30:39Eh, bien.

30:42Vamos ahora a realizar una instalación,

30:44¿sí? Con el comando, bueno, Ionic Start

30:47solamente vamos air Angular proyecto

30:50listas.

30:51Eh, va a ser un proyecto de tabs. Sí. Y

30:54en modules

30:58entonces

31:06wizard esto creo que era que no. Bien,

31:09ponemos que no.

31:12Angular seleccionado. Proyecto

31:16listas.

31:18Está igual. Proyecto gu bajo listas.

31:21Está bien,

31:23perfecto.

31:25Eh, dijimos que iba a ser de tabs. Está

31:28perfecto. Seleccionamos tabs y en

31:31modules.

31:35Bien, tenemos tiempo que se instale.

31:44Vamos a abrir acá

31:48los iconos. Acá están todos. Perfecto.

31:53A ver, ¿qué más? Nada más. Bien. Bueno,

31:56acá se va a crear el proyecto, ¿sí? Con

31:58los tres tabs, como vimos la otra vez.

32:02La idea es de la aplicación eh es crear

32:07listas de actividades, de tareas. Sí.

32:11Inicialmente vamos a tener la lista eh

32:14tres tabs por hacer, haciendo y

32:16terminado. [carraspeo]

32:18La lista debería aparecer eh una vez que

32:21la herramienta esté finalizada en por

32:23hacer, ¿sí? Donde va a tener sus

32:26actividades sin completar.

32:31Cuando al menos una actividad se

32:32complete,

32:34la lista debería pasar al al tab

32:37haciendo y cuando todas sus actividades

32:39estén completas, la lista debería pasar

32:42al tab terminado.

32:45¿Sí? Eh, entonces esa es la idea de la

32:48aplicación.

32:58terminando. Bien, tengo una cuenta, ¿no?

33:02Perfecto. Vamos a abrir el proyecto

33:05ahora

33:10que est proyectos proyecto listos.

33:20Bien.

33:22Ab una terminal, nueva terminal.

33:34Bien, bueno, ya tenemos todo instalado.

33:38No modules

33:42PP,

33:43tenemos los tres tabs, tab 1, dos y 3 y

33:47el tab general. Si, esto lo lo que

33:49habíamos visto la otra vez. Y bueno, y

33:51el Explore Container, que es lo que se

33:53muestra inicialmente.

33:56Vamos a ponerlo para que inicie.

34:23Bien,

34:30ya inició la aplicación. Tenemos los

34:33tres tabs. Sí. Acá el contenido, como

34:36decíamos que está en el explorer

34:37container

34:38que lo habíamos visto

34:41la otra vez. Así que es esto lo que

34:43vemos acá.

34:46Bien, no lo vamos a usar ese.

34:50Bueno, vamos entonces eh a empezar.

34:54Está la aplicación como se instaló.

35:02Vamos a ver qué nos dice la práctica.

35:05Bien,

35:07esto ya lo abrimos. Vamos a empezar por

35:09cambiar el nombre de los botones. Sí,

35:12según lo que fuimos nombrando recién,

35:15que va a ser por hacer

35:17acá por hacer haciendo y terminado. Van

35:20a ser los tres posibles estados.

35:24Por eso vamos a ir al tab a tabs, ¿sí?

35:28que es el que contiene los tres botones

35:32por hacer

35:34primer botón, segundo haciendo

35:38y el último

35:41terminado

35:48por hacer haciendo y terminado. Bien, ya

35:50cambiamos el nombre.

35:52Ahora lo que nos pide es que cambiemos

35:53los iconos.

35:56Sí, acá nos da una referencia de qué

35:58iconos ponerle. Ahora primero dice que

36:01busquemos CLI CI.

36:05Ven acá si le damos un click se copia

36:08toda la línea.

36:13Ion icon. Sí, acá copiamos. ¿Ven? Lo que

36:15va a cambiar es el nombre.

36:19Le cambiamos el nombre. Y acá, ¿ven? Ya

36:22se cambió.

36:24¿Cuál era el otro? Flash y don

36:30flash

36:32el rayito.

36:38Ponemos acá el icono

36:42y el último era don.

36:50Y acá el icono tres.

36:55Bien, acá cambié el nombre y vemos que

36:58se haya aplicado el cambio.

37:00Perfecto. Por hacer haciendo y

37:03terminado. Bien,

37:06ya tenemos la primer parte.

37:10¿Qué más? Ahora dice que e cambiar el

37:13nombre de los tabs,

37:15¿sí? En el HTML de cada tab lo mismo.

37:19¿Por qué? Porque acá nos dice tab un,

37:22tab dos y tab 3. Entonces debería hacer

37:24referencia al tab. Sí, pero eso como

37:27vimos corresponde a cada uno de los tab.

37:30Sí, ya eso es el HTML en particular del

37:32tab.

37:34Entonces, por hacer

37:38título del tab, del tab 2

37:41haciendo,

37:44vamos guardando. Si ven que voy

37:46cambiando le lo guardo y este era

37:50terminado.

37:53Guardamos. Compilo bien. Y entonces,

37:55¿ven? Acá ya tenemos

37:58terminado. Perfecto.

38:01Entonces, cada uno con su nombre.

38:07Bien, acá nos dice queemos un botón

38:10flotante en el tab un, ¿sí?, que va a

38:13ser para agregar las nuevas listas.

38:17Si bien, acá tenemos el código del

38:19botón. Vamos a ver qué nos dice acá. Eh,

38:23¿qué es lo que tenemos? Acá tenemos

38:26botón flotante.

38:28Si recuerden que esta es la

38:29documentación de de Ionic Framework.

38:32Y acá tenemos diferentes botones. Ven,

38:36código.

38:40Ven, este se abre para los costados. Acá

38:43está todo el código.

38:45¿Qué más tenemos? Bueno, esto lo

38:46habíamos visto la otra vez, pero vamos a

38:48usar este que es más sencillo, que va a

38:50ser solamente para para crear

38:54e una lista, solamente apretarlo y

38:58agregar.

39:00Bien,

39:02lo dice entonces que lo agreguemos en el

39:04tab un vamos a cerrar estos

39:07y como es HTML, esto lo vamos ya lo

39:10vamos a borrar

39:13y vamos a pegar acá el botón.

39:17formato s fab f button el icono add es

39:22agregar y por ahora solamente debería

39:25aparecer

39:29bien acá está síemos

39:32el botón lo único que nos falta ahora es

39:34acomodarlo donde va a estar si ven que

39:37acá tenemos vertical horizontal

39:41y fixedit

39:43eh esto estaba

39:46button. Acá

39:49vertical es la posición vertical en la

39:51pantalla. Tenemos top y bottom. Top es

39:54arriba, botón abajo. Y en la parte

39:56horizontal tenemos start y endda

40:00derecha, izquierda es start y derecha

40:04es. Va en orden de lectura.

40:08Sí, por default, si no le ponemos nada,

40:11se posiciona en el inicio de la

40:13pantalla.

40:15y slot fixit. Esto es para el estilo.

40:19Eh, tengan cuenta que abajo está la

40:20barra. Sí, porque si no le ponemos nada,

40:25se va. Ahí le mostr, les muestro cómo

40:27queda. ¿Ven que toma todo el contenido

40:30de la pantalla? Sin tener en cuenta

40:34la barra la barra que está acá en el pie

40:37de la pantalla. Entonces,

40:40para que no se encime, tenemos que

40:42aplicarle este estilo,

40:45¿ven? Entonces, acá ya quedó el botón

40:47listo.

40:48Entonces, ¿ven que ahora lo tenemos solo

40:50en el tabo? ¿Sí?

40:55¿Por qué? Porque solo trabajamos sobre

40:58el HTML del tab.

41:01No estamos trabajando con el resto de

41:02los tabs, solo con el.

41:06Bien, esto lo vamos a borrar porque

41:08estamos

41:10trabajando con el contenido

41:15uno. Bien, por ahora el botón no hace

41:17nada.

41:20Sí, hasta ahí vamos bien. ¿Siguen alguna

41:24duda?

41:25No, no.

41:29Paso ocho.

41:31Bueno, acá les dice cuál es la opción

41:33que buscamos en el en la página de

41:36Ionic. Sí,

41:39para usarlo de IA. Bueno, acá va estar

41:41explicando. Ven, top start,

41:45la ubicación del botón.

41:49Esto ya lo hicimos bien. Nueve. Ahora

41:51nos dice que a ese botón

41:54si le agregamos la función. La función

41:56va a ser eh agregar lista

42:01mediante el evento click.

42:05Entonces si evento click

42:09función agregar lista nosotros. Entonces

42:12ahora si guardamos esto nos va a arrojar

42:15error.

42:17¿Por qué? Porque no tenemos declarada la

42:21función.

42:23Sí, ven acá nos dice el error,

42:28si la propiedad lista no existe en el

42:31tipo eh tabuno page. Se refiere a la

42:35lógica.

42:37Entonces nosotros tenemos que venir y

42:39declarar acá nuestra función.

42:44Ya por ahora la declaramos vacía.

42:51V. Y ahora ya compiló.

42:56Vamos. La aplicación está corriendo. No

42:57hace nada todavía.

43:00Vamos a ver. Vamos a poner un console.

43:02log.

43:05Vamos a hacer agregar lista. Vamos a

43:07poner acá botón

43:13agregar lista.

43:17Y con esto vamos a probar si presionando

43:19el botón está llamando a esa función.

43:22Bien, acá botón agregar lista.

43:26Sabemos que está funcional.

43:30van a aparecer toda la cantidad de veces

43:32que nosotros lo vayamos presionando.

43:37Bien,

43:41bueno, acá agregamos la función,

43:44está agregada

43:46y ahora la [carraspeo] idea es que

43:48trabajemos con alertas. Sí.

43:51Bueno, para eso tenemos que importar eh

43:55controlador de las alertas. Nos va a

43:58hacer la inyección de dependencia.

44:01Lo vamos a copiar directamente y a pegar

44:04en el constructor. Sí, donde hacemos la

44:06inyección. Aler controller. Tenemos que

44:09hacer la importación y agregar

44:11importación del aler controller

44:16para poder trabajar con esta eh con esta

44:19clase o librería.

44:22Si es nativo de Ionic, de Angular.

44:27La idea de crear una alerta es que eh

44:29nos le al usuario un un cartelito donde

44:33muestre si esa lista se agregó o si hubo

44:36algún error o etcétera para mostrarle

44:39información al usuario en la pantalla.

44:42Entonces, para eso necesitamos crear e

44:46la variable de clase.

44:50Bien, bueno, acá es un poco lo que les

44:51dije.

44:54Bien, agregamos el código

44:57si para mostrar una pantalla de diálogo.

45:00Acá está como siempre el código. Si

45:06acá tienen diferentes tipos de pantalla

45:08de diálogos.

45:12con botones,

45:16título, subtítulo,

45:23bien, vamos a crearla y ahora vamos a ir

45:26en detalle qué es lo que hace nuestra

45:28función.

45:31Vamos a sacar

45:36conso Loog.

45:38Bien, trabajamos con async. ¿Por qué?

45:41Porque el método create de Alert

45:45Controller devuelve una promesa.

45:48Entonces, cuando trabajamos con promesa,

45:51acá dice que devuelve una promesa.

45:55Siempre tenemos que trabajar con a y a

45:58una llamada asíncrona

46:00y el le dice que va a tener que esperar

46:02la respuesta

46:04de ese método.

46:06Bien, ¿qué tenemos acá?

46:09Primer e propiedad es el header,

46:13agregar lista.

46:16Este va a ser el título. Vamos a tener

46:18un input,

46:20pueden ser varios. ¿Ven? Cuando tiene un

46:22corchete,

46:24como un array,

46:26va a ser un array de objetos. En este

46:28caso, este es el objeto.

46:31¿Sí?

46:33Entonces, el primer input que hice va a

46:35ser de tipo texto.

46:37El nombre donde se va a guardar ese dato

46:40va a ser título.

46:42La forma de acceder a ese dato que se

46:43carga va a ser título. Este sería la

46:45variable.

46:48Y en placeholder que dice ingrese nombre

46:51de la lista.

46:53es el texto que va a aparecer en gris

46:55para indicar al usuario qué es lo que

46:57debe ingresar en ese cuadro de texto.

47:04Bien, entonces acá se cierra el objeto,

47:08se cierra el input

47:11y el create.

47:15Bien, después una vez que se creó esta

47:16variable,

47:18¿sí? De tipo valer controller,

47:21lo que vamos a hacer es llamar a su

47:24propiedad present. ¿Para qué? Para

47:27mostrarla la pantalla, porque nosotros

47:29acá la creamos. Creamos el objeto

47:32de esta forma que dijimos recién y se lo

47:35asignamos a esta variable, pero lo que

47:38nosotros necesitamos después es

47:39mostrarlo en la pantalla.

47:43Guardamos. Bueno, acá quedó el conso

47:45log. Lo vamos a dejar por ahora.

47:47Lo probamos apretando el botón. Bien,

47:50ven acá dice agregar lista. Ingresa el

47:52nombre de la lista. Sol, le ponemos

47:54lista uno, por ejemplo.

47:58Ven, podemos ingresarlo, pero no tenemos

48:01nada, no hace nada. Ven, acá apareció el

48:03conso log de la mundo cuando apretamos

48:06el botón

48:08y ya estamos mostrando la alerta.

48:12Sí, es para agregar una lista. Entonces,

48:14como dijimos, acá va el nombre de la

48:16lista, pero nos faltan los botones.

48:21Sí, el botón de OK para guardar ese

48:24nombre, la lista.

48:28Acá lo que les comentaba sin gaweight.

48:32Bien. Y acá entonces agregamos los

48:34botones.

48:36Así que, como dijimos recién, eh el

48:39input es un objeto

48:43que se puede agregar

48:45la cantidad que se necesiten de objetos.

48:48Acá podemos poner una coma.

48:53Vamos a darle formato.

49:02Bien. Eh, acá butons. A ver.

49:08Faltó el

49:11corchete de cierra.

49:14Bien, entonces

49:17inputs coma. ¿Ven que a cada una de las

49:20propiedades se va separando por coma

49:23cuando cierra acá el corchete de inputs,

49:26coma y ahora se agrega buttons, lo

49:29mismo, se abre corchete,

49:32un objeto y dos objetos.

49:37El primero, ¿qué va a ser? Va a tener un

49:38texto que va a ser el botón de cancelar

49:41y su rol va a ser cancelar. cancel que

49:44va a ser cierre eh ese al controller.

49:48Y el segundo objeto, el segundo botón,

49:52el texto va a ser crear. Y acá vamos a

49:55trabajar con los datos, ¿sí?

49:59¿Qué datos vamos a obtener? Y los datos

50:02del título.

50:05Vamos a guardarlo y vamos a ver cómo

50:06funciona. Este consol lo vamos a quitar

50:10para ya trabajar con el del botón crear.

50:17Entonces, ¿ven? Ahora ya están los

50:18botones. Cancelar y crear.

50:22Lista uno. Crear.

50:25¿Ven? Y acá nos mostró

50:30data que vienen data. Y bueno, van a

50:32venir los datos de los inputs que

50:35tengamos.

50:37En este caso tenemos un solo input,

50:40¿ven? es un objeto

50:43que solamente tiene un atributo y un

50:45valor. El atributo se va a llamar

50:47título. ¿Por qué? Porque nosotros

50:48indicamos que se llame título

50:52y en el nombre del input dijimos que su

50:55atributo se va a llamar título y el

50:57valor

50:59va a ser que nosotros hayamos ingresado

51:02en el input.

51:04lista dos, por ejemplo,

51:08¿ven?

51:12Lista uno y lista dos. Entonces, de esta

51:14forma vamos a poder acceder al dato.

51:19Acá nosotros ponemos punto título.

51:23Vamos a hacer una cosa.

51:33Lista uno. Crear.

51:36Ven que pusimos dos conso log.

51:39Primero con la con data,

51:42¿sí? Que dijimos que va a traer

51:45todo lo que tengan los inputs.

51:48En este caso solo había un input, ¿sí?

51:52Sol una variable que es título y luego

51:55imprimimos

51:57el valor de esa variable título

52:02que es un texto que dice lista un que es

52:05lo que se ingresó en el input.

52:08Entonces, de esta forma vamos a poder

52:10trabajar con este dato. La idea es

52:13guardar ese dato en un array

52:16que va a tener la cantidad de listas que

52:19el usuario vaya creando. ¿Sí? ¿Para qué?

52:21Para no perderla. Porque si nosotros no

52:24la guardamos en ningún lado, no vamos a

52:27poder tener un listado acá.

52:30Entonces esta forma se accede al dato

52:32del input. Sí, en el handler del botón

52:36crear.

52:38A través de data decimos que va a ser de

52:40tipo Ani porque no sabemos qué

52:41estructura va a tener.

52:43Puede tener un input, puede tener tres,

52:455, 10.

52:47Entonces va a ser de tipo ANI,

52:50va a tener cualquier forma.

52:55Bien, hasta ahí vamos bien. ¿Alguna

52:57duda?

53:07Bien.

53:10Bueno, entonces ya tenemos el botón,

53:12tenemos

53:16el alerta o el modal, si se quiere

53:18llamar de alguna forma, también se le

53:19puede llamar modal,

53:21donde vamos a tener el título, el input

53:24y los botones.

53:26El cancel ven que no hace nada,

53:28solamente va a cerrar

53:30la alerta.

53:32Sí.

53:35Bien.

53:39¿Qué más?

53:41Dice, "Agregamos una función a nivel de

53:43la clase para validar que no se ingrese

53:45texto vacío." Claro, porque nosotros si

53:47ahora le ponemos crear, ven que nos

53:50ingresa un texto vacío.

53:53Título. Ven acá también imprimió. ¿Qué

53:54imprimió? Nada. Imprimió. En vez de

53:56imprimir texto, imprimió un vacío.

53:58Entonces, ya empezamos con la validación

54:00de datos.

54:03Sí, es la cual devolverá un buliano para

54:06ver e para validar si existe ese dato y

54:10tiene un contenido. Esta es la función

54:14donde le agregamos

54:21afuera.

54:25La función se llama validar input.

54:29Va a recibir por parámetro.

54:32Sí. E se va a hacer un input, el nombre

54:36de la variable va a ser un input del

54:37parámetro y va a ser de tipo y esta

54:40función devuelve un buliano.

54:43Obligatoriamente va a tener que volver

54:44un buliano sí o sí.

54:47Entonces acá pregunta,

54:49eh, ¿tiene algo ese input?

54:53Si tiene algo, tiene una variable que se

54:55llame título y ese título tiene algo

54:58adentro.

54:59ingresa,

55:01retorna true

55:04y si no se cumple alguna de las dos

55:07va a retornar false.

55:14Bien.

55:17Y acá, bueno, en este caso por consola

55:19nos va a mostrar que debe ingresar un

55:21valor. ¿Por qué? porque va a estar

55:22vacío.

55:24Entonces, ya tenemos la función.

55:30Eh, a ver, quería ver algo.

55:45Bien.

55:58Y acá también puedes limitar si querés

56:00el length largo de de la tarea o lo

56:04corto también, ¿no?

56:05También. Sí, sí, si acá mismo si querés

56:09podes o crear otra validación, otra

56:12otra función.

56:15Sí.

56:17que valide ese largo también.

56:21Eh,

56:23bien,

56:26listo. Ahora lo creamos. Entonces, ahora

56:27lo que tenemos que hacer e

56:30es llamarla.

56:33¿A dónde la vamos a llamar? Acá.

56:36Entonces, vamos a poner validar input.

56:40Y acá ven que nos arroja error. ¿Por

56:42qué? Porque nos pide

56:44Sí.

56:46E a por es primero escondí

56:51y ahora nos pide que dice se espera un

56:55argumento y no se pasó nada. Acá le

56:58tenemos que pasar data y que es el valor

57:01que se va a analizar.

57:05Sí,

57:09guardamos.

57:12Vemos si está funcionando. Crear. Ven

57:14acá. debe ingresar un valor.

57:19Nosotros le ponemos lista uno.

57:24Si ven acá no arrojó ningún cartel,

57:27entonces quiere decir que entró en la

57:29validación.

57:31Así que input existía y tenía una

57:33variable título con algo adentro

57:38y no con un espacio.

57:41Pero no te la está creando igual.

57:44Eh, sí, ¿ves? Ahí le agregamos un

57:46espacio. Eh, no, si si no si acá no le

57:50ponemos nada, no la está creando.

57:52A ver,

57:54no lo crea.

57:58¿Por qué? Porque dice que no tiene nada

58:00dentro. En realidad sí lo crea

58:03lo crea como vacío.

58:05Directamente está vacío.

58:08Agregamos un espacio. ¿Ves? Si le

58:11agregas un espacio quiere decir que

58:12tiene algo adentro.

58:16Si tiene un if. ¿Cómo?

58:17CL. Pero digo

58:19además de la validación igual te lo crea

58:21aunque no tenga nada dentro.

58:24Sí, sí. O sea, esto lo va a crear porque

58:26porque estamos apretando el botón crear.

58:29Entonces, el botón crear

58:31eh el botón crear lo que hace es validar

58:34esto, pero el aler controller ya está

58:36creado con el input. El input se crea,

58:39sí o sí se crea. Lo que se valida es que

58:42esto tenga algo adentro,

58:45esto no sea nulo o undefined.

58:50Sí,

58:53¿ves? Acá nosotros en este caso no está

58:56entrando eh por el segundo.

59:00Nosotros le quitamos este.

59:07¿Ves que

59:09ingresa? ¿Por qué? Porque esto se creó.

59:15Si le agregamos el AN

59:18acá, lo que va a hacer es validar que

59:19título tenga algo adentro.

59:23No importa que como viste, puede ser un

59:24espacio, puede ser un valor. Ven, si

59:27nosotros le ponemos crear,

59:30dice debe ingresar un valor.

59:32Porque acá toma como que título no tiene

59:34nada dentro. Entonces esta condición no

59:36se cumple y no entra lift, sale

59:40directamente y devuelve foss.

59:44Nosotros le ponemos cualquier cosa, no

59:46sé, un espacio.

59:49¿Ves que ya no dice error? debe

59:51ingresar.

59:51Ah, no. Sí, pero me refiero que igual el

59:54objeto fantasma te lo crea.

59:56Claro, el objeto lo va a crear. ¿Por

59:58qué? Porque estamos creando acá el

59:59controller.

1:00:01Título

1:00:01falta una expresión regular para

1:00:04Claro. Sí, seguro. Sí, sí, sí. para

1:00:07validar que tenga que tenga letras, que

1:00:09tenga espacio, que tenga punto. Eh, eso

1:00:13sí va a depender de lo que

1:00:15se desee ingresar, de los límites que se

1:00:17le quiera dar a ese input.

1:00:20Pero primeramente lo que validamos es

1:00:23que por lo menos tenga algo adentro, se

1:00:25haya escrito algún valor.

1:00:29Sí, como en estos dos casos. El usuario

1:00:32queda así, le pone crear y no o no va a

1:00:35ser válido porque no tiene nada dentro,

1:00:37no se pueden crear listas sin nada. Por

1:00:40lo menos esa es la validación inicial

1:00:42que nosotros hacemos.

1:00:49Sí,

1:00:51tengo alguna librería. Bueno, las

1:00:53librerías javas para para validar, ¿no?

1:00:56Sí, sí, librerías que se pueden usar.

1:01:03Bien,

1:01:07bueno, seguimos. Entonces, ya tenemos

1:01:10validado. Ahora lo que vamos a hacer, en

1:01:13vez de mostrar este

1:01:16mensaje en la consola, la idea sería

1:01:19mostrársela al usuario, ¿sí? Porque

1:01:20recordemos que acá el usuario no lo ve,

1:01:23no sabe qué está pasando. Dice, "Ah, yo

1:01:24quiero que era una lista."

1:01:27En este caso es muy obvio, ¿no? Pero

1:01:28bueno, quizás si ingresa algún valor que

1:01:30no está permitido,

1:01:32eh, le voy a mostrar después un cartel

1:01:34que diga ese valor no está permitido.

1:01:38Siempre lo ideal es informarle todo al

1:01:40usuario, un error, si se creó, si no se

1:01:43creó.

1:01:45Entonces, esto que estamos mostrando acá

1:01:46en consola deberíamos mostrarlo en la

1:01:49pantalla.

1:01:51Entonces, acá la práctica nos dice que

1:01:53usemos un toast controller. Sí,

1:01:58vamos a hacer la importación primero

1:02:01después del alert.

1:02:04Importamos el toas. Lo mismo,

1:02:07actualizamos la importación.

1:02:10¿Ven? Acá Toast Controller viene de la

1:02:12misma librería.

1:02:16La importamos. Pasamos la clase

1:02:20y ahora vamos a crear

1:02:23el código. ¿Para qué? Para que muestre

1:02:28ese ese cartelito, ese mensaje que

1:02:30nosotros queremos indicarle al usuario.

1:02:34Bien,

1:02:37presentó AST. Sí, recibe por parámetros

1:02:41un mensaje. En este caso va a ser de

1:02:43tipo string, la variable va a ser de

1:02:45tipo stram

1:02:49similar al que creamos del del alert

1:02:52controller. Definimos la variable toast.

1:02:56Va a ser eh también una llamada

1:02:58asíncrona,

1:03:00¿sí?,

1:03:02al e a nuestra variable que creamos de

1:03:06clase todas control

1:03:10create se va a llamar también y en este

1:03:12caso

1:03:14va a tener eh dos propiedades, una va a

1:03:17ser message y el otra va a ser duration.

1:03:22El mensaje va a ser lo que va a mostrar

1:03:24el texto que va a mostrar ese cartelito

1:03:28que se le va a asignar lo que se recibe

1:03:31por parámetros y así de esta forma

1:03:33podemos reutilizarlo para los mensajes

1:03:35que querramos mostrar.

1:03:37Entonces este va a ser el mensaje y este

1:03:39va a ser el tiempo de duración en

1:03:41pantalla. 2000 va a ser igual a 2

1:03:44segundos.

1:03:49Sí. Y después una vez que ya se creó

1:03:51esta variable, ¿ven? Se definió el

1:03:53objeto, se creó, se asignó a la variable

1:03:55todas, lo mismo que antes, tenemos que

1:03:58mostrarlo en pantalla. Y para mostrarlo

1:04:00en pantalla se usa la propiedad present,

1:04:03¿sí?

1:04:05Como hicimos acá con alerta.

1:04:09Entonces, ahora lo que tenemos que hacer

1:04:11acá es llamar a este a este método dis

1:04:16punto presentas. Sí. En vez de mostrar

1:04:19una consola, ahora directamente lo vamos

1:04:21a mostrar

1:04:23eh

1:04:25en la pantalla.

1:04:29Venimos crear, ¿ven? Debe ingresar un

1:04:32valor, ¿ven? Duró 2 segundos.

1:04:41Crear. En este caso, ¿ven? Si se creó.

1:04:44Okay. Entonces, acá lo que queremos

1:04:47hacer es si se creó lo mismo,

1:04:50llamarlo y decir que se creó

1:04:52correctamente. Pero eso, ¿cómo vamos a

1:04:54hacer?

1:04:56Y eso lo vamos a saber

1:04:59si

1:05:01validar

1:05:03input de un true.

1:05:09Vamos a llamar también mostrar

1:05:11presentas.

1:05:14Y acá

1:05:16lista creada correctamente.

1:05:20Entonces acáamos si esto es true.

1:05:26¿Por qué? Porque tenía algo adentro.

1:05:28Tenía la variable título y tenía algo

1:05:30adentro ese título. Si es true quiere

1:05:32decir que se creó. Entonces si es true

1:05:35muestra este cartel. Y si es false, ya

1:05:38sabemos que va a mostrar esto. Debe

1:05:40ingresar un valor.

1:05:43Guardamos.

1:05:48debe ingresar un valor. Le ponemos lista

1:05:51uno.

1:05:53Lista creada correctamente.

1:06:05Bien, hasta ahí. Vamos bien.

1:06:17Okay.

1:06:24Sí, ahí no estoy la mano.

1:06:27Sí, en el último, en el tost me dio que

1:06:30perdí. Perdón.

1:06:31Bien. No, no, por favor. Bien.

1:06:35Eh, acá la creación del toast se

1:06:38entendió, se usa la propiedad create,

1:06:42el método create que es de esta clase de

1:06:44la clase toast que fue la que importamos

1:06:47acá, ¿sí? que es de la misma, viene la

1:06:51misma librería

1:06:53de Ionic, la que estamos usando con el

1:06:55AR Controller.

1:06:56Y nada más que en este caso el alert es

1:06:59un cartelito en la pantalla que permite

1:07:00agregar inputs y el toas es un cartelito

1:07:04que va a mostrar un mensaje en pantalla.

1:07:07Esa es la diferencia.

1:07:09Después crearse se utiliza el método

1:07:12create en ambos. Sí, es lo que habíamos

1:07:15usado acá también. ¿Ven? create

1:07:18para darle forma, en este caso a la

1:07:21alerta y ahora al toast.

1:07:25Sí, el toast que va a tener un mensaje,

1:07:27que es lo que es el cartelito que

1:07:29nosotros estamos creando, queremos que

1:07:31muestre la pantalla y una duración, es

1:07:34el tiempo que va a estar en pantalla.

1:07:38Entonces, se le va a informar al usuario

1:07:40qué es lo que pasó acá mediante

1:07:43el mensaje que nosotros querramos

1:07:44pasarle.

1:07:46Acá va a ser un lo usamos como variable

1:07:49para reutilizar este toas control.

1:07:52Y lo que estaba viendo es que en este

1:07:54caso nos aparece en amarill en gris

1:07:57y le podemos agregar eh color

1:08:02suces.

1:08:06Vamos a hacer una cosa.

1:08:17Y con este con este atributo o propiedad

1:08:19lo que podemos hacer es definirle de qué

1:08:21color queremos que sea ese e ese toast,

1:08:25esa mensajito en pantalla.

1:08:28Entonces acá lo que podemos hacer es

1:08:30variar input. En este caso, lo que le

1:08:32podemos pasar

1:08:34es danger.

1:08:36Danger va a ser rojo

1:08:39y en este caso lo que vamosos pasar es

1:08:40suces. Suces es verde. ¿Sí? Entonces

1:08:44nosotros al pasarle esto ya no lo que

1:08:46hacemos es poder reutilizarlo

1:08:49ese toast para los mensajes que sean de

1:08:52okay o mensajes de error, advertencias.

1:08:57Sí.

1:08:59Y después una vez que se definió el la

1:09:02estructura de este objeto,

1:09:04el objeto toas controller, que esta es

1:09:07la estructura que va a tener, estos van

1:09:09a ser los datos que se le van a asignar.

1:09:12En este caso, estos dos datos van a

1:09:14venir por parámetros porque van a ser

1:09:16distintos, van a ser personalizados.

1:09:19La duración va a ser siempre fija, va a

1:09:20ser de 2 segundos.

1:09:22Y toda esta forma, todo este objeto lo

1:09:25asignamos a esta variable. y que va a

1:09:27ser todo esto.

1:09:30En esta instancia solo se creó de objeto

1:09:33y acá lo que hacemos con el método

1:09:36present es le estamos indicando que esto

1:09:39que creamos acá lo muestra en la

1:09:41pantalla.

1:09:43Si no agregamos esto, el objeto se va a

1:09:46crear, pero no se va a mostrar en la

1:09:48pantalla.

1:09:50Vamos a comentarlo esto. Ah, les voy a

1:09:51mostrar en los comentarios.

1:09:54Entonces mostramos eso. Crear. Ven que

1:09:57acá no nos muestra nada. ¿Por qué?

1:10:00Porque este objeto se creó, pero no se

1:10:03mostró en la pantalla. No le estamos

1:10:05diciendo mostrarlo. Entonces guardamos,

1:10:09creamos. Ven, debe ingresar un valor.

1:10:14¿Y dónde lo llamas al message para

1:10:17ponerle? Debe ingresar un valor.

1:10:19Y esto acá en el validar input.

1:10:22Si, bueno, si está okay, le decimos que

1:10:25retorne true y si no, acá llamamos al

1:10:28método

1:10:31Claro. Exactamente.

1:10:32Y acá en este caso le pasamos el mensaje

1:10:34para este caso.

1:10:36En este caso es dice debe ingresar un

1:10:38valor. ¿Por qué? Porque acá se validó y

1:10:40no hay nada. Entonces el para el en este

1:10:43caso, el mensaje para el usuario va a

1:10:45ser que de ingresar un valor y como es

1:10:47un error le pasamos danger, que quiere

1:10:50decir que lo va a pintar de rojo. Danger

1:10:54es rojo.

1:10:55Y luego lo llamamos acá arriba,

1:10:58que es donde tenemos el botón crear.

1:11:01Acá es donde llamamos al variar input.

1:11:04En el if les preguntamos si devuelve

1:11:07true. Acá se valida que sea true

1:11:10porque recuerden que este va a ser un

1:11:12buliano, va a devolver un buliano

1:11:13siempre el método validar input.

1:11:17¿Sí? Entonces, o va a devolver true o va

1:11:19a devolver false. Si es true, si no le

1:11:22ponemos nada, quiere decir que es true.

1:11:24Si es true, va a estar okay. Y acá le

1:11:27decimos que nos muestre este cartelito.

1:11:30Presen todas,

1:11:32lista creada correctamente. Y para este

1:11:33caso va a ser suces, que quiere decir

1:11:36que va se va a pintar de verde.

1:11:39¿Si? Entonces ya tenemos los dos casos.

1:11:43Si no se ingresó un valor y si se

1:11:45ingresó un valor y se creó la lista.

1:11:51Sí se entendió ahí o querés repasar algo

1:11:53más.

1:11:54No, eh si no ingresó un valor, ¿dónde lo

1:11:57llamaste? El dispresent host.

1:11:59En el validar input.

1:12:02Y si

1:12:03método validar input.

1:12:05Eso es si tengo que ingresar un valor y

1:12:08si lo ingresé arriba. Claro. Y si le

1:12:10ingresó

1:12:12en el botón crear,

1:12:14crear.

1:12:15Sí, lo que hace, bueno, tiene la data

1:12:17que esto lo vimos. Acá está el if, llama

1:12:20validar input. Si este devolvió un true,

1:12:23quiere decir que no mostró este cartel.

1:12:25Devolvió true e ingresó por este if y

1:12:28retornó.

1:12:31Entonces, si retorna true, ingresa este

1:12:33if y acá muestra este mensaje

1:12:35en crear. Okay.

1:12:37Exactamente.

1:12:38Gracias. Ahí es donde indica el usuario

1:12:39que la lista fue creada.

1:12:41Gracias.

1:12:43De nada. Entonces, ahora sí vamos a

1:12:45probar. Primero dijimos el crear, ¿ven?

1:12:48No tiene nada. Debe ingresar un valor en

1:12:50rojo. Y si no ingresamos un valor,

1:12:54lista creada correctamente. ¿Ven? Ahí

1:12:56cambio de color a verde. ¿Por qué?

1:12:58porque tiene un valor.

1:13:00Entonces ahí se validó correctamente.

1:13:08Bien,

1:13:10entonces ya estamos validando los datos.

1:13:13Estos console lock los vamos a ir

1:13:14sacando. Si recuerden que a medida que

1:13:17que se vayan validando lo que ustedes

1:13:20van desarrollando, los console lo log

1:13:21los pueden ir quitando. Sí, ya no van

1:13:23haciendo falta porque después le puede

1:13:25quedar ahí alguno colgado. Lo ideal es

1:13:27que no no quede nada en un console log y

1:13:31lo que quieran mostrar se muestre por

1:13:32pantalla.

1:13:34Sí, los consol lo log para ustedes para

1:13:37el desarrollo, nada más.

1:13:42Bueno, e

1:13:48bien, les quería mostrar el tema de los

1:13:50comentarios.

1:13:53Sí, esta es la estructura que va a

1:13:55tener.

1:13:57Sí, acá vamos a usar decoradores.

1:14:02Vamos a poner description.

1:14:08Eh,

1:14:11bien,

1:14:13por ahora este.

1:14:16Entonces, poniendo una barra y dos

1:14:19asteriscos y si le damos un tab, nos va

1:14:21a crear esta estructura y después con el

1:14:25vamos a poder acceder a los decoradores.

1:14:29Cada método, como les decía y que

1:14:30ustedes creen, en este caso este que

1:14:32estamos creando ahora, tiene que tener

1:14:34una un pequeña descripción de qué es lo

1:14:37que hace ese método o función. Si en

1:14:41este caso agregar lista muestra un alert

1:14:44para agregar una nueva lista.

1:14:47Sí, está perfecto. Es lo que hace.

1:14:52En este caso no hay parámetros ni hay

1:14:56valores de retorno, entonces no hace

1:14:58falta.

1:15:00Vamos a la segunda,

1:15:02le damos un tab. Bien, ¿ven? Y ahí

1:15:05automáticamente

1:15:08identificó que hay parámetros y que hay

1:15:10valores de retorno. Lo que nos falta acá

1:15:13es el decorador de descripción.

1:15:17¿Ven? Acá nos da un posible una posible

1:15:20descripción. Valía que el input no esté

1:15:22vacío. Perfecto, es lo que hace.

1:15:26Y acá tenemos parámetro input,

1:15:30¿sí?

1:15:32De tipo Ani

1:15:35es el input que se va a validar y

1:15:37valores de retorno

1:15:42de devuelve

1:15:45acá devuelve un buleano. True el input

1:15:48es válido. False si no lo es.

1:15:51Sí,

1:15:54lo mismo acá

1:16:03muestra un toat con el mensaje y color

1:16:05especificado que son los que vienen acá.

1:16:10Mensaje, texto

1:16:13que se va a mostrar el toast.

1:16:16Color color

1:16:19del toast.

1:16:21Bueno, esto no hace falta porque son muy

1:16:23largos.

1:16:29Bien. Y en este caso valor de retorno no

1:16:31tiene, está vacío. Nani. Cuando es Ani

1:16:34no hace falta.

1:16:36Entonces, lo que habíamos en el

1:16:39documento del TP que hablara acá hablaba

1:16:41de los comentarios,

1:16:43sí se refiere a estos comentarios, no a

1:16:47estos comentarios.

1:16:50muestra el tobastos.

1:16:54Por ejemplo, esto no va. Sí,

1:16:58esto si ustedes cuando están

1:16:59desarrollando lo quieren agregar porque

1:17:01esto, por ejemplo, no está,

1:17:06falta mostrar el tobast. Esto lo pueden

1:17:10dejar así, pero solamente cuando están

1:17:12desarrollando. Una vez que ustedes

1:17:14hicieron esto, que agregaron el togas,

1:17:17el mensajito este, el comentario lo

1:17:19borra. Lo ideal es que acá no esté

1:17:21comentado nada. Dentro del código no

1:17:24debe haber comentarios,

1:17:27solamente los comentarios donde se

1:17:29explica lo que hace la función. ¿Para

1:17:31qué es esto? Y bueno, para cuando un

1:17:33desarrollador, en este caso son

1:17:34funciones cortitas, pero si nosotros

1:17:36tenemos un choclazo acá de una función

1:17:39que llama otra y que llama otra, lo

1:17:41ideal es que un desarrollador que no

1:17:43creó esta función o método

1:17:46con solamente este pequeño texto

1:17:49entienda qué es lo que hace.

1:17:52Sí. Bueno, a ver qué hace esto. Muestra

1:17:54un toat con el mensaje. Ah, listo. Yo

1:17:55estaba buscando, quería cambiarle, no

1:17:57sé, el color al toast o quería cambiarle

1:17:59la duración al toast. Entonces, ya sé

1:18:01que está acá.

1:18:03Sí, acá tiene los parámetros. Bueno,

1:18:05¿qué dice? Tiene dos parámetros. A ver

1:18:06qué recibe el primero. Texto que se va a

1:18:08mostrar el todas y el color. Perfecto.

1:18:11Entonces, esto es para una un

1:18:14documentación del código.

1:18:16Sí. Y esto es lo que documenta las

1:18:19funciones o métodos dentro del código.

1:18:23Deben ir, como les decía, en los métodos

1:18:25o funciones, no en el constructor, no en

1:18:29la clase, no en el component. Esto no

1:18:32hace falta porque porque esto es código

1:18:34puro del componente en sí. Esto va a ser

1:18:37todo lo mismo, ¿no? No no no es

1:18:39necesario eh que tenga un comentario,

1:18:43pero las funciones que ustedes crean,

1:18:45¿sí? ¿Por qué? Porque acá adentro puede

1:18:47tener cualquier cosa,

1:18:50cada función va a ser algo en

1:18:51particular.

1:18:53Entonces,

1:18:55mínimamente que va a tener descripción.

1:18:58Esta tiene que estar en todas,

1:19:00una pequeña descripción nada más. No

1:19:03necesariamente se necesita un choclo.

1:19:06Claro, una pequeña descripción. Listo,

1:19:09cancel.

1:19:11¿Qué más? Después puede tener parámetros

1:19:13si tiene parámetros y valores de retorno

1:19:15en el caso que lo tenga.

1:19:19Sí,

1:19:21lo mismo acá si tiene dos parámetros,

1:19:23los dos parámetros

1:19:26así cortito. V.

1:19:28Entonces esto tiene que estar dentro de

1:19:30todo el código que ustedes describan

1:19:36en TScript, no en HTML. Acá tampoco

1:19:39puede haber comentarios.

1:19:42comentarios que ustedes agreguen acá son

1:19:43para ustedes.

1:19:47A ver, ¿cómo era esto?

1:19:55Eso es un comentario.

1:20:00Lo mismo que antes. Estos comentarios

1:20:01pueden ser para falta el botón de

1:20:05guardar, por ejemplo. Entonces, con esto

1:20:08ustedes tien una ayuda memoria de que le

1:20:10falta algo para desarrollar,

1:20:13pero una vez que lo desarrollan, ese

1:20:15comentario no puede existir. Tiene que

1:20:17ser un código limpio. Sí.

1:20:22Los que se le pide la entrega es este.

1:20:28Repito, escriben barra asterisco

1:20:31asterisco y le dan un tab y le genera

1:20:35automáticamente

1:20:37el formato.

1:20:40¿Se entendió? ¿Alguna duda?

1:20:53Bien,

1:20:59seguimos.

1:21:05Agregamos el toas. Bueno, acá

1:21:07reemplazamos consol. Ya lo hicimos.

1:21:10Documentación. Ah, bueno, justo acá

1:21:12estaba la documentación. Acá está todo

1:21:13explicado. Sí.

1:21:16E bueno, acá también el nombre de la

1:21:17función

1:21:19se puede agregar, por ejemplo,

1:21:23eh, este acá.

1:21:27Estos son todos los decoradores que se

1:21:28pueden usar, function y acá el nombre.

1:21:32Sí,

1:21:35me haya faltado ese. Entonces, estos son

1:21:37los dos mínimos obligatorios,

1:21:41funcion y descripción. Description.

1:21:44Y después en caso que tenga parámetros,

1:21:46todos los parámetros y si tiene valor de

1:21:49retorno en retos.

1:21:54Así que bueno, acá lo tienen bien

1:21:56detallado.

1:21:59Acá le explica lo que le expliqué

1:22:00recién. Son los que hay que agregar.

1:22:05Bien,

1:22:08vamos por la mitad. ¿Qué hora es?

1:22:11Bueno, podemos hacer un pequeño corte.

1:22:13Vamos a instalar esto mientras después

1:22:15seguimos. Dice, "Agregar servicio para

1:22:18guardar las listas." Bien, acá ya vamos

1:22:20a empezar a guardarlas. Sí, como vimos,

1:22:22eh ya estamos obteniendo el nombre. Y lo

1:22:25que les decía es que tenemos que

1:22:26guardarlo en una ray, ¿sí? Porque va a

1:22:28haber varias listas y para eso

1:22:30necesitamos una Ray. Y vamos a empezar a

1:22:33trabajar con servicios.

1:22:36Vamos a ejecutar el comando.

1:22:40Teníamos la otra terminal acá, ¿no?

1:22:42Vamos a abrir una nueva.

1:22:51Ionic generice, lo vamos a guardar en la

1:22:55carpeta services

1:22:57y el servicio llamar lista.

1:23:02Le damos un enter

1:23:06acá. ¿Qué nos dice pseudo? Le ponemos

1:23:08que no.

1:23:13Bien.

1:23:15Services. Lista.

1:23:19Bien. Eh,

1:23:22lo que veo es que

1:23:25nos pasó la otra vez, eh, es que la esta

1:23:27nueva versión de Ionic le pone

1:23:30decoradores, ¿sí?, a los servicios.

1:23:37¿Ven? dejó dejó de ponerle esto que le

1:23:40ponía acá, inyectable,

1:23:44y ahora usa decoradores y tampoco le

1:23:46pone el nombre punto service,

1:23:50que es como se lo llamaba la lista, a

1:23:52los servicios. Vamos a cambiar el nombre

1:23:54lista punsice.

1:24:00Y en este caso le vamos a agregar lo

1:24:01mismo porque este archivito

1:24:05lista pun observes

1:24:08funcionan en conjunto. Lo cerramos

1:24:14no guardar.

1:24:22Lista.

1:24:30Bien.

1:24:33Okay. Lista service. Vamos a poner el

1:24:36nombre.

1:24:40Y acá

1:24:42tiene ah, tenía otro decorador que es

1:24:45in.

1:24:52Por ahora vamos a seguir trabajando de

1:24:53esta forma.

1:25:03Bien.

1:25:09cambiamos.

1:25:14Volvemos acá.

1:25:21Bien. Bueno, ya tenemos creado el

1:25:23servicio.

1:25:25E ahora tenemos que crear, bueno, el

1:25:28constructor

1:25:31constructor.

1:25:33Y acá nos dice que queremos una un

1:25:36objeto publicas

1:25:40de tipo AN. Bien,

1:25:44decimos que va a ser una Ray cuando le

1:25:46indicamos los corchetes y en este caso

1:25:48va a ser de tipo ANI. Sí, no va a tener

1:25:51forma por ahora. Inicialmente lo vamos a

1:25:54crear así, lo inicializamos vacío, ¿sí?,

1:25:56obligatoriamente

1:25:58y decimos que va a ser público. Eh, si

1:26:00está así es lo mismo.

1:26:03Recuerden que tenga la palabra public o

1:26:04no la tenga,

1:26:08va a ser public. Sí, es lo mismo ponerla

1:26:11de las dos partas.

1:26:13La dejamos para que se entienda

1:26:18bien. Bueno, e llegamos entonces a este

1:26:20hasta este paso.

1:26:22Vamos a hacer un corte hasta las 8:30 y

1:26:25después seguimos con la otra mitad de la

1:26:27práctica.

1:26:32Sí, pongo acá.

1:26:37Volvemos 20 30 horas.

1:26:41Bien. Bueno, nos vemos en 15 minutitos.

1:45:06Bueno, seguimos.

1:45:13Les quería eh compartir primero

1:45:19un documento

1:45:21e que tiene la guía de nomenclaturas y

1:45:23buenas prácticas de Tcript, ¿sí? y más

1:45:26que nada cómo se deben nombrar las

1:45:29funciones, bueno, variables, métodos,

1:45:32etcétera. Y acá algunas se usan con

1:45:36camel case,

1:45:38otras con Pascal case y acá les dice

1:45:40dónde, clases, interfaces, tipos. Sí,

1:45:43acá hay ejemplos,

1:45:45upper case e constantes globales,

1:45:49valores que nunca cambian, así que son

1:45:51const.

1:45:53Acá tenemos nomenclatura de variables y

1:45:55ejemplos de correctos incorrectos.

1:46:00Sí,

1:46:02más o menos lo fuimos nombrando de esta

1:46:06forma, pero bueno, acá está eh más que

1:46:08nada un documento donde tiene todo para

1:46:11que para que lo tengan. Lo que me iba a

1:46:14fijar es si lo subí a ver al aula,

1:46:18así ya les confirmo.

1:46:28A ver, clase unidad 7

1:46:31práctica no está. Se lo subo yo mismo.

1:46:35Si lo tienen

1:46:37esto.

1:46:40Unidad 7.

1:46:434

1:46:48ya.

1:47:22Siguiente. Eh,

1:47:26n.

1:47:35Bien, el arch se llama guía

1:47:36nomenclaturas y buenas prácticas en

1:47:38Typescript.

1:47:41Guardar.

1:47:51Bien, entonces ya lo deberían tener en

1:47:54la unidad 7 del aula virtual

1:47:59para que lo puedan descargar y bueno y

1:48:01utilizarlo

1:48:03en caso que que tengan dudas. Bueno,

1:48:07como les decía, está el nombre de todo,

1:48:10clases, métodos, interfaces.

1:48:13Acá les da ejemplos de cómo llamarlos.

1:48:18Sí, hay un montón interfaces.

1:48:22Bueno, antes las interfaces eh se usaba

1:48:24como prefijo la I a la izquierda del

1:48:28nombre de interface. Ahora ya no se usa

1:48:29más.

1:48:32Sí.

1:48:37Bueno, acá les dice el por qué.

1:48:40[carraspeo]

1:48:42Nomenclatura de propiedades,

1:48:45variables de constructor,

1:48:51los modificadores de acceso, bueno, que

1:48:53nosotros vimos public private.

1:48:56¿Qué más está? Está protect también.

1:48:58¿Para qué se utiliza cada uno?

1:49:02Más nomenclatura de NS.

1:49:07Bueno, está bastante completo este este

1:49:09documento.

1:49:11Componentes. ¿Ven el nombre del

1:49:13componente?

1:49:19Servicios.

1:49:20Mir acá lo que le decía nombre punto

1:49:22service, que ahora no sé por qué no lo

1:49:24pone más eh

1:49:28a cuando se instala,

1:49:33pero así deberían estar los servicios.

1:49:35El nombre del servicio punservice.ts.

1:49:40Los archivos interface también el nombre

1:49:42interface punto interface

1:49:46los modelos también los W.

1:49:51los pipes. Vamos a ver qué es un pipe.

1:49:58Y bueno, la organización de carpetas,

1:50:00ejemplo profesional acá para que lo

1:50:02tengan para sus proyectos.

1:50:06Sí. Components, page, service,

1:50:08interfaces, modelos.

1:50:16Bueno, acá tienen toda una guía bastante

1:50:18completa.

1:50:24Sí, acá hay un resumen al final y una

1:50:27conclusión. Así que bueno, ya tienen

1:50:30este archivo subido ahí al aula. Les

1:50:31repito, era unidad 7. La unidad 7 ya lo

1:50:35tienen listo.

1:50:38Bien,

1:50:40después descárguenselo, véanlo así.

1:50:44lo tiene. Bueno, volvemos.

1:50:52Eh, ventana. Vamosamos.

1:50:56Y acá creo que había algo.

1:51:00Está bien. Creo que el primero acá.

1:51:02¿Ven? Este está mal.

1:51:04Agregar lista.

1:51:07Estaba con la primera letra mayúscula y

1:51:09como vimos va con minúscula. Y tenemos

1:51:12que arreglarlo acá, si no va a dar

1:51:14error. Correcto. Bien. ¿Alguna duda

1:51:17hasta acá? ¿Algúo que quieran consultar?

1:51:21No se hemos quedado acá.

1:51:26Lista Service.

1:51:29Eh, seguimos. ¿Algo quieren consultar?

1:51:37Bien. Bueno,

1:51:45seguimos avanzando.

1:51:47Estamos en el paso 19, ya creamos el la

1:51:52variable listas

1:51:54que va a almacenar el rey de listas.

1:51:58Ahora nos pide que creemos la la función

1:52:00o método crear lista.

1:52:03Vamos a copiar esto primero y ahora

1:52:05vemos qué es lo que hace esto. Todo va

1:52:08dentro del e

1:52:11servicio. Sí, el servicio va a ser

1:52:13encargado de trabajar con las listas,

1:52:16tanto de crearlas, modificarlas.

1:52:19Bien, crear lista.

1:52:23Recibe por parámetro nombre lista que es

1:52:25de tipo stram.

1:52:27Acá creamos un objeto de tipo lista.

1:52:31Sí, lo definimos con LED y acá creamos

1:52:34el objeto entero.

1:52:36Dice, bueno, creamos una variable de

1:52:38tipo array. Estos son los comentarios

1:52:42que solamente son informativos que

1:52:43después no deberían quedar.

1:52:46Bien, ¿qué va a tener una ID?

1:52:51Inicialmente lo estamos hardcodeando en

1:52:53cero. Un título, el nombre de la lista,

1:52:57que este va a ser el que reciba por

1:52:58parámetros.

1:53:00¿Qué más? La propiedad eh creada en que

1:53:03va a tener la fecha de creación

1:53:05terminada en en este caso va a ser nula.

1:53:08El dato va a ser nulo. ¿Por qué? Porque

1:53:10no tenemos fecha de cuando se terminó

1:53:12todavía porque recién se acaba de crear.

1:53:15completada va a estar en false y acá en

1:53:18items va a ser la lista de actividades

1:53:22y acá le podemos poner actividades mejor

1:53:25actividades.

1:53:31Y una vez que se creó este objeto, lo

1:53:34que vamos a hacer, vamos a llamar al

1:53:36objeto de a la variable listas, que es

1:53:38el objeto global, que es un lo definimos

1:53:42como un array de anis.

1:53:44Sí. Y con push le vamos a insertar este

1:53:48nuevo objeto listas.

1:53:52Sí, acá dice, "Ingresamos en el array

1:53:56de listas el objeto con los datos

1:53:58creados." Entonces acá se van a empezar

1:54:00a guardar en esta raí.

1:54:08Vamos bien,

1:54:16perfecto. Seguimos.

1:54:20Bueno, acá está tiene todo como queda.

1:54:23Ahora nos dice que vamos a crear la

1:54:24función guardar storage. Sí, para

1:54:27guardar las listas en el storage

1:54:30solo se pueden guardar los datos como

1:54:32texto plano. Eso téngalo en cuenta.

1:54:39Vamos acá.

1:54:41Bien, guardar estas se llama. Definimos

1:54:44una variable que se llama string listas.

1:54:47va a ser el tipo stram.

1:54:50¿Y qué le vamos a asignar?

1:54:52Vamos a usar e

1:54:57e la función de JavaScript,

1:55:01que es de Jason para convertir objetos.

1:55:06En este caso, ¿qué vamos a convertir?

1:55:08Nuestro array de listas.

1:55:10Sí, mediante el método Tringify

1:55:15lo que hace es convertir un objeto,

1:55:19en este caso es una array de objetos

1:55:23en texto plano porque como dijimos el

1:55:26local storage solo almacena texto plano,

1:55:29entonces no puede almacenar un objeto,

1:55:32pero

1:55:34con esto podemos convertirlo

1:55:37en un Jason.

1:55:39Sí.

1:55:40En Jason dijimos que va a ser un texto

1:55:42plano. Acá está.

1:55:45Luego

1:55:47mediante local storage,

1:55:50si esta es una variable reservada del

1:55:53tipo storage, un nombre reservado

1:55:58que mediante el método set item va a

1:56:02guardar datos en el local storage. Local

1:56:05storage lo que tenemos acá.

1:56:12Eh, memoria, no, memoria no era. ¿Dónde

1:56:16está

1:56:18aplicación?

1:56:21Almacenamiento local.

1:56:23Bueno, acá están en español.

1:56:27Tenemos el local storage, que es

1:56:29almacenamiento local, y el session

1:56:30storage, que es el almacenamiento de la

1:56:32sesión. Y nosotros estamos trabajando

1:56:34con este puerto, con el local host.

1:56:39Acá quedó, bueno, quedó el eh guardado

1:56:42el de la clase anterior. Esto lo vamos a

1:56:45ver si se puede eliminar

1:56:48acá. Borrar. Bien.

1:56:51Si ven, y están los dos vacíos.

1:56:53Entonces, nosotros vamos a trabajar con

1:56:54el local storage, dijimos almacenamiento

1:56:56local.

1:56:58El local storage lo que hace es guardar

1:57:00una clave y un valor. Sí, la clave se

1:57:04utiliza para poder acceder a ese valor

1:57:06que se que fue almacenado.

1:57:10Entonces, mediante set item, vamos a

1:57:13guardar los datos que nosotros querramos

1:57:15en el local storage y le vamos a tener

1:57:18que pasar dos valores

1:57:20que son los que dijimos recién,

1:57:23una clave

1:57:25y el valor

1:57:27clave.

1:57:29En este caso se va a llamar listas

1:57:32y el valor va a ser el contenido

1:57:36de nuestra rey de listas que lo

1:57:38transformamos

1:57:40a texto plano. Sí, acá dice se va a

1:57:44ingresar dos parámetros. El primero va a

1:57:46ser un nombre y el segundo el contenido.

1:57:48El nombre hace referencia a la clave,

1:57:51clave y valor. Entonces de esta forma

1:57:55nosotros vamos a almacenar nuestro

1:57:57listado en el local storage para para

1:58:01persistir esos datos y que no se pierdan

1:58:04ante un eventual

1:58:07refresco del de la aplicación. En este

1:58:10caso, nosotros estamos trabajando con

1:58:11con

1:58:13el navegador. Si lo refrescamos podemos

1:58:16perder lo que tenga nuestro array.

1:58:20Y de esta forma al guardarlo en el local

1:58:22storage

1:58:23nos queda el y podemos recuperarlo, ¿sí?

1:58:27En caso de que se actualice el

1:58:28navegador.

1:58:30Bien, creada nuestra

1:58:33nuestro método,

1:58:36ahora lo tenemos que llamar.

1:58:41Entonces, en nuestra función crear

1:58:43lista,

1:58:45una vez que guardamos nuestro nuevo

1:58:47objeto en la Ray, vamos a llamar a

1:58:51guardar.

1:58:55Entonces, de esta forma se inserta el

1:58:57objeto en el array y luego se guarda.

1:59:03Entonces, esto

1:59:05está centralizado en nuestro servicio.

1:59:07Sí.

1:59:08en nuestro servicio de lista.

1:59:13Bien, ahora lo que tenemos que hacer es

1:59:15llamar a este eh servicio.

1:59:20¿Dónde lo vamos a llamar?

1:59:22En el tab uno, que es donde nosotros

1:59:26estamos agregando la lista. ¿Dónde?

1:59:29Bueno, luego de validarla.

1:59:32Sí. Para eso, ¿cómo hacemos? Tenemos que

1:59:36declarar nuestra variable de servicio.

1:59:41Eh, lista service.

1:59:43Hacemos la importación de nuestro

1:59:45servicio. ¿Ven? Services, lista service,

1:59:50está en esta ubicación. Services, lista

1:59:53services.

1:59:55Y entonces ahora nosotros podemos

1:59:57acceder a todos los objetos públicos.

2:00:03Sí, vamos a acceder a listas, podemos

2:00:06acceder a la el método crear lista y

2:00:08guardar estash.

2:00:10Nosotros, por ejemplo, venimos acá, era

2:00:14eh luego que se valide el input

2:00:18lista service punto, ven, nosotros

2:00:20podemos acceder a cualquiera de todos

2:00:23estos, ya sea métodos o variables. ¿Por

2:00:26qué? Porque son todos públicos.

2:00:28Entonces,

2:00:30la ray de listas se va a trabajar en el

2:00:33servicio.

2:00:35Entonces, este va a ser privado.

2:00:38¿Para qué? Para que solo se pueda

2:00:39invocar dentro de esta clase.

2:00:43Entonces, acá ahora ponemos punto ven y

2:00:45ya desapareció el el array. No se tiene

2:00:48que poder acceder. Y guardar storage

2:00:51tampoco.

2:00:53¿Por qué? Y porque se está llamando acá.

2:00:55Entonces vamos a ponerlo como privado.

2:00:59Nosotros solo queremos acceder a crear

2:01:01lista.

2:01:05¿Ven? Ahora si ponemos puntos solamente

2:01:09podemos acceder al método crear lista.

2:01:14Y este método nos pedía el nombre de la

2:01:15lista y el nombre de la lista estaba en

2:01:18data

2:01:20y en la variable título, que es el

2:01:23nombre que le dimos al input.

2:01:25Sí, donde se guardaba el dato. Eso es lo

2:01:29que tenemos que pasarle como nombre de

2:01:31la lista.

2:01:32Entonces, invocamos al servicio, lista

2:01:36service, como lo declaramos nosotros acá

2:01:38arriba,

2:01:40y al método crear lista. Entonces, lo

2:01:43creamos. El servicio se encarga de

2:01:45crear, crea el objeto, como dijimos, con

2:01:47el nombre que le pasamos, lo insertal en

2:01:50array y luego guarda el storage.

2:01:54Entonces vamos a guardar esto acá.

2:01:57Vemos si compiló.

2:02:00Compiló todo bien. Y vamos a probar

2:02:06lista uno. Crear. Lista creada

2:02:09correctamente. ¿Ven? Ahora ya en el

2:02:12local storage tenemos nuestro objeto

2:02:16listas, clave listas

2:02:19y acá ven, tenemos todo el objeto. Si

2:02:22bien acá lo tenemos como texto plano,

2:02:24acá lo podemos ver como objeto.

2:02:26Sí. Bueno, acá tenemos la fecha. Acá

2:02:29tiene 2 horas, 3 horas más.

2:02:32ID0 terminada en nulo porque dijimos que

2:02:35iba a ser nulo. Actividades vacío

2:02:37completada fals. Título lista uno que

2:02:40fue el que nosotros le dimos. Si creamos

2:02:43otra lista dos.

2:02:48¿Ven? Ya se actualizó. Lista uno, lista

2:02:51dos,

2:02:54cada una con su horario.

2:02:57Y así se va a ir se van a ir agregando

2:03:00todos.

2:03:01los que vaya agregando el usuario. Ya

2:03:04tenemos tres

2:03:06y nosotros actualizamos.

2:03:10Se sigue manteniendo la ray.

2:03:14¿Qué pasa si insertamos otra?

2:03:19Se perdió y se pisó.

2:03:24Si bien el objeto se mantuvo

2:03:28en el local storage

2:03:30al momento de guardar,

2:03:33porque nosotros habíamos actualizado,

2:03:35habíamos refrescado, al momento de

2:03:37guardar

2:03:39se pisó. ¿Por qué? Y porque cuando carga

2:03:41el componente nuevamente, esto se carga

2:03:44como Ani, se carga vacío.

2:03:47Y nosotros lo que hacemos acá en guardar

2:03:49storage, le estamos diciendo que guarde

2:03:50la ray. Y en este caso, cuando agregamos

2:03:53la lista cuatro, el array estaba vacío,

2:03:57por eso es que lo pisó,

2:04:00¿sí? Y quedó solamente la lista cuatro.

2:04:02Entonces, antes de guardar,

2:04:06lo que nosotros deberíamos hacer, por

2:04:09ejemplo, en el constructor es crear un

2:04:12nuevo un nuevo método que se encargue de

2:04:14recuperar lo que hay con esta clave en

2:04:17el local storage. lo recupera, lo asigna

2:04:21al a nuestro objeto de listas, a nuestro

2:04:24radio de listas,

2:04:26y una vez que lo que lo asigna, recupera

2:04:28el valor, recupera todo lo que tenga

2:04:30dentro y recién ahí después puede seguir

2:04:33insertando.

2:04:35Sí,

2:04:37eso es lo que nos faltaría.

2:04:40Por ahora ya vemos que guarda

2:04:43bien. Hasta ahí vamos bien. ¿Alguna

2:04:45pregunta?

2:04:54Bien,

2:04:57¿qué dice acá?

2:04:59Agregamos un control de validación antes

2:05:00de ingresar los datos. Bueno, esto ya lo

2:05:01habíamos hecho.

2:05:03Lo que hace acá, en vez de validarlo

2:05:06directamente, ¿ven? Le asigna el

2:05:08resultado de validar input a una

2:05:09variable.

2:05:11Pero nosotros, ¿qué hicimos en el tab

2:05:13uno?

2:05:14validamos esto acá. Lo que dice que es

2:05:17es válido.

2:05:21Ven, en el ejercicio hace esto.

2:05:27Es lo mismo. Nada más que acá declaramos

2:05:29una variable más.

2:05:33Sí, el resultado que nos da validar

2:05:35input, que dijimos que iba a ser un

2:05:36buleano,

2:05:38se lo asignamos a esta variable. En

2:05:40cambio, como lo teníamos nosotros,

2:05:43eh, lo validamos directamente.

2:05:49Lo dejamos así y ustedes en la práctica

2:05:51lo tienen de esta forma.

2:05:54Bien, entonces al validarlo,

2:05:57¿sí? Ya nosotros si está si está bien el

2:06:00dato, si se cargó un dato correctamente,

2:06:03ya podemos guardarlo en nuestro array y

2:06:06luego mostrar

2:06:08el toast donde se creó la lista.

2:06:13Bien,

2:06:17¿qué nos dice? Validamos si la lista fue

2:06:19creada. Para esto, en el servicio

2:06:21devolvemos, debemos retornar un valor.

2:06:24En este caso podemos retornar el nombre

2:06:26de la lista.

2:06:31Entonces, en el servicio que nos dice

2:06:32acá, le damos un return,

2:06:38eh, el nombre devuelve si objeto lista

2:06:41punto

2:06:47también puede retornar un buuliano, ¿no?

2:06:52Pero bueno, en este caso como no se

2:06:53valida nada, a no ser que arroje error,

2:06:56siempre va a volver el título.

2:07:03Eh, entonces acá

2:07:06lo que nos va tenemos que hacer es

2:07:07asignar ese valor

2:07:11y después hacer la verificación.

2:07:32Esto que tenemos acá, ¿ven? Que ahora

2:07:34devuelve

2:07:36el título de la lista.

2:07:40¿Qué estamos haciendo? Lo estamos

2:07:41asignando a la variable creado. OK. Y

2:07:43acá hacemos lo mismo que seamos en

2:07:45validar, validar input.

2:07:48Variamos que esto tenga algo adentro y

2:07:50qué va a tener y el título de la lista.

2:07:55Sí, es como para verificar que se creó.

2:07:58Acá se verifica si la variable tiene un

2:07:59valor, es decir, que fue creada.

2:08:02Y recién ahí devolvemos entonces nuestro

2:08:06toast con que la lista se creó correcta.

2:08:11Eh, ¿qué pasó acá? abre pisado.

2:08:16Bien, entonces tenemos la validación

2:08:18primero de de la del título de la lista,

2:08:21ingreso en el input del usuario y

2:08:23después tenemos la validación de que se

2:08:25haya creado el objeto lista dentro de

2:08:29nuestro array del servicio y guardado en

2:08:31el storage. Esto se hizo OK. recién ahí

2:08:34le respondemos al usuario

2:08:36eh que la lista se creó correctamente.

2:08:44Bien, acá, bueno, no vamos a ver ningún

2:08:46cambio en el COI en el la forma de

2:08:48actuar.

2:08:51Lista uno nuevamente.

2:08:55Acá como guardamos esto se volvió a

2:08:58refrescar.

2:09:01Bien.

2:09:06Bueno, acá si refrescamos elador y

2:09:07agregamos una nueva lista, podemos ver

2:09:10que los datos de la lista creadas antes

2:09:11se borraron.

2:09:13Era porque no la recuperamos. Y para

2:09:16evitar, bueno, como les decía, para

2:09:17evitar que eso suceda, lo primero que

2:09:19tenemos que hacer es cargar storage.

2:09:24Sí, vamos a crear esta nueva, este nuevo

2:09:26método en el servicio. Y luego de

2:09:30guardar

2:09:37también lo vamos a definir como privado

2:09:39porque solamente queremos que se acceda

2:09:42dentro del servicio y no desde fuera,

2:09:45desde donde se lo invoque al servicio.

2:09:48Bien, ¿qué vamos a hacer? Definimos una

2:09:50constante. ¿Por qué? Porque este valor

2:09:52no se va a modificar.

2:09:55Lo mismo que antes, local storage para

2:09:57acceder a sus métodos o funciones.

2:10:01Y en este caso era set para setear, para

2:10:04guardar, para obtener va a ser get

2:10:09item. Y acá le tenemos que pasar la

2:10:12clave. ¿Qué queremos obtener de local

2:10:15storage? Y lo que tenga dentro esta

2:10:17clave.

2:10:20listas es la clave y queremos obtener

2:10:23nuestro array.

2:10:26Sí, nuestro array.

2:10:28Entonces, lo que esté dentro de este de

2:10:30esta clave

2:10:34lo vamos a asignar a listas storage. Acá

2:10:37valiamos si es nulo,

2:10:41vamos a retornar una lista vacía.

2:10:45el storage va a estar porque está vacío,

2:10:47entonces la lista va a estar vacía y si

2:10:49no que en realidad esto lo podemos eh

2:10:54lo podemos dejar así porque cuando se

2:10:56inicializa se inicializa vacía. Pero

2:10:57bueno, acá está validada de las dos

2:10:59formas y si no es nulo, quiere decir que

2:11:02tiene algo

2:11:04que como dijimos antes, el local storage

2:11:07almacena extoplano.

2:11:11Entonces nosotros tenemos que hacer el

2:11:13camino inverso que hicimos con el

2:11:15stringify.

2:11:17Tenemos que volver a convertir a objeto

2:11:19ese texto plano.

2:11:21Misma librería Jason. Pero ahora en vez

2:11:24de usar stringify,

2:11:26usamos parcear de texto plano a objeto

2:11:30lista.

2:11:33Entonces este valor

2:11:37lo convertimos en objeto

2:11:40y después se lo asignamos a nuestro

2:11:43array de listas.

2:11:45en listas igual a objeto listo.

2:11:54Sí. Entonces, ya tenemos recuperamos del

2:11:59storage

2:12:00lo que estaba guardado en nuestra clave

2:12:03listas.

2:12:05Y ahora lo que nos falta es llamar esta

2:12:06función,

2:12:08este método.

2:12:13Sí, acá nos dice que lo llamemos en el

2:12:14constructor. ¿Para qué? para que cuando

2:12:16carga el servicio

2:12:18llame

2:12:21a el método cargar storage. Sí,

2:12:25acá dentro le hacemos dis punto cargar

2:12:28storage.

2:12:34Entonces, cuando, como dije recién,

2:12:36cuando se cargue el servicio,

2:12:41cuando se instancie el servicio porque

2:12:42es una clase,

2:12:45va a ejecutar todo lo que esté dentro

2:12:46del constructor

2:12:50y en el constructor está el cargar

2:12:52storage.

2:12:55Ahora venimos acá, vemos si funcionó.

2:12:58Teníamos lista uno. Vamos a ver si ya

2:13:01toma el cambio. Lista dos.

2:13:04Ven. Y lista uno nos había quedado

2:13:07creada de antes

2:13:09y ahora tenemos las dos listas

2:13:13y seguimos agregando. Lista tres

2:13:19creada correctamente. Nosotros

2:13:20actualizamos

2:13:25lista cuatro.

2:13:28Ven. Y ahora hagamos lo que hagamos. Ya

2:13:33está actualizando, está recuperando

2:13:35primero

2:13:36lo que estaba guardado

2:13:39en la clave listas

2:13:42y una vez que lo recuperó sigue la

2:13:44carga, sigue cargando nuevas listas.

2:13:47Esta es una persistencia de datos,

2:13:52nada más que bueno, lo hacemos en el

2:13:54local store.

2:14:00Bien,

2:14:04¿qué más? Seguimos.

2:14:17Cargar storage.

2:14:19Ahora saltando

2:14:25listando actividades.

2:14:32Okay. En realidad

2:14:34listando actividades, ¿no? Lo que vamos

2:14:35a listar ahora son las listas, valga la

2:14:38redundancia. ¿Por qué? porque nosotros

2:14:40las tenemos en el array, pero nos la

2:14:43vemos en la pantalla. ¿Sí? ¿Ven? Lo que

2:14:46tenemos que hacer ahora es trabajar

2:14:49desde el lado de HTML para mostrar todo

2:14:52lo que tenemos en el array.

2:14:57Bien.

2:15:02Eh, bueno, acá en el HTML nos dice que

2:15:04borremos esto. Creo que ya lo habíamos

2:15:06borrado.

2:15:07Sí.

2:15:09En el ion content solo tenemos nuestro

2:15:12botón para agregar listas.

2:15:15Ahora acá arriba lo que vamos a hacer es

2:15:19recorrer

2:15:24el array de listas.

2:15:30Bien, entonces vamos a crear un objeto

2:15:33ion list.

2:15:35va a ser una lista, va a tener íems,

2:15:39¿sí? Por cada íem,

2:15:43sí,

2:15:45por cada objeto que tenga la lista

2:15:48va a crear un íem

2:15:51usamos para recorrer. Dijimos que confor

2:15:53recorríamos listas. En este caso vamos a

2:15:56recorrer nuestro array de listas desde

2:15:58lista service. Ahora sí

2:16:01vamos a necesitar acceder al array.

2:16:06Si tenemos dos caminos, ponemos el array

2:16:10como público

2:16:12o creamos un eh un método que devuelva

2:16:16el array.

2:16:19¿Por qué? Porque si nosotros lo ponemos

2:16:21[carraspeo] público

2:16:24desde donde lo llamemos, vamos a poder

2:16:26hacer lo que querramos, tanto hacer un

2:16:27push

2:16:30para agregar objetos, quitar objetos.

2:16:37Entonces, eso no recuerdo si estaba acá

2:16:39ya, pero la idea, vamos a crearlo ahora

2:16:45vamos a ponerle

2:16:49obtener

2:16:54obtener listas

2:16:57y esto que va a devolver retour de

2:16:59listas.

2:17:03y lo dejamos así para que sea público.

2:17:07Entonces, de esta forma

2:17:11nosotros accedemos a la raya de listas,

2:17:13pero solamente lo podemos recorrer,

2:17:17no podemos eh acceder directamente a la

2:17:21radio.

2:17:26Bien, ¿qué podemos hacer? Em,

2:17:31vamos a crear un objeto nuevo.

2:17:40Vamos a crear acá en el nuestro tab un

2:17:42nuestro propio array de listas.

2:17:45Y en el constructor

2:17:48vamos a cargarlo. Dis listas

2:17:53que es nuestro array.

2:17:56Llamamos a obtener listas.

2:17:58Sí. Entonces, ahora sí solamente vamos a

2:18:03trabajar con nuestras listas.

2:18:06Y acá

2:18:08en vez de llamar al servicio, como

2:18:10estaba en la práctica,

2:18:12nuestra nueva versión va a trabajar con

2:18:16las listas

2:18:19eh del tab.

2:18:30A ver, vamos a guardar a ver si

2:18:32efectivamente

2:18:35funciona bien.

2:18:39Privado. A ver, así vamos que ser

2:18:43público

2:18:45para poder accederlo desde el HTML. Si

2:18:48es privado, solamente se limita al

2:18:50ámbito de clase dentro de nuestra clase.

2:18:56Bien, ahora ven, ya nos tenemos el

2:18:59listado cargado en la pantalla.

2:19:04Con el shifor recorrimos el array de

2:19:08listas de nuestro tabuno.

2:19:12El mismo fue cargado cuando se carga el

2:19:15tabuno en el constructor.

2:19:19Sí. Mediante el método obtener listas

2:19:22del servicio, que fue el que declaramos

2:19:25acá último.

2:19:28Obtener listas.

2:19:30Sí. y el cual retorna

2:19:35las listas del servicio. Entonces, de

2:19:38esta forma solo se puede recorrer las

2:19:42listas y no se modifica el array

2:19:44original.

2:19:47Si podemos modificar el este array en

2:19:49este

2:19:51dentro del tab un podemos hacer lo que

2:19:52querramos, pero no va a impactar sobre

2:19:57Bien. Entonces, una vez que lo tenemos

2:19:58cargado, lo recorremos.

2:20:01Entonces, elfor que hace declara

2:20:05una variable lista item y mediante off

2:20:09cada vez que recorra el listas por cada

2:20:12objeto lo va a asignar.

2:20:15Va asignar un objeto, dos objetos, tres

2:20:17y la cantidad de veces

2:20:20e

2:20:21según la cantidad de objetos que tenga

2:20:24la raya de listas.

2:20:26Y después le estamos diciendo con un ion

2:20:28label, que es una etiqueta,

2:20:30que de cada uno de ese lista íem muestra

2:20:34el título de la lista.

2:20:37Entonces, como tiene cuatro objetos, lo

2:20:40va a recorrer cuatro veces y cada uno lo

2:20:42va a asignar acá. Lista íem, se va a

2:20:45mostrar título.

2:20:47Lista íem, lista dos. Lista íem, lista

2:20:52tres.

2:20:53Lista íem, lista cu.

2:20:57Sí, por cada un por cada pasaje del

2:21:00bucle este objeto se crea nuevo.

2:21:04Se crea nuevo, le asigna el primer

2:21:06objeto, muestra el dato.

2:21:09Segundo pasaje, se crea nuevo,

2:21:14muestra el objeto

2:21:16y así sigue recorriéndolo.

2:21:21Por eso quedemos lista 1, 2, 3 y cuatro.

2:21:24V. Nosotros listamos solamente el título

2:21:27y acá podemos listar lo que querramos.

2:21:30El ID

2:21:33en este caso, ven que es todo cero.

2:21:38Podemos acceder a las propiedades del

2:21:40objeto,

2:21:43pero bueno, lo mejor es obviamente

2:21:44mostrar el título.

2:21:50Bien, ¿alguna duda?

2:22:03Bueno,

2:22:10seguimos.

2:22:15Bien,

2:22:17ahora, ¿qué nos dice? Vamos a agregar

2:22:19opciones.

2:22:21¿Para qué? Porque nosotros podemos o

2:22:24modificar el nombre de la lista o quizás

2:22:27querramos eliminarla. Hoy por hoy no

2:22:30podemos hacer nada, solamente la estamos

2:22:32creando y listando.

2:22:35Entonces tenemos ioniten options,

2:22:38¿sí?

2:22:40el cual le agrega opciones

2:22:45e

2:22:47a nuestro eh listado.

2:22:51Entonces,

2:22:54options, bien, lo vamos a agregar acá

2:22:57abajo.

2:23:04Ese lo borramos y en vez de ionem tiene

2:23:07que ser ion item.

2:23:09Slide, no, que borramos

2:23:12list, ¿no?

2:23:15Eh, este,

2:23:18a ver,

2:23:21ion list, ion item. Acá

2:23:26de cierre y este tiene que ser de

2:23:29apertura.

2:23:33dar formato. Bien,

2:23:36entonces

2:23:38agregamos esta parte, el ion item

2:23:41sliding. Sliding quiere decir que eh ese

2:23:44íem se va a mover

2:23:47para un lado o para el otro.

2:23:50de primero tenemos el listado

2:23:55para mostrar el título. Esto tiene que

2:23:57quedar igual porque si no no va no va a

2:23:58tener que mostrar el dato.

2:24:03Y luego tenemos opciones.

2:24:13Sí,

2:24:16tenemos

2:24:18primera opción

2:24:20item options,

2:24:22que va a ser hacia el inicio, el lado

2:24:25izquierdo.

2:24:28En este caso, la opción va a ser de

2:24:30color amarillo

2:24:32y va a ser editar. Acá cuando se le da

2:24:35click,

2:24:36bueno, acá tenemos que agregar la

2:24:40función editar. Lista.

2:24:43Y acá eliminar.

2:24:48Listo.

2:24:49Sí. Entonces, cuando lo corramos para el

2:24:51lado izquierdo,

2:24:56va a estar el color amarillo,

2:24:59el botón editar.

2:25:01Cuando le vamos critar a editar lista

2:25:05con

2:25:08lista íem.

2:25:10Y ahora que veo esto, debería estar acá

2:25:12abajo.

2:25:15Item sliding.

2:25:19Y esto debería estar

2:25:23Sí,

2:25:29ahora sí.

2:25:35Bien,

2:25:38entonces

2:25:39función editar lista se le va a pasar el

2:25:41íem en el cual hagamos clic

2:25:44porque como tenemos varios

2:25:47de esta forma va a identificar a cuál

2:25:48estamos haciendo clic

2:25:51a pasarle lista el íem es el hace click.

2:25:55Y si lo corremos para el lado de la

2:25:57derecha, ¿ven?

2:26:00en el lado del end de la pantalla

2:26:03va a ser de color rojo. La opción

2:26:06va a llamar a la función eliminar lista

2:26:08y el título va a ser eliminar.

2:26:12Antes de guardar tenemos que declarar

2:26:15estas dos, estos dos métodos. ¿Por qué?

2:26:17Porque si no va a arrojar error.

2:26:19Entonces venimos acá.

2:26:27lista íem, vamos a decir que es de tipo

2:26:32y editar y eliminar.

2:26:40Bien,

2:26:42ya tenemos nuestros métodos declarados y

2:26:43ahora sí podemos guardar el HTP.

2:26:48Compilo correctamente. Vamos a ver si

2:26:52funciona. Bueno, quedó raro.

2:26:56No tenía que borrar algún objeto. Vamos

2:26:58a ver acá cuál quedó.

2:27:02Tenemos item. Ah, okay.

2:27:06Ion item. E

2:27:08item

2:27:12para que dibuje el ítem correctamente.

2:27:15Acá no tenía que borrarlo sino mover el

2:27:18for, el eng for tenía que moverlo acá

2:27:20arriba.

2:27:23E

2:27:34y esto va acá.

2:27:39Ahora sí, iten options.

2:27:42Option.

2:27:45A ver ahora cómo quedó. Perfecto. Bien.

2:27:48Ven. Entonces, si lo corremos para la

2:27:50izquierda tiene el editar. Si lo

2:27:52corremos para la derecha tiene el

2:27:54eliminar.

2:27:55Sí.

2:27:57Y así cada uno de los botones de las

2:27:59listas.

2:28:04Bien.

2:28:06Vamos a verificar que esté llamando

2:28:08correctamente. Vamos a poner acá un

2:28:10console logitar lista.

2:28:14Y acá lo mismo, console lo loog eliminar

2:28:17lista

2:28:18que nos muestre editar en este caso,

2:28:21eliminar este caso y y qué objeto de la

2:28:23raíz se le está pasando.

2:28:26Vamos acá consola.

2:28:29Si editamos la lista un editar lista.

2:28:33Ven, título lista uno.

2:28:37Si queremos eliminar la dos, eliminar

2:28:40lista, lista dos. ¿Ven? La tres,

2:28:44eliminar lista lista tres y editar

2:28:48editar lista lista cuatro. Perfecto. Ya.

2:28:50Entonces, nuestros dos botones funcionan

2:28:53correctamente.

2:28:56Ya de esta forma

2:28:58e

2:29:01tenemos por lo menos en el HTML

2:29:05desarrollado para editar y eliminar la

2:29:07lista.

2:29:09Ahora lo que nos faltaría es trabajar

2:29:11con la lógica para o editar el nombre

2:29:17eliminarla de la ray.

2:29:21Bien,

2:29:24bueno, esto en G4, bueno, ya está

2:29:28importado.

2:29:31Esto ya lo hicimos. Editar lista,

2:29:32eliminar lista. Lo que hicimos recién,

2:29:36lo actualizamos acá. Bien.

2:29:40Bueno, ¿ahora qué vamos a hacer? Vamos a

2:29:42implementar modelos.

2:29:45¿Sí? ¿Por qué?

2:29:47Porque nosotros estamos trabajando con

2:29:49un ANI. La lista

2:29:52sí es de tipo Ani y nosotros queremos

2:29:55darle forma.

2:29:58Sí, en vez que sea de tipo ANI, B,

2:29:59nosotros ya sabemos qué forma va a tener

2:30:01nuestro objeto de lista.

2:30:03Entonces

2:30:06vamos a darle

2:30:08la forma correcta.

2:30:13Bien, acá en apparp

2:30:17llamar models.

2:30:20Sí, esto está en el documento que vimos

2:30:21hoy de las buenas prácticas, la

2:30:24estructura del proyecto

2:30:27models y dentro vamos a crear un archivo

2:30:30listamodel.ts

2:30:34lista.model.ts

2:30:37TS.

2:30:42Y acá lo que vamos a hacer es darle

2:30:47forma a nuestra lista.

2:30:51Formato el documento.

2:30:54Bien.

2:30:57ID va a ser de tipo number. Título tram

2:31:02creada en tipo date terminada en también

2:31:05de tipo date, pero le vamos a agregar el

2:31:07signo de pregunta porque puede ser

2:31:08undefined, ¿sí?

2:31:11o nula

2:31:13y cuando lo creamos va a ser nulo.

2:31:19Completada buuliano y actividades o

2:31:23actividad en realidad

2:31:27eh

2:31:30por ahora va a ser de tipo Ani también.

2:31:34Bien. ¿Y qué nos dice acá?

2:31:37nos está arrojando error porque debe

2:31:39inicializarse cada uno de los valores.

2:31:45Entonces para eso creamos el

2:31:47constructor.

2:31:50Como es una clase,

2:31:52va a tener un constructor.

2:32:02Bien.

2:32:03Y en este constructor,

2:32:06al igual que estamos haciendo en crear

2:32:08lista,

2:32:09solamente le asignamos el nombre de la

2:32:11lista.

2:32:13Entonces, ¿qué va a recibir? Y acá va a

2:32:15recibir el título, el constructor. ¿Para

2:32:18qué? Y para asignárselo a título.

2:32:22Sí, se lo asigna a la propiedad título y

2:32:25el resto lo hacemos igual. Creada en

2:32:28Newes, que es la fecha actual.

2:32:30completado, va a estar en false. Activas

2:32:32un array vacío porque recién se acaba de

2:32:34crear la lista y todavía no se dieron de

2:32:35al de actividades.

2:32:37Y el ID ahora sí lo que vamos a hacer

2:32:40acá le estamos jcodeando un cero.

2:32:44Vamos a hacer que tenga un identificador

2:32:45único.

2:32:47¿Qué vamos a hacer? Y vamos a obtener el

2:32:50tiempo actual, o sea, no solo la fecha,

2:32:52sino la hora con minutos y segundos. Y

2:32:56este va a ser un identificador único.

2:32:58¿Por qué? porque eso no se va a repetir

2:33:00nunca.

2:33:02Entonces, cada vez que se cree, se va a

2:33:04crear con un ID único.

2:33:08Sí, va a ser de tipo number, se va a

2:33:12crear como número

2:33:14y todo esto que vemos acá se va a crear

2:33:18acá.

2:33:20Bien, entonces ya tenemos nuestro modelo

2:33:22de datos.

2:33:26Ahora tenemos que implementarlo.

2:33:36Ah, bueno, acá nos pide primero e vamos

2:33:39a crear el modelo de datos para

2:33:41actividad.

2:33:43Lista model

2:33:45actividadmodel.ts.

2:33:48TS lo mismo.

2:33:57Descripción y completado. Va a ser de

2:34:00tipo stream y tipo buleano. Lo mismo.

2:34:06Ah, bueno, acá no recomendación que dice

2:34:08se actividad

2:34:11actividad

2:34:14constructor. Lo mismo actividad

2:34:18va a tener un título

2:34:21y en este caso va a ser una descripción

2:34:24y se le va a asignar

2:34:26a esta propiedad y completado va a estar

2:34:28en falso.

2:34:30Entonces guardamos y ahora volvemos al

2:34:33al modelo de lista y acá en vez de ser

2:34:35de tipo Ani va a ser de tipo actividad.

2:34:40Tenemos que hacer la importación del

2:34:42modelo

2:34:44actividad. ¿Ven? actividad model.

2:34:47Y ahora sí, esto no va a admitir

2:34:49cualquier cosa,

2:34:51sino que va a admitir solamente una

2:34:53descripción y un bulean. Esa va a ser la

2:34:55forma que va a tener una actividad y

2:34:58esta va a ser la forma que va a tener

2:35:00una lista,

2:35:03un objeto de tipo lista.

2:35:06Bien,

2:35:09ahora vamos a empezar a implementarlo.

2:35:13Ya lo importamos.

2:35:15Ya hicimos la actividad acá.

2:35:19Bien. Y ahora acá en lista service

2:35:23vamos a nuestro servicio y en vez de ser

2:35:25de tipo Ani, dijimos que va a ser de

2:35:27tipo lista.

2:35:31Se hace la importación desde models,

2:35:33lista model.

2:35:36Ahora entonces va a tener esta forma.

2:35:42Y ahora nos va a empezar a arrojar error

2:35:44acá.

2:35:46¿Por qué? Y porque a listas

2:35:50es de tipo lista, no le podemos hacer un

2:35:52push de un objeto X. Si bien tiene la

2:35:56misma forma, el código no sabe que tiene

2:35:58la misma forma.

2:36:01Eso lo sabemos nosotros.

2:36:03Entonces, no nos arroja error. No se

2:36:06puede asignar un argumento de tipo

2:36:08objeto.

2:36:10Esto es un objeto

2:36:13al parámetro de tipo lista. Acá no está

2:36:15diciendo es lista.

2:36:18Sí. Y bueno, acá en actividad dice que

2:36:21está haciendo una está ingresándole una

2:36:23ray vacío también.

2:36:26¿Ven? Hay dos errores.

2:36:34Actividad se declara aquí. Bien,

2:36:39ahora entonces tenemos que salvar esto

2:36:47con esta nueva implementación. Entonces,

2:36:49ya no será necesario definir [carraspeo]

2:36:51cada uno de los atributos al momento de

2:36:53crear el objeto de tipo lista, porque

2:36:55eso ya se está haciendo en el modelo.

2:37:01Para hacer una clase solo debemos crear

2:37:02una nueva instancia. Sí,

2:37:07esto va a desaparecer.

2:37:09Y acá tenemos que hacer new lista.

2:37:17Y el constructor de lista de la clase

2:37:19lista de nuestro modelo nos pide que le

2:37:21pasemos

2:37:23algo que sea de tipo stram, que nosotros

2:37:26sabemos que va a ser el título. Entonces

2:37:28acá tenemos el nombre de la lista y se

2:37:31lo pasamos directamente. Y ahora sí,

2:37:33nuestro objeto lista es de tipo lista. Y

2:37:37ven que ya no nos arroja más error. ¿Por

2:37:39qué? Porque al ray que es de tipo lista,

2:37:41le estamos insertando un objeto de tipo

2:37:44lista. Todo tiene la misma forma.